Page Sections are a flexible way to add a wide variety of content to any page of your RocketFusion website, including any of your Content Modules by category; Static Text, videos, as well as any embedable content where you have been given HTML code to paste in.
Module Content includes News, Photo Gallery, Calendar, Blocks, Files, Forms, FAQs and Business Cards, all by Category.
Static Text includes Text with an Image, Full-width Text, Parallax section, and "Polygon" which is like Text with Image but with diagonal edges.
External Content includes videos hosted on YouTube, Vimeo and Facebook.
HTML Code gives you the ability to paste in any embedable code you need to add to your site, such as a Constant Contact form.
To add a new Page Section to any page, scroll down and look for the green Add New Section button.
You will be presented with a pop-up window (see image above) with the four choices shown in the bullet list, above.
If you wish to add a category of Files to a page, or latest News, or upcoming Calendar events, etc., simply choose the module you want to work with from the Module drop-down. Once done, you can choose which category you want to add from the Category drop-down. (If you're looking to add a new category that doesn't exist yet, choose "+Create **New** Category")
Then choose how you would like to display that Module content. For Content Modules that can have attached images, ie; news, calendar, photo gallery, you can choose Blocks, Bricks, Grid, Panels, and Owl. For all Content Modules you can also choose Table and List.
Blocks is a row-based layout where every image is displayed as square-shaped blocks in rows, with the number of columns you choose from the Style drop-down.
Bricks is a column-based layout where every image is displayed in columns, with each image taking up the amount of vertical space they need based on their size ratio (ie; tall images will be tall, wide images will be short), with the number of columns you choose from the Style drop-down.
Grid is like Blocks, but without any margin between images, so they're all sticthed together into a mural-like display, with the number of columns you choose from the Style drop-down.
Panels is sort of like Blocks, too, but it displays the images in a one-plus-four format, with one photo occupying half the section width, and four photos in a two-by-two grid occupying the other half od the section, per row. On the next row of images, the big one will be on the other side, giving a quilt-like effect.
Owl is a single-row slider display type with controls to allow you to continue to slide the images (and titles) in a left-right fashion.
Table creates a dynamic table that allows you to display a certain number of rows (defaults to 10), sort columns, search for content, and page through the full list of content. Modules with images will show their image as a tiny thumbnail. This is a good Display style for Files if you have a large list of them to publish, such as five years of meeting agendas and minutes. If you have only a handful, use List.
List creates a bullet list of all content, without images. This is a good Display method if you have a small handful of Files to publish.
If you chose to create a new category, once you have finished your Add New Section choices and clicked the red Add Module button, you can mouse-over the yellow Manage button and click Manage Category. There you can change the name of the category to what you wish, and select how you'd like the items in that category to sort.
If you're working with files, such as meeting minutes and agendas, the files should be named in a consistent manner, such as "School Comm 2020-12-01 Agenda.pdf" with zero-padding for single-digit dates (ie; 1 becomes 01), and setting the sort order for the Page Section to "title desc" (which will sort the filenames in descending order, z-a, 9-0).
Static Text
Static Text is a flexible Page Section that allows you to add a variety of text sections, with or without associated images, including Text with an Image, Full-width Text, Parallax section, and "Polygon" which is like Text with Image but with diagonal edges.
The most popular one is TextImage, which is what we're using on this very page to create each section of this help document. If selected, you'll be able to add the section Title and begin to write your section text, below. When ready to begin styling your section, click the red Add Static button.
You will notice that your new TextImage Page Section will be displayed on a yellow background. This is used to indicate that the section is not yet set to display to the public. Only you and other Site Admins can see it, while you're logged in. You can set it to display by clicking the red Modify This Section button, above, and setting Display Section to Yes.
You will also notice a blue Click to Add Image button. Clicking that allows you to search for image files on your computer. Once one is chosen you are presented with a cropping tool to crop the image how you would like it. Please note that the cropper box starts as slightly smaller than your image. Please note: if you want the whole image to display, you'll need to move the box to one corner, and stretch the opposing corner out so the cropper box contains the entire image. When you're ready, click the blue Upload button.
Static Text sections have a variety of options shown in tabs (Display, Image and Other), and by default are hidden from the public until you set Display Section to Yes.
Display
On this tab you can set Display to Yes or No. You also have the option to display the section's title, or not (such as in the case of this section you are now reading); changing the Title; changing the Background color of the section, or leaving it transparent; setting the section's top and bottom margins; adding a border to the section; and changing whether the section stays in the normal page width, or if it stretches out to the edges of the browser screen. This last setting will only work if your website template has been engineered to use that functionality.
Image
On this tab you can change the image's width by "columns" (all RocketFusion sites are built using a 12-column system), selecting from 1, which is super-tiny, through 6, which is 1/2 of the content area, and 12, which would set it to be centered across the top of your content. If you choose 12 make sure your image is short and wide, otherwise it will become gigantic.
You can also set the image to be rounded or square; align it to the left or the right of the text; and choose whether it will "float" the text around it, or have the image stay in its own column.
It is in here that you can provide an image caption, if you prefer, as well as an ADA-Required "Image Alt" title, which is the text that people will hear when using a screen reader, such as for people with site issues.
This is also where you can delete the image if you prefer no image.
Other
On this tab you can provide a URL to link the image to another page, and additionally add a linked button for people to click on. If the URL is to another page on your website the link will open in the same browser window. If the URL is to another website, the link will open in a new browser window.
Setting Animation to Fade-in will make that Page Section's image and text fade-in with a sliding motion as it appears in the browser window.
External Content
With this type of Page Section you can include content that is external to your website, which at the moment is just videos from YouTube, Vimeo or Facebook.
This Page Section layout is similar to TextImage in that the video will be shown on one side of the section, and descriptive text will be shown on the other side.
Use the drop-down to choose which service the video came from, give the section a title, choose whether or not to display the section's title, and then paste-in the video's share URL.
To get the Share URL for your videos...
YouTube: click the share icon below the video and grab the URL
Vimeo: click the share button below the video and grab the URL
Facebook: click the three ··· dots on the top right of the post and click Copy Link
Once you've clicked the red Add External button, you'll be brought back to the page you were working on, with your new section on a yellow background. Click the red Modify This Section button and set Display Section to Yes. You can then also change other display settings, similar to Static Text, above.
Edit the descriptive text for this video, which is helpful for people to grasp the context and reason why it's there.
HTML Code
This page section type allows you to paste in any embedable code you received from an offsite service, such as a Constant Contact form, PayPal button, etc.
Simply give the section a title, indicate whether on not you want to show the title (always give your sections a title, even if you're not going to display it), and then paste the HTML code into the text window.
Managing Your Page Sections
Once you've created a Page Section, you have several options for managing it / them.
Remove This Section will remove the section from the page. If the section is using Module Content, then the section is removed but the Module content will remain in your database for later use. If the section is a Static, External or Other, removing it will indeed remove it from not only the page, but your wesbite, too. As of this writing there is no way to have a Static, External or Other appear on more than one page.
Modify This Section brings you to all the display settings and options.
Insert New Section will insert a new Page Section above the tool bar.
Re-arrange Page Sections will allow you to change the order in which the page sections appear on the page. It is helpful if each section has an associated Title (even if it's not displayed) so you know which section is which as you slide them up or down the stack.
