When you’re using the Divi Theme Builder in combination with dynamic content, you’ll quickly find yourself replacing plugins with self-made templates. In today’s tutorial, we’ll show you how to create a completely dynamic job opening post template using the Divi Theme Builder and an ACF fields group. This dynamic job opening post template is fully customizable and you’ll be able to download the JSON file for free as well!

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

Mobile

open job position template

Download The Job Opening Post Template for FREE

To lay your hands on the free job opening post template, 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 Post Categories

Go to Post Categories

The first part of creating the open job position template is adding new post categories that you’ll use for the open job positions you add. Go to the post categories inside your WordPress dashboard.

open job position template

Add Open Job Position Categories

Add a parent category and a separate category for each department.

  • Job Opening
    • Communications
    • Design
    • Development
    • Marketing

open job position template

2. Install ACF & Setup Project Fields

Install & Activate ACF

Continue by installing and enabling the free Advanced Custom Fields plugin.

open job position template

Set up Fields Group

Set up a new fields group by going to your WordPress Dashboard > Custom Fields > Add New.

open job position template

We want the fields group to appear exclusively on the posts that are part of the parent category we added in the previous part of this tutorial. To do that, make sure the following rules apply to the fields group:

  • Post Type is equal to Post and
  • Post Category is equal to Job Opening

open job position template

Add Fields

Once the fields group has been created, it’s time to add the different fields. To recreate the exact same template as in the preview of this tutorial, you’ll need the following custom fields:

  • Responsibilities
    • Field Label: Responsibilities
    • Field Type: Text Area
  • Required experience
    • Field Label: Required experience
    • Field Type: Wysiwyg Editor
  • Required skills
    • Field Label: Required skills
    • Field Type: Wysiwyg Editor
  • Bonus qualifications
    • Field Label: Bonus qualifications
    • Field Type: Wysiwyg Editor
  • Location
    • Field Label: Location
    • Field Type: Text
  • Job type
    • Field Label: Job type
    • Field Type: Checkbox
    • Choices: Full-time + Part-time + Freelance (new line for each choice)
  • Apply redirect
    • Field Label: Apply redirect
    • Field Type: Url

open job position template

3. Add New Blog Post

Add Open Job Position Title, Short Description & Categories

Once you’ve completed the custom fields group and all its fields, it’s time to create a sample open job position post. Enter the title, job description and select the categories.

open job position template

Fill in All Custom Fields

Continue by completing all the custom fields.

open job position template

open job position template

4. Create New Template

Go to Divi Theme Builder & Add New Template

Once your sample blog post is in place, it’s time to create the open job position template! To do that, navigate to the Divi Theme Builder and click on ‘Add New Template’.

open job position template

Use On

Use the template on posts in the Job Opening category.

open job position template

5. Start Building Template Body

Now, start building the design by clicking on ‘Add Custom Body’ and selecting ‘Build Custom Body’. This will redirect you to the template editor.

open job position template

Section #1

Gradient Background

Inside the Divi template editor, you’ll notice a section. Open that section and add a gradient background.

  • Color 1: #ff6600
  • Color 2: #fbff30
  • Gradient Direction: 126deg

open job position template

Bottom Divider

Add a bottom divider to the section next.

  • Divider Style: Find in list
  • Divider Height: 8vw
  • Divider Arrangement: Underneath Section Content

open job position template

Spacing

And include some bottom padding as well.

  • Bottom Padding: 400px

open job position template

Add Row #1

Column Structure

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

open job position template

Add Blurb Module to Column 1

Dynamic Content

Time to start adding modules! The first module we need in column 1 is a Blurb Module. Select the location dynamic content for the title box and leave the content box empty.

  • Title: Location

open job position template

Select Icon

Continue by selecting an icon.

open job position template

Icon Settings

Move on to the design tab and change the icon settings as follows:

  • Icon Color: #ffffff
  • Image/Icon Placement: Left
  • Use Icon Font Size: Yes
  • Icon Font Size: 25px

open job position template

Title Text Settings

Modify the H3 text settings as well.

  • Title Heading Level: H3
  • Title Font: Lato
  • Title Text Color: #ffffff
  • Title Text Size: 1.4rem

open job position template

Animation

Lastly, remove the icon animation in the animation settings.

  • Image/Icon Animation: No Animation

open job position template

Clone Blurb Module & Place Duplicate in Column 2

Once you’ve completed the Blurb Module in column 1, you can clone it once and place the duplicate in the second column.

open job position template

Change Dynamic Content & Icon

Make sure you change the title dynamic content along with the icon.

  • Title: Job type

open job position template

Add Button Module to Column 3

Add Copy

In the last column, add a Button Module. Add some copy of your choice.

open job position template

Dynamic Link

Select the dynamic apply redirect link next.

  • Button Link URL: Apply redirect
  • Button Link Target: In The New Tab

open job position template

Alignment

Move on to the module’s design tab and change the alignment across different screen sizes.

  • Button Alignment: Right (Desktop), Left (Tablet & Phone)

open job position template

Button Settings

Style the button as well.

  • Use Custom Styles For Button: Yes
  • Button Text Size: 1rem
  • Button Text Color: #ff6600
  • Button Background Color: #ffffff
  • Button Border Width: 0px

open job position template

  • Button Border Radius: 100px
  • Button Font: Montserrat
  • Button Font Style: Uppercase

open job position template

Spacing

And complete the module’s settings by adding some custom padding values to the spacing settings.

  • Top Padding: 15px
  • Bottom Padding: 15px
  • Left Padding: 50px
  • Right Padding: 50px

open job position template

Add Row #2

Column Structure

On to the next row! Choose the following column structure:

open job position template

Add Text Module to Column

Dynamic Content

Add a new Text Module to the column and select the post title dynamic content.

  • Dynamic Content: Post/Archive Title

open job position template

  • Before: <H1>
  • After: </H1>

open job position template

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)

open job position template

Add Divider Module to Column

Visibility

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

  • Show Divider: Yes

open job position template

Line

Change the module’s line color next.

  • Line Color: #ffffff

open job position template

Sizing

Modify the sizing settings too.

  • Divider Weight: 8px
  • Width: 30%
  • Module Alignment: Left

open job position template

Add Section #2

Spacing

On to the next section! Remove all default top padding.

  • Top Padding: 0px

open job position template

Add Row #1

Column Structure

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

open job position template

Spacing

Open the row settings and remove the default top padding.

  • Top Padding: 0px

open job position template

Add Post Content Module to Column

Background Color

Add a Post Content Module to the row and change the background color into white.

  • Background Color: #ffffff

open job position template

Text Settings

Move on to the module’s design tab and change the text settings as follows:

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

open job position template

Spacing

Play around with the spacing values across different screen sizes next.

  • Top Margin: -300px
  • Top Padding: 100px (Desktop), 50px (Tablet & Phone)
  • Bottom Padding: 100px (Desktop), 50px (Tablet & Phone)
  • Left Padding: 100px (Desktop), 50px (Tablet & Phone)
  • Right Padding: 100px (Desktop), 50px (Tablet & Phone)

open job position template

Border

Add some border radius too.

  • All Corners: 20px

open job position template

Box Shadow

And complete the module’s settings by adding a subtle box shadow.

  • Box Shadow Blur Strength: 50px
  • Shadow Color: rgba(0,0,0,0.09)

open job position template

Add Row #2

Column Structure

Add another row using the following column structure:

open job position template

Add Text Module #1 to Column

Add H2 Content

Add a Text Module to the row’s column with some H2 content.

open job position template

H2 Text Settings

Change 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: 1.5rem

open job position template

Add Divider Module to Column

Visibility

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

  • Show Divider: Yes

open job position template

Line

Change the module’s line color next.

  • Line Color: #ffa500

open job position template

Sizing

And complete the module’s settings by playing around with the sizing settings.

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

open job position template

Add Text Module #2 to Column

Dynamic Content

The next and last module we need in this column is another Text Module. Select the relevant dynamic content.

  • Dynamic Content: Required experience

open job position template

Make sure you enable raw HTML.

  • Enable Raw HTML: Yes

open job position template

Text Settings

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

  • Text Font: Raleway
  • Text Size: 1.1rem

open job position template

Unordered List Text Settings

Modify the unordered list line height too.

  • Unordered List Line Height: 2.3em

open job position template

Spacing

Then, go to the spacing settings and add some custom padding values.

  • Top Padding: 50px
  • Bottom Padding: 50px
  • Left Padding: 50px
  • Right Padding: 50px

open job position template

Border

Add some border radius too.

  • All Corners: 20px

open job position template

Box Shadow

And complete the module’s settings by adding a subtle box shadow.

  • Box Shadow Blur Strength: 50px
  • Shadow Color: rgba(0,0,0,0.09)

open job position template

Add Row #3

Column Structure

On to the last row! Use the following column structure:

open job position template

Clone Modules in Column 2 Twice & Place Duplicates in Column 1 & 2 of New Row

Clone the modules that you’ve added to the previous row twice and place the duplicates in the new row.

open job position template

Change Text Module #1 Copy

Make sure you change the H2 copy of each duplicate Text Module.

open job position template

Change Text Module #2 Dynamic Content

Along with the dynamic content.

  • Dynamic Content: Required skills

open job position template

  • Dynamic Content: Bonus qualifications

open job position template

Again, make sure the raw HTML is enabled for both Text Modules containing dynamic content.

  • Enable raw HTML: Yes

open job position template

6. Save Theme Builder Changes & View Result

Once you’ve completed the template body, you can save all theme builder changes and view the result on your sample open job position post!

open job position template

open job position template

Preview

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

Desktop

Mobile

open job position template

Final Thoughts

In this post, we’ve shown you how to create a dynamic and fully customizable open job position template using the Divi Theme Builder and the ACF plugin. We’ve only used dynamic content in our post template, which makes adding future open job positions to your website effortless. You were able to download the JSON file for free as well! If you have any questions, 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.

The post How to Create a Dynamic Job Opening Post Template with Divi’s Theme Builder & ACF appeared first on Elegant Themes Blog.