No-Code Design

Unleash Your Creativity With Hundreds Of No-Code Design Options

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 Try Divi Risk Free For 30 Days!
No Code Design

Design Pages Visually

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).

Font End Design

Design On The Front End

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.

Full Site Editing

Control Your Entire Website

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.

Divi Library

Build Your Library

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!

Inline Text Editor

Click To Type

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.

Size and Position Controls

Drag To Move & Resize

It’s easy to move and resize things on your website. Just drag and drop to move things, and then drag to resize them.

Responsive Design

Design For Different Devices

Divi works great on mobile devices, and the visual builder gives you fine-tuned control over how your website looks on different screen sizes.

Creative Freedom

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.

Motion Effects

Create Advanced Animations And Effects That Interact With Your Visitors As The Scroll

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.

Hover Effects

Change And Transition Design And Content On Hover To Create Hover Effects

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.

Hover State Options

Sticky Effects

Create Sticky Headers And Stacking Content Using Divi's Sticky Options

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.

Parallax Effects

Create A Sense Of Depth And Motion Using Divi's Parallax Effects

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.

Filters & Effects

Control Brightness, Contrast, Hue Saturation, Blur, Opacity And More

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.

Masks & Patterns

Frame Your Images With Background Masks And Layer Together Patterns, Gradients, And Images To Create Amazing Backgrounds

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.

Text Formatting

Choose From Hundreds Of Fonts And Control Evert Aspect Of Your Text Styling

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.

Backgrounds & Gradients

Background Images, Videos, Colors And Gradients

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.

Animations

Bring Your Website to Life with Dynamic Animations

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.

Borders

Add Borders To Any Element, Control Rounded Corners And More

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.

Drop Shadows

Add Depth To Your Page With Subtle Drop Shadows

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!

Text Shadows

Let Your Text Jump Off The Page with Text Shadows

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.

Text Shadow Effects

Shape Dividers

Use Shape Dividers To Create Organic & Dynamic Transitions Between Blocks Of Content

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.

Fine-Tuned Control

Divi gives you control over everything down to the finest detail. With Divi, anyone can build stunning designs that scream perfection.

Responsive Editing

Build Websites That Look Perfect on Every Device

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.

Position Options

Position Content On Your Page Visually And Create Fixed and Floating Elements

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.

Transforms

Easily Transform Content Right Before Your Eyes

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.

Spacing

Adjusting Padding And Spacing Directly On The Page Using Front-End Controls

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.

Global Design System

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.

Global Presets

Global Design Presets

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.

Global Elements

Global Elements

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.

Global Colors

Global Colors

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.

Advanced Features

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.

Dynamic Content

Create Dynamic Pages That Display Dynamic Content From Your Website

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.

Advanced Conditions

Control When, Where And For Which Users Content Appears Using Advanced Display Logic

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!

Display Conditions

Custom Code

Add Your Own Custom CSS To Any Element

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.

Developer API

Develop Your Own Elements And Design Settings

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
Custom Code Integration

Design-Focused Interface Innovations

Divi was built by designers for designers, and it includes many unique interface innovations that enhance the website building experience for designers.

Copy and Paste Styles

Copy & Paste Styles

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 Styles

Extend Styles

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!

Find and Replace Styles

Find & Replace Styles

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.

Bulk Select

Multi-select & Bulk Editing

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.

Layers View

Layers Panel

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!

Wireframe Mode

Wireframe Mode

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.

Join To Download Today