Getting ready: prerequisites and a quick plan
Before you begin configuring Divi, make sure you have a wordpress site with administrator access, a current Divi package from Elegant Themes, and ftp or hosting control panel access in case you need to troubleshoot. You’ll use the wordpress dashboard to install the theme or plugin, activate the Elegant Themes API key for updates and support, and then move into Divi’s settings and builder. Having a basic sitemap and a handful of example images or logo files will speed setup and help you make design choices with confidence.
Step 1 , Install and activate Divi
Start by installing Divi from the Elegant Themes downloads area. Download the Divi theme ZIP, then go to Appearance > Themes > Add New in your WordPress admin and upload the ZIP. Once installed, activate the theme. If you prefer to keep another theme active or are using a page builder approach, you can instead install the Divi Builder plugin (Plugins > Add New > Upload Plugin). After activation, check the Divi menu item in the dashboard to confirm everything loaded correctly.
Step 2 , Enter your Elegant Themes credentials
To receive automatic updates and access premium features, enter your Elegant Themes username and API key. In the dashboard go to Divi > Theme Options and open the Updates tab; paste your username and API key and save. This connects your site to Elegant Themes and ensures Divi stays up to date, which is important for security and compatibility with WordPress core and other plugins.
Step 3 , Import a starter layout or set up from scratch
Divi ships with many pre-made layout packs that speed the design process, and you can import a layout pack into a blank page via the Visual Builder. If you prefer to build from scratch, create a new page, enable the Divi Builder, and choose between the Visual Builder (front-end) and the wireframe/Back-end editor. Using a pre-made layout is useful for learning how sections, rows, and modules are organized; it also gives you a working design you can adapt rather than starting from zero.
Step 4 , Configure global design settings
Consistent typography, spacing, and colors make a site feel cohesive. There are two places to set global styles: Divi’s Theme Customizer (Appearance > Customize) and the Visual Builder’s global defaults and presets. Set your primary and secondary colors in the color palette, choose base fonts and sizes, and define heading styles. If you prefer working in the Visual Builder, open the settings (three dots) and adjust the Global Presets and Theme Styles , changes there apply across modules and pages, reducing repetitive edits later.
Key global settings to update
- Site identity (logo, site title, favicon) in Appearance > Customize
- Global colors and font families in the Customizer or Visual Builder
- Default spacing and button styles via Theme Builder presets
- Header and footer defaults (if using the Theme Builder)
Step 5 , Build header, footer and custom templates with the Theme Builder
Divi’s Theme Builder lets you create global or conditional templates for your site’s header, footer, blog posts, archive pages, and more. Go to Divi > Theme Builder, create a new template and assign it sitewide or to specific pages. Use the Visual Builder to add modules (logo, menu, social icons, search) and set sticky or transparent header behavior. For dynamic content like post title or author, use Divi’s dynamic content options to pull data from WordPress automatically.
Step 6 , Build pages and save reusable parts
When creating pages, break them into clear sections and rows, and use Divi modules to add text, images, forms, sliders and more. Save frequently used sections, rows or modules to the Divi Library so you can reuse them on other pages. name your library items clearly (for example: hero-home, CTA-footer) and, when useful, enable global items , a global library item will update everywhere it’s used when you edit it, which is powerful for calls to action and site-wide banners.
Step 7 , Adjust responsive settings and preview breakpoints
Divi makes it easy to tune designs for phones and tablets. In the Visual Builder, every module and setting often has a small device icon next to it; click that icon to specify different values for desktop, tablet and phone. Use the responsive preview to test your layout and adjust padding, font sizes and visibility rules so content looks tidy across screen sizes. If something doesn’t fit, reduce margins, stack columns, or hide large elements on small screens to preserve performance and readability.
Step 8 , Optimize performance and caching
Performance matters for both user experience and search rankings. Divi includes performance options under Divi > Theme Options > Builder > Advanced and Divi > Performance where you can enable static css file generation, asynchronous JavaScript loading, and critical CSS features. Pair Divi’s built-in optimizations with a caching plugin and an image optimization tool to reduce load times. Test speed with tools like Google PageSpeed Insights and tweak settings cautiously , some optimizations can conflict with certain plugins or custom scripts, so test after each change.
Step 9 , Manage backups, updates and role permissions
Before applying big design changes or update cycles, back up your site. Use your host’s backup system or a plugin such as updraftplus to create full site backups. Keep Divi and WordPress updated, and test updates on a staging environment if you manage a busy site. Divi also has a Role Editor (Divi > Role Editor) so you can control which user roles can access the builder or certain settings, which is useful on multi-author sites to prevent accidental changes.
Tips for efficient Divi configuration
Work in stages: get global styles and templates set first, then build pages. Use the Divi Library and global items to reduce repetition. When experimenting with performance toggles, change one setting at a time and measure the results. Use the Visual Builder for immediate visual feedback, and keep a staging copy of your site for riskier experiments. Finally, document any custom CSS or child theme changes so you can reapply them if you migrate or rebuild the site.
Concise summary
Configuring Divi involves installing and activating the theme or builder, registering your Elegant Themes API, choosing a starting layout, and setting global styles. Use the Theme Builder for headers, footers and templates, save reusable elements to the Divi Library, tune responsive settings, and enable Divi’s performance options. Regular backups, controlled updates and role management keep your site stable as it grows.
FAQs
How do I activate my Divi license for updates?
Go to Divi > Theme Options > Updates in your WordPress dashboard, then enter your Elegant Themes username and API key. Save the settings; WordPress will then receive Divi updates automatically.
Can I use Divi Builder with a non-Divi theme?
Yes. Divi Builder is available as a plugin so you can use its page-building features with other wordpress themes. If you want the full theme-based features like the Theme Builder templates, the Divi theme offers the tightest integration.
What’s the best way to make Divi sites load faster?
Combine Divi’s built-in performance options (static CSS, asynchronous js) with a caching plugin, optimized images, and a fast host. Test changes incrementally and check results with speed testing tools to avoid conflicts that sometimes occur with aggressive optimizations.
How do I make a design change sitewide in Divi?
Use global presets, Theme Builder templates, or save items as global in the Divi Library. Editing a global item updates every instance where it’s used, so you can change a button style or header element across the whole site in one place.
