[Planned] PeopleSoft HR/CS Production systems will be unavailable Sat 11/17 from 5pm to 9am Sun 11/18 for maintenance.

Home / Node / Help & Examples

Main menu

Please read through these instructions before starting to create your site.

-----------

Change a Page's Layout

You can change the layout of your page content area (between header and footer) by clicking the "Change this layout" button at the bottom of the page. There are many layouts to choose from:

 

  1. Choose a layout and click next. 
  2. You'll be asked to verify which regions content should move to in the new layout.  Drag and drop content panes to the correct regions.  Remember: heroes, content callouts, title banners, spotlights (slideshows) and other full-width elements must be placed in a full-width row by themselves.
  3. Click save and check your page.  You may need to click "Customize this page" and rearrange content panes again.

-----------

Customize a Page

You can rearrange content, add new content, and add styles to your page by clicking the "Customize this page" button at the bottom of the page.

You'll see your current layout of regions in rows, with current content panes inside their current regions.

 

 

Rearrange Panes

You can drag and drop content panes to new regions and new rows.  Remember: heroes, content callouts, title banners, spotlights (slideshows) and other full-width elements must be placed in a full-width row by themselves.

Add Content

Click the Plus button     on a region to add new content panes to it.  Available content panes include:

 

  • Exisiting blocks or content ('Add content item' link)
  • Links, images. maps, tables, video, submenus, and lists
  • ASU web standards elements, such as an ASU spotlights, title banner, or hero (see below for specifics on full-width elements)

Add Styles

Click the paintbrush button     on either a pane or row to add styles, spacing, background colors, alignment and more to a pane.  For example, to add spacing above and below a row:

 

  1. Select 'Spacing and backgrounds'   and click 'Next.' 
  2. Select 'Add spacing above row' and 'Add spacing below row' and click save.

-----------

Heroes

Only add a hero to a a full-width top row by itself.  (Do not add any other panes to this row. ) Change the page's layout if necessary.

  • Full-width. 
  • See standards site for requirements on where heroes can go - http://asu-ws.29thdrive.com
  • You can only add a hero to the top of a page, and only to a single-column row.
  • Have to choose either the two blue buttons (can change the url) or a single red button.
  • To add spacing to a row or pane, click "Customize this page," then the paintbrush button     on the pane or row, then "Spacing and background colors."

-----------

Content Callouts

Only add a content callout to a full-width row by itself.  (Do not add any other panes to this row. ) Change the page's layout if necessary.

  • Content callouts are full-width....etc.  See web standard guidelines on placement - http://asu-ws.29thdrive.com
  • Edit existing content callouts with your own text, images and video links.
  • Place content callouts in a pane:
  • Click the Plus button     in the Customize this page view
  1. Click "Add content item" from left sidebar
  2. Search for content by starting title in the Piece of Content field.
  3. Under Display Settings, choose display type 'Content.'
  4. Under Content Settings, choose 'Full content.'
  5. Save.
  • Style the content callout pane:
    1. Click the paintbrush button     in the layout view
    2. Choose 'ASU Standards custom styles' and click Next
    3. Add a row background color, row spacing, or pane spacing.

    -----------

    Title Banners

    Only add a title banner to a full-width row by itself.  (Do not add any other panes to this row. )  Change the page's layout if necessary.

    1. Click the Plus button     in the Customize this page view
    2. Chose the banner title.  Type the title of the page and upload a 1220 x 200 px image.  Save.

    -----------

    ASU Spotlight (Flexslider)

    Only add a spotlight (slideshow) to a full-width row by itself.  (Do not add any other panes to this row. )  Change the page's layout if necessary.

    • Full-width slider, with title, action buttons, and customized placement
    • Placing slider in a container will cause entire container to go full width, important to know if other elements are in container
    • Slider settings such as animation and speed can be customized at Configuration->Media->ASU Spotlight
    1.      in the Customize this page view
    2. Click "Add ASU Spotlight" in the left panel
    3. Enter information for each slide, including title, description, button placement and color
    4. Click Save

    -----------

    Mega Footer

    • Module that can be enabled or disabled
    • Customization is done on the block configure page by going to Structure > Blocks, then clicking "Configure" on Mega Footer block
    • Social media links that are not entered will not show output of the corresponding icon
    • Non-required fields that are left blank will not be output also, including logo image upload field.  
    • Menu for the Mega Footer can be customized at Structure->Menus->Mega Footer Menu.  Please note that the top-level menu items will be output as headings and not links.  The links will also be output in an order which reflects the Mega Footer Menu item order.

    -----------

    Mega Menu

    • To customize the menu navigate to Structure -> TB Mega Menu.
    • Once there, find the menu that will be customized and click "Config".  In this instance that menu is main menu.
    • For a quick tutorial on configuring please see http://www.youtube.com/watch?v=WnuhbFwsJ3M

    Any changes to the menu itself (adding links, changing where items link to, etc) will need to be made under Structure -> Menus -> Main menu.  

    -----------

    WYSIWYG

    The WYSIWYG offers additional features and styles that can be applied to any text area. 

    Tip: Click the "Show/hide toolbars" button     to reveal all WYSIWYG options.

    • Headers: highlight the text you want to be a header. Click the 'Format' dropdown and choose a header level.
    • Images: To left or right align an image so text flows around it, highlight the image and click the 'Styles' dropdown, then choose an image alignment.  You can also use the 'Styles' dropdown to add rounded corners, borders and an oval shape to images.
    • Buttons: Create the red, gold, blue and grey web standard buttons by highlighting a link and choosing the style from the 'Styles' drodown.  See the standards site for requirements on gold and blue buttons - http://asu-ws.29thdrive.com
    • Templates: Add pre-built templates to a page or a pane by choosing the template button     in the WYSIWYG toolbar.  The web standard "Explore Our Programs" box is pre-built for you.  Create new templates at /admin/config/content/wysiwyg-templates