Your internet website needs a header, a footer, and templates for blog posts, products, and other content material subject matter types. Divi 5‘s Theme Builder will give you a single workspace to design a large number of those global parts, with new choices that mean you can completely keep watch over your whole website’s look and capacity.
This publish walks you by way of using Theme Builder for the most common use cases, showing you learn how to get one of the crucial out of those new choices.
If you want to apply along sooner, grab our loose Divi 5 Design Machine freebie first. It accommodates ready-made Theme Builder templates (headers, footers, and publish layouts) stressed to Design Variables, so that you’ll have the ability to customize the examples in this knowledge with your own brand sorts in minutes.
What Is Divi’s Theme Builder
Most internet web page builders mean you can design explicit individual pages. Divi’s Theme Builder goes further. It’s going to come up with one workspace to design the whole thing that repeats right through your internet website, similar to:
Subscribe To Our Youtube Channel
- International Header: Your internet website’s number one navigation area, confirmed right through all pages. Assemble it once at the side of your logo, menu, and speak to to movement, then let it run site-wide.
- International Footer: The bottom phase of each internet web page, overlaying links, copyright text, social icons, and newsletter signups.
- Blog Put up Template: A construction that wraps each article you put up. Organize the hero area, content material subject matter column, sidebar, and related posts phase once, and each new publish uses it routinely.
- WooCommerce Templates: Product pages, magnificence pages, cart, and checkout all get their own templates. Assemble the correct construction your store needs using Divi’s entire suite of WooCommerce modules, moderately than settling for the default WooCommerce output.
- Custom designed Put up Type Templates: If your internet website uses custom designed publish types, whether or not or no longer for workforce individuals, events, testimonials, or portfolios, each and every one can have its private template with its private construction and content material subject matter building.
- 404 Internet web page: A branded error internet web page that matches the rest of your internet website as an alternative of unveiling a generic WordPress fallback.
Why Use The Theme Builder
Construction the ones repeatable sections of your internet website could also be very time-consuming. Exchange your logo, and in addition you’re updating it ten cases. That’s the problem Theme Builder solves. Exchange the header template once, and each internet web page on your internet website presentations that change immediately. Publish a brand spanking new blog publish, and it routinely inherits your blog template, no further setup sought after. The an identical goes for product pages, portfolio entries, workforce profiles, or another content material subject matter type your internet website uses.
This moreover problems for consistency. Pages styled in my view tend to flow. Spacing gets moderately different appropriate right here, and a font weight changes there. Templates prevent that. Every publish, each product internet web page, each landing internet web page that uses a template stays visually aligned because of they all pull from the an identical provide.
Theme Builder And WooCommerce
For stores running WooCommerce, that’s the position the default WooCommerce pages prevent taking a look generic. Instead of accepting regardless of construction WooCommerce generates, you assemble product internet web page templates in Theme Builder using Divi’s WooCommerce modules, and each product inherits that construction routinely.
On a product internet web page template, you place exactly the modules you want: Product Photographs, Product Name, Product Worth, Upload To Cart, Product Ranking, Product Opinions, and extra.
Each one is a standalone Divi module with all the range of design settings, allowing you to keep watch over construction, spacing, colors, and typography.
Magnificence pages get the an identical treatment, whether or not or no longer that’s a easy grid with the Woo Products module or a completely custom designed product loop built with Loop Builder. Cart and checkout pages apply the an identical excellent judgment. Allow Divi at the ones pages, and also you’ll have the ability to assemble those WooCommerce internet web page templates using Divi’s WooCommerce modules, rearranging and styling them to fit your brand.
You’ll get explicit, too. Display one header on your homepage and a different one on retailer pages. Assemble layouts for sure categories. Set must haves to show templates most simple on explicit publish types or exclude them from explicit pages. Theme Builder adapts to regardless of building your internet website needs.
New Choices To Assemble Your Internet website Components
Construction templates gets upper whilst you’ll have the ability to dynamically pull content material subject matter, prepare parts in clean workspaces, and exchange styling right through multiple pages right away. Listed below are one of the vital important key choices we no longer too way back introduced:
| Serve as | What It Does | |
|---|---|---|
| Flexbox | Assemble any construction building with responsive breakdown, custom designed module ordering, and easy vertical alignment | Be informed extra |
| CSS Grid | Design sophisticated grid layouts with precise keep watch over using templates or information grid parameters | Be informed extra |
| Loop Builder | Display dynamic content material subject matter like blog posts, products, and custom designed publish types in completely customizable layouts. Moreover is helping ACF fields, along with repeaters! | Be informed extra |
| Preset-Based totally Design | Save and reuse entire module sorts or explicit individual selection groups, then exchange all instances globally right through your internet website | Be informed extra |
| Custom designed Attributes | Add any HTML feature like alt text, aria labels, and information attributes to reinforce accessibility and capacity | Be informed extra |
| Semantic HTML Portions | Exchange any module’s HTML phase type to use semantic tags like nav, header, article, and button for upper accessibility and search engine marketing | Be informed extra |
| Design Variables | Create global defaults for fonts, colors, spacing, and typography that exchange right through your whole internet website | Be informed extra |
| Canvases | Assemble menus, popups, and slide-in panels in separate workspaces that stay organized and out of your way | Be informed extra |
| Nested Modules | Place modules inside of of various modules with unending nesting for sophisticated, custom designed layouts | Be informed extra |
| Interactions | Create popups, toggles, scroll effects, and mouse interactions without writing code | Be informed extra |
Get A Head Get began With Our Design Gadget
Construction from scratch takes time. Our Design Machine freebie will give you a ready-to-use foundation with pre-built Theme Builder templates for headers, footers, and no longer strange publish type layouts, all stressed up to Design Variables so that you’ll have the ability to alternate on your brand colors and fonts site-wide in minutes.
You’ll to find the Theme Builder templates inside the freebie package deal deal. Import them directly into Divi, they generally appear in Theme Builder ready to edit. It’s a solid starting point must you’re construction a brand spanking new internet website or taking a look to study how a well-structured Theme Builder setup works.
Using Theme Builder To Assemble Templates
You’ll to find Theme Builder on your WordPress dashboard at Divi > Theme Builder.
Headers and footers get their own buttons proper at the top. For publish types, click on at the Add New Template button. Construction any of the ones works like another internet web page in Divi: the Visual Builder opens, you add modules, style them, and save.
With the basics coated, let’s assemble the most common parts of a normal WordPress website: a header, a footer, and a blog publish template.
Construction A Header
Click on at the Add Header button at the top of Theme Builder. The Visual Builder opens with a collection of premade Flexbox templates. We’re settling at the three-column, wider middle column template underneath the Flex phase. This creates 3 boxes with the center one a little bit of wider than the others to deal with the menu. You’ll use any construction that fits your needs.
Configuring Flexbox
The template comes with Flexbox already configured, on the other hand you’ll want to adjust the distance to keep watch over spacing between your logo, menu, and button. Open the phase settings, go to the Design tab, and to find the Construction selection team. The Hollow field accepts static values like 10px or sophisticated units like rem, em, viewport widths, and clamp().
Rather than typing values by the use of hand, pull them from your Design Variables. Click on at the dynamic content material subject matter icon next to the Hollow field and make a choice your spacing variable.
This helps to keep your header spacing tied for your design system. For an entire breakdown of each Flexbox selection, check out our walkthrough. And for a gap-based responsive spacing system, we’ve a information for that, too.
Together with An HTML Wrapper To The Header
Your header phase needs semantic building. Visual display unit readers and engines like google like google must recognize this area as your internet website’s number one header, not a generic container. This moreover helps assistive technologies give consumers a strategy to leap directly to navigation.
By the use of default, Divi assigns a header phase to the header phase, so usually you received’t want to change anything. If you want to check it, open the phase settings, go to the Advanced tab, and to find the HTML selection team, then take a look at that the Section Type is able to header.
Together with Portions And Styling The Header
Let’s get began by the use of together with modules to the flexbox boxes. We’re together with a Logo Module to the main column, a Menu Module to the second, and a Button Module to the third.
As mentioned above, Theme Builder parts art work exactly like the rest of your Divi pages, so proceed to style your header the usual way: background and phase colors, fonts, hover effects, spacing, and further.
Styling can pull from Design Variables and presets. The Variable Manager implies that you’ll be able to create color variables for brand colors, font variables for typography, and amount variables for spacing. Applying the ones to the row and modules, moderately than using fastened values, connects the whole thing to a centralized system. You’ll even use presets to style elements to test the rest of your internet website.
The phase inherits Divi’s default padding, which supplies the header a stately, open in point of fact really feel. Leave it as is must you prefer that look, or go to the phase settings, Design > Spacing, and enter a custom designed padding price. We decided on 15px for a condensed header.
Or to change this, go to the phase settings Design > Spacing, and enter a custom designed spacing price underneath padding. We decided on 15px for a condensed header.
If the width feels narrow, adjust it at some point of the phase’s Sizing possible choices underneath Design. We went with the default.
The menu needs the an identical semantic treatment. When you mark it as navigation, visual display unit readers announce it as internet website navigation, and consumers can leap to or earlier it using keyboard shortcuts.
Open the Menu Module settings, go to the Advanced tab, and change Section Type to nav from the HTML possible choices. That wraps the menu in a nav tag and clearly defines its serve as.
The ones settings relatively scrape the outdoor of Divi 5’s attainable. You’ll moreover assemble mega menus if sought after. Proper right here’s a fast information to take action.
Making The Header Responsive
The Menu Module collapses appropriate right into a hamburger menu by the use of default on cell. That works efficient for plenty of web pages. On the other hand Canvases and Interactions mean you can assemble something additional tailored if you want to have keep watch over over the animation, construction, and general in point of fact really feel.
Creating A Cell Menu Canvas
Click on at the Canvas dropdown at the top of the Visual Builder, next for your internet web page title. Choose Add Canvas, name it something like Cell Menu, and toggle the global switch to permit this Canvas right through your whole internet website.
Add a work and set its alignment to proper using the flexbox settings.
Do the an identical for the column, then apply a semi-transparent dark background to create an overlay that dims the internet web page at the back of it.
Label the phase so it’s easy to go looking out later.
Styling The Menu Row
Add a background color to the row and set the height to 100vh on each and every the phase and the row from the sizing tab, so the menu stays aligned when opened.
That you must understand that spacing is off. First, set the phase padding to 0.
Then add a cultured padding to the row itself. We’re going with 20px.
Optionally, set an entrance animation for a additional immersive revel in. For our example, we made the row slide in from the left from Design > Animation.
Creating A Vertical Menu
By the use of default, the Menu in Divi is horizontally arranged. However, this mainly defeats the purpose on a visual display unit with limited horizontal area, like cell phones. So, we’re going to make use of Divi 5’s Loop Builder to build a vertical menu for cell units.
Add a Team for your menu column, then add a Hyperlink Module to the Module Group.
Move to Group Settings > Design > Construction, change the Construction Trail to Column, and adjust the vertical hollow. We’re going with 10px. The ones will set each menu products 10px apart for a compact look.
Likewise, set the Justify Content material subject matter to Middle and Align Items to End.
Next, set the HTML wrapper for this Module Group to nav.
Now, switch without delay to the Link Module. Toggle the loop button, then choose Menu from the Query Type dropdown and make a choice your menu.
Then, go to the Link tab, click on at the Add Dynamic Content material subject matter icon, and make a choice Loop Menu Link.
Similarly, inside the text field, make a choice Loop Menu Text.
In any case, style the menu as you most likely did with the desktop menu module.
Together with A Close Button For The Menu
Add an Icon Module at the top with an in depth icon, style it, set its Section Type to button, and add an aria-label feature with a worth like “Close Menu” at some point of the Advanced tab’s Attributes phase.
Now, inside the Position settings, set the Position to Mounted, Offset Starting to top proper, and set each and every offsets to 20px and the Z Index to 999. This promises the icon always remains on top, with a 20px breathing area from the top-right corner, without reference to the container’s settings. The overlap with the menu will also be fastened inside the later steps.
We moreover added a CTA button to the mix.
Making waiting The Menu For The Purpose
The row for the menu elements is just too huge because it inherits Divi’s default settings. To fix this, go to the row’s sizing tab and set the width to auto. This gives the row a width an identical to its content material subject matter plus the padding.
In any case, go to phase settings > Advanced > Visibility and hide this phase for all units. The menu must most simple appear when triggered.
Then go to the Position tab, change the location to fastened, the starting to top proper, and set the Z Index to 999. This pins the phase to the viewport and layers it above all other content material subject matter.
Together, the ones two settings turn the menu canvas appropriate into an influence menu that’s always on top of the rest of the internet web page, giving it an actual cell menu in point of fact really feel.
Construction The Menu Purpose
Switch to the main canvas. Cover the middle column’s Menu Module and the third column’s button on smaller screens using Visibility settings.
Throughout the remaining column, add an Icon Module with a hamburger icon. Style it, set the Section Type to “button” and the aria-label feature to “Open Menu.” Show this icon most simple on cell and tablet, hiding it on desktop where all the menu already turns out.
Environment Interactions To Purpose The Menu
Now, we’ll use Interactions to set this icon since the reason for our canvas cell menu.
Move to the hamburger icon’s settings > Advanced > Interactions and add a brand spanking new interaction with the following settings:
- Admin Label: Show Cell Menu
- Purpose Fit: Click on on
- Affect Movement: Show Section
- Objective Module: (The phase we labeled inside the Canvas)
- Time Lengthen: 150ms
This interaction will now reason the menu opening on smaller units.
The close icon inside your Canvas gets its private interaction:
- Admin Label: Cover Cell Menu
- Purpose Fit: Click on on
- Affect Movement: Cover Section
- Objective Module: (The phase we labeled inside the Canvas)
- Time Lengthen: 150ms
With this simple setup, now we have a mobile-ready header that improves accessibility and search engine marketing.
The setup mirrors the header, on the other hand the development holds different content material subject matter. We’re using a two-row flex template: the top row for number one content material subject matter, the bottom row for legal text and links.
Environment Up The Best Row
We will be able to get began by the use of nesting a three-column flexbox inside the first row. This creates area for multiple content material subject matter areas that sit side by the use of side on upper screens and stack naturally on cell.
The principle column can cling a Text Module with company information, and a Social Media Follow Module can also be situated below it.
The second column works successfully for the vertical menu we made earlier inside the header. The third column provides area for an Optin Module where visitors can subscribe.
Get ready them then again your internet website needs, then style them accordingly: fonts, spacing, colors, borders, and backgrounds.
The footer needs the an identical correct markup we added to the header for accessibility and search engine marketing. Open the phase settings, go to Advanced > HTML, and change Section Type to footer. That wraps the whole thing in a correct footer tag.
The Menu Module on your second column moreover needs its phase type set to nav.
The Optin Module accommodates each and every an input field and a publish button, each and every short of its private accessibility attributes. Divi 5 implies that you’ll be able to set attributes to any part of a module.
Click on on Add Function, make a choice Field from the Objective Section dropdown, set Function Name to serve as, and Function Value to textbox.
Then add every other field feature with aria-required set to true. That is serving to be in contact required fields additional clearly to assistive technologies.
The Optin Module goals all fields right away. Other modules, like Contact Form, mean you can objective explicit individual fields one after the other. Add any other feature: set Function Name to aria-label, objective phase to button, and the associated fee to at least one factor like “Subscribe to newsletter.” This clarifies the button’s movement without changing what turns out on visual display unit.
The ones adjustments make your footer available in the market to everyone and lend a hand engines like google like google parse your internet website building accurately.
Environment Up The Bottom Row
The second row can cling a copyright understand or legal links. Rather than typing the 365 days and updating it each January, Divi can pull the existing 365 days routinely using dynamic wisdom.
A Text Module appropriate right here works successfully. Click on at the dynamic wisdom icon above the text field and make a choice Date. Custom designed Format with Y inside the structure field pulls the existing four-digit 365 days. The Previous to field can cling a copyright symbol followed by the use of a space, and the After field a space and your company name. The end result updates itself each and every 365 days.
Assembling A Blog Put up Template
Blog posts need their own visual building, break free the header and footer that wrap them. A template that draws content material subject matter dynamically way each and every new publish inherits the an identical construction without information setup.
For this template, we’re construction a body construction with a hero area, number one content material subject matter column, and sidebar. Click on on Add New Template.
Then, check out the “All Posts” box and create a Template.
Then click on on Add Custom designed Body inside the All Posts template. The Visual Builder must now open with a blank canvas.
Environment Up The Hero Space
A work at the top works successfully as a hero area for the featured image and key publish information. The Put up Title module packages the whole thing: title, featured image, creator, and further, as a single part.
For additonal granular keep watch over, you’ll have the ability to add each and every module yourself and fix it to the true content material subject matter using the dynamic content material subject matter selection.
Style it like another Divi phase: brand fonts, colors, and spacing.
This phase benefits from correct markup, too. Beneath Advanced > HTML, changing Section Type to phase we could browsers and visual display unit readers decide it as a certain content material subject matter area.
Construction The Number one Content material subject matter Space
Below the hero, every other phase holds the object content material subject matter and sidebar in a two-column construction. A 2/3 and 1/3 get a divorce supplies readers room to be aware of the object while protective related content material subject matter inside reach.
The wider column can cling a Put up Content material subject matter Module. This pulls in regardless of you write inside the WordPress editor for each and every publish: paragraphs, footage, headings, and formatting all appear routinely. Style it accordingly.
This column works successfully wrapped in a first-rate phase. That marks it as the primary content material subject matter area, helping accessibility tools and engines like google like google understand what visitors were given right here to be informed.
Creating A Dynamic Sidebar
The narrower column turns right into a sidebar. A Person Module with dynamic wisdom for the publish creator fits successfully appropriate right here.
Below that, add a Title Module with a heading like “Additional Useful Posts” or “Additional From This Magnificence,” then style it.
Then, a Title Module with the Loop Section toggle enabled can show recent articles. Set Query Type to posts and Put up Type to posts. Posts In line with Internet web page determines what choice of articles appear, in all probability 3 or 4, to stick the tick list manageable. Set the links using the connected loop dynamic content material subject matter possible choices.
The sidebar column can also be set to aside inside the HTML settings. This marks the content material subject matter as supplementary, break free the main article on the other hand nevertheless related.
Together with A Similar Posts Section
At the bottom, a brand spanking new phase with a two-row construction works successfully. Nest a four-column construction inside the second row, delete 3 columns, and keep one.
The principle row can cling a centered title like “Recent Posts” or “You Would possibly Like.”
The Loop Section toggle on that column pulls in posts at your hottest depend, ordered by the use of date or reputation. Modules for the featured image, title, and excerpt connect with their dynamic Loop content material subject matter tags.
Styling them as taking part in playing cards with borders, shadows, or backgrounds makes each and every preview clickable and distinct.
Moreover, permit the loop links for the column loop.
The phase type for this phase can also be set to phase inside the HTML settings.
Write a brand spanking new publish, put up it, and this template renders the whole thing routinely without touching the construction another time. And when you’re making changes to the template, they exchange right through each publish.
Reordering Content material subject matter For Cell Units
Desktop layouts don’t always translate successfully to smaller screens. Each module, column, and row has an Order atmosphere inside the content material subject matter tab that controls stacking on different visual display unit sizes.
Your blog template would possibly show the creator first, then related posts inside the sidebar. Environment the related-posts items to orders 1 and a couple of and the creator items to orders 3 and 4 on cell places related posts faster than the creator bio for upper engagement.
The Visibility settings pair successfully with this. A sidebar banner ad would possibly art work on desktop, on the other hand it clutters cell screens. Hiding it on smaller breakpoints helps to keep problems clean.
Footers apply the an identical excellent judgment. On smaller units, 4 columns of links can also be reordered so the newsletter signup turns out first on phones, with legal links at the bottom.
Hanging Together A Product Internet web page
Click on on Add New Template in Theme Builder, then make a choice All Products, then click on on Create Template. As quickly because the template card turns out, click on on Add Custom designed Body to open the Visual Builder with a blank canvas.
We’re together with two sections. The principle uses a two-column construction with a 2/5 and 3/5 get a divorce. That’s the position all the core product content material subject matter goes: footage on one side, achieve details on the other.
The second phase uses an ordinary single-row construction. That’s where upsells and related products will sit, break free the main product information.
Set the main phase’s Section Type to article underneath Advanced > HTML. A product is its private standalone piece of content material subject matter, so the object phase is the right kind title.
The second phase gets the phase Section Type, marking it as a certain on the other hand related area of the internet web page.
For the columns inside the first phase, the left column works successfully as a decide phase because it accommodates the product imagery.
The best column, which carries the core achieve details, can also be set to number one.
Construction The Product Construction
The left column holds the product imagery. Add the Product Images module appropriate right here. Beneath the Content material subject matter tab, amplify the Portions dropdown to keep watch over what presentations: the featured image, gallery footage, and sale badge. Each has its private toggle.
The Design tab’s Image dropdown covers full-width, borders, box shadows, spacing, and filters. The Sale Badge gets its private styling possible choices too, along with background color, text, and borders.
The best column is the purchase area. Control the column spacing and then stack your modules inside the order you prefer. We’re going with: Product Title, Product Score, Product Price, Product Description, and Add To Cart. Style each and every module accordingly.
The Add To Cart module’s Portions toggles mean you can show or duvet the amount field and stock depend.
You might also consider together with an Icon Record module for believe signals: secure charge, loose returns, warranty information, and anything else your store supplies. Style and align it as successfully.
The icons listed below are decorative given that text labels carry all the this means that. Choose the Record Icon products > Advanced > Attributes, objective the Icon phase, set Function Name to aria-hidden, and Function Value to true. Repeat for all tick list items. Visual display unit readers will skip the icons and skim the text directly.
Showing Similar Products
Add the Similar Products module to the second phase. The module pulls products that WooCommerce has already determined are related to the current product, in line with shared categories and tags, and no longer the usage of a query setup sought after on your end.
The Content material subject matter tab implies that you’ll be able to keep watch over what choice of products appear, their order, and what elements must appear. The Design tab covers all the range of styling: image size, title typography, price text, button sorts, and spacing. Style the whole thing to test the rest of your template.
The Similar Products module works for plenty of web websites. For additonal keep watch over over which products appear and the best way each and every card seems, Loop Builder implies that you’ll be able to query the product publish type and assemble the construction using any Divi module, merely as we did for the related posts phase inside the blog template.
Use The Theme Builder In Divi 5 At the moment!
Divi 5‘s Theme Builder puts your entire global parts in one place. Assemble headers, footers, and content material subject matter templates once, set where they appear, they generally art work right through your whole internet website.
The combo of Loop Builder, Canvases, and Design Variables implies that you’ll be able to prepare templates that pull dynamic content material subject matter, deal with sophisticated interactions, and deal with consistent styling right through each internet web page.
The templates you assemble appropriate right here become the basis for your whole internet website. You assemble the development that the whole thing else sits on, and getting it proper appropriate right here way a lot much less art work everywhere else.
The publish The usage of The Divi Theme Builder in Divi 5 gave the impression first on Chic Issues Weblog.
0 Comments