ATLAS - Image Page Type

ATLAS - Image Page Type

Last updated 11.02.22

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 
     • Primary Color Multiply 90% 
     • Secondary Color Multiply 90% 
     • Secondary Color Overlay 90% 
     • White 75% 
     • Light Gray 75% 
     • Medium Gray 75% 
     • Dark Gray 75% 
     • None
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
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.