divi blog module

In today’s tutorial, we’ll show you how you can dynamically display vacancies on your Careers page with Divi blog module .

divi blog module

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.

Leave a comment

echo "";