Skip to Navigation Skip to content

Regional and Mesoscale Meteorology Branch

Search the RAMMB website

RAMMB Website Wiki - Back to the full Wiki


Main Topic: The Page Builder

The Page Builder has been created with grids and mobility in mind. As of the writing of this you can format your content in up to 4 rows.

Use the “Add New Row Set” button to select your layout.

You can select multiple layouts per page.

 

Note: Some Content Blocks are not available in all Row Sets

 

After you add a Row Set to your page you can start to add the Content Blocks you wish to use. There are a number of Content Blocks to choose from.

  • Section Titles
  • Text Editors
  • Spacer or Dividers
  • Fancy Buttons
  • Images
  • Lists
  • Card Layouts*
  • Videos
  • Accordionist
  • Tabbed Sections
  • Sort-able Tables
  • Relationship Fields
  • Pop Ups
  • Redirection/iFrame*

Note: Due to formatting some blocks are not available in all row sets

All Layout elements can be seen here: https://rammb2.cira.colostate.edu/custom-layouts/

Section titles can be used to add a header to any Content Block Element or Row Set.

When you add a Section Title you will be given a choice of Header Level. This will determine the size and style of your header. H2 is the largest of the headers and comes with an underline element.

 

The Spacer/Divider block is a way to help you organize your content on the page. When you select this Content Block Element you are presented with a choice of either Spacer or Divider.

A Spacer will add a blank space to the page

A Divider will add a horizontal line to the page.

These can be used in most Row Sets

The Image Block comes with three options:

  • Image Gallery
  • Single Image
  • Image Slider

When you select the Image Content Block you will be presented with a drop-down tool to choose which format of image you need. The image gallery and image slider work in a similar manor. When you select either of these you will be presented with a gallery box and an “Add to Gallery” button. Use this button to open the Media Library and select as many images as your gallery or slider require. Once added to your gallery you can drag and drop to arrange the order of your images.

A single image works in a similar manor but you will only be able to select one image from the media gallery.

If you need to edit your single image, hover over the image and you will be presented with a small set of icons. Use the pencil icon to edit the image, use the X icon to remove the image and select a new one.

You cannot edit images from the Gallery or Slider boxes but you can remove them using the same method of hovering over the image and selecting the newly displayed X icon.

You can create styled lists using the List Sections Content Block.

When you select this block you will be given a new button called “Add New List Item” clicking this button will add a new row to your list. You can add as many rows as you need, they can be drag and dropped to re-order as you need.

Each row within the list can be either a Link Item, File/Media, or Pop-up Box.

When you add a row you can use the drop-down tool to select which item you need.

A standard link will give you the space to add an internal or external URL and link text. You can use the URL in both spaces if you do not need custom link text.

A File/Media is a link to an uploaded PDF, Word Doc, or other file. When you select this option you will be given a button to open the Media Library where you can select or upload your image or file. If you need information on this you can visit the Media Library section of this Wiki.

PLEASE be aware of file sizes when you upload things to the site. If your file is too large or a format that is not supported please see the “How to upload large files/media” section of this Wiki.

A Pop-Up will give you a space to add your pop-up text, which will display in a nice button format, and a large area for your pop-ups content which will display when the user clicks on the button.

 

When you select the Detailed Cards Content Block you can will be presented with a new button. Select the “Add New Card” button and your screen will now display a place for a Title, Content, Image and Link.

IMPORTANT:

  • You can only use detailed cards in a Single Row Layout.
  • Cards are formatted to sit 4 in a row on a large screen, 3 in a row on tablet sized screens, and to be full width on phones.
  • If you add less than 4 cards the cards will stack to the left of the content area. If you add just one card it will float left and the rest of that row will be empty.

The card Title will display on the front of the card over the image, when a user hovers on the card it will display the content. Please keep the content here short, the box is only so big and extra text will just be cut off.

You can add an image to the box and the site will do its best to format that image to fill the given space. Box images are set to be 330px high.

If you need help with uploading or selecting images visit the “Media Library” section of this Wiki

Card Links will create a link wrapper around your card. If a user clicks on the card they will be directed to your internal or external URL.

A video block will give you a space to paste a video URL. It will display a preview of your video on the editor and it should format the size accordingly.

Accordions are expandable and nested content blocks.

When you select the accordions content block you will be given a new “Add Main Row” button. Use this button to create a new accordion section. Each Main Row has a Title and Content block, but they also have a secondary button labeled “Add Internal Section”. You can add 1 level of accordions inside the Main Row accordion. This can get somewhat confusing so be carful as you edit.

The title of the accordion (both Main and Internal) will show in a styled blue row, the Internal rows are light blue, the Main row is dark blue. When a user clicks on this title it will expand downward and show the given content and the Internal row titles in their light blue style. When a user clicks on an Internal Row, that will expand to show the given content.

You can add as many Main or Internal Rows as you need.

The accordion content block comes equip with an “Expand/Collapse All” button so users can open or close all the tabs at once.

Pro-Tip: Accordions can be collapsed on the editor screen for easier editing. If you hover over a Main Row a small upward arrow will appear on the left of the Row. Click this to collapse the row. This will not do anything to the front-end view, it only creates more space on your editor view.

Tabbed Areas are nested content displayed in a system of horizontal tabs.

When you select this content block you will be given an “Add New Tab” button, clicking this will add a new tab row to the editor. Each Tab Row will let you enter Tab Text and Tab Content.

Users will be able to click on each title to flip through each titles given tab content.

You can add as many tabs as you need.

You can drag and drop tabs to adjust order

Sort-able tables are a bit of a tricky tool, but can be a powerful one too.

When you add new table you will be given an empty table with a single row and single column. Use the Plus icons to add rows or column, once you add a second row or column you will be given Minus icons to removed any rows or column.

There is also a light gray row above the 1 row, this is the header row. Use this to add titles to each column and to create the sort function. The tool will use these headers to make the table columns sort-able by clicking on the title.

The Relationship Content Block is a very specific tool used to create a list of Training Sessions and can only be used in a Single Row.

When you select this content block you will be given a table with a list of all the Training Sessions created. You can select training sessions and they will be added to the list on the right of the table.

These selected training sessions will then be displayed in a sort-able table on your page and will link to the associated training session.

Pop-ups create just that. A space for a title and content, when the users clicks the title the pop up will display. These are similar to the List Section Pop Ups but are just pop ups and cannot be used as any other kind of link.

Use the “Add a Pop Up” button to create a new pop-up. You can add a pop-up title and associated content. The title will display on the page as a light blue button and the content will appear in a white content box with a black screen overlay.

You can add as many Pop-Ups as you need.