Services Section Layout with Hover Effect
Are you looking for a unique way to present your services (or any kind of introductory information)? If so, this layout may be for you!
This fullwidth section layout incorporates Divi text, image and call to action modules, and includes a special row hover effect that changes the background colour of the row, and flips the image icons.
The customized icons are included with this free layout, or you can replace them with your own png icons.
Installation and Usage Instructions
PLEASE NOTE: You will need to have the WordPress Divi Theme installed and activated on your site in order to use this layout. A good knowledge of working with Divi, and of editing CSS is also recommended in order to modify this layout.
- Install the layout
Download and unzip the layout file(s) onto your computer. Create a new page on your site and use the Divi portability function to import the layout json file into your page. NOTE: Do not upload the layout to your Divi Library.
- Move the supplied code (optional)
The imported file includes the layout css in a code module at the top of the page. You can leave it here, or you can copy the css to your child theme css file, to the Divi Theme Options > Custom CSS box, or to the Divi page specific css box. When you have copied the code module content you can then delete the section containing the module.
You can now save the section layout to your Divi library if desired, so that you can add it to an existing page on your site.
- Add your images and content
Edit the content modules to add your content and links. Edit the module settings to change colours and fonts to match your site.
The customized icons are included with the layout download, but if desired you can change these to your own icons to better reflect the content you are using it for. You should use transparent png files of a similar size: 100px in width.
Because Divi does not currently have the option to set hover colours in the module settings, the hover colours need to be set in the supplied css. The css is annotated so that you can see where you need to change the colours. Additionally, the mobile version of the layout reorders the modules so that they make more sense when viewing on a mobile device. Therefore the css code also includes a colour change to the mobile version – you will also see this annotated in the css.
0 Comments