EDITS.WS

Tag: Divi Tutorial

  • How to Use a Dynamic Logo in Divi’s Fullwidth Menu Module

    Changing website logos can be a time-consuming process. This is especially true if the website uses different headers for different templates. If you use an image for each one of those headers, you’ll have to manually get in there and change each one of them. Fortunately, Divi can display your website’s logo dynamically, saving you time! In this post, we’ll see how to use a dynamic logo inside Divi’s Fullwidth Menu Module.

    Let’s get started!

    Why Use a Dynamic Logo?

    The dynamic logo option lets Divi users change their website logos in a single location. That change is then reflected in every module that uses the dynamic logo. This simplifies the process.

    It’s especially helpful in headers, and even more helpful when there are several menu modules in use since it reduces the time it takes to make the changes. It also keeps the Divi user from making a mistake by forgetting to change one of the headers.

    Why would Divi users need more than one menu module? The Divi Theme Builder allows Divi users to create multiple headers to use on various pages across their websites. This opens up lots of design possibilities for headers across the Divi website.

    It’s not uncommon to have a header for the homepage, one for the blog, one for a services page, one for a CTA landing page, and lots more. It’s also not uncommon for these headers to use the same logo. This would require the Divi user to open every header template and change the logo in every menu module. Even using the copy and paste features requires the Divi user to open each template.

    Theme Builder Example

    In my example below, I’ve built 10 custom headers and assigned them to various pages on my website. Each header has a custom design, with different colors, CTAs, and layouts, but they all use the same logo. If I want to change the logo for my website, and I wasn’t using a dynamic logo, I’d have to open each Divi Fullwidth Menu Module and make the change manually.

    Theme Builder Example

    If I had the dynamic logo option set up in each module, the logo would change in every module automatically. Let’s see how to select the logo dynamically.

    How to Use a Dynamic Logo in the Fullwidth Menu Module

    To get started, open the Fullwidth Menu Module that you want to use a dynamic logo. I’m adjusting the header template in the Divi Theme Builder. For this example, I’ll assume you have a Fullwidth Menu Module already set up with a logo selected.

    Open the Divi Theme Builder

    To use a dynamic logo, go to Divi > Theme Builder in the WordPress dashboard.

    • Divi
    • Theme Builder

    Open the Divi Theme Builder

    Select the edit icon for the header you want to modify. Wait for the editor to open.

    • Edit

    Open the Divi Theme Builder

    Change the Logo to Dynamic Content

    Next, open the settings for the Fullwidth Menu Module by selecting its gear icon.

    • Fullwidth Menu Module settings

    Change the Logo to Dynamic Content

    In the Content tab, scroll down to the section called Logo. Hover over the logo image and click the trash can icon. You can also click the circular reset icon if you prefer.

    • Trash can

    Change the Logo to Dynamic Content

    Next, hover over the image area to reveal the Dynamic Content icon. Click the icon to open the Dynamic Content choices.

    • Dynamic Content

    Change the Logo to Dynamic Content

    A modal opens with lots of options to choose from. Select Site Logo in the top section.

    • Site Logo

    Change the Logo to Dynamic Content

    You’ll see the new logo appear in your header’s menu that’s specified in the Divi Theme Options (more on that in a minute). Under the logo in the Logo selection settings, you’ll see the message “Site Logo”. This indicates that the module is now displaying the dynamic logo. Click the green button to close the module.

    • Close

    Change the Logo to Dynamic Content

    Next, save the layout by clicking the green Save button in the lower right corner and clicking the X in the upper right corner to close the editor.

    • Save
    • Exit

    Change the Logo to Dynamic Content

    Finally, click Save Changes in the upper left corner of the Theme Builder screen.

    • Save Changes

    Change the Logo to Dynamic Content

    The new logo automatically changes on the front end for every Fullwidth Menu Module that you’ve set up to use a dynamic logo. We don’t have to change it on this page because it’s pulling the logo dynamically. For more information about using dynamic content with Divi, search the Elegant Themes blog for “dynamic content“.  

    Perform this set of steps for every Fullwidth Menu Module you want to use the dynamic logo. We recommend performing this task as you copy or create the headers.

    Now, let’s see how to edit the Divi logo so that it changes in the Fullwidth Menu Module.

    How to Change the Logo in Divi

    Next, let’s see how to tell Divi which logo to use. Every time you want to change the logo, perform the following set of steps. The logo changes dynamically, so Divi users never need to open the Fullwidth Menu Module to change the logo.

    Divi Logo Before

    To help understand what’s happening, let’s look at the logo on the front end of the site before and after the change. First, here’s a look at the current logo on my test site. This is set up in the Divi Theme Options.

    Divi Logo Before

    Change the Divi Logo

    To change the Divi logo, go to Divi > Theme Options in the WordPress dashboard. The first tab, General, has a field called Logo. It includes a field with the logo’s URL, a button to reset the logo to the default, and a button to upload a logo to the Media Library. I currently have a logo set, which is the logo seen in the Before image above. Upload or select the image you want to use. Select the Upload button.

    • Divi
    • Theme Options
    • 1st General tab
    • 2nd General tab
    • Upload

    Change the Divi Logo

    This opens the media folder where you can choose an image from the Media Library or upload a new image. Choose your logo and click Set As Logo in the lower right corner of the Media Library screen.

    • Select image
    • Set As Logo

    Change the Divi Logo

    Click Save Changes in the upper left corner of the screen above the Divi Theme Options. Now, every template that includes the Fullwidth Menu Module with the dynamic logo setting has automatically changed the logo to show your new logo.

    • Save Changes

    Change the Divi Logo

    Divi Logo After

    The front end of my site now shows the new logo, even though I didn’t open the Theme Builder and make changes there. This change was automatically reflected in every Fullwidth Menu Module that uses the dynamic logo.

    Divi Logo After

    As another example, when we open any of the templates in the Theme Builder, we’ll see the new logo. This example shows the Homepage Header Layout with the logo already updated with no further input from me.

    Divi Logo After

    Ending Thoughts

    That’s our look at how to use a dynamic logo in Divi’s Fullwidth Menu Module. The dynamic logo is easy to set up in the module. Using a dynamic logo can save a lot of time when changing the logo on a Divi website. Even if you only use one Fullwidth Menu Module, the dynamic logo simplifies the process. When using multiple modules, dynamic logos make an even larger impact on time savings and reduce mistakes.

    We want to hear from you. Do you use dynamic logos with your Fullwidth Menu Module? Let us know in the comments.

    The post How to Use a Dynamic Logo in Divi’s Fullwidth Menu Module appeared first on Elegant Themes Blog.

  • Download a FREE Category Page Template for Divi’s Online Yoga Layout Pack

    Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative where each week, we give away brand new freebies for Divi. This time around we’re building upon the Online Yoga Layout Pack with a brand new Category Page Template that matches the rest of the pack perfectly. Hope you enjoy it!

    divi layout

    Check Out The Online Yoga
    Category Page Template Below

    Get it for free today!

    Category Page Template for Divi's Online Yoga Layout Pack

    Category Page Template for Divi's Online Yoga Layout Pack

    Download The Category Page Template For The Online Yoga Layout Pack

    To lay your hands on the free Online Yoga Category Page Template, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our newsletter by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

    How to Upload The Template

    Go to Divi Theme Builder

    To upload the template, navigate to the Divi Theme Builder in the backend of your WordPress website.

    Online Yoga category page template

    Upload Website Template

    Then, in the top right corner, you’ll see an icon with two arrows. Click on the icon.

    Online Yoga category page template

    Navigate to the import tab, upload the JSON file that you could download in this post, and click on ‘Import Divi Theme Builder Templates‘.

    Online Yoga category page template

    Save Divi Theme Builder Changes

    Once you’ve uploaded the file, you’ll notice a new template with a new body area that has been assigned to All Category Pages. Save the Divi Theme Builder changes as soon as you want the template to be activated.

    Online Yoga category page template

    How to Modify The Template

    Open Category Page Template Body Layout

    To modify the template’s elements, start by opening the template’s body layout.

    Online Yoga category page template

    Inside the Body Layout Editor, you can edit the design on the front end using the Divi Builder just like you would with a normal Divi page.

    About the Template

    This category page template has a few dynamic elements that will work automatically including:

    • Category Page Post/Archive Title
    • Post Slider Module – displays the first three posts for the current category page.
    • Blog Module 1 – displays the first post content for the current category page.

    Here is a quick illustration that identifies the dynamic elements of the Online Yoga Category Page Template.

    Category Page Template for Divi's Online Yoga Layout Pack

    Updating the Template’s Dynamic Elements

    Category Page Title

    The Page title is added using a text module that displays the post/archive title as dynamic content. By default, the category page title is going to be the name of the current category.

    To edit the title, open the settings for the text module, click the gear icon to edit the dynamic element, then update the before and after HTML as needed.

    Category Page Template for Divi's Online Yoga Layout Pack

    Blog Module(s)

    Posts for Current Page

    Since this is a template that has been assigned to all category pages for the site, there are going to be one or more blog modules that are set to display posts for the current page. This is how the template displays the posts dynamically for each category page.

    Category Page Template for Divi's Online Yoga Layout Pack

    You can update the rest of the settings (like post count) to adjust the module elements and design. However, make sure to keep the option Posts for Current Page set to YES.

    Post Offsets

    If more than one blog module is used on the template, the post offset option is used in conjunction with the previous blog module to preserve the order of dynamic posts by picking up where the previous blog module left off. For example, if the previous blog module had a post count of 1, the next blog module will have a post offset of 1 to display posts starting at #2.

    Category Page Template for Divi's Online Yoga Layout Pack

    Keep this in mind when making updates to blog modules’ post count and offsets.

    Updating the Template’s Static Elements

    Some elements on a category page template will need your immediate attention before using it live on your own website. These elements are called static because they will not update dynamically.

    Email Optin

    To allow the Email Optin Module to show up in your design, you’ll need to link an email account.

    Category Page Template for Divi's Online Yoga Layout Pack

    Contact Form

    You’ll add your email address to the Contact Form Module to ensure you receive emails.

    Category Page Template for Divi's Online Yoga Layout Pack

    Update Other Category Page Static Content

    Other content that isn’t going to change dynamically should be updated as well. These include all modules displaying text, links, social media follow icons, etc.

    New Freebies Every Week!

    We hope you’ve enjoyed the Online Yoga Layout Pack and the Category Page Template freebie that goes along with it. We look forward to hearing your opinions in the comment section below. Make sure you check back next week for more freebies!

    The post Download a FREE Category Page Template for Divi’s Online Yoga Layout Pack appeared first on Elegant Themes Blog.

  • How to Access Different Libraries in Divi

    Organization can make a huge difference in the time and effort you put into a task. Having your trusted tools on hand makes the task that you’re working on move faster. This counts when building your website too. With Divi, we make sure you can have all your design elements within reach. This is done through the Divi libraries. You can access Divi’s various libraries in a variety of ways. In today’s post, we’re going to be looking at the difference between Divi’s libraries, where to find them, and how to use them. We’ll put a special emphasis on the new Divi Theme Builder library that allows you to organize your various templates as well!

    Let’s get to it.

    What is the Difference Between Divi’s Libraries?

    Fundamentally, most of Divi’s libraries operate in the same way. When you hover over a module, row or section, you can access a library filled with your past saved elements. When you click on the plus icon within an element you have two options: Add New Element or Add From Library. 

    The Add to Library Button can be found throughout the Divi Builder

    By clicking on Add From Library, you’ll be accessing the library of saved elements. In the screenshot below, we see what that looks like when trying to access the Module Library.

    Accessing the Add from Library section within the Module Popup

    However, how do we get elements into its’s library? Let’s quickly take a look at that before we ponder the difference between Divi’s library.

    How to Add an Element to Its Respective Library

    Let’s say you’ve made an amazing layout. The page looks great, your modules are where they’re supposed to be and you want to save the layout so that you can use it exactly on another page. To do that, we’ll click on the purple icon in the middle of the screen with the three dots. This will open up the menu for the page.

    Preparing to add an element - a layout - to it's library

    From there, we’ll click on the Save to Library icon. Remember this icon, as it is used within to add Divi’s different elements to their respective library.

    Adding a layout to the Layout Library

    Once this step is complete, we see the Save to Library Modal Box. At the bare minimum, we assign a name to our layout and click the blue Save to Library button. You can further organize your library by adding it to a category, or taking your organization and – and workflow skills – up a notch by saving your layout to the Divi Cloud, so that you can use it across different websites.

    Saving our layout to the Divi Layout Library

    With our layout saved, we can now further explore the difference between Divi’s libraries

    Working with Divi’s Layout Library

    In Divi, an element is a module, row, section, and layout. Anytime we save one of these – outside of Divi Cloud – it is stored in the Divi Layout Library. Divi’s Layout Library allows us to access saved elements. It also allows us to organize our elements. We can create categories, manage tags and we can also import or export elements within the Divi Layout Library. Notice that if an element is global, it has a green globe next to it.

    An inside look at Divi's Layout Library

    Also notice how there is a column within the Divi Layout Library screen, called Type, that shows the family an element belongs to. Our new element, the Divi Choco Landing page, is denoted as a layout. Layouts may consist of multiple sections, rows, and modules. Sections can hold multiple rows and modules, but they can only be comprised of one section. Rows are encompassed of a number of columns and modules. Again, we can only have one row saved as an element within the Divi Layout Library. We can save modules can be saved separately from rows, columns, and sections within the Divi Layout Library.

    The Section Library

    To access the Section Library, we first click on the blue plus icon underneath any section within the Divi Builder.

    Accessing the Divi Section Library from the Divi Builder

    After, we immediately see the option to add a new, empty section to our page. However, we also have the option to access the sections that we have saved within the Divi Layout Library – or Divi Cloud – at our disposal.

    Divi Section Library

    If you are logged into your Elegant Themes and Divi Cloud account, you’ll see your avatar at the top right, as well as the location My Divi Cloud added to your Locations menu. By clicking on the thumbnail of our section element, we have three options. We can see a live demo of the section, use it as is, or edit it with the Divi Builder. In addition to this, we can also favorite it and move it to Divi Cloud.

    Managing the Divi Section Library

    Managing Divi’s Row Library

    We take similar steps to access the Row Library. Except, we now will click on the green Add a New Row button.

    Adding a new row via the Row Library

    Then, we’ll select Add from Library to see the rows that we have saved within our Divi Layout Library.

    The Divi Row Library within the Divi Layout Library

    Remember that you cannot save multiple rows into one element. If you want to save multiple rows, you would have to save said rows within a section. Next, you would need to add that section to the Section Library.

    Benefits of The Module Library

    The Module Library allows you to save individual modules. Personally, this is my most used library. The Module Library also allows you to save third-party modules, like those found on the Divi Marketplace, within the Module Library. Whenever you have the option to add a new module, you can also add modules from within the Module Library through the Divi Builder.

    The Divi Module Library - with Global Modules - inside the Divi Layout Library

    Notice in the screenshot above that we have a few Blurb Modules and an Accordion Module. They are all Global Modules, which we can tell by the green globe icon that is in the bottom right.

    Introducing Divi Cloud Library

    With the introduction of the Divi Cloud Library, a major difference between Divi’s libraries emerges. So far, all of our elements — modules, rows, columns, and layouts — have been local, on our web host of choice. With Divi Cloud, we can save these same elements in the cloud, and access them across multiple websites. No longer will there be a need to export and import elements between websites. By simply having a Divi Cloud account, the header you made on website A can be accessed and used on website B through Z.

    A snippet of the Divi Cloud Library

    To access elements saved onto Divi Cloud, select My Divi Cloud from the Locations menu to the left of the modal window that opens when you got to add a new element. You will also notice that a blue cloud shows up in the bottom right-hand corner of the element to show that it is an element from within your Divi Cloud Library.

    The Divi Theme Builder Library

    The new kid on the block, Divi’s Theme Builder Library adds a ton of spice to our libraries. With Divi’s new Theme Builder Library, not only can we save header, footer, and body templates, but we can also save their respective assignments as well.

    Save to the Divi Theme Builder Library

    What does this mean? If we have created a Blog Post Template that will apply to All Blog Posts across our blog, we can save this into the template that we will then save into the Divi Theme Builder Library. When we couple this now with Divi Cloud, we can take this exact same template, with it’s assignment to All Blog Posts, and add it to a completely new Divi install. This helps us save time when building websites, optimizing our workflow and saving us time and energy.

    Inserting templates into the Divi Theme Builder

    This can be taken a step further when we bring in Template Sets into the equation. This highlights a key difference between Divi’s libraries. Whereas on an element level, we could only save a single element or a group of elements into a single layout. With the Divi Theme Builder, we can create our own layout packs and also keep the pages, posts, products etc. to which they were assigned at the click of a button.

    Exporting and saving Theme Builder Sets within the Divi Theme Builder Library

    In Conclusion

    The various libraries that come with Divi allow us to organize the various elements that we use. On a day-to-day basis, we can have access to our favorite designs, layouts, and more by saving elements to their respective libraries. When we add Divi Cloud into the mix, we can take our beautiful assets to different domains and web hosts. Time is saved across our web building processes as we now have a more elegant solution to managing the assets that we have created in Divi.

    The post How to Access Different Libraries in Divi appeared first on Elegant Themes Blog.