Welcome to the Divi 5 Mastery Path — a hands-on collection that takes you from a clean WordPress set up to a completely designed, introduced web site. Over 15 portions, you’ll construct a whole web site for a coworking trade from scratch the use of Divi 5, finding out each and every primary characteristic alongside the best way.
Right here’s what the collection covers (we will be able to upload hyperlinks as every phase is revealed):
- What To Get ready Sooner than Development Your Divi 5 Web site (you’re right here)
- Exploring Each Side Of The Divi 5 Interface
- Developing A Divi 5 International Design Gadget With Design Variables
- Mastering Divi 5 Presets For Sooner, Extra Constant Internet Design
- Development A Divi 5 Homepage From Scratch
- Development A Customized Header And Navigation In Divi 5
- Development A Customized Footer In Divi 5
- The usage of Divi 5 Theme Builder To Create International Web site Templates
- Development The Core Inside Pages Of Your Divi 5 Web site
- Mastering Flexbox In Divi 5
- Mastering CSS Grid In Divi 5
- Making Your Divi 5 Web site Totally Responsive
- Developing Interactive Off-Canvas Parts (Popups & Extra)
- Mastering The Divi 5 Loop Builder
- Divi 5 Energy Person Workflow
- Auditing, Sharpening, And Launching Your Divi 5 Web site
No imported templates. No pre-built layouts. You’ll do the designing your self. Through the top, you’ll perceive no longer simply tips on how to use Divi, however how an actual construct comes in combination from begin to end. Each and every phase builds at the closing, so following alongside so as will provide you with the entire image. That mentioned, if your method round and wish to leap to a particular subject, every phase comprises sufficient context so that you can self-guide.
In a position? Let’s get began.
Contents
Sooner than You Open The Builder
Each new web site begins earlier than opening the builder. The sitemap, the colour palette, and the reproduction at the homepage — it all shapes how temporarily and optimistically you’ll transfer whenever you’re throughout the editor. This primary phase covers the whole lot that occurs earlier than you contact the builder: working out how Divi and WordPress have compatibility in combination, putting in them, discovering your method across the dashboard, and, importantly, amassing the uncooked fabrics your web site in truth wishes.
If you have already got Divi 5 put in and know your method round WordPress, skip forward to the preparation tick list close to the top of this publish. However in case you’re beginning recent, learn on.
What Is WordPress, and The place Does Divi Are compatible?
WordPress is a content material control machine (CMS). It handles your pages, posts, media, and web site settings. By itself, WordPress will provide you with a useful web site, however designing that web site calls for both code or a device that interprets visible choices into code for you.
That’s the place topics and web page developers are available.
A WordPress theme controls your web site’s default look: fonts, colours, header and footer structure, and web page construction. WordPress calls for an energetic theme to paintings, because it’s a basic a part of the way it’s constructed. Vintage topics come up with some design keep an eye on thru a settings panel, however you’re in large part operating inside the theme writer’s predefined construction. More moderen block topics be offering extra flexibility thru WordPress’s integrated Web page Editor, however both method, the theme units the baseline that the whole lot else builds on.
A web page builder is going additional. It will provide you with a visible, drag-and-drop interface for putting content material blocks — equivalent to textual content, pictures, buttons, and columns — and styling them at once at the web page. As a substitute of writing CSS or enhancing PHP templates, you’re making design choices visually and spot effects as you’re employed.
Divi occurs to be each. It’s a WordPress theme and a visible web page builder in a single package deal. While you set up Divi, you get a theme that handles your web site’s international construction and a builder that permits you to design each and every web page visually. You additionally get get admission to to the Theme Builder, which controls templates in your headers, footers, weblog publish layouts, archive pages, 404 pages, and extra. All this will provide you with complete design keep an eye on over each and every a part of your web site with out code (except you’re at ease the use of it — Divi doesn’t dangle you again both method).
The whole thing — structure, styling, international templates, and responsive design — lives in a single machine whilst you use Divi.
Getting WordPress and Divi Put in
Sooner than you’ll be able to construct anything else, you wish to have two issues: a WordPress set up working on a internet host and the Divi theme put in on that WordPress web site.
Internet Web hosting and WordPress
WordPress calls for internet internet hosting — a server the place your web site’s recordsdata and database are living. Maximum internet hosting suppliers be offering one-click WordPress set up, which handles the technical setup (database advent, report permissions, and preliminary configuration) routinely. In the event you don’t have internet hosting but, Chic Subject matters provides Divi Web hosting, which comes with WordPress and Divi pre-installed and activated. That’s the quickest trail from 0 to development.
If you have already got internet hosting and want to set up WordPress manually, Chic Subject matters has a radical instruction manual: The way to Set up WordPress.
Putting in and Activating Divi 5
As soon as WordPress is working, you put in Divi the similar method you’d set up any WordPress theme:
- Log in in your Chic Subject matters Participants House and obtain the Divi 5 zip report.
- To your WordPress dashboard, move to Look > Subject matters > Upload New > Add Theme.
- Add the zip report, click on Set up Now, after which click on Turn on.
- Apply the onboarding urged to attach your Chic Subject matters license. This permits your web site to obtain theme updates as they’re launched.
That’s the quick model. For the entire walkthrough with screenshots, see How To Set up The Divi Theme.
With Divi energetic, a brand new Divi menu merchandise seems to your WordPress sidebar. That’s your command middle for the whole lot Divi manages outdoor the visible builder.
Discovering Your Approach Round WordPress with Divi 5
Divi provides a number of options to the usual WordPress dashboard. You don’t want to memorize each and every possibility at this time — later portions of this path will use explicit settings in context. For now, right here’s a map of what’s the place and what issues maximum at this level.
The Divi Menu
Click on Divi within the WordPress sidebar, and also you’ll see a number of sub-items:
Divi Dashboard is the principle hub. It displays your license standing, present Divi model, and hyperlinks to create pages, set up templates, or generate a web site with Divi Fast Websites. For this path, we’re development from scratch, so we received’t be the use of Fast Websites, but it surely’s price understanding it exists for long run tasks the place velocity issues greater than customized keep an eye on.
Theme Choices is a settings panel that controls site-wide defaults — your brand, social media URLs, efficiency settings, search engine marketing fundamentals, and integration code (like analytics scripts). The tabs you’ll engage with maximum early on are:
- Normal: Add your web site brand and set social media profile URLs. Those feed into the default header and footer.
- Normal > Efficiency: Permit Dynamic CSS, Dynamic Module Framework, and Vital CSS to optimize front-end loading. Those are excellent to permit from the beginning.
- Integration: That is the place you paste monitoring scripts (Google Analytics, Meta Pixel, and so forth.) that want to load site-wide. The Upload code to the box is essentially the most usually used.
- Updates: That is the place your Chic Subject matters username and API key are saved so WordPress can routinely pull Divi updates.
The rest tabs — Navigation, Builder, Format, Advertisements, and search engine marketing — exist however are both treated higher via devoted plugins (search engine marketing, for instance) or addressed later once we construct explicit templates. Don’t really feel like you wish to have to configure each and every tab earlier than transferring ahead.
Theme Builder is the place you create and assign international templates — your web site’s header, footer, weblog publish structure, 404 web page, archive pages, and every other template-driven space. We received’t construct those till Portions 6, 7, and eight of this path, however know that it’s right here within the dashboard and central to how Divi controls your whole web site construction. For now, the default Divi theme templates will care for your header and footer till we substitute them with customized ones.
Modifying Pages with Divi
To construct a web page, move to Pages > Upload New in WordPress (or Pages > All Pages to edit an current one). After you give the web page a name and reserve it, you’ll see the Edit With Divi possibility. This launches the Visible Builder — the front-end enhancing interface the place all design paintings occurs.
You’ll additionally release the Visible Builder from the entrance finish of your web site. Whilst logged in, navigate to any web page and click on the Edit With Divi button within the WordPress admin bar on the best of the display.
The Visible Builder is the place you’ll spend maximum of your time on this path. Section 2 covers all of the interface intimately — each and every primary panel, toolbar, and interplay mode. For this phase, simply know that the builder opens at the entrance finish of your web page and will provide you with direct visible keep an eye on over structure and design.
What To Accumulate Sooner than You Get started Development
Sooner than development, it’s highest to have a normal path. In the event you’re finding out a brand new web site builder whilst additionally working out what you need to construct, the method shall be very gradual and probably irritating. As a substitute of doing each directly, we propose getting readability on what you need to construct earlier than you get started finding out tips on how to construct it. This will contain a number of issues:
Logo Path
You don’t want a 40-page emblem instruction manual. However you do want one thing that helps to keep you not off course and centered as you be told a brand new talent. At a minimal, you will have to believe this stuff:
Colours: At minimal, select a number one emblem colour, a secondary (or accessory) colour, and a impartial palette (a near-black for textual content, a near-white for backgrounds, and one or two grays for borders and secondary textual content). In case you have explicit hex codes, that’s even higher. In the event you’re ranging from scratch, equipment like Coolors or Adobe Colour permit you to construct a palette temporarily.
Fonts: Pick out a heading font and a frame font. Two fonts overall are sufficient for many websites. Google Fonts is the perfect supply since Divi quite a bit them natively. A competent place to begin is to pair a blank sans-serif heading font with a readable sans-serif or serif frame font.
Those choices get formalized into Design Variables in Section 3. However you wish to have to make those choices earlier than you’ll be able to systematize them.
A Emblem
Your brand can seem within the header, the browser tab (as a favicon), within the footer, and probably elsewhere. In case you have one, be sure it really works on each gentle and darkish backgrounds. SVG or high-resolution PNG recordsdata with a clear background are the most productive codecs for internet use. You may also wish to use other brand diversifications that glance higher in several contexts.
In the event you don’t have a symbol but, create a easy text-based placeholder in Canva, Photoshop, or GIMP. A styled web site identify to your selected heading font works nice till an actual brand is able. Or, if you wish to transfer temporarily, you’ll be able to use Divi’s default brand whilst getting began and substitute it earlier than release.
Photographs and Media
Inventory pictures are nice to start out. Fine quality inventory picture websites like Unsplash and Pexels be offering unfastened choices that paintings neatly for placeholder content material. For a coworking area web site — which is what we’re development on this path — search for pictures of:
- Open workspace and table spaces
- Other people taking part or operating independently
- Assembly rooms and personal places of work
- Development exteriors or lobbies
- Facilities (espresso bars, lounges, match areas)
Accumulate extra pictures than you suppose you’ll want. Having choices prevents the construct from pausing whilst you seek for “another hero symbol.” If imaginable, optimize pictures earlier than importing them. Gear like TinyPNG or Smush cut back report measurement with out visual high quality loss. Massive, uncompressed pictures are one of the commonplace reasons of gradual WordPress websites, so it’s highest to deal with this earlier than importing them.
A Sitemap
A sitemap is a listing of each and every web page your web site wishes and the way the ones pages relate to one another. For the coworking web site we’re development on this path, the sitemap looks as if this:
- Homepage: The principle touchdown web page with an outline of the distance, key advantages, and calls to motion.
- About: The tale at the back of the distance — who runs it, why it exists, and what makes it other.
- Areas (or Club Plans): What’s to be had — sizzling desks, devoted desks, non-public places of work, and assembly rooms — together with pricing and lines.
- Weblog: A dynamic archive web page that draws from weblog posts. Helpful for search engine marketing and neighborhood updates.
- Touch: Location, hours, a touch shape, and an embedded map.
Your web site would possibly come with further pages like Occasions, FAQ, Careers, or Phrases, however get started with the core pages and amplify later. A centered sitemap helps to keep the construct not off course and is helping you recognize what content material you wish to have to create.
Written Content material
Sooner than Section 5 (the place we construct the homepage), you’ll have a minimum of tough drafts of your content material:
- Homepage headline and subheading: What does this coworking area be offering, and why will have to any person care? One sentence every.
- Price propositions: 3 to 4 quick statements explaining what makes the distance price becoming a member of.
- About segment reproduction: Two to 3 paragraphs in regards to the area’s undertaking, historical past, or crew.
- Provider or plan descriptions: For every club tier — a reputation, a brief description, and a value (even though approximate).
- Calls to motion: “Guide a Excursion,” “Get Began,” “See Plans,” “Touch Us” — make a decision on constant wording early.
- Touch data: Cope with, telephone quantity, electronic mail, and hours of operation.
The content material doesn’t want to be ultimate, but it surely must exist in a usable shape. If important, use placeholder textual content whilst refining it later.
Design Inspiration
Browse 5 to 10 web pages to your trade (or similar industries) and save examples of layouts or sections you prefer. Take note of:
- Homepage construction
- Navigation structure
- Spacing and whitespace
- Typography possible choices
- Colour utilization
You’re no longer copying — you’re development a reference level. Having visible path makes design choices more straightforward.
Organizing Your Preparation Fabrics
Stay the whole lot in a single position. A easy folder construction works neatly:
- /emblem: Emblems, colours, fonts
- /pictures: Pictures and media
- /content material: Web page reproduction
- /reference: Inspiration and examples
This prevents consistent context switching whilst development.
What’s Coming Subsequent
With WordPress working, Divi 5 put in, and your preparation fabrics collected, you’re able for the construct.
Section 2 takes you throughout the Divi 5 Visible Builder and walks thru each and every panel, toolbar, and interplay mode so precisely the place the whole lot lives earlier than you get started designing.
The whole path builds a whole coworking web site from scratch — no imported templates, no pre-built layouts, and no shortcuts. You’ll see precisely how a qualified construct comes in combination from an empty canvas thru to release.
The publish Section 1: What To Get ready Sooner than Development Your Divi 5 Web site seemed first on Chic Subject matters Weblog.
WordPress Web Design