Images 4 – Shadow Image & Text
Images 4 – Shadow Image & Text
Description
This section has a large vertical image with a shadow that appears upon scroll. It includes a headline, short text and an optional link. Choose from several shadow colors.
Fields and Character Limits
*required fields
Headline*
- Character Limits: Recommended limit of 90 characters including spaces
- Help Text: Enter the headline text. There is a recommended limit of 90 characters including spaces. This field renders as an <h2>. See Headers for guidelines and best practices for headlines and sub-headlines.
Short Text
- Character Limits: Recommended limit of 200 characters including spaces
- Help Text: Enter the short text. There is a recommended limit of 200 characters including spaces.
Link URL
- Help Text: Start typing the title of a piece of content to select it. You can also enter an internal path such as /node/add or an external URL such as http://example.com. Enter <front> to link to the front page. Enter <nolink> to display link text only.
Link Text
- Character Limits: Recommended limit of 15 characters including spaces
- Help Text: Enter the link text. There is a recommended limit of 15 characters including spaces. Avoid link text like Click Here, Learn More and More. See Links for more info, including accessibility concerns, examples and best practices.
Image*
- Limits: 3MB, 1140 x 641 pixels, png jpg jpeg.
- Help Text: Move white plus icon to select your preferred focal point for automatic image cropping. See Images for guidance and best practices.
- One file only
- 3 MB limit
- Allowed types: png jpg jpeg
- Images must be larger than 1140x641px
Alternative text*
Help text: See Alternative Text for info about writing effective alternative text.
Available Style Options
Text Orientation*
- Left
- Right
Shadow Color*
- Lake
- Sky
- Night
- Fog
Where Can You Use This Section?
The section is available in the following templates and content types:
Templates
- List
- Marketing
- Start
Content types
- Landing Page
Using on a cloneable Template
- Locate Images 4 – Shadow Image & Text in the Body area
- Replace the placeholder text with the Headline and Short Text
- Replace the Link URL and Link text if you want a link. If not removed the contents of the fields.
- Select Remove to remove the placeholder image
- Add an image select the Browse button to upload from your computer, or select the link Open File Browser to find a previously uploaded image
- Set the focal point by moving white plus icon to select your preferred focal point for automatic image cropping
View Screenshot - Enter the Alternative text
- Go to the Style Options tab and select Text Orientation and Shadow Color
View Screenshot - Select Save at the bottom left of the page
Adding to a new Landing Page
- In the Body area, select Add Body Section
- Select Images 4 – Shadow Image & Text, select Add
View Screenshot - Enter the Headline and Short Text
- If you want a link enter the Link URL and Link text
- Add an image select the Browse button to upload from your computer, or select the link Open File Browser to find a previously uploaded image
- Set the focal point by moving white plus icon to select your preferred focal point for automatic image cropping
View Screenshot - Enter the Alternative text
- Go to the Style Options tab and select Text Orientation and Shadow Color
View Screenshot - Select Save at the bottom left of the form
Accessibility
- Alternative text is required for all images. See Alternative Text for info about writing effective alternative text.
- Avoid link text like Click Here, Learn More and More. See Links for more info, including accessibility concerns, examples and best practices.
Guidelines and Best Practices
- This section can be used individually or grouped together to form a short visual list.
- Likely uses for the short text field include: introductory/boilerplate statements and summaries.
Removing a Section
To permanently remove a section from a page:
- Select the vertical ellipsis to the right of the Edit button at the top-right of your section, select Remove
View Screenshot - Select Save at the bottom left of the form