How to Replace Buttons With Images in Layers Widgets
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.
- To begin, enter Edit Layout mode on the page you want to customize and add a Slider Widget (or expand the existing one.)
- Click on Advanced in the widget Design Bar on the right side.
- Add a Custom Class of app-button
- Add the Custom CSS:
background: url(http://www.yoursite.com/wp-content/uploads/appstore.png) no-repeat;
transition: ease all .3s;
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.
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.