How to Build a Website with Divi (2024 Tutorial)

by | Jun 12, 2024 | Etcetera | 0 comments

You’ve bought Divi and are able to construct your web page. The one drawback is that you want to determine the place to begin. Fortunately, Divi is among the maximum intuitive WordPress subject matters to be had. It gives a user-friendly drag-and-drop Visible Builder that permits you to position design modules at once onto a internet web page at the entrance finish to peer your design emerge in real-time.

Alternatively, Divi is greater than only a WordPress theme. It supplies an entire website-building enjoy with out writing a unmarried line of code. On this publish, we’ll display you how one can construct a Divi web page and supply a step by step information so you’ll simply observe alongside.

Let’s get began.

Table of Contents

Getting Began with WordPress & Divi

Ahead of we soar into the thrill a part of constructing your web page with Divi, let’s make certain that you have got the necessities. On this first phase of our how one can construct a Divi web page publish, we’ll be aware of buying a site identify, signing up for a WordPress website hosting plan, and putting in and configuring the Divi theme.

how to build a divi website

Buying a Area Identify

Imagine your area identify as your web page’s cope with on the net. When choosing one, be certain it’s memorable. Your area is incessantly the very first thing other folks see after they come throughout your web page. A well-chosen area identify can create a favorable first affect and make your web page more uncomplicated to keep in mind. Use a good domain registrar that has a excellent seek function so you’ll to find the one who works right for you.

A powerful area identify acts as a constructing block on your model id. It’s one of the vital essential steps when constructing a Divi web page. It will have to be related in your web page’s niche and target audience. As an example, elegantthemes.com in an instant tells guests they are able to look forward to finding stunning subject matters on our web page. The extra carefully your area identify displays your model, the better it’s going to be for other folks to acknowledge and be mindful you.

Any other issue to imagine is search engine ranking pages (SERPs). Together with related key phrases to your area can come up with a slight search engine optimization (SEO) spice up, making it more uncomplicated for other folks to seek out your web page whilst looking out. Some domain name extensions are better than others for SEO, so it’s a good suggestion to stick with extensions like .com, .internet, or .org, to call a couple of.

Make a selection a Respected Area Registrar

how to build a divi website

One of the crucial easiest area registrars is Namecheap. It gives an impressive area seek, so you’ll simply to find the easiest area for what you are promoting. It additionally gives very reasonably priced pricing. As an example, you’ll get a .com area for the first yr for $5.98. It supplies a easy interface for registering your area, FreeDNS website hosting services and products, and PremiumDNS to verify your web page is at all times on-line. It accomplishes this through distributing DNS knowledge throughout a couple of edge servers, making it just about unattainable so that you can be a sufferer of a distributed denial of service (DDoS) assault.

Get Namecheap

Signing up for a WordPress Internet hosting Plan

Any other factor you’ll want to make a Divi web page is a good hosting provider. Recall to mind internet website hosting as your web page’s house. It shops your web page’s information and makes them out there to guests. There are lots of internet website hosting suppliers to be had, together with Cloudways, Flywheel, Pressable, and SiteGround.

how to make a Divi website

All the website hosting suppliers discussed above be offering hosting that’s designed for WordPress and Divi. Whilst you go for optimized WordPress hosting, you’re taking steps to make certain that your web page is speedy, protected, and well-equipped to run WordPress. Those hosts also are designed to run Divi flawlessly. Of the 4, SiteGround gives probably the most bang on your dollar.

It gives a ton of freebies, together with loose email, website migration, an SSL certificate, one-click WordPress installs, a content delivery network (CDN), and extra. Plus, their WordPress website hosting plans are extremely reasonably priced, with costs beginning at $2.99 monthly. SiteGround takes web page safety critically, too, with an AI-powered anti-bot gadget that flags and blocks tens of millions of safety threats day by day. There’s additionally an impressive web application firewall (WAF) that guarantees your website is secure towards hackers, brute drive assaults, and malware.

Get Divi SiteGround Hosting

Putting in WordPress

There are several ways to install WordPress, together with manually. Fortunately, the method is extremely simple with a website hosting supplier like SiteGround. After signing up for a SiteGround website hosting plan, SiteGround walks you during the easy steps of putting in WordPress. Get started through logging in in your SiteGround account. Upon login, you’ll be redirected to the Website online Gear dashboard. Click on the Set Up Website online button to start out.

how to build a divi website

Choose between a brand new, current, or transient area at the subsequent display. We’ll suppose you bought a site from Namecheap within the earlier step, so make a selection current area. Input your area identify within the box and click on proceed.

how to build a divi website

Subsequent, make a selection Get started New Web page, select WordPress for the applying, upload an electronic mail cope with and password (that is what you’ll use to log in to WordPress), and click on Proceed.

how to build a divi website

Over the following few mins, SiteGround will arrange your server area, set up WordPress, and configure it for velocity and function. SiteGround makes use of a proprietary speed optimization plugin, Speed Optimizer, which controls caching, symbol optimization, and extra.

Putting in the Divi WordPress Theme

With WordPress put in, it’s time to put in Divi. For this publish, we’ll suppose you’ve taken the stairs to buy an Sublime Subject matters subscription. So, for this phase, we’ll be aware of putting in Divi and producing and putting in an API Key.

Get started through navigating in your WordPress dashboard. There are two tactics to get admission to your WordPress dashboard: via SiteGround’s Website online Gear dashboard or at once to your browser through typing in www.yoursitename.com/wp-admin (exchange yoursitename along with your area).

how to build a divi website

As soon as logged in, navigate to Look & Subject matters. Click on Upload New Theme.

how to build a divi website

Subsequent, click on the Add Theme tab.

upload WordPress theme

Click on the select document hyperlink to load the zipped Divi theme document into WordPress.

how to make a Divi website

As soon as the document is uploaded, click on the Set up Now button to put in Divi on WordPress.

how to build a divi website

In any case, click on the Turn on button to turn on the theme.

activate Divi

Generate and Set up a Divi API Key

The final step in putting in Divi is to generate and set up an API Key. The usage of an API Key guarantees that Divi’s core framework is up-to-date. Updates are a very powerful for making sure Divi runs easily, is protected, and grants get admission to to long term options. Any other good thing about an API Secret is that it grants you get admission to to any further merchandise you buy and provides you with get admission to to Divi’s greater than 2000 premade layouts.

To generate a key, log in in your Sublime Subject matters account, navigate to the Account tab, and click on Username & API Key.

Divi API key

Scroll down till you notice the Generate New API Key button.

generate new API Key

Identify the important thing and replica each the label and API Key for safekeeping. Subsequent, go back to the WordPress dashboard and navigate to Divi > Theme Choices > Updates.

install Divi API key

Input the username and API Key within the related fields and click on the Save Adjustments button.

How To Make A Portfolio Website With WordPress

Divi is Extra Than Only a WordPress Theme

divi theme

As discussed, Divi is an impressive WordPress theme that provides an intuitive drag-and-drop web page builder, the Visual Builder. It comes geared up with over 200 design modules, so you’ll construct any form of web page you wish to have. Divi additionally features a robust full-site modifying enjoy, because of the Theme Builder. The usage of it, you’ll create a header and footer, weblog publish templates, archive pages, and extra – all with the similar drag-and-drop interface. Divi is reasonably priced, with every year licenses beginning at $89.

See also  How one can Make AI Artwork in 2023 (Detailed Instructional)

Get Divi

Divi AI

As an added bonus, Divi has an improbable suite of goods to improve your enjoy. There’s Divi AI, an AI-powered design assistant that’s able to writing on-brand textual content, producing life-like photographs, writing code and creating modules, and growing complete internet pages – all with a easy textual content suggested. You’ll be able to generate limitless pictures, textual content, code, and pages for as low as $16.08 monthly.

Get Divi AI

Divi Cloud

Different merchandise, like Divi Cloud, let you retailer all your Divi modules, sections, and entire layouts within the Cloud. This gets rid of the want to export JSON or XML information to reuse your favourite layouts. With Divi Cloud, you’ll save layouts from each web page you personal, simply uploading and exporting your favourite layouts. Divi Cloud is to be had for $6 monthly.

Get Divi Cloud

Divi Teams

In search of a option to foster collaboration between crew participants and make lifestyles more uncomplicated? That’s the place Divi Teams can lend a hand. For as low as $1.50 monthly consistent with seat, you’ll grant get admission to to Divi and each product you buy by means of your Sublime Subject matters member’s space. Proportion get admission to to consumer billing and Divi merchandise, assign person roles, and simply get admission to toughen tickets.

Get Divi Teams

Configuring Divi Theme Settings

Divi Theme options

With Divi put in, there are a couple of key spaces you’ll want to learn about. The primary is the Divi Theme Options. Right here, you’ll upload an emblem, configure international colours, upload social media hyperlinks, tweak performance settings, and extra. You’ll be able to additionally configure website navigation settings, permit the Divi Builder on customized publish sorts, configure search engine optimization settings, and upload scripts for added capability.

There’s additionally a Divi Theme Customizer, which allows you to regulate international settings for fonts, website width, website name and tagline, and extra. You’ll be able to additionally assign international fonts and colours, regulate colours and fonts for headers and footers, taste buttons, configure cellular types, and extra.

Tips on how to Construct a Divi Web page

With the entire setup paintings finished, we will be able to focal point on the second one a part of our how one can construct a Divi web page educational. This phase will stroll you via making plans your web page’s construction, from web page advent to creating a navigation menu. We’ll additionally discover growing pages with a premade structure and producing one with Divi AI. In any case, we’ll counsel some very important plugins to reinforce your website.

Making plans Your Divi Web page Construction

Ahead of designing pages on your WordPress web page, you need to create them. Most simple WordPress internet sites have a couple of pages, together with house, about, services and products, weblog, , and touch, in order that’s what we can get started with. Whilst you would possibly want further pages relying on the kind of website you’re constructing, those function a excellent place to begin.

WordPress pages web page advent is modest. Navigate to Pages & Upload New Web page.

add new WordPress page

Give your web page a name and click on the Submit button to create the web page.

publish WordPress page

Repeat the method above to create the rest pages. When completed, your website’s web page construction will have to appear to be this.

WordPress page structure

Making a Navigation Menu

Ahead of diving into the Visible Builder, laying the groundwork on your web page’s construction is a very powerful. This guarantees a transparent and logical glide of knowledge, making it simple for guests to navigate and to find what they would like. To create a menu in WordPress, navigate to Look & Menus. Give your menu a identify, similar to primary navigation, set the positioning to number one, and click on the create menu button.

create WordPress menu

Subsequent, make a selection the pages you’d like so as to add and click on the Upload to Menu button.

add WordPress pages

In any case, click on and drag the pages throughout the menu to prepare them in your liking, after which click on the Save Menu button.

save WordPress menu

Atmosphere a House Web page in WordPress

Subsequent, we’ll arrange the house web page for our Divi web page. Navigate to Settings & Studying to try this. Make a selection the static web page radio button possibility and select the house web page. Whilst your website is in building, checking the seek engine visibility checkbox is a good suggestion. This may increasingly stay your website hidden from search engines like google and yahoo till you’re able for the arena to peer it. In any case, click on the Save Adjustments button to fasten in your house web page.

set a home page in WordPress

Growing Internet Pages With Divi

With our web page’s construction in position, a house web page set, and a header and footer created, we will be able to get started constructing our internet pages with Divi. There are a couple of tactics to try this, together with the usage of a premade structure, the usage of Divi AI, or from scratch the usage of the Visible Builder. For this educational, we’ll provide the fundamentals for all 3 choices to be sure to understand how to create pages in some way that fits you easiest.

Loading a Premade Structure

Making a web page with a premade structure is among the very best tactics to begin with Divi. Greater than 2000 layouts are to be had, overlaying each primary class you’ll consider. There are layouts for eating places, more than a few trade sorts, services and products, occasions, era, and extra. Every Structure Pack for Divi has no less than 6 web page layouts, sufficient to create maximum internet sites.

To load a pre-made structure, navigate Pages > All Pages. Subsequent, click on the house web page to edit it.

how to make a Divi website

Click on the Edit with the Divi Builder button.

edit with Divi Builder

Subsequent, make a selection Make a selection a Premade Structure.

choose premade layout

You’ll be able to use the seek bar to seek for a selected structure or browse through class.

search premade layouts

Click on the trade class and make a selection the Profession Trainer Structure Pack for Divi.

select Divi layout

Make a selection the Touchdown Web page structure after which click on the Use This Structure button to load the structure into the house web page.

load Divi layout

As soon as the web page refreshes, you’ll trade the textual content and photographs, upload new design modules, and customise your web page.

edit pages with the Visual Builder

The usage of Divi AI to Create a Internet Web page

Along with the usage of a premade structure, Divi customers have some other superior option to design internet pages. Divi AI is Sublime Theme’s robust new AI-powered design assistant that permits you to generate complete internet pages with a textual content suggested. Merely describe the kind of web page you wish to have to create, give you the AI with supporting knowledge, select fonts and colours, and watch as Divi AI generates a complete internet web page, whole with a wireframe, textual content, and photographs.

To generate a web page with Divi AI, make a selection the About web page in Pages > All Pages. Permit the Divi Builder like within the earlier step. As a substitute of opting for premade layouts this time, we’ll construct the web page with AI.

build with Divi AI

When the Divi AI conversation field seems, describe the web page you wish to have Divi AI to create, supply further main points, similar to a project remark or transient description of what you are promoting, and customise your fonts and colours. You’ll be able to let AI select them, use the web page’s default fonts and colours, or make a selection them manually. To make issues attention-grabbing, we’ll make a selection Let AI Make a selection For Me around the board. As soon as all fields are stuffed, click on the Generate Structure button.

Divi AI dialog box

Over the following few mins, Divi AI will create the web page’s wireframe and upload textual content and photographs inside Divi design modules.

Divi AI design process

As soon as whole, you’ll have a completely purposeful internet web page you’ll edit with the Visible Builder.

how to make a Divi website

Making Design Edits With Divi

Divi empowers you to create visually shocking pages the usage of a limiteless library of design modules and customization choices. Those modules act like constructing blocks, permitting you to simply upload more than a few parts in your web page. Even after growing pages with a premade template or Divi AI, you’ll edit designs through including further textual content content material, photographs, and different parts.

On this phase of our how one can construct a Divi web page educational, we’ll show off other ways to edit your pages with the Visible Builder and Divi AI.

Working out the Visible Builder

Divi makes use of sections and rows to outline the construction of a internet web page. Sections are higher boxes with rows, which additional arrange your content material into columns. You’ll be able to customise the selection of columns and spacing inside every row.

Divi structure

As in the past discussed, Divi has over 200 design modules with more than a few functionalities. You’ll be able to create symbol galleries, tabs, accordions, countdown timers, and extra.

Divi design modules

As you drag and drop parts, you notice the adjustments mirrored survive the display. This gets rid of the will for complicated code and guarantees your web page seems precisely the way you envision it. It’s like having a real-time preview of your web page as you construct it.

Divi Visual Builder

To edit a bit, hover your mouse over the web page content material till a blue field seems. Click on the tools icon to edit a bit.

edit Divi section

In a similar way, you’ll edit rows and modules too. Rows are highlighted in inexperienced, and modules are gray.

Divi rows and modules

Each Divi phase, row, and module has its personal settings. There are 3 tabs, together with content material, design, and complex.

See also  Find out how to Growing Floor Chart with JavaScript (In 4 Simple Steps)

Divi module settings

Combining modules, rows, and sections means that you can create complicated layouts with whole keep watch over over the visible hierarchy and association of parts to your pages. As an example, it’s possible you’ll use a bit with a full-width background symbol, then upload a row with 3 columns to show your services and products side-by-side inside that phase.

3-column section

Divi’s robust modules and structure choices make the probabilities for growing stunning and attractive internet sites never-ending.

Producing Textual content with Divi AI

Whether or not you are making a Divi web page with premade layouts, Divi AI, or from scratch, you’ll simply generate on-brand reproduction on your pages. Divi AI can generate all sorts of content material, from weblog publish titles to product descriptions to weblog posts and the whole thing in between. Divi AI makes use of that wisdom and figuring out of your web page to create distinctive and related textual content content material.

Let’s refer again to the house web page we created with a premade structure to reveal how simple it’s to make use of Divi AI’s textual content generator. Divi’s Structure Packs include headlines, however placeholder reproduction is inserted in textual content modules. Let’s edit the textual content module within the hero phase and upload some new reproduction with Divi AI. Hover over the textual content module and click on the gray icon to get admission to its settings.

edit text module

Subsequent, click on the Divi AI icon to get admission to the AI conversation field.

activate Divi AI

Make a selection Write with AI when the popup seems.

write with Divi AI

For the content material kind, make a selection paragraph. Subsequent, supply Divi AI with a short lived abstract of the textual content you wish to have to generate. Specify the added context (this web page, this phase, and so forth), select a tone of voice, and any must-use key phrases you’d like to incorporate. In any case, make the content material about 50 phrases, go away the language on the default atmosphere, and click on the Generate Textual content button.

generate text with Divi AI

Divi AI will generate the content material in response to your settings. As soon as generated, you’ll position the textual content into the module through clicking the Use This Textual content button. However, you’ll retry your suggested, reinforce it additional, or refine the outcome through including an extra suggested.

use AI-generated text

After including the textual content to the module, click on the inexperienced take a look at button to save lots of the adjustments.

save text module

Producing Photographs with Divi AI

Along with textual content, Divi AI can generate photographs. Divi AI gives twelve symbol types: photograph, vector, anime, and extra. Producing photographs works a lot the similar approach producing textual content does, through getting into a suggested describing the kind of symbol you wish to have to create. Get started through both including or modifying an current symbol module. With the picture module’s settings lively, click on the Divi AI icon to convey up the AI interface.

Divi image AI

Click on Generate With AI when the popup seems.

how to make a Divi website

When the AI conversation field seems, select vector graphic for the taste, describe the picture you wish to have to create, set the facet ratio to a customized length (240px large through 400 pixels top), and click on the Generate button.

generate image with AI

Divi AI will generate 4 photographs for you to make a choice from. You’ll be able to make a selection your favourite and click on Use This Symbol or Generate 4 Extra. You’ll be able to additionally adjust your decided on symbol through producing extra adore it, opting for another taste, or including a brand new description.

Divi Image AI options

After placing the generated symbol into the picture module, click on the inexperienced take a look at button to reserve it.

save Divi module changes

Customizing Your Header & Footer within the Theme Builder

We’ve in short touched on Divi’s Theme Builder, an impressive part of the Divi theme that permits you to create headers, footers,  and more than a few different spaces of your website. The Theme Builder makes use of the Visible Builder, making it simple to design templates for exhibiting weblog posts, seek effects, archive pages, and extra, simply as you may create a typical internet web page.

Getting began with the Theme Builder is modest. Navigate to Divi > Theme Builder.

Divi Theme Builder

To create a header, you’ll first want to create a template. Headers and footers are assigned to the Default Web page Template through default. Click on Upload World Header to release the Theme Builder.

Subsequent, click on the Construct World Header button.

build global header with Divi Theme Builder

The Visible Builder will release, permitting you to create a customized header on your Divi web page. You’ll be able to use any mixture of modules to create an crowd pleasing header. Upload social media hyperlinks, a call-to-action button, and extra simply. As soon as your header is made, merely click on the red ellipsis menu on the backside middle of the web page.

save Theme Builder layout

To avoid wasting your header, click on the inexperienced save button to save lots of the structure.

how to build a divi website

The usage of A Divi Theme Builder Pack

Along with designing your header from scratch, you’ll use considered one of our Theme Builder Packs. Every Pack comes with 10 premade templates for each space of your website, together with headers, footers, publish templates, an writer template, and extra. It’s an effective way to get a soar get started at the design when constructing a Divi web page. As an example, looking out the Divi Resources category on our weblog, freebies for pages, templates, and different assets to stay you up-to-the-minute on all issues Divi. To reveal how simple it’s to load a Theme Builder Pack, we’ll use the Spa Theme Builder Pack for instance. Join our e-newsletter to achieve get admission to to the loose layouts. As soon as the Pack is downloaded in your pc, head to the Theme Builder. This time, we’ll click on the import/export button within the Theme Builder.

how to build a divi website

Navigate to the stored information to your pc, and make a selection the spa-templates-all.json document. This may increasingly set up all templates within the Pack.

how to build a divi website

To overwrite current templates, stay the primary two checkboxes checked. Test the tick field in the event you’d love to import the presets related to the Theme Builder Pack. As soon as your choices had been made, click on the Import Divi Theme Builder Templates button.

how to build a divi website

Create a Design Gadget The usage of Divi Presets and World Colours

One in all Divi’s easiest options is the facility to create an entire design gadget with international presets and colours. With international settings, customers can create a constant model id when constructing a Divi web page, streamline their workflow, and accelerate the design procedure. World Presets is very similar to CSS categories. Merely create a design preset, reserve it, and use it on equivalent modules all the way through your web page.

As an example, you’ll simply create an international preset for a button module in response to its current types. To do it, open the button module’s settings. With the module lively, click on the preset dropdown menu to expose the choices.

create global preset with Divi

Click on the Create New Preset From Present Kinds button.

how to build a divi website

A conversation field inquiring for a identify on your preset will seem. You’ll be able to additionally select whether or not to assign this preset to the default button module. After settling on, click on the inexperienced take a look at button to save lots of your button preset.

how to build a divi website

Create a World Colour Palette With Divi

You’ll be able to additionally create a World Colour Palette when constructing a Divi web page. You’ll be able to trade colours all the way through your web page with one click on whilst you set colours globally. As an example, after loading a premade structure right into a Divi internet web page, you’ll simply trade colours at the fly, changing colours throughout a complete web page on the module stage. As an example, after we adjust the darkish inexperienced international colour on this touchdown web page structure, the colour will replace robotically around the web page. Merely click on the edit image throughout the international colour.

how to build a divi website

You’ll be able to input a hex code manually or use the colour slider to modify it. While you modify the colour in your liking, click on the take a look at icon subsequent to the hex code to fasten it in. Click on the inexperienced take a look at button to save lots of your adjustments. As soon as stored, you’ll realize that the darkish inexperienced at the touchdown web page has been changed with a brand new colour.

how to make a Divi website

Along with changing current international colours, you’ll simply create new ones. To create a brand new international colour, click on the + button to the fitting of the prevailing international colours.

how to build a divi website

Repeat the stairs above to reserve it (click on the take a look at, save the module).

Improving Your Web page with Plugins

Divi is an impressive web page builder, however plugins can take your web page to the following stage. Plugins upload additional capability and will prolong Divi’s already superb features. It’s true that Divi gives a variety of options, however there could be particular functionalities you require that Divi would possibly not have already in-built.

Listed here are a couple of examples of plugins you must upload (or will have to) to stay your web page protected, working speedy, or spice up search engine optimization:

See also  Elementor AI Review: Features, Guide, Pricing, & More (2024)

Integrating 3rd-Birthday celebration Products and services

Divi integrations

Many plugins and equipment attach your Divi web page with widespread third-party services and products. Divi gives dozens of integrations with widespread electronic mail advertising device, analytics equipment, and fee gateway plugins. Listed here are a couple of to imagine:

Discover the Divi Market

Divi Marketplace

Loads of extensions, youngster subject matters, and structure packs are in particular designed to paintings with Divi, extending its core capability and providing much more design flexibility. Along with Divi Structure Packs, Divi customers can discover a wealth of goods within the Divi Marketplace. There are unbelievable merchandise through primary builders like Divi Life, Divi Pixel, and Divi Engine.

Divi Overlays

Divi Overlays is without equal popup builder for Divi. It makes use of the Visible Builder to create superb popups and modals. Popups can also be timed, brought on on positive pages, or arrange as go out intent to lure guests to behave. The most productive phase? Divi Overlays has pre-designed templates you’ll simply import and customise to check your website’s branding. The plugin is to be had for $79 and is derived with limitless web page utilization for three hundred and sixty five days.

Get Divi Overlays

Divi Pixel

Divi Pixel is a choice of Divi modules that can upload unbelievable capability when it’s time to construct a divi web page. You’ll be able to edit each facet of your website with them, together with headers, footers, login pages, and extra. Along with modules, Divi Pixel comes filled with 40 distinctive web page templates, so swapping up the glance of your website is a breeze. Divi Pixel is to be had for $169 consistent with yr with limitless web page utilization.

Get Divi Pixel

Divi Ajax Filter

Divi Ajax Filter is a Divi extension designed to create filters on your content material, similar to weblog posts, portfolios, or WooCommerce merchandise, at once throughout the Visible Builder. It lets in more than a few clear out choices, together with classes, tags, customized fields, and product attributes. Divi Ajax Filter out makes use of Ajax era, enabling content material updates with out reloading all the web page. It really works seamlessly with Divi, WooCommerce, and Complex Customized Fields (ACF). Divi Ajax Filter out is to be had for $97 consistent with yr with limitless web page utilization.

Get Divi Ajax Filter

Divi Excels at Making Skilled Web sites

Divi makes it imaginable for any person, without reference to enjoy, to create a wonderful, skilled web page. With its intuitive drag-and-drop Visual Builder, intensive premade layout library, and strong Theme Builder, Divi is able to bringing your imaginative and prescient to lifestyles. On this publish, we’ve equipped the entire knowledge you want to make a Divi web page. From buying a website hosting plan with SiteGround to making plans your web page’s construction and designing fascinating pages with Divi AI, you presently have the data to embark to your website-building adventure.

Take into accout, Divi gives a variety of design chops to discover. Don’t be afraid to experiment, customise, and unharness your creativity. There are many on-line assets to be had, from the Sublime Subject matters weblog to the Divi documentation website. With Divi through your aspect, the probabilities are never-ending.

Need to know extra in regards to the merchandise discussed on this publish? Take a look at the desk under for pricing and hyperlinks to every.

Merchandise Discussed Beginning Worth Description Motion
1 Namecheap $5.98/yr Area Registrar Get
2 SiteGround $2.99/month Internet hosting Supplier Get
3 Flywheel $13/month Controlled Internet hosting Supplier Get
4 Cloudways $12/month Controlled Internet hosting Supplier Get
5 Pressable $37.50/month (billed yearly) Controlled Internet hosting Supplier Get
6 Divi $89/yr WordPress Theme Get
13 Visual Builder Integrated with Divi Web page Builder Plugin Get
14 Design Elements Integrated with Divi Web page Builder Plugin Get
16 Theme Builder Integrated with Divi Complete Website online Modifying Get
15 Divi AI $16.08/month (billed yearly) AI Web page Builder Get
17 Divi Cloud $6/month Cloud Garage Get
18 Divi Teams $1.50/month consistent with person Staff Collaboration Get
19 Divi VIP $6/month VIP Improve Get
20 WP Forms $49.50/yr Touch Shape Plugin Get
21 WooCommerce Unfastened, Upload-ons To be had Ecommerce Plugin Get
22 Easy Digital Downloads Unfastened, $89.55/yr Ecommerce Plugin Get
23 Rank Math Unfastened, $6.99/month search engine optimization Plugin Get
24 Monarch Integrated with Divi Social Media Plugin Get
25 Blog2Social $7/month Social Media Plugin Get
26 Solid Security $99/yr Safety Plugin Get
27 Active Campaign $8/month E-mail Advertising and marketing Provider Get
28 Bloom Integrated with Divi Advertising and marketing Plugin Get
29 MonsterInsights Unfastened, $99.60/yr Analytics Plugin Get
30 MemberPress $179.50/yr Club Plugin Get
31 LifterLMS $149.50/yr LMS Plugin Get
32 LearnDash $199/yr LMS Plugin Get
32 Divi Marketplace Costs Range Extensions, Kid Subject matters, and Layouts for Divi Get
33 Divi Pixel $169/yr Divi Modules Get
34 Divi Overlays $79/yr Divi Layouts, Sections, and Modules Get
35 Divi Ajax Filter $97/yr Divi Extensions Get

Incessantly Requested Questions

Even though our Divi web page publish is intensive, you should still have a couple of questions that want to be spoke back. Take a look at the FAQ phase under to get the solutions.

#faqsu-faq-list {
background: #F0F4F8;
border-radius: 5px;
padding: 15px;
}
#faqsu-faq-list .faqsu-faq-single {
background: #fff;
padding: 15px 15px 20px;
box-shadow: 0px 0px 10px #d1d8dd, 0px 0px 40px #ffffff;
border-radius: 5px;
margin-bottom: 1rem;
}
#faqsu-faq-list .faqsu-faq-single:last-child {
margin-bottom: 0;
}
#faqsu-faq-list .faqsu-faq-question {
border-bottom: 1px forged #F0F4F8;
padding-bottom: 0.825rem;
margin-bottom: 0.825rem;
place: relative;
padding-right: 40px;
}
#faqsu-faq-list .faqsu-faq-question:after {
content material: “?”;
place: absolute;
correct: 0;
most sensible: 0;
width: 30px;
line-height: 30px;
text-align: middle;
colour: #c6d0db;
background: #F0F4F8;
border-radius: 40px;
font-size: 20px;
}

Do I want to understand how to code to make use of Divi?

Divi is a visible web page builder, so coding wisdom isn’t required. You’ll be able to design and construct your web page the usage of a drag-and-drop Visual Builder.

What do I want to get began with Divi?

You can want a website hosting supplier like SiteGround, a site identify from a registrar similar to Namecheap, and an Elegant Themes membership.

How a lot does it price to construct a web page with Divi?

The price will depend on your website hosting plan and Divi license. Sublime Subject matters gives every year and lifelong subscriptions beginning at $89 consistent with yr. Internet hosting plans range relying at the supplier, with plans at SiteGround beginning at $2.99 monthly.

Is Divi a sensible choice for newbies?

Sure, Divi‘s user-friendly interface makes it a super possibility for newbies and not using a coding enjoy.

What are Divi Structure Packs?

Divi comes with 2000+ premade layout packs for more than a few web page sorts. You’ll be able to simply customise them to suit your wishes.

Can I customise the design of my Divi web page?

Sure, Divi gives intensive design choices. You’ll be able to keep watch over fonts, colours, spacing, and extra for each design module to your web page. It streamlines your workflow, saving you large quantities of effort and time.

Does Divi paintings with plugins?

Sure, Divi is suitable with maximum WordPress plugins. This lets you prolong your web page’s capability with options like touch bureaucracy, search engine optimization optimization, and ecommerce. Divi additionally has an intensive Marketplace the place you’ll acquire plugins made particularly for Divi.

Can I create customized publish sorts with Divi?

Divi itself does not be offering integrated capability for customized publish sorts, however you’ll accomplish that the usage of plugins like Toolset, which integrates seamlessly with the theme.

How do I optimize my Divi web page for search engines like google and yahoo?

Whilst Divi does not at once maintain search engine optimization, you’ll use an search engine optimization plugin like Rank Math to optimize your web page’s content material and reinforce seek rating.

Is Divi excellent for ecommerce internet sites?

Sure, Divi can be utilized to create ecommerce internet sites with the assistance of WooCommerce plugin, which integrates seamlessly with Divi. If truth be told, Divi comes with 20+ WooCommerce particular modules, so you’ll construct customized product pages, cart and checkout templates, and extra.

The publish How to Build a Website with Divi (2024 Tutorial) gave the impression first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

Contents

read more

0 Comments

Submit a Comment

DON'T LET YOUR WEBSITE GET DESTROYED BY HACKERS!

Get your FREE copy of our Cyber Security for WordPress® whitepaper.

You'll also get exclusive access to discounts that are only found at the bottom of our WP CyberSec whitepaper.

You have Successfully Subscribed!