Getting Started

To get started building your website's Landing Page, log into the Content Management System (CMS) and head to your channel's dashboard. On the left-side menu underneath the CUSTOMIZE section you should see Website Builder. Click it to head to the interactive Website Builder.

Making a Block

To start building your Landing page, you'll need to pick the first block you want.

On the right side of the page is the Editor which allows you to choose various kinds of blocks to add on your page. Each block allows for a lot of customisation of both the look and text. 

To add a block, simply click on the kind of block you want to add on the right side of the screen. Once you click on a block, it will appear on the landing page in the preview section and the editor panel will allow you to add text to the fields, add a background image and customise various other settings. When you have finished customising this block, you can save the changes at the bottom of the editor panel.

Adding another block will make the new block appear underneath the existing blocks.

 

Editing, Rearranging and Deleting a Block

To edit a block, click on the edit icon in the top left of the block you want to edit. The edit icon looks like a pencil on paper. You can also duplicate a block directly beneath it by clicking the duplicate icon which looks like a pair of squares. 

To move the block up one space, click on the up arrow in the top left corner of the block. This will move the block up, replacing the position of the block above and moving that block down.

To delete a block, click on the bin icon in the top left corner of that block. You will be asked to confirm your decision in order to delete the block, in case you make a mistake.

 

Types of Block

Headline CTA

This block is exceptionally customisable, offering three different types of text, the option to add a background image with or without a gradient, Call-to-action buttons and an embedded image.


Text Options

There are three types of text you can use: Intro, Title and Subtitle. 

The Intro text uses the colour you selected on the Branding tab of CMS, a useful way of highlighting text to introduce a block or add a marketing message.

The Title text is the largest and most bold of the three text options, perfect for the title of your website and to title subsequent blocks.

The Subtitle is great for explaining your message or listing short sentences. The text is more prominent than the Intro text, but not the focus like the Title text is.

You can also choose the alignment of the text, choosing either Left, Centre or Right.

Background Image and Overlay

Here you can choose a background image to put behind your block. We recommend using images with strong colours and no text. You can choose to upload the image directly using the uploader, or pick one that you have uploaded previously through the Media Library. If the image is not a 16:9 ratio image, you will be prompted to crop the image to size.

Using the Overlay slider, you can apply a gradient to the image so that the text displays more clearly. Make sure to head to the Appearance tab in the top right of the editor panel and choose the appropriate Theme by pressing the Sun or Moon icon for Light or Dark theme, respectively. Changing theme will change the way that the text looks in the block.

Call To Action

You can add Call To Action buttons in this section, letting you create buttons that can link to other areas of your SupaPass Web-App, or to other websites/hosted files. 

When you created a Headline CTA block, it creates a Call To Action button by default. You can delete this button, or replace the text and link to suit your needs. You can also add a second button alongside the first. 

Changing the Call to Action Text will change the text on the button itself. Changing the Call to Action Link will alter where the button will take a user. By default, the button will take the user to the subscription page for your Web-App. You can put in any URL and the button will take the user there.

The Button Style slider lets you change the look of each Call To Action button, ranging from no impact, to high impact from left to right. If you want to change the shape of the buttons, click on the Page Settings text at the top of the page and find the Button Rounding slider. Once you have changed the slider make sure to save at the top of the Page Details form. You may need to refresh the webpage in order for the changers to appear, so make sure to save any changes before refreshing.

Image

Here you can add an embedded image that will display adjacent to the text. Like the background image, you can choose the image from your Media Library, or upload it directly.

Once you have uploaded an image, you can change where it displays in relation to the text by clicking the Appearance tab in the top right of the editor panel and selecting an option from the Image Position section.

 

L/R Side Image

The L/R Side Image block is the same as the Headline CTA block, but by default it creates an embedded image and changes the position of it so that it appears to the left side of the screen. You can change this look by clicking the Appearance tab in the top right of the editor panel and selecting an option from the Image Position section.

For all other aspects of this block, see the Headline CTA section.

 

Marketing Video

This block lets you add a marketing video which you can upload on the Branding Tab of the CMS.

This block does not include the Image or Call To Action options.

For all other aspects of this block, see the Headline CTA section.

 

Text

This block allows you to add a large section of text on your website, useful for adding lists, descriptions or otherwise lengthy sentences.

This block does not include the Image or Call To Action options.

For all other aspects of this block, see the Headline CTA section.

 

Quotes

This block allows you to add quotations. This is great for testimonials, reviews, inspirational quotes and more. 

When you add a quote, you can add a Name, Detail, Image, Quote and Star Rating. You can also remove any of these that you don't want, only including the fields that you need. You can add up to 8 quotes.

This block does not include the Image or Call To Action options.

For all other aspects of this block, see the Headline CTA section.

Featured People

This block allows you to create bios for members of your team, company or charity. 

By clicking +Profile you can add a profile. Each profile includes the Name, Role, Bio text fields, as well as a Call To Action Tex/Link option much like the Headline CTA block. You can also upload an image for each profile. You can add up to 8 profiles.

For all other aspects of this block, see the Headline CTA section.

 

App Download Link

This block creates two links to the Google Play and Apple App Stores for your App. These buttons will only appear once your Apps have passed review and are out for sale.

 

Social Media Links

This block allows you to add your social media links for Facebook, Twitter and Instagram. 

To do so, click the +link button and choose what platform you are adding a link for. Then, add in the rest of the URL for your social media page. You can add up to 8 Social Media links.

This block does not include the Image or Call To Action options.

For all other aspects of this block, see the Headline CTA section.