Learning how to use Divi occurs when you play with it. When you play, you take risks and discover features that you would never have known had you not taken those risks. Elegant Themes is very proactive in helping you learn how to use Divi so that you can not only be proficient, but have fun while using it.
Below are the topics of discussion in this article. Feel you free to click on any one of the following links to skip to that section.
- You Won’t Learn Until You Play With It
- Learn How To Use Divi in 10 Minutes!
- I Challenge You to Replicate the Divi Blog How To Tutorials
Children learn a LOT of things on the playground. They learn how strong their arms really are when traversing the monkey bars while their feet dangle 2 feet off of the ground. They learn how fast they can run playing tag. They learn how strong their legs are when playing a game of kickball.
If we did not play, we would not learn what is possible. The same is true with Divi. In fact, if you did not play with Divi, you would not even try to see what is possible.
If you do not play with Divi, you will not learn what is possible with Divi
When you play with Divi, you tend to explore and try things you would not otherwise try. You create things you would not have tried creating before. Creativity has a way of expressing the limitless possibilities.
Playing with Divi is like a teenager taking a walk in the woods for the first time. It’s adventurous, fun and exciting. Only after you walk out of the woods into familiar territory do you appreciate what you have just seen.
You can read all about Divi, but until you have actually created something with it, you will not really understand or appreciate what it can do for you.
People read books or sit in classrooms to “learn”. But you can ask any graduate from any University, and they will tell you that school was nothing like the “real world”. Similarly, reading a book about something is not the same as experiencing what you are reading about. You can read about what it feels like to ride a roller coaster, but until you have actually ridden a roller coaster, you have not really understood the experience. The same is true with Divi.
One of the best known secrets of Elegant Themes is hidden in plain sight. In fact, it’s so obvious it gets ignored. I love that you can ‘Try before you buy‘ with Divi. Really, you can. There is nothing to download, and you can actually “play” with it right now.
Once you do so, scroll down just a bit and you’ll see the following image. On that page, click on the big green button, (as shown below).
This will literally take you to a page where the Divi Builder launches and walks you through step-by-step of a guided tour offering you an overview of Divi and how to use it.
You can try Divi out without having download anything, simply click on this link to go to the Divi landing page. On that page is a pulsating “Try it for FREE” button. When you click it, the Divi Builder launches and you can then either choose, “Start Building“, or “Take the Tour“. If you click, “Take the Tour“, you are escorted through an interactive tour of how Divi works. I’m not talking about some rinky-dink weekend carnival ride. Think Disney at its finest.
In the tour, you are guided by a green pulsating highlighted area on the screen, signifying that you have to click on the pulsating area to move onto the next step in the tour. For your convenience, should you decide to take the tour later, I have copied the entire text of tour for you (without the animated screenshots), to give you an overview of all that is covered.
Load a New Layout
Loading pre-made layouts is a great way to jump-start your new page. The Divi Builder comes with dozens of layouts to choose from, and you can find lots of great free layouts online too. You can save your favorite layouts to the Divi Library and load them on new pages or share them with the community. Click the highlighted button to open the layouts menu and select a pre-made layout.
Choose a Layout Pack
Here you can see a list of pre-made layout packs that ship with the Divi Builder. You can also access layouts that you have saved to your Divi Library. Choose the “Divi Builder Demo” layout pack to see the layouts it includes.
Choose a Layout to Start With
Now you can see more details about the layout pack as well as a list of the layouts it includes. Click “Use Layout” to apply the layout to your page.
Add a New Section
Now that your pre-made layout has been loaded, we can start adding new content to the page. The Divi Builder organizes content using Sections, Rows and Modules. Sections are the largest organizational element. Click the highlighted button to add a new section to the page.
Choose a Section Type
The Divi Builder has three different section types. Regular sections conform to the standard width of your page layout. Specialty Sections can be used to create advanced sidebar layouts. Full width sections extend the full width of your page and can be used with full width modules. Click the “Regular” section button to add a new section to your page.
Add a New Row of Columns
Every section contains one or more Rows of columns. You can choose between various column layouts for each row you add to your page. Click the highlighted three-column layout to add a new row to your section.
Add a Module to the Column
Within each column you can add one or more Modules. A module is basic content element. The Divi Builder comes with over 40 different content elements to choose from, such as Images, Videos, Text, and Buttons. Click the highlighted Blurb button to add a new Blurb module to the first column in your row.
Adjust Your Module Settings
Each Module comes with various settings. These settings are separated into three tabs: Content, Design and Advanced. Inside the content tab you can modify the module content elements, such as text and images. If you need more control over the appearance of your module, head over to the Design tab. For more advanced modifications, such as custom CSS and HTML attributes, explore the Advanced tab. Try adjusting the Title of your blurb by clicking into the highlighted field.
Accept or Discard Your Changes
Whenever you make changes in the Divi Builder, these changes can be Undone, Redone, Discarded or Accepted. Now that you have adjusted your module’s title, you can click the red discard button to cancel these changes, or your can click the green button to accept them.
Hover to Access Action Buttons
Whenever you hover over a Section, Row or Module in the Divi Builder, action buttons will appear. These buttons can be used to move, modify, duplicate or delete your content. Click the highlighted “duplicate” icon to duplicate the blurb module that you just added to the page.
Drag and Drop Content
Every item on the page can be dragged and dropped to new locations. Using your mouse, click the highlighted move icon and hold down the mouse button. While holding down the mouse button, move your cursor over to the empty column and then release your mouse button to drop the module into the new column.
Access Right Click Options
In addition to hover actions, additional options can be accessed by Right Clicking or CMD + Clicking on any module, row or section. Using the right-click menu shown, click the highlighted “Copy Module” button to copy the blurb module that you just moved.
Paste Your Copied Module
Now that you have copied a module using the Right Click menu, you can Right Click in a new location to paste that module. Using the right-click options shown, click the “Paste Module” button to paste the module you just copied into the empty column.
Access Your Row Options
Every Row and Section has its own set of options that can be used to adjust the item’s appearance. You can adjust its width, padding, background and more. To access a row’s settings, hover over the row and click the highlighted options button.
Adjust Your Row Settings
Just like Modules, Rows come with a lot of settings that are separated into the Content, Design and Advanced tabs. Click the highlighted button to add a new background color to your row.
Accept Your Changes
Click the highlighted green check mark button to accept your changes.
Open Your Page Settings
While using the Divi Builder, you can access your page settings by toggling the page settings bar at the bottom of your screen. Click the highlighted button to reveal your page settings.
Preview Your Page on Mobile
While editing your page, it’s easy to see what your design will look like on mobile devices. You can also make adjustments to your module, row and section settings for each mobile break point. Click the highlighted “Tablet” icon to enter Tablet preview mode.
Switch Back to Desktop Mode
You can switch back and forth between each preview mode freely while editing your page. Now that we have previewed our page on Tablet, let’s switch back to Desktop preview mode by clicking the highlighted button.
Access Your Editing History
Every change you make while editing your page is saved in your editing history. You can navigate backwards and forwards through time to any point during your current editing session, as well as undo and redo recent changes. Click the highlighted History button to access your editing history.
Save Your Page
When you are all done, you can save your changes by clicking the Save button inside of your page settings bar. You can also press CTRL + S at any time to save your changes. Click the highlighted Save button to save your changes. Don’t worry, the page you were working on before starting this tour will not be lost!
It’s been said that you really have not learned something until you reproduce what you know.
It’s been said that you really have not learned something until you reproduce what you know.
The Staff at Elegant Themes are very disciplined. Each week, they release at least one well written blog entry. I have written extensively about their blog entries in an article I’ve written entitled, Elegant Themes is committed to helping you learn Divi. The blog entries offered are not your run-of-the-mill blog entries. They are in-depth, instruction-filled educational posts, and if studied, you can take that understanding and apply it to the next site that you build. One way to get the most out of these blog entries is to replicate what they show you.
Let’s say you had two candidates before you that were interviewing for a job as a web-designer. The first candidate proudly presented his resume noting that he had attended University for 4 years, and graduated with bachelors degree in Web Design, but had never built anything during those 4 years. The second candidate had no formal education, and was straight out of High School, however, he did build 1 website each week for the past 4 years. Which candidate would you hire?
Of course you would have hired the kid straight out of High School. Experience always trumps knowledge. This is why is it essential not to just read articles on Divi, you have to build what you learn.
Sign up to receive a notification via e-mail every time a new blog entry is posted so that you can learn by doing. When you can reproduce what you have been taught, only then have you truly learned.