🪜 Creating custom process section in Divi - WordPress Tutorial 2022 - Part 1
Check out our website:
http://samson.digital
Subscribe to our channel:
✅ / @samson.digital
💥Get Powerful Divi Theme:
https://www.elegantthemes.com/affilia...
Join us on social:
FACEBOOK: / motivatesuccess
/ helpmywebsite
Hi there, in this video, I will show you how to visualize process on your website.
This particular module was created for a cleaning company, but if you find icons that fit your own process, you can use it for any other niche.
Creating Visual Process section
👉 Create a new section that contains 4 columns.
👉 Add image to the first column in our case it is icon we are going to use
🙄 Make sure background colours is white in case section is grey or vise versa
👉 Now we need to add some spacing, so we can add some padding.Lets try 40px all four sides
👉 Now lets correct sizing of the section: width should be 70%
👉 Lets add some custom code to create round border, for that we need to go to Advanced settings - Custom CSS - Main Element and choose border-radius:50%;
✅ The reason why we did not use regular radius is that it can cover the image/not only background
👉 While we have Custom CSS open, lets add some CSS code to create a shadow too in Main element : border-radius:50%;
box-shadow: 0 0 5px rgba(0,0,0,0.4);
👉 Now lets dd some code for hover over:
border-radius:50%;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
👉 Let's add some steps
✅So for that we would need to add text module
👉 Let add blue background colour
👉 We will have to change text colour to white/ Font Weight - bold and Text size to 28px
👉 To create round background we would need to go to Sizing add Width 40px and Height 40px
👉 Lets go to Border and add 50pz on each side for Rounded corners.
👉 To set the text in the middle we would need to open Spacing:Padding- Top 7px Left 10px
👉 Let's move our step to the top of the icon
👉 For that we would need to go to Advanced - Position - Absolute Top left corner
👉 Let's duplicate our columns
👉 Now we just need to edit steps and icons :
for step 2 Spacing is top 7px - Left 12px
For step 3 Spacing is top 7px - Left 12px
In the next video I will explain how to add the lines that are connecting steps.
#divibuilder
#elegantthemes
#wordpresstutorial2022
#cleaningwebsite
#visualization
#customwebsite
#wordpresstraining
#css
#webdesign