Thanks! If you haven’t already decided on which web host to choose, read the next section for our recommendation. Now our page looks like this: To add more rows, you can use the ‘+’ icon below your current row. Now click on the Setting icon. Most hosting companies, including Divi Hosting, have a one-click-WordPress installation. Check Out These Related Posts. If you’re still not sure whether you should use Divi or not, you might be looking at other page builders for your WordPress site. This is not the Divi Visual Builder. You can also save a particular module by following the same process. The magnifying glass icon next to it lets you check how your layout would appear if a user wants to have a zoom-in view of it. Click Choose File and select the Divi.zip file from your computer. Click Appearance > Themes to begin adding a theme. This means that unlike working with the traditional WordPress text editor, using Divi doesn’t involve constantly switching tabs to check your progress. There are hundreds of web hosting companies to choose from, so much so that it can be confusing where to start! To make things incredibly easy for Divi users, Divi Space has an awesome, totally free Divi child theme builder that is incredibly easy to use and build specifically for use in conjunction with the Divi theme. You will also get notified about the future giveaways! I have had to fix many sites that didn’t have a child theme and should have! By selecting the 2nd option, you can get started right away because everything is already built for you. With the right web hosting and a child theme in place, your Divi site will be set for success. For that, just select the Choose a Premade Layout option. So, if you’ve spent ages coding a custom header, footer or similar, and added these customizations to the parent theme files, you’ll find your website returning to the default Divi look as soon as the next update comes around. All of our server specifications are set up exactly for Divi websites, matching the server requirements as recommended by Elegant Themes. You’ll have 3 tabs here: In the Content tab, you can work on the text, add links to your text, change the background, and more. This will display the library of layouts that are pre-built for you: Depending on your website niche, you might want to look for layouts in a specific category. To complete the plugin set-up, follow the simple 10 step configuration process that is highlighted after installation. Required fields are marked *. We hope this guide has helped you get your first Divi website up and running. Video is a valuable form of content for social media. Divi Hosting packages start for as little as $15.00 per month, and include a free SSL certificate, daily backups, one-click site cloning for staging and development and much, much more. Success! Our hosting platform Divi Hosting takes care of that; equipping you with a web server developed to meet your Divi website’s needs perfectly. Typically, these premium features include caching, additional security measures and performance enhancements like free CDNs. If you want to create your design from scratch without using any pre-built layouts, select the 1st option. You can click on each of these icons to see if your layout is responsive enough. Once the changes are made, click on the green checkmark below to save your changes. You also have the option to add a category to it: Then click on the Save to Library option. Use your username and API to authenticate it: After that, you can start customizing your layout. To change the page settings, you need to click on the 3 purple dots at the bottom of your page. Just select the button module by clicking on it. In the following steps, we’ll show you how to use Divi to create your designs. We're glad you have chosen to leave a comment. Advanced Code Editing. These may be massive version updates, or simple bug fixes or similar. To do so, log in to your Elegant Themes account, select the Downloads tab from the menu on the left-hand side, navigate to the Divi product option and click Download. If you’re using Divi, the Divi theme itself is the parent theme, and the files you’ve just downloaded from Elegant Themes and installed on your WordPress website would be referred to as the parent theme files. Lisa-Robyn is a qualified copywriter and brand strategist from Cape Town, South Africa. Each host generally offers tiered packages of shared, VPS and dedicated solutions. The Divi footer makes use of sections and widgets in your WordPress Theme Customiser tool. use them together, it works well with any other WordPress theme of your choice. Step 1: Log in to your WP Admin panel. Divi is a registered trademark of Elegant Themes, Inc. Even though managed WordPress hosting options are great, the Divi theme itself needs a bit more server-level TLC to run optimally. Once you select the 1st option, you will be taken to a new page where you can select the number of rows you want to add. If you unzip the file and upload a folder, the WordPress theme installation will not work. Use our free child theme builder for your Divi website. For example, if you’d like to create a custom 404 error page for your Divi theme website, the best way to do so is by creating a child theme, adding in a 404.php file and entering the relevant code. Now that the theme is installed and activated, the front-end of your site will show the default Divi display. Plus, you can even add your own code if you want advanced styling options. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. One of the advantages of using this page builder is that it lets you create fully customized designs that are totally unique. Once an item has been added to the library, it will appear in the Add From Library tab when adding new Divi layouts, sections, rows, and modules. Your layout will now be saved for future use. You’ll see a new window popup on your screen. Once you’ve created your own layout, you can save them for future use. You can also choose how you want your page to appear for your users. Select hosting companies also offer a higher-tiered product of managed WordPress hosting. You can then select the layout you like. Posted on May 7, 2019 by John Hughes in Tips & Tricks. The file installation will run automatically. With this, you can bypass the process of manually setting up WordPress on your server and run an automatic installation. Know that it really is something worth getting to grips with as it’ll help your web design and development processes tremendously. Divi requires a self hosted WordPress installation. This will be saved in the Divi library. To edit the text, just double click on the text module and click on the settings icon. Parent themes such as the Divi theme, as built by development agencies such as Elegant Themes, will undergo regular updates. Want to use the Divi Builder plugin to build your website layouts? Then, we’ll look at an easy method to duplicate a WordPress post or page regardless of what editor it was made with. Managed WordPress hosting offers a more robust solution for web developers looking to relieve some of the technical aspects of running a website. The Advanced tab lets you add your own CSS ID and Classes, as well as custom CSS. Compare the best email marketing services. Remember, there is no need to unzip the Divi.zip file. Next is the Design tab. Upload the plugin files to the /wp-content/plugins/plugin-name directory, or install the plugin through the WordPress plugins screen directly. It can be an audio clip, a call-to-action, buttons, contact forms, and more. Stay up to date with the latest Divi Space news, updates, special offers and more! Fill the form below. To do so, you can select a category on your left or use the search field to look for a category. If you are using WordPress as a membership system, then adding a login form directly to a page can be quite useful (instead of redirecting people to the branded WordPress login form that lives outside your website’s theme). Next, click the Choose File button and select the Divi.zip file from your Downloads folder. Founded by Michelle Nunan, a full time Divi educator and child theme developer, Divi Soup aims to bring useful tutorials, tips and tricks to both new and experienced Divi users. After each optimization you make, you can see if your score improves. Please feel free to share your comments or questions below. Explore Divi, The Most Popular WordPress Theme In The World And The Ultimate Page Builder Learn About Divi. Do NOT use keywords in the name field. Receive notifications about our new blog posts. You’ll see a small popup window appear with different customization options. During your initial Divi / WordPress set-up procedure, simply download and install Yoast SEO from the “ADD NEW” plugins tab in your website’s back-end. Explore Divi, The Most Popular WordPress Theme In The World And The Ultimate Page Builder Learn About Divi. Now that the rows and modules are added, it’s time for you to customize them. This option is for advanced users who want to add their own code. Depending on your needs, select the rows you want to add to your page. From my experience WordPress & many plugins do not play very well with Microsoft IIS servers. This is a great point, I am going to add something to the post about this and link to our posts about the importance of child themes and how to create one. This will ask you to authenticate the plugin. You’ll see other options too, like opening the image link in a new tab, open the image link in a lightbox, among others. This may all seem a bit roundabout, but it’s for good measure. Best Woocommerce Child Theme for Divi, How to Setup Coming Soon And Maintenance Pages for Divi, Add An “Add To Cart” Button To A WooCommerce Shop Module, How to Choose the Best Divi Logo Height for Your Website, Copying Theme Files to your Child Theme from the WP dashboard without FTP, How to select the best hosting for WordPress and Divi websites (plus our top recommendation for hosting for Divi websites), How to install Divi on a WordPress website, Why you should be using a child theme for Divi. If you’re brand new to Divi, or, even if you’ve been using Divi for a while and haven’t been using child themes, we recommend that you give these articles a read through. Your server and website have an important relationship, so make sure you set the right foundation for your site. Let's have a personal and meaningful conversation. Gutenberg has a content copy feature built-in. For the images, select the module by clicking on it. This will expand the settings bar with several options. Splice Video Editor: An Overview and Review. Step 2: Building Your First Page With Divi Builder. Let’s select the three-row option. Divi Chat Recap: Episode 68 - What to Look for When Choosing Website Hosting, How to Create a WooCommerce Store in Under an Hour With Divi, Save these links if you want to be better at CSS / Divi, Theme Showcase! This will show you a preview of the layout with 2 different options. If you don’t already have web hosting for WordPress and Divi, we’ve dropped our suggestions a bit further down in the post. The next icon offers the desktop view of your layout, followed by a tablet and a mobile screen view. yourdomainname/admin Step 2: Click on “Media” from the WordPress admin menu. I personally love this theme for its simplicity and interactive interface. The next time you want to use this layout, you can select it and add your text right away. © 2015 - 2020 Divi Space (An Aspen Grove Studios Company), How to Setup and Install Divi for WordPress, Now, head over to your WordPress website, log in, and from the Dashboard, navigate to the. We've compiled all the essential checklist items for your next WordPress website launch into one handy ebook. Before building your website, it is best practice to create and install a Divi child theme. Understanding the ins and outs of child themes can be a bit confusing in the beginning, but over time, this will become second nature. Divi will display all the layouts that match your requirements. Once the image is added, you can add a link to the image by scrolling down. Beginners guide on how to make a website. It offers great flexibility in terms of inline text and responsive editing. Step 3: Upload your pdf to the Media Library, by dragging the file from your folders and dropping into the library, or click on “Add New” and select and upload from your folders […] Here we have added text, image, and button modules in three different rows. To get started with Divi Builder, you first need to install and activate the plugin on your website. How to add WordPress Lightbox in Divi. The best way to use these online speed testing tools for you Divi WordPress site is to run a test on a page first before you do any optimizations. However, for the sake of this tutorial, we’ll select the 1st option, Start Building, which will allow us to build everything from scratch. Use Divi Builder to edit WordPress page 5 Comments / WordPress tutorials / By Kelly Drewett Elegant Themes released the Divi theme in 2014, and have since created the Divi Builder plugin which is a drag and drop page builder, great for creating user friendly columns within a post or page. To learn more about Divi, read our detailed review here. Once the Divi.zip file is uploaded, click Install Now. The Divi Builder plugin is a WordPress page builder that lets you create, customize, and edit your website layouts without writing a single line of code. With the Divi theme up and running, you could start building your first Divi website, however, there is an important step that you should take before diving in. WordPress works great on Apache servers. Installing a theme is one of the most important steps in building a WordPress website. Then hit the green checkmark to save your settings. You can use the search box to find a module if you have any specific options in mind. Once you’ve purchased a domain, configured your server, and installed WordPress, you’re ready to install the Divi theme package on your website.