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.

List of careers 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 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
  • Arrangement of dividers: under the contents Section
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 contents H1 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)
Divi text customization

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
Divi separator module color customization

sizing

And complete the module parameters by modifying the dimensioning parameters.

  • Divider weight: 8px
  • Width: 30%
Divi separator width

Add section # 2

Add another regular section to the page.

Add divi normal section

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 text contents H2 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:

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

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

Final result

Latest Thoughts

In this tutorial, we've shown you how to showcase these dynamic, open-ended articles on your Careers Page using the Blog module of Divi. Feel free to leave a comment in the comment section below.