Your web site wishes a header, a footer, and templates for weblog posts, merchandise, and different content material varieties. Divi 5‘s Theme Builder will give you a unmarried workspace to design these kinds of international portions, with new options that help you absolutely keep an eye on all of your web page’s glance and capability.
This submit walks you via the usage of Theme Builder for the most typical use instances, appearing you find out how to get probably the most out of the ones new options.
If you wish to observe alongside quicker, grasp our loose Divi 5 Design System freebie first. It contains ready-made Theme Builder templates (headers, footers, and submit layouts) stressed out to Design Variables, so you’ll be able to customise the examples on this information with your individual emblem kinds in mins.
What Is Divi’s Theme Builder
Maximum web page developers help you design particular person pages. Divi’s Theme Builder is going additional. It will give you one workspace to design the whole thing that repeats throughout your web site, similar to:
Subscribe To Our Youtube Channel
- International Header: Your web site’s major navigation space, proven throughout all pages. Construct it as soon as along with your brand, menu, and phone to motion, then let it run site-wide.
- International Footer: The ground segment of each web page, protecting hyperlinks, copyright textual content, social icons, and e-newsletter signups.
- Weblog Publish Template: A structure that wraps each article you submit. Arrange the hero space, content material column, sidebar, and connected posts segment as soon as, and each new submit makes use of it routinely.
- WooCommerce Templates: Product pages, class pages, cart, and checkout all get their very own templates. Construct the precise structure your retailer wishes the usage of Divi’s complete suite of WooCommerce modules, slightly than settling for the default WooCommerce output.
- Customized Publish Kind Templates: In case your web site makes use of customized submit varieties, whether or not for workforce participants, occasions, testimonials, or portfolios, every one will have its personal template with its personal structure and content material construction.
- 404 Web page: A branded error web page that fits the remainder of your web site as a substitute of revealing a generic WordPress fallback.
Why Use The Theme Builder
Construction those repeatable sections of your web site could be very time-consuming. Exchange your brand, and also you’re updating it ten occasions. That’s the issue Theme Builder solves. Exchange the header template as soon as, and each web page in your web site displays that fluctuate immediately. Post a brand new weblog submit, and it routinely inherits your weblog template, no further setup wanted. The similar is going for product pages, portfolio entries, workforce profiles, or some other content material kind your web site makes use of.
This additionally issues for consistency. Pages styled in my view have a tendency to flow. Spacing will get moderately other right here, and a font weight adjustments there. Templates save you that. Each submit, each product web page, each touchdown web page that makes use of a template remains visually aligned as a result of all of them pull from the similar supply.
Theme Builder And WooCommerce
For shops working WooCommerce, that is the place the default WooCommerce pages prevent having a look generic. As a substitute of accepting no matter structure WooCommerce generates, you construct product web page templates in Theme Builder the usage of Divi’s WooCommerce modules, and each product inherits that structure routinely.
On a product web page template, you put precisely the modules you want: Product Images, Product Title, Product Price, Add To Cart, Product Rating, Product Reviews, and more.
Every one is a standalone Divi module with the whole vary of design settings, permitting you to keep an eye on structure, spacing, colours, and typography.
Class pages get the similar remedy, whether or not that’s an easy grid with the Woo Merchandise module or an absolutely customized product loop constructed with Loop Builder. Cart and checkout pages observe the similar good judgment. Allow Divi on the ones pages, and you’ll be able to construct the ones WooCommerce web page templates the usage of Divi’s WooCommerce modules, rearranging and styling them to suit your emblem.
You’ll be able to get particular, too. Show one header in your homepage and a special one on store pages. Construct layouts for positive classes. Set stipulations to turn templates most effective on particular submit varieties or exclude them from explicit pages. Theme Builder adapts to no matter construction your web site wishes.
New Options To Construct Your Web page Elements
Construction templates will get higher when you’ll be able to dynamically pull content material, prepare elements in blank workspaces, and replace styling throughout more than one pages immediately. Listed below are one of the key options we not too long ago presented:
| Function | What It Does | |
|---|---|---|
| Flexbox | Construct any structure construction with responsive breakdown, customized module ordering, and simple vertical alignment | Learn more |
| CSS Grid | Design complicated grid layouts with actual keep an eye on the usage of templates or guide grid parameters | Learn more |
| Loop Builder | Show dynamic content material like weblog posts, merchandise, and customized submit varieties in absolutely customizable layouts. Additionally helps ACF fields, together with repeaters! | Learn more |
| Preset-Based totally Design | Save and reuse whole module kinds or particular person choice teams, then replace all cases globally throughout your web site | Learn more |
| Customized Attributes | Upload any HTML characteristic like alt textual content, aria labels, and information attributes to beef up accessibility and capability | Learn more |
| Semantic HTML Parts | Exchange any module’s HTML part kind to make use of semantic tags like nav, header, article, and button for higher accessibility and search engine marketing | Learn more |
| Design Variables | Create international defaults for fonts, colours, spacing, and typography that replace throughout all of your web site | Learn more |
| Canvases | Construct menus, popups, and slide-in panels in separate workspaces that keep arranged and from your method | Learn more |
| Nested Modules | Position modules within different modules with countless nesting for complicated, customized layouts | Learn more |
| Interactions | Create popups, toggles, scroll results, and mouse interactions with out writing code | Learn more |
Get A Head Get started With Our Design Gadget
Construction from scratch takes time. Our Design System freebie will give you a ready-to-use basis with pre-built Theme Builder templates for headers, footers, and not unusual submit kind layouts, all stressed out as much as Design Variables so you’ll be able to change to your emblem colours and fonts site-wide in mins.
You’ll in finding the Theme Builder templates within the freebie package deal. Import them without delay into Divi, they usually seem in Theme Builder waiting to edit. It’s a cast place to begin in case you’re development a brand new web site or having a look to review how a well-structured Theme Builder setup works.
The usage of Theme Builder To Construct Templates
You’ll be able to in finding Theme Builder to your WordPress dashboard at Divi > Theme Builder.
Headers and footers get their very own buttons appropriate on the height. For submit varieties, click on the Upload New Template button. Construction any of those works like some other web page in Divi: the Visible Builder opens, you upload modules, taste them, and save.
With the fundamentals lined, let’s construct the most typical portions of a regular WordPress web page: a header, a footer, and a weblog submit template.
Construction A Header
Click on the Upload Header button on the height of Theme Builder. The Visible Builder opens with a collection of premade Flexbox templates. We’re deciding on the three-column, wider heart column template below the Flex segment. This creates 3 packing containers with the middle one just a little wider than the others to deal with the menu. You’ll be able to use any structure that matches your wishes.
Configuring Flexbox
The template comes with Flexbox already configured, however you’ll wish to modify the space to keep an eye on spacing between your brand, menu, and button. Open the segment settings, move to the Design tab, and in finding the Format choice team. The Hole box accepts static values like 10px or complex gadgets like rem, em, viewport widths, and clamp().
Fairly than typing values through hand, pull them out of your Design Variables. Click on the dynamic content material icon subsequent to the Hole box and make a selection your spacing variable.
This helps to keep your header spacing tied in your design gadget. For a complete breakdown of each Flexbox choice, take a look at our walkthrough. And for a gap-based responsive spacing gadget, we have a guide for that, too.
Including An HTML Wrapper To The Header
Your header segment wishes semantic construction. Display screen readers and search engines like google will have to acknowledge this space as your web site’s major header, no longer a generic container. This additionally is helping assistive applied sciences give customers a strategy to bounce without delay to navigation.
Through default, Divi assigns a header part to the header segment, so normally you gained’t wish to exchange anything else. If you wish to verify it, open the segment settings, move to the Complicated tab, and in finding the HTML choice team, then examine that the Part Kind is ready to header.
Including Parts And Styling The Header
Let’s get started through including modules to the flexbox packing containers. We’re including a Brand Module to the primary column, a Menu Module to the second one, and a Button Module to the 3rd.
As discussed above, Theme Builder elements paintings precisely like the remainder of your Divi pages, so continue to taste your header the standard method: background and part colours, fonts, hover results, spacing, and extra.
Styling can pull from Design Variables and presets. The Variable Supervisor permits you to create colour variables for emblem colours, font variables for typography, and quantity variables for spacing. Making use of those to the row and modules, slightly than the usage of mounted values, connects the whole thing to a centralized gadget. You’ll be able to even use presets to taste components to check the remainder of your web site.
The segment inherits Divi’s default padding, which supplies the header a stately, open really feel. Go away it as is in case you like that glance, or move to the segment settings, Design > Spacing, and input a customized padding worth. We selected 15px for a condensed header.
Or to modify this, move to the segment settings Design > Spacing, and input a customized spacing worth below padding. We selected 15px for a condensed header.
If the width feels slender, modify it during the segment’s Sizing choices below Design. We went with the default.
The menu wishes the similar semantic remedy. While you mark it as navigation, display screen readers announce it as web site navigation, and customers can bounce to or previous it the usage of keyboard shortcuts.
Open the Menu Module settings, move to the Complicated tab, and alter Part Kind to nav from the HTML choices. That wraps the menu in a nav tag and obviously defines its function.
Those settings slightly scrape the outside of Divi 5’s attainable. You’ll be able to additionally construct mega menus if wanted. Right here’s a quick guide to do so.
Making The Header Responsive
The Menu Module collapses right into a hamburger menu through default on cellular. That works high quality for many websites. However Canvases and Interactions help you construct one thing extra adapted if you need keep an eye on over the animation, structure, and general really feel.
Developing A Cell Menu Canvas
Click on the Canvas dropdown on the height of the Visible Builder, subsequent in your web page name. Choose Upload Canvas, identify it one thing like Cell Menu, and toggle the worldwide transfer to allow this Canvas throughout all of your web site.
Upload a bit and set its alignment to appropriate the usage of the flexbox settings.
Do the similar for the column, then practice a semi-transparent darkish background to create an overlay that dims the web page in the back of it.
Label the segment so it’s simple to seek out later.
Styling The Menu Row
Upload a background colour to the row and set the peak to 100vh on each the segment and the row from the sizing tab, so the menu remains aligned when opened.
You could realize that spacing is off. First, set the segment padding to 0.
Then upload a refined padding to the row itself. We’re going with 20px.
Optionally, set an front animation for a extra immersive enjoy. For our instance, we made the row slide in from the left from Design > Animation.
Developing A Vertical Menu
Through default, the Menu in Divi is horizontally organized. Then again, this principally defeats the aim on a display screen with restricted horizontal area, like cellphones. So, we’re going to use Divi 5’s Loop Builder to construct a vertical menu for cellular gadgets.
Upload a Group in your menu column, then upload a Link Module to the Module Workforce.
Move to Workforce Settings > Design > Format, exchange the Format Path to Column, and modify the vertical hole. We’re going with 10px. Those will set each menu merchandise 10px aside for a compact glance.
Likewise, set the Justify Content material to Middle and Align Pieces to Finish.
Subsequent, set the HTML wrapper for this Module Workforce to nav.
Now, transfer directly to the Hyperlink Module. Toggle the loop button, then select Menu from the Question Kind dropdown and make a selection your menu.
Then, move to the Hyperlink tab, click on the Upload Dynamic Content material icon, and make a selection Loop Menu Hyperlink.
In a similar way, within the textual content box, make a selection Loop Menu Textual content.
In the end, taste the menu as you probably did with the desktop menu module.
Including A Shut Button For The Menu
Upload an Icon Module on the height with an in depth icon, taste it, set its Part Kind to button, and upload an aria-label characteristic with a price like “Shut Menu” during the Complicated tab’s Attributes segment.
Now, within the Place settings, set the Place to Mounted, Offset Starting place to height appropriate, and set each offsets to 20px and the Z Index to 999. This guarantees the icon at all times stays on height, with a 20px respiring area from the top-right nook, without reference to the container’s settings. The overlap with the menu will likely be mounted within the later steps.
We additionally added a CTA button to the combo.
Making ready The Menu For The Cause
The row for the menu components is simply too extensive as it inherits Divi’s default settings. To mend this, move to the row’s sizing tab and set the width to auto. This provides the row a width equivalent to its content material plus the padding.
Finally, move to segment settings > Complicated > Visibility and conceal this segment for all gadgets. The menu will have to most effective seem when brought about.
Then move to the Place tab, exchange the placement to mounted, the foundation to height appropriate, and set the Z Index to 999. This pins the segment to the viewport and layers it above all different content material.
In combination, those two settings flip the menu canvas right into a power menu that’s at all times on height of the remainder of the web page, giving it a real cellular menu really feel.
Construction The Menu Cause
Transfer to the principle canvas. Cover the center column’s Menu Module and the 3rd column’s button on smaller monitors the usage of Visibility settings.
Within the ultimate column, upload an Icon Module with a hamburger icon. Taste it, set the Part Kind to “button” and the aria-label characteristic to “Open Menu.” Display this icon most effective on cellular and pill, hiding it on desktop the place the whole menu already seems.
Atmosphere Interactions To Cause The Menu
Now, we’ll use Interactions to set this icon because the cause for our canvas cellular menu.
Move to the hamburger icon’s settings > Complicated > Interactions and upload a brand new interplay with the next settings:
- Admin Label: Display Cell Menu
- Cause Match: Click on
- Impact Motion: Display Part
- Goal Module: (The segment we categorized within the Canvas)
- Time Prolong: 150ms
This interplay will now cause the menu opening on smaller gadgets.
The shut icon within your Canvas will get its personal interplay:
- Admin Label: Cover Cell Menu
- Cause Match: Click on
- Impact Motion: Cover Part
- Goal Module: (The segment we categorized within the Canvas)
- Time Prolong: 150ms
With this easy setup, we have now a mobile-ready header that improves accessibility and search engine marketing.
The setup mirrors the header, however the construction holds other content material. We’re the usage of a two-row flex template: the tip row for major content material, the ground row for prison textual content and hyperlinks.
Atmosphere Up The Most sensible Row
We will be able to get started through nesting a three-column flexbox within the first row. This creates area for more than one content material spaces that take a seat aspect through aspect on better monitors and stack naturally on cellular.
The primary column can cling a Textual content Module with corporate data, and a Social Media Observe Module will also be positioned underneath it.
The second one column works nicely for the vertical menu we made previous within the header. The 3rd column supplies area for an Optin Module the place guests can subscribe.
Organize them then again your web site wishes, then taste them accordingly: fonts, spacing, colours, borders, and backgrounds.
The footer wishes the similar right kind markup we added to the header for accessibility and search engine marketing. Open the segment settings, move to Complicated > HTML, and alter Part Kind to footer. That wraps the whole thing in a right kind footer tag.
The Menu Module to your 2nd column additionally wishes its part kind set to nav.
The Optin Module comprises each an enter box and a post button, every desiring its personal accessibility attributes. Divi 5 permits you to set attributes to any a part of a module.
Click on Upload Characteristic, make a selection Box from the Goal Part dropdown, set Characteristic Identify to function, and Characteristic Price to textbox.
Then upload every other box characteristic with aria-required set to true. This is helping keep in touch required fields extra obviously to assistive applied sciences.
The Optin Module goals all fields immediately. Different modules, like Touch Shape, help you goal particular person fields one by one. Upload another characteristic: set Characteristic Identify to aria-label, goal part to button, and the worth to one thing like “Subscribe to e-newsletter.” This clarifies the button’s motion with out converting what seems on display screen.
Those changes make your footer available to everybody and lend a hand search engines like google parse your web site construction as it should be.
Atmosphere Up The Backside Row
The second one row can cling a copyright realize or prison hyperlinks. Fairly than typing the 12 months and updating it each January, Divi can pull the present 12 months routinely the usage of dynamic knowledge.
A Textual content Module right here works nicely. Click on the dynamic knowledge icon above the textual content box and make a selection Date. Customized Structure with Y within the structure box pulls the present four-digit 12 months. The Ahead of box can cling a copyright image adopted through an area, and the After box an area and your corporate identify. The end result updates itself every 12 months.
Assembling A Weblog Publish Template
Weblog posts want their very own visible construction, cut loose the header and footer that wrap them. A template that attracts content material dynamically method every new submit inherits the similar structure with out guide setup.
For this template, we’re development a frame structure with a hero space, major content material column, and sidebar. Click on Upload New Template.
Then, take a look at the “All Posts” field and create a Template.
Then click on Upload Customized Frame within the All Posts template. The Visible Builder will have to now open with a clean canvas.
Atmosphere Up The Hero House
A piece on the height works nicely as a hero space for the featured symbol and key submit data. The Publish Name module programs the whole thing: name, featured symbol, writer, and extra, as a unmarried element.
For extra granular keep an eye on, you’ll be able to upload every module your self and fasten it to the real content material the usage of the dynamic content material choice.
Taste it like some other Divi part: emblem fonts, colours, and spacing.
This segment advantages from right kind markup, too. Beneath Complicated > HTML, converting Part Kind to segment shall we browsers and display screen readers establish it as a definite content material space.
Construction The Major Content material House
Under the hero, every other segment holds the object content material and sidebar in a two-column structure. A 2/3 and 1/3 cut up provides readers room to concentrate on the object whilst maintaining connected content material inside of achieve.
The broader column can cling a Publish Content material Module. This pulls in no matter you write within the WordPress editor for every submit: paragraphs, photographs, headings, and formatting all seem routinely. Taste it accordingly.
This column works nicely wrapped in a chief part. That marks it as the main content material space, serving to accessibility gear and search engines like google perceive what guests got here to learn.
Developing A Dynamic Sidebar
The narrower column turns into a sidebar. A Individual Module with dynamic knowledge for the submit writer suits nicely right here.
Under that, upload a Name Module with a heading like “Extra Helpful Posts” or “Extra From This Class,” then taste it.
Then, a Name Module with the Loop Part toggle enabled can display contemporary articles. Set Question Kind to posts and Publish Kind to posts. Posts In keeping with Web page determines what number of articles seem, possibly 3 or 4, to stay the listing manageable. Set the hyperlinks the usage of the related loop dynamic content material choices.
The sidebar column will also be set to apart within the HTML settings. This marks the content material as supplementary, cut loose the principle article however nonetheless connected.
Including A Similar Posts Phase
On the backside, a brand new segment with a two-row structure works nicely. Nest a four-column structure within the second one row, delete 3 columns, and stay one.
The primary row can cling a targeted name like “Fresh Posts” or “You May Like.”
The Loop Part toggle on that column pulls in posts at your most popular depend, ordered through date or reputation. Modules for the featured symbol, name, and excerpt hook up with their dynamic Loop content material tags.
Styling them as playing cards with borders, shadows, or backgrounds makes every preview clickable and distinct.
Additionally, allow the loop hyperlinks for the column loop.
The part kind for this segment will also be set to segment within the HTML settings.
Write a brand new submit, submit it, and this template renders the whole thing routinely with out touching the structure once more. And when you are making adjustments to the template, they replace throughout each submit.
Reordering Content material For Cell Gadgets
Desktop layouts don’t at all times translate nicely to smaller monitors. Every module, column, and row has an Order environment within the content material tab that controls stacking on other display screen sizes.
Your weblog template may display the writer first, then connected posts within the sidebar. Atmosphere the related-posts pieces to orders 1 and a couple of and the writer pieces to orders 3 and four on cellular puts connected posts earlier than the writer bio for higher engagement.
The Visibility settings pair nicely with this. A sidebar banner advert may paintings on desktop, nevertheless it clutters cellular monitors. Hiding it on smaller breakpoints helps to keep issues blank.
Footers observe the similar good judgment. On smaller gadgets, 4 columns of hyperlinks will also be reordered so the e-newsletter signup seems first on telephones, with prison hyperlinks on the backside.
Striking In combination A Product Web page
Click on Upload New Template in Theme Builder, then make a selection All Merchandise, then click on Create Template. As soon as the template card seems, click on Upload Customized Frame to open the Visible Builder with a clean canvas.
We’re including two sections. The primary makes use of a two-column structure with a 2/5 and three/5 cut up. That is the place all of the core product content material is going: photographs on one aspect, acquire main points at the different.
The second one segment makes use of an ordinary single-row structure. That’s the place upsells and connected merchandise will take a seat, cut loose the principle product data.
Set the primary segment’s Part Kind to article below Complicated > HTML. A product is its personal standalone piece of content material, so the object part is the fitting name.
The second one segment will get the segment Part Kind, marking it as a definite however connected space of the web page.
For the columns within the first segment, the left column works nicely as a determine part as it comprises the product imagery.
The correct column, which carries the core acquire main points, will also be set to major.
Construction The Product Format
The left column holds the product imagery. Upload the Product Pictures module right here. Beneath the Content material tab, amplify the Parts dropdown to keep an eye on what presentations: the featured symbol, gallery photographs, and sale badge. Every has its personal toggle.
The Design tab’s Symbol dropdown covers full-width, borders, field shadows, spacing, and filters. The Sale Badge will get its personal styling choices too, together with background colour, textual content, and borders.
The correct column is the acquisition space. Modify the column spacing after which stack your modules within the order you like. We’re going with: Product Name, Product Score, Product Value, Product Description, and Upload To Cart. Taste every module accordingly.
The Upload To Cart module’s Parts toggles help you display or conceal the volume box and inventory depend.
You may additionally imagine including an Icon Listing module for consider alerts: safe cost, loose returns, guaranty data, and the rest your retailer provides. Taste and align it as nicely.
The icons listed here are ornamental for the reason that textual content labels elevate all of the which means. Choose the Listing Icon merchandise > Complicated > Attributes, goal the Icon part, set Characteristic Identify to aria-hidden, and Characteristic Price to true. Repeat for all listing pieces. Display screen readers will skip the icons and browse the textual content without delay.
Appearing Similar Merchandise
Upload the Similar Merchandise module to the second one segment. The module pulls merchandise that WooCommerce has already made up our minds are connected to the present product, in response to shared classes and tags, with out a question setup wanted in your finish.
The Content material tab permits you to keep an eye on what number of merchandise seem, their order, and what components will have to seem. The Design tab covers the whole vary of styling: symbol measurement, name typography, value textual content, button kinds, and spacing. Taste the whole thing to check the remainder of your template.
The Similar Merchandise module works for many web sites. For extra keep an eye on over which merchandise seem and the way every card appears to be like, Loop Builder permits you to question the product submit kind and construct the structure the usage of any Divi module, simply as we did for the connected posts segment within the weblog template.
Use The Theme Builder In Divi 5 Nowadays!
Divi 5‘s Theme Builder places your entire international elements in a single position. Construct headers, footers, and content material templates as soon as, set the place they seem, they usually paintings throughout all of your web site.
The combo of Loop Builder, Canvases, and Design Variables permits you to arrange templates that pull dynamic content material, deal with complicated interactions, and take care of constant styling throughout each web page.
The templates you construct right here change into the root for all of your web site. You construct the construction that the whole thing else sits on, and getting it appropriate right here method much less paintings all over the place else.
The submit Using The Divi Theme Builder in Divi 5 seemed first on Elegant Themes Blog.
0 Comments