To recreate the 3 homepage features underneath the hero image, read on.
![](https://www.commercegurus.com/wp-content/uploads/2018/12/hero_features_doc_1.jpg)
Step One
First, within the Elementor page builder create a three column layout.
![](https://www.commercegurus.com/wp-content/uploads/2018/12/hero_features_doc_2.jpg)
Step Two
Next, drag and drop the image widget from the left Elementor sidebar into one of the columns.
![](https://www.commercegurus.com/wp-content/uploads/2018/12/hero_features_doc_3.jpg)
Step Three
Now, add your own image to the ‘Choose image‘ field. You should change the Caption to Custom Caption and paste the following into the input box below it.
<strong>Men’s Shirts</strong><em>from $40</em><span>Shop Now</span>
Also, change the ‘Link to’ to Custom URL and add a # – replacing this with the link you want the feature to go to.
![](https://www.commercegurus.com/wp-content/uploads/2018/12/hero_features_doc_4.jpg)
Step Four
Finally, switch to the Advanced tab at the top. Within the CSS Classes field add: image-feature
Done!
![](https://www.commercegurus.com/wp-content/uploads/2018/12/hero_features_doc_5.jpg)
Change the overlay opacity
You can adjust the dark layer over the image with a small snippet of CSS, added to: Appearance > Customize > Additional CSS
.
1 2 3 |
body .image-feature a::before { background-color: rgba(0,0,0,0.05); } |
The last number 0.05 reduces it to 5% – the theme default is 0.45 – or 45% opacity.
If the features are difficult to read
Sometimes it can look like there is a dark layer over the entire image, which makes it difficult to read.
Firstly, ensure you have followed Step 6 of the install guide.
Disable default colors and disable default fonts must be ticked within Elementor > Settings
If there is still an issue change the image caption to white by editing the image and clicking on the Style tab.
![Change caption color in Elementor](https://www.commercegurus.com/wp-content/uploads/2021/02/elementor-caption-color.jpg)
You can change the caption text color there.