Using the website builder

Tommy Updated by Tommy

Getting Started

To get started, log in to your admin dashboard (your credentials are the email and password you used to sign up for your site/app and you can log in from admin.supapass.com), and on the left-hand menu, go into Website Builder.

Your landing page preview is on the left and the Blocks Editor is on the right.

Here you’ll see a preview of the landing page with a sidebar to the right containing the building blocks to add content. 

Top Tip: The Block Editor can switch between desktop and mobile view, so you can easily see what the website design will look like on different devices. (Note this is a preview of your website on mobile, not a preview of your mobile app. The mobile app has a different design to the Website Builder and can be seen by downloading the SupaPass Portal App from the app store on your device).
We often use the abbreviation CTA for ‘Call To Action’ Button which are the buttons dotted around your landing page and website which tell your audience what action you want them to take next: e.g. “Listen to the podcast” “Buy the course now” “Join the mailing list” “Find out more”. 

Editing a Block

When editing a block on your landing page, the right menu is divided into two sections: Content and Appearance. 

  • To make changes to your text, background image, and format, click Content.
  • To make changes on gradients, color, theme, and block/image padding, click Appearance. 

Choosing the right block

Headline CTA 

This one is the most attention-grabbing and customizable blocks. You can add three sets of text, set a background image (or no background image), add a gradient or not, add CTA buttons and overlay an addition left, right, bottom or top image.

This is the most powerful block and extremely versatile.  This one block can create dozens of different layouts and we’ve seen website designs made of many of this type of block where each block looks different to create the entire page. 

A basic Headline CTA block. You can customize the image and text, change the positions of the assets, add overlays and more.

L/R side image

This block is an easy way to include an image alongside your text and CTA button.  By default, the image is on the left, but you can change this in Appearance > Image position to left, right, top or bottom. 

gif of image position in the block being moved left to right then bottom to top
Marketing video

Like the name says, you can add a marketing video with this block. You can also include text and a background image, but no CTA button on this block. The marketing video itself is uploaded in the ‘Branding’ form in your main Dashboard.

Text

This block allows you to add a dedicated block for paragraphs, descriptions, or other text-heavy content. We suggest always keeping it light on text on the landing page to make it easy to communicate your message in an engaging way - less writing is more, and bold beautiful images say a thousand words!  

Quotes

This is the perfect place to show off customer reviews, great feedback you’ve received, testimonials, or motivational quotes to enhance your content. You can add up to 8 quotes, include star ratings, names, and other details. 

This block can actually be used in lots of different ways - it’s main purpose is to show your team with photos, headings, details and CTA buttons for each, but you can also use it to list features, products, content, price plans, and many other uses.  It looks good in many different use-cases. 

If you want to use it for people, you can showcase your team, board members, podcast hosts, or other key team members on your page. Add their bios, roles, text, and links to their profiles or contact information. You can add up to 8 items using the +Profile button.

App Download

This block automatically will include buttons to your app stores to download your apps once your apps are live. The block automatically shows the icons for the App Store and Google Play once your apps have been published, which takes visitors directly to the stores to download your app.

left button for apple app store and right button for google play store
Social media 

This block adds links to your social media profiles. Instagram, Facebook, and Twitter are added as images of their icons, and other social media profiles are added as URLs (We’re working on adding social media links in the footer, so you’ll have many more choices there soon!) 

You can add up to 8 profiles on this block.

How did we do?

Customizing the look and feel of your site

Contact