In Phase 4, we became the Design Variables from Phase 3 right into a library of Possibility Workforce Presets and Component Presets. Now, the design method is in position. Each and every colour, font dimension, spacing worth, border, and button taste is both stored as a reusable preset or to be had as a reusable variable reference inside of a module.
On this section, we’ll use that library to construct the homepage of our coworking area web site, phase via phase. The homepage comprises seven sections, from the hole hero to the remaining FAQ. Every phase has its personal construction, content material priorities, and visible function. Since the design paintings is already finished, maximum of this construct makes a speciality of meeting relatively than repeated styling selections.
Contents
The Construct Method For Phase 5
Prior to opening the Visible Builder, it is helping to grasp the workflow. Each and every phase in this homepage follows the similar fundamental 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 format controls to create versatile, responsive buildings. A number of sections in this homepage use each approaches.
2nd, drop the modules into the right kind columns. At this degree, focal point on construction prior to styling. As soon as the modules are in position, making use of the design method turns into a lot more straightforward.
3rd, follow the presets. That is the place the paintings from Portions 3 and four can pay off. A Heading preset can regulate font circle of relatives, dimension, line top, and colour. A Button preset can regulate padding, border radius, background colour, textual content colour, and dimension. As a substitute of restyling each and every module manually, you’ll follow constant design selections in a couple of clicks.
In the end, care for the rest static content material. Textual content, photographs, video assets, countdown dates, accordion pieces, and person icon alternatives nonetheless want to be set consistent with module. Then again, the ones are content material selections now, now not 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 title it House.
After the web page is created, click on Edit With Divi. For a brand new construct, it could possibly additionally assist to simplify the workspace. In case your Theme Builder Header and Footer spaces are visual and you need to focal point best at the web page frame, cover or disable the ones template spaces for now. You’ll flip them again on later once 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, Break up Options, Testimonials, Pricing, Countdown, and FAQ.
Hero Segment
The Hero phase tells guests what the coworking area provides inside the first few inches of scroll. It makes use of 3 rows: a headline and number one calls to motion on the height, a full-width hero symbol beneath, and a three-column commentary row on the backside.
Get started via including a brand new Segment. From the Insert Segment modal, make a selection a Flex Equivalent Columns construction with one column. Divi creates the Segment with its first Row already configured as a single-column flex format.
Position a Heading module and a Workforce module within 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 Structure choice crew, set Flex Path to Row and set the Horizontal Hole to 10px so the buttons sit down facet via facet.
Subsequent, upload a 2d Row. From the Insert Row modal, make a selection any other Flex Equivalent Columns one-column construction. Drop an Symbol module inside of it. This turns into the hero visible beneath the headline.
Then, upload a 3rd Row. From the Insert Row modal, make a selection a Flex Equivalent Columns construction with 3 columns. This turns into the commentary row for 3 core worth propositions. Inside of each and 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 Component Preset. The primary Button will get Stuffed – Number one Colour. The second one Button will get Stuffed – Black. The Symbol will get the Rounded Component Preset.
Within the 3rd Row, follow the Most sensible Border Possibility Workforce Preset to the Border choice crew of each and every Column. Then, set 30px padding-top on each and every Column to split the textual content from the highest border. Observe Heading 4 to each and every of the 3 Headings and Darkish Textual content to each and every of the 3 Textual content modules.
In the end, upload the textual content and symbol content material. The hero headline reads Coworking in San Francisco. The primary Button makes use of the E book Excursion textual content variable, and the second one Button makes use of the View Plans textual content variable.
The 3 commentary columns use the headings Versatile Areas, Outstanding Facilities, and Colourful Neighborhood. Pair each and every heading with a brief supporting paragraph.
Options Grid Segment
The Options Grid phase showcases six facilities in a decent, flippantly spaced format. 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, make a selection a Flex Equivalent Columns one-column construction. Within the Segment’s Design tab, open the Background choice 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 2d Row and make a selection a Flex Equivalent Columns format. 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 Parts. Click on Observe 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 the end, 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 replica it 5 instances so the grid incorporates six function pieces.
Now, taste the phase with presets. The Video module will get the Rounded Component Preset. Every Icon will get the Darkish – Small – Contained Component Preset. Observe Heading 5 to each and every function identify and Darkish Textual content to each and every description.
Every Column within the grid must use a Vertical Hole of 12px. This assists in keeping the icon, heading, and textual content visually grouped.
In the end, upload the Video module supply and overlay symbol. The six options for this coworking website are Gigabit Wi-Fi, 24/7 Get entry to, Assembly Rooms, Non-public Telephone Cubicles, Bottomless Espresso, and Mailing Deal with. Assign a definite icon to each and every function from the Icon Library and write a brief one- to two-sentence description for each and every.
Break up Options Segment
The Break up Options phase pairs a tall symbol at the left with 3 content material blocks at the correct. It creates a easy visible hierarchy inside of a unmarried row: the primary block introduces the phase, 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, make a selection 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 the end, reproduction that 2d Workforce all over again.
For each and every of the 3 Teams, open Design > Structure and set Flex Path to Column with a 10px row hole between kid modules. To hurry this up, you’ll taste one Workforce first and use Prolong Attributes to use the similar format 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 forged CTAs.
Upload the picture and textual content content material to the modules. The lead heading is Thrive in a greater paintings surroundings. The 2 supporting blocks duvet Ergonomic Convenience and Inspiring Environment. Every supporting block makes use of the Be told Extra textual content Design Variable on its Button.
Testimonials Segment
The Testimonials phase gifts 3 buyer quotes in a three-card format with a piece heading above.
Upload a brand new Segment. From the Insert Segment modal, make a selection a Flex Equivalent Columns one-column construction. Position a Heading module within the Segment’s preliminary Row. Then, upload a 2d Row and make a selection a Grid Multi-Column construction with 3 equivalent columns. Inside of each and every Column, upload an Icon module, a Textual content module, and a Blurb module.
The phase identify Heading makes use of Heading 2. In the second one Row’s Design > Structure choice crew, set the Horizontal Hole to 30px. Every of the 3 Columns will get the Defined – Darkish Component Preset.
Inside of each and every Column, the Icon will get Darkish – Small, the Textual content will get Darkish Textual content, and the Blurb stacks two Component Presets: Darkish Textual content and Dense. The Blurb symbol will get a Border Radius of 8px. You’ll additionally use the related rounded symbol or border preset if you happen to created one in Phase 4.
To paintings quicker, taste the modules within the first Column first. Then, use Prolong Attributes to use the similar kinds from matching components within the first Column to matching components inside the Guardian Row.
Now, fill within the symbol and textual content content material. The phase heading reads Testimonials. Every card will get a quotation-mark icon, a testimonial quote within the Textual content module, and an writer picture with a reputation and function 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 phase is probably the most structurally complicated a part of the web page. Every value card makes use of a Workforce-based format with nested Teams, an Icon Record, and a footer Workforce. The payoff is a blank, constant card construction the place the center tier can stand out thru distinction.
Upload a brand new Segment. From the Insert Segment modal, make a selection a Flex Equivalent Columns one-column construction. Position a Heading module within the Segment’s preliminary Row for the phase identify.
Then, upload a 2d Row and make a selection a Grid Multi-Column construction with 3 equivalent columns. For now, focal point best at the first Column for the reason that card construction is dense. Within the first Column, upload a Workforce module. Then, upload any other Workforce module inside of it with a nested Heading module and Textual content module.
As a sibling of the second one Workforce, upload an Icon Record 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 further Columns and go away best the primary pricing card for now. At the ultimate Column, follow the Defined – Darkish Border Possibility Workforce Preset. Then, transfer the Row to the Pill breakpoint and set the row to a one-column format. After that, go back to the Desktop breakpoint.
To make the directions more straightforward to observe, we’ll seek advice from the 3 Teams because the Header Workforce, Inside Workforce, and Footer Workforce. Use the Layers panel within the screenshot beneath to verify which Workforce is being edited.
Every card’s Header Workforce makes use of both the Contained – Mild or Contained – Darkish Component Preset. The outer playing cards use Contained – Mild, whilst the center card makes use of Contained – Darkish.
The primary Inside Workforce will get a Vertical Hole of 10px the usage of the spacing worth out of your design method.
Every card’s Footer Workforce makes use of the Padding – Medium Possibility Workforce Preset. Every tier Heading makes use of Heading 3. Every tier description Textual content makes use of Darkish Textual content at the mild playing cards and Mild Textual content at the darkish heart card. Every value Heading makes use of Heading 5. Every Button makes use of Stuffed – Number one Colour at the outer playing cards and Stuffed – Black at the heart card.
The Icon Record makes use of Darkish at the mild playing cards and Mild Textual content at the darkish heart card. As soon as the primary card is styled, reproduction the primary Column two times. Then, alter the center Column via 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 > Parts choice crew, set the Structure Construction to 1 column. Set the Horizontal Hole to 30px so the stacked pricing playing cards stay constant spacing on smaller displays.
In the end, set the pricing content material. The 3 tiers are Scorching Table at $299/month, Devoted Table at $449/month, and Non-public Workplace at $999+/month. Every tier will get a brief description, an inventory of integrated advantages within the Icon Record, and a Signal Up Button. Trade the Icon Record icons to right-pointing arrows.
Countdown Segment
The Countdown phase creates urgency with a outstanding promotional CTA. All the phase sits in one row with a shiny background, growing a visible spoil between the pricing phase and the FAQ.
Upload a brand new Segment. From the Insert Segment modal, make a selection a Flex Equivalent Columns one-column construction. Observe the Contained – Darkish Row Component 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 in opposition to 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 phase makes use of an offset two-column format. 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, make a selection a Flex Offset Columns construction with two columns. A 2/5 + 3/5 development works smartly right here as it offers the heading block a slender anchor and offers 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 Component Preset.
The left Column heading reads Ceaselessly requested questions, adopted via a brief intro paragraph. At the correct, upload 5 Accordion pieces with questions and solutions that have compatibility the coworking area. 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 phase. This is the completed web page once more.
The necessary section isn’t just that the web page is done. It’s how the web page used to be constructed. The modules reference Design Variables and Presets relatively than depending on hardcoded hex values, one-off font sizes, or advert hoc padding. That’s the level of the design method.
The homepage is now more straightforward to revise, lengthen, and stay constant. The laborious paintings from Portions 3 and four has paid off, for the reason that design selections are reusable relatively than trapped inside of 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 we have now been construction during the direction.
After that, each and every new web page can inherit the similar world construction. That’s the remaining piece of scaffolding we want prior to construction the internal pages.
You might be smartly for your method to a whole web site design from scratch the usage of Divi 5.
The submit Phase 5: Construction A Divi 5 Homepage From Scratch seemed first on Sublime Issues Weblog.
WordPress Web Design