Each week, we give you new and unfastened Divi structure packs which you’ll use on your subsequent challenge. For probably the most structure packs, we additionally percentage a use case that’ll permit you to take your website online to the following stage.
This week, as a part of our ongoing Divi design initiative, we’re going to turn you tips on how to create a surprising open task place structure that fits Divi’s Virtual Advertising Format Pack. This structure is an addition to the careers structure that’s already incorporated within the structure pack. When you create the structure, you’ll be capable to reuse it for each and every probably the most open task vacancies and alter the content material accordingly. Don’t wish to undergo developing the structure from scratch? On the finish of this publish, you’ll be capable to obtain the structure for FREE and add it on your Divi Library.
Let’s get to it!
Preview
Sooner than we dive into the educational, let’s check out the structure we’ll recreate (and which you’ll be capable to obtain) on other display sizes:
Create New Web page with the Virtual Advertising Homepage Format
Upload New Web page & Open with Visible Builder
Get started by way of including a brand new web page, giving your web page a identify, publishing it and switching over to Visible Builder in an instant.
Add Virtual Advertising Homepage Format
We’re going to reuse probably the most layouts which are incorporated within the Virtual Advertising Format Pack. This may enable you to handle the similar taste during all the website online. Pass on your premade layouts, scroll down till you return around the Virtual Advertising Format Pack and use the homepage structure.
Take away Beside the point Sections
The structure we’ve uploaded comprises some sections that we don’t want for the open task place structure. That’s why we’ll take away them in an instant. Those are the sections you gained’t want:
Turn out to be Web page into Open Activity Place Format
Take away a Hero Segment Textual content Module
Now we will get started reworking the web page into an open task place structure! Get started by way of doing away with the next description Textual content Module within the hero segment:
Alternate Content material in Hero Segment
Alternate the reproduction of the remainder modules to your hero segment as neatly.
Upload a New Segment Under Hero Segment
Then, proper under the hero segment, upload a brand new usual segment.
Upload Row with Two-Columns
We’re going so as to add a row with the next column construction to it:
Clone Hero Segment Textual content Module & Position in Column 1 of New Row
To make issues more uncomplicated, we’re going to reuse probably the most Textual content Modules of our hero segment and position it within the first column of our new row. This may save us time and can let us make adjustments in line with our wishes:
Take away H1 Textual content in Textual content Module
Open this Textual content Module and take away the H1 reproduction this is incorporated. We’ll additionally trade the H3 reproduction into ‘Activity Description’.
Alternate H3 Textual content Settings
The textual content colour in our hero segment is white so we’ll certainly wish to trade that into ‘#fcb6ab’, a colour that fits the colour palette of this structure pack. We’ll additionally use left Textual content Alignment.
Clone Textual content Module & Position in Column 2
When you’ve carried out the adjustments, clone your Textual content Module and position it in the second one column. Be sure to trade the reproduction right here as neatly.
Upload Activity Description Textual content Module
Proper under the former Textual content Module within the first column, move forward and upload a brand new Textual content Module. You’ll use this Textual content Module so as to add the task description you want to turn. We’re the usage of a mixture of paragraphs, H3 titles and lists. It isn’t essential to create separate Textual content Modules for each and every such a. We’re going to make use of just one Textual content Module and alter the settings of all 3 textual content varieties within the textual content settings.
Record Settings
We’re skipping the paragraph settings and shifting directly to the record settings in an instant. There, we’ll use the next settings:
- Unordered Record Taste Kind: Circle
- Unordered Record Merchandise Ident: 12px (This may push the record pieces a little bit to the best)
H3 Textual content Settings
Open your H3 textual content settings subsequent and use the next settings:
- Heading 3 Font: Roboto
- Heading 3 Font Weight: Daring
- Heading 3 Textual content Measurement: 40px (Desktop), 35px (Pill), 28px (Telephone)
Position Blurb Modules in Column 2
The homepage structure of the Virtual Advertising Format Pack comprises many shocking design components that we will merely reuse as a substitute of making one thing from scratch. The Blurb Modules within the subsequent segment, as an example, are nice for sharing further main points corresponding to knowledge on tips on how to practice, the time limit, location and availability. We’ll delete this segment once we’re achieved so as a substitute of cloning the Blurb Modules with the colour palette of your selection, merely position them in the second one column of the former segment.
Take away Backside Margin of Blurb Modules
Those Blurb Modules are driven in combination because of the 0 backside margin that used to be assigned to them. Pass forward and take away the ‘opx’ backside padding of each and every probably the most modules you’re the usage of.
Alternate Blurb Content material & Icons
Now, you’ll move forward and alter the content material of those Blurb Modules one at a time. Make a selection an icon that fits the content material you’re sharing as neatly.
Take away Closing Segment
As discussed prior to, we have been best the usage of the segment with the Blurb Modules to ease our workflow. When you’ve changed the Blurb Modules you wanted, you’ll move forward and take away this segment.
Save Format to Divi Library & Reuse for Different Open Positions
Save Format to Divi Library
And we’re achieved! We have now a surprising structure which we will simply reuse for all present and long term open task positions. The one factor left to do is saving the structure on your Divi Library by way of clicking at the following icon, giving your structure a reputation and clicking at the ‘Save to Library’ button:
Obtain The Format for FREE
To put your fingers at the unfastened open task place structure, you’re going to first wish to obtain it the usage of the button under. To realize get admission to to the obtain it is important to subscribe to our Divi Day by day e mail record by way of the usage of the shape under. As a brand new subscriber, you’re going to obtain much more Divi goodness and a unfastened Divi Format pack each Monday! In case you’re already at the record, merely input your e mail cope with under and click on obtain. You are going to no longer be “resubscribed” or obtain further emails.
@media best display and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:prior to, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:prior to { border-top-color: #ffffff !necessary; border-left-color: clear !necessary; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { colour: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:prior to { background: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !necessary } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !necessary; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 sturdy { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p sturdy, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape enter, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !necessary;}
Obtain For Loose
Sign up for the Divi Newlsetter and we will be able to e mail you a replica of without equal Divi Touchdown Web page Format Pack, plus heaps of different superb and unfastened Divi sources, pointers and methods. Apply alongside and you’re going to be a Divi grasp very quickly. If you’re already subscribed merely kind to your e mail cope with under and click on obtain to get admission to the structure pack.
You may have effectively subscribed. Please take a look at your e mail cope with to substantiate your subscription and get get admission to to unfastened weekly Divi structure packs!
Preview
Now that we’ve long past thru all of the steps, let’s take a last take a look at the open task place structure on other display sizes:
Ultimate Ideas
On this use case weblog publish, we’ve proven you tips on how to create a sublime and shocking open task place web page along with Divi’s Virtual Advertising Format Pack. We’ve created the structure from scratch the usage of Divi’s Visible Builder and we’ve additionally shared the structure. You’ll obtain it totally free and add it on your Divi library. In case you have any questions, make sure to depart a remark within the remark segment under!
The publish How to Create an Open Job Position Layout with Divi (Free Download!) seemed first on Elegant Themes Blog.
WordPress Web Design