In a Divi forum I’m a member of someone asked how it could be possible to create the following layout/buttons:
Initial thoughts in the forum were to try and use a speciality section, or to try and use an image module with a text module next to it, along with other suggestions.
Thinking on it for a little bit I presented another method of creating this, using only a single text module for each button, and I thought it’d be worthwhile posting it here in full instead of the quick response in the forum.
Preview
Before I get into the detail of the horizontal image buttons, here’s a preview of what they will look like once I’m done:
Creating the Button
1. Create a new row
Start by creating a new row with two columns, similar to the original layout the person was asking about. This isn’t really important but it’ll show how the final links look compared to the original layout.
2. Add a text module
Add a text module to the second column and add the text you want to show in the button.
3. Add a background image to the text module
Open the Background toggle and add the required image to background, leaving the background settings with their default values.
4. Add a gradient background to the text module
I’m going to use a gradient background above the background image to create the button colour effect.
Select the background gradient and do the following:
- Set the first colour to be transparent
- Set the second colour to be the button colour
- Set the gradient direction to 90deg
- Set the start position to 70%
- Set the end position to 70%
- Set place the gradient above background image to yes
Set the gradient hover colour.
5. Add a link to the text module
Open the Link toggle and enter the required link.
6. Customise the text module’s text
Go to the Design tab, open the Text toggle and do the following:
- Set the font weight to ultra bold
- Set the text colour to white
- Set the line height to 1.3em
- Set the text alignment to be centre aligned
7. Customise the text module’s spacing
Open the Spacing toggle and do the following:
- Set the top padding to 40px
- Set the bottom padding to 40px
- Set the left padding to 70%
- Set the mobile left padding to 50%
8. Add the rounded corners
Open the Border toggle and do the following:
- Set the top left rounded corner to 10px
- Set the bottom left rounded corner to 10px
9. Add the box shadow
Open the Box Shadow toggle and select the top right shadow style, leaving everything else set to their default values.
10. Add the hover transform
Open the Transform toggle and do the following:
- Select the Transform Translate feature
- Select the hover state
- Set the vertical offset to -10px
And We’re Done
A simple solution to what initially looked more complicated. Once you’ve created the button you can easily copy the module and change the background image and gradient colour for more buttons.
