Every week, we provide you with a new and free Divi layout pack which you can use for your next project. Along with every layout pack, we also share a use case thatβll help you take your website to the next level.
This week, as part of our ongoing Divi design initiative, weβre going to show you how to create an elegant process page using Diviβs Architecture Firm Layout Pack. To create this page, weβll reuse elements that are already present within the layout pack and modify them along the way. Weβll also create a vertical βdividerβ or βtimelineβ that will create a connection between the steps and will help your visitors follow the process. You can create as many steps as you need for your process using this method. Letβs get started!
- 1 Preview
- 2 Part 1: Create New Page Using Architecture Firm Landing Page
-
3
Part 2: Modify Process Step Section
- 3.1 Step 1: Locate Section Weβll Use & Modify
- 3.2 Step 2: Change Section Spacing
- 3.3 Step 3: Remove Image Module
- 3.4 Step 4: Change Column Structure
- 3.5 Step 5: Change Row Spacing
- 3.6 Step 6: Add Box Shadow to Row
- 3.7 Step 7: Change Text Alignment of Text Module #1
- 3.8 Step 8: Remove Negative Left Padding of Divider Module
- 3.9 Step 9: Use Center Module Alignment for Divider Module
- 3.10 Step 10: Change Text Orientation of Text Module #2
- 3.11 Step 11: Change Sizing of Text Module #2
- 3.12 Step 12: Use Center Module Alignment for Button Module
- 4 Part 3: Add Vertical βDividerβ
- 5 Part 4: Clone Section as Frequently as Needed
- 6 Preview
- 7 Final Thoughts
Preview
Before we dive into the use case tutorial, letβs take a quick look at the end result on different screen sizes:
Part 1: Create New Page Using Architecture Firm Landing Page
Step 1: Create New Page & Switch over to Visual Builder
Start by creating a new page, giving your page a title and switching over to Visual Builder.
Step 2: Upload Architecture Firm Landing Page
We are using the Architecture Firm Layout Packβs landing page to create the process page. Itβll help us maintain the same style and itβll also save us a lot of time. Go to your premade layouts, scroll down until you come across the Architecture Firm Layout Pack and use the landing page layout.
Step 3: Remove Unnecessary Sections
This landing page contains quite a few sections. Go ahead and delete the ones you donβt think are necessary. Weβve deleted the following sections from our layout:
Part 2: Modify Process Step Section
Step 1: Locate Section Weβll Use & Modify
The one section weβll definitely reuse during this tutorial is the following one:
Step 2: Change Section Spacing
Start by opening the settings of this section and add β0pxβ to the bottom padding of it.
Step 3: Remove Image Module
Remove the Image Module in the first column next.
Step 4: Change Column Structure
And change the column structure into a row with one column only.
Step 5: Change Row Spacing
Open the row settings and add the following custom padding:
- Top & Bottom Padding: 60px
- Left & Right Padding: 50px (Tablet & Phone Only)
Step 6: Add Box Shadow to Row
Weβll also add some box shadow to our row to create depth. In this tutorial, weβve enabled the first box shadow without modifying its default settings.
Step 7: Change Text Alignment of Text Module #1
We want to center all the modules of this row, starting with the first Text Module. Open its settings and enable center Text Orientation.
Step 8: Remove Negative Left Padding of Divider Module
Open the settings of the Divider Module next and remove the negative left padding in the spacing settings by adding β0pxβ instead.
Step 9: Use Center Module Alignment for Divider Module
Weβll also use center Module Alignment for this Divider Module.
Step 10: Change Text Orientation of Text Module #2
Next, open the Text Module containing all the info and use center Text Orientation.
Step 11: Change Sizing of Text Module #2
Weβll also make the width of this Text Module smaller on desktop using the following settings:
- Width: 54% (Desktop), 99% (Tablet & Phone)
- Module Alignment: Center
The last module in your row, the Button Module, needs center Button Alignment as well. At this point, all of your modules are centered and we can move on the next part.
Part 3: Add Vertical βDividerβ
Step 1: Add New One-Column Row to Existing Section
The next part of this tutorial focuses on connecting the different steps to one another. Weβre going to use a Text Module for that and place it in a new row right below the previous one weβve edited. Choose the following column structure for it:
Step 2: Modify Row Spacing
Before adding any modules, open the row settings and add β0pxβ to the top and bottom padding of this row.
Step 3: Add Text Module to New Row
Continue by adding a Text Module to the column of this row. Weβre going to use the following characters within the content box thatβll appear as a vertical line once weβre done editing it:
|
|
|
|
|
Step 4: Text Settings
Thereβs one thing, in particular, thatβll help you make this Text Module overlap rows. Weβre talking about the Text Line Height. The default value presses your content together when thereβs a huge Text Size involved. So, donβt modify the Text Line Height value and use the following text settings instead:
- Text Font Weight: Ultra Bold
- Text Color:Β rgba(194,171,146,0.04)
- Text Size: 600px
- Text Orientation: Center
Part 4: Clone Section as Frequently as Needed
Step 1: Clone Section
Weβre done with the first process step! One section contains all the needed elements. Go ahead and clone this section as many times as you need (depending on your number of steps in the process).
Step 2: Change Content
Of course, you can change the content according to your own website. Weβre using the first Text Module to indicate the step and the second Text Module to tell more about that step and its role in the process.
Step 3: Remove Vertical Divider Row of LastΒ Process Section
Once you hit the last section, and thus the last step, on your page, you will need to make some small modifications to it. First of all, weβre going to remove the row containing our vertical divider. We donβt need this row since thereβs no other step following this section.
Step 4: Remove Zero Bottom Padding From Last Section
Weβll also remove the β0pxβ bottom padding that was assigned to the bottom padding of the section. This will allow for the box shadow to show up at the bottom as well.
Preview
Thatβs it! Weβve gone through all the steps. Letβs take a final look at the result on different screen sizes:
Final Thoughts
In this use case blog post, we have shown you how to create a stunning process page using Diviβs Architecture Firm Layout Pack. You can personalize this process page and include as many steps as you need. This use case is part of our ongoing Divi initiative where our design team shares a new layout pack with you each and every week. If you have any questions, make sure you leave a comment in the comment section below!
This is a great design but even with following the steps precisely my template is not looking like what is shown in screenshots in the blog. Specifically, in the screenshots above there is a space between the bottom of the first section module and the top of the second. However, that is not the case in my template and no matter the amount of tweaking I do the top or bottom padding I cannot get that space. I only get it when tweaking the margins but that has a different effect I do not like.
I agree with all the above. Plus, I thought one could not have a negative padding? “. . . remove the negative left padding . . .”
If the demo was included we could then at least add it to our site and try and figure it out as its complicated.
I think some of this examples are way too complicated for some people, I think examples like this one would be better suited as custom Divi modules, that would ease the workflow and as the result would save lot of time π
Donjete:
I love this! Thanks so much!
Once again you lost me.
In step 11, a section headed Design suddenly appears, where I expected the Exteriors section to show up. Where did the Design section come from? should we create it?
You talk about Text Module 2; the first time it shows the Exteriors section, and in the next step it shows the Design section. Can you give us beginners an explanation of this?