In this video I show you how to add a back-stretched image to any part of a home page. It will depend on the theme as to how this looks. Some child themes are more suitable for this treatment than others.
In the video I am using the Enterprise Pro child theme as an example, and I’m adding the backstretch image to the area of the page described by the class .home-top. But you can do it to any part of the page that you want.
I used the Genesis Club Pro plugin to do it. The steps are as follows
- Find The Relevant HTML Element
- Identify the part of the page (by finding the CSS selector associated with it) where you want to add the backstretch image to be applied. Some examples of relevant selectors might be something like :
However which one you use will depend on your theme.
- Prepare an Image
- Upload a suitable image to either your media library or Amazon S3, say. Then get hold of the image URL.
- Locate A Suitable Widget Area
- Assuming you want the backstretch image to show up on the home page only, drag a Genesis Club Backstretch widget to a widget that is available on the home page only.
Or you can drag it to any widget (it does not matter which one as the widget displays a back stretched image on the CSS section you specify. It does not affect the widget it is dragged to), and use the Widget Logic plugin to determine which pages or posts the backstretch is applied to.
It’s a flexible, versatile and simple solution once you understand how to use it.