How to design your WordPress website with Divi.

Transform Your Basic Site into a Standout Business Website

What is Divi?

Divi is a premium WordPress theme and page builder that lets you create custom designs without coding. It’s popular because it’s:

• Visual (what you see is what you get)
• Drag-and-drop
• Highly customizable

Initial Setup

1. Purchase Divi from Elegant Themes

• Yearly access: $89/year
• Lifetime access: $249 (better value if you plan to use it long-term)

1. Install Divi

• Go to your WordPress dashboard
• Navigate to Appearance → Themes → Add New
• Click “Upload Theme.”
• Upload the Divi zip file you received
• Click “Install Now,” then “Activate.”

Key Divi Features to Know

1. Visual Builder

• Click “Enable Visual Builder” when editing any page
• See changes in real-time
• Drag and drop elements

1. Layouts

• Sections: Large containers
• Rows: Go inside sections
• Modules: Individual elements like text, images, buttons

1. Pre-made Designs

• 1500+ layout packs
• Professional designs for various industries
• Customizable templates

Step-by-Step: Creating Your First Divi Page

1. Start a new page

• Pages → Add New
• Click “Use Divi Builder.”

1. Choose your starting point

• Build From Scratch
• Choose a Premade Layout
• Clone Existing Page

1. Add sections

• Click the ‘+’ button
• Choose column structure
• Add background colors/images

1. Insert modules

• Text
• Images
• Buttons
• And many more

Making Your Site Unique

1. Customize your header

• Go to Theme Customizer
• Header & Navigation
• Adjust logo, menu, colors

1. Create a stunning homepage

• Use a full-width header
• Add compelling images
• Include a clear value proposition
• Make an engaging About section

1. Design tips for standing out

• Use your brand colors consistently
• Keep plenty of white space
• Make text easily readable
• Use high-quality images

Business-Specific Features

1. Portfolio showcase

• Display your work beautifully
• Filter-able galleries

1. Testimonial modules

• Build trust with client feedback
• Various layout options

1. Contact forms

• Custom-designed forms
• Integrate with email marketing

1. Call-to-Action sections

• Stand-out buttons
• Attention-grabbing designs

Mobile Responsiveness

1. Preview your site on different devices

• Desktop
• Tablet
• Phone

1. Adjust as needed

• Hide/show elements
• Resize text
• Reposition images

Time-Saving Tips

1. Save your designs

• Save sections you like
• Create a library of elements

1. Use keyboard shortcuts

• Copy/paste modules: Ctrl/Cmd + C, Ctrl/Cmd + V
• Undo: Ctrl/Cmd + Z
• Save: Ctrl/Cmd + S

Common Mistakes to Avoid

1. Don’t overcomplicate designs
2. Don’t use too many fonts or colors
3. Don’t forget about page load speed
4. Don’t ignore mobile optimization

Ongoing Maintenance

1. Regularly update Divi
2. Back up your website
3. Test contact forms monthly
4. Review and refresh content quarterly

Getting Help

1. Elegant Themes documentation
2. Divi Facebook communities
3. YouTube tutorials
4. Elegant Themes support

Next Steps

1. Explore Divi layouts in your industry
2. Practice with the Visual Builder
3. Start with your homepage
4. Gradually update other pages

Remember: Take your time learning Divi. Start with a simple design and gradually add more complex elements as you become comfortable with the builder.

Bonus Tip

Create a staging site to practice and experiment without affecting your live website. Most hosting providers offer this feature for free.