Skip to Main Content

How to create a dynamic job list section with the Divi Blog module

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

In today's tutorial, we'll show you how you can dynamically display vacancies on your Careers page. Let's start.

Result overview

Before we dive into the tutorial, let's take a quick look at the result on different screen sizes.

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 go to Visual Builder.

Create a divi career page

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
Create a section with a gradient background

Lower divider

Also use a lower section divider.

  • Style of separation: Search in the list
  • Divider height: 8vw
  • Horizontal repetition of the divider: 3x
  • Separator layout: under section content
Divi section adjustment

Spacing

Complete the section parameters by adding lower padding.

  • Bottom padding: 200px
Divi section bottom spacing

Add a new line

Column structure

Continue adding a new line to the section using the following column structure:

Choose divi layout

Add a text module to the column

Add H1 content

Add a text module to the row column with H1 content of your choice.

Add text section

H1 text settings

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
Add separator module

Line

Then change the line color of the module.

  • Line color: #ffffff

sizing

And complete the module parameters by modifying the dimensioning parameters.

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

  • Divider weight: 8px
  • Width: 30%

Add section # 2

Add another regular section to the page.

Add a new line

Column structure

Add a new line to the section using the following column structure:

dynamic careers

Add a text module to the column

Add H2 content

Add a text module to the row column and insert H2 content of your choice.

Add divi text module

H2 text settings

Modify the H2 text parameters of the module as follows:

  • Title 2 Police: Montserrat
  • Item 2 Weight of the policy: heavy
  • Text color of item 2: # ffa500
  • Title 2 Text size: 2.3rem
Customization color section text divi

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
Add divi separator

Line

Then change the line color of the module.

  • Line color: # ffa500
Customize color separator divi

sizing

And complete the module parameters by modifying the weight of the divider and the maximum width in the dimensioning parameters.

  • Divider weight: 6px
  • Maximum width: 80 px
Separator configuration

Add a blog module to the 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:

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

  • Message type: Messages
  • Include Categories: Marketing
  • Extract length: 150
Add a blog module

Element

In the parameters of the elements, the only two options that we activate are the following:

  • Show more button: Yes
  • Excerpt from the show: Yes
Divi blog module configuration 1

Disposal

Switch to the module design tab and make sure you're using a full-width layout.

  • Layout: full width
Blog module layout configuration 1

Title text settings

Also change the title text settings.

  • Title level: H3
  • Title font: Montserrat
  • Title text size: 1.5rem
Blog module text configuration

Body text settings

Then change the body text settings.

  • Body Police: Raleway
  • Text body size: 1.1rem
  • Height of the body line: 2.1em
Blog module font configuration

Learn more Text settings

With the text settings learn more.

  • Read more Police: Montserrat
  • Learn more Font style: Capital
  • Learn more Text color: #ffffff
  • Read more Text size: 1rem
Configuration read more blog module 1

Spacing

Add custom margins and padding values ​​to the spacing settings.

  • Left margin: 100px (desktop), 50px (tablet), 0px (phone)
  • Upper padding: 0px
  • Bottom padding: 0px
Spacing configuration

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;

Custom code blog module

Clone the line as many times as necessary

Once you have completed the line and all of its modules, you can clone it as many times as you like, 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 line.

Modifying the content of the divi text

Edit categories of blog modules

With the categories of the Blog module.

dynamic careers

Add a code module to the column of the last line

Insert CSS code to stylize individual open workstations

To finish the design, we will add a code module to the last line of our page and insert the following lines of CSS code:

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

<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>

Add code css divi

3. Save the page design and display the result

Once you are done designing the page, you can save all the changes, exit the Visual Builder and view the result!

Final result

Now that we've gone through all of the steps, let's take a final look at how it looks on different screen sizes.

Latest 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. Please feel free to leave a comment in the comments section below.

This article features 1 comment

  1. hello, I'm at the part where you have to insert code, but when I save and go to the site, the style is not applied and the code appears online without the style tags. Thank you for your help.

    Have a good day !

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
0 shares
Share
tweet
Save