background preloader

Divi

Facebook Twitter

Daily Divi Contents. Elegant Themes Blog. The Complete Divi Icon Set. Hopefully you have had a chance to download our latest theme, Divi.

The Complete Divi Icon Set

As mentioned in the Theme Launch Post, we will be launching a Divi-related post on our blog every day for the next 12 Days of Divi. Be sure to tune in each day for the next twelve days to get your hands on tons of Divi-related tips and resources! If you haven’t checked out Divi yet, then click the link below to view the release post with all the juicy details, and for your chance to win a free Lifetime Membership!

On The The Second Day Of Divi. How To Use And Embed An Icon Font On Your Website. Last week we released a pack of 100 line-style icons.

How To Use And Embed An Icon Font On Your Website

Today we are releasing those exact icons in the form of a 100 piece icon font along with an extensive tutorial about how to use them. Icon fonts are great for their scalability on high-resolution displays and they can be treated and styled exactly like text. Below are steps to embed and use icon fonts on your very own website. Note that Icon fonts do not work in some Windows mobile browsers. Download The Font Pack Embedding an Icon Font 1. Custom Fonts in Divi. Quick Snack: Adding Custom Fonts with CSS - Divi Soup.

Here is another Quick Snack for you.

Quick Snack: Adding Custom Fonts with CSS - Divi Soup

Recently quite a few people have been having issues adding custom fonts with css to their Divi website instead of using a plugin. Geno wrote a great tutorial recently on adding new Google fonts but today I am going to show you how to add non-google fonts. So let’s get cooking! The Divi Theme or Divi Builder Plugin from Elegant ThemesYour chosen font files (.ttf, .otf, .woff or whatever format you will be using.)FTP or cpanel access to create a new directory. This should take you around 5 minutes max. The first thing we need to do is create a new directory to hold the fonts, this need to be in your child theme directory so ‘wp-content/themes/your-child-theme-name’.

The open up the folder and upload your fonts. Now we need to load our fonts, so open up your child theme style.css file or navigate to Appearance>Editor and you will see it there. You will need to change the font family and URL to match that of the fonts you are using. 5 Unique Button Styles You Can Achieve With Divi’s Button Module. Welcome to Day 82 of our Divi 100 Marathon.

5 Unique Button Styles You Can Achieve With Divi’s Button Module

Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series! In this post, we’re going to look at Divi’s Button Module and show you how to style it in five unique ways. The button module is one of the most popular of all the Divi modules because it’s so versatile and useful for getting site visitors to help you achieve your objective in a given post, page, or section. Therefore, it’s very important that we as designers and developers make these buttons appealing and eye catching. Let’s dig in and find out what’s possible with Divi’s Button Module! The Default Button Module Before we get started, let’s take a look at what the Divi Button Module looks like by default. Adding Images to Your Divi Mega Menu. We love to interact with images online.

Adding Images to Your Divi Mega Menu

In fact, we expect it. Pinterest, Facebook, and Instagram continue to prove this. With that in mind, it makes good sense to add an image to your website whenever possible. And, adding images in a mega menu is another great opportunity to give your users the interaction they need. Adding images to a mega menu is a smart solution to improve the navigation of your website. There are useful plugins out there that will do this for you. How to Create a Fullwidth Gallery with the Divi Gallery Module. This post is part 1 of 5 in our mini series titled 5 Impressive Divi Gallery Layouts and How to Create Them.

How to Create a Fullwidth Gallery with the Divi Gallery Module

Stay tuned for all five unique examples of the gallery module and tutorials on how to achieve them! Galleries are one of the most important tools in web design today. Whether you’re a designer wanting to showcase your work, a photographer wanting to display your photos, or a business wanting a prominent portfolio–-the need for online galleries goes on and on. With the Divi Gallery Module we can create awesome, eye catching galleries that’ll draw in our website visitors.

Add a reading progress bar. In today’s post, I want to demonstrate how a reading progress bar can improve visitor engagement, simply by encouraging the reader to read on.

Add a reading progress bar

They give readers the means to gauge how much of a blog post remains, which allows them to manage their time more effectively. Before we start, though, what is a reading progress bar? In a nutshell, a reading progress bar is a visual representation of how much of a blog post remains. It achieves this by tracking the visitor’s position on the page. As they scroll down, the bar begins to fill, indicating how much progress they’ve made. It’s a simple idea, but one that several websites use with positive results. How To Restrict Access To Areas Of Your WordPress Website. Back in May we wrote a blog post about the various ways to use WordPress and some plugins to restrict access to your website.

How To Restrict Access To Areas Of Your WordPress Website

These solutions applied to whether it was only certain sections or the entire site. Today I’ll expand on Kevin’s post and show you how the restricting access idea works and how you can use it with one of our themes. How to Share Code Snippets in Your WordPress Posts and Pages with Style. Have you ever tried to just copy and paste code snippets into WordPress?

How to Share Code Snippets in Your WordPress Posts and Pages with Style

It flat out doesn’t work! WordPress has no way of differentiating between a code snippet you want to display as source code and a code snippet you want to be rendered. If you often need to share code snippets with your readers, you definitely need a better way. And that’s what this post is all about: the best tools and plugins to help you add stylish and easily readable code snippets to WordPress. The Built-in WordPress Method for Sharing Code Snippets Let’s start at the beginning: How to Add a Table of Contents to Your WordPress Posts & Pages. In-depth, long-form articles are great for getting all of the information you’ll need on a subject, but wading through them can take up precious time that you don’t have – this is the Information Age after all.

How to Add a Table of Contents to Your WordPress Posts & Pages

One of the best things you can do to improve user experience when reading mammoth posts is to implement a table of contents into your articles. That way, visitors get to skip the content they’re uninterested in, and read the important parts immediately. Hide the Divi Logo on a Single Page. Welcome to Day 18 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!

It’s Friday and Divi 100 Marathon or not, that means its time for the Divi Nation Podcast. This week we’ve got a Divi Nation Short for you featuring our new Divi video tutorial specialist Augustine Mak. It’s his first appearance on the podcast but I can assure you it will not be the last. Header Styles And Design Settings. Last week we introduced Divi 2.4, the biggest upgrade in Divi history and a giant leap forward for our most popular WordPress theme.

There are so many great features to explore in this update that it was hard to describe them all on the release post, which is why we have decided to do a 2-week series of informational blog posts that will aim to teach you how to take full advantage of Divi 2.4 and its new options. In part six of this series, I will walk through the many new ways you can customize your website’s navigation header. Learn All About Divi 2.4 Here The All New Header & Navigation Customizer The the customizer gives you so much more control than you had before. Brand New Header Formats Two settings that are new to the “Header Format” tab are the Centered Inline Logo header style and the Hide Navigation Until Scroll setting. Centered Inline Logo. Use The Custom CSS Tab and The Divi Library. Last week we introduced Divi 2.4, the biggest upgrade in Divi history and a giant leap forward for our most popular WordPress theme.

There are so many great features to explore in this update that it was hard to describe them all on the release post, which is why we have decided to do a 2-week series of informational blog posts that will aim to teach you how to take full advantage of Divi 2.4 and its new options. In part ten of this series, I’m going to explore the new Custom CSS options and how you can use them alongside the Divi Library in lieu of adding custom css with a child theme.

Learn All About Divi 2.4 Here The All New Custom CSS Tabs in Divi 2.4 Sections, Rows, & Modules all have their very own Custom CSS tabs in the Divi Builder. Section & Row Custom CSS Options Sections and Rows let you define custom css for the main element, which is the whole section or row element in the html, and both the :after and :before pseudo elements. Easy To Use Divi Snippets & Hacks. Hack pour le menu version mobile > condenser au 1er niveau. Do you have 30 seconds to improve your Divi mobile menu? If so, then you’re going to love today’s Divi Nation Short. In it I’m going to show you how to collapse nested menu items so that mobile visitors can navigate large and/or busy mobile menus more easily. Divi Mobile Menu Hack: Collapsing Nested Sub Menu Items Podcast: Play in new window | Download Subscribe: iTunes | Android |

Make Divi Accordions Closed by Default. How to Add a One Click WordPress PDF Download. Adding a downloadable Portable Document Format (PDF) file to your WordPress website is ideal for offering all manner of exclusive content designed to help grow your email list. However, the options for adding them to your WordPress website are often lacking. How To Customize The WordPress Login Page. The WordPress login is one of the most used pages in the WordPress admin. Though simple and clean, it is heavily branded WordPress. However, most new users and clients do not need to know about the underlying software your site runs on.

How to Add Parallax Elements and a Slide-Down Transition to the Divi Slider Module. How to Style the Divi Slider with a Static Description Text. How to Style Divi’s Slider Module for a Bold Team Members Area. 5 Ways to Get Creative with Divi’s Person Module. Divi Commerce. WooCommerce and Divi play well together. 10 Tips for Local Business Marketing (For You or Your Clients) Free Divi Blog Post Layout Pack Will Take Your Builder Powered Articles To The Next Level.