Using Content Sections

The RQS website builder helps you to easily design your pages with the addition of Page Sections. These Page Sections can be added almost anywhere on your website giving you the opportunity to make something really unique.

This guide will outline how to add, edit, and make use of one of these Page Sections, Content.

The Content Area is the 'bread and butter' of your site content and allows you to add text, images, media files and social media snippets to your web page.

The following guide assumes you are adding a new Section to an existing page. If you are creating a new page and using a Content Section as a starting point, the following process is exactly the same.

To add a new Page Section to your page right-click any area within your content to open the RQS Menu, then select Insert Page Section. From the secondary menu that opens, choose where you would like the section to initially appear. You can either Insert Section Above or Insert Section Below the selected location.

This placement isn't final, you can still move your Page Section once created.

Once you have chosen your initial placement the Add Page Section window will open allowing you to select a Section Type. For this guide, we are selecting Content. Click Add Page Section to continue.

After selecting to add a Content Section you will now be offered a series of templates to start you off. While you have to select one of these options, you are able to add, edit and remove sections without restriction.

Once you have selected your template, click Create to add this to your page. You will now be returned to your page with the new section already highlighted.

If you have been following this guide from the beginning, your new Content Section should already be highlighted for editing. If not, right-click the area and select Edit Content from the RQS Menu.

Your Content Section should now be highlighted on the page, which will allow you to edit or add Page Elements. In the example below, we started with a template that included two text boxes and an image.

To add any Element to your Content Section right-click anywhere within the section then click Add Page Element. The secondary menu that opens will provide you with the available Elements you can add.

After selecting any Element from this menu you will be able to position this within your Content Section by using your mouse cursor then left-clicking to save.

Text Area - A Text Area allows you to add text (or images) to your website. This text can be edited using most popular formatting options and easily allows you to also add images, other media, and links to external sites or documents. Once positioned, either Double-Click or Right-Click > Edit Text Area to make changes.

Image - The Image Element allows to you add an image to your Content Section. This image can be a static or animated image taken from your Media Library, Freeola's Stock Image Gallery or a new image that you upload. Once you have decided on a location for your image, either Double-Click or Right-Click > Select Image to choose your image.

Once your image has been added you can make changes to its appearance and actions using the right-click menu:

- Image Settings - The Image Settings window allows you to change the Click Action and Scaling of the image, as well as adding Alt. Text to the image (recommended for SEO purposes).

- Edit Image - This option will allow you to Rotate or Resize your image to your specifications. If you would prefer to use a pre-defined aspect ratio to crop your image to, select Crop to Aspect Ratio.

Media - The Media Element allows to you add video or audio to your Content Section. This media can be taken from your Media Library, embedded from an external source (such as Youtube) or hosted on another site (advanced users only). Once you have decided on a location for your media, either Double-Click or Right-Click > Select Media to choose your media.

In nearly all instances we would recommend using the Youtube option for videos on your pages as this will greatly reduce the loading time of your content.

Spacer - A spacer is usually a small horizontal area that provides a gap between your content to help position items within a content area or to 'space' your different elements about. Once you have selected your location you can use the anchor points on the spacer to increase or decrease its size and create your desired gap.

In the below example we have used the spacer to create a gap between our image and our embedded Youtube video.

Button - Buttons give you another option to use to link your visitors to another location on site, an external URL, or a file or document you have uploaded. Once you have selected the location for the button you can use the anchor points to increase or decrease its size and shape.

Once you have your desired button size, Right-Click then select Edit Button.

The Edit Button window that appears lets you set the Button Text - the wording on the button itself - and the Link Location - where the visitor is taken after clicking the button. You can set your button to take visitors to another Page (and section) of your site, an external site (such as Freeola.com), a Pop-Up Message you have created, an expanding image from your Media Library or another type of file from your Media Library (such as a PDF document).

In the below example we have linked our button to a PDF file.

The colour and corner style of your Buttons can be set within the Website Styling menus. Our guide on using this menu can be read here.

Icon - An Icon allows you to choose from a series of provided icons for use to link visitors to another location on the site, an external URL, a Pop-Up Message or a file or document you have uploaded. Once you have selected the location for the icon you can use the anchor points to increase or decrease the size and shape of the element - the Icon size will not change.

Now to customise, Right-Click the Icon then select Edit Icon.

The Edit Icon window will now open and allow you to select an Icon from a drop-down list, add Icon Text (an optional field that provides context for the button) and set a Link Location. You can set your Icon to take visitors to another Page (and section) of your site, an external site (such as Freeola.com), a Pop-Up Message you have created, an expanding image from your Media Library or another type of file from your Media Library (such as a PDF document).

In the below example we have chosen the Twitter Icon and linked this to the Freeola Twitter Feed.

Snippet - A Snippet is an area of your content where you can display information provided by other websites. Mostly these are used for displaying Twitter Feeds, Facebook Pages, Instagram Posts or a Google Map.

Once you have decided on a location for your Snippet, Double-Click the area or Right-Click > Choose Snippet to choose, or create, your Snippet.

Guides on creating the most popular Snippets can be found within the RQS Guide section of our website.

For this guide, we have used a previously created Snippet linked to the Freeola Facebook Page.

If you wish to make a change to any Element within your Content Section, the RQS Right-Click Menu allows you to do so easily. To enable this edit mode Right-Click within the Content Section then select Edit Content.

Now Right-Click the Element you would like to edit to open the RQS Menu. The middle section will allow you to edit the content of the Element, explained above, the Outer Ring will provide options to change the location of an Element within the Content Section, as well as options to remove or duplicate the selected Element or add another Element to this Section.

The below example shows this Right-Click Menu for an Image.

Add Page Element - This option allows you to add a new Element to your Content Section. The options provided for this selection are described above.

Move Area - This option will bind your Element to your mouse cursor allowing you to move this anywhere within your Content Section.

Delete Area - This will remove your selected Element. You will be asked to confirm this action before the Element is removed.

Finish Editing - Select this to save your changes and close the menu.

Discard Changes - Discard any changes you have made to the Content Section since opening the Right-Click Menu.

Undo/Redo - These options will only appear if you have made a change to your Content Section and allow you to Undo your last action, and Redo if you would like to keep your change.

Clone Area - Creates an exact duplicate of the currently selected Element. This can be useful if you have custom formatting in an Element you would like to use again.

By default, this Content Section will use your Site Colour Scheme. However, should you wish to customise this section of your site you can do so from the RQS right-click menu. To open this menu, right-click anywhere within the section and choose Section Styling from the menu.

Backgrounds: If you would like your custom background to cover the entire width of your site tick the Custom Full Width Background, if you would like your custom background to only cover this Content Section, tick Custom Content Width Background.

These options are not mutually exclusive; the RQS Builder allows you to use both options simultaneously, individually, or not at all.

Once you have decided where your custom background will display, click the large rectangle underneath your selection. This will open the Edit Background window.

This window will offer two tabs: Customise will allow you to create a new background using either a solid colour or image and Existing Backgrounds will allow you to choose from a previously created background.

The drop-down menu on the Customise tab provides several options:

Colour Only - This option allows a solid colour background. By default this will be a transparent colour, but you can change this easily by clicking the small colour square.

Image - These options will allow you to use an image as your section or site background. To select your image select Image, this will open your Media Library. You can either select your desired image from this selection, select a Stock Image or use Upload Media to add a new image. You can also change your background colour should your image selection not fill all available space.

Resize to fill area - This option will resize your image to fill your background space completely. This option is not recommended for very small images.

Fixed position sticky image - This option will expand your image to cover the background, but this will remain static when scrolling through the page content. As you will likely only see a small part of this image, this is not recommended for small Content Sections.

Centred at original size - This option will set your image central to the content. If the image is too small to cover the entire area, some tiling (or repeating) of the image will occur.

Tile over entire area - This option will repeat your image over the entire background area. This option is recommended for smaller, simple, images.

Custom - If you wish to further customise how your background image displays, this option allows you to do so. Recommended for Advanced Users only.

Once you have made your decision, click Finish to save.

Text Colours: If you would like to use a different colour font in your Password Login section as the rest of your site tick the Custom Text Colours box on this window.

This option will allow you to set a custom Text, Link and Link Hover colour. Simply select the colour block next to each option to open the colour picker.

Other: This short section allows customisation of the Breakpoint (The point at which your content begins optimising on smaller screens) and Padding (The size of the space between the content) of this Site Section.

Unless you have a specific reason to do so, it is recommended to leave both of these settings as Off.

Existing Designs: If you have designed content styling already within RQS you can easily select it from this tab.

Once you have decided on your changes, click Finish to save and close the window.

You will now be returned to the editor with your custom background in place.