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