Images

Captions

Divi pre-styled image caption

Use this style image captioned image by adding “Media” in a Divi text module.

Divi CSS

The Divi CSS included to reference and is not intended to be modified.

.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
margin-bottom: 10px;
max-width: 96%;
padding: 8px;
}

.wp-caption p.wp-caption-text {
font-size: 12px;
padding: 0 4px 5px;
margin: 0;
}

Custom Image Caption

Add custom HTML and CSS for a custom image caption

HTML

<figcaption>
<img src=”http://bg-20-test.local/wp-content/uploads/2021/04/business-06.jpg”>
<figcaption class=”figcaption”>This is an image caption.</figcaption>
</figcaption>

HTML center-aligned caption

<figcaption>
<img src=”http://bg-20-test.local/wp-content/uploads/2021/04/business-06.jpg”>
<center><figcaption class=”figcaption”>This is an image caption.</figcaption>
</center></figcaption>

CSS

.figcaption {
font-size: 12px;
}

Banner Images

Common aspect ratio to use for banner images

• 188:25 Aspect Ratio

Icon Images

Geometry

• Circle – for most use cases

Color

Follow brand color guidelines

Format

• PNG
• SVG

Sizes (px)

• 12×12
• 16×16
• 24×24
• 32×32 *minimum size for profile pictures)
• 64×64
• 128×128
• 256×256
• 512×512

Preparing for Web

See image guidelines.