Overview
Rows are a helpful structure to organize your content, and with the controls available, you can make a very large impact to the style of the page. Please make sure you are not overwhelming the user with flashy colors or motion!
Tip: Sometimes, content may not be ready, but you can still actively work on it. To do this, you can set an entire row to only appear for certain groups, or logged in individuals. This way, the public wont see the details you are working on for the upcoming meeting, but they can still view the page with all of the rest of the old meeting content.
Sections
What are Rows/ When to Add them
Rows are a way or organizing content on your page. It allows you to easily change background colors, change order of content easier. Think of them like boxes to put content in and move it around a page. It usually does not make sense to have an entire page on one row, however, not every new content type needs a row. For example, if you have a text block on top of a map, it probably makes sense to add them together into a single ow, unless they are unrelated to each other within the page. There are really no hard and fast rules, but if you would like some advice on it, contact us and we can walk through your content.
Structuring things inside of rows
You cannot nest structures on a page. For example, you can put text and an image next to each other, and under each other. However, you cannot put text on one side and multiple images stacked on the right.
So this, or variations of this, are possible.
But this is not
| Column |
Column |
Content |
| Content |
adding rows
1. Navigate to the editing side of your hubsite, and the page you would like to add/remove content to.
2. Click "Layout"
3. A row is a structure for other content types. The row can control some overall styles like background and text colors. Click and drag the item onto the page.
4. While you are dragging the item, the page will highlight places to drop it with little boxes.
5. Keep the mouse button down and hover over the different boxes to show where the item will go. The little box will change colors to indicate where it will be dropped. Once you have selected the place you would like, let go of the mouse. You can move it afterwards if you would like, so don't worry! To move any item, you
6. To move any item, you can hover over any item, to pull up the menu. Next to the trash and edit options, you can click on the arrows to be able to drag the item around on the page.
Alert: You cannot move items from one page to another, though you can copy and paste some of the content (like text widgets) and/or settings (like surveys or images) between pages.
7. The system will them open the dialog for that item if it is editable that way. Some items are not. To get back to add more items from the edit screen, click on Layout
editing rows
2. The rows already list the MSB colors for background and text options. You can absolutely change these, but ensure your content is still easy to read! Here, you change the background color to blue.
3. Here we changed the text color to a light grey to make sure
4. To change the width of items within a row, hover over the space between the items and arrows will appear. Click on these arrows to move the items back and forth.
deleting rows
1. Hover on the right hand side of the row you would like to delete, and click on the trashcan icon.
background images
1. Hover over any row and click on the pencil icon.
This pencil icon will show in the middle of the row on the right hand side. If you cannot find it, you may have a row with a lot of content. Keep hovering over the content and scroll up and down until you can find the pencil/edit button.
2. From here, you can change the background color of the whole row by clicking on one of the MSB official colors
3. If you would like a different background color than those provided, you can click on the square to the right (which will update based on your background selection). This will bring up a color selector for you to select from.
Please use this responsibly and keep the pages professional looking.
4. You can also add a background image (we recommend grabbing images from Blue Harvest!) by pasting the URL of the image here.
5. To make it easier to read your content over images, you can change the transparency (or opacity) by using the slider.
6. You can change the focus of the image, just like in regular photos, but remember that
7. There is a type of style called parallax scrolling, where the website content seems to float over a stationary background. The fixed background setting allows you to turn this on for this row. Turn it on and scroll up and down on the page to view the effect.
Please use sparingly and don't make the users dizzy!!! ONE parallax row per page MAX.
8. To get fancy, you can make images feel a little more uniform by adding a different, vibrant background color and change the transparency of the image. This will give the image a tint of that color - so all of your images could have the same tint. This is purely optional!!!
private rows
Tip: Sometimes, content may not be ready, but you can still actively work on it. To do this, you can set an entire row to only appear for certain groups, or logged in individuals. This way, the public wont see the details you are working on for the upcoming meeting, but they can still view the page with all of the rest of the old meeting content.
1. Go to the new (or old) row that you would like to make private and hover over it to get the edit pencil. Click on the pencil.
2. Under the rest of the settings, click on the Visibility heading to expand that section.
3. Change from Match Site Sharing to Limit to Group.
4. Click on Select Groups
5. From the popup, you can groups that you would like to add to view it. This may be a great time to add the hubsite's core group to include anyone who has editing privileges
