ATLAS Web Framework – Fancy Page

How to add a Fancy Page in the ATLAS Web Framework

Fancy page is the more advanced version of Basic Page. It gives you more options to style and arrange content on the page. It also includes a photo gallery feature. 

Adding a New Fancy Page

You must be logged in as an Editor role or higher to add Fancy Pages
  1. Under the Manage menu at the top of your page, click the Content option
  2. Click the blue + Add Content button just below the content heading
  3. Click Fancy Page on the list of available Content Types
  4. Complete the following fields:
    • Title – The Title will appear at the top of your page in large text. The title in particular will also be picked up by Search Engines so choose a title that accurately describes your page.
    • Paragraph – In this section you can choose one or more Paragraph types to add to your page.  Each type is described below.
    • Menu Settings – At the bottom of the form, you will see a special section for additional options.  Click the Menu Settings option and check the Provide a Menu Link box to add this page to the menu structure.  There are several fields:
      • Menu Link Title - This is the name that will be shown in the menu.  Leave it blank to use the title of the page or put in a custom menu title.
      • Description - This text will show when the user hovers the mouse over the menu option.  It's particularly useful if there are several options that may confuse the user.
      • Parent Item - This is the most important field.  It controls where your page will sit in the menu.  There are several main sections in your site that will show in this list surrounded by brackets (<Site Section>).  Below that you will see other pages that have been added.  Choose the item that will contain your new page.  In the image shown here, the user has selected Anthropology Major which means this new page will be shown under the Anthropology Major page in the Undergraduate Programs section of the Academics section and alongside the Archaeology Concentration, General Anthropology, and others. menusettings
  5. Click the Preview button to see what your page will look like:
    • Click the Back to Content Editing button at the top of the page to come back to make changes or save your page
  6. Click the Save button to save your changes

 Paragraph Types

 Colored Text Block with Image

Add Colored Text Block with Image – 
  1. Image – Choose the image to upload from your machine. Add Alternative Text for screen readers, search engines, or when the image cannot be loaded.
  2. Text – Enter text to go along with the picture.
  3. Class – 
    1. Choose one of Float Image Left or Float Image Right to adjust the position of the image you just added. (By default the image floats left.) 
    2. To set the background color, choose one of Blue Background and Orange Background.

textwithImage
 Expand/Collapse

Add Expand/Collapase Block -
  1. Collapsed Text - This is the title of the collapsible section.collapsed text
  2. Expanded Text - This is the body of the collapsible section. You can use the format toolbar to add bullets, tables, images, links, and files as well as basic formatting. For more information about formatting body content, see the Text Formatting in Drupal page.
expanded text

 Menu Block

Add Menu Block
  1. Image – Choose the image to upload from your machine. Add Alternative Text for screen readers, search engines, or when the image cannot be loaded. There is a 512 MB limit.
  2. URL – Enter the page you want to link to.  It can be to either a page on your site or a full url to any page.
  3. Link Text – The text that will show below your image.  This is where the user clicks.
  4. Class – Choose one of Blue Background or Orange Background as background color of the Link Text.
menuBlock

 Photo Grid

Add Photo Grid

Photo Grid Images – Choose the image to upload from your machine. The Alternative Text field will be displayed when the user expands the image as well as for screen readers, search engines, or when the image cannot be loaded.
photogrid
photogrid open

 Rich Text

Add Rich Text

Rich Text – This functions like the Basic Page content type. You can use the format toolbar to add bullets, tables, images, links, and files as well as basic formatting.  For more information about formatting body content, see the Text Formatting in Drupal page.
richtext

 Text with Image and Header

Add Text with Image and Header

  1. Heading – The heading will appear at the top of this block.
  2. Image – Choose the image to upload from your machine. Add Alternative Text for screen readers, search engines, or when the image cannot be loaded. Has 512 MB limit.
  3. Paragraph Text – A text paragraph to go with the image you just added. You can use the format toolbar to add bullets, tables, images, links, and files as well as basic formatting. For more information about formatting body content, see the Text Formatting in Drupal page.
  4. Class – Choose one of Float Image Left or Float Image Right to adjust the position of the image you just added. (By default the image floats left)
textWImageNHeader

 Two Column Text Block

Add Two Column Text Block

Two-Column Text – Enter the text content, the system will automatically divide the text into two columns when it displays.
twocolumn

You can always remove a block or contents of the block by clicking on remove buttons on the right. (circled in red in the picture below) Also, you can drag the blocks around to arrange their order of appearance, or click on Show row weights to adjust it (circled in blue).
remove



You can add more Paragraph elements by repeating step 4(b).




Still have questions?
If you still have questions, please send email to atlas-web@illinois.edu and be sure to tell us the URL for the site and/or page you are having trouble with.




Keywords:Drupal ATLAS Framework LAS Web   Doc ID:80698
Owner:Susie L.Group:University of Illinois Liberal Arts and Sciences
Created:2018-03-07 17:00 CDTUpdated:2018-03-19 10:08 CDT
Sites:University of Illinois Liberal Arts and Sciences
Feedback:  0   0