By 
In today’s tutorial, we’ll show you how you can dynamically display vacancies on your Careers page with Divi blog module .
Table of Contents
Dynamic job list section with the Divi blog module
1. Create a Careers page
Add a new page and switch to Visual Builder
Start by creating a new page, give your page a title, and move on to Visual Builder.
2. Start creating the Careers page on the frontend
Add the first section
Gradient background
Add the first section to the page, open the section settings, and use a gradient background.
- Color 1: # ff6600
- Color 2: # fbff30
- Gradient direction: 126deg
Lower divider
Also use a bottom section divider.
- Separation Style: Search List
- Divider height: 8vw
- Horizontal repeat of the divider: 3x
- Arrangement of separators: under section content
Spacing
Complete the section settings by adding bottom padding.
- Bottom padding: 200px
Add a new row
Column structure
Continue by adding a new row to the section using the column structure:
Add a text module to the column
Add H1 content
Add a text module to the row column with H1 content of your choice.
H1 text parameters
Switch to the module design tab and change the H1 text settings accordingly:
- Title font: Montserrat
- Title font weight: heavy
- Header Text Color: #ffffff
- Header Text Size: 8rem (desktop), 4rem (tablet), 2.5rem (phone)
Add a separation module to the column
Visibility
Just below the text module, add a separator module. Make sure the “Show Separator” option is enabled.
- Show separator: Yes
Line
Then change the line color of the module.
- Line Color: #ffffff
Sizing
And complete the module parameters by changing the sizing parameters.
- Divider Weight: 8px
- Width: 30%
Add section # 2
Add another regular section to the page.
Add a new row
Column structure
Add a new row to the section using the column structure:
Add a text module to the column
Add H2 content
Add a text module to the column of the row and insert some H2 content of your choice.
H2 text parameters
Modify the module’s H2 text parameters as follows:
- Title 2 Police: Montserrat
- Item 2 Police weight: heavy
- Text color of item 2: # ffa500
- Heading 2 Text Size: 2.3rem
Add a separation module to the column
Visibility
The next module we need in this column is a separation module. Make sure the “Show Separator” option is enabled.
- Show separator: Yes
Line
Then change the line color of the module.
- Line Color: # ffa500
Sizing
And complete the module parameters by changing the divider weight and maximum width in the sizing parameters.
- Divider Weight: 6px
- Maximum width: 80 px
Add blog module to column
Contents
To display the different vacancies, we will use a blog module that we will customize according to our needs. Make sure the following content settings apply:
- Message Type: Messages
- Include categories: Marketing
- Extract length: 150
Elements
In the item settings, the only two options we enable are:
- Show more button: Yes
- Extract from the show: Yes
Disposition
Switch to the module design tab and make sure you are using a full width layout.
- Layout: full width
Title text settings
Change the title text settings as well.
- Title level: H3
- Title font: Montserrat
- Title text size: 1.5rem
Body text parameters
Then change the body text settings.
- Body font: Raleway
- Body text size: 1.1rem
- Body Line Height: 2.1em
Learn more Text settings
With text settings learn more.
- Find out more Police: Montserrat
- Learn more Font style: Uppercase
- Find out more Text color: #ffffff
- Find out more Text size: 1rem
Spacing
Add custom margins and padding values to the spacing settings.
- Left margin: 100px (desktop), 50px (tablet), 0px (phone)
- Top padding: 0px
- Bottom padding: 0px
Learn more Button CSS
And complete the module settings by adding CSS play buttons in the advanced tab.
max-width: 200px;text-align: center;padding: 20px;margin-top: 40px;border-radius: 100px;background-image: linear-gradient(126deg,#ff6600 0%,#fbff30 100%)!important;
Clone the row as many times as needed
Once you have completed the row and all of its modules, you can clone it as many times as you want, depending on the number of departments in your company.
Edit the content of the text module
Make sure to edit the H2 content of each duplicate row.
Edit blog mod categories
With the categories of the Blog module.
Read more: How to add a reclosable sliding call to action on divi
Add a code module to the column of the last row
Insert CSS code to style open workstations individually
To complete the design, we’ll add a code module to the last line of our page and insert the following lines of CSS code:
<style>.et_pb_posts .et_pb_post {box-shadow: 0px 2px 50px 0px rgba(0,0,0,0.09);padding: 50px;border-radius: 20px;background-color: #fff;}</style>
3. Save the page design and display the result
Once you are done designing the page, you can save any changes, exit the Visual Builder, and view the result!
Final thoughts
In this tutorial, we have shown you how to present these dynamic and open articles on your Careers page using the Divi Blog module.
For website maointenance service contact us.
