How to Create an Open Job Position Layout with Divi (Free Download!)

Posted on June 19, 2018 by in Divi Resources | 9 comments

How to Create an Open Job Position Layout with Divi (Free Download!)

Every week, we provide you with new and free Divi layout packs which you can use for your next project. For one of the layout packs, we also share a use case that’ll help you take your website to the next level.

This week, as part of our ongoing Divi design initiative, we’re going to show you how to create a stunning open job position layout that matches Divi’s Digital Marketing Layout Pack. This layout is an addition to the careers layout that’s already included in the layout pack. Once you create the layout, you’ll be able to reuse it for each one of the open job vacancies and change the content accordingly. Don’t want to go through creating the layout from scratch? At the end of this post, you’ll be able to download the layout for FREE and upload it to your Divi Library.

Let’s get to it!

Preview

Before we dive into the tutorial, let’s take a look at the layout we’ll recreate (and which you’ll be able to download) on different screen sizes:

digital marketing

Create New Page with the Digital Marketing Homepage Layout

Add New Page & Open with Visual Builder

Start by adding a new page, giving your page a title, publishing it and switching over to Visual Builder right away.

digital marketing

digital marketing

Upload Digital Marketing Homepage Layout

We’re going to reuse one of the layouts that are included in the Digital Marketing Layout Pack. This will make it easier to maintain the same style throughout the entire website. Go to your premade layouts, scroll down until you come across the Digital Marketing Layout Pack and use the homepage layout.

digital marketing

Remove Irrelevant Sections

The layout we’ve uploaded contains some sections that we don’t need for the open job position layout. That’s why we’ll remove them right away. These are the sections you won’t need:

digital marketing

digital marketing

Transform Page into Open Job Position Layout

Remove a Hero Section Text Module

Now we can start transforming the page into an open job position layout! Start by removing the following description Text Module in the hero section:

with-border

Change Content in Hero Section

Change the copy of the remaining modules in your hero section as well.

with-border

Add a New Section Below Hero Section

Then, right below the hero section, add a new standard section.

with-border

Add Row with Two-Columns

We’re going to add a row with the following column structure to it:

with-border

Clone Hero Section Text Module & Place in Column 1 of New Row

To make things easier, we’re going to reuse one of the Text Modules of our hero section and place it in the first column of our new row. This will save us time and will allow us to make changes according to our needs:

with-border

Remove H1 Text in Text Module

Open this Text Module and remove the H1 copy that is included. We’ll also change the H3 copy into ‘Job Description’.

with-border

with-border

Change H3 Text Settings

The text color in our hero section is white so we’ll definitely need to change that into ‘#fcb6ab’, a color that matches the color palette of this layout pack. We’ll also use left Text Alignment.

with-border

Clone Text Module & Place in Column 2

Once you’ve applied the changes, clone your Text Module and place it in the second column. Make sure you change the copy here as well.

with-border

Add Job Description Text Module

Right below the previous Text Module in the first column, go ahead and add a new Text Module. You can use this Text Module to add the job description you need to show. We’re using a combination of paragraphs, H3 titles and lists. It isn’t necessary to create separate Text Modules for each one of these. We’re going to use only one Text Module and modify the settings of all three text types in the text settings.

with-border

List Settings

We’re skipping the paragraph settings and moving on to the list settings right away. There, we’ll use the following settings:

  • Unordered List Style Type: Circle
  • Unordered List Item Ident: 12px (This will push the list items a bit to the right)

with-border

H3 Text Settings

Open your H3 text settings next and use the following settings:

  • Heading 3 Font: Roboto
  • Heading 3 Font Weight: Bold
  • Heading 3 Text Size: 40px (Desktop), 35px (Tablet), 28px (Phone)

with-border

Place Blurb Modules in Column 2

The homepage layout of the Digital Marketing Layout Pack contains many stunning design elements that we can simply reuse instead of creating something from scratch. The Blurb Modules in the next section, for instance, are great for sharing additional details such as information on how to apply, the deadline, location and availability. We’ll delete this section after we’re done so instead of cloning the Blurb Modules with the color palette of your choice, simply place them in the second column of the previous section.

with-border

with-border

Remove Bottom Margin of Blurb Modules

These Blurb Modules are pushed together due to the zero bottom margin that was assigned to them. Go ahead and remove the ‘opx’ bottom padding of each one of the modules you’re using.

with-border

Change Blurb Content & Icons

Now, you can go ahead and change the content of these Blurb Modules one by one. Choose an icon that matches the content you’re sharing as well.

with-border

with-border

Remove Remaining Section

As mentioned before, we were only using the section with the Blurb Modules to ease our workflow. Once you’ve replaced the Blurb Modules you needed, you can go ahead and remove this section.

with-border

Save Layout to Divi Library & Reuse for Other Open Positions

Save Layout to Divi Library

And we’re done! We now have a stunning layout which we can easily reuse for all current and future open job positions. The only thing left to do is saving the layout to your Divi Library by clicking on the following icon, giving your layout a name and clicking on the ‘Save to Library’ button:

with-border

Download The Layout for FREE

To lay your hands on the free open job position 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.

Preview

Now that we’ve gone through all the steps, let’s take a final look at the open job position layout on different screen sizes:

digital marketing

Final Thoughts

In this use case blog post, we’ve shown you how to create an elegant and stunning open job position page in addition to Divi’s Digital Marketing Layout Pack. We’ve created the layout from scratch using Divi’s Visual Builder and we’ve also shared the layout. You can download it for free and upload it to your Divi library. If you have any questions, make sure you leave a comment in the comment section below!

9 Comments

  1. Hi I tried importing the downloaded json file by creating new page on my website but after 1% ,it gives error “file should not be imported in this context”.

    Please help.Thanks

    • think needs to be imported first into divi library..

    • import it into your library 1st … Divi > Divi Lirary > import and then click load layout at the top of your page

  2. I’m going to try it, thank you for taking the time to create great things for us.

  3. Thanks for the regular Divi resource releases, however I feel like some of these designs have already been used for other layout packs. Please come up with new creative design layouts. Many thanks!

    • Be greatful that they actually give away free content. It doesn’t matter if it was used before it might spark creativity in others.

      • I am grateful! I started my comment with ‘thanks’, ended my comment with ‘thanks’ and really mean it. I have been with ET since 2012, and I feel I can comment, compliment, make requests or criticise as I like; so please don’t try to police comments which are not addressed to you. Thank you!

  4. Hi There ET

    When I mention the name ET it reminds me of the movie why back called ET. HA HA HA

    but anyway this was a great tutorial, you can always take away something from these tutorials.

    Thanks

  5. A great follow up blog article would be showing folks how to setup this job listing layout to be indexed correctly by Google Jobs.

    Today it’s important to build a jobs page that will get your listing posted for free in Google Jobs, so when someone Google’s “web designer jobs” your listing turns up in Google’s own listing of all the matching jobs in your area. See https://jobs.google.com/about/

500,591 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest