Layers Help & Support

Layers 2.0.10 Update

Layers 2.0.10 Update

Removing the Envato Marketplace listings.

  • Fixed Image Ratio button in the Post widget
  • Removed redundant Envato Market listings


How to Replace Buttons With Images in Layers Widgets

How To  Tutorials  Last Updated: Time to Read: 1 minute

This tutorial uses techniques learned in How to Use the Advanced Widget Design Bar Option to Add Custom Styling to Widgets to restyle a Layers Slider Widget button to use an App Store button graphic from Apple.

  1. To begin, enter Edit Layout mode on the page you want to customize and add a Slider Widget (or expand the existing one.)
  2. Click on Advanced in the widget Design Bar on the right side.
  3. Add a Custom Class of app-button
    • advanced-class-only
  4. Add the Custom CSS:

Line 1: Here we combine our custom class app-button with the button’s class button. Depending how your Slider is configured, you may need to use a more specific selector for the button, such as .button.btn-large . You can reference common class combos here.

Line 2: Replace the URL here with the File URL to your image in the Media Library. You can grab this by entering the Media Library from one of the widget options, or direct from your WordPress Admin in a new tab. Edit the image and copy the File URL from the right.

You can download official app store buttons from Apple and Google on their websites.

Line 3: We don’t want the button text showing, if there is any.

Line 5-6: The height  and width  should match the dimensions of your button image.

Line 7: CSS transitions allow the button to have a nice effect on hover.

Line 8: We want to round the corners of our button – this is optional, of course.


Learn more about Customizing Your Site With CSS 


Did you know?

Our friends at Jetpack are doing some incredible work to improve the WordPress experience. Check out Jetpack and improve your site's security, speed and reliability.