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.
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.
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 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
Spacing
Complete the section parameters by adding lower padding.
- Bottom padding: 200px
Add a new line
Column structure
Continue adding a new line to the section using the following column structure:
Add a text module to the column
Add H1 content
Add a text module to the row column with contents H1 of your choice.
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)
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 modifying the dimensioning parameters.
- Divider weight: 8px
- Width: 30%
Add section # 2
Add another regular section to the page.
Add a new line
Column structure
Add a new line to the section using the following column structure:
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.
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
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 modifying the weight of the divider and the maximum width in the dimensioning parameters.
- Divider weight: 6px
- Maximum width: 80 px
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
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
Disposal
Switch to the module design tab and make sure you're using a full-width layout.
- Layout: full width
Title text settings
Also change the title text settings.
- Title level: H3
- Title font: Montserrat
- Title text size: 1.5rem
Body text settings
Then change the body text settings.
- Body Police: Raleway
- Text body size: 1.1rem
- Height of the body line: 2.1em
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
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
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 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.
Edit categories of blog modules
With the categories of the Blog module.
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>
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.
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.
hello, I'm at the part where you have to insert code, but when I save and go to the site, the style is not applied and the code appears online without the style tags. Thank you for your help.
Have a good day !