Grid Editor

    
Our Website Management's Content Manager includes a Grid Page Editor feature.  In addition to being able to "Add Page" to create a new webpage and "Add Link" to add a hyperlink to the navigation bar that is automatically directed to a particular webpage, you can choose to "Add Grid," which allows you to easily create a visually appealing webpage.
  
   

The grid editor feature allows an Admin to easily add various sections of content to a new webpage:

  • Text/HTML
  • Embed Script
  • Calendar
  • News Feed
  • Login Form
  • Slideshow
  • Contact Form
  • RSS Feed

These sections can be positioned (dragged and dropped) into rows, which can be comprised of one column (full width of the screen) or multiple columns of varying widths with different content in each column.


In order to properly display narrower content on tablets and mobile devices, the columns within each row will stack on top of one another, so it is easily readable in all devices.

 

We recommend saving your work often (click the save icon in the upper right corner of the grid editor) just in case your session expires or your editing is interrupted.

Examples, rows embedded with columns (using simple Latin text as a placeholder):



12 - One row with one column (full width)

Column 1 - Lorem ipsum dolor sit amet, graeci tincidunt cu per, iusto tibique officiis pri ne. Usu ad omnes instructior, vis quando denique epicuri ne, eam inani appareat splendide te. Quo eu aeterno graecis reformidans, eum ut dicat essent inciderint. Etiam lobortis platonem ius no, an quo erant phaedrum salutandi. Mel meis quidam in. At per meliore propriae mandamus.



6-6 - One row with two equal size columns shown on desktop

Column 1 - Lorem ipsum dolor sit amet, graeci tincidunt cu per, iusto tibique officiis pri ne. Usu ad omnes instructior, vis quando denique epicuri ne, eam inani appareat splendide te. Quo eu aeterno graecis reformidans, eum ut dicat essent inciderint. Etiam lobortis platonem ius no, an quo erant phaedrum salutandi. Mel meis quidam in. At per meliore propriae mandamus.


Column 2 - Lorem ipsum dolor sit ametgraeci tincidunt cu per, iusto tibique officiis pri ne. Usu ad omnes instructior, vis quando denique epicuri ne, eam inani appareat splendide te. Quo eu aeterno graecis reformidans, eum ut dicat essent inciderint. Etiam lobortis platonem ius no, an quo erant phaedrum salutandi. Mel meis quidam in. At per meliore propriae mandamus.

6-6 - The same one row with two equal size columns above shown responsive on a mobile device
(Column 1 displays above Column 2, which is automatically stacked below it)

Column 1 - Lorem ipsum dolor sit amet, graeci tincidunt cu per, iusto tibique officiis pri ne. Usu ad omnes instructior, vis quando denique epicuri ne, eam inani appareat splendide te. Quo eu aeterno graecis reformidans, eum ut dicat essent inciderint. Etiam lobortis platonem ius no, an quo erant phaedrum salutandi. Mel meis quidam in. At per meliore propriae mandamus.


Column 2 - Lorem ipsum dolor sit amet, graeci tincidunt cu per, iusto tibique officiis pri ne. Usu ad omnes instructior, vis quando denique epicuri ne, eam inani appareat splendide te. Quo eu aeterno graecis reformidans, eum ut dicat essent inciderint. Etiam lobortis platonem ius no, an quo erant phaedrum salutandi. Mel meis quidam in. At per meliore propriae mandamus.



4-8 - One row with two columns of varying sizes (left column is narrow, right column is wide)

Column 1 - Lorem ipsum dolor sit amet, graeci tincidunt cu per, iusto tibique officiis pri ne. Usu ad omnes instructior, vis quando denique epicuri ne, eam inani appareat splendide te. Quo eu aeterno graecis reformidans, eum ut dicat essent inciderint. Etiam lobortis platonem ius no, an quo erant phaedrum salutandi. Mel meis quidam in. At per meliore propriae mandamus.
Column 2 - Lorem ipsum dolor sit amet, graeci tincidunt cu per, iusto tibique officiis pri ne. Usu ad omnes instructior, vis quando denique epicuri ne, eam inani appareat splendide te. Quo eu aeterno graecis reformidans, eum ut dicat essent inciderint. Etiam lobortis platonem ius no, an quo erant phaedrum salutandi. Mel meis quidam in. At per meliore propriae mandamus.


3-3 - One row with four equal columns

Column 1 - Lorem ipsum dolor sit amet, graeci tincidunt cu per, iusto tibique officiis pri ne. Usu ad omnes instructior, vis quando denique epicuri ne, eam inani appareat splendide te. Quo eu aeterno graecis reformidans, eum ut dicat essent inciderint. Etiam lobortis platonem ius no, an quo erant phaedrum salutandi. Mel meis quidam in. At per meliore propriae mandamus.
Column 2 - Lorem ipsum dolor sit amet, graeci tincidunt cu per, iusto tibique officiis pri ne. Usu ad omnes instructior, vis quando denique epicuri ne, eam inani appareat splendide te. Quo eu aeterno graecis reformidans, eum ut dicat essent inciderint. Etiam lobortis platonem ius no, an quo erant phaedrum salutandi. Mel meis quidam in. At per meliore propriae mandamus.
Column 3 - Lorem ipsum dolor sit amet, graeci tincidunt cu per, iusto tibique officiis pri ne. Usu ad omnes instructior, vis quando denique epicuri ne, eam inani appareat splendide te. Quo eu aeterno graecis reformidans, eum ut dicat essent inciderint. Etiam lobortis platonem ius no, an quo erant phaedrum salutandi. Mel meis quidam in. At per meliore propriae mandamus.
Column 4 - Lorem ipsum dolor sit amet, graeci tincidunt cu per, iusto tibique officiis pri ne. Usu ad omnes instructior, vis quando denique epicuri ne, eam inani appareat splendide te. Quo eu aeterno graecis reformidans, eum ut dicat essent inciderint. Etiam lobortis platonem ius no, an quo erant phaedrum salutandi. Mel meis quidam in. At per meliore propriae mandamus.