Layout Examples

Paragaph with “intro” style applied, for optional, larger intro type copy. Should only be a few lines long, and let the reader know what they’re about to get into.

Example paragraph text style. This is what your standard paragraphs will look like throughout the entire site. Certain areas may have special styles, but this is your standard copy size. Paragraph links are styled like this so that they are easy for users to find. You also have the ability to BOLD text as well as emphasize text. You can also insert links to download things in your content, ‘Example Document Title’ (PDF), like this.

Below this paragraph you’ll find examples of all the other styles you’ll have at your disposal. You also have a technical page that lists all important information on image sizes, fonts, and colors.

Featured Call Out Header 2

Header 3 Title Example

Paragraph text that is short enough to get read but long enough to convey a solid message that’s not obvious.

Bolded Paragraph CTA ›

Use Consistent Headers

Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In bibendum mauris eget urna congue, sit amet rutrum urna condem.

Note the CTA Arrow ›

A Long Head Pushes Only This Column’s Content Down

Paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In bibendum mauris eget urna congue, sit amet rutrum urna condem.

Arrow is Content, Not CSS ›

Logos/Badges Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In euismod diam eu risus suscipit, a auctor neque tincidunt. Quisque lobortis imperdiet felis, consectetur aliquam arcu accumsan vel. Praesent finibus lorem quis velit posuere, ut hendrerit metus porttitor.

Header 2 for Text Below & Video

Intro paragraph orem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu venen.

  • Nulla eget justo eget
  • Metus aliquet posuere
  • At vitae ligula
  • Nam a rutrum elit

Curabitur non nulla malesuada, tempus massa nec, tempus lacus. Sed scelerisque tincidunt nisi, ut pellentesque lacus pulvinar ac.

WYSIWYG Button

Header 2 for Text Below & Video

Intro paragraph orem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu venen.

  • Nulla eget justo eget
  • Metus aliquet posuere
  • At vitae ligula
  • Nam a rutrum elit

Curabitur non nulla malesuada, tempus massa nec, tempus lacus. Sed scelerisque tincidunt nisi, ut pellentesque lacus pulvinar ac.

WYSIWYG Button

Header 2 for Text Below & Video

Intro paragraph orem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu venen.

  • Nulla eget justo eget
  • Metus aliquet posuere
  • At vitae ligula
  • Nam a rutrum elit

Curabitur non nulla malesuada, tempus massa nec, tempus lacus. Sed scelerisque tincidunt nisi, ut pellentesque lacus pulvinar ac.

WYSIWYG Button

Header 2 for Text Below & Video

Intro paragraph orem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu venen.

  • Nulla eget justo eget
  • Metus aliquet posuere
  • At vitae ligula
  • Nam a rutrum elit

Curabitur non nulla malesuada, tempus massa nec, tempus lacus. Sed scelerisque tincidunt nisi, ut pellentesque lacus pulvinar ac.

WYSIWYG Button

Cards Type Layout

Intro paragraph orem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu venen.

  • Nulla eget justo eget
  • Metus aliquet posuere
  • At vitae ligula
  • Nam a rutrum elit

Curabitur non nulla malesuada, tempus massa nec, tempus lacus. Sed scelerisque tincidunt nisi, ut pellentesque lacus pulvinar ac.

WYSIWYG Button

Cards Type Layout

Intro paragraph orem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu venen.

  • Nulla eget justo eget
  • Metus aliquet posuere
  • At vitae ligula
  • Nam a rutrum elit

Curabitur non nulla malesuada, tempus massa nec, tempus lacus. Sed scelerisque tincidunt nisi, ut pellentesque lacus pulvinar ac.

WYSIWYG Button

Box Shadow & Corners

Intro paragraph orem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu venen.

  • Nulla eget justo eget
  • Metus aliquet posuere
  • At vitae ligula
  • Nam a rutrum elit

Curabitur non nulla malesuada, tempus massa nec, tempus lacus. Sed scelerisque tincidunt nisi, ut pellentesque lacus pulvinar ac.

WYSIWYG Button

“Testimonials are a huge opportunity to add social proof to your website and gain more trust from your visitors. Here are some great tips on how to write and obtain persuasive testimonials.”

Andy Crestodina
Co-Founder / Chief Marketing Officer of Orbit Media

“Testimonials are a huge opportunity to add social proof to your website and gain more trust from your visitors. Here are some great tips on how to write and obtain persuasive testimonials.”

Andy Crestodina
Co-Founder / Chief Marketing Officer of Orbit Media

“Testimonials are a huge opportunity to add social proof to your website and gain more trust from your visitors. Here are some great tips on how to write and obtain persuasive testimonials.”

Andy Crestodina
Co-Founder / Chief Marketing Officer of Orbit Media

“Testimonials are a huge opportunity to add social proof to your website and gain more trust from your visitors. Here are some great tips on how to write and obtain persuasive testimonials.”

Andy Crestodina
Co-Founder / Chief Marketing Officer of Orbit Media

Header for Statistics

These counters can also serve as a great resource to provide some social proof.

Newsletter Subscribers

Orbiteers on Staff

Years of Service

%

Pure Love

Call to Action Enticing Header

H4 typed in via the WYSIWYG. Button and header are input via specific fields so they can have their own styles if desired.

Button Class Link

Conversion Focused Header Text for Bottom of Page

Friendly text further encouraging the user to choose to take action.

Send Sarah a Message

Recent Blog Posts H4

No Results Found

The page you requested could not be found. Try refining your search, or use the navigation above to locate the post.

Recent Blog Posts H4

No Results Found

The page you requested could not be found. Try refining your search, or use the navigation above to locate the post.

Background Video Example

This same layout could also be repurposed for a page header. Note that background videos need to be uploaded to the WordPress media bin, they cannot be Youtube or Vimeo links due to DIVI specific format requirements.

DIVI specifies the following: All videos should be uploaded in both .MP4 .WEBM formats to ensure maximum compatibility in all browsers. Video backgrounds are disabled from mobile devices. You should define both a background image and a background video to ensure best results.

50:50 Full-Width with Inline Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu venenatis nisl. Nulla eget justo eget metus aliquet posuere at vitae ligula. Nam a rutrum elit. Curabitur non nulla malesuada, tempus massa nec, tempus lacus.

Warning: This text can become taller than the image it’s beside on some desktop screens, depending on the text length. This is something we need to further investigate before we fully recommending using this layout. Alternatively, a background image can be used on the left but it will not be a perfect square as it’s height will be determined by the text content, not the image.

Bolded Paragraph CTA ›

50:50 Full-Width with Inline Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu venenatis nisl. Nulla eget justo eget metus aliquet posuere at vitae ligula. Nam a rutrum elit. Curabitur non nulla malesuada, tempus massa nec, tempus lacus.

Warning: This text can become taller than the image it’s beside on some desktop screens, depending on the text length. This is something we need to further investigate before we fully recommending using this layout. Alternatively, a background image can be used on the right but it will not be a perfect square as it’s height will be determined by the text content, not the image.

Bolded Paragraph CTA ›

50:50 Full-Width with BKGD Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu venenatis nisl. Nulla eget justo eget metus aliquet posuere at vitae ligula. Nam a rutrum elit. Curabitur non nulla malesuada, tempus massa nec, tempus lacus.

The height of the image next to this text is based on the amount of text in this box and the padding set around it. Because so, you’ll see the aspect ratio of the image change depending on the width of your browser. We’re also working through the best way to display the image on mobile and tablet when this text box stacks and not longer determines the image’s height.

Bolded Paragraph CTA ›

50:50 Full-Width with BKGD Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu venenatis nisl. Nulla eget justo eget metus aliquet posuere at vitae ligula. Nam a rutrum elit. Curabitur non nulla malesuada, tempus massa nec, tempus lacus.

The height of the image next to this text is based on the amount of text in this box and the padding set around it. Because so, you’ll see the aspect ratio of the image change depending on the width of your browser. We’re also working through the best way to display the image on mobile and tablet when this text box stacks and not longer determines the image’s height.

Bolded Paragraph CTA ›