All Collections
Support
Triib Premium Setup Tutorial: Design Page
Triib Premium Setup Tutorial: Design Page

How do you edit your website and create a website that will capture leads and inform your members?

Daniel Freire avatar
Written by Daniel Freire
Updated over a week ago

DESIGN PAGE:

Design Settings > Design Page – Under this tab is where you can select which pages you want to configure. Just click on the Configure Page button to customize the page.

Design Page - Admin View

You can preview all of the below pages on your site and also edit a few of them from here as well!

Page List:

  • Schedule

  • Signup

  • Leaderboard

  • Blog

  • Member Profile

  • Events

  • Contact Page

  • Homepage

  • About - Philosophy Page

  • About - Main Page

  • FAQs

*Preview Only Pages: The schedule, signup, leaderboard, blog, member profile and events pages are all pages that have preset formats and cannot be edited. We do this to keep everything running smoothly on our end for your clients and members. You can customize and edit the below pages by following the steps outlined here!

CONTACT PAGE:

Contact Page - Admin View

Contact Page - Web View

Design Settings > Design Page > Contact Page -

Step 1: Under Design Settings

Step 2: Select the Design Page tab

Step 3: Click the Configure button for the Contact Page, you will see that you have many options to choose from to design your page.

Your contact page is your go-to page to get your prospective members contact information, and this is where you want to get those guests to your site to click and submit!

You can configure this page and decide what information you would like to display to your prospective members: email, phone number, address, and business hours.

HOMEPAGE:

Homepage - Admin View

Homepage - Web View

Design Settings > Design Page > Homepage

Step 1: Under Design Settings

Step 2: Select the Design Page tab

Step 3: Click the Configure button for the Homepage, you will see that you have many options to choose from to design your page.

In the below picture, you will see the layout of each of the 4 sections of the home page that you will want to configure:

  • Slider Background Image

  • Slider Image(s)

  • Main Text

  • Service Block(s)

Slider Background Image

Slider Background Image - Web View

Slider Background Image – A background image is required. To add the background image: click the Choose File button and then upload the file image you want.

Photo Dimension requirements: 2046 x 427

If your photo appears tiled, resize to the suggested dimension.

Slider Image(s)

Slider Image - Web View

Slider Image(s) – You can add up to 3 slider images. Refer to the image above for Slider Image placements.

Slider Image 1 is required. Please note that if no Text or SubText is recreated, then the photo will not appear.

Slider Image 1: Click “Choose File”, and upload your photo.

If you want your picture smaller / bigger, resize it and upload it again.

Slider Image 1 Text: Add Text you would like to appear

Slider Image 1 Sub Text: Add Text you would like to appear

Slider Image 1Button Text: Type in the text you want to appear on the button. Example: Book your class!

Slider Image 1 Link: Add the URL that you would like to reference. You can choose an external URL or Triib URLs. To find the Triib URLs, click Triib Settings and click Triib URLs. Example: https://gymname.triib.com/free-trial/

  • Click “Update Settings” at the end of the page to save your work.

  • To Preview Page, Click “Preview Page” at the top of the page. This will open a new window. Don’t forget to “Update Settings” prior to previewing.

  • Repeat steps for Slider Image 2 & 3

Main Text

Main Text - Web View

Main Text: This is an area that allows you to add in any text of your choosing. It can be a simple statement or a few sentences.

Service Blocks

Service Blocks - Web View

Service Blocks – There are a total of 3 Service Blocks. These blocks can be used to highlight a service or information. In the picture below you will see 3 Service Blocks:

Service Block Icon: You have 3 icons to choose from:

<i class=“fa fa -cogs”></i>fa-cogs

<i class=“fa fa -compress”></i>fa-compress

<i class=“fa fa -rocket”></i>fa-rocket

Service Block Header: Type in the text you want to stand out

Service Block Text: A quick statement that gets the reader to click on the button. NOTE: The Service Block boxes will be different sizes unless the text length is similar in all service block.

Service Block Button Text: Text that will appear on the button.

Service Block Button Link: Type in the URL that you want to direct your clients to.

In the image below, you can see the options you can use for each Services Block you want.

------------

Did this answer your question?