{"id":173462,"date":"2018-07-20T01:00:44","date_gmt":"2018-07-20T01:00:44","guid":{"rendered":"https:\/\/premium.wpmudev.org\/blog\/?p=173462"},"modified":"2018-08-20T18:43:19","modified_gmt":"2018-08-20T18:43:19","slug":"everything-you-need-to-know-to-get-started-with-divi","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/everything-you-need-to-know-to-get-started-with-divi\/","title":{"rendered":"Everything you need to know to get started with Divi"},"content":{"rendered":"<p>In April of 2018, we announced a pivot to our business model. We decided to <a href=\"https:\/\/wpmudev.com\/blog\/goodbye-upfront-hello-everybody\/\" target=\"_blank\">say goodbye to Upfront<\/a>, our unique solution to the problem of visual web design within WordPress. We did this to narrow our focus. To work exclusively on the aspect of our business that has always been our strongest suit: helping developers create and manage WordPress websites.<\/p>\n<p>A major part of this pivot has been to embrace the remaining themes and plugins at the forefront of the WordPress design space &#8211; making sure our community understands them and that our products and services work seamlessly with them. It\u2019s to that end that we\u2019ve created this guide to the Divi theme.<\/p>\n<p><a href=\"https:\/\/www.elegantthemes.com\/gallery\/divi\/\" target=\"_blank\">Divi<\/a> by Elegant Themes is, by all accounts, the most widely used premium theme and visual page builder in WordPress. We\u2019ve been happy Divi users ourselves for many years &#8211; in fact, both the Edublogs and CampusPress websites, which are sister services to WPMU DEV, are running Divi child themes, as are sites that we\u2019ve built for many of our customers.<\/p>\n<p>We chose Divi because it gives our team the flexibility to make content changes and updates to pages with complex layouts on the fly. And for those using it on their own, Divi requires no coding skills whatsoever to create custom websites.<\/p>\n<p>In this Ultimate Guide to Divi, we\u2019ll look at some of the features that we like most and some examples of Divi in the wild.<\/p>\n<h2>Why Choose Divi?<\/h2>\n<p>There are a lot of choices for WordPress users looking for a customizable theme or page builder; there\u2019s Beaver Builder, Elementor, Avada, and more. So what makes Divi unique?<\/p>\n<h3>Key Features<\/h3>\n<ul>\n<li>A front-end visual builder, built with ReactJS<\/li>\n<li>Responsive design settings and draggable widths and heights<\/li>\n<li>1495+ professionally designed pre-made layouts<\/li>\n<li>Ability to save and re-use anything with the Divi Library<\/li>\n<li>Full export of designs and content (to share or sell!)<\/li>\n<li>User role management<\/li>\n<li>Simple split A\/B testing built right in<\/li>\n<\/ul>\n<h3>A Massive, Passionate Community<\/h3>\n<p>One measure of any product or service is the community behind it, and Divi has a big one.<\/p>\n<p>There are multiple Facebook groups with over 100,000 members combined, WordCamp Meetups, and the <a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/divi-nation-meetup-network\" rel=\"noopener\" target=\"_blank\">Divi Nation Network<\/a>. And beyond that, there is an entire ecosystem of add-ons, plugins, child themes, and more for Divi built by 3rd parties.<\/p>\n<p>The product has consistently been improved over the years, and every week, two new <a href=\"https:\/\/www.elegantthemes.com\/layouts\/\" rel=\"noopener\" target=\"_blank\">professionally designed layout packs<\/a> are released into the Divi Library for all Divi users to download and use for free.<\/p>\n<p>In short, Divi is a solid choice, packed with features, and a company with Elegant Themes and community around it that keeps it growing and improving, with no signs of slowing down.<\/p>\n<h2>Getting Started With Divi<\/h2>\n<p>All said and done, Divi is just a WordPress theme. Like any theme, you download the theme files and upload them to your WordPress site to activate.<\/p>\n<p>Divi is a premium theme and will cost you $89 for one year of updates, or $249 for lifetime access &#8211; which can be used on unlimited sites. I personally have been a member since 2009 &#8211; which just floors me to think about how fast time is flying by (and how valuable that lifetime access really is).<\/p>\n<p>We won\u2019t re-create an entire guide to downloading and installing Divi, you can find detailed videos and step-by-step directions in their <a href=\"https:\/\/www.elegantthemes.com\/documentation\/divi\/install-divi\/\" target=\"_blank\">docs section here<\/a>.<\/p>\n<p>Once activated, you\u2019ll see the \u2018Divi Builder\u2019 options when editing or creating any new page and post. You\u2019ll want to take a bit of time to familiarize yourself with the builder and how it works.<\/p>\n<h3>3 Key Words You\u2019ll Need To Know<\/h3>\n<p><strong>Section<\/strong> &#8211; The first thing you choose from when designing layouts with Divi are sections. A page or post will be made up of one or more sections, and you can choose from full-width or standard sections.<\/p>\n<p><strong>Row<\/strong> &#8211; Each section is made up of one or more rows, and you can choose rows with up to 4 columns.<\/p>\n<p><strong>Module<\/strong> &#8211; Each row is made up of one or more modules, which is sometimes also referred to as \u2018elements.\u2019 There are modules for just about anything you can think of, including header images, sliders, buttons, menus, sidebars, and videos.<\/p>\n<p>There is a much more detailed overview of these tools and how it all works in the docs for the <a href=\"https:\/\/elegantthemes.com\/documentation\/divi\/visual-builder\/\" target=\"_blank\">Divi visual editor here<\/a>.<\/p>\n<h2>Getting The Most From Divi<\/h2>\n<h3>Front-end vs. Back-end Editor<\/h3>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2018\/07\/divi-builder-page-editor-wordpress.png\" alt=\"Divi Builder Page Editor in WordPress\" width=\"600\" height=\"423\" \/><figcaption class=\"wp-caption-text\">Create page layouts in the backend of WordPress.<\/figcaption><\/figure>\n<\/div>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2018\/07\/divi-builder-content-layout-options-front-end.png\" alt=\"Divi Builder front-end content layout editor\" width=\"600\" height=\"329\" \/><figcaption class=\"wp-caption-text\">Create a new layout, choose from a template, or clone one on the front-end of your site.<\/figcaption><\/figure>\n<\/div>\n<p>One of the more impressive features of Divi is that it has mastered the \u2018square-space\u2019 like front-end editing experience &#8211; in Divi speak, it is called the \u2018Visual Builder.\u2019 It works really well once you learn a few of the quirks and what the different symbols and icons mean. You can drag-and-drop elements, create columns and rows, and edit content to see exactly how it will look on the live site.<\/p>\n<p>To be honest, when using Divi, I personally still default to the back-end editor experience, but that may just be because I was using Divi for years before the front-end editor even existed. There are times when the front-end is easier, and others, like when creating a more complex page from scratch, when the back-end works better for me. I\u2019m excited to try out the brand new page creation process on the front-end with future projects, which may change how I feel about this too.<\/p>\n<p>There is a pretty slick demo where you can play with the front-end editor in action <a href=\"https:\/\/www.elegantthemesdemo.com\/?et_fb=1\" rel=\"noopener\" target=\"_blank\">here<\/a>.<\/p>\n<h3>Using The Customizer<\/h3>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2018\/07\/divi-theme-customizer-blog-post-settings.png\" alt=\"Divi Theme Customizer in WordPress\" width=\"600\" height=\"404\" \/><figcaption class=\"wp-caption-text\">No code, no problem.<\/figcaption><\/figure>\n<\/div>\n<p>For when you want to make design changes across the entire site, Divi works seamlessly with the standard WordPress customizer. You can upload logos, choose fonts and colors, and select from a myriad of settings and options.<\/p>\n<p>The customizer includes settings for the header, footer, and every single \u2018module\u2019 such as blog posts, sliders, dividers, and more.<\/p>\n<h3>Using The Library<\/h3>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2018\/07\/divi-theme-page-builder-save-to-library.png\" alt=\"Divi Page Editor save to library view\" width=\"600\" height=\"355\" \/><figcaption class=\"wp-caption-text\">Build a library of page layouts.<\/figcaption><\/figure>\n<\/div>\n<p>A major time-saver is the \u2018library\u2019 function that is part of Divi. You can save sections, rows, and modules to a library to reuse on other pages and posts. For example, if you want to start or end all posts with a standard set of text, you can add that text module to the library. Or, if you are creating multiple landing pages that all have similar layouts or elements, those can be added and reused as well.<\/p>\n<p>Even more impressive is that any library item can be, with just one click, designated as a \u2018global\u2019 item. Global items mean that when you update that element on one page of your site, it will automatically be updated everywhere that the library item appears. With a little bit of planning and thought, these library items can be incredibly useful.<\/p>\n<h3>Mobile And Responsive Design<\/h3>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2018\/07\/divi-theme-builder-advanced-settings-mobile.png\" alt=\"advanced settings display options\" width=\"600\" height=\"343\" \/><figcaption class=\"wp-caption-text\">Easily disable modules on specific devices in advanced settings.<\/figcaption><\/figure>\n<\/div>\n<p>Out-of-the-box, Divi is responsive, such that it will resize and reorganize all modules, rows, and columns without you needing to do anything.<\/p>\n<p>But, there is an option to hide or show any element based on the screen size of the visitor. For example, you can show a different menu to those on desktops versus mobile devices. Or, you can hide that giant and slow-to-load image slider in the header for mobile users, giving them a better browsing experience.<\/p>\n<p>You can also preview the view of each page on different-sized devices from within the Divi builders, which comes in handy.<\/p>\n<h3>Doing A\/B Testing<\/h3>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption alignnone\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2018\/07\/divi-theme-builder-split-testing.png\" alt=\"Split Testing in Divi Theme\" width=\"600\" height=\"344\" \/><figcaption class=\"wp-caption-text\">You know you want to test multiple layouts!<\/figcaption><\/figure>\n<\/div>\n<p>Having trouble deciding which call to action you should use or want to test other elements of your site\u2019s design? Divi makes it so that you don\u2019t need to invest in more complicated A\/B testing tools, it can be done right from within the Divi editor.<\/p>\n<p>In Divi, it is called <a href=\"https:\/\/elegantthemes.com\/gallery\/divi\/divi-leads\/\" target=\"_blank\">Divi Leads<\/a> which allows for \u2018split testing\u2019 unlimited versions at once. Simply choose your variations, and you are off and running.<\/p>\n<h2>Child Theme Or Na?<\/h2>\n<p>In our experience, when it comes to using Divi for clients of CampusPress or our Enterprise hosting services, we almost always make a child theme. This is because we can then control the branding and design aspects of the site and keep end-users from breaking these guidelines. We can also implement page templates for layouts, and be a little more pixel perfect with things like menu items, breadcrumbs, typography, and the like.<\/p>\n<p>But the reality is that Divi can be incredibly flexible on its own &#8211; no child theme needed. If you are building a site where you\u2019ll be the only one with admin access, it could be perfect for you right out of the box. There are also loads of layout packs that you can download and customize too, so that you don\u2019t have to start from scratch and so that no two Divi sites will look the same.<\/p>\n<p><strong>More resources on child themes:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/divi-child-theme\" rel=\"noopener\" target=\"_blank\">Divi\u2019s take<\/a> on building child themes<\/li>\n<li>Lots of Divi child theme resources <a href=\"https:\/\/www.elegantthemes.com\/blog\/?s=divi+child+theme&amp;x=0&amp;y=0\" rel=\"noopener\" target=\"_blank\">from the Divi blog<\/a><\/li>\n<\/ul>\n<p>The showcase that follows includes examples of sites using Divi that are built with and without child themes which should also help provide you with a good idea about what you can achieve whichever route you choose.<\/p>\n<h2>Showcase<\/h2>\n<div  class=\"wpdui-pic-regular  \"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2018\/07\/campuspress.png\" alt=\"CampusPress Home page\" width=\"600\" height=\"316\" \/><\/div>\n<p><a href=\"https:\/\/campuspress.com\" target=\"_blank\">campuspress.com<\/a> &#8211; A child theme of Divi, we built elements into the library to reuse on different landing pages.<\/p>\n<div  class=\"wpdui-pic-regular  \"><\/div>\n<div  class=\"wpdui-pic-regular  \"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2018\/07\/canvaspennstate.png\" alt=\"Canvas Learning Management System Home\" width=\"600\" height=\"323\" \/><\/div><br \/>\n<a href=\"https:\/\/canvas.psu.edu\" target=\"_blank\">canvas.psu.edu<\/a> &#8211; Visited by 10s of thousands of students and faculty at Penn State university every day. Conforms with university branding guidelines.<\/p>\n<div  class=\"wpdui-pic-regular  \"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2018\/07\/recubre.png\" alt=\"Recubre Home\" width=\"600\" height=\"323\" \/><\/div>\n<p><a href=\"https:\/\/recubre.com.mx\" target=\"_blank\">recubre.com.mx<\/a> &#8211; A WPMU DEV member\u2019s site, an example of Divi working great for eCommerce sites too.<\/p>\n<div  class=\"wpdui-pic-regular  \"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2018\/07\/round-rock-conty-isd.png\" alt=\"Round Rock ISD Home\" width=\"600\" height=\"354\" \/><\/div>\n<p><a href=\"https:\/\/roundrockisd.org\" target=\"_blank\">roundrockisd.org<\/a> &#8211; A child theme, which we re-created the same look and layout from a theme using Visual Composer. Changing to Divi improved performance and reliability considerably.<\/p>\n<div  class=\"wpdui-pic-regular  \"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2018\/07\/williamsoncountysymphonyorchestra.png\" alt=\"Williamson County Smphony Orchestra Home\" width=\"600\" height=\"342\" \/><\/div>\n<p><a href=\"https:\/\/wilcosymphony.org\" target=\"_blank\">wilcosymphony.org<\/a> &#8211; A site that I built over a weekend for a local non-profit.<\/p>\n<div  class=\"wpdui-pic-regular  \"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600 size-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2018\/07\/wpgoby.png\" alt=\"WPGoby Home\" width=\"600\" height=\"324\" \/><\/div>\n<p><a href=\"https:\/\/wpgoby.com\" target=\"_blank\">wpgoby.com<\/a> &#8211; A WordPress agency and member of WPMU DEV.<\/p>\n<div  class=\"wpdui-pic-regular  \"><\/div>\n<h2>My Divi Wishlist<\/h2>\n<p>While Divi checks off just about every box and meets most needs, there are a few items on my Divi wishlist worth sharing.<\/p>\n<p>First up, it will seem simple and there are Divi extensions by 3rd parties that allow for this, but I\u2019ve frequently wanted a quick way to put a site title in the header and not use a logo. In many cases, existing logos may not fit well in headers or the quality just isn\u2019t good enough to use. A blurry or misplaced-looking logo can distract users from the content on the site.<\/p>\n<p>More importantly, we\u2019d love to see the Divi team incorporate the features of our Divi Accessibility Plugin into the Divi product itself, and work towards ensuring Divi can more easily be used in a way that will meet and exceed accessibility standards. We can limit the use of some elements and get close, but there are some issues that need to be improved.<\/p>\n<p>And lastly, I\u2019m sure the Divi team has a plan, and we haven\u2019t discussed it at all with them, but I want to know how Divi will play nice with the new \u2018Gutenberg\u2019 editor experience once it is part of WordPress core.<\/p>\n<h2>Wrapping up<\/h2>\n<p>If you&#8217;ve been looking for a new theme and you don&#8217;t want to spend a bunch of time messing with custom code, check out some of the links above, and get building with Divi today.<\/p>\n<p>Also, if you&#8217;re using Divi &#8212; be sure to optimize it with our plugins. We have an article all about <a href=\"https:\/\/wpmudev.com\/blog\/optimize-divi-wordpress-smush-hummingbird\/\" target=\"_blank\" rel=\"noopener\">optimizing Divi with Smush and Hummingbird<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In April of 2018, we announced a pivot to our business model. We decided to say goodbye to Upfront, our unique solution to the problem of visual web design within WordPress. We did this to narrow our focus. To work exclusively on the aspect of our business that has always been our strongest suit: helping [&hellip;]<\/p>\n","protected":false},"author":4178,"featured_media":173543,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[34],"tags":[684,9805,193],"tutorials_categories":[],"class_list":["post-173462","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-themes","tag-child-themes","tag-page-builders","tag-premium-themes"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/173462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/4178"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=173462"}],"version-history":[{"count":14,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/173462\/revisions"}],"predecessor-version":[{"id":196556,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/173462\/revisions\/196556"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/173543"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=173462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=173462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=173462"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=173462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}