Divi adds a visual design layer on top of WordPress, unleashing the creative abilities of beginners and experienced designers alike. Build your website on the front end and never touch a line of code. This is how websites were meant to be built.
Join Today
Divi is a modern no-code website builder for WordPress. Using Divi to design your website is like using design programs such as Sketch or Figma, except it was made to create websites! With Divi, you design your website on the front-end using visual controls, and you never have to touch a line of code (unless you want to).
You don’t need to be an experienced designer or developer to build a website with Divi. Drag, drop and design everything using a visual interface that is both simple and powerful.
Design entire websites, from top to bottom, using the Divi Theme Builder. Build custom headers, footers and content templates and customize everything on the front-end.
Save your designs and layouts to the Divi Library for easy access. Divi also includes thousands of premade layouts in the library you can use anytime!
Click into text on your website and just start typing! It’s easy to edit the content on your website because everything is done on the front-end.
It’s easy to move and resize things on your website. Just drag and drop to move things, and then drag to resize them.
Divi works great on mobile devices, and the visual builder gives you fine-tuned control over how your website looks on different screen sizes.
Divi gives everyone the creative freedom to design their pages visually using hundreds of design options. From simple text formatting to advanced motion effects and animations, Divi has it all.
Craft stunning motion effects that interact with your visitors as they scroll up and down the page. These aren’t static animations, they are alive and change based on user interaction. Using Divi’s motion effects, you can create some truly stunning designs that grab your visitors attention and keep them engaged.
Divi makes it easy to create hover effects. You can create two versions of each element - the standard version, and the hover version. When someone hovers over the element, it automatically transitions to the hover version creating a beautiful hover effect. You can even change an element's content, such as text and images, when a user hovers over it.
Sticky elements “stick” to the screen as a user scrolls up and down the page. You can stick elements to the top and bottom of the browser and even let them stack up. Highlight relevant information, such as menus and navigation, or surface relevant content and build a narrative as users scroll down your page. You can even transition the design of sticky elements as they become sticky. Divi’s sticky options offer way more control than standard positioning options that you might find in other builders.
Divi makes it easy to create parallax effects. Parallax can be enabled for any background image, creating a subtle and elegant effect as the user scroll down your page. Parallax effects can take a simple design and elevate it by adding a sense of depth and movement.
Every element in Divi comes with a set of creative filters including Hue, Saturation, Brightness, Contrast, Invert, Blur, Opacity and Sepia. Using these options inside of Divi’s visual builder is like using a graphic design program! You can transform the appearance of any element or image right inside the builder.
Background masks can be used to mask background images, gradients or videos to create new shapes. This opens up a huge range of design possibilities and allows you to create beautiful, lightweight shapes inside the builder without having to use graphic design programs like Photoshop. Masks can be combined with patterns, which add texture on top of your background elements.
Enjoy a full range of text and font options. Pick from hundreds of web fonts or upload your own. Customize text sizes, letter spacing and line height. Change font weights and text styling. Control all standard text elements, such as anchor links, lists and block quotes.
Apply custom background colors, background gradients, background images and background videos to any element. Create fun overlapping gradient and image effects or use background blend modes to merge colors and images to create unique designs.
Easily add animations to any element. Apply simple animations using Divi's animation presets, or build your own animations by customizing the animation type, speed and direction. Wow your visitors as they scroll down the page with stunning animations that trigger when elements come into view.
Add borders to any element using Divi's robust border editor. Create rounded corners. Control border sizes, colors and styles and create unique effects by adjusting each edge of your element individually.
Add depth to your page by creating custom drop shadows with full control over the size, position, color and intensity of the shadow. They're easy to create and you don't have to mess with any graphic design programs!
Create stunning text effects using text shadows. Easily apply text shadows to any element using Divi's simple presets, or create your own custom text shadows using the full set of controls.
Add custom shapes and effects to your pages, creating dynamic transitions between blocks of content and adding that extra bit of personal flair to your website. Shape Dividers can be placed above and below each section on your website, allowing you to easily build stunning transition effects between different parts of your page.
Divi gives you control over everything down to the finest detail. With Divi, anyone can build stunning designs that scream perfection.
Making responsive websites is easy with Divi. Divi is responsive by default, but takes responsive design a step further by giving you complete control over every design setting on each mobile device. This allows you to perfectly tailor the appearance of each element on computers, tablets and smart phones.
Drag to move and position floating elements right on the page using Divi’s position options. Break elements free of their containers using absolute and fixed positioning. You can create fixed headers and banners, dynamic images collages, fun and interesting overlapping effects, and it’s all done using a super intuitive visual interface.
Divi gives you the power to transform elements right on the page in ways that would typically only be possible in graphic design programs like Photoshop and Sketch. You can move elements around, scale them up and down, rotate on three different axis, as well as skew and adjust the transform origin with ease. All of this is done using a super slick interface that makes each transformation easy to perform and understand.
Divi gives you fine-tuned control over the spacing of every element. You can control padding, margin and positioning down to the finest detail. You can also customize spacing for different devices using Divi’s responsive editing options.
Divi is more than just a page builder, it’s a fully-featured website builder with a global design system that makes creating entire websites easier than ever.
Assign design presets to multiple elements. Presets are like CSS classes. When you update a design preset, all elements using that preset get updated across your entire website.
Use global elements on different pages throughout your website and sync their content and/or design settings. When you update a global element, it gets updated throughout your entire website.
Create a global color pallet for your website and assign global colors to different elements. When you update a global color, that color changes across all elements and across your entire website.
Divi’s design tools are incredibly easy to use, but that doesn’t mean that Divi is overly simple or stripped of power features. There are tons of advanced features that can be enjoyed by beginners and advanced users alike.
Divi elements support dynamic content, which means you can turn static pages into dynamic designs that update themselves based on information pulled from your website's database. Get data from custom fields and other WordPress settings and display that information on your pages automatically.
Divi’s condition options allow you to apply advanced display logic to any element. You can hide or display elements based on a set of conditions that you define, such as user role, date and time, post information, website location and more. You can do so much with Divi’s advanced conditions. Display product info to customers based on which products they have purchased. Display different content to users when they log in. Create content that appears for the duration of a sale and then disappears automatically when the sale is over. The possibilities are endless!
Divi comes with just about every design option you could ever need, but that doesn’t mean you can’t use custom CSS too. Divi makes it easy to add CSS to any element on your page. Plus, writing code in Divi is enjoyable thanks to its built in code editor and syntax highlighter.
With Divi, the possibilities are endless. If you can't find a native solution, you or your developers can build something custom! You can even sell those content elements on the Divi Marketplace and re-use them for future projects.
Learn How to Build Your Own Modules
Divi was built by designers for designers, and it includes many unique interface innovations that enhance the website building experience for designers.
Anything can be copied from one element and pasted onto another. Copy individual settings, groups of settings or even an element's entire design and transfer it to another element on the page.
Extend the styles of a drop shadow, a text color, or any of Divi’s 1000’s of style options to other elements on your page. Update hundreds of elements at once!
Make sweeping changes across your entire page instantly, saving you hours of editing time. Using find and replace allows you to change any design value, such as colors or fonts, across your page.
Select multiple elements on the page at once and edit them at the same time, change their style and content together or move them to different locations on the page as a group.
Open up the Divi layers view panel to see a hierarchical structure of your content. You can interact with content inside the layers panel while you work on the page simultaneously!
When you're editing a page's structure rather than focused on design styling, switch to Divi's streamlined Wireframe Mode to work more swiftly in a block editing view.
We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!
Copyright © 2024 Elegant Themes ®