Image Usage
Images play a vital role in enhancing content, supporting storytelling, and improving user engagement. This page outlines the various image placement options available within the WordPress environment and demonstrates how to use Divi Builder to achieve visually-compelling layouts.
Purpose of This Page
While image placement is often demonstrated within standard Page layouts, the versatility and importance of image usage across all content types — including Pages, Posts, and Custom Post Types — warrant a dedicated reference. This page is intended to be one of the most frequently used resources for content creators working in WordPress.
Image Placement Options
Below are the primary ways images can be used throughout the site:
- Inline Images – Placed directly within the body alongside other content blocks. Ideal for contextual visuals that support surrounding content.
- Background Images – Set as the background of a section, usually with a text or content overlay. Ideal for hero sections or to visually separate sections.
Best Practices
- Use high-resolution images that are optimized for web (compressed for fast loading).
- Keep file size under 100MB and image dimensions under 2500px in width and height to prevent upload errors.
- Use images with a JPG, PNG, or GIF file format. DO NOT use HEIC images.
- Ensure all images include descriptive alt text for accessibility.
- Maintain consistent aspect ratios for uniform presentation (e.g., thumbnails, profile images).
- Avoid embedding text within images, unless absolutely necessary for branding or design.
- Recommended Ratios:
- Portrait: 2:3 (e.g., 1200px × 1800px)
- Landscape: 3:2 (e.g., 1800px × 1200px)
- News/Event Images: Always use 3:2 landscape ratio for consistency.
Visual Examples
Various image placement options are demonstrated on this page and throughout this demo site. Use these examples as a reference when planning your own content.
Inline Images
Placed within the body of a page using the Image module. Ideal for contextual visuals that support surrounding content. Use a multi-column layout to achieve different display results.
Image left (2 column 50/50 layout)
Placing an image on the left with text on the right creates a balanced and visually appealing layout. This design works well when you want the image to complement the text without overpowering it. By splitting the space evenly, both elements share equal importance, making this layout ideal for introductory sections or content that needs a strong visual alongside supporting details.
When using this layout, ensure the image is properly sized and optimized for web performance. Large, uncompressed images can slow down page load times, negatively impacting user experience. Additionally, keep the text concise and scannable so visitors can quickly absorb the information. This layout is particularly effective for showcasing photos of people, places, or products that directly relate to the accompanying content.
Accessibility should also be a priority. Include descriptive alt text for the image so screen readers can interpret it, and maintain sufficient contrast between text and background for readability. A well-executed 50/50 layout provides a clean, professional look that works across a variety of page types.
Image full width center (1 column layout)
A full-width image centered on the page makes a strong visual statement. Use this layout for high-quality images that need to capture attention, such as banners or feature photos. Make sure the image is optimized for speed and responsive so it looks great on all devices. Landscape images tend to work best for full-width images rather than portrait images. Pairing this layout with a short caption or headline below the image can help provide context without distracting from the visual impact.
Image right (2 column 60/40 layout)
Positioning an image on the right with text on the left creates a natural reading flow, especially for audiences who read left to right. The 60/40 split gives more space to text, making this layout ideal for sections that require detailed explanations or longer paragraphs. The image serves as a supporting element rather than the focal point, allowing the content to take center stage.
This layout works well for articles, informational pages, or any scenario where the message is more important than the visual. Ensure the image is relevant and complements the text without distracting from it. Consistent spacing and alignment are key to maintaining a polished, professional appearance.
As with other layouts, optimize the image for speed and accessibility. Include alt text for screen readers and ensure the design remains responsive across devices. A well-structured 60/40 layout provides flexibility while keeping the emphasis on your written content.
This layout can also be used strategically to create visual hierarchy on a page. By placing the image on the right, you guide the reader’s eye from the primary text to the supporting visual, reinforcing the message without interrupting the reading flow. It’s particularly effective for storytelling or case studies where the narrative is the focus, and the image serves as a contextual enhancement. When combined with consistent typography and spacing, this approach helps maintain a clean, professional design that feels intentional and user-friendly.
Fullwidth Image Module
The fullwidth image module creates a bold visual that spans the entire page width, making it ideal for hero images or banners. Use high-quality, responsive images that load quickly and include alt text for accessibility. Pairing the image with a short caption or headline can add context without cluttering the design.
Background Images
Used as the background of a section. Ideal for visual difference and engagement between sections. Background color overlay and parallax effects are available.
Section with background image and dark overlay
This layout combines imagery with text while ensuring readability through a dark overlay. It’s perfect for headers or call-to-action areas where you want strong visual impact without sacrificing clarity. Choose an image that complements your content, adjust overlay opacity for contrast, and keep text concise for a clean, professional look.