Creating a Learning Management (LMS) Website with Divi

I love taking courses online. There is something about starting a well designed, well-organized e-course with some great content. If done well, these e-courses can keep you motivated with a sense of accomplishment. But learning from a great e-course and creating one are two totally different experiences. And in my experience, creating a Learning Managment or E-Course website can be an overwhelming process.

In this post, I’m hoping to take the edge off of the intimidation of building your own e-course by showing you how to use Divi’s premade Learning Management Layout pack to create a fully functional e-course website.

Before we get into building, here is a breakdown of what we will accomplish together:

      1. Create a Lesson Page using pieces of the existing layout.
      2. Create a Course Menu to be displayed on each lesson page that shows all the lessons for the course.
      3. Use the WP Complete Plugin to give users ability to keep track of their progress for each course.
      4. Use the Restrict Content Pro plugin to setup both Free and Paid membership levels.
      5. Learn how to quickly design the membership pages to match the website using elements from existing layout.
      and more…

And, to satisfy your curiosity, here is a sneak peak of the lesson page you will be creating with the complete button and the progress bar above the course menu in the sidebar…

lesson page

But first, let’s get things set up.

Creating a Learning Management (LMS) Website with Divi

Subscribe To Our Youtube Channel

Setting Everything Up

#1 – Install Divi

Make sure you have the most updated version of Divi installed. And, it is always good to have a child theme active as well.

#2 – Upload The Layout Pack to Your Divi Library

We will be using Divi’s Learning Management (LMS) Layout Pack. Download the layout pack, unzip it, and install the coding-school_All.json file to your Divi Library. Then create nine new pages by using the each of their corresponding layouts.

#3 – Install and Activate the Restrict Content Pro Plugin

This is the plugin we will be using for the membership functionality of the e-course site. We will use this to set up a free and premium (paid) subscription to the course.

#4 – Install and Activate the WP Complete Pro Plugin

This plugin will be used to keep members (or students) aware of their progress as they complete each lesson of each course. It has cool circle and bar graph visuals to show progress as well as a handy check mark next to each completed lesson the navigation menu.

Once you are all set up, you are ready to build your e-course.

Let’s get started.

Rename the Course Page

Your layout pack comes with a courses page layout.

courses page

Each of the courses listed on that layout should (if you plan on teaching all those courses) link to a specific course page which uses the course page layout.

course page

Note: Notice that I replaced the button in the header of the course page above with a video module. That way I don’t have to redirect to a different page to show the preview of the course. Just an idea.

As you can see, for this example, the course page layout is using the UX Design course, so go ahead and edit the page and change the Course Page name from “Course” to “UX Design”. And update your permalink as well.

change name of course page

Building the Lesson Page

Your new course page, now named “UX Design”, is broken down by chapters (you can also think of them as lessons) with a short description of each. Each of these chapters/lessons will need to redirect to its own lesson page. To build this lesson page, we are going to use the course page layout and make some adjustments.

The first chapter/lesson listed in the UX Design course page is called “Chapter 1 : An Introduction to the Basics”. Let’s build our lesson page for this one.

Go ahead and add a new page and enter “Chapter 1 : An Introduction to the Basics” for the title.

Since this lesson is a child page of the UX Design course page, click the parent dropdown inside the Page Attributes box in the right sidebar and select UX Design as the parent.

Next click to use the Divi Builder, click Add From Library, and select the Course Layout.

add new lesson page

Save Draft

Adjust the Header Layout

Now click to use the Visual Builder to make some adjustments to the page layout. First, let’s change the layout of our header in the top section a bit. From the visual builder, delete the image module in the right column and the green button at the bottom of the first column.

erase image and button

Next click to edit the settings of the top text module in the first column and change the h1 header text to “Chapter 1 : An Introduction to the Basics”.

update title

Then change the column structure of the row to one column instead of two.

change row

Now your header should look like this.

changed header

Change Blurb Content

In the specialty section below, edit the settings of the first blurb in the left content section and update the following:

Content Tab

Title: Part 1
Content: [This will become your content for the course; I’m leaving the mock content in there for now]
Use Icon: YES
Icon: select right arrow icon

update blurb content

Note: the icon color will be taken from the Theme Accent Color set in the theme customizer so make sure you update the color there with a color that matches the site.

Save Settings

Now that you have one blurb module created, we can use this as a template for breaking up each part of the lesson on the page. Go ahead and duplicate the module you just created two times (or however many parts you want) and update each with a different title (i.e. Part 2, Part 3, ect…).

Then delete the other blurbs that we won’t be needing any more.

Now your layout should look like this.

updated layout

Adding the Sidebar Widget

Add a Sidebar Module under the button module in the right sidebar of the specialty section. And, for now, just leave the default content settings that pulls the sidebar widget area content. We will eventually change that as soon as we create a custom widget area that includes the menu for the course.

Under the content tab, add a white background to your module.

To have your sidebar module match the design of the page, update the settings in the design tab as follows:

Custom Margin: -80px Top
Custom Padding: 30px Top, 40px Right, 30px Bottom, 40px Left
Box Shadow Horizontal Position: 0px
Box Shadwo Vertical Position: 0px
Box Shadow Blur Strength: 60px
Box Shadow Spread Strength: 0px
Shadow Color: rgba(71,74,182,0.12)

Animation Style: Zoom
Animation Direction: Up
Animation Intensity: 20%
Animation Starting Opacity: 100%

Save Settings

Note: It’s a good idea to go ahead and make this a global module so that you only have to make adjustments to one module for future updates. To do this select add to library, name it “lesson menu sidebar module”, select to make it a Global Module, and click Save.

Finally, delete the blurb module with the instructor and the “Full Profile” button module. Your page should look like this:

sidebar module design

Save Page

Now that we have one of our lesson pages built, let’s save it to our library so that we can use it for other lessons. From the visual builder, click the “Add to Library” button in the botton menu, enter “Lesson Page Layout” for the name of the template, and then save it.

add to library

Go ahead and repeat the steps above to add two more lesson pages. Only this time, instead of using the course page layout, use the new layout you created called “lesson page layout”.

Once you are done you should have three lesson pages created with the following titles:

1. Chapter 1 : An Introduction to the Basics
2. Chapter 2 : Information Architecture
3. Chapter 3 : Responsive Design

three lessons

Creating the Course Menu

Now that you have your lessons created, we can build our course menu. From the WordPress dashboard, go to Appearance > Menus.

From the Menus page, complete the following steps:

1. Select “Create a New Menu”
2. Name it “UX Design”
3. Select the three lessons pages/chapters to the menu that you just created.
4. Click Add to Menu
5. Save the menu

created course menu

Create the Custom Widget Area

To add the menu to our lesson page, we first need to create a custom widget area for it. From the WordPress Dashboard, go to Appearance > Widgets. Under the existing widget areas, locate the box used to create a new widget area. Enter the name “UX Design” and click “Create”. Now refresh the page. You should now see the new custom “UX Design” widget area. Drag the Custom Menu widget over inside of the “UX Design” widget area. In the Custom Menu widget, select the menu “UX Design”. Then click Save.

create course menu

Update Lesson Page Sidebar Module with New Widget Area

Now that you have your widget area created with your course menu, go back to the course pages you created and update the sidebar module to select the widget area “UX Design”. Now your menu should appear in the sidebar.

update sidebar widget

Note: if you made the sidebar module global, you will only have to make this adjustment once to this module, the other two will automatically be updated.

At this point, we have a pretty good base for creating our courses and our lessons, so let’s improve our UX by incorporating course progression tracking.

Add Course Progression Tracking

Adding course progression tracking to your e-course website is a great way to boost the user experience, engagement, and motivation when taking your course. To show progress for each of our courses, I’m going to use the WP Complete Pro plugin. If you haven’t already make sure you install and activate the plugin.

Once the plugin is activated, from your WordPress Dashboard, go to Settings > WPComplete. This will take you to the plugin settings.

Update the following settings:

Student Role Type: Subscriber
Lesson Content Type: Page Types (since we are building our lessons with pages instead of posts)
Uncheck the option to “Automatically add complete button to enabled posts & pages for me.” (we are going to manually add those buttons with a shortcode.)
Mark Complete Button Color: #7377fc
Graph Settings Primary Color: #7377fc

Then click Save Changes.

wpcomplete settings

Enable Complete Buttons to Lesson Pages

Now that we have WP Complete setup. Let’s add our “complete” buttons to our lesson pages.

Go to the first lesson page we created titled “Chapter 1: Introduction to the Basics” and click to edit the page. From the default page editor, find the WPComplete box at the bottom of the page. Inside the box, click to the option to “Enable Complete button”. This will tell the plugin that you want to track this page for the user. Next, in the input box right after it says “This is a part of:” enter “UX Design” which is the name for the course you want to track. This is how you group the lessons under each course. For example, if you have three lessons and on each of those lesson pages you select “UX Design” as the course, when a user completes a page by clicking the complete button, the plugin is able to record that the user has completed 33% (1 out of 3 lessons) of that course. If you have multiple courses, you can simple enter a new course name in the box and it will start a new course group.

enable button

Add Complete Buttons to Lesson Pages

To add the “Complete” button to your lesson page, deploy the visual builder on the same lesson page you were just editing.

Add a text module under the last blurb module at the bottom of the page. In the Text Settings, enter the following shortcode in the content box:

[wpc_button text=”Click me to complete!” completed_text=”YAY! Completed”]

Note: You can change the text and completed text displayed on the button by modifying the text in the shortcode.

Save Settings

add button

This shortcode creates a button that allows the user to click on it and record the lesson as complete.

complete button

Notice that when you click on the button to complete the lesson, the menu item in the sidebar for the corresponding lesson will fade slightly and display a check mark on the right of it.

button gif

Go ahead and save that text module you just created to your library with the name “Complete Button”. Now you can use that library item to enter the same module on all of your pages as needed.

Note: You may want to go ahead and save a new version of your lesson page layout to your library with you complete button included so that you don’t have to keep adding it as a secondary item when building future lesson pages.

Add Progress Bar Graph to your Sidebar

The WPComplete plugin also allows you to display graphs that show the user their progress for a specific course. We are going to add a bar graph to show the progress of the UX Design course in the sidebar of our lessons.

Remember how we created a custom widget area for our UX Design course to display a course menu in the lesson page sidebar? Well now we are going to add a progress bar graph right above our course menu. That way the user can see their progress in a cool visual display.

To add the bar graph, go to you WordPress dashboard and navigate to Appearence > Widgets. Then toggle open the “UX Design” custom widget you created earlier and drag an HTML widget into the widget area on top of the custom menu widget that is currently there. In the HTML content box, enter the following shortcode:

[wpc_progress_bar course=”UX Design”]

add bar graph

This shortcode will display the progress bar graph for the specific course “UX Design”. This course name corresponds to what you put in the WPComplete box option next to “This is a part of:”. If you have another course in the future, just enter the new course name in the place of “UX Design” when adding the shortcode for that course.

Note: For a complete list of shortcodes available for this plugin, go to there shortcodes cheatsheet.

Now go to “Chapter 1: Introduction to the Basics” to see how it looks.

Click on the Complete button at the bottom of the page. Now check out the sidebar to see what changed. The bar graph now shows that you have completed 33% of the course. And the menu item for the lesson page now shows as faded with a check mark on the right to show that that lesson has been completed.

bar graph

Pretty cool huh?

Let’s review what we have so far:

1. We have a new lesson page template to serve as our go to template for lessons going forward
2. We have a system for creating a custom menu for each course.
3. We have a system for setting up custom widget areas for each course to display custom menu for that specific course on the lesson page.
4. We have the ability to add a complete button to our lesson pages that when clicked, represents the progress in a bar graph and in the corresponding menu link.

The final stage of turning our site into a functioning e-course is to integrate membership levels in order to restrict our content to paying customers.

Building the Membership Pages

If you haven’t done so already, install and activate the Restrict Content Pro plugin. Once installed, the plugin will automatically create 5 pages for handling the membership process.

5 pages

If you look at each page in the default page editor, you will see that the only thing added to the content for each page is a shortcode. For example, if you go to the Register page, you will see that the only thing in the content editor is the shortcode “[register_form]” which will display the registration form.

shortcode

Since all you need to display the content for each of these auto-generated pages are the shortcodes, you can easily build a layout for these pages using the Divi Builder. For example, if you would like a quick and easy way to customize your register page, go to your Courses Page and deploy the visual builder. Save the top section of the layout to your library with the name “e-course page header” (or something like that).

save course header

Then click on one of the blurbs that show the course and save that module to your library with the name “e-course blurb content box” (or something like that).

add blurb content module

Now go to your Register page, copy the shortcode to your clipboard (highlight shortcode and click ctrl + c). Then deploy the Divi Builder, then the visual builder. Add your new saved section called “e-course page header” from your library.

add section

Update the text module that contains the title to say “Register” instead of “Courses”.

rename register

Then click to add a module from your library under the current modules in the section. Select the “e-course blurb content box” module you just saved to the library.

add blurb

Then update the settings as follows:

Under the content tab…

Erase Title
Content: enter the shortcode [register_form] that you have saved to your clipboard by pressing ctrl + v.
Erase the image url

Save Settings

custom blurb

Note: That was the quick and easy way. I used a blurb module because that was the quickest way to bring over the style of the module. You will probably want to use a text module instead.

Now look at your registration page in an incognito browser.

final register page

You still need to customize the design of the form (not going to do that on this tutorial) but that can easily be done with some inspection and custom CSS.

You can follow that same process to update all of 5 of the membership pages generated by the plugin. To view which pages are being used to handle membership, go to the WordPress dashboard and navigation to Restrict > Settings and you will see a list of all the pages that are being used under the General tab.

Adding a FREE Subscription Level

Adding a FREE subscription level to your e-course is a great way to capture leads, add them to a email marketing campaign, and upsell them on a premium membership. To add a FREE Subscription level, go to the WordPress Dashboard and navigate to Restrict > Subscription Levels. Then fill in the settings to create your FREE membership. Here is an example of what to enter for a free subscription level:

Name: FREE
Description: This is a FREE subscription to Coding School.
User Role: Subscriber

Leave the other options to their default setting.

Then click Add Membership Level

add free

Adding a Premium Subscription Level

A Premium Membership is usually where you can charge money to have access to higher level content that can’t be access with a free membership. Like a FREE membership, the user would have to register on the registration form. The only difference is that they will be directed to a payment form to purchase the subscription. If the user is already a FREE member, they can upgrade to a Premium Subscription using their current registration info and then paying for the upgrade.

To add a Premiumn Subscription Level, go to the WordPress Dashboard and navigate to Restrict > Subscription Levels. Then fill in the settings to create your Premium subscription. Here is an example of what to enter for a Premium subscription Level:

Name: Premium
Description: This is a premium subscription to Coding School
Duration: 1 year
Price: 29
User Role: Subscriber

add premium

Restrict Lessons Based on Subscription Level

Now that we have our Free and Premium Subscription Levels created. We can choose to restrict pages/posts or even specific content based on the users subscription level. The plugin makes this process really simple. Let’s go a head and restrict access to the first lesson we created to a FREE subscription. To do that, go to edit the Lesson Page titled “Chapter 1: Introduction to the Basics”. Notice the “Restrict this content” box at the top of the page editor. In the box you have a dropdown input box that allows you to select who should have access to the content. You are going to select Members of subscription level(s). Once selected, you will see more options appear. Select the first option that says “Members of any subscription level(s). That’s because we want members that will have the premium subscription to also have access to this content as well.

add free subscription

Note: This setting will hide the entire page from non-subscribed users. If you want to hide certain pieces of content on the page and make it available only to Free or Premium subscribers you can use shortcodes to wrap the content you want hidden. Since we are using the divi builder, using the shortcodes to wrap content may be challenging but one thing you could consider doing is wrapping only the content in the actual content boxes of the blurbs with shortcodes and leaving the titles visible.

For the next lesson titled “Chapter 2: Information Architecture”, we are going to restrict the page to Premium subscribers only. To do that, go to edit the page and in the “Restrict this content” box at the top of the page editor, select Members of subscription level(s). Then select the option “Members of specific subscription levels. Then select “Premium”. Now only people with a Premium subscription will be able to access that page.

Save your changes by updating the page.

add premium subscription

Change Your Redirect Page for Restricted Content

When a user tries to access the content that is restricted, you can redirect the user to a certain page. Since we are going to want the user to register to gain access to the course, it makes sense that we redirect the user to the register page. To do that go to the WordPress dashboard and navigate to Restrict > Settings and click the Misc tab. Find the Redirect Page option and select the Register page from the dropdown input box.

add redirect

Save Options

Now everytime a non-subscribed user tries to access restricted pages, they will automatically be redirected to the Register page.

You can test this real quick. Save the page and open the page in an incognito browser to see what a user sees when they aren’t registered yet.

Note: If you want you can create an additional register page for this use case so that you can include a more specific call to action like “Sorry, you currently don’t have access to this content, please register below.” with the register form below that.

Adding your payment gateway

At this point you will want to make sure your payment gateway is integrated with Restrict Content Pro. You can do this by navigating to Restrict > Settings and clicking the Payments tab. There you can choose which gateways you want to enable as well as enter the info needed to integrate the gateway. You have nine options to choose from including Stripe and Paypal.

payment

I won’t go into the detail involved in setting those up, but my advice is to make sure and test your payment gateways thoroughly to make sure they work. You don’t want to lose money.

Customizing your email Notifications

Restrict Content Pro allows you to customize a notification email both for the new member and the admin whenever a new member registers. Take advantage of this option by including a good call to action in the email body that encourages the user to start the course with a link to the first lesson. You can find the email setting by going to Restrict > Settings and click the Emails tab.

emails

Optional Email Marketing Integration

You may have a Mailchimp or Aweber account that you want to add members to when they register. You can do that by with one of the many add-ons available with the Restrict Content Pro plugin. Simply navigate to Restrict > Add-ons and find the email platform you want.

add ons

What Now?

Now that you have setting up your e-course website, you will still have to finish setting up all of your content for each page, adding url’s to the buttons, many other tweaks. But the foundation has been set. Hopefully this gets you set up with a platform you can easily build upon.

Final Thoughts

One could argue that with all of the great tools out there in the world of WordPress, you can get an online course up and running pretty easily. But then there is the challenge of design. Getting those sites to look decent isn’t easy if design is not your forte. Fortunately, the pre-made Divi layouts like the “Learning Management Layout Pack” offer a great solution to the design problem. The layout is functional and beautiful right out of the box.

But then there is the problem of finding the right plugins to transform your beautiful layout into a functional online course. There are many great membership plugins and Learning Management Systems out there with varying degrees of cost and complexity. The goal of this post was to get you up and running with a great looking e-course site with simple membership at a low cost. For those of you hoping to create this using free plugins, sorry to disappoint. I’m all about the free plugins, but I thought it best to use the Pro versions for this tutorial because the end result is worth every penny in my opinion.

I look forward to hearing from you in the comments

Cheers!

The post Creating a Learning Management (LMS) Website with Divi appeared first on Elegant Themes Blog.

Divi Plugin Highlight: Caldera Forms Style Customizer for Divi and Extra

Caldera Forms does a great job associated with blending in with the styling of your website. What if you wanted in order to style it using the familiar design tools of the Divi and Additional Theme Customizer? You can do this with a third-party plugin called Caldera Forms Style Customizer for Divi and Extra.

Caldera Forms could be styled using the standard Theme Customizer options, however, these options style the particular theme. This means if you change the style of your form’s text you also change the style of your website’s body text. If a person wanted to style your forms separately from your content you would normally have to style by hand with CSS. Caldera Forms Style Customizer for Divi and Extra solves that problem by adding styling features to the Theme Customizer.

In this plugin highlight we’ll take a look at the Caldera Forms Style Customizer for Divi and Extra plugin and see simply how easy it is to make use of. This third-party plugin can be bought through Caldera Forms. As the title suggests, it works with both Divi and Extra.

Installation and Activation

Upload and activate the plugin because normal. There are no settings in order to adjust. The features are ready to use.

Customizing a Form

I’ve placed the default contact form into a page with all of the arrears styling. I’ll make all of my changes to this form one at a time. Then we’ll see an instance or two.

The new styling features are usually added to the Theme Customizer. Open the Theme Customizer (or Module Customizer – they both work) and click on Caldera Forms Style Customizer .

This adds twenty new customization tabs to customize every aspect of the form including text, buttons, fields, toggle switches, date picker, breadcrumbs, and so on. Here’s a look at each establishing.

Text Fields

Text Fields modifications the color of the text, placeholder, and border, as well as edge width, border radius, and single range height of the fields.

Text Fields Hover

Text Fields Hover adjustments the text, field, and border shades.

Text Fields Focus

Text Areas Focus changes the color of the text, background, and border from the field that has focus. In this example area in the center has hover yet the field with the dark background has focus.

Dropdown Choose

Dropdown Select customizes the background, text, arrow, and border colors. You can even adjust the border width and radius.

Dropdown Select Hover

Dropdown Select Hover controls the particular color of the background, text, antelope, and border on hover.

Checkboxes and Radio Buttons

Checkboxes and Stereo Buttons adjusts the color of the selected items of your checkboxes plus radio buttons.

Toggle Changes

Toggle Switches adjusts the colors of the background, font, and border of both the unselected and selected switch independently. You can also adjust the border width and radius of both switches together.

Toggle Switches Float

Toggle Switches Hover adjusts the colors from the background, font, and border of the particular selected and non-selected switch independently. This is the non-selected switch.

The blue one is the selected switch.

Submit Button

Submit Button controls the background, font, and border colors, as well as the edge radius, button width and its location. You can also adjust the typeface size and letter spacing. A text transform feature changes the case of the text. Choose lower case, top case, capital, initial, or inherit.

Submit Button Hover

Submit Button Hover controls the hover colors for the background, font, and border.

Reset Button

Reset Button controls the setting, typeface, and border colors. You can also adjust the size of the typeface and letter spacing, button width, key position, border width, and border radius. This one also has text change.

Reset Button Hover

Reset Key Hover adjusts the button colors meant for the background, text, and border.

Other Buttons

Caldera has several additional forms of buttons. Other Buttons controls everything except Submit and Reset. Adjust the colors for the font, border, plus background, and adjust the border thickness and radius. In this example I’ve created Previous and then buttons.

Other Buttons Hover

Other Buttons Hover regulates the hover colors for the fonts, border, and background.

Date Picker

Date Picker includes regular and float colors within the same tab. Adapt the colors for the font and background. In this example I’m hanging over the 10 and the 12 will be selected.

Upload File Checklist

Upload File List controls the colors to get the background and text within the particular list of files that are published.

Section Break

Section Break handles the section break’s color, border size, and top and bottom margins.

Breadcrumbs

Breadcrumbs lets you choose the colors for the fonts for both the particular active page and other links, the separator, background, and border. Adjust the particular border width and radius.

Success Alert

Success Alert adjusts the font, background, and border colors, as well as the border radius and width. It also changes the box height.

Miscellaneous

Assorted provides you with control over the colors intended for the required icon, fields in error, description text, bank card color, and credit card icon position. The description text includes the font size, letter spacing, and text transform options. I’ve chosen uppercase.

Illustrations

I created a resume upload form (actually this is constructed into Caldera Forms, but I did click on the button to select it), and set it as being a modal. First We want to style the page along with the Divi Builder.

I’ve added a background image and selected colors that contrast rather than blend with the history.

This particular one uses exactly the same settings with the different background. This time I didn’t use the form in a modal. Rather than having a white background, the particular form fields are put directly over the particular image.

Import Export

It’s simple to import or export your Caldera Forms styles that you’ve created in the customizer. In Dashboard go to Caldera Forms , Styles – Import / Foreign trade . This imports and exports the particular styles as a JSON file, permitting you to easily use your Caldera Type styles on any website that utilizes this plugin. All of your design will be overwritten with the styling of the imported file.

License and Support

The plugin can be purchased being a one year license with renewals costing fifty percent the price. The license allows the plugin to be used on 1 website and includes twelve months of assistance and updates.

Final Ideas

It found this plugin easy to use. The Customizer settings are intuitive. They’re labeled well plus arranged in a way that can make sense. I had no trouble finding any of the settings I wished. I would like to see any easy way to get back to the default settings all at as soon as or make global adjustments (such as increasing or decreasing the overall darkness of all the colors). That’s most likely not realistic, however it sounds interesting.

It’s impossible to style person forms with the Customizer settings. Most forms use this same styling as being a global setting and will have in order to be styled on an individual basis using the styling features of Caldera. This particular is the nature of the Theme Customizer. If you’re interested in design your Caldera Forms on a worldwide basis there’s no easier way to do it than to use Caldera Forms Style Customizer for Divi and Extra.

We desire to hear from you. Maybe you have attempted the Caldera Forms Style Customizer pertaining to Divi and Extra plugin? Let all of us know that which you think about it in the comments.

Featured Image via Irina Strelnikova / shutterstock. com

The post Divi Plugin Highlight: Caldera Forms Style Customizer for Divi and Extra appeared first on Elegant Themes Blog.

How to Create a Scrolling Fashion Catalogue with Divi

In this post, we’ll be showing you how you can create a scrolling fashion catalogue. Using this method will help you connect with your audience as you would by handing them a paper catalogue. Creating an online scrolling fashion catalogue may help increase the results you get from the catalogue. By including direct links to shop items, for example, the buying process will be enhanced as well.

Result

The result we’ll show you how to create, step by step, looks like this on desktop:

fashion catalogue

And like this on phone and tablet:

fashion catalogue

How to Create a Scrolling Fashion Catalogue with Divi

Subscribe To Our Youtube Channel

Add Transparent Shapes to Images with Photoshop

The first thing we’ll be showing you is how to add a transparent part to an image with Photoshop. There’s a free alternative for Photoshop called  GimpShop, but in this part of the tutorial, we’ll be using Photoshop only. We’ll need two images with each two different shapes; one for desktop and one for mobile and tablet. In this part, we’ll simply show you how to add a transparent shape to the image. Afterwards, you can make all the images you need yourself.

Open Photoshop

Start by opening Photoshop on your computer.

Open Image

Next, open the first image you’d like to edit. The method remains the same for all three images you’ll be using throughout this tutorial. That’s why we’ll only explain it once.

fashion catalogue

Double-Click on Image & Create Layer

Once you’ve opened the image you want to edit, double-click on the image and create a new layer for it.

fashion catalogue

Add Another Layer

Continue by adding another empty layer on top of it.

fashion catalogue

Select Layer 1 & Polygonal Lasso Tool

Select Layer 1 and start using the Polygonal Lasso Tool.

fashion catalogue

Make a Shape

While having the Polygonal Lasso Tool activated, go ahead and create the transparent shape within your image.

fashion catalogue

Make Layer 1 Invisible & Press Delete While Having Selected Layer 0

Once you’ve selected the area you want to become transparent, go ahead make Layer 1 invisible, select Layer 0 again and press the Delete button on your keyboard.

fashion catalogue

Select Rectangular Marquee Tool & Click Somewhere on Image

Once you’ve done that, select the Rectangular Marquee Tool and click somewhere on your image.

fashion catalogue

Save Image as PNG

Lastly, you’ll need to save the image as a PNG and repeat the same process for all four images you’ll use throughout the layout.

Primary Menu Bar Settings

The Primary Menu Bar settings we need for the layout we’re creating are the following:

  • Hide Logo Image: Enable
  • Menu Height: 30
  • Text Size: 15
  • Letter Spacing: -1
  • Font: Lato
  • Font Style: Bold & Uppercase
  • Text Color: #FFFFFF
  • Active Link Color: #FFFFFF
  • Background Color: rgba(255,255,255,0)
  • Dropdown Menu Background Color: rgba(255,255,255,0)

fashion catalogue

Edition Intro

Once you’ve modified the Primary Menu Bar, you can go ahead and add a new page, use the Divi Builder and switch over to Visual Builder.

Add New Section

Within that page, start by adding a standard section.

Section Background Color

The background of that color needs to be ‘#d6d6d6’.

fashion catalogue

Custom Padding

Move on to the Design tab of that section. Within the Spacing subcategory, add ’24px’ to the top padding and 0px to the bottom one.

fashion catalogue

Add One-Column Row

Once that’s done, you can go ahead and add a one-column row to the section.

Sizing

Go to the Design tab and modify the Sizing subcategory:

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: 1

fashion catalogue

Custom Padding

Scroll down and add ‘0px’ to the top padding of the row.

fashion catalogue

First Text Module

Once that’s done, you can add a Text Module to the row. After having entered the text you want to appear, go to the Design tab and make sure the following changes apply to the Text subcategory:

  • Text Font: Old Standard TT
  • Font Style: Uppercase
  • Text Font Size: 72 (Desktop), 41 (Tablet), 29 (Phone)
  • Text Color: #000000
  • Text Letter Spacing: 11px
  • Text Line Height: 1em
  • Text Orientation: Center

fashion catalogue

Open the Spacing subcategory and add ’30px’ to the top and bottom padding.fashion catalogue

Divider Module

Right below the Text Module, add a Divider Module and enable the ‘Show Divider’ option.

fashion catalogue

Go to the Design tab and choose ‘#FFFFFF’ as the divider color.fashion catalogue

Next, choose ‘Solid’ as the Divider Style and ‘Top’ as the Divider Position within the Styles subcategory.

fashion catalogue

Then, open the Sizing subcategory and make the following settings apply:

  • Divider Weight: 10px
  • Height: 23px
  • Width: 100%
    fashion catalogue

Second Text Module

Right below the Divider Module, add another Text Module. Choose whatever icon you want within your Character Map (Windows) or Character Palette (Mac) and place it in the Content tab. For this example, we’ve used the following symbol: ‘↓’. Then, go to the Design tab and make the following settings apply:

  • Text Font Size: 42px
  • Text Color: #000000
  • Text Orientation: Center

fashion catalogue

Desktop Fashion Catalogue (New Section)

Now, add another standard section. This section will contain two rows that’ll display a different part of the catalogue on desktop.

Section Settings

Background Color

Use ‘#FFFFFF’ as the background color of this section.

fashion catalogue

Custom Padding

Then, go to the Design tab and add ’15px’ to the top padding.

fashion catalogue

First Row

Column Structure

Once you’ve made the changes to the setting, add a row with the following column structure:

fashion catalogue

Background Color

Open the row settings and add ‘rgba(255,255,255,0.14)’ as the background color.

fashion catalogue

Background Image

Add one of the images you’ve made in the Photoshop part of this post and use ‘Hue’ as the Background Image Blend.

fashion catalogue

Sizing

Lastly, make the following changes to the Sizing subcategory:

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

First Text Module

Once you’ve completed the row settings, add a Text Module to the second column. Use the following settings for the Text subcategory:

  • Text Font: Bitter
  • Text Font Size: 63px
  • Text Color: #000000
  • Text Orientation: Center

fashion catalogue

Divider Module

Right below the first Text Module, add a Divider Module and enable the ‘Show Divider’ option.

fashion catalogue

Move on to the Design tab and use ‘#000000’ as the divider color.

fashion catalogue

Within the Styles subcategory, use ‘Solid’ as the Divider Style and ‘Top’ as the Divider Position.

fashion catalogue

Scroll down the same tab and make the following settings apply to the Sizing subcategory:

  • Divider Weight: 3px
  • Height: 23px
  • Width: 57%
  • Module Alignment: Left

fashion catalogue

Lastly, add a top margin of ’30px’ and a bottom margin of ’50px’.

fashion catalogue

Second Text Module

Once the Divider is in place, go ahead and add the second Text Module that’ll contain a title. First of all, use ‘#000000’ as its background color in the Content tab.

Then, move on to the Design tab and make the following settings apply to the Text subcategory:

  • Text Font: Bitter
  • Text Font Size: 92px
  • Text Color: #000000
  • Text Line Height: 1em
  • Text Orientation: Left

fashion catalogue

Open the Border subcategory and use the following border:

  • Use Border: Yes
  • Border Color: #000000
  • Border Width: 3px
  • Border Style: Solid

fashion catalogue

Furthermore, use a Width of ‘77%’ and a left Module Alignment.

fashion catalogue

Lastly, add ’15px’ to the top, right, bottom and left padding of the Text Module.

fashion catalogue

Third Text Module

Add another Text Module right below the previous one. This one will represent the description. Go to the Design tab and use the following settings for the Text Subcategory:

  • Text Font: Lato
  • Text Font Size: 16px
  • Text Color: #000000
  • Text Line Height: 1em
  • Text Orientation: Left

fashion catalogue

Open the Sizing subcategory, use ‘70%’ for the Width and select the left Module Alignment.

fashion catalogue

Lastly, add a top margin of ’20px’.fashion catalogue

Fifth Text Module

The fifth Text Module serves as a minimalistic button. Within the Content tab, use the ‘→’ symbol + the text and put a link behind it.

fashion catalogue

Then, go to the Design tab. Use the following settings for the Text subcategory:

  • Text Font: Bitter
  • Text Font Size: 23px
  • Text color: #000000
  • Text Line Height: 1em
  • Text Orientation: Left

fashion catalogue

Scroll down the same tab until you come across the Sizing subcategory. Within that subcategory, use a Width of ‘49%’ and a right Module Alignment.

fashion catalogue

Lastly, add a top margin of ’80px’.

fashion catalogue

Sixth Text Module

The sixth and the last module we’ll be needing is almost the same as the previous one. Use the ‘→’ + text and put a link behind it.

fashion catalogue

The settings for the Text Subcategory are the following:

  • Text Font: Bitter
  • Text Font Size: 23px
  • Text Color: #e02b20
  • Text Line Height: 1em
  • Text Orientation: Left

fashion catalogue

Change the Width to ‘39%’ and use the right Module Alignment as well.

fashion catalogue

Second Row

Background Color

Open the row settings and add ‘rgba(255,255,255,0.14)’ as the background color.

fashion catalogue

Background Image

Add one of the images you’ve made in the Photoshop part of this post and use ‘Hue’ as the Background Image Blend.

fashion catalogue

Column Structure

The second row you need to add to the standard section is just the opposite of the previous one.

fashion catalogue

Clone Modules

The modules we’ve used in the previous row are the same ones we need for this row so go ahead, clone them and place them in the first column instead of the second one. We’ll need to make some alignment changes in the next part of this post.

First Text Module Modifications

Open the first Text Module and add a top margin of ’20px’.

fashion catalogue

Divider Module Modifications

Then, open the Divider Module and change the Module Alignment within the Sizing subcategory to right.

fashion catalogue

Second Text Module Modifications

Set the Text Orientation of the second Text Module to right.

fashion catalogue

And choose a right Module Alignment in the Sizing subcategory as well.

fashion catalogue

Third Text Module Modifications

The third Text Module will need a right Text Orientation too.

fashion catalogue

And a right Module Alignment as well.

fashion catalogue

Fifth Text Module Modifications

The only thing you’ll have to do for the fifth Text Module is change the Width into ‘82%’.

fashion catalogue

Sixth Text Module Modifications

Same counts for the sixth Text Module but use ‘87%’ instead.

fashion catalogue

Hide Section for Tablet & Phone

Once you’ve finished the two rows, you can go ahead and disable the whole section on phone and tablet.

fashion catalogue

Tablet & Phone Catalogue (New Section)

To make everything look great on tablet and phone as well, we’re going to create a new standard section.

Section Settings

Background Color

Add ‘#FFFFFF’ as the background color of that section.

fashion catalogue

Custom Padding

Move on to the Design tab and add a top padding of ’15px’.

fashion catalogue

First Row

Column Structure

Then, add a two-column row to the section.

fashion catalogue

Sizing

Go to the Sizing subcategory of that row and make the following changes:

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

fashion catalogue

Image Module

Instead of using a background image, we’re going to use an Image Module instead. That way, we’ll be sure that the text and image won’t overlap. Go ahead and add an image module to the first column of the row and upload an image.

fashion catalogue

Clone Modules of First Row in Desktop Version

Then, clone all of the modules that you’ve used in the first row of the desktop version and place them within the second column.

Change Second Text Module Font Size

There’s only one thing that needs to be changed; the font size of the second Text Module. Change it into 65px.

fashion catalogue

Second Row

Column Structure

Then, go ahead and add another two-column row to the section.

fashion catalogue

Sizing

This row will need a modified Sizing subcategory as well:

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

fashion catalogue

Image Module

Add the Image Module to the first column as well and upload an image.

fashion catalogue

Clone Modules of Second Row in Desktop Version

Then, go ahead and clone the modules that are placed within the second row of the desktop version. Once you’ve cloned them, place them in the second column of this row.

Change Second Text Module Font Size

The text size of the second Text Module needs to be changed as well. Go ahead and give it a font size of ’65px’.

fashion catalogue

Hide Section for Desktop

Once you’ve finished both rows, you can go ahead and disable the entire section on desktop.

fashion catalogue

Result

Et voilà, after following all the steps in this post, you should achieve the following result on desktop:

fashion catalogue

And the following on phone and tablet:

fashion catalogue

Final Thoughts

In this post, we’ve shown you how you can create a nice scrolling fashion catalogue. To make our design work, we’ve first shown you how to make a transparent shape within your image with Photoshop. Afterwards, we’ve used these images within our Divi tutorial to create the design. If you have any questions or suggestions; make sure you leave a comment in the comment section below!

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

Featured Image by Rvector / shutterstock.com

The post How to Create a Scrolling Fashion Catalogue with Divi appeared first on Elegant Themes Blog.

The way to Create Irregularly Shaped Section Transitions with Divi

One of the best ways to boost the type of your own website is by using different section transitions. In the previous post, we’ ve shown you how you can do that will using the Divi built-in options only.  However, if you’ re looking to develop something a little bit more advanced or personalized, you can create irregularly shaped section transitions as well. Since of their complexity, the best way to approach this really is by using images with a transparent border.

In this post, we’ ll display you ways to do that. We’ lso are not only going to demonstrate exactly what to do within the Divi Constructor, but we’ re also going to show you how you can generate these transparent borders on images along with a few steps using Photoshop.

Example Result

Let’ s check out a layout sample along with stunning irregularly shaped section transitions:

ecommerce website design

As you can notice, you can use these types of transparent borders throughout your whole web site and within different sections. It’ t important to remember that, depending on just how large your transparent border is, a person should have enough place left within the sections to fit the different content you’ re trying to share. It’ ll also create a nice balance among the various sections.

How to Create Irregularly Shaped Section Transitions with Divi

Subscribe To Our Youtube Channel

Create Transparent Borders with Photoshop

You can achieve as original shapes as you want with Photoshop. You could furthermore opt for a free alternative called GimpShop. For this tutorial, we’ lmost all use Photoshop though.

Open Photoshop

Start by opening photoshop on your computer.

Open Picture

Once you’ ve accomplished that, open the image you’ d like to work on.

irregularly shaped section transitions

Double-Click on Picture & Create Layer

Once your image is uploaded within Photoshop, double-click on the image layer that a new layer for it (Layer 0).

irregularly shaped section transitions

Add Another Layer

In order to add the transparent border, you’ lmost all be needing another layer as properly so go ahead and add this by clicking on the icon which we marked in the print screen below. When you create the layer (Layer 1), ensure it’ s placed above the layer that contains your image.

irregularly shaped section transitions

Choose Brush & Size

Whilst having the Layer 1 activated, go ahead and click on the brush icon.

irregularly shaped section transitions

Once you do, you can alter the size and pattern that’ s being used for the brush in order to your own preference. There are a lot of free Photoshop brushes on the web so depending on what type of web site you’ re creating, choose a fitting one. Also, be sure that the opacity is set at a 100%.

irregularly shaped section transitions

Start Using The Brush on The Borders

When you have your brush in place, start using it on the side you want to be transparent. Make sure you protect the whole border with your clean so it’ ll all become transparent afterwards.

irregularly shaped section transitions

CTRL (Windows) or Command (Mac) + Choose New Layer

Once performed, you can press CTRL (for Windows) or Command (for Mac) in your keyboard and click on Layer 1 simultaneously. You’ ll see that Photoshop can select everything you’ ve added in order to that layer, which is, in this case, the shaped border.

irregularly shaped section transitions

Make New Layer Invisible

Next, make Level 1 invisible by removing the eye since marked in the print screen beneath.

irregularly shaped section transitions

Choose Image & Delete New Layer

Then, click on the level that contains your image and press the delete button on your keyboard. Once you do that, you’ ll see that the border will become transparent.

irregularly shaped section transitions

Select Rectangular Marquee Tool & Click on on Image

Click upon the Rectangular Marquee Tool and press somewhere randomly on the image.

Save Image as PNG

Lastly, you’ ll need to save the image as a PNG so you may use it on your website.

Add Backgrounds to Divi

Once a person create the various images you want to use within your Divi website (by making use of the Photoshop technique above), the rest of it is straightforward. The images you’ ve created serve as the history of a particular section. We’ re only going to show you exactly how to build the hero section of our example since the same method applies for the different sections too.

Add New Standard Section

Add a new page, switch to Visual Builder and include a new standard section to that page.

Upload Background Image

Once you’ ve positioned all the modules you want in order to appear in the hero section, you may go ahead and add the picture you’ ve created in the previous element of this post.

irregularly shaped section transitions

Add Background Color

Once you’ ve done that, you can decide what color may appear in the transparent a part of your own image. In this example, we’ ve used ‘ #dddddd’ as the background color. You can immediately see that will the color will appear right inside the transparent part of the picture.

irregularly shaped section transitions

Make Sure There’ s Enough Padding

Depending on the quantity of segments and the size of your transparent boundary you’ ve used in your leading man section, you might have to include some custom padding. Have fun with the different section padding values and see what type gives you the best result.

irregularly shaped section transitions

Add Same Background Color to Next Section

To ensure the different sections mix well with one another, make use of the exact same background color you’ ve used in your own hero section within your next section as well. That doesn’ t always mean you need to use a one color background color for your next section, a person can use a gradient background since well as long as the colours of both sections blend beautifully.

Instance

As described before, you can create as numerous image borders as you want and use them in a creative method throughout your website. To give you a taste of it, we’ ve developed the following example preview:

ecommerce website design

Final Thoughts

In this post, we’ ve shown you how you can easily make make use of of irregularly shaped section transitions. Applying this method, you can basically create any kind of kind of section transition you wish. Besides showing you how to generate these irregular shapes with a few steps in Photoshop, we’ ve also demonstrated you ways you can then make this work within the Divi Builder. When you have any questions or suggestions; make certain you leave a comment in the particular comment section below!

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

The publish How to Create Irregularly Shaped Section Transitions with Divi appeared first upon Elegant Themes Blog.

Methods to Create a Timeline with Divi’s Blurb Module

In this post, we’ ll be demonstrating how you can easily create a simple yet sophisticated timeline with Divi’ s your Blurb Modules. We’ ll be combining the different options that modules and rows provide to own result you can view below. The particular example we’ ll be sharing will be based on the built-in Divi options only, which means you won’ to need to add any additional CSS code! We’ re also making sure that it looks good on desktop as well as on mobile.

Outcome

The appearance of a timeline is achieved along with two design elements; the queue that passes across all three Blurb Modules and the particular numbers. The desktop version seems like this particular:

timeline

And the mobile version looks like this:

timeline

Let’ s get started!

How to Create a Timeline with Divi’ s Blurb Module

Subscribe To Our Youtube Channel

Add Standard Section

Section Background Color

Start by adding a new standard section and using ‘ rgba(0, 0, 0, 0. 12)’ as its history color.

timeline

Section Padding

Go in order to the Design tab and use a top padding of ‘ 300px’.

timeline

Add Three-Column Row (Timeline)

Column Backgrounds

Once you’ ve produced the section, add a three-column line to it. Within the Content tab of this row, use ‘ #e09900’ as the Column 1 background color, ‘ #0c71c3’ because the Column 2 background color and ‘ #8300e9’ as the Line 3 background color.

timeline

Dimension

Shift on to the Design tab plus use the following settings for the particular Sizing subcategory:

  • Make This Row FulldWidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Equalize Column Heights: Yes

timeline

Custom Margin & Padding

Next, include the following Custom Padding and Custom Margin to the row:

  • Top Padding: 1px
  • Bottom Padding: 0px
  • Bottom Margin: -200px

And add ‘ 3px’ towards the top and bottom padding of each column.

timeline

Disable on Tablet & Phone

Lastly, disable the row on both pill and phone.

timeline

Add Another Three-Column Row (Blurb Modules)

Column Gradient History

Once you created the first three-column row, you can move ahead and create the second 1 right below it (they share the same section). Each one of the columns needs a gradient background with the particular same settings but with a different first color:

  • Initial Color:  #e09900 (Column 1),  #0c71c3 (Column 2),  #8300e9 (Column 3)
  • Second Color: rgba(255, 255, 255, 0)
  • Gradient Type: Linear
  • Gradient Direction: 180deg
  • Start Position: 73%
  • End Position: 92%

timeline

Make Row Fullwidth

Then, go to the Style tab and enable the ‘ Create This Row Fullwidth’ option.

timeline

Row Custom Padding

Open the spacing subcategory and use the following Custom Cushioning & Custom Margin for the row:

  • Top Padding: 0px
  • Right Padding: 60px
  • Bottom Padding: 100px
  • Left Padding: 60px
  • Top Margin: -100px

Include ‘ 5px’ to the top padding of every column as well.

timeline

Blurb Module

Once you’ ve completed the row settings, you can add the Blurb Module to the first line of the row you’ ve just created. Within the Image & Symbol subcategory of the content tab, enable the ‘ Use Icon’ option and select an icon of choice.

timeline

Scroll down the same tab and use ‘ #f4f4f4’ as the background color.

timeline

Go to the Design tab and make the particular following adjustments to the Image & Image subcategory:

  • Icon Color:  #e09900
  • Image/Icon Placement: Remaining
  • Use Icon Font Dimension: Yes
  • Icon Font Dimension: 50px

timeline

Within the Text subcategory, make sure the left Text Orientation is certainly enabled.

timeline

The options for the Header Textual content subcategory would be the following:

  • Header Font: Crete Round
  • Header Text Alignment: Left
  • Header Font Size: 32px
  • Header Line Height: 1em

timeline

Then, open up the Body Text subcategory and make use of the following settings:

  • Body Text Alignment: Remaining
  • Body Font Size: 12px
  • Body Line Height: 1 . 7em

timeline

We’ ll be using a border with the following settings as well:

  • Use Border: Yes
  • Border Color: #000000
  • Border Width: 2px
  • Boundary Style: Dotted

timeline

Next, open the Dimension subcategory and use ‘ 279px’ with regard to the Content Width and ‘ 100%’ for the Width.

timeline

Lastly, add ’ 30px’ to the top, right, bottom plus left padding.

timeline

Text Module

As soon as you’ ve added and modified the Blurb Module, go ahead and put in a Text Module right below it. The Text Module will need a gradient history too:

  • First Color:  #e09900
  • Second Color:  rgba(255, 255, 255, 0)
  • Gradient Type: Radial
  • Radial Direction: Middle
  • Start Position: twenty percent
  • End Position: 24%

timeline

Proceed on towards the Design tab and make use of the following settings for the Text subcategory:

  • Text Font Size: 21px
  • Text Color: #FFFFFF
  • Text Line Height: 1. 7em
  • Text Alignment: Center

timeline

Open the Sizing subcategory, use a width of ‘ 48%’ and select the right Module Alignment.

timeline

Lastly, make use of a top margin of ‘ -100px’ and add ’ 50px’ to the particular top and bottom padding.

timeline

Clone Blurb & Text Module

Once you’ ve completed the first column, you may clone both modules make them within the other two columns. The only items you’ ll have to change will be the blurb icon, blurb color and the particular first gradient color of the Text Module into ‘ #0c71c3’ for the second column and ‘ #8300e9’ with regard to the last column.

Turn off on Tablet & Phone

Once you’ ve completed this 2nd row, make sure you disable this for phone and tablet as nicely.

timeline

Replicated Three-Column Row (Tablet & Phone)

The timeline version on pill and phone is slightly different. Replicated the row with blurbs you’ ve created in the previous a part of this post and follow the next actions to make it fit on phone and tablet.

Add Line Gradient Background

The row on tablet and phone will require the following gradient background:

  • First Color:  rgba(0, 0, zero, 0. 7)
  • Second Color:  rgba(255, 255, 255, 0)
  • Gradient Type: Linear
  • Gradient Direction: 90deg
  • Start Placement: 1%
  • End Position: 0%

timeline

Row Padding

Delete most the custom padding and margin which was used in the desktop version plus add ‘ 100px’ to the best padding.

timeline

Disable on Desktop

Lastly, instead of disabling the row on phone and tablet, disable it upon desktop instead.

timeline

Result

After getting followed all the measures in the post, you should be able to attain the next result on desktop:

timeline

And the subsequent result on tablet and phone:

timeline

Final Ideas

On this page, we’ ve demonstrated you how you can create a basic timeline of your Blurb Module by using nothing else than the built-in Divi options. Two factors that help determine the Blurb Modules as a schedule are the line that connects just about all three Blurb Modules and the numbers. When you have any questions or suggestions; make sure you leave a comment in the comment section below!

Be sure to subscribe to our own email newsletter and YouTube channel so that you simply never skip a big announcement, useful tip, or Divi freebie!

The particular post How to Create a Schedule with Divi’ s Blurb Module appeared first on Elegant Themes Blog.