How to Create a Dynamic Careers Job Listing Section with Divi’s Blog Module

Posted on December 26, 2019 by in Divi Resources | 1 comment

How to Create a Dynamic Careers Job Listing Section with Divi’s Blog Module

In a previous Divi tutorial, we’ve shown you how to create a completely dynamic open job position template with Divi’s Theme Builder and the Advanced Custom Fields plugin. In today’s tutorial, we’ll show you how you can dynamically feature the open job positions on your careers page. This tutorial is a sequel to the open job position template post, so make sure you recreate the template first and then come back to this tutorial.

Let’s get to it.

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.

Desktop

dynamic careers

Mobile

dynamic careers

Download The Dynamic Careers Job Listing Layout for FREE

To lay your hands on the free dynamic careers job listing layout, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

1. Add Careers Page

Add New Page  & Switch Over to Visual Builder

Start by creating a new page, giving your page a title and switching over to Visual Builder.

dynamic careers

2. Start Building Careers Page on the Frontend

Add Section #1

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

dynamic careers

Bottom Divider

Use a bottom section divider as well.

  • Divider Style: Find in List
  • Divider Height: 8vw
  • Divider Horizontal Repeat: 3x
  • Divider Arrangement: Underneath Section Content

dynamic careers

Spacing

Complete the section settings by adding some bottom padding.

  • Bottom Padding: 200px

dynamic careers

Add New Row

Column Structure

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

dynamic careers

Add Text Module to Column

Add H1 Content

Add a Text Module to the row’s column with some H1 content of your choice.

dynamic careers

H1 Text Settings

Move on to the module’s design tab and change the H1 text settings accordingly:

  • Heading Font: Montserrat
  • Heading Font Weight: Heavy
  • Heading Text Color: #ffffff
  • Heading Text Size: 8rem (Desktop), 4rem (Tablet), 2.5rem (Phone)

dynamic careers

Add Divider Module to Column

Visibility

Right below the Text Module, add a Divider Module. Make sure the ‘Show Divider’ option is enabled.

  • Show Divider: Yes

dynamic careers

Line

Change the module’s line color next.

  • Line Color: #ffffff

dynamic careers

Sizing

And complete the module’s settings by changing the sizing settings.

  • Divider Weight: 8px
  • Width: 30%

dynamic careers

Add Section #2

Add another regular section to the page.

dynamic careers

Add New Row

Column Structure

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

dynamic careers

Add Text Module to Column

Add H2 Content

Add a Text Module to the row’s column and insert some H2 content of your choice.

dynamic careers

H2 Text Settings

Modify the module’s H2 text settings as follows:

  • Heading 2 Font: Montserrat
  • Heading 2 Font Weight: Heavy
  • Heading 2 Text Color: #ffa500
  • Heading 2 Text Size: 2.3rem

dynamic careers

Add Divider Module to Column

Visibility

The next module we need in this column is a Divider Module. Make sure the ‘Show Divider’ option is enabled.

  • Show Divider: Yes

dynamic careers

Line

Modify the module’s line color next.

  • Line Color: #ffa500

dynamic careers

Sizing

And complete the module’s settings by changing the divider weight and max width in the sizing settings.

  • Divider Weight: 6px
  • Max Width: 80px

dynamic careers

Add Blog Module to Column

Content

To display the different open job positions, we’ll use a Blog Module that we’ll customize to our needs. Make sure the following content settings apply:

  • Post Type: Posts
  • Include Categories: Marketing
  • Excerpt Length: 150

dynamic careers

Elements

In the elements settings, the only two options we’re enabling are the following ones:

  • Show Read More Button: Yes
  • Show Excerpt: Yes

dynamic careers

Layout

Move on to the module’s design tab and make sure you’re using a fullwidth layout.

  • Layout: Fullwidth

dynamic careers

Title Text Settings

Change the title text settings too.

  • Title Heading Level: H3
  • Title Font: Montserrat
  • Title Text Size: 1.5rem

dynamic careers

Body Text Settings

Then, modify the body text settings.

  • Body Font: Raleway
  • Body Text Size: 1.1rem
  • Body Line Height: 2.1em

dynamic careers

Read More Text Settings

Along with the read more text settings.

  • Read More Font: Montserrat
  • Read More Font Style: Uppercase
  • Read More Text Color: #ffffff
  • Read More Text Size: 1rem

dynamic careers

Spacing

Add some custom margin and padding values to the spacing settings.

  • Left Margin: 100px (Desktop), 50px (Tablet), 0px (Phone)
  • Top Padding: 0px
  • Bottom Padding: 0px

dynamic careers

Read More Button CSS

And complete the module’s settings by adding some read more button CSS 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;

dynamic careers

Clone Row as Many Times as Needed

Once you’ve completed the row and all its modules, you can clone it up to as many times as you want, depending on how many departments your company has.

dynamic careers

Change Text Module Content

Make sure you change the H2 content of each duplicate row.

dynamic careers

Change Blog Module Categories

Along with the Blog Module categories.

dynamic careers

dynamic careers

Add Code Module to Last Row’s Column

Insert CSS Code to Style Open Job Positions Individually

To complete the design, we’re going to add a Code Module to the last row on 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>

dynamic careers

3. Save Page Design & View Result

Once you’ve completed the page design, you can save all changes, exit the Visual Builder and view the result!

dynamic careers

Preview

Now that we’ve gone through all the steps, let’s take a final look at the outcome across different screen sizes.

Desktop

dynamic careers

Mobile

dynamic careers

Final Thoughts

This tutorial is a sequel to a previous tutorial, where we’ve shown you how to create an open job position template. In this tutorial, we’ve taken it a step further and we’ve shown you how to feature those dynamic open job positions on your careers page using Divi’s Blog Module. You were able to download the JSON file for free as well! If you have any questions or suggestions, feel free to leave a comment in the comment section below.

If you’re eager to learn more about Divi and get more Divi freebies, make sure you subscribe to our email newsletter and YouTube channel so you’ll always be one of the first people to know and get benefits from this free content.

Premade Layouts

Check Out These Related Posts

1 Comment

  1. Thanks Donjete Vuniqi. So glad Divi is catching up…very soon I won’t be needing a plugin for “Job listing” website

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today

Pin It on Pinterest