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.

When and Why to Use the Design Tag Outside of CSS Stylesheets

Style tags are a pretty interesting part of web development. I suggest, they’ re fundamental and basic in order to how the current web works, several of the time, your site’ s i9000 actual styling comes from importing and using numerous CSS stylesheets for styles, plugins, and the everyday look your visitors see.

But back in the old days of website building, a person could use style tags in the particular very body of the website, plus it would be okay. Most, when not all, of the CSS regarding the page would embark on the web page itself, and back then… it worked okay. Nowadays, there are difficulties with that will, of course– such as page fill speed and execution orders, and the particular more mature web technologies grow, the particular less often you need to use style tags all by their lonesome.

There are, however, times when a person would want to use them. Sometimes, they improve your workflow, while other situations really make your users’ lives better– mobile optimization, for example, or drawing their attention to a particular element through awesome styling.

Typical Stylesheet Use

In almost every website today, you will see the particular styling implemented like this:

   < link rel='stylesheet' id='divi-style-css' href='https://cdn.elegantthemes.com/blog/wp-content/themes/Divi-child-theme-01/style.css?ver=3.0.40' type='text/css' media='all' />   

If you’ re an Elegant Designs member who uses Divi (you ought to be! ), that calls up the particular full stylesheet I took this snippet from:

   /* Style Name: Divi Theme URI: http://www.elegantthemes.com/gallery/divi/ Edition: 3. 0. 40 Description: Smart. Flexible. Beautiful. Divi is the most effective theme in our collection. Author: Sophisticated Themes Author URI: http://www.elegantthemes.com License: GNU General Public License v2 License URI: http://www.gnu.org/licenses/gpl-2.0.html */ /* Browser Reset */ body  line-height: 1;  ol, ul  list-style: none;  blockquote, q  quotes: none;  blockquote: before, blockquote: after, q: before, q: after  content: ""; content: none;    

Now, in theory, you could put that in a style tag within the header of any page you write. It would definitely work, yet that’ s stinky coding and not at all what style tags are usually good for.

Style Tags, Modern Usage

Associated with course your website has CSS stylesheets like those. You’ re going in order to make use of them. You have customized. css and stylesheet. css and most likely way more than that. You’ ve figured out exactly what your site should look like, and you’ re pleased with it.

So why do you need the style tags?

Because stylesheets are big-picture options. A style tag is really a small-scale remedy.

Sheets handle the greater appearance of your site, not the nitty-gritty individual elements and unique highlights. Sometimes, it’ s more function than it’ s worth to throw a one-off piece of code straight into a stylesheet.

That’ s when style tags really turn out to be useful. Also, sometimes you need to tweak a single element or make a specific style choice for particular devices or use cases. That’ ersus when style tags really shine within modern web development.

The Single Instance of an Element

Probably the major reason you’ g use style tags inside your site is usually if you’ re dealing with just one, one-off element on your page. This can be a lots of hassle (for very little, if any, return) to include the styling in an external CSS file attached to that element’ s id. What you can perform, however, is throw a style tag onto the element and go upon with your day.

For example, if you have a sidebar widget that needs a special font, you could place it in the div, give the div a CSS id, and then mind to your spreadsheet to include something as simple as font-family: “Exo”, Arial, sans-serif; , but that’ s a great deal of trouble.

The much better option, would be to simply try this?

   < div style=" font-family: " Exo", Arial, sans-serif; " />   

Bada-bing, bada-boom, you’ re done and that widget now stands out because it’ s the only one that gets that will particular styling. (And yes, I realize that using a new and various font likely clashes with the sleep of your design. But it’ t an example. )

1 Simple Page

Sometimes, you have a very simple, one-off page on your own site. It could be a splash page or even a squeeze page. You probably just require a few tweaks to your design here, but you need them to apply to this page, and this web page alone.

So you may utilize the oft-maligned ! important tag along with style to get matters done more quickly and easier compared to creating a new stylesheet and linking it. This method is best utilized if you don’ t have a great deal of new CSS because loading tons of CSS such as this can slow page load. But you already knew that.

Something simple such as this, nevertheless, wouldn’ t be too big stress on your users’ connections, and it isn’ t honestly worth adding straight into a stylesheet. (And to be reasonable, this CSS is hideous and isn’ t worth adding to any site. Tee hee! )

   < style> h2, h3, h4  font-family: "Exo", Arial, sans-serif!important; text-align: right; font-size: 2rem; color: blue; body, p font-family: "Roboto", Arial, sans-serif!important; font-size: 1.2rem; color: red; background: #000; < /style>   

The point here, even though, is that HTML 5 is cool together with you adding style tags into the particular head of your website so that you tweak the existing stylesheets. As the ! important tags are usually definitely not required in this example (they rarely are), I feel as though this is, perhaps, the a single time to use them because they’ lso are not going to cause a lot associated with tag spaghetti as you (or other devs) start to work on the site because they only apply to this single page.

Several Viewport Sizes

Media concerns are your friend. If you’ re not totally familiar with them, i then highly suggest you read up on them. Basically, you can declare exactly what parameters have to be met pertaining to certain CSS to take effect. Mostly, though, you will use this in order to make sure your sites work on various devices. When you need site-wide responsiveness, that will go in a stylesheet.

However, if you have the single page or element that you should end up being appear differently or not at just about all on mobile (or even smaller– or larger– desktop resolutions), you can perform that with style tags in the particular header.

   < style> @media (max-width: 767px) {. white_text {{|in front} color: #ffffff; }. blue_text { {color|colour}: #cbe1f3; }. white_background { background-color: #ffffff; }. blue_background { background-color: #003663; {}|is parked ,} #email_form_a { display: none; } < /style>   

Stylin’ {and|plus} Profilin’

CSS is {such|this kind of} a major part of web {development|advancement|growth} now that it’ s something {almost|nearly} everyone has to know and {use|make use of}. And even more than knowing CSS is {knowing|understanding} when to use the nuanced tools you {have|possess|have got} access to.

So don’ t feel as though you {are|are usually} {limited to|restricted to} stylesheets. Sure, they’ re fantastic and useful, and {they|these people|they will} make the entire web a {nicer|better} place to be, but you {can|may} still get use out of {simple|easy|basic} style tags, too, and give {your|your own} sites a little extra pop.

So how do {you|a person} use style tags outside of {your|your own}. css stylesheets? What insights can {you|a person} give folks?

Article thumbnail image by Creative {Thoughts|Ideas} / shutterstock. com

The post When and Why {to|in order to} Use the Style Tag {Outside of|Beyond} CSS Stylesheets appeared first on {Elegant|Stylish|Sophisticated|Classy} 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.

What is WP Enqueue and How Do You Use It?

When a person first learn HTML, the only way you understand how to insert any kind of interactivity is using script tags within the header or footer of the page to create the type and source of an external JavaScript file. (Or if you’re really simply learning, the entire JS function between script tags right there in the body by itself. That’ s fine for learning, yet it’ s pretty bad practice as soon as you transfer to advanced WordPress development. Get into the enqueue function.

Once you move past simple, one-page websites, those beginner practices can create some really sticky situations. As you start adding more and more JavaScript, your website gets slower and slower. Updating it requires longer. Eventually, you’ve made a big pile of JavaScript-getti and no matter how hard you try, that pile of noodles ain’t coming untangled.

Thankfully, you can use the particular enqueue perform in WordPress to add styles plus scripts that the CMS take care of for you. All the messiness is handled for you. While it’s not as simple as directly pasting the script or styles you want in the header or footer of each page, it’s the right way in order to handle it. WordPress isn’t terribly opinionated, there is certainly definitely a series of best practices you should know about

And wp_enqueue_scripts is at the forefront of those practices.

What’s the particular Big Deal?

The primary reason you will want to make use of wp_enqueue is definitely to maintain your site running smoothly plus quickly. Page speed is important and using the same scripts and fashions more than and over and over again doesn’t help. At all.

Luckily, wp_enqueue is definitely an example of functional programming. Almost all that means is that you write a single piece of code to become executed (your JavaScript snippet), and you use wp_enqueue to call it instead of needing to rewrite/paste the whole thing every time you need it.

That’s. Awesome.

Even more awesome, using the enqueue method makes WordPress itself insert the _script_ labels into the header and footer where they belong automagically, loading them with out having to input them on every page separately.

WP Enqueue Syntax and Params

Enqueueing scripts really isn’t that tough. If you are savvy enough in order to work with JavaScript in the very first place, the PHP functions you make use of for enqueueing will be a easy.

In a common script tag, you will either import the external. js file directly or paste the entire, long snippet of code in between the tags themselves. (This can also be exactly what you’ re doing if you paste something into the Divi code component or the WP Custom HTML or Text widgets).

You just require to know a few basic parameters and syntax.

The particular Codex gives this as the base enqueue code:

   wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );   

All in all of, it’s pretty simple to break down into usable bits by parameters.

  • wp_enqueue_script() is the function all that will place all the code in the page where it goes.
  • $handle is a unique name for the script by itself.
  • $src represents the URL of the actual. js file you’re enqueueing.
  • $deps are the $handle s of any dependencies this one requires.
  • $ver will be the version number. If not one is specified, you get the WP installation version added automatically.
  • $in_footer or even $in_header informs WordPress where to put your screenplay.

The full documents to enqueue scripts can be seen in the Codex.

Attention, Students: WP Registration Begins At this point!

In addition to _wp_enqueue__, WP has a handy-dandy method called _wp_register__, too. Both methods use the particular same parameters and syntax, so a person really get a two-for-one deal along with the pair of them. Essentially, signing up a script is the same because naming a function in JavaScript.

While not necessary, registering your own scripts can make your life a lot easier because you won’t have to announce them as dependencies later on lower the line. They’ll already be registered. Hence… _wp_register__. Once a script can be registered, you can call it back by its $handle , as you will discover in the instance below.

You will register your code like this:

   wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', false, null, $in_footer);   

After that, whenever you need it again, a person can always call it back like this:

   wp_enqueue_script( 'jquery' );   

Additionally, sign up means that you don’t have to load a script even when it’s not needed. WPMU posseses an awesome instance of shortcode creation: if you sign up the script to a shortcode that uses _wp_enqueue__, it will only obtain used when the shortcode is. However when you only call it by enqueueing it, it will be loaded even if the shortcode isn’t used.

You can read all about the particular method in the Codex.

Additionally, plugin authors are needed to enqueue scripts if they need within the WordPress. org repo, so in the event that that’s on your plate… better get to queuein’.

Putting It Together

Implementing the code is usually easy. Just drop a snippet like the one below into your functions. php . and WordPress handles the rest. I mean, this particular is a really basic snippet to call jQuery, but you can see how the stuff plays together.

You would normally use something that looks like this:

  < script type=" text/javascript" src=" jquery. js" > < /script>  

As soon as you learn how use enqueue_scripts_ , you will see some thing more like this:

   add_action('wp_enqueue_scripts', 'add_scripts'); function add_scripts()  wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', false, null, true); wp_enqueue_script( 'jquery' );    

Now, notice in the code above how it uses the add_scripts()_ function that’ s a part of WordPress currently to outline the order from the next few steps. First, the wp_register_ function gets every the details specified and puts the script in the page footer, plus then uses wp_enqueue to finally call it as soon as everything is set up.

Wrapping Up

That’ s i9000 really all there is to this. Well, that’ s not true– enqueue is a pretty ingrained part of WP. But those are the fundamentals that get you poking around with doing more with WordPress than you may have before.

The basics we all learned of placing in scripts when we started internet development still work, but they aren’ t always the best way to do things. Part of the attractiveness of WordPress being built on PHP is that you can bring this sort of logic into your work while nevertheless really keeping the same basic framework and workflow as you would possess had anyway.

Article thumbnail image by hanss / shutterstock. com

The blog post What is WP Enqueue and How Perform You Use It? appeared first upon 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.

eleven Amazing Beauty Blogs Made with WordPress

Beauty blogs are one of those kinds of websites which have a lot of relevant content aimed in a specific target audience. The bloggers at the rear of these sites are usually very energetic and try to keep their visitors as up-to-date as possible with all of kinds of tips revolving around elegance; from makeup to skincare, health plus more. One thing you might not really have known is that many of these beauty blogs use WordPress because their articles management system. For this post, we’ ve created a list of 11 amazing beauty blogs made with Wp for you to discover and maintain in mind while designing your next attractiveness blog.

1. Remarques

beauty blog

The first beauty blog in the row can be called Remarques. You can find all kinds of content on this blog but the particular main topics that are discussed are usually beauty-related, such as makeup, skincare and hair. The first thing we observe is that the homepage and menus are nicely balanced. The posts upon the homepage are carefully selected and beautifully presented. Rather than filling the homepage with all kinds of posts, the particular menu items contain a preview of the last three articles that can be found in that specific category. This allows visitors to quickly find the content they’ re looking for without becoming overwhelmed.

2. Manface

beauty blog

The next beauty blog on the list, Manface, is focused on all sorts of beauty elements that are relevant to men. It is definitely a go-to for men who else want to explore different tips plus products; from skincare to body, curly hair and fragrance. In comparison with Remarques, the previous beauty blog we’ ve distributed in this post, this website shares a lot more of their content on the homepage. The menu, on the additional hand, is rather simple yet easy to navigate through.

3 or more. The Formulation

beauty blog

Next up, we also possess The Formula blog which looks incredible. This website puts its design focus on giving that black and white balance to their website which these people absolutely manage to pull off. The internet site is simple yet provides all the information a visitor could be searching for. The menu items seem such as they are just hyperlinked, but once you hover over them they catch you by surprise by showing a drop-down menu. They also have a beautiful way of showing the title along with the category a post belongs to.

 4. Barefoot Golden-haired

beauty blog

Then, we also have the Barefoot Blonde beauty blog. This website definitely emphasizes the person behind the beauty blog and uses Instagram posts on the top of the page along with the social icons to continue the particular storytelling process elsewhere as well. Besides that will, the entire website focuses on the visual part of each post and allows visitors to share the write-up without having opened it yet.

5. Very Good Lighting

beauty blog

Up following, we have the Very Good Lighting beauty blog for men. This blogging website gives the men out there almost all the tips they need for encounter, body and hair. One of the particular very pleasant things about this web site is the scrolling animation that will keep you interacted with the content that will you come across on their website. Within overall, this beauty blog is quite easy to navigate through and provides its visitors with the content they’ ve created in a very simple and user-friendly way.

6. Beauty is Boring

beauty blog

The next beauty blog we want to put in the limelight is Beauty is Boring. This site uses primarily black and white colors throughout their website. However, they do manage to mix that beautifully with the images they will use throughout the website. This beauty blog has a very recognizable way of creating their posts. Although each publish is different, they use the same kind of visualities. In late each article, and even on their homepage, they share all the items that had been used in a post and where they can be purchased; super easy for people who want to get to this right away.

7. Maskcara

Another simple yet elegant beauty blog is definitely Maskcara. The website starts with the slideshow of featured posts that instantly makes sure the visitors are up-to-date regarding all the new content that’ s getting provided on the blog. This elegance blog has everything you’ d anticipate a beauty blog to have and finishes the homepage by showing site visitors the latest Instagram posts from the particular beauty blogger.

8. Jaclyn Hill Makeup

beauty blog

The well-known beauty blogger, Jaclyn Hill, has a pretty awesome web site as well. Something we’ ve seen in some of the previous beauty blogs, all of us see with this blog as well; the combination of black and white colors throughout the web design. That’ s not really this type of coincidence. Most of these websites provide makeup tutorials that are currently pretty colorful. By using black and white colors throughout their website, they make certain their web design matches the colours that are being used within the tutorials.

9. Nikkie Lessons

beauty blog

Speaking about well-known beauty bloggers and make-up artists; Nikkie Tutorials definitely belongs on that list as well. Like the particular Jaclyn Hill website, this website is definitely mostly used to share the video content material from her YouTube channel. The site design is sober but it looks quite elegant at the same time. The particular right sidebar bio’ s purpose is to make people immediately recognize the beauty blogger’ s identity and brand.

10. Amelia Liana

beauty blog

Then, we all also have Amelia Liana. This beauty blog immediately gives you summer vibes by looking on the colors of the particular website only. The website comes with an awesome menu that shows you the three latest post in a very attractive way while hovering over the menu items. That allows users to instantly find the latest posts that they need to meet up with. Besides that, the website also shares three ways to navigate through the posts while becoming on the homepage; by latest, popular of. Another well-thought-out extra touch this particular website offers is two video slideshows. You can find them at the end of the homepage and they will allow visitors to look into the latest videos and vlogs.

Made with Divi

11. One particular Turn Kill

beauty blog

Lastly, we have One Turn Kill, a blog that is made with the Divi theme. This website is not only aimed at beauty, it also handles other topics such as looks and home decor. The particular website is a bundle of all kinds of stuff that might come within handy when trying to find inspiration. One of the nice things about this internet site is that it starts with a slideshow that will showcases featured posts along with a good intro to what the post will be all about. This inspires visitors to click on the slide and read the blog post entirely.

Final Thoughts

Throughout this awesome article, we’ ve discussed some great beauty blogs that are made with WordPress. These websites can give you inspiration for a next beauty blog website you need to create to get yourself or for a client. Should you have any questions or suggestions; make sure 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 the big announcement, useful tip, or Divi freebie!

Showcased Image by Pro Symbols / shutterstock. com

The post eleven Amazing Beauty Blogs Made with Wp appeared first on Elegant Themes Blog.

Divi Feature Update! Introducing Brand New Text Shadow Options For All Modules

Easily Include Stunning Text Shadows
To Any kind of Module

Every Divi component and all text elements have been updated with a full set associated with text shadow controls and a brand name new text shadow interface for the particular Divi Builder.

Today we are usually excited to add even more style customizability to Divi with our brand new Text Shadow options that create it incredibly easy to add stunning shadow to any Divi module and to customize those shadows using the simple visual interface.

Check Out The New Text Shadows In Action

The New Text Shadow Interface

Adding and customizing textual content shadows is easier than ever thanks a lot to Divi’ s shadow presets and a full range of text shadow controls.

A Brand New Interface

The Divi Builder is equipped with a brand new user interface for controlling text shadows in each module, and this new interface can be found within all text option groups.

Easy-To-Use Presets

Adding great text shadows to your page is extremely simple thanks to our shadow presets that can be used on any text element with a single click. We all have pre-designed 5 unique text shadow styles that work great with any text size. These styles are perfect starting points and can be additional customized utilizing the full set of textual content shadow controls.

Completely Customizable

All Divi modules have been up-to-date with a full set of Textual content Shadow options, each of which can be managed within the brand new Textual content Shadow interface. Every aspect of these types of shadows are customizable, including position, blur strength and color, and building custom shadows in the Visual Builder can be a truly wonderful experience as you watch your shadows move and change right before your eyes.

Works With Most Modules

The new textual content shadow interface is available for most modules and text shadows can be applied and customized for every individual text element.

Create Gorgeous Designs With
Creative Text Darkness Effects

Text shadows can be stunning when used right, and our team has been having a blast creating some awesome demos that will showcase what’ s possible using these types of new options.

Countless New Possibilities

You will be surprised and delighted with just how much can be accomplished with these new options. There are so many inspiring new possibilities and we can’t wait to see all associated with the great designs you create. Just take a look at some associated with the amazing designs our team was able to build using these new features.

Example One

View The Live Layout Demo

Example Two

View The Live Layout Demo

Example Three

Look at The Live Layout Demo

Example Four

View The Live Layout Demonstration

Example Five

View The Reside Layout Demo

Example 6

See the Live Layout Demo

Example Seven

View The Live Layout Demo

Example Eight

View The Live Layout Demo

Example Nine

View The Live Layout Demonstration

Example Ten

View The Live Layout Demo

The new text shadow choices are available today, so download Divi and take them for a spin. Let us know everything you think within the comments and don’t miss to check out back next week for even more great Divi features coming your method.

Get 10% Off When You Join Today

Join, Renew & Upgrade Today For 10% Off!

Join the most enthusiastic and loving WordPress theme community on the web and download Divi 3. 0 these days. Using the new Visual Builder, you can build websites faster than ever before with its incredibly fast and user-friendly visual interface. You have to discover it to trust it!

Join Today For 10% OFF!

Restore Your Account Today For 10% OFF!

Upgrade Your Today For 10% OFF!

The post Divi Feature Update! Introducing Brand New Text Shadow Options For All Modules made an appearance 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.

How you can Create a Library of Post Thoughts to utilize in Your Posts and Pages

Many WordPress websites use custom code or functions somewhere within their posts and pages. The platform makes it easy to add this program code, in case you’ re going to recycle snippets throughout your site, it may be a pain to add code manually whenever you need to.

Instead of having to insert your code snippets by hand every time they’ re needed, it makes more feeling to both organize and save all of them using plugins. In this article, we’ ll discuss the benefits of keeping your code snippets organized, then display you how to do it making use of the Code Snippets Extended plugin in two steps. Let’ s get to work!

Why You Ought to Organize Your Code Snippets

Some WordPress code.

Even if you’re not a developer, chances are you’ll have to add some code to your website manually.

Lots of WordPress users add custom code snippets to their posts and pages. Regardless of your niche and size, there are plenty of situations where you’ ll need to add a little code to your site. Take Google Adsense or Facebook Pixel, for example, which usually both need you to add a few outlines of JavaScript to your website before they may work. Plenty of WordPress plugins furthermore require you to use shortcodes, therefore the chances of adding custom code in order to your website are high.

Given this, it’ s a great idea to find a way to conserve all of those snippets of program code you’ re using on the site. Here’ s why:

  • You can reference your code whenever necessary. Sometimes, you may neglect what lines of custom code you added to your files, so this pays to organize your snippets using a library.
  • You’ll be able to reuse your program code snippets more easily. If you wish to use the same code multiple moments, it makes sense to store it for later use.

You could, of course, just conserve those code snippets using regular text files on your pc or within the cloud. However, using the right WordPress plugin can provide you with a a lot more suitable way to store them within your site. That way, you’ ll understand what code you’ ve put into every specific website you work with.

Introducing the Code Snippets Prolonged Plugin

The Code Snippets Extended plugin.

The Code Snippets Extended plugin is definitely an interesting tool that enables you in order to set up an easy code library within WordPress. It lets you save custom program code, identify it using any name a person want, then add it to any of your posts and pages with a few clicks.

Plus, the particular plugin also enables you to preview the effects of your code thoughts, as long as they are easy JavaScript or CSS. It also supports PHP, but those snippets don’ t usually display as well using the tool’ s preview functionality.

While the plugin plays nicely with the Divi Builder on the whole, there’s 1 issue that requires a workaround. Simply by default, the tool adds a brand new button to the editor, which enables you to add any of your library’ s snippets to your article or page. However, the button disappears when switching over to the Divi Builder. The fix is simple even though, and we’ ll explore it more in a minute.

Crucial Features:

  • Save all of the of your custom code snippets to a centralized library in your dashboard.
  • Identify each snippet using the unique name.
  • Assign easy-to-use shortcodes to each item in your library.
  • Add snippets for your posts and pages using a new choice on the WordPress editor, without having to touch the code.

Price: FREE | More Information

How to Create a Library of Submit Snippets to Use in Your Articles and Pages (In 2 Steps)

Before we get started, you’ll need to install and activate the plugin. Once you’re ready, jump into step number one!

Action #1: Add New Snippets to Your own Library

After installing the particular plugin, you’ ll see a new tab called Snippets on your own WordPress dashboard. Click this and look for the Add Snippets option. Upon the next screen, you’ ll become able to set a name to identify your code within the collection, as well as upload any mass media files that are needed for the particular code to execute:

Adding a new snippet.

Keep in mind – the code will still work also if you don’ t upload the necessary media from this page, since long as it’ s in your own library. This feature is just there therefore you can preview the effects associated with your code using the Test button at the bottom of the page.

Moving on, you’ ll also notice an editor into which you’ll kind your CSS, JavaScript, PHP, and jQuery code. However, it will need in order to be wrapped in specific tags pertaining to each language. Here are some quick examples for reference:

  & lt; style& gt; CSS goes between these tags. & lt; /style& gt;  

   & lt;? php PHP tags, on the other hand, are different, so keep that in mind.? & gt; & lt; script type=& quot; text/javascript& quot; & grand touring; Same applies to JavaScript, which uses this tag type. & lt; /script& gt; & lt; script type=& quot; text/javascript& quot; & gt; jQuery(function($)  $(document).ready(function() // jQuery uses the most complex tags – they need to be set up exactly as shown, and any code should go within this section. );  ); & lt; /script& gt;   

You can reference all of these tags below the editor whenever you’ re adding a new snippet, plus as long as you remember that will each language requires a different one, a person don’ t need to memorize them. Plus, you can use multiple languages inside the same snippet – just become sure to wrap them using their respective tags.

Once you’ re done typing or pasting your code, use the Save Snippet button at the bottom of the page, and it’ ll show up within the Snippets > Snippets tab on your WordPress dashboard:

The Snippets tab.

Now, all that’ s remaining is to test your new snippet making use of both the WordPress editor and the Divi Builder.

Step #2: Insert Your Snippets Into Your Divi Posts and Pages

In case you’ re not using the Divi Builder, you can just open any kind of of your posts or pages making use of the regular WordPress editor. At the very top you’ ll see a new Insert Snippet button:

Insert a snippet.

Clicking upon it is going to bring up an overlay displaying all of the items in your library, and you can select whichever one you want:

Choosing which snippet you want to add.

Now the plugin can add the code to the editor, and you’ re set – it’ s that simple. However , if you’ re using the Divi Builder, a person won’ t be able to gain access to this choice. The easiest way to work around this problem is to open your dashboard’ s Thoughts tab in a new window and copy the corresponding shortcode for the code you want in order to add. Once you have it, come back to the Divi Builder and add a Code module to the page you’ lso are working on:

Adding a Code module.

Once you’ re in, paste your shortcode within the Content field and save your changes:

Adding a shortcode to your Code module.

Now, your snippet will work as usual. Using the Divi Builder adds 1 step to the process, but you still get to store all your code snippets in an internal library that’ s easy to access.

Bottom line

If you’ re anything like us, you value efficiency in all of your projects. Adding the exact same code to multiple pages or content by hand is possible, but it’ s not a good use associated with your time. Instead, it’ s much better to test the code as soon as, save it to your library, and after that keep it in your virtual back again pocket for whenever you need this.

The Code Snippets Extended plugin enables you to do just that. Simply install it and follow these types of two steps:

  1. Add new snippets for your library.
  2. Insert your snippets into your Divi posts and pages.

Do you have any queries about how to add code thoughts to your Divi website? Ask away in the comments section below!

Article thumbnail picture by Andrii Bezvershenko / shutterstock. possuindo.

The post How to Create a Library of Submit Snippets to Use in Your Content and Pages appeared first on 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.