Each website online rebuild begins with the similar query: how a lot time will this take? The Divi 5 Design Machine was once designed to get you off and working as briefly as conceivable. As an alternative of rebuilding from scratch, you rebrand what already exists. Exchange colours, fonts, sizes, and presets, and watch a whole website online become.
We’ve selected to present 3 detailed examples of the way simple it’s to totally trade the design machine to suit your wishes. Each and every Phase transformation required fewer than 25 movements. No customized CSS overrides. No element-by-element changes. Simply planned adjustments to Design Variables and Presets that cascade thru a whole web page.
That is the second-to-last day of our Cyber Monday sale. For those who’ve been comparing whether or not Divi delivers the potency it guarantees, those examples supply direct proof. The Design Machine isn’t a characteristic you’ll use infrequently. It’s an entire paradigm for the way forward for designing with Divi. Whether or not you select to customise it or be informed from how our designers arrange Divi, the Design Machine for Divi 5 is a useful useful resource you’ll stay coming again to.
Actual-Global Rebranding Examples
The next transformations use precise sections from the Divi 5 Design Machine library. Each and every instance begins with a pre-built format and applies a centered collection of adjustments to reach a fully other logo id. The technique stays constant: trade world variables first, practice presets strategically, and make module-level changes final.
Company to Journey Hero Phase
This modification takes Hero Phase #28 from the Sections library and converts it into an journey tourism touchdown segment.
The transformation calls for ~17 movements. Overall implementation time for a mean Divi consumer: roughly 8 mins.
After
World Adjustments by way of WordPress Customizer
Open the WordPress Customizer.
Navigate to Normal Settings > Format Settings. Exchange the Number one Colour variable to #11435B.
The principle colour will also be simply modified in Divi 5’s Colour Design Variable Supervisor.
Throughout the WordPress Customizer, navigate to Normal Settings >Typography. Exchange the Header Font Circle of relatives to Roboto Condensed. Whilst there, additionally set the Header Font Taste to All Caps.
The Heading Font will also be modified simply in Divi 5’s Font Design Variable Supervisor. All caps will also be finished with Default and different Presets, however this can be a unmarried step within the customizer.
Put up all Customizer adjustments.
Structural and Design Adjustments
First, change the order of the 2 primary columns within the mother or father row. That is very best finished within the Layers panel via dragging the primary column down.
Upload a Textual content Module below this Heading Module. Reproduction the textual content (or upload the up to date content material) from the heading module, position it into the brand new Textual content Module, and delete the previous Heading Module.
Click on the Major Heading (and after it, the button). Within the Content material tab, replace the heading textual content after which the button textual content.
Click on on every symbol module in column two. Within the Content material tab, click on the Tools Icon and choose the brand new symbol from the media library. You’ll be able to discover a an identical symbol on Unsplash.
Click on at the row containing the primary heading and frame textual content. Within the settings panel, find the Column Construction possibility below the Design tab. Make a choice the 2/5 – 3/5 configuration.
Click on at the left column. Within the Sizing Possibility Team below the Design tab, input 500px within the Max Width box.
With the left column decided on, open Background. Choose Number one Colour from the Design Variable choices for Background Colour.
Exchange the Heading and Frame Textual content colour of the entire components within the left column to white.
Exchange the Button’s Part Preset to Crammed – Black. Deselect the former preset to steer clear of styling conflicts and overstyling.
With the left column decided on, click on the Design tab and scroll to Spacing. Click on the preset chip and choose Padding – Massive. Deselect Padding – Fluid.
Find the Internal Row of the left column. Open its settings and below Components, trade the Column Construction to 2/5 – 3/5.
If the segment is simply too tall in your liking, you’ll check out cropping or adjusting the picture dimension in the appropriate column.
Minimalist to Heat About Us Phase
This modification turns About Phase #5 from the Sections library right into a heat, inventive private logo commentary.
Prior to
The transformation calls for ~23 movements throughout WordPress Customizer, Design Variable Supervisor, and preset changes. Implementation time: roughly 12-Quarter-hour.
After
World Customizer Adjustments
Open Divi > Customizer and navigate to Normal Settings > Typography. Exchange the Heading Textual content Font to Prata. Exchange the Frame Textual content Font to IBM Plex Mono.
That is simply finished by way of the Design Variable Supervisor
Move to Normal Settings > Format Settings and alter the Number one Colour to #F4AA2C. Additionally, set the Website online Content material Width to 1280px.
The Number one colour is well edited by way of the Design Variable Supervisor, whilst the Website online Content material Width can simply be edited in Divi 5 via converting the default Preset for Rows and adjusting its width surroundings.
Put up all Customizer adjustments.
Design Variable Supervisor Adjustments
As soon as the About Us format is added to the web page, open the Design Variable Supervisor from the Chronic Left Sidebar. Make those adjustments:
Find Heading Textual content Colour – Mild and Frame Textual content Colour – Mild within the Colour Variables segment. Exchange their colour worth to #D6CEBB.
Then, Upload World Colour within the Colour Variables segment. Identify it Background – Medium and set the price to #6B645A. Click on Save.
Navigate to Quantity Variables and alter H1 Desktop Giant to min(10vw, 200px).
Then, trade Rounded Corners – Buttons and Rounded Corners – Common to 3px.
You should definitely Save Variables.
Structural and Design Adjustments
The Heading Module that claims “We construct good…” must be swapped with a Textual content Module. Upload a Textual content Module below it and delete the Heading Module. When you are at that, additionally trade the textual content with the brand new private logo messaging throughout all Heading and Textual content Modules.
For the Symbol Module, change the picture with a unique one that fits the colour scheme. A sq. symbol works neatly right here (or a panorama).
Subsequent, we want to upload the lacking Button Module within the empty proper column of Internal Row two. Give it the Part Preset Crammed – Number one. Replace the button textual content to Obtain Resume and permit Proper alignment for the button.
Click on on the second one Internal Row itself and cross into Design > Format > Align Pieces and set it to Finish.
Click on at the primary heading module and set the Part Preset to Heading 1 Giant and take away the Heading 2 Preset. Then, cross to Design > Heading Textual content and set the textual content alignment to ‘Left’. Finally, within the Textual content Colour box, choose Heading Textual content – Mild from the colour variable listing.
Now for some colour changes. Click on at the About segment and set its Background colour to the variable Background – Medium.
For each Textual content Modules, click on on their settings and navigate to Design > Textual content > OG Preset dropdown, then choose Mild Textual content.
Click on at the Internal Row containing the primary Textual content Module. Within the Construction Template picker, choose the 2/3 – 1/3 construction.
And that’s a wrap for this change. You noticed how the Design Variables have been already incorporated in most of the Presets, making adjustments really easy.
Tech to Healthcare Hero Phase
This modification takes Hero Phase #5 from the Sections library from a daring company tech format to a blank healthcare segment.
Prior to
The transformation calls for ~23 steps throughout WordPress Customizer, Design Variable Supervisor, and in depth format restructuring. Implementation time: roughly 15-18 mins.
After
World Customizer Adjustments
Open the Divi Theme Customizer and navigate to Normal Settings > Typography. Exchange the Heading Textual content Font to Syne.
This could also be simply finished within the Visible Builder within the Design Variable Supervisor below Fonts
Move to the Normal Settings > Format Settings and alter the Number one Colour to #00986A.
This could also be simply finished within the Visible Builder within the Design Variable Supervisor below Colours
Then, put up the Customizer adjustments.
Structural and Design Adjustments
After including the format to a brand new web page, open the Design Variable Supervisor. Navigate to Quantity Variables and find Rounded Corners – Common and alter it to 30px. Whilst there, trade Rounded Corners – Photographs to 15px.
Click on at the left column. In Design > Spacing, trade the preset from “Padding – Medium” to “Padding – Fluid“.
You might want to make this modification inside the ‘Contained – Mild’ Part Preset (take into account that you’ll now nest authentic presets in detail presets).
In Design > Format, set “Justify Content material” to Heart and “Align Pieces” to Heart.
Click on the Upload New Module icon within the left column, choose the Team Module, and drag all current components into this new Team. Within the Team’s Format choices, set Align Pieces to Heart. Whilst within the Team settings, cross to Sizing and set max width to 510px
Set the Textual content Alignment to Heart for all Textual content and heading modules inside the Team.
Within the Proper column, we can reset the Heading Textual content Possibility Team at the Heading Module and reset the Background at the Internal Row. We will be able to additionally take away the Mild Textual content Preset from the Textual content Module. This may occasionally get our background and textual content colours the place we’d like them.
Click on at the primary Row and Reset all Background kinds, and upload a brand new scientific Background Symbol.
Then, in the similar Row, take away the Contained – Mild Part Preset. In Design > Sizing, trade Width to 100% and Max Width to none. Additionally, set the Minimal Top to 80vh and permit Develop to Fill. In Design > Spacing, upload the Fluid – Spacing Preset.
Click on at the small symbol module. Within the Content material tab, click on Exchange Symbol and choose the brand new healthcare thumbnail.
Click on on every textual content module. Replace the content material to mirror healthcare messaging.
And now we’re finished with this CTA Hero transformation!
Working out Design Machine Potency
The transformations above percentage a regular order. World variables do so much for us proper at the start. They steadily made adjustments inside of Presets, leading to a lot of cascading updates in brief order. In some circumstances, we modified out Presets or just got rid of one, however that was once nonetheless extremely speedy. Finally, we steadily implemented adjustments to explicit bins and components within the Design > Format/Sizing/Spacing tabs.
Modifying with Design Variables first, then Presets, and in spite of everything making Part-level adjustments guarantees we’re being the best (with regards to each our time and the CSS implemented to our designs). Ranging from a Design Machine like this makes it simply adaptable and provides you with so much to paintings with proper off the bat.
For those who needed to arrange a majority of these Design Variables and Presets and likewise construct a majority of these Phase Layouts, you’d have sunk dozens of hours up entrance. On the other hand, with the program, you have the benefit of the whole thing operating in combination from the beginning.
Get The Unique Design Machine Prior to It’s Long past!
The Divi 5 Design Machine gets rid of having to choose from pace and high quality. Those transformations end up that complete rebranding doesn’t require complete rebuilding. When your design choices waft thru a unmarried supply of reality, world variables controlling presets controlling modules, you convert the whole thing via converting little or no.
The following day, this Cyber Monday be offering expires. The query isn’t whether or not the Design Machine delivers potency — those examples supply that proof. The query is whether or not you’ll have get right of entry to to the program when your subsequent undertaking closing date arrives. Each transformation you simply noticed, each and every potency achieve demonstrated right here, each and every hour stored turns into to be had the instant you buy any of those qualifying merchandise:
- Divi Professional (80% Off) — The whole Divi ecosystem, together with Divi 5, Divi AI, Divi Cloud, Divi VIP, Divi Groups, Divi Sprint, all DonDivi plugins, and a $50 Divi Market credit score. To be had in lifetime and annually choices.
- Club Repackaging (As much as 80% Off) — Present participants can improve to Divi Professional to scale back subscription prices whilst making the most of merchandise like Divi AI, Cloud, Groups, VIP Make stronger, DonDivi plugins, and a $50 market credit score.
- Divi AI (70% Off) — AI-powered design, writing, and coding immediately in Divi. Generates layouts, content material, and photographs in an instant.
- Divi Cloud (44% Off) — Cloud-sync your whole Divi Library throughout all websites (together with this Design Machine!). Save and reuse layouts anyplace for quicker shopper supply.
- Divi Groups (44% Off) — Group collaboration with shared get right of entry to, roles, and permissions. Constructed for companies managing a couple of purchasers.
- Divi VIP (44% Off) — Precedence fortify with 30-minute reaction occasions, 24/7 availability, and 10% off all Market merchandise.
- Market Bundles (70% Off) — Curated collections of Divi modules, kid issues, advertising gear, ecommerce options, and weblog upgrades. 5 Cyber Monday-only bundles, all Divi 5-ready.
After finishing a qualifying acquire, obtain the Design Machine throughout the Perks segment to your Chic Topics Individuals’ Space.
The Design Machine library comprises loads of pre-built sections, all designed to paintings with this similar variable-driven way. Your subsequent website online rebrand takes hours, now not days. However provided that you act ahead of middle of the night the following day. Get Divi Professional now whilst this be offering nonetheless stands.
The publish 3 Actual-Global Examples: Rebranding The Divi 5 Design Machine With World Variables gave the impression first on Chic Topics Weblog.
WordPress Web Design