Element: Image with Text Overlay

This element contains many optional features to get the look that you want to achieve. You can include links or styled buttons to other pages in the body content.
Recommended Image Size:

  • Background Image: 2280 px wide by variable height
  • Inner Circle Image: 700px x 700px
    • will center crop anything that doesn't fit this aspect ratio

View Instruction Details

  1. Open the dropdown menu next to Add Page Content Row [Advanced].
  1. Select the option to Add Image with Text Overlay.
  1. Add background color and background image with alternate text. The background image is optional in this element. The background color will still apply without a background image.
Add Background Color and Background Image
  1. Add Title and Body Content. This element includes the option to choose your heading style. The styles are the standard serif heading style or a bold, all-caps sans-serif style. Choose the style that will fit with the overall content and tone of your page.
Add title and content
  1. Add media for the small image. The small circle image is optional. The image should be sized to 350x350 before uploading to Drupal. On wider screen widths it will display on the right. On smaller screens, such as smart phones, it will display above your text content.
Add Media

Watch Cute Dogs Play

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

University Homepage

University Homepage

Dog playing in mud

Test

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

University Homepage

University Homepage

Ohio Attack Bobcat

Check out this cool thing

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

University Homepage

University Homepage

Ohio Attack Bobcat

Test

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

University Homepage

University Homepage

View Site in Mobile | Classic
Share by: