#Divi UI Kit

[lathiyasolutions-blog]

A Detailed Comparison of Divi vs Elementor: Which One to Build With in 2025?

When it comes to building stunning WordPress websites without touching code, Divi and Elementor stand out as two of the most powerful and popular page builders available. As of 2025, both have evolved significantly, offering robust features, sleek interfaces, and seamless integrations — but which one should you choose?

Whether you’re a designer, developer, or business owner aiming to create a high-performing website, this in-depth comparison will help you make the best choice between Divi and Elementor for your project goals in 2025.

Overview: What Are Divi and Elementor?

Divi is a visual page builder created by Elegant Themes. It offers an all-in-one solution that combines a theme and builder into one package.

Elementor is a standalone page builder plugin that works with nearly any WordPress theme. It has a free version, but most professionals go with Elementor Pro for access to advanced tools.

1. Ease of Use

Divi has a true front-end visual editor that allows drag-and-drop editing, inline text updates, and responsive controls. However, some users report a learning curve, especially when adjusting fine-grained settings.

Elementor is praised for its clean, intuitive interface. Editing in real time is incredibly smooth, and it’s beginner-friendly without compromising on advanced controls.

If you value speed and ease of use, it’s no surprise many businesses choose to hire Elementor developer teams to streamline their project delivery.

2. Design Capabilities

Both Divi and Elementor are loaded with design modules and flexibility, but they differ in approach:

Divi offers a vast library of templates, animations, hover effects, and design presets. It’s very customizable — perfect for design-heavy websites.

Elementor provides pixel-perfect control, motion effects, global widgets, and flexible layout control. The Theme Builder allows full design control of headers, footers, and dynamic templates.

Whether you want a visually rich brand presence or want to design a mobile-friendly website with Elementor, both builders are equipped to handle the task — though Elementor may give you more precise layout control.

3. Performance & Speed

Speed is crucial in 2025 — not only for SEO but for user experience:

Divi has made notable improvements in performance, with caching enhancements and optimized code output. However, it can still be resource-heavy if not managed properly.

Elementor has consistently focused on speed, with a leaner core, modular scripts, and new performance-focused features in Pro versions.

Verdict: Elementor edges ahead with better speed optimization out of the box.

4. Theme Building Features

Both builders allow you to go beyond page editing and control your entire site layout:

Divi introduced its Theme Builder to allow custom headers, footers, and dynamic templates. It also supports WooCommerce and custom post types.

Elementor Pro’s Theme Builder is more mature, with tight control over every aspect of the site and powerful dynamic content integration with ACF, CPT UI, and more.

Verdict: Elementor has the edge for dynamic, large-scale site builds.

5. Templates & Blocks

Divi comes with 2,000+ pre-designed layouts and over 200 full website packs. Its layout packs are very polished and industry-specific.

Elementor also has a vast library of templates and blocks, and its Pro version includes full-site kits — great for fast deployments and consistency.

Verdict: Divi wins on volume and variety; Elementor offers better template flexibility.

6. Third-Party Ecosystem & Add-ons

Divi has a growing ecosystem of third-party plugins and child themes, but it’s smaller compared to Elementor.

Elementor benefits from a huge ecosystem with hundreds of free and premium add-ons. From advanced widgets to custom builders, the third-party support is unmatched.

Verdict: Elementor has a stronger plugin and add-on community.

7. Pricing in 2025

Divi is offered with one-time lifetime access or annual plans, covering unlimited sites. The value is excellent for agencies or freelancers handling multiple projects. If that’s your case, you might want to hire Divi theme developer experts to make the most of that investment.

Elementor Pro is priced yearly and has a tiered plan based on the number of sites. It’s more scalable and flexible for solo developers or small teams.

Verdict: Divi is cost-effective for unlimited projects; Elementor is more flexible for smaller use cases.

8. Customer Support and Documentation

Divi offers 24/7 support, a huge documentation library, and a vibrant user community.

Elementor provides email support for Pro users, a detailed knowledge base, forums, and a strong community on platforms like Facebook and Reddit.

Verdict: Both offer excellent support, but Divi’s live chat and lifetime access add extra value.

9. SEO & Mobile Responsiveness

Divi allows responsive editing, but its default output can be a bit bloated if not optimized carefully.

Elementor shines in mobile editing with detailed responsive controls. Its performance-centric updates also give it an SEO advantage.

Verdict: Elementor leads in SEO and mobile-first design features.

10. Learning Curve

Divi might feel overwhelming at first due to its packed UI and multiple customization layers.

Elementor is more beginner-friendly, with a faster learning curve and intuitive design flow.

Verdict: Elementor is easier to pick up for most users.

Final Verdict: Divi or Elementor in 2025?

Both Divi and Elementor are excellent tools — the right one for you depends on your priorities:

Choose Divi if you want all-in-one value, beautiful design templates, and a lifetime plan that saves money in the long run.

Choose Elementor if you want unmatched flexibility, blazing performance, and an ecosystem built for scalability and advanced functionality.

Want more tips, side-by-side demos, and WordPress design inspiration? 👉 Follow us on Instagram —we’re always sharing what’s new, what’s working, and what’s next in WordPress development.

[codelimd]

Best 30 Divi Modules in the Venus Divi UI Kit V1.4.5

[doylerose7]

Créer un site WordPress de A à Z (2018) - Tuto Débutant 👍

Hébergement -15%: http://bit.ly/02Switch-Promo Thème Divi -20%: http://bit.ly/DIVI-20 * SUITE: 3H offerts de la formation Divi PRO: http://bit.ly/2HeqV9M Comment créer un site internet de A à Z avec WordPress, en utilisant le meilleur thème au monde en 2018 : DIVI ! ** Version 2018 de la vidéo Tony Cage Fitness ** Tout vous est expliqué étape par étape, avec les meilleures méthodologies pour créer un site web professionnel ! ---- Apprenez à utiliser WORDPRESS dans un cas concret d'utilisation ! - Création de pages web accessibles directement en ligne. - Création de l'ergonomie en pensant la structure de votre site - Création de l'arborscence complète du site, des menus, de la logique de navigation et de conversion ** Adapté aux débutants : PAS DE CODE PAS DE CONNAISSANCES PRÉALABLES Tout est facile et expliqué de A à Z, voilà tout ! =) Vous allez créer votre site comme un pro étape par étape, en suivant la vidéo. Vous apprendrez aussi à : Penser l'interface utilisateur, et la cohérence graphique globale (les bases) pour un site web professionnel, quelle que soit la page et même le support, vous aurez toujours un design pro : blog, email, pub facebook, adwords, ebook, ... Objectif : créer votre site WordPress, le mettre en ligne et le personnaliser à 100% avec un design professionnel (cohérence graphique). Cela permet d'avoir un site qui convertit et qui vous rapporte donc de l'argent. Le site que vous allez créer va aider votre business à prospérer et croître. ---- PLAN DE LA FORMATION : Partie technique : - Introduction : 00:00:00 - Démo du site web créé : 00:01:05 - Fonctionnement du VISUAL BUILDER : 00:03:15 - Etapes pour la création du site: 00:05:45 - Mettre votre site en ligne (hébergement et nom de domaine): 00:06:15 - Installer WordPress: 00:10:20 - ** Votre Site ONLINE - démo : 00:15:00 - Installer Divi : 00:16:00 Création du site : - Explication sur l'interface de Divi: 00:18:30 - Création du header : 00:21:10 -- explications sur les polices - 2 sections pour les services (coachings) : 00:28:15 - Etapes dans la création du site : 00:30:40 -- Logique de conversion pour un site web rentable (00:31:10) -- Arborescence du site (00:31:45) -- Charte graphique et cohérence globale (UI kit) (00:33:00) -- Nos 3 valeurs pour la création de site en tant qu'agence (00:34:55) - 2 sections pour les services (coachings) suite : 00:35:25 - Rajouter un Logo et une favicon : 00:48:00 - Configuration de la palette de couleurs (selon UI kit) : 00:48:50 - Création du menu et de l'arborescence du site: -- Créer les différentes pages : 00:50:40 -- Créer une page enfant/parent : 00:52:20 -- Configurer le MENU du site: 00:53:20 - Configuration des options de base du thème DIVI: 00:55:30 - Module Cours de Fitness - CTA : 01:03:15 - Module CTA - élèves : 01:08:20 -- Création d'un Divider : 01:09:55 - Création d'un site client, nos valeurs et priorités : 01:15:20 (Créer une partie All Modules, favoriser l'autonomie du client & le rendre indépendant dans sa gestion du site...voir aussi début de vidéo : étapes dans la création du site) - Module CTA - blog : 01:18:00 - Section avec effet parallax : 01:20:20 - Bloc pour la réservation : 01:28:50 - Ajouter une section (ou ligne ou module) à la bibliothèque Divi : 01:28:50 - Explication sur la formation divi pro complète : - Créer la page de contact : 01:38:40 - Création du header : 01:39:30 - Ajouter une carte google maps : 01:40:30 -Créer un formulaire de contact : 01:46:30 - Layouts Divi : 01:49:05 - Introduction à la Formation Divi Pro : 01:54:05 Pour continuer à apprendre Divi pour faire des sites WordPress professionnels, profitez de 3H gratuites de la formation Divi Pro : http://bit.ly/2HeqV9M [Read More ...]

[mbthemes]

via Twitter https://twitter.com/mwaghmare7

[responsivesites]

New Post has been published on Website Design Naples Florida Webmaster

New Post has been published on https://vinbo.com/download-a-free-black-friday-ui-kit-landing-page-layout-for-divi/

Download a FREE Black Friday UI Kit Landing Page Layout for Divi

Hey Divi Nation, welcome to a special video featuring an exclusive Divi Layout only available to Lifetime Members and those who take advantage of our Black Friday sale. In this video, we are going to show you how to use the free UI Kit layout.

If you’re a new customer during the Black Friday and Cyber Monday sale or an existing Lifetime Member you can download this new layout by clicking the link below:

https://www.elegantthemes.com/members-area/upgrade/black-friday-2018/download

Get 25% Off Divi, 6 Free Layouts, and MORE here:

https://www.elegantthemes.com/blackfriday

If you’d like to follow along with this tutorial but I’m moving a little too fast for you, we’ve written it up as a blog post here:

Using Divi’s Exclusive Black Friday UI Kit Layout to List Products & Features Beautifully

[siliconwebx]

Divi Plugin Highlight: Divi Den Pro

Divi Den Pro is a third-party plugin for Divi that integrates a cloud filled with 1000’s layouts and modules for the Divi Builder. It includes lots of page layouts, modules, PSD’s, icons, button hovers, and customizations. It also adds features to the theme customizer such as a login editor and the ability to assign archive and 404 pages. It also includes white labeling. In this article, I take a look at Divi Den Pro and see what it offers and how easy it is to use.

Divi Den Pro Activation

Upload and activate the plugin as normal. In the dashboard menu, go to Divi Den Pro and enter your license key.

Divi Den Pro Layout Finder

Once you activated the account, the screen will then display the Layout Finder with layouts, a search feature, filters, and tabs for more tools. It’s currently showing 1071 results, which includes layouts and modules. This example shows styled button modules.

On the left, you can search or click on any of the filters to help narrow down your choices. Filters include free, pro, or all, collections, categories, Divi modules, page packs, page types, and UI kits. You can use the filters together. It also includes a button to clear all filters. The filters will also clear when you leave the page.

Opening one shows the options within that filter along with the number of layouts for each option. In the example above, I’ve selected the Category / Topic filter. It has 234 layouts. Within it are dozens of topics. You can click on one at a time. I’ve selected Coach & Personal, which displays 3 layouts.

Hovering over a layout makes it scroll so you can see the entire layout. Across the top, it shows the name, category, type of layout, and the package that it’s found in.

Clicking on any of the tags shows all of that type of layout. It’s the same as selecting it in the filter.

Clicking View opens a new tab and goes to the layout’s demo page where you can see it as a normal website.

It has 808 styled modules to choose from. Here’s a look at a few of the 117 blurbs.

Clicking Save downloads the layout and adds it to your Divi Library. You’ll see a message that the layout is being added to your library, and then a popup alerts you when it’s finished. It doesn’t indicate in the layout screen if you’ve added a layout to your library, but if you try to save a layout that you’ve already saved it shows you the success popup again.

The layouts are added to your Divi Library where you can use them like any layout. They include categories and type.

The Layout Finder is also added to the Divi Builder when using the Classic Builder. When you select to load a layout you’ll see Divi Den Pro to the far left at the top. This works the same as the Layout Finder in the dashboard menu. Currently, the Layout Finder tab isn’t added to the new builder.

I didn’t get the images for the saved layouts to show, but that could have been a problem on my end.

Divi Den Pro Custom CSS Files

Some of the layouts require custom CSS to work. Fortunately, this is provided. The Custom CSS Files tab includes links to CSS for specific bundles. It also provides information and a link to a detailed video on how to use them.

Divi Den Pro White Label

The white label feature lets you add your own branding to the dashboard screen. It changes the plugin’s name, URL, icon, author name, author URL, description, and contact page. The white label feature is disabled by default. When choosing a name, keep in mind the name isn’t just a label. It’s also used as the URL for the settings screen. Be sure to use proper URL naming conventions (in other words, I don’t recommend using symbols).

Advanced settings let you enable features such as update notifications, hiding the name in the dashboard menu, hide the plugin panels in the customizer, and hide the premade layouts tab.

Divi Den Pro Theme Builder

The Theme Builder makes it easy to customize your website without having to modify your theme’s PHP files. Use pre-made layouts for archive pages for categories, authors, and tags. This is one of the more interesting features.

Utility pages include search results, 404 page, coming soon, sticky bars, and popups. Popups include contact forms, portfolios, contact info, pricing, etc. It also has several sidebars. It currently has 43 layouts to choose from.

Here’s a look at the sticky bars. There are 9 to choose from. They include events, holidays, sales, etc.

Navigation templates include a mega menu and a navigation menu.

Save the layouts you want to use and then assign them to their pages in the theme customizer. Three new tabs are added: pages settings, blog settings, and global settings.

Pages Settings

The Pages Settings let you choose the search results template, 404 page, and the coming soon page.

Blog Settings

Blog Settings include the archive templates for global, category, tag, and author archive pages, and the template for the single blog post.

Choose the page layout and adjust all of the fonts including the headers, body, author bio, comments, meta, etc.

Global Settings

Global Settings include the navigation menu, header, headings, sticky bar, pop-up customizer, login customizer, footer, and new icons. As expected, these settings are site-wide.

The sticky bar lets you choose the template, the location, when it displays, the time delay, the number of days before it shows again, and a close button.

The popup customizer lets you choose the popup, set when they show, the time delay, exit intent, show at a percentage of the page, and the number of days before it shows again.

The login customizer lets you see the login screen as you customize it. Choose the layout, change the color, logo, fonts, and buttons.

For icons, it adds Font Awesome 5 and Material Design.

Divi Den Pro Tutorials

The Tutorials tab provides a list of toggles with detailed videos on how to use the plugin. You can watch the videos from here or view them on YouTube.

Divi Den Pro Support

The support form is built into the plugin’s dashboard menu in a tab called Support. Here, you can provide all the information about your request. You can also click the Browse Knowledge Base button to see written articles.

This opens the knowledge base at the developer’s website in a new tab where you can search, select categories, and select the most popular articles.

Divi Den Pro Price

There are three purchase options:

1 website – €12 per month, €49 per year

5 websites – €14 per month, €120 per year

Unlimited websites – €21 per month, €189 per year

Ending Thoughts

Divi Den Pro is an intuitive and interesting plugin. All of the layouts and modules are well-designed. There are new layouts and modules added on a weekly basis. The layout tab is only added to the Classic Divi Builder, but they are working on adding it to the Visual Builder. It’s easy enough to add the layouts to the library and then use them from there.

There are a lot of support and tutorials in the form of a contact system, articles, and video. Fortunately, I found it intuitive enough that I didn’t need to use it.

I found the Theme Builder especially interesting. This feature sets Divi Den Pro apart from other cloud-based layout plugins. I’m impressed with the hidden features in the theme customizer. I didn’t expect to see a login editor that allows you to see the login screen as you edit, hundreds of icons from Font Awesome and Material Icons, sticky bars, and popups.

If you’re interested in added a cloud-based library of layouts, modules, and new tools to Divi, Divi Den Pro is worth a look.

We want to hear from you. Have you tried Divi Den Pro? Let us know what you think about it in the comments.

Featured Image via Golden Sikorka / shutterstock.com

The post Divi Plugin Highlight: Divi Den Pro appeared first on Elegant Themes Blog.

😉SiliconWebX | 🌐ElegantThemes

[wordpressupdates]

Using Divi’s Exclusive Black Friday UI Kit Layout to List Products & Features Beautifully

http://dlvr.it/Qs0cHw

[derekglieber]

Créer un site WordPress de A à Z (2018) - Tuto Débutant 👍

Hébergement -15%: http://bit.ly/02Switch-Promo Thème Divi -20%: http://bit.ly/DIVI-20 * SUITE: 3H offerts de la formation Divi PRO: http://bit.ly/2HeqV9M Comment créer un site internet de A à Z avec WordPress, en utilisant le meilleur thème au monde en 2018 : DIVI ! ** Version 2018 de la vidéo Tony Cage Fitness ** Tout vous est expliqué étape par étape, avec les meilleures méthodologies pour créer un site web professionnel ! ---- Apprenez à utiliser WORDPRESS dans un cas concret d'utilisation ! - Création de pages web accessibles directement en ligne. - Création de l'ergonomie en pensant la structure de votre site - Création de l'arborscence complète du site, des menus, de la logique de navigation et de conversion ** Adapté aux débutants : PAS DE CODE PAS DE CONNAISSANCES PRÉALABLES Tout est facile et expliqué de A à Z, voilà tout ! =) Vous allez créer votre site comme un pro étape par étape, en suivant la vidéo. Vous apprendrez aussi à : Penser l'interface utilisateur, et la cohérence graphique globale (les bases) pour un site web professionnel, quelle que soit la page et même le support, vous aurez toujours un design pro : blog, email, pub facebook, adwords, ebook, ... Objectif : créer votre site WordPress, le mettre en ligne et le personnaliser à 100% avec un design professionnel (cohérence graphique). Cela permet d'avoir un site qui convertit et qui vous rapporte donc de l'argent. Le site que vous allez créer va aider votre business à prospérer et croître. ---- PLAN DE LA FORMATION : Partie technique : - Introduction : 00:00:00 - Démo du site web créé : 00:01:05 - Fonctionnement du VISUAL BUILDER : 00:03:15 - Etapes pour la création du site: 00:05:45 - Mettre votre site en ligne (hébergement et nom de domaine): 00:06:15 - Installer WordPress: 00:10:20 - ** Votre Site ONLINE - démo : 00:15:00 - Installer Divi : 00:16:00 Création du site : - Explication sur l'interface de Divi: 00:18:30 - Création du header : 00:21:10 -- explications sur les polices - 2 sections pour les services (coachings) : 00:28:15 - Etapes dans la création du site : 00:30:40 -- Logique de conversion pour un site web rentable (00:31:10) -- Arborescence du site (00:31:45) -- Charte graphique et cohérence globale (UI kit) (00:33:00) -- Nos 3 valeurs pour la création de site en tant qu'agence (00:34:55) - 2 sections pour les services (coachings) suite : 00:35:25 - Rajouter un Logo et une favicon : 00:48:00 - Configuration de la palette de couleurs (selon UI kit) : 00:48:50 - Création du menu et de l'arborescence du site: -- Créer les différentes pages : 00:50:40 -- Créer une page enfant/parent : 00:52:20 -- Configurer le MENU du site: 00:53:20 - Configuration des options de base du thème DIVI: 00:55:30 - Module Cours de Fitness - CTA : 01:03:15 - Module CTA - élèves : 01:08:20 -- Création d'un Divider : 01:09:55 - Création d'un site client, nos valeurs et priorités : 01:15:20 (Créer une partie All Modules, favoriser l'autonomie du client & le rendre indépendant dans sa gestion du site...voir aussi début de vidéo : étapes dans la création du site) - Module CTA - blog : 01:18:00 - Section avec effet parallax : 01:20:20 - Bloc pour la réservation : 01:28:50 - Ajouter une section (ou ligne ou module) à la bibliothèque Divi : 01:28:50 - Explication sur la formation divi pro complète : - Créer la page de contact : 01:38:40 - Création du header : 01:39:30 - Ajouter une carte google maps : 01:40:30 -Créer un formulaire de contact : 01:46:30 - Layouts Divi : 01:49:05 - Introduction à la Formation Divi Pro : 01:54:05 Pour continuer à apprendre Divi pour faire des sites WordPress professionnels, profitez de 3H gratuites de la formation Divi Pro : http://bit.ly/2HeqV9M [Read More ...]

[responsivesites]

New Post has been published on Website Design Naples Florida Webmaster

New Post has been published on https://vinbo.com/how-to-download-and-use-divis-wireframe-ui-kit/

How to download and use Divi's Wireframe UI kit

Divi 100. In this video, I show you how to download and use Divi’s Wireframe UI kit to create high fidelity wireframes to prototype your website before you go into full development.

Here is a link to download Wireframe UI kit:

Free Divi Download: Multipurpose Wireframe UI Kit Vol. 2

[responsivesites]

New Post has been published on Website Design Naples Florida Webmaster

New Post has been published on https://vinbo.com/divis-free-wireframe-ui-kit-vol-3/

Divi's FREE wireframe ui kit vol. 3

In this video, I explain briefly the importance of producing a wire frame design before designing the complete website. I also show you step by step how to import, install and use our free wireframe ui kit.

Here is the link to download the file:

Download the Free Divi Wireframe Kit Vol. 3 Today

[responsivesites]

New Post has been published on Website Design Naples Florida Webmaster

New Post has been published on https://vinbo.com/how-to-use-our-free-divi-header-ui-kit/

How to use our FREE Divi Header UI Kit

Divi 100 Marathon: In this video I am going to show you how to use our FREE Divi Header UI Kit to customise the header area of your website. This UI Kit gives you flexibility to change it however you want to suit your website design.

Here is the link to download the UI Kit:

Free Divi Download: The Divi Header UI Kit

[siliconwebx]

Using Divi’s Exclusive Black Friday UI Kit Layout to List Products & Features Beautifully

It’s Finally Here!

Black Friday

This is something special. This is the one time each year that we offer our biggest discount of all time. But that’s just the beginning, because we are also giving away $500,000 in free prizes ! Everyone who takes advantage of our Black Friday Sale today will walk away with a free gift, some worth hundreds of dollars. But that’s not all…we are also giving away exclusive Divi Layout Packs built just for this occasion and only available to Black Friday customers and our current Lifetime members.

Get The Deal Before It’s Gone!

One of the exclusive landing pages we’re providing you with as Lifetime Members and new Black Friday customers this year is the stunning UI Kit Landing Page. This layout contains some of Divi’s finest built-in design combinations and high-quality mockups that’ll take your website to the next level. In this post we’ll show you how to get your hands on it and use it effectively.

Get the Exclusive Black Friday UI Kit Landing Page

Before getting into this use case, you will need to lay your hands on the exclusive Black Friday UI Kit Landing Page which you can get by becoming a new Elegant Themes Member, upgrading your existing account, or by already being a Lifetime Member with us. If you are indeed already a Lifetime Member you can log in to our members area and download all of our exclusive landing pages here. Everyone else will need to use the button below to buy or upgrade before they can follow along with the rest of our tutorial.

Claim The Deal Before It Disappears!

Using Divi’s Column Structures to List Products & Features Beautifully

For the remainder of this post, we’ll assume you’ve either taken advantage of our Black Friday deal or that you are already a Lifetime Member and have access to the Black Friday UI Kit Landing Page.

Once you’ve downloaded the new UI Kit Landing Page from our members area you can watch the video below to see just how easy it is to set up. We would also encourage you to follow along with this tutorial to get your site ready for further customization.

In this use case post, we’re going to show you how to stunningly list your features and/or products using Divi’s new column structures. The design we’ll handle looks great with the UI Kit Landing Page and allows you to use the space on your page in an effective and beautiful way.

Preview

Let’s take a look at the outcome on different screen sizes.

Hover & Animation

We’ll also add some subtle hover and animation settings to the various design elements. This will give the following interaction:

Let’s Get Started!

Add New Page Using UI Kit Landing Page

The first thing you will need to do is create a new page using the UI Kit Landing Page which you have downloaded and uploaded. If you’re not sure how to do that, make sure you check the video in the previous part of this post that will guide you there step by step.

Locate Features Section on Page

Once you’ve uploaded the layout, scroll down until you come across the features section on the page.

Remove Existing Rows

Remove the last two rows you can find in this section. We’ll replace the content of these rows with our feature/product list.

Add New Row Below Row Containing Row

Column Structure

Add a new row to the section using the following column structure:

Sizing

Without adding any modules yet, open the row settings and modify the sizing settings in the design tab.

Make This Row Fullwidth: Yes

Use Custom Gutter Width: Yes

Gutter Width: Yes

Equalize Column Heights: Yes

Spacing

To make sure this design looks great across all screen sizes, we’re going to use different custom margin and padding values:

Top Margin: 100px

Bottom Margin: 100px

Top Padding: 87px

Column 1 Top Padding: 100px (Desktop), 0px (Tablet & Phone)

Column 2 Top Padding: 100px (Desktop), 0px (Tablet & Phone)

Column 3 Top Padding: 100px (Desktop). 0px (Tablet & Phone)

Column 3 Bottom Padding: 50px (Tablet & Phone)

Column 4 Left Padding: 10px (Phone Only)

Column 4 Right Padding: 10px

Column 5 Left Padding: 5px (Desktop & Tablet), 10px (Phone)

Column 5 Right Padding: 5px (Desktop & Tablet), 10px (Phone)

Column 6 Left Padding: 10px

Column 6 Left Padding: 10px (Phone Only)

Add Text Module to Column 1

Add Content

Time to start adding modules! Add a Text Module to the first column with a number.

Default Background Color

Add a background color to this module.

Background Color: #0f0f0f

Hover Background Color

And change the background color on hover.

Background Color: #ff5400

Background Image

You can also add one of the icon images, which you can find in your Media Library, to the background:

Background Image Size: Actual Size

Background Image Position: Center

Background Image Repeat: No Repeat

Default Text Settings

Continue by modifying the text settings.

Text Font: Muli

Text Font Weight: Light

Text Color: #ffffff

Text Size: 80px (Desktop & Phone), 40px (Phone)

Text Line Height: 1em

Text Shadow Color: ##ffffff

Text Orientation: Left

Default Spacing

Add some custom padding to create a square.

Top Padding: 200px

Left Padding: 50px (Phone Only)

Right Padding: 50px (Phone Only)

Hover Spacing

Modify the spacing settings on hover.

Left Padding: 100px

Border

To match the UI Kit Landing Page, we’re also adding some subtle rounded corners. Add ’20px’ to each one of the corners.

Box Shadow

Use the following box shadow to add some color the module as well:

Box Shadow Horizontal Position: 20px

Box Shadow Vertical Position: -50px

Box Shadow Spread Strength: 17px

Shadow Color:��#593aff

Animation

Last but not least, add a very subtle slide animation to the Text Module.

Animation Style: Slide

Animation Direction: Right

Animation Intensity: 3%

Add Divider Module to Column 2

Visibility

The next module we’ll need is a Divider Module. Go ahead and add one to the second column. Make sure the ‘Show Divider’ option is enabled.

Show Divider: Yes

Color

Change the divider color next.

Color: #ffffff

Spacing

To overlap the Text Module in the first column, we’re going to use some custom margin values which we’ll adjust according to the different screen sizes.

Top Margin: 30px

Left Margin: -200px (Desktop & Tablet), 0px (Phone)

Right Margin: 200px (Desktop & Tablet), 0px (Phone)

Add Text Module #1 to Column 3

Add Content

On to the next column! Here, the first module we’ll need is a title Text Module. Go ahead and add the title of your first feature or product.

Heading Text Settings

Then, go to the heading text settings and make some changes to match the UI Kit Layout Pack.

Heading 3 Font: Muli

Heading 3 Font Weight: Light

Heading 3 Text Color: #ffffff

Heading 3 Text Size: 30px (Desktop & Tablet), 18px (Phone)

Spacing

To push this module to the left, we’re going to use some custom spacing values.

Top Margin: 20px

Bottom Margin: 20px

Left Margin: -180px (Desktop & Tablet), 0px (Phone)

Left Padding: 20px (Desktop & Tablet), 50px (Phone)

Right Padding: 20px (Desktop & Tablet), 50px (Phone)

Add Text Module #2 to Column 3

Add Content

The next module we’ll need is a description Text Module. Go ahead and enter the description of your feature or product.

Text Settings

Change the text settings next.

Text Color: rgba(255,255,255,0.5)

Text Line Height: 2.2em

Spacing

Push this module to the left as well by using some custom spacing values.

Left Margin: -180px (Desktop & Tablet), 0px (Phone)

Left Padding: 20px (Desktop & Tablet), 50px (Phone)

Right Padding: 20px (Desktop & Tablet), 50px (Phone)

Clone & Place Button Module in Column 3

The last module we’ll need in column 3 is a Button Module. To save time, we’re going to clone an existing button on the page and place the duplicate right below the other two modules we’ve added.

Change Content

Change the content of the button module.

Change Spacing

We’re pushing this module to the left as well. As you can notice, all the modules in column 3 are taking up the space of two columns. This kind of approach allows us to create another column structure that matches the outcome we want.

Top Margin: 50px

Left Margin: -160px (Desktop & Tablet), 50px (Phone)

Right Margin: 50px (Phone Only)

Add Image Module to Column 4

Upload Image

On to the next column! Add an Image Module to column 4 and upload an image of choice. For this example, we’ve used 500×500 image dimensions but feel free to play around with other image sizes as well.

Box Shadow

Add a subtle box shadow to this module.

Shadow Color: #ffffff

Animation

And to top it off, add a slide animation to the image as well.

Animation Style: Slide

Animation Direction: Left

Animation Delay: 100ms

Animation Intensity: 3%

Add Text Module #1 to Column 4

Add Content

Right below the Image Module, go ahead and add a title Text Module with some content of choice.

Default Background Color

Change the background color of this module.

Background Color: #0f0f0f

Hover Background Color

And use another background color on hover.

Background Color: #593aff

Heading Text Settings

Continue by changing the heading text settings to match the UI Kit Landing Page.

Heading 4 Font: Muli

Heading 4 Font Weight: Light

Heading 4 Text Color: #ffffff

Heading 4 Text Size: 23px (Desktop & Tablet), 18px (Phone)

Default Spacing

Add some custom spacing values next.

Top Padding: 50px

Left Padding: 30px

Right Padding: 30px

Hover Spacing

And change these values on hover to create a nice transition.

Bottom Marign: 50px

Top Padding: 20px

Bottom Padding: 20px

Add Text Module #2 to Column 4

Add Content

The second and last module we’ll need in column 4 is a description Text Module. Enter some content of choice.

Background Color

Change the background color next.

Background Color: #0f0f0f

Text Settings

And modify the text settings.

Text Color: rgba(255,255,255,0.5)

Text Line Height: 2.2em

Spacing

To create a clean look and feel, add some custom padding to this module.

Bottom Padding: 50px

Left Padding: 30px

Right Padding: 30px

Border

Last but not least, add ’20px’ to the bottom two corners of the module.

Clone All Modules in Column 4 Twice & Place in Remaining Columns

Change Image & Content

Now that you have all the modules you need in column 4, you can go ahead and clone all of these modules twice and place the duplicates in the two remaining columns. Change the content and images to create variety.

Clone Row as Many Time as Wanted (According to Number of List Items)

We finished our first list item! Now you can go ahead and clone this row as many times as you want, depending on the number of features and/or products you want to showcase.

Change Content of Clone

For each one of the duplicates, you’ll need to change the content.

Find & Replace Color

You can also use Divi’s Find & Replace feature to quickly change the color palette of a list item.

Change Hover Background Color

Make sure that once you change the color palette, you change the hover background color of the number Text Module as well.

Background Color: #593aff

Change Background Image

Last but not least, you can also choose another icon in the list depending on the feature and/or product you’re allowing to show up.

Final Thoughts

This use case is part of our Black Friday Deal where we share 6 FREE limited edition landing pages with Black Friday customers and lifetime members. By joining our empowered community during these days and becoming a member, you’ll get:

25% OFF EVERYTHING

All of the 6 landing pages for free

Access to our awesome themes and plugins

Bonus Prizes

Seize the opportunity and become a member today!

It’s Finally Here!

Black Friday

Black Friday only comes once a year, and when it does, we like to do something really special. This year’s Black Friday sale starts on Friday, November 23rd at exactly 12:00 AM UTC-6, and you definitely don’t want to miss it! There will be thousands of free prizes, free bonus gifts and our biggest discount ever.

Get The Deal Before It’s Gone! jQuery(document).ready(function(){jQuery("#DIV_TO_PLACE_COUNTDOWN2").jCountdown({timeText:"2018/11/26 00:00:00",timeZone:-6,style:"slide",color:"black",width:0,textGroupSpace:15,textSpace:0,reflection:!0,reflectionOpacity:10,reflectionBlur:0,dayTextNumber:1,displayDay:!0,displayHour:!0,displayMinute:!0,displaySecond:!0,displayLabel:!0})}) jQuery(document).ready(function(){jQuery("#DIV_TO_PLACE_COUNTDOWN").jCountdown({timeText:"2018/11/26 00:00:00",timeZone:-6,style:"slide",color:"black",width:0,textGroupSpace:15,textSpace:0,reflection:!0,reflectionOpacity:10,reflectionBlur:0,dayTextNumber:1,displayDay:!0,displayHour:!0,displayMinute:!0,displaySecond:!0,displayLabel:!0})})

The post Using Divi’s Exclusive Black Friday UI Kit Layout to List Products & Features Beautifully appeared first on Elegant Themes Blog.

😉SiliconWebX | 🌐ElegantThemes

[siliconwebx]

Revealing $500,000 In Free Black Friday Prizes!

Get Ready

Black Friday

Is Coming

Black Friday only comes once a year, and when it does, we like to do something really special. This year’s Black Friday sale starts on Friday, November 23rd at exactly 12:00 AM UTC-6, and you definitely don’t want to miss it! There will be thousands of free prizes, free bonus gifts and our biggest discount ever.

Click Here To Bookmark The Deal Page!

Free Prizes Worth $500,000.00

Yep, you read that right! On November 23rd, we will be giving away over a half a million dollars in free prizes. Everyone who takes advantage of our sale will not only get the biggest Divi discount ever, but they will also walk away with a free bonus prize!

Black Friday is the one time each year that we like to pull out all the stops and do something really special for the Divi community. But it’s not just up to us, this is a team effort! The Divi and WordPress communities have come together to help celebrate Divi and all of its many amazing members. Check below to get a sneak peek at some of the free prizes you will have a chance to win. To get the full details, you will need to come back to this page on November 23rd, as soon as the clock strikes 12:000am UTC-6. Keep your eye on the countdown because these prizes are going to go really fast, and our Black Friday discount will only be available for a couple days.

These prizes will be available to anyone who purchases a new account and to anyone who upgrades their current account to lifetime!

Click Here To Bookmark The Deal Page!

Free Prizes When You Upgrade

On Black Friday, there will be two prize pools. The first group of prizes will be dished out to current Divi customers who upgrade their accounts to Lifetime. Everyone who upgrades will get a prize (as long as supplies last). Last year these prizes sold out really quickly, so be sure to bookmark the deal page and keep your eye on the countdown so that you get the best chance!

200 lucky customers who upgrade their accounts on Black Friday will also get a completely FREE copy of the Divi Wireframe Kit. This amazing kit features over 75 professionally designed Sections, all categorized and saved to the Divi Library. This collection will save you tons of time when designing new sites!

View The Countdown

200 lucky customers who upgrade their accounts on Black Friday will also get a completely FREE copy of the Fleur Divi Child Theme. Fleur is perfect for crafters, entrepreneurs and bloggers and will allow you to quickly get a store and blog up and running with minimal effort so you can sell your wares to the world!

View The Countdown

200 lucky customers who upgrade their accounts on Black Friday will also get a completely FREE all-in-one membership to Divi Framework. This membership includes countless Divi extensions, Divi layouts, learning courses and Divi child themes that you can use to take your Divi website to the next level!

View The Countdown

200 lucky customers who upgrade their accounts on Black Friday will also get a completely FREE copy of the Divi ‘tumblr’ Style Fullscreen Scrolling Child Theme. This is a modern child theme for Divi with one page scroll engine. The perfect theme to showcase your photography.

View The Countdown

200 lucky customers who upgrade their accounts on Black Friday will also get a completely FREE copy of Divi BodyCommerce,a plugin that tackles the hard or awkward tasks when building a WooCommerce website with the Divi Theme. It’s an all-in-one plugin for WooCommerce, a swiss army knife.

View The Countdown

200 lucky customers who upgrade their accounts on Black Friday will also get a completely FREE copy of the Pixie Bundle UI Kit. This is an amazing Divi layout collection with over 90 custom module designs and layouts, including fully editable PSDs.

View The Countdown

200 lucky customers who upgrade their accounts on Black Friday will also get a completely FREE copy of the Blog Module Pro extension. This unlocks all kinds of new design possibilities for the Divi Blog Module. You’ll love it!

View The Countdown

200 lucky customers who upgrade their accounts on Black Friday will also get a completely FREE copy of Divi Mega Pro . Divi Mega Pro taps into the power of Divi to allow you to create any kind of Mega Menu you desire. Use the Divi Builder to easily craft your Mega Menu and have full control over the design and content like never before.

View The Countdown

200 lucky customers who upgrade their accounts on Black Friday will also get a completely FREE copy of the Divi Switch. Divi Switch offers over 50 toggles or switches that can be enabled at the click of a button. Each switch will produce a change in the Divi website’s appearance, resulting in hundreds of site customizations!

View The Countdown

200 lucky customers who upgrade their accounts on Black Friday will also get a completely FREE copy of the DP Lawyer & Attorney Divi Child Theme. This theme is perfect for lawyers, attorneys and more. It offers a professional design that can be adapted for lots of occasions!

View The Countdown

100 lucky customers who upgrade their accounts on Black Friday will also get a completely FREE copy of the Krane Divi Child Theme. Krane is a multi-purpose theme built for financial advisors and their practices. It includes 14 pre-built page layouts and custom hover effects.

View The Countdown

300 lucky customers who upgrade their accounts on Black Friday will also get a completely FREE CSS Hero Starter Account. CSS Hero takes WordPress web design to the next level, allowing you to tweak the design of every part of your website. Plus, it works great out of the box with Divi!

View The Countdown

200 lucky customers who upgrade their accounts on Black Friday will also get a completely FREE copy of the Divi Product Carousel Module. Divi Product carousel module creates a DIVI module that can be used to showcase & create WooCommerce product carousel slider. It supports both Visual Builder and Backend Builder!

View The Countdown

200 lucky customers who upgrade their accounts on Black Friday will also get a completely FREE copy of Divi FilterGrid.

View The Countdown

100 lucky customers who upgrade their accounts on Black Friday will also get a completely FREE copy of the AMANDA Divi Child Theme. It is perfect for multiple niches and its versatile design gives you a clean, professional and great looking website whether you are a health, lifestyle, business, professional coach and anything in between.

View The Countdown

100 lucky customers who upgrade their accounts on Black Friday will also get a completely FREE copy of the Tasty UI Kit.

View The Countdown

200 lucky customers who upgrade their accounts on Black Friday will also get a completely FREE copy of the Divi Cascading Multi Image Module. This is a creative module for Divi which you can use to place & position multiple images and/or icons in a single Divi column. You will be able to apply a transform to your images and can create some really cool creative design elements!

View The Countdown

100 lucky customers who upgrade their accounts on Black Friday will also get a completely FREE copy of the Shop Divi Child Theme. Shop is a responsive child theme that can easily be extended with free WooCommerce plugins just like Product Zoom, sliders, Extra widgets. Everything is kept very simple to give you a solid foundation to start building your own shop.

View The Countdown

200 lucky customers who upgrade their accounts on Black Friday will also get a completely FREE copy of 12 x Divi Pricing Table Sections. Who knew Pricing Tables could be so exciting! This layout pack includes 12 Unique Pricing Table Sections that offer great versatility and wonderful design options.

View The Countdown

100 lucky customers who upgrade their accounts on Black Friday will also get a completely FREE copy of the Divi Breadcrumbs Module. With this module you can build breadcrumb trail navigation menus anywhere on any page. Breadcrumbs create context and indicate the visitor’s position within the site structure.

View The Countdown

Free Prizes When You Join

Prizes from the second prize pool will be given out to each person who signs up for an Elegant Themes membership for the first time. If you have be waiting to join the amazing Divi community, this is a great opportunity. Some top notch Divi developers have donated some great Divi extensions and child themes that will help you get up and running with Divi in no time!

200 lucky customers who purchase their accounts on Black Friday will also get a completely FREE Agency membership to Layouts Cloud, one of the biggest and best collections of premium Divi Layout Packs. A $200 value!

View The Countdown

200 lucky customers who purchase their accounts on Black Friday will also get a completely FREE copy of the RoyalCommerce Divi Child Theme. The wildly popular RoyalCommerce is a feature-rich eCommerce Child Theme for Divi & WooCommerce. A $150 value!

View The Countdown

100 lucky customers who purchase their accounts on Black Friday will also get a completely FREE copy of the Divi Powerful Child Theme, one of the most advanced Divi child themes around! Instantly power up your Divi website with custom headers, footers, page templates and more. A $215 value!

View The Countdown

200 lucky customers who purchase their accounts on Black Friday will also get a completely FREE copy of the Divi Photography Child Theme. Designed to help photographers showcase their work with style, this theme comes with every feature needed to run a successful photography business.

View The Countdown

200 lucky customers who purchase their accounts on Black Friday will also get a completely FREE Divi Monk membership. Divi Monk’s cloud-based Template Library gives you access to hundreds of reusable designs. This will save you time and effort, speeding your development process with Divi!

View The Countdown

100 lucky customers who purchase their accounts on Black Friday will also get a completely FREE copy of the Heritage Child Theme For Divi. Heritage is an elegant image-driven theme with handcrafted feel. It also includes the Divi CPT Layout Injector!

View The Countdown

200 lucky customers who purchase their accounts on Black Friday will also get a completely FREE Medical Doctor Child Theme. A Surgically precise Divi Child Theme. MEDZ is the only Divi theme you will need for all of your Divi medical sites!

View The Countdown

200 lucky customers who purchase their accounts on Black Friday will also get a completely FREE one-site license to the Divi Den Pro Plugin Membership. This membership offers access to a cloud-based mega library of Divi Theme layouts, modules, design assets, business tools and ‘how to’ videos and tutorials!

View The Countdown

200 lucky customers who purchase their accounts on Black Friday will also get a completely FREE copy of the Marvel Child Theme. Marvel is a versatile, responsive and high-performance Divi Child Theme with a modern design and functionality. It includes Custom Theme Options, One-Click Demo Import and more!

View The Countdown

200 lucky customers who purchase their accounts on Black Friday will also get a completely FREE copy of the Prutha Divi Child Theme. The Prutha Child Theme is a powerful multipurpose responsive WooCommerce Theme that is simple, elegant and functional.

View The Countdown

200 lucky customers who purchase their accounts on Black Friday will also get a completely FREE copy of Divi Toolbox, an incredible collection of powerful Divi add-ons and effects that really take Divi to the next level. This is one of the best Divi extensions around!

View The Countdown

100 lucky customers who purchase their accounts on Black Friday will also get a completely FREE copy of the Nouvelles Divi Child Theme. Let Nouvelles and Divi help you get a multi-author news magazine site up and running quickly, with many custom blog features!

View The Countdown

200 lucky customers who purchase their accounts on Black Friday will also get a completely FREE copy of the Minimal Divi Child Theme. Minimal has simple and elegant looks with all the advanced functionality you may need!

View The Countdown

250 lucky customers who purchase their accounts on Black Friday will also get a completely FREE copy of Battle Suit for Divi, a collection of killer add-ons. Battle Suit for Divi and it’s add-ons add a wide variety of new and exciting modules to the Divi Builder.

View The Countdown

100 lucky customers who purchase their accounts on Black Friday will also get a completely FREE Royalish Divi Child Theme. You can use Royalish for many types of niches but it is especially suitable for any creative or local business type websites. Royalish has some special features that really bring your site to life.

View The Countdown

200 lucky customers who purchase their accounts on Black Friday will also get a completely FREE copy of WooCommerce Builder. Want to make more sales? This is plugin is for you! Use the power of Divi to design your WooCommerce store like never before.

View The Countdown

200 lucky customers who purchase their accounts on Black Friday will also get a completely FREE copy of Divi Upload Icons. Now you can upload just about any web font icon set to Divi, giving you even more design freedom in Divi’s module set.

View The Countdown

300 lucky customers who purchase their accounts on Black Friday will also get a completely FREE 30 day subscriptions to Push Monkey. With Push Monkey on your website, any visitor can be targeted with notifications – on desktop and mobile. It’s an amazing way to engage with your visitors!

View The Countdown

100 lucky customers who purchase their accounts on Black Friday will also get a completely FREE copy of the Booker Child Theme. In Booker, everthing is designed to ensure the best user experience on any device but also to achieve a personality that you will not find in any other similar child theme.

View The Countdown

200 lucky customers who purchase their accounts on Black Friday will also get a completely FREE copy of Divi Under Construction, a custom maintenance mode extension for Divi. Hide your site during an upgrade, show a countdown to a new site launch or simply tease a product while you build the rest of the site.

View The Countdown

Win A Free iMac Pro While You Wait For The Big Day

Black Friday is going to be amazing, but what about the time between then and now? We decided to kill the time by launching and incredible giveaway that’s completely free to join! One lucky winner will receive a brand new iMac Pro worth over $5,000. With a blazing fast CPU, tons of RAM and a beautiful 5k Retina Display, it is the ultimate Divi web design machine.

Enter To Win

Get Ready

Black Friday

Is Coming

Black Friday only comes once a year, and when it does, we like to do something really special. This year’s Black Friday sale starts on Friday, November 23rd at exactly 12:00 AM UTC-6., and you definitely don’t want to miss it! There will be thousands of free prizes, free bonus gifts and our biggest discount ever.

Click Here To Bookmark The Deal Page!

jQuery(document).ready(function(){jQuery("#DIV_TO_PLACE_COUNTDOWN2").jCountdown({timeText:"2018/11/23 00:00:00",timeZone:-6,style:"crystal",color:"black",width:0,textGroupSpace:15,textSpace:0,reflection:!0,reflectionOpacity:10,reflectionBlur:0,dayTextNumber:1,displayDay:!0,displayHour:!0,displayMinute:!0,displaySecond:!0,displayLabel:!0})}) jQuery(document).ready(function(){jQuery("#DIV_TO_PLACE_COUNTDOWN").jCountdown({timeText:"2018/11/23 00:00:00",timeZone:-6,style:"crystal",color:"black",width:0,textGroupSpace:15,textSpace:0,reflection:!0,reflectionOpacity:10,reflectionBlur:0,dayTextNumber:1,displayDay:!0,displayHour:!0,displayMinute:!0,displaySecond:!0,displayLabel:!0})})

The post Revealing $500,000 In Free Black Friday Prizes! appeared first on Elegant Themes Blog.

😉SiliconWebX | 🌐ElegantThemes