In this blog post, we are going to explore on 5 quick tips that help you build better pages in Divi by using the hidden features in the Divi Builder.
The new version of Divi brings in a lot of features that come to your assistance. These features allow you to build an elegant website with some powerful marketing driven sections. A lot of things that takes complex coding is just made simple with Divi and they made it simpler than ever. Let’s take a quick look at the 5 tips that we are going to cover in this post.
- Custom Font Upload
- Divi History
- Disable Footer Credits
- Gradient to Background Image
- Scroll to Anchor Position
Custom Font Upload
Divi comes preloaded with almost 500+ fonts and most of the time you should be able to get the desired font. But there should be times when you need to use a custom font. Normally in WordPress, you would need to follow several steps like converting the font to webfont, uploading it via FTP and write a custom CSS to include the font and use the styles wherever required. The bad part of this is you might screw up your site, working all the way through this process.
With Divi you can do this pretty easily via the Divi Builder itself. Divi has inbuilt features that allow you to upload and use custom font almost instantaneously. Another amazing feature is that you can add your Google API key to the theme options which keeps your font list updated automatically, every time a new font is added to Google.
On Divi Builder, add a Fullwidth Header module. After the module is inserted, click the module settings icon (the hamburger menu) on the left of the module.
On the module settings popup modal, select the Design tab and scroll down a bit until you see the Title Text section.
On clicking the font selection dropdown of the Title Font, you can unveil the upload option!
Click the upload option and provide a new name for the font that you are trying to upload. Click on Choose Font Files to select the font and upload it to Divi.
After the font is uploaded, you should be able to see it on the list instantaneously and is ready to use.
Like the way we have revisions in WordPress, Divi Builder has a record of all the editing activities you have done during a particular session and they call it “Editing History”. You can review the complete history by scrolling down the history and the feature allows you to redo and undo. The beauty here is, Divi allows you to go to a particular point in history with just a single click whereas on the default WordPress dashboard it is quite difficult to move forward and backward.
To view the Editing History panel, edit the page in Visual Builder and on the bottom of the page you would see a docked purple icon with three dots in it. Clicking on the docked icon expands itself to reveal a set of icons. The history panel can be accessed by clicking the clock-like icon on the 2nd right.
On the panel that loads, you would see all the changes that you have done on the page during this session. Please make a note that the very first time you load this one, the list would just have one state that says “Loaded Page”. As when you proceed doing further edits, they would be logged automatically and you can start to see them on the history states.
Did you notice the 4 icons at the bottom of the panel above? Those give the option to Discard All Changes, Undo, Redo and Save Changes. The “Undo” and “Redo” will take you backward and forwards in your editing actions one step at a time and you can use them as many times as you like. As you proceed to use those options, you would notice that your page will update almost instantaneously.
The “Discard All Changes” will discard anything that you’ve done in that session – useful for when it all goes wrong and you’d like to go back to the beginning.
The “Save Changes” will save any changes that you’ve made to your editing actions using either “Undo”, “Redo” or the History States.
Once you have made the choice of History State that you want to revert back, you can click the “Save Changes” icon on the bottom toolbar to save the page.
Disable Footer Credits
This is one feature that most of us would love to see when using a theme. For many reasons, you’d like to remove the “Powered by WordPress” text in the footer. You may choose to remove it completely or replace it with your own content. WordPress being an opensource platform it gives us the liberty to change it and you need not worry about any legal matters.
It always takes a lot of effort to search through the footer code and remove the default credits that appear in the footer. Most of the time, this would be available in footer.php file in the theme folder. But a novice user would find it hard to figure out the code and edit it.
Divi Builder allows you to remove the credits quite effortlessly. Again there are several ways to do it, but the easiest of them is to get it done through the Theme Customizer. From your WordPress dashboard go to Divi > Theme Customizer.
On the Customizer page, scroll down to find the “Footer” option and click on it. On the next screen, choose “Bottom Bar” where you get to see the required option
As you see, you can either choose to remove the footer by clicking on “Disable Footer Credits” checkbox or replace it with your own content by keying in the “Edit Footer Credits” section below.
Adding Gradient to Background Image
This is one of our favorite feature of Divi. Any hero or header image would require some sort of effects to be added to it so as to make it look better. In such cases, you would normally use an image editing tool like Photoshop to edit the image and then upload it to WordPress.
Let’s say you have a brighter image with clear sky or beach background and you want to place your header text over it. In such cases, you might require to darken up the background image a bit so that the text on the foreground is readable.
The Divi Builder has several features to enhance the image and one such feature is to add a gradient to the background header image. To do this, launch the Visual Builder and click to edit the header/fullwidth slider image settings. On the Content tab, scroll down a bit and click on Background. In that section, click on the Gradient tab which is the 2nd option that allows you to add the gradient.
Based on the chosen image, you may choose to add appropriate color to the gradient. In our case, we have used the following settings:
- First Color: rgba(85,146,193,0.16)
- Second Color: rgba(0,0,0,0.27)
- Gradient Type: Linear
- Gradient Direction: 45deg
- Start Position: 6%
- End Position: 60%
Once you are done adding the desired colors and settings to the gradient, don’t forget to check the next option. Yes, you should enable the “Place Gradient Above Background Image” so that the gradient will be positioned on top of the background image, adding a nice effect to the image.
Next, you can go about adding the background picture to the slider. On this section, you will find several other options (like the “Background Image Blend”) that helps you get the desired result. Please feel free to explore those.
Scroll to Anchor Position
This feature comes handy wherever you need to anchor link to a particular section of the page. On a long scroll page, the anchor links can improve navigation and help organize your content as sections. Sometimes it gets complex with Divi when you notice that on clicking a link Divi does not position the section to the exact position of the anchor. There will be an offset in the positioning which is caused due to some unknown reasons.
You can have this issue fixed with a simple option available under the Divi Options. From the WordPress backend, choose Divi > Theme Options. On the screen that loads, click the Navigation tab and enable the option “Alternative scroll-to-anchor”
Enable this option to use as an alternative method for scrolling to anchors which can be more accurate than the default method.
Hope you find these simple tips useful and it comes in handy while you build your next project in Divi. You can also follow these tips to update your existing site and make it look/function better.
In case you want our expertise in building your website, please feel free to reach us. We are here to assist you always.