In Part 4, we became the Design Variables from Part 3 right into a library of Choice Workforce Presets and Part Presets. Now, the design components is in position. Each colour, font measurement, spacing price, border, and button taste is both stored as a reusable preset or to be had as a reusable variable reference within a module.
On this phase, we’ll use that library to construct the homepage of our coworking house web page, segment by way of segment. The homepage contains seven sections, from the hole hero to the final FAQ. Each and every segment has its personal construction, content material priorities, and visible position. Since the design paintings is already performed, maximum of this construct specializes in meeting somewhat than repeated styling selections.
The Construct Manner For Section 5
Sooner than opening the Visual Builder, it is helping to know the workflow. Each segment in this homepage follows the similar elementary procedure.
First, upload the Segment. Then, configure the rows and columns that outline the construction. In Divi 5, you’ll use Flexbox and CSS Grid structure controls to create versatile, responsive buildings. A number of sections in this homepage use each approaches.
2nd, drop the modules into the proper columns. At this level, focal point on construction earlier than styling. As soon as the modules are in position, making use of the design components turns into a lot more straightforward.
3rd, follow the presets. That is the place the paintings from Portions 3 and four will pay off. A Heading preset can keep an eye on font circle of relatives, measurement, line peak, and colour. A Button preset can keep an eye on padding, border radius, background colour, textual content colour, and measurement. As a substitute of restyling each and every module manually, you’ll follow constant design selections in a couple of clicks.
In any case, deal with the remainder static content material. Textual content, photographs, video assets, countdown dates, accordion pieces, and person icon alternatives nonetheless want to be set in line with module. Then again, the ones are content material selections now, no longer design-system selections.
By means of following this workflow, you’ll create this homepage:
To get began, create a brand new web page within the WordPress dashboard and identify it House.
After the web page is created, click on Edit With Divi. For a brand new construct, it may possibly additionally assist to simplify the workspace. In case your Theme Builder Header and Footer spaces are visual and you need to focal point simplest at the web page frame, cover or disable the ones template spaces for now. You’ll be able to flip them again on later after we construct the worldwide Header and Footer in Portions 6 and seven.
Homepage Construct
We’ll construct the homepage in seven sections: Hero, Options Grid, Cut up Options, Testimonials, Pricing, Countdown, and FAQ.
Hero Segment
The Hero segment tells guests what the coworking house provides inside the first few inches of scroll. It makes use of 3 rows: a headline and number one calls to motion on the peak, a full-width hero symbol beneath, and a three-column observation row on the backside.
Get started by way of including a brand new Segment. From the Insert Segment modal, select a Flex Equivalent Columns construction with one column. Divi creates the Segment with its first Row already configured as a single-column flex structure.
Position a Heading module and a Workforce module throughout the Column. The Heading holds the hero headline. Within the Workforce, upload two Button modules. Then, open the Workforce module’s Design tab. Within the Format possibility crew, set Flex Course to Row and set the Horizontal Hole to 10px so the buttons take a seat aspect by way of aspect.
Subsequent, upload a 2nd Row. From the Insert Row modal, select any other Flex Equivalent Columns one-column construction. Drop an Symbol module within it. This turns into the hero visible beneath the headline.
Then, upload a 3rd Row. From the Insert Row modal, select a Flex Equivalent Columns construction with 3 columns. This turns into the observation row for 3 core price propositions. Inside of every Column, upload one Heading module and one Textual content module.
Now, follow the presets. The Heading within the first row will get the Heading 1 Giant Part Preset. The primary Button will get Stuffed – Number one Colour. The second one Button will get Stuffed – Black. The Symbol will get the Rounded Part Preset.
Within the 3rd Row, follow the Most sensible Border Choice Workforce Preset to the Border possibility crew of every Column. Then, set 30px padding-top on every Column to split the textual content from the highest border. Practice Heading 4 to every of the 3 Headings and Darkish Textual content to every of the 3 Textual content modules.
In any case, upload the textual content and symbol content material. The hero headline reads Coworking in San Francisco. The primary Button makes use of the Guide Excursion textual content variable, and the second one Button makes use of the View Plans textual content variable.
The 3 observation columns use the headings Versatile Areas, Outstanding Facilities, and Colourful Group. Pair every heading with a brief supporting paragraph.
Options Grid Segment
The Options Grid segment showcases six facilities in a decent, lightly spaced structure. It makes use of CSS Grid so the function columns keep constant throughout desktop, pill, and cell breakpoints.
Upload a brand new Segment. From the Insert Segment modal, select a Flex Equivalent Columns one-column construction. Within the Segment’s Design tab, open the Background possibility crew and set the Background Colour the usage of the Background – Mild Grey variable. Within the Segment’s preliminary Row, insert a Video module.
Subsequent, upload a 2nd Row and select a Flex Equivalent Columns structure. Within the unmarried Column, upload an Icon module, a Heading module, and a Textual content module, in that order.
Now, open the brand new Row’s Content material tab and move to Components. Click on Practice Construction Template. On desktop, exchange the row construction from single-column flex to a three-column grid. Then, transfer to the Pill breakpoint and set the row to a two-column grid. In any case, transfer to the Cellular breakpoint and set it to a one-column grid.
After the responsive construction is about, go back to the Desktop breakpoint. In finding the primary Column and copy it 5 occasions so the grid accommodates six function pieces.
Now, taste the segment with presets. The Video module will get the Rounded Part Preset. Each and every Icon will get the Darkish – Small – Contained Part Preset. Practice Heading 5 to every function identify and Darkish Textual content to every description.
Each and every Column throughout the grid must use a Vertical Hole of 12px. This assists in keeping the icon, heading, and textual content visually grouped.
In any case, upload the Video module supply and overlay symbol. The six options for this coworking web site are Gigabit Wi-Fi, 24/7 Get entry to, Assembly Rooms, Non-public Telephone Cubicles, Bottomless Espresso, and Mailing Cope with. Assign a definite icon to every function from the Icon Library and write a brief one- to two-sentence description for every.
Cut up Options Segment
The Cut up Options segment pairs a tall symbol at the left with 3 content material blocks at the correct. It creates a easy visible hierarchy inside a unmarried row: the primary block introduces the segment, whilst the second one and 3rd blocks spotlight supporting options with call-to-action hyperlinks.
Upload a brand new Segment. From the Insert Segment modal, select a Flex Equivalent Columns construction with two columns. The Segment’s first Row is already configured with the 2 columns you want.
Within the left Column, upload an Symbol module. In the fitting Column, upload a Workforce module. Within the Workforce module, upload a Heading module and a Textual content module. Reproduction the Workforce as soon as, then upload a Button module on the backside of the duplicated Workforce. In any case, reproduction that 2nd Workforce over again.
For every of the 3 Teams, open Design > Format and set Flex Course to Column with a 10px row hole between kid modules. To hurry this up, you’ll taste one Workforce first and use Lengthen Attributes to use the similar structure settings to the opposite Teams.
Then, follow the presets. The Symbol will get Rounded. The primary Workforce’s Heading makes use of Heading 2, and its Textual content makes use of Darkish Textual content. The second one and 3rd Teams use Heading 5 for his or her Headings and Darkish Textual content for his or her Textual content modules. Each Buttons use Textual content – Number one Colour, so they seem as inline hyperlinks as an alternative of cast CTAs.
Upload the picture and textual content content material to the modules. The lead heading is Thrive in a greater paintings setting. The 2 supporting blocks quilt Ergonomic Convenience and Inspiring Setting. Each and every supporting block makes use of the Be told Extra textual content Design Variable on its Button.
Testimonials Segment
The Testimonials segment gifts 3 buyer quotes in a three-card structure with a bit heading above.
Upload a brand new Segment. From the Insert Segment modal, select a Flex Equivalent Columns one-column construction. Position a Heading module within the Segment’s preliminary Row. Then, upload a 2nd Row and choose a Grid Multi-Column construction with 3 equivalent columns. Inside of every Column, upload an Icon module, a Textual content module, and a Blurb module.
The segment identify Heading makes use of Heading 2. In the second one Row’s Design > Format possibility crew, set the Horizontal Hole to 30px. Each and every of the 3 Columns will get the Defined – Darkish Part Preset.
Inside of every Column, the Icon will get Darkish – Small, the Textual content will get Darkish Textual content, and the Blurb stacks two Part Presets: Darkish Textual content and Dense. The Blurb symbol will get a Border Radius of 8px. You’ll be able to additionally use the related rounded symbol or border preset when you created one in Section 4.
To paintings sooner, taste the modules within the first Column first. Then, use Lengthen Attributes to use the similar types from matching components within the first Column to matching components inside the Mother or father Row.
Now, fill within the symbol and textual content content material. The segment heading reads Testimonials. Each and every card will get a quotation-mark icon, a testimonial quote within the Textual content module, and an creator photograph with a reputation and position within the Blurb module.
Our 3 testimonials are from Lisa Robinson, CEO of Brightwave Media; Albert Flores, Advertising Company Proprietor; and Cody Fisher, Founding father of Sprout Lab.
Pricing Segment
The Pricing segment is probably the most structurally complicated a part of the web page. Each and every value card makes use of a Workforce-based structure with nested Teams, an Icon Listing, and a footer Workforce. The payoff is a blank, constant card construction the place the center tier can stand out via distinction.
Upload a brand new Segment. From the Insert Segment modal, select a Flex Equivalent Columns one-column construction. Position a Heading module within the Segment’s preliminary Row for the segment identify.
Then, upload a 2nd Row and select a Grid Multi-Column construction with 3 equivalent columns. For now, focal point simplest at the first Column since the card construction is dense. Within the first Column, upload a Workforce module. Then, upload any other Workforce module within it with a nested Heading module and Textual content module.
As a sibling of the second one Workforce, upload an Icon Listing module. Then upload any other Workforce module as a sibling of the primary. Inside of that footer Workforce, upload a Heading module and a Button module.
Delete the 2 additional Columns and depart simplest the primary pricing card for now. At the last Column, follow the Defined – Darkish Border Choice Workforce Preset. Then, transfer the Row to the Pill breakpoint and set the row to a one-column structure. After that, go back to the Desktop breakpoint.
To make the directions more straightforward to practice, we’ll confer with the 3 Teams because the Header Workforce, Interior Workforce, and Footer Workforce. Use the Layers panel within the screenshot beneath to verify which Workforce is being edited.
Each and every card’s Header Workforce makes use of both the Contained – Mild or Contained – Darkish Part Preset. The outer playing cards use Contained – Mild, whilst the center card makes use of Contained – Darkish.
The primary Interior Workforce will get a Vertical Hole of 10px the usage of the spacing price out of your design components.
Each and every card’s Footer Workforce makes use of the Padding – Medium Choice Workforce Preset. Each and every tier Heading makes use of Heading 3. Each and every tier description Textual content makes use of Darkish Textual content at the mild playing cards and Mild Textual content at the darkish center card. Each and every value Heading makes use of Heading 5. Each and every Button makes use of Stuffed – Number one Colour at the outer playing cards and Stuffed – Black at the center card.
The Icon Listing makes use of Darkish at the mild playing cards and Mild Textual content at the darkish center card. As soon as the primary card is styled, reproduction the primary Column two times. Then, regulate the center Column by way of converting the related textual content presets to their mild variations and atmosphere the cardboard background to Black.
Subsequent, transfer to the Pill breakpoint. In the second one Row’s Content material > Components possibility crew, set the Format Construction to 1 column. Set the Horizontal Hole to 30px so the stacked pricing playing cards stay constant spacing on smaller displays.
In any case, set the pricing content material. The 3 tiers are Scorching Table at $299/month, Devoted Table at $449/month, and Non-public Place of work at $999+/month. Each and every tier will get a brief description, a listing of incorporated advantages within the Icon Listing, and a Signal Up Button. Alternate the Icon Listing icons to right-pointing arrows.
Countdown Segment
The Countdown segment creates urgency with a distinguished promotional CTA. All of the segment sits in one row with a brilliant background, growing a visible destroy between the pricing segment and the FAQ.
Upload a brand new Segment. From the Insert Segment modal, select a Flex Equivalent Columns one-column construction. Practice the Contained – Darkish Row Part Preset to the Segment’s preliminary Row. Within the Column, upload a Heading module, a Countdown Timer module, and a Button module.
The Heading will get Heading 2 and Heart Aligned, with its textual content colour set to White. Take away the Heading Textual content from the Countdown Timer module so the CTA headline stays the primary identify. The Countdown Timer will get Mild Textual content. The Button will get Stuffed – White, so it contrasts obviously towards the blue background.
Set the content material subsequent. The primary heading can learn Founder’s Charges Finishing Quickly!. Configure the Countdown Timer’s goal date to check your promotional window. The Button textual content is Lock In Low Charges.
FAQ Segment
The FAQ segment makes use of an offset two-column structure. A brief introductory block sits at the left, whilst the collapsible query record fills the broader column at the correct.
Upload a brand new Segment. From the Insert Segment modal, select a Flex Offset Columns construction with two columns. A 2/5 + 3/5 trend works neatly right here as it offers the heading block a slim anchor and provides the FAQ record more space.
Within the left Column, upload a Heading module and a Textual content module. Inside of the fitting Column, upload an Accordion module.
Then, follow the presets. The Heading makes use of Heading 2, and the Textual content makes use of Darkish Textual content. The Accordion makes use of the Darkish Textual content Part Preset.
The left Column heading reads Continuously requested questions, adopted by way of a brief intro paragraph. At the correct, upload 5 Accordion pieces with questions and solutions that have compatibility the coworking house. Excellent subjects come with opening hours, visitors, parking, trade deal with use, and assembly room bookings.
Reviewing The Homepage
With all seven sections in position, the homepage is whole. It features a headline and hero symbol, a visible function grid, a split-feature row, testimonials, pricing, a promotional countdown, and an FAQ segment. Here’s the completed web page once more.
The necessary phase is not only that the web page is done. It’s how the web page was once constructed. The modules reference Design Variables and Presets somewhat than depending on hardcoded hex values, one-off font sizes, or advert hoc padding. That’s the level of the design components.
The homepage is now more straightforward to revise, lengthen, and stay constant. The exhausting paintings from Portions 3 and four has paid off, since the design selections are reusable somewhat than trapped inside person modules.
Coming Up Subsequent
The homepage is constructed, however it’s nonetheless only one web page. In Portions 6 and seven, we’ll construct the site-wide Header and Footer the usage of the Theme Builder. We’ll twine them up as world templates and stay the usage of the similar Design Variables and presets now we have been construction right through the route.
After that, each and every new web page can inherit the similar world construction. That’s the final piece of scaffolding we’d like earlier than construction the interior pages.
You’re neatly for your approach to a whole web page design from scratch the usage of Divi 5.
The publish Part 5: Building A Divi 5 Homepage From Scratch gave the impression first on Elegant Themes Blog.
0 Comments