Single Hero Block

EPI Server Block Name: Hero Single Slide Block

More information about this block here

Configuration Versions:

  • Default Configuration
  • Alternate configuration: 50/50/zig/zag
  • Alternate configuration: 50/50/zig/zag with background

Default Configuration

This widget requires 2 Images. One for desktop devices and one for mobile devices. See image specs below. Also, for this to work properly, it's a good idea to limit the headline and summary (see character limits info below). Also, Button text should be no more than two words (example: Learn More, or Sign Up, etc.)

  • Desktop Image Size: 1425px X 600px (export out as JPG set at 50% quality)
  • Mobile Image Size: 1024px X 1024px (export out as JPG set at 50% quality)
  • Headlines: 75 characters (including spaces)
  • Caption: 90 characters (including spaces)

Note: This configuration is for "display" purposes ONLY. For example, this can be used as a page banner.

Headline to go here in this space (75 Characters)

Word Count with Spaces: 90 characters. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Button One Button Two

Alternate configuration: 50/50/zig/zag

This version allows you to use the "Single Hero Block" as a content block. You can have two versions.

Images Note: Because the basic "Single Hero Block" uses two images, in this configuration, it's not required to load a second image. Just use the the "Photo" option and leave the "Small Photo" option empty.

  • Image Size: 800px X 495px (export out as JPG set at 50% quality)

Content Note: This configuration allows for longer headlines and more copy. However, It's a good idea to keep the paragraph copy to one or two short paragraphs and keep the headlines somewhat short. Remember, the button link would allow you to link to "longer" content if you need to.

Button Note: When not in display mode (as in it's base configuration above), this version only allows for one button in use.

Version 1: Image is on left. Content is on Right

The main headline for this block goes here but keep the headlines relatively short.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue.

Learn More Second Button

Version 2: Image is on Right. Content is on Left.

The main headline for this block goes here but keep the headlines relatively short.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue.

Learn More Second Button


Alternate configuration: 50/50/zig/zag with background

This version created a background tint on the "text" side. As the other alternate configuration, you can have Image/Right - Content/Left, or Image/Left - Content/Right.

This version is just another option if you prefer the text to have a background tint.

Version 1: Image is on left. Content is on Right

The main headline for this block goes here but keep the headlines relatively short.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue.

Learn More Second Button

Version 2: Image is on Right. Content is on Left.

The main headline for this block goes here but keep the headlines relatively short.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue.

Learn More Second Button

[ Feedback → ]