{"id":8204,"date":"2024-09-23T14:32:32","date_gmt":"2024-09-23T12:32:32","guid":{"rendered":"http:\/\/oldferdykorpershoek.com\/?p=8204"},"modified":"2024-09-23T15:06:49","modified_gmt":"2024-09-23T13:06:49","slug":"divi-theme-tutorial","status":"publish","type":"post","link":"https:\/\/ferdy.com\/divi-theme-tutorial\/","title":{"rendered":"Divi Theme Tutorial 2024: Complete WordPress Website Setup"},"content":{"rendered":"\n<p>Ever wondered how to create a stunning website without getting tangled in complex coding? Enter the world of Divi and WordPress.<\/p>\n\n\n\n<p class=\"has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background has-background\"><strong><strong>To create a WordPress website using the Divi Theme: select a hosting service, install WordPress, and choose a domain. Next, leverage Divi&#8217;s Visual Builder for its drag-and-drop interface, advanced styling, and efficient design tools, suitable for beginners and experienced web designers.<\/strong><\/strong><\/p>\n\n\n\n<p>In short, this article has everything one needs from knowing nothing about building websites with WordPress and Divi to mastering them like a pro leading towards a standout online presence. Ready? Let&#8217;s dive in!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-create-a-wordpress-website-using-the-divi-theme-2024-video-tutorial\"><strong>Create a WordPress website using the Divi theme 2024 &#8211; Video tutorial<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"How To Make A WordPress Website | Divi Theme Tutorial\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/Or02VuBuEGk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\t\t\t\t<div class=\"wp-block-uagb-table-of-contents uagb-toc__align-left uagb-toc__columns-1  uagb-block-102aece2      \"\n\t\t\t\t\tdata-scroll= \"1\"\n\t\t\t\t\tdata-offset= \"30\"\n\t\t\t\t\tstyle=\"\"\n\t\t\t\t>\n\t\t\t\t<div class=\"uagb-toc__wrap\">\n\t\t\t\t\t\t<div class=\"uagb-toc__title\">\n\t\t\t\t\t\t\t<strong>How to build a WordPress website using Divi 2024<\/strong>\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"uagb-toc__list-wrap \">\n\t\t\t\t\t\t<ol class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#create-a-wordpress-website-using-the-divi-theme-2024-video-tutorial\" class=\"uagb-toc-link__trigger\">Create a WordPress website using the Divi theme 2024 &#8211; Video tutorial<\/a><li class=\"uagb-toc__list\"><a href=\"#get-started-on-your-wordpress-site\" class=\"uagb-toc-link__trigger\">Get started on your WordPress site\u00a0<\/a><li class=\"uagb-toc__list\"><a href=\"#getting-started-with-the-divi-theme\" class=\"uagb-toc-link__trigger\">Getting started with the Divi theme\u00a0<\/a><li class=\"uagb-toc__list\"><a href=\"#starting-with-the-divi-builder\" class=\"uagb-toc-link__trigger\">Starting with the Divi builder\u00a0\u00a0<\/a><li class=\"uagb-toc__list\"><a href=\"#exploring-the-divi-visual-builder\" class=\"uagb-toc-link__trigger\">Exploring the Divi Visual Builder<\/a><li class=\"uagb-toc__list\"><a href=\"#create-the-hero-section-of-your-wordpress-website-using-divi\" class=\"uagb-toc-link__trigger\">Create the hero section of your WordPress website using Divi<\/a><li class=\"uagb-toc__list\"><a href=\"#create-a-business-features-section\" class=\"uagb-toc-link__trigger\">Create a business features section<\/a><li class=\"uagb-toc__list\"><a href=\"#tell-more-about-your-business\" class=\"uagb-toc-link__trigger\">Tell more about your business<\/a><li class=\"uagb-toc__list\"><a href=\"#do-more-with-divi-using-advanced-customization-options\" class=\"uagb-toc-link__trigger\">Do more with Divi using advanced customization options<\/a><li class=\"uagb-toc__list\"><a href=\"#enhanced-features-in-divi-theme\" class=\"uagb-toc-link__trigger\">Enhanced features in Divi Theme<\/a><li class=\"uagb-toc__list\"><a href=\"#final-words\" class=\"uagb-toc-link__trigger\">Final Words\u00a0<\/a><\/ol>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\n\n<h2 class=\"wp-block-heading\" id=\"h-get-started-on-your-wordpress-site\"><strong>Get started on your WordPress site\u00a0<\/strong><\/h2>\n\n\n\n<p>My long-time followers know that I always begin my tutorials from the ground up, ensuring everyone, regardless of experience, can follow along. That&#8217;s why, before Diving into the Divi theme tutorial, it&#8217;s crucial to first walk through the fundamental steps of setting up your website.<\/p>\n\n\n\n<p>Setting up a basic WordPress website comprises three essential steps: selecting a web hosting service, installing WordPress, and picking a domain name. Let\u2019s get started.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-1-select-a-web-hosting-nbsp\">Step 1: Select a web hosting&nbsp;<\/h3>\n\n\n\n<p>Web hosting is the first step on this journey of website creation. Think of it like renting space online where all the content of your site gets stored, ready to go live any time an internet user keys in your domain name.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.webhosting34.com\" target=\"_blank\" rel=\"noopener\"><strong>Hostinger<\/strong><\/a> stands out as one of the best web hosting platforms with affordable plans that meet varying customer needs and ensure excellent results with a 99% uptime guarantee.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/EymGJJr7yBr0fjZBGUHWrnDfa4mZ9NFWoTE6X3nGDePPq4RqjNIoGjkpHMr2tF9VPh4jHVb3ooyC1kFArtLMbfz1vwhv-FFwi88-G2RAkpeY4JUtBDzpBd4NOyiV1MS2O9uph8O2Lu_hW_swF9WKDFQ\" alt=\"Hostinger pricing plans 2024\"\/><\/figure>\n\n\n\n<p>All three of Hostinger\u2019s web hosting plans offer a <strong>free domain name<\/strong>. But for your first website, I suggest you go for the <strong>Business <\/strong>plan.<\/p>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p class=\"has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background has-background\"><strong>Why I recommend the Business plan for first-timers<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Affordable pricing<\/li>\n\n\n\n<li>Free CDN and object caching for global audience speed optimization<\/li>\n\n\n\n<li>Daily backups to secure Divi builder progress against glitches<\/li>\n\n\n\n<li>Includes a free staging tool for safe website edits and publishing upon satisfaction<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<p>As a reader of this blog, you gain exclusive access to special Hostinger web hosting deals unavailable to the general public. <\/p>\n\n\n\n<p>Plus, to make your day, enjoy an additional 5% discount on Hostinger when you use coupon code <strong>\u201cFERDY\u201d <\/strong>at checkout!<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-16018d1d wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background has-background wp-element-button\" href=\"http:\/\/webhosting34.com\" target=\"_blank\" rel=\"noopener\"><strong>Get Hostinger<\/strong><\/a><\/div>\n<\/div>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Set up WordPress<\/h3>\n\n\n\n<p>Follow along the steps as you purchase web hosting on Hostinger. You\u2019ll see a set of prompts to help you set up an account on WordPress. I recommend skipping these as I\u2019ll guide you how to start from scratch.&nbsp;<\/p>\n\n\n\n<p>Choose the options to your liking and set up your WordPress account as a foundation to build your website.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Choose a domain name<\/h3>\n\n\n\n<p>A domain name is your online address. Your preferred domain should uniquely and clearly reflect what you do, making it memorable and easy to remember to help drive more traffic to your site.<\/p>\n\n\n\n<p>I never rush when choosing a domain as it is crucial in making my site trustworthy and credible.&nbsp;<\/p>\n\n\n\n<p>Lucky for you, Hostinger offers a free domain for the first year so you won\u2019t have to spend extra. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"668\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/hostinger-claim-a-free-domain-1.webp\" alt=\"Hostinger choose a suitable domain extension\" class=\"wp-image-7988\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/hostinger-claim-a-free-domain-1.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/hostinger-claim-a-free-domain-1-300x167.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/hostinger-claim-a-free-domain-1-1024x570.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/hostinger-claim-a-free-domain-1-768x428.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/hostinger-claim-a-free-domain-1-600x334.webp 600w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<p>Simply select \u201cClaim a Free Domain\u201d on the Hostinger dashboard to proceed.&nbsp;<\/p>\n\n\n\n<p>Select a .com extension for your domain and don\u2019t be afraid to get creative to get a name that is available and perfectly reflects your business.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/tLw8dzoNfAUrxp9K2yez4eCapO0zLBYW95gXNpGmJo5c1bINglE_UbRJBoj8r8w4XEiVmu5VYGRfUg1Lh9BxtIZLiyMrx8_QEomN9qvhtTYK7nDREgHvF1fpFkJJa6rLae-FPI6v_cYpcdpPo1_pQnE\" alt=\"Confirm your domain on hostinger\"\/><\/figure>\n\n\n\n<p>As a rule for all my tutorials, I will create a website using the Divi theme to walk you through the process step by step. The domain I chose for this website is divi5.com.<\/p>\n\n\n\n<p>Once everything is set, Hostinger will guide you through registering your chosen domain name. <\/p>\n\n\n\n<p>If you need more guidance on how to do these steps in detail, check out my <a href=\"http:\/\/oldferdykorpershoek.com\/create-wordpress-website\/\" target=\"_blank\" rel=\"noopener\"><strong>easy WordPress guide<\/strong><\/a>. In this guide, I walk you through setting up a basic WordPress website from scratch.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Getting started with the Divi theme&nbsp;<\/strong><\/h2>\n\n\n\n<p>A WordPress theme shapes your site&#8217;s appearance, covering color schemes, page layouts and typography. The appropriate theme can effectively transform your site to accurately reflect its purpose and ethos.<\/p>\n\n\n\n<p>Although WordPress has a huge range of free and premium WordPress themes, each of which have different features, today I will talk about the <a href=\"http:\/\/ferdykorp.com\/divi\" target=\"_blank\" rel=\"noopener\"><strong>Divi<\/strong><\/a> theme.<\/p>\n\n\n\n<p>The Divi visual page builder features a drag and drop interface like most popular WordPress themes. But what sets it apart from other themes is the layout packs, custom templates, and advanced styling options.<\/p>\n\n\n\n<p>I bought the Divi theme 8 years ago and now use it for all my website projects.<\/p>\n\n\n\n<p>The Divi theme is my first choice because it gives a professional look that even the most popular free WordPress themes cannot match.<\/p>\n\n\n\n<p>Plus, Divi\u2019s speed with its copy-paste feature makes my workflow super efficient.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Divi\u2019s premium plans<\/h3>\n\n\n\n<p>Divi is a feature-rich, low-cost theme by Elegant Themes. When you sign up for a premium plan, you get access to 300+ website packs, 24\/7 premium support, and the Extra, Bloom, and Monarch themes by Elegant Themes!<\/p>\n\n\n\n<p>The best part &#8211; with a premium plan, you can use the Divi builder and theme on unlimited websites without paying for each additional website.<\/p>\n\n\n\n<p>To sign up, you have two options: the simple Divi plan and the Divi Pro plan.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1164\" height=\"847\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/image-3.png\" alt=\"Divi pricing plans 2024\" class=\"wp-image-8225\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/image-3.png 1164w, https:\/\/ferdy.com\/wp-content\/uploads\/image-3-300x218.png 300w, https:\/\/ferdy.com\/wp-content\/uploads\/image-3-1024x745.png 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/image-3-768x559.png 768w, https:\/\/ferdy.com\/wp-content\/uploads\/image-3-600x437.png 600w\" sizes=\"auto, (max-width: 1164px) 100vw, 1164px\" \/><\/figure>\n\n\n\n<p>Here\u2019s what I think having used both plans:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Divi plan:<\/strong> Ideal for personal projects and people just starting as digital entrepreneurs.<\/li>\n\n\n\n<li><strong>Divi Pro plan:<\/strong> My top pick for web designers looking to create multiple websites swiftly. The plan also offers artificial intelligence (AI) tools alongside cloud storage services.<\/li>\n<\/ul>\n\n\n\n<p>Both these plans offer great value! Many of my students use Divi to create websites for clients, earning much more than the initial Divi investment.&nbsp;<\/p>\n\n\n\n<p>I know you\u2019re eager to check out Divi, but before you do so, you should know that you can avail a 10% discount on Divi and other Divi products only within 24 hours of your first visit to the site.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-16018d1d wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background has-background wp-element-button\" href=\"https:\/\/ferdykorp.com\/divi\" target=\"_blank\" rel=\"noopener\"><strong>Get Divi Theme<\/strong><\/a><\/div>\n<\/div>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>You also have the option to sign up for Divi and Divi Pro for life at a 10% discount and get access to updates and premium support forever!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Installing and activating the Divi theme&nbsp;<\/strong><\/h3>\n\n\n\n<p>Divi\u2019s intuitive functions make website building simpler than you may think. Let&#8217;s start at the beginning.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/1_2510-2.webp\" alt=\"Download the divi theme\" class=\"wp-image-8227\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/1_2510-2.webp 1920w, https:\/\/ferdy.com\/wp-content\/uploads\/1_2510-2-300x169.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/1_2510-2-1024x576.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/1_2510-2-768x432.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/1_2510-2-1536x864.webp 1536w, https:\/\/ferdy.com\/wp-content\/uploads\/1_2510-2-1200x675.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/1_2510-2-600x338.webp 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>First things first; you need to <a href=\"https:\/\/ferdykorp.com\/divi\" target=\"_blank\" rel=\"noopener\"><strong>select a plan<\/strong><\/a> which will lead you to a member\u2019s area from where you can download the Divi theme.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/2_2535.webp\" alt=\"upload Divi on WordPress and install\" class=\"wp-image-8228\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/2_2535.webp 1920w, https:\/\/ferdy.com\/wp-content\/uploads\/2_2535-300x169.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/2_2535-1024x576.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/2_2535-768x432.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/2_2535-1536x864.webp 1536w, https:\/\/ferdy.com\/wp-content\/uploads\/2_2535-1200x675.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/2_2535-600x338.webp 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>Once you\u2019ve downloaded the zip file, hop over to your WordPress dashboard. Seek out <strong>Appearance &gt; Themes &gt; Add New &gt; Upload theme<\/strong>. Upload the Divi zip file then hit the <strong>Install Now<\/strong> button.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/3_2545.webp\" alt=\"Activate Divi theme on WordPress\" class=\"wp-image-8229\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/3_2545.webp 1920w, https:\/\/ferdy.com\/wp-content\/uploads\/3_2545-300x169.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/3_2545-1024x576.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/3_2545-768x432.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/3_2545-1536x864.webp 1536w, https:\/\/ferdy.com\/wp-content\/uploads\/3_2545-1200x675.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/3_2545-600x338.webp 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>After Divi is installed on your WordPress, activate it by clicking on <strong>Activate<\/strong>.<\/p>\n\n\n\n<p>You\u2019re good to go after this step, but I always sync WordPress with Divi theme updates so it can get automatically updated like any other WordPress theme. This way you don\u2019t have to upload a new zip file for the theme every time Divi has a new update.&nbsp;<\/p>\n\n\n\n<p>You can do this by using the API key from your Elegant Themes account. Head to <strong>Divi &gt; Theme options<\/strong> from the left panel on WordPress.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/4_2638-1.webp\" alt=\"connect Divi to WordPress\" class=\"wp-image-8231\"\/><\/figure>\n\n\n\n<p>On the Updates tab, enter your Username and API key that you\u2019ll find on the Account section of your Elegant Themes portal. Click on <strong>Save Changes<\/strong> to authenticate the Elegant Themes subscription.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Starting with the Divi builder<\/strong>&nbsp;&nbsp;<\/h2>\n\n\n\n<p>Before you start building your website using Divi, there are a few important web page elements that you need to set up. First up, we have the site title and tagline.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 1: Set the site title and tagline<\/strong><\/h3>\n\n\n\n<p>As a website owner, your primary goal is to get your website to appear in search results for your targeted search terms. This starts with setting a strong SEO site title and tagline.<\/p>\n\n\n\n<p>A good site title is short yet catchy because it has two jobs: grabbing users&#8217; attention and letting search engines know what a particular website is about.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"800\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/Site-title-formula.webp\" alt=\"an illustration showing how to create a search engine optimized title for awebsite\" class=\"wp-image-8006\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/Site-title-formula.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/Site-title-formula-300x200.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/Site-title-formula-1024x683.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/Site-title-formula-768x512.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/Site-title-formula-600x400.webp 600w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<p>As visible in the image above, I have created a simple yet effective formula for creating engaging and SEO-friendly site titles.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 2: Build the website menu<\/strong><\/h3>\n\n\n\n<p>Next comes another task &#8211; building a site menu. Think of the site menu as a map that guides your website visitors to specific pages and subdomains on your site.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/6_3158.webp\" alt=\"theme customizer wordpress\" class=\"wp-image-8233\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/6_3158.webp 1920w, https:\/\/ferdy.com\/wp-content\/uploads\/6_3158-300x169.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/6_3158-1024x576.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/6_3158-768x432.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/6_3158-1536x864.webp 1536w, https:\/\/ferdy.com\/wp-content\/uploads\/6_3158-1200x675.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/6_3158-600x338.webp 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>To set the menu on your WordPress website, select <strong>Theme Customizer<\/strong> from the toolbar at the top. This will open up a panel on the left to add a menu and pages to your website.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/7_3248.webp\" alt=\"add menu items on WordPress\" class=\"wp-image-8234\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/7_3248.webp 1920w, https:\/\/ferdy.com\/wp-content\/uploads\/7_3248-300x169.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/7_3248-1024x576.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/7_3248-768x432.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/7_3248-1536x864.webp 1536w, https:\/\/ferdy.com\/wp-content\/uploads\/7_3248-1200x675.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/7_3248-600x338.webp 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>Add the menu items by clicking <strong>Create a new menu &gt; Add items<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/8_3512-1.webp\" alt=\"\" class=\"wp-image-8237\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/8_3512-1.webp 1920w, https:\/\/ferdy.com\/wp-content\/uploads\/8_3512-1-300x169.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/8_3512-1-1024x576.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/8_3512-1-768x432.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/8_3512-1-1536x864.webp 1536w, https:\/\/ferdy.com\/wp-content\/uploads\/8_3512-1-1200x675.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/8_3512-1-600x338.webp 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>To add drop-down items in the menu, drag the desired pages or categories slightly to the right under their parent menu item.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 3: Set the homepage to a static page&nbsp;<\/strong><\/h3>\n\n\n\n<p>After setting up your menu, the next step is to establish the look of your homepage.&nbsp;<\/p>\n\n\n\n<p>Currently, if you visit your website, you&#8217;ll likely encounter a <strong>&#8220;No results found&#8221;<\/strong> message like the one below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/9_3618.webp\" alt=\"WordPress default homepage view\" class=\"wp-image-8236\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/9_3618.webp 1920w, https:\/\/ferdy.com\/wp-content\/uploads\/9_3618-300x169.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/9_3618-1024x576.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/9_3618-768x432.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/9_3618-1536x864.webp 1536w, https:\/\/ferdy.com\/wp-content\/uploads\/9_3618-1200x675.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/9_3618-600x338.webp 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>This default setting occurs because WordPress, primarily a content management system, is configured to display blog posts on the homepage.&nbsp;<\/p>\n\n\n\n<p>But you can prevent this by changing the home page display to a static page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/10_3621.webp\" alt=\"change home page to static page on WordPress\" class=\"wp-image-8238\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/10_3621.webp 1920w, https:\/\/ferdy.com\/wp-content\/uploads\/10_3621-300x169.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/10_3621-1024x576.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/10_3621-768x432.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/10_3621-1536x864.webp 1536w, https:\/\/ferdy.com\/wp-content\/uploads\/10_3621-1200x675.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/10_3621-600x338.webp 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>Under the Theme Customizer menu, navigate to the <strong>Homepage Settings<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/11_3637.webp\" alt=\"change homepage settings on WordPress\" class=\"wp-image-8239\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/11_3637.webp 1920w, https:\/\/ferdy.com\/wp-content\/uploads\/11_3637-300x169.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/11_3637-1024x576.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/11_3637-768x432.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/11_3637-1536x864.webp 1536w, https:\/\/ferdy.com\/wp-content\/uploads\/11_3637-1200x675.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/11_3637-600x338.webp 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>Go to the home page settings on the Theme Customizer and change the home page display to <strong>\u2018A static page.\u2019<\/strong> Proceed by selecting <strong>&#8216;Home&#8217;<\/strong> and <strong>&#8216;Blog&#8217;<\/strong> for the <strong>HOMEPAGE<\/strong> and <strong>POSTS PAGE<\/strong> tabs. Save the settings by clicking the <strong>Publish<\/strong> button.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 4: Add your logo and favicon<\/strong><\/h3>\n\n\n\n<p>Your logo is an important part of your brand identity. The last step before we start playing around with Divi is uploading your logo and favicon to your WordPress website (the small icon that appears on browser tabs).<\/p>\n\n\n\n<p>Don\u2019t know how to create a logo? No problem! Check out my in-depth YouTube tutorial below. It\u2019s me walking you through creating a logo and favicon for your website from scratch.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Canva: The Best Way To Create A Logo For Free\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/QGIq6LIQeJ4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>I prefer researching my competitors before I create anything, be it my website\u2019s color palette or the website\u2019s look and feel.&nbsp;<\/p>\n\n\n\n<p>I suggest you do the same before you create your logo so you get a sense of what works in the industry you\u2019re operating in.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/12_3814.webp\" alt=\"Configure Divi theme\" class=\"wp-image-8240\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/12_3814.webp 1920w, https:\/\/ferdy.com\/wp-content\/uploads\/12_3814-300x169.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/12_3814-1024x576.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/12_3814-768x432.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/12_3814-1536x864.webp 1536w, https:\/\/ferdy.com\/wp-content\/uploads\/12_3814-1200x675.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/12_3814-600x338.webp 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>Once you\u2019ve created a high-quality logo for your site, go to <strong>Divi -&gt; Theme Options<\/strong> from the left panel and upload the logo.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/13_4252.webp\" alt=\"Upload favicon on WordPres\\s website\" class=\"wp-image-8241\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/13_4252.webp 1920w, https:\/\/ferdy.com\/wp-content\/uploads\/13_4252-300x169.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/13_4252-1024x576.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/13_4252-768x432.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/13_4252-1536x864.webp 1536w, https:\/\/ferdy.com\/wp-content\/uploads\/13_4252-1200x675.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/13_4252-600x338.webp 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>To upload the favicon, select <strong>Theme Customizer -&gt; General Settings -&gt; Site Identity<\/strong>. Click the <strong>Select site icon<\/strong> button and upload your favicon.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Exploring the Divi Visual Builder<\/strong><\/h2>\n\n\n\n<p>Ready to get your feet wet in Divi? Let\u2019s explore what you can do with it!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/1-4608-enable-visual-builder.webp\" alt=\"Enable Divi visual builder on WordPress\" class=\"wp-image-8242\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/1-4608-enable-visual-builder.webp 1920w, https:\/\/ferdy.com\/wp-content\/uploads\/1-4608-enable-visual-builder-300x169.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/1-4608-enable-visual-builder-1024x576.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/1-4608-enable-visual-builder-768x432.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/1-4608-enable-visual-builder-1536x864.webp 1536w, https:\/\/ferdy.com\/wp-content\/uploads\/1-4608-enable-visual-builder-1200x675.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/1-4608-enable-visual-builder-600x338.webp 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>To access the Divi Visual Builder, click the <strong>Enable Visual Builder<\/strong> button on the toolbar at the top. This will pull up the Divi interface.<\/p>\n\n\n\n<p>Even though the visual builder lets you see changes to your website as they happen, you can click on the same button to exit the visual builder and look at your website without the toolbars and widgets.&nbsp;&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<p>There are three prominent options. You can select from hundreds of pre-made layouts from Divi\u2019s template library, clone an existing page, or work on your webpage from scratch.&nbsp;<\/p>\n\n\n\n<p>I will teach you how to create a page from scratch with a blank template to give you a full tour of the Divi page builder.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>The Divi Builder interface&nbsp;<\/strong><\/h3>\n\n\n\n<p>Since Divi is an intuitive drag-and-drop page builder, I&#8217;ll guide you through its various functionalities. With this knowledge, you can dive in and experiment, unleashing your creativity!<\/p>\n\n\n\n<p>So, the first step in this learning journey is the theme-building interface.&nbsp;<\/p>\n\n\n\n<p>The Divi Builder&#8217;s strength lies in its flexible layout system comprising sections, rows, and modules. Each section you add can contain various rows. Within these rows, you can place different modules.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/2-5557-three-boxes.webp\" alt=\"Create a new section on Divi\" class=\"wp-image-8243\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/2-5557-three-boxes.webp 1920w, https:\/\/ferdy.com\/wp-content\/uploads\/2-5557-three-boxes-300x169.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/2-5557-three-boxes-1024x576.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/2-5557-three-boxes-768x432.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/2-5557-three-boxes-1536x864.webp 1536w, https:\/\/ferdy.com\/wp-content\/uploads\/2-5557-three-boxes-1200x675.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/2-5557-three-boxes-600x338.webp 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>This flexibility allows for diverse layouts:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Sections:<\/strong> Regular, specialty, and full-width, each offering unique module arrangements.<\/li>\n\n\n\n<li><strong>Rows:<\/strong> Customize the number of rows and their sizes within each section, ranging from single to multiple rows, allowing for varied content display.<\/li>\n\n\n\n<li><strong>Modules:<\/strong> A wide array of elements like text (Accordion), images, CTA buttons, audio and more, each with its distinct settings.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/3-5429-editing.webp\" alt=\"Divi web design elements\" class=\"wp-image-8244\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/3-5429-editing.webp 1920w, https:\/\/ferdy.com\/wp-content\/uploads\/3-5429-editing-300x169.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/3-5429-editing-1024x576.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/3-5429-editing-768x432.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/3-5429-editing-1536x864.webp 1536w, https:\/\/ferdy.com\/wp-content\/uploads\/3-5429-editing-1200x675.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/3-5429-editing-600x338.webp 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>Once you select the element you wish to add to a module, it opens a toolbar with various settings you can modify.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/4-5330-coloumn-setting.webp\" alt=\"Divi theme column settings\" class=\"wp-image-8245\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/4-5330-coloumn-setting.webp 1920w, https:\/\/ferdy.com\/wp-content\/uploads\/4-5330-coloumn-setting-300x169.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/4-5330-coloumn-setting-1024x576.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/4-5330-coloumn-setting-768x432.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/4-5330-coloumn-setting-1536x864.webp 1536w, https:\/\/ferdy.com\/wp-content\/uploads\/4-5330-coloumn-setting-1200x675.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/4-5330-coloumn-setting-600x338.webp 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>These settings include spacing, border, shadowing, visibility, transitions, and custom CSS codes. I encourage you to explore the different functions available for each module element.<\/p>\n\n\n\n<p>You can move the toolbar around or stitch it to the side by clicking the option on the top left for easier navigation.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/5-5140-green-check.webp\" alt=\"close setting bar on Divi\" class=\"wp-image-8246\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/5-5140-green-check.webp 1920w, https:\/\/ferdy.com\/wp-content\/uploads\/5-5140-green-check-300x169.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/5-5140-green-check-1024x576.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/5-5140-green-check-768x432.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/5-5140-green-check-1536x864.webp 1536w, https:\/\/ferdy.com\/wp-content\/uploads\/5-5140-green-check-1200x675.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/5-5140-green-check-600x338.webp 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>To close this toolbar, click the green check button on the bottom right. You can reopen the toolbar by selecting the module and clicking the gear button from the hover options.&nbsp;<\/p>\n\n\n\n<p>One of Divi&#8217;s features I particularly appreciate is the copy-pasting function. You can access this by clicking the copy icon in the hover options. This allows you to drag and replicate a module anywhere on your webpage effortlessly.<\/p>\n\n\n\n<p class=\"has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background has-background\"><strong>Pro tip:<\/strong> You can use combinations, such as Ctrl + S, to save pages or Ctrl + Shift + S if you decide that saving it as a draft better serves your goals at that time. If you want to exit, simply press Ctrl + E and you are free to exit the builder.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Using the purple button<\/strong><\/h4>\n\n\n\n<p>Divi&#8217;s drag-and-drop editor sets it apart from other page builders. And the magic starts with the quirky purple three-dot button at the bottom of the builder.<\/p>\n\n\n\n<p>This button&#8217;s features make designing with Divi a walk in the park.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/6-10020-grey-box.webp\" alt=\"toggle views on Divi theme\" class=\"wp-image-8247\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/6-10020-grey-box.webp 1920w, https:\/\/ferdy.com\/wp-content\/uploads\/6-10020-grey-box-300x169.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/6-10020-grey-box-1024x576.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/6-10020-grey-box-768x432.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/6-10020-grey-box-1536x864.webp 1536w, https:\/\/ferdy.com\/wp-content\/uploads\/6-10020-grey-box-1200x675.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/6-10020-grey-box-600x338.webp 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>Want to see how your site looks on different devices? Just one click on those nifty gray options to the left of the purple button, and bam! You&#8217;re checking out your site on desktops, tablets, and smartphones. It&#8217;s that easy.<\/p>\n\n\n\n<p>On the opposite side, the gray icons at the far right of the purple button serve multiple purposes. They enable you to search your webpage, examine the layers of your page, and access the Divi builder helper.&nbsp;<\/p>\n\n\n\n<p>This helper is a valuable resource, offering a list of shortcuts to accelerate your workflow and enhance your efficiency in using the Divi Builder.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/7-10435-purple-.webp\" alt=\"purple button settings on Divi\" class=\"wp-image-8248\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/7-10435-purple-.webp 1920w, https:\/\/ferdy.com\/wp-content\/uploads\/7-10435-purple--300x169.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/7-10435-purple--1024x576.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/7-10435-purple--768x432.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/7-10435-purple--1536x864.webp 1536w, https:\/\/ferdy.com\/wp-content\/uploads\/7-10435-purple--1200x675.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/7-10435-purple--600x338.webp 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>By clicking on the + sign that comes up when you click the purple button, you can load readymade layouts from the template library.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/8-10521-add-to-layout-library.webp\" alt=\"Save a layout on Divi to use further\" class=\"wp-image-8249\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/8-10521-add-to-layout-library.webp 1920w, https:\/\/ferdy.com\/wp-content\/uploads\/8-10521-add-to-layout-library-300x169.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/8-10521-add-to-layout-library-1024x576.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/8-10521-add-to-layout-library-768x432.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/8-10521-add-to-layout-library-1536x864.webp 1536w, https:\/\/ferdy.com\/wp-content\/uploads\/8-10521-add-to-layout-library-1200x675.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/8-10521-add-to-layout-library-600x338.webp 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>You can also save your current layout to your library for easy access while creating multiple pages. To access these saved layouts, click on the + sign again.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/9-10601-start-from-scratch.webp\" alt=\"delete layout on Divi\" class=\"wp-image-8250\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/9-10601-start-from-scratch.webp 1920w, https:\/\/ferdy.com\/wp-content\/uploads\/9-10601-start-from-scratch-300x169.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/9-10601-start-from-scratch-1024x576.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/9-10601-start-from-scratch-768x432.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/9-10601-start-from-scratch-1536x864.webp 1536w, https:\/\/ferdy.com\/wp-content\/uploads\/9-10601-start-from-scratch-1200x675.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/9-10601-start-from-scratch-600x338.webp 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>In case you want to start over, click on the purple trash icon to delete everything and start on a blank canvas.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/10-10700-clock-icon.webp\" alt=\"editing history on Divi theme\" class=\"wp-image-8251\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/10-10700-clock-icon.webp 1920w, https:\/\/ferdy.com\/wp-content\/uploads\/10-10700-clock-icon-300x169.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/10-10700-clock-icon-1024x576.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/10-10700-clock-icon-768x432.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/10-10700-clock-icon-1536x864.webp 1536w, https:\/\/ferdy.com\/wp-content\/uploads\/10-10700-clock-icon-1200x675.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/10-10700-clock-icon-600x338.webp 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>There\u2019s a handy clock option, which diligently tracks all your changes. Made a mistake or accidentally deleted a page? No worries! Simply revert to an earlier version from the <strong>History States<\/strong> list. It&#8217;s like having a time machine for your website edits.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/11-10843-import-export.webp\" alt=\"import a page on Divi\" class=\"wp-image-8252\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/11-10843-import-export.webp 1920w, https:\/\/ferdy.com\/wp-content\/uploads\/11-10843-import-export-300x169.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/11-10843-import-export-1024x576.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/11-10843-import-export-768x432.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/11-10843-import-export-1536x864.webp 1536w, https:\/\/ferdy.com\/wp-content\/uploads\/11-10843-import-export-1200x675.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/11-10843-import-export-600x338.webp 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>The double arrow button at the far right of the purple button is for importing and exporting pages. If you\u2019re a professional website designer, this feature can come in handy to create multiple websites using the same template.&nbsp;&nbsp;&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Wireframe view<\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"255\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/12-1220-wireframe-view.webp\" alt=\"Wireframe view on WordPress\" class=\"wp-image-8253\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/12-1220-wireframe-view.webp 1920w, https:\/\/ferdy.com\/wp-content\/uploads\/12-1220-wireframe-view-300x40.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/12-1220-wireframe-view-1024x136.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/12-1220-wireframe-view-768x102.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/12-1220-wireframe-view-1536x204.webp 1536w, https:\/\/ferdy.com\/wp-content\/uploads\/12-1220-wireframe-view-1200x159.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/12-1220-wireframe-view-600x80.webp 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>Clicking the button. shown in the image above, takes you to the <strong>Wireframe View<\/strong>, offering a sneak peek at your page&#8217;s structural blueprint. Think of it like previewing a new house&#8217;s layout before installing the walls.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/13-10309-rows.webp\" alt=\"wireframe view on Divi builder\" class=\"wp-image-8254\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/13-10309-rows.webp 1920w, https:\/\/ferdy.com\/wp-content\/uploads\/13-10309-rows-300x169.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/13-10309-rows-1024x576.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/13-10309-rows-768x432.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/13-10309-rows-1536x864.webp 1536w, https:\/\/ferdy.com\/wp-content\/uploads\/13-10309-rows-1200x675.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/13-10309-rows-600x338.webp 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>With this view, you can:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Rename specific sections and rows&nbsp;<\/li>\n\n\n\n<li>Select or remove various elements with ease<\/li>\n<\/ul>\n\n\n\n<p class=\"has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background has-background\"><strong>Pro tip:<\/strong> Dive into experimenting with Divi&#8217;s features once you&#8217;re comfortable with the basics. Its intuitive interface flattens the learning curve, enabling you to quickly master the theme. Start playing around with Divi and you&#8217;ll be crafting professional-grade websites effortlessly in no time!<\/p>\n\n\n\n<p>So far, I&#8217;ve delved into the foundational features of the Divi Visual Builder. These are good enough for beginners to start creating websites. <\/p>\n\n\n\n<p>Next, I&#8217;ll explore Divi&#8217;s advanced functionalities \u2013 tools that can truly transform and elevate your website&#8217;s aesthetic to new heights of sophistication and style.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Create the hero section of your WordPress website using Divi<\/strong><\/h2>\n\n\n\n<p>It&#8217;s time to roll up our sleeves and start the real work. We\u2019re about to create a hero section for your website. But no, not the kind of hero you see in movies (haha!)&nbsp;<\/p>\n\n\n\n<p>In web design, the &#8216;hero&#8217; is the first thing your website visitors see when they land on your site. It\u2019s your first impression.<\/p>\n\n\n\n<p>In this part, I\u2019ll take you through building a hero section using the Divi Visual Builder. We\u2019ll aim for something that not only looks great but encapsulates what you&#8217;re all about. Think of it as your website&#8217;s welcoming committee, setting the tone for your visitors\u2019 journey.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Building the hero section<\/strong><\/h3>\n\n\n\n<p>The website (divi5.com) I am creating to help demonstrate the process is for a web design agency. So I need to ask myself: What is this website about? That\u2019s the first question you should ask yourself when creating the hero section for your website.<\/p>\n\n\n\n<p>So, my website is all about helping people create websites optimized for conversions and growing their business. And that\u2019s the first thing my prospects should see on my home page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/14-11440-two-coloumns.webp\" alt=\"Divi rows 2 columns section\" class=\"wp-image-8255\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/14-11440-two-coloumns.webp 1920w, https:\/\/ferdy.com\/wp-content\/uploads\/14-11440-two-coloumns-300x169.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/14-11440-two-coloumns-1024x576.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/14-11440-two-coloumns-768x432.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/14-11440-two-coloumns-1536x864.webp 1536w, https:\/\/ferdy.com\/wp-content\/uploads\/14-11440-two-coloumns-1200x675.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/14-11440-two-coloumns-600x338.webp 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>That said, I\u2019ll start by adding a new <strong>regular area<\/strong> with <strong>two columns<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/15-11444-text.webp\" alt=\"adding a text module on Divi\" class=\"wp-image-8256\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/15-11444-text.webp 1920w, https:\/\/ferdy.com\/wp-content\/uploads\/15-11444-text-300x169.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/15-11444-text-1024x576.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/15-11444-text-768x432.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/15-11444-text-1536x864.webp 1536w, https:\/\/ferdy.com\/wp-content\/uploads\/15-11444-text-1200x675.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/15-11444-text-600x338.webp 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>On the left, I\u2019ll add a <strong>text module<\/strong> for my message.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/16-11452-gallery.webp\" alt=\"adding a gallery module on Divi\" class=\"wp-image-8257\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/16-11452-gallery.webp 1920w, https:\/\/ferdy.com\/wp-content\/uploads\/16-11452-gallery-300x169.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/16-11452-gallery-1024x576.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/16-11452-gallery-768x432.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/16-11452-gallery-1536x864.webp 1536w, https:\/\/ferdy.com\/wp-content\/uploads\/16-11452-gallery-1200x675.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/16-11452-gallery-600x338.webp 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>On the right, I\u2019ll incorporate a <strong>gallery<\/strong> to showcase my work.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/17-11631-background-gradient.webp\" alt=\"adding a background gradient on Divi\" class=\"wp-image-8258\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/17-11631-background-gradient.webp 1920w, https:\/\/ferdy.com\/wp-content\/uploads\/17-11631-background-gradient-300x169.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/17-11631-background-gradient-1024x576.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/17-11631-background-gradient-768x432.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/17-11631-background-gradient-1536x864.webp 1536w, https:\/\/ferdy.com\/wp-content\/uploads\/17-11631-background-gradient-1200x675.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/17-11631-background-gradient-600x338.webp 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>I like gradient backgrounds. So, I\u2019ll apply a <strong>background gradient<\/strong> for a visually appealing look. You can adjust colors and gradient direction or mix it with images if necessary.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/18-12021-we-make-the-website-that.webp\" alt=\"change text color and size\" class=\"wp-image-8259\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/18-12021-we-make-the-website-that.webp 1920w, https:\/\/ferdy.com\/wp-content\/uploads\/18-12021-we-make-the-website-that-300x169.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/18-12021-we-make-the-website-that-1024x576.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/18-12021-we-make-the-website-that-768x432.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/18-12021-we-make-the-website-that-1536x864.webp 1536w, https:\/\/ferdy.com\/wp-content\/uploads\/18-12021-we-make-the-website-that-1200x675.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/18-12021-we-make-the-website-that-600x338.webp 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>Make your text stand out by adjusting its color and size.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/19-12311-slider.webp\" alt=\"set the image and count and use the slider layout for images on Divi\" class=\"wp-image-8260\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/19-12311-slider.webp 1920w, https:\/\/ferdy.com\/wp-content\/uploads\/19-12311-slider-300x169.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/19-12311-slider-1024x576.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/19-12311-slider-768x432.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/19-12311-slider-1536x864.webp 1536w, https:\/\/ferdy.com\/wp-content\/uploads\/19-12311-slider-1200x675.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/19-12311-slider-600x338.webp 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>For the gallery, set the <strong>image count to one<\/strong> and choose a <strong>slider<\/strong> layout for a dynamic display.<\/p>\n\n\n\n<p class=\"has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background has-background\"><strong>Pro tip:<\/strong> Name your images strategically for SEO. This helps in boosting your visibility on search engines. For example, if the image displays the best ATVs in 2023, name it something like \u2018best-ATVs-2023, &#8221; not \u2018IMG_001.\u201d Otherwise, you\u2019ll end up in the dungeon of millions of similar random images.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Create a business features section<\/strong><\/h2>\n\n\n\n<p>Moving on to the heart of your business presence online: the business features section. Here\u2019s where you unpack what your business does best.<\/p>\n\n\n\n<p>I&#8217;ll guide you through setting up a neat area, divided into columns, where each element tells a part of your business story.&nbsp;<\/p>\n\n\n\n<p>We&#8217;ll add text, an image gallery, and, most importantly, a background that aligns with your brand\u2019s theme. It&#8217;s all about creating a visual narrative that resonates with your audience.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Layout and content<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/20-14755-three-colounms.webp\" alt=\"insert a row section iwth three columns on Divi\" class=\"wp-image-8261\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/20-14755-three-colounms.webp 1920w, https:\/\/ferdy.com\/wp-content\/uploads\/20-14755-three-colounms-300x169.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/20-14755-three-colounms-1024x576.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/20-14755-three-colounms-768x432.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/20-14755-three-colounms-1536x864.webp 1536w, https:\/\/ferdy.com\/wp-content\/uploads\/20-14755-three-colounms-1200x675.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/20-14755-three-colounms-600x338.webp 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>For the business features section, I\u2019ll go for a <strong>regular area<\/strong> with <strong>three columns<\/strong> to display different business features. You can go for more columns if need be.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/21-14801-blurb.webp\" alt=\"addiing a blurb module on Divi\" class=\"wp-image-8262\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/21-14801-blurb.webp 1920w, https:\/\/ferdy.com\/wp-content\/uploads\/21-14801-blurb-300x169.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/21-14801-blurb-1024x576.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/21-14801-blurb-768x432.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/21-14801-blurb-1536x864.webp 1536w, https:\/\/ferdy.com\/wp-content\/uploads\/21-14801-blurb-1200x675.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/21-14801-blurb-600x338.webp 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>For each column, I prefer adding a <strong>blurb<\/strong> module. It\u2019s ideal for highlighting key business aspects like customer service, innovation, or speed.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/22-15132-burb-setting.webp\" alt=\"Blurb settings for modification\" class=\"wp-image-8265\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/22-15132-burb-setting.webp 1920w, https:\/\/ferdy.com\/wp-content\/uploads\/22-15132-burb-setting-300x169.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/22-15132-burb-setting-1024x576.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/22-15132-burb-setting-768x432.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/22-15132-burb-setting-1536x864.webp 1536w, https:\/\/ferdy.com\/wp-content\/uploads\/22-15132-burb-setting-1200x675.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/22-15132-burb-setting-600x338.webp 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>Next, I recommend customizing each blurb with relevant icons, titles, and descriptive text that aligns with your business values.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Visual enhancements<\/strong><\/h3>\n\n\n\n<p>The best part about using Divi is that everything is customizable. You\u2019re never short of options.&nbsp;<\/p>\n\n\n\n<p>I want to customize the look and feel of the business features section and I have a plethora of options.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/23-15510-background.webp\" alt=\"change background on Divi\" class=\"wp-image-8266\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/23-15510-background.webp 1920w, https:\/\/ferdy.com\/wp-content\/uploads\/23-15510-background-300x169.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/23-15510-background-1024x576.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/23-15510-background-768x432.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/23-15510-background-1536x864.webp 1536w, https:\/\/ferdy.com\/wp-content\/uploads\/23-15510-background-1200x675.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/23-15510-background-600x338.webp 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>Changing the background is always a good starting point. You can tweak the background to match it with other sections or contrast to make it prominent.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/24-15546-box-sadow.webp\" alt=\"Add animation and effects to blurb module on Divi\" class=\"wp-image-8267\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/24-15546-box-sadow.webp 1920w, https:\/\/ferdy.com\/wp-content\/uploads\/24-15546-box-sadow-300x169.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/24-15546-box-sadow-1024x576.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/24-15546-box-sadow-768x432.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/24-15546-box-sadow-1536x864.webp 1536w, https:\/\/ferdy.com\/wp-content\/uploads\/24-15546-box-sadow-1200x675.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/24-15546-box-sadow-600x338.webp 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>You can also add animations for dynamic effects and align content for a polished look. Just like I did.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Tell more about your business<\/strong><\/h2>\n\n\n\n<p>Now, let\u2019s dive deeper and get personal. This section is all about the essence of your business. It\u2019s where you share your story, your ethos, and what sets you apart.&nbsp;<\/p>\n\n\n\n<p>I like to use a combination of text and visuals here. For example, a gallery can visually represent different aspects of your business journey.<\/p>\n\n\n\n<p>For this section, I\u2019m going with the <strong>regular area<\/strong> with<strong> two columns<\/strong>.<\/p>\n\n\n\n<p>Here, you can add any module you choose, depending on what you want to display. But mostly, the gallery module works well.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/25-20240-vadd-gallery.webp\" alt=\"Add gallery module on Divi\" class=\"wp-image-8268\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/25-20240-vadd-gallery.webp 1920w, https:\/\/ferdy.com\/wp-content\/uploads\/25-20240-vadd-gallery-300x169.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/25-20240-vadd-gallery-1024x576.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/25-20240-vadd-gallery-768x432.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/25-20240-vadd-gallery-1536x864.webp 1536w, https:\/\/ferdy.com\/wp-content\/uploads\/25-20240-vadd-gallery-1200x675.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/25-20240-vadd-gallery-600x338.webp 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>Add a <strong>gallery<\/strong> module to display images representing your business ethos or achievements in one column. You can add your images or download stock images from platforms like <a href=\"http:\/\/ferdykorp.com\/istock\" target=\"_blank\" rel=\"noopener\"><strong>iStock<\/strong><\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/26-20920-text-the-atmosphere.webp\" alt=\"Awards section layout for a website using Divi\" class=\"wp-image-8269\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/26-20920-text-the-atmosphere.webp 1920w, https:\/\/ferdy.com\/wp-content\/uploads\/26-20920-text-the-atmosphere-300x169.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/26-20920-text-the-atmosphere-1024x576.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/26-20920-text-the-atmosphere-768x432.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/26-20920-text-the-atmosphere-1536x864.webp 1536w, https:\/\/ferdy.com\/wp-content\/uploads\/26-20920-text-the-atmosphere-1200x675.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/26-20920-text-the-atmosphere-600x338.webp 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>Use the adjacent column to provide detailed information about your company, using headings and body text for clarity.<\/p>\n\n\n\n<p>If you\u2019re an established business, you can add awards or recognitions your business has won in the past.<\/p>\n\n\n\n<p>To do this, create a new section with multiple columns, each showcasing an award or recognition your business has received.<\/p>\n\n\n\n<p>Here\u2019s how the one I created for this website looks:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/ferdy.com\/wp-content\/uploads\/27-21313-awards.webp\" alt=\"awards section on a WordPress website using Divi\" class=\"wp-image-8270\" srcset=\"https:\/\/ferdy.com\/wp-content\/uploads\/27-21313-awards.webp 1920w, https:\/\/ferdy.com\/wp-content\/uploads\/27-21313-awards-300x169.webp 300w, https:\/\/ferdy.com\/wp-content\/uploads\/27-21313-awards-1024x576.webp 1024w, https:\/\/ferdy.com\/wp-content\/uploads\/27-21313-awards-768x432.webp 768w, https:\/\/ferdy.com\/wp-content\/uploads\/27-21313-awards-1536x864.webp 1536w, https:\/\/ferdy.com\/wp-content\/uploads\/27-21313-awards-1200x675.webp 1200w, https:\/\/ferdy.com\/wp-content\/uploads\/27-21313-awards-600x338.webp 600w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n\n\n\n<p>Upload award images and adjust their sizes for uniformity.&nbsp;<\/p>\n\n\n\n<p>Ensure all images are visually cohesive.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Do more with Divi using advanced customization options<\/strong><\/h2>\n\n\n\n<p>Being proficient with Divi requires practice and operational knowledge about its customization options for confident adjustments on all platforms.<\/p>\n\n\n\n<p>Wondering how to achieve this? The answer lies in Divi&#8217;s advanced customization capabilities. I&#8217;ve distilled these into key elements that are crucial for your toolkit.&nbsp;<\/p>\n\n\n\n<p>So, let&#8217;s delve into these transformative features and unlock the true power of Divi.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>CSS customizations<\/strong><\/h3>\n\n\n\n<p>Transform your website into a standout masterpiece. That&#8217;s the power of the Divi theme, offering advanced customization options through CSS. Your web pages won&#8217;t just function smoothly &#8211; they&#8217;ll shine with a unique and captivating style.<\/p>\n\n\n\n<p>However, most of you probably don\u2019t know CSS. Luckily, I have compiled all the resources for CSS that you can apply on your website that the Divi theme does not yet offer.&nbsp;<\/p>\n\n\n\n<p>I tried to cover as many queries as possible. If I missed any, just do a quick Google search for ready-made CSS codes. They\u2019ll do the job.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/rnD48yyOuoXtAXrK3aPrwdTFXfQkFWV-h38chQla3HSA_eNo2s4tPuTP1JNtGuAbA1y4Sj0s58jppNCMlM3PGeSsEevQrAaT3nDyZz36D5Br-Lrq8L483NjG5rKZZbb-p4nt-XBNCdecJtvFso-JEFM\" alt=\"\"\/><\/figure>\n\n\n\n<p>To input CSS, exit the visual builder and navigate to the <strong>Theme Customizer<\/strong> on the WordPress toolbar at the top of your screen.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/EhIe40gXr1E0dwIDWdwWEnRoF5B3uGWzCTZIVUd6H3i4T3_60lRqlbWV07JtzjsE4obGPTHH9nFoTxzJKE3GQY3uta4eqXBlM8QGDgUkqpO694t-6YFYSaan2Jo7IIZcKkIeoTFrEyrsKLTiL-8glSQ\" alt=\"\"\/><\/figure>\n\n\n\n<p>Next, select <strong>Additional CSS<\/strong> on the left panel.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/bKRoThfp0XWqg14STo-iRzzF6CYaE5JAigw3zDPLLnrKW2v2XOlQGHa2lOSh-YwexS7xOSXFWaOgpXheC-fw4JDUD7hJ12aS-QuK5nwn3zEtDwjpIVXv69cEMts2xK7nR32-m4UOGRrsfOAkM0k6rGo\" alt=\"\"\/><\/figure>\n\n\n\n<p>Enter the copied code on the left CSS window. Copy the code. In my case, it will be \u201cpa-inline-buttons\u201d. Hit <strong>Publish<\/strong>.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/WKfN5FEJnxMhfUZMY8jhNcfNLlvXNdLJeQ261KHyMDMrhReMuoJMi93HEj8JcV58wbdZd6tuF3GJXOpz-4vfeRblYO-MsADsSknSb8y6re8J-T6HvovtMjIPwir-Ht0CT_N0s6Zy6cBe-SUoSUM7hXU\" alt=\"\"\/><\/figure>\n\n\n\n<p>Go to the Divi Visual Builder again. Open the element\u2019s (CTA buttons in my case) toolbar, and paste the assigned code in the <strong>CSS Class<\/strong> field.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Section dividers<\/strong><\/h3>\n\n\n\n<p>Ready to add a splash of creativity to your pages? Let me introduce you to the world of Section Dividers in Divi. These nifty tools let you inject fun patterns and unique separators into your page layouts with ease.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/9B12Le9It91Zh1oWhzxSGBip9_ThIUrE9P4NjT2Fd3vJXYbWSvWJi3trE5ucwtXWZiV3W7V4t_QjMo1EfWwSgcJ7f6BKYeFM251WDjBnj2VrMRG1NsuQMo0xzVfghQGgBBtP8Q1CvWjdcbPs91DW4Vs\" alt=\"\"\/><\/figure>\n\n\n\n<p>Head over to the toolbar of any section and play around with a variety of borders and shadows to craft that perfect, eye-catching look.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/aX9G9iiN5wTKmySKp-2olTMKTQvRpOnM7RsLda5TF3hdBRMC9YEVRVQ4CsqJxqttXRdzqQB1c-fGrK_1SSxEIv27xgZZZRK95m9hk76gHwQnjgCgYPC1Jm67LSKdiv_qSVSlDOKcMfXolpk5ABc916c\" alt=\"\"\/><\/figure>\n\n\n\n<p>Craving a touch of animation? The Divi theme has you covered. Use its built-in Custom CSS Inputs, compatible with the CSS Grid, to breathe life into your page with animations. They&#8217;re also great for fine-tuning your Column Layouts.<\/p>\n\n\n\n<p>And don&#8217;t worry if you&#8217;re not a CSS wizard. A simple Google search can lead you to a trove of ready-to-use CSS codes. Just copy, paste, and watch your design come alive!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Divi global sections<\/strong><\/h3>\n\n\n\n<p>Divi\u2019s global sections are a game-changer for maintaining consistency across your website. These are rows, modules, or sections that, once created, appear uniformly on any page they&#8217;re added to.&nbsp;<\/p>\n\n\n\n<p>The beauty lies in their interconnectedness. Any change you make in one global section automatically updates across all other pages where it&#8217;s used.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/UZhILnwVIrIxyM0gvQgW-Oe4dNgYrpUoHsgH64hs6iIfwFssKjTBkXxuAnmrT2Tq6ufs9DwkCCtUYIqqYMJ6Bz1kfMDsf3yp9hjeUUBmxCg9ngcLoNvPwMB2YtQnjrkNXqk285t8j6fq1hdYWc722g4\" alt=\"\"\/><\/figure>\n\n\n\n<p>Adding a global section is straightforward. Simply hover over the desired section and click the icon shown in the picture above. Remember to give your section a distinct name to avoid confusion with others.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Enhanced features in Divi Theme<\/strong><\/h2>\n\n\n\n<p>Divi also has other unique and additional features that will boost workflow, improve ranking on Google, and help market your product through Email and Affiliate marketing.&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Streamlining workflow with Divi AI<\/strong>&nbsp;<\/h3>\n\n\n\n<p>In my journey with Divi, particularly with the Divi Pro plan, I&#8217;ve unlocked the potential of Divi AI. This tool is revolutionary\u2014it&#8217;s like having a digital assistant that streamlines content creation.&nbsp;<\/p>\n\n\n\n<p>It&#8217;s not just about crafting words; Divi AI also assists in code development and image creation. What&#8217;s more fascinating is its ability to learn from your site&#8217;s data, crafting content that resonates with your audience.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>SEO optimization and email list building&nbsp;<\/strong><\/h3>\n\n\n\n<p>Divi also helps in SEO optimization. How does it work? With WordPress plugins such as <a href=\"http:\/\/ferdykorp.com\/rankmath\" target=\"_blank\" rel=\"noopener\"><strong>RankMath<\/strong><\/a>, Divi becomes SEO-friendly. This combination furnishes features like <strong>Dynamic Module Framework<\/strong> and <strong>Dynamic CSS<\/strong>, boosting your Google PageSpeed scores.<\/p>\n\n\n\n<p>In addition to this, another bonus of using Divi is email list building. A major part of growing an online business is having targeted subscriptions. The beauty of the <strong>Divi Email Optin<\/strong> module lies here.<\/p>\n\n\n\n<p>The module provides appealing signup forms and integration with the top 21 popular email software companies, making it easy to grow your business.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Final Words<\/strong>&nbsp;<\/h2>\n\n\n\n<p>The Divi Theme is not like any other WordPress theme. It&#8217;s a full-scale web design platform designed for ease and functionality. The visual editor enables you to craft your website without coding or technical skills.<\/p>\n\n\n\n<p>I&#8217;d choose Divi over other WordPress themes any day for its continually updated features and its intuitive, user-friendly interface.<\/p>\n\n\n\n<p>Try the Divi Visual Builder and share your experience in the comments below. If you have any questions, feel free to reach out on my Instagram.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ever wondered how to create a stunning website without getting tangled in complex coding? Enter the world of Divi and WordPress. To create a WordPress website using the Divi Theme: select a hosting service, install WordPress, and choose a domain. Next, leverage Divi&#8217;s Visual Builder for its drag-and-drop interface, advanced styling, and efficient design tools, [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":8424,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[38,19,6],"tags":[56,57,58],"class_list":["post-8204","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-wordpress-themes","category-wordpress-tutorials","tag-build-a-website-divi","tag-create-a-wordpress-website","tag-divi-theme-tutorial"],"uagb_featured_image_src":{"full":["https:\/\/ferdy.com\/wp-content\/uploads\/Divi-Theme-Article_Thumbnail.png",1280,720,false],"thumbnail":["https:\/\/ferdy.com\/wp-content\/uploads\/Divi-Theme-Article_Thumbnail-150x150.png",150,150,true],"medium":["https:\/\/ferdy.com\/wp-content\/uploads\/Divi-Theme-Article_Thumbnail-300x169.png",300,169,true],"medium_large":["https:\/\/ferdy.com\/wp-content\/uploads\/Divi-Theme-Article_Thumbnail-768x432.png",768,432,true],"large":["https:\/\/ferdy.com\/wp-content\/uploads\/Divi-Theme-Article_Thumbnail-1024x576.png",1024,576,true],"1536x1536":["https:\/\/ferdy.com\/wp-content\/uploads\/Divi-Theme-Article_Thumbnail.png",1280,720,false],"2048x2048":["https:\/\/ferdy.com\/wp-content\/uploads\/Divi-Theme-Article_Thumbnail.png",1280,720,false],"bricks_large_16x9":["https:\/\/ferdy.com\/wp-content\/uploads\/Divi-Theme-Article_Thumbnail-1200x675.png",1200,675,true],"bricks_large":["https:\/\/ferdy.com\/wp-content\/uploads\/Divi-Theme-Article_Thumbnail-1200x675.png",1200,675,true],"bricks_large_square":["https:\/\/ferdy.com\/wp-content\/uploads\/Divi-Theme-Article_Thumbnail-1200x720.png",1200,720,true],"bricks_medium":["https:\/\/ferdy.com\/wp-content\/uploads\/Divi-Theme-Article_Thumbnail-600x338.png",600,338,true],"bricks_medium_square":["https:\/\/ferdy.com\/wp-content\/uploads\/Divi-Theme-Article_Thumbnail-600x600.png",600,600,true],"gform-image-choice-sm":["https:\/\/ferdy.com\/wp-content\/uploads\/Divi-Theme-Article_Thumbnail.png",300,169,false],"gform-image-choice-md":["https:\/\/ferdy.com\/wp-content\/uploads\/Divi-Theme-Article_Thumbnail.png",400,225,false],"gform-image-choice-lg":["https:\/\/ferdy.com\/wp-content\/uploads\/Divi-Theme-Article_Thumbnail.png",600,338,false]},"uagb_author_info":{"display_name":"Ferdy","author_link":"https:\/\/ferdy.com\/author\/ferdykorp\/"},"uagb_comment_info":0,"uagb_excerpt":"Ever wondered how to create a stunning website without getting tangled in complex coding? Enter the world of Divi and WordPress. To create a WordPress website using the Divi Theme: select a hosting service, install WordPress, and choose a domain. Next, leverage Divi&#8217;s Visual Builder for its drag-and-drop interface, advanced styling, and efficient design tools,&hellip;","_links":{"self":[{"href":"https:\/\/ferdy.com\/wp-json\/wp\/v2\/posts\/8204","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ferdy.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ferdy.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ferdy.com\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/ferdy.com\/wp-json\/wp\/v2\/comments?post=8204"}],"version-history":[{"count":1,"href":"https:\/\/ferdy.com\/wp-json\/wp\/v2\/posts\/8204\/revisions"}],"predecessor-version":[{"id":11642,"href":"https:\/\/ferdy.com\/wp-json\/wp\/v2\/posts\/8204\/revisions\/11642"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ferdy.com\/wp-json\/wp\/v2\/media\/8424"}],"wp:attachment":[{"href":"https:\/\/ferdy.com\/wp-json\/wp\/v2\/media?parent=8204"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ferdy.com\/wp-json\/wp\/v2\/categories?post=8204"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ferdy.com\/wp-json\/wp\/v2\/tags?post=8204"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}