ATLAS - Image Page Type

ATLAS - Image Page Type

Last updated 02.20.25

The ATLAS - Image Page Type is used to add the images that are used in a Hero Slick Slider. ATLAS Image pages are typically add to a Folder. This page type is templated with all of the available fields that are displayed in a Hero Slick Slider.

The Hero Slick Slider is created in two steps, first by building the individual slides here in the Atlas Image Page Type and then by adding the slides to the Hero Slick Slider Widget

Getting Started

1. In the Pages Application, click the plus icon to add a Folder to the content index to hold the slides
2. Select the Folder and then add ATLAS - Image from list of available page types
3. Complete the Properties below
4. Click Save

Properties

PROPERTYDESCRIPTION
Name (required)Text entry field for image name
Image
  • Image (Small) (required) – click “select” button to choose an image via the Media Library Application that will be used for small screens (mobile). Note this image will be used for medium and large screens if no images are specified.
  • Image (Medium) – click “select” button to choose an image via the Media Library Application that will be used for an image that will be used for medium screens (tablet)
  • Image (Large) – click “select” button to choose an image via the Media Library Application that will be used for large screens (desktop)
Header TextText entry field for a limited large headline. This will give you big bold text across your Hero Image
Enable H1 header tagCheckbox to enable the header text designated as an H1 tag for improved SEO
DescriptionText entry field for small paragraph text across your Hero Image
Number of ButtonsSelect from menu:
  • 0
  • 1
  • 2
Button [1 or 2] TextEnter text to be featured on each button. Typically shorter text is better for ease of reading and to keep the design tidy. If text field is blank, the button will not display.
Button  [1 or 2]  URLThe URLs attached to the button can simply link to another page of the website, to an anchor link on a page, to a different website, can automatically open a pre-addressed email, link to a phone number or a document from the Media Library Application.
Button  [1 or 2]  ColorSelect from:
Default (None)
Primary
Primary Color - Light
Primary Color - Dark
Secondary
Secondary - Light
Secondary - Dark
Gradient
White
Light Gray
Medium Gray
Dark Gray
Black
Button  [1 or 2]  StyleSelect pre-built style options from the menu. Note that if two buttons are featured, each one may have its own style. Below is the list of styles that can be selected:
Default - a rectangular shape with a solid-color fill
Round - a pill shape with a solid-color fill
Radius - a rectangle with slightly rounded corners with a solid-color fill
Hollow - a rectangular outline shape with a transparent fill
Expanded - an extra-wide rectangular shape with a solid-color fill
Disabled - a rectangular shape faded back to denote that it is disabled
 • Clear - a transparent button with only text visible
Open in New Tab (Button [1or 2])Checkbox toggles between button url opening in the same browser window or in a new browser tab
Text Background ColorThe background color attribute effects the color behind the text and button in the feature. Initially, Default is selected, which is no color added. Select from your custom brand colors or grayscale options from the menu. Below is the list of Background colors that can be selected: 
Black Overlay (Default)
Primary Color Overlay 90%
Primary Color Multiply 90%
Secondary Color Multiply 90%
Secondary Color Overlay 90%
White 75%
 Light Gray 75%
Medium Gray 75%
Dark Gray 75%
None
Image Alt TextThis attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error, or if the user uses a screen reader). Optional but recommended.
Custom CSS ClassSelecting alternate layouts in CSS Class unlocks a wide selection of looks for your Hero Image. Select from:
Layout A – Text Box Centered (default)
Layout B – Text Box Left Aligned
Layout C – Full Image Centered
Layout D – Text Box Right Aligned
Layout E – Text Box Wide Centered Top
Layout F – Text Box Wide Centered Bottom
Layout G – Full Background with Text Borders
Layout H – No Button Shown – Image Clickable (URL required or Slick Slider will not appear on page)
Layout I – Default layout (usually a custom design)
Layout J – Text Box Floating Left
Layout K – Text Box Floating Right
PublishingPublish from – select date from calendar interface
Publish to – select date from calendar interface

Example

Hero Slick Slider Widget featuring three slides created in the ATLAS - Image Page Type shown here.

Headline

Eiusmod tempor incididunt ut labore et dolore magna aliqua.

Headline

Eiusmod tempor incididunt ut labore et dolore magna aliqua.

Headline

Eiusmod tempor incididunt ut labore et dolore magna aliqua.