Page Elements: Helpers

Helpers are preconfigured layout designs for Emory Libraries website pages

Helpers

Helpers take a number of different components and pull them together to make it easier for content editors and authors to create a page layout.  Below are a variety of different types of helpers content editors can use when creating a page on the site. These are available by adding helpers to the layout canvas.

    The job posting helper gives you a template to easily fill in when posting a job.

    Components used:

    • Container: contains the components within a set width and height
    • Divider line: between the page title and the position summary. The color is set to grey 20
    • 2 column layout: set to left 8(2/3) / right 4(1/3)
    • Text box: position summary (typical text formats are “normal” and “heading 2” for section headers)
    • Explorer: links to PDF and organization chart page
    • Content Card: “Apply now” with link to Emory Careers or Interfolio job posting link

    Job posting template fields

    job posting helper template fields

    Job posting example

    job posting published example

    The basic page with explorer can be used whenever you want to give information and some helpful links to further aspects or details.

    Components used:

    • 2 column layout: set to left 8(2/3) / right 4(1/3)
    • Text box: lead paragraph with “paragraph lead” size and styling
    • Text box: typical text formats are “normal” for paragraph text and “heading 2” for section headers
    • Explorer: links to PDFs, internal pages and/or external sites

    Basic page with explorer template fields

    basic page with explorer template fields

    Basic page with explorer example

    basic explorer example

    Use the info card landing page as a hub for multiple links with information.

    Components used:

    • Container: contains the components within a set width and height
    • Text box: lead paragraph with “paragraph lead” size and styling
    • 3 column layout: three equally-sized columns set at 4 1/3
    • Info Card: card with icon, heading, subheading, description, call to action, and link fields

    Info card landing page template fields

    info card landing page fields

    Info card landing page example

    info card landing page example

    Use a content card landing page as basically a hub or table of contents with thumbnails and links for other content pages.

    Components used:

    • Container: contains the components within a set width and height
    • Text box: lead paragraph with “paragraph lead” size and styling
    • 3 column layout: three equally-sized columns set at 4 1/3
    • Content card:  card with image (recommended file type png or jpg; width 568px x 352px or bigger), image alt tag, heading, subheading, badge, description, call to action, and link to page or URL

    Content Card Template Fields

    content card landing page fields

    Content Card Landing Page example

    content card published example

    Use the basic page with sidebar links when you want to supplement the content with additional links to other pages.

    Components used:

    • 2 column layout: set to left 8(2/3) / right 4(1/3)
    • Text box: lead paragraph with “paragraph lead” size and styling
    • Text box: typical text formats are “normal” for paragraph text and “heading 2” for section headers
    • Sidebar links: heading, heading icon, link labels and links to pages or URLs. Multiple links can be added
    • Divider line (between sidebar links components): Color commonly set to grey 20

    Basic page with sidebar links fields.

    basic page sidebar links fields

    Basic page with sidebar links example

    basic page sidebar links published example

    Use the basic page with image content when you have an engaging image to showcase with your content.

    Components used:

    • Text box: lead paragraph with “paragraph lead” size and styling
    • 2 column layout: set to left 8(2/3) / right 4(1/3)
    • Image: the larger the image uploaded the better, since it will stretch across the page.
      • Most common settings in image component: Image size “Large (W1360)” typically used; layout and style/height/behavior: natural size of image
    • Text box: typical text formats are “normal” for paragraph text and “heading 2” for section headers
    • Explorer: links to PDFs, internal pages and/or external sites

     

    Basic page with image template fields

    basic page image fields

    Basic page with image example

    basic page with image published example

    Use a basic page with no sidebar when you just want to get the information out there with as minimal frills as possible.

    Components used:

    • Container: contains the components within a set width and height
    • Text box: lead paragraph with “paragraph lead” size and styling
    • Text box: typical text formats are “normal” for paragraph text and “heading 2” for section headers

    Basic page with no sidebar template fields

    basic page no sidebar fields

    Basic page with no sidebar example

    basic page no sidebar published example