Objectives:

1. Learn the basics of portal customisation
2. Learn the difference of the landing page and the responsive application
3. Learn about logo placements
4. Learn about the sections you can edit in your landing page and how to do it

The Basics of Portal Customisation

On the Enterprise solution, your portal is white-labeled to be 'all yours'. You can give it your company's look and feel to match up with your official branding.

Some things to remember as you customise your landing page:

• If the theme does not work for you, you can always design your own. Just supply the HTML 5 and Less CSS files and we will fit it in (as customisation).
• Click Save after every update to avoid any glitches and frustrations.
• You are not restricted to any order. Click up and down arrows to move features or on/off to hide or display sections.
• You are encouraged to add custom images.
• The platform has a responsive design which works across all devices. There may be time the image can get squashed and cut off.
• Mark the section on your landing page as visible to ensure it will show on your landing page

The Difference of the Landing Page and the Responsive Application

• Header colors
  • Set by The Social Collective. Email us if you want changes.
  • There may be one color and logo set for the landing page and a set for the application.
• Flexibility
  • The landing page is flexible. However, the application [while it can be changed] is not as flexible.
  • There is logic applied to color consistencies to ensure the best user experience.
• Setup items include:
  • Core brand color: used for the headers (application and landing page) and buttons (landing page).
  • Logos:  
    • 200px x 40px (header logo)
    • Less than 300px x 300px (home page, must be transparent)
    • 120px x 120px (login page)

The Social Collective uses two designs:

1. Application
2. Landing Page

Application

Landing Page

Logo Placements

For a fully customised portal, you will need to have 4 different logos which will be placed at different pages on your portal.

• Home page
  • Once you scroll, a header with a logo pops up with a floating menu (works well on mobile too).
• Footer
• Login page
• Application logo

Note: See logo dimensions above.

Home Page Logo

Home Page Footer Logo

Login Page Logo

Application Page Logo

Application Design Edits

For all edits to the application design (besides header color and logos), please contact The Social Collective team to discuss the requirements. We encourage innovation. We also understand that design is subjective. We do monitor our platform usage to ensure that users find their way around the application easily.

Landing Page Edits

To edit any items on the landing page, click [Settings] at the left-hand sidebar.

Click Home Page below Usage and Account. Do not forget to click Save at the bottom after making changes.

Background Image

To add a background image, click the [Choose File] box and select the desired image.

Suggested dimension: 1365px x 765px

Headline Banner

This section is the first thing people who landed on your portal see and is a deciding factor for their next action. Do your best to entice them to sign up.

1. Click the slider to change the headline banner's visibility
2. Input the best headline you can think of
3. Click the slider to show your logo above the headline
4. Support your headline with a clear and descriptive text

Partners' Logos

If you have sponsors or partners that you would like your portal to be associated with, send a request to hello@thesocialcollective.co. We will need the logos in a style that suits your chosen look and feel (for example, black and white).

Preferred dimensions are: 

• Max-height: 40px
• Suggested width: 150px at a maximum

This is how it looks:

About Us Section

Here you can:

• Select your background color
• Input your title (About Us)
• Upload your desired image
• Input your header
• Input a short detailed paragraph about what you do
• Input bullet items that tell users more about your portal (with icons)

Suggested dimension: 210px x 210px

This is how it looks:

Highlight Opportunities

Here you can:

• Input a title (Opportunities)
• Input your header
• Input a button text to create a button that will link to your opportunities page

This is how it looks:

Contact Us Section 

This is the space where you can capture emails from people who do not want to sign up (yet) or are still hesitant. You can then use the emails for email campaigns.

Here you can:

• Input a title for this section according to the purpose of your portal
• Input a header related to the title
• Input a short detailed explanation in the text bar
• Input Contact Us as the button text

This is how it looks:

Your Pillars Section

This is the space where you can say more about your programme.

Highlight your specialties here. You can:

• Select a background colour
• Title relevant to this section
• Upload your desired image
• Input a short detailed explanation in the text bar
• Input your sub-items/pillars

Suggested Dimensions:  586px x 700px

This is how it looks:

Portal Features

Here you can:

• Input a title (Features)
• Input a header relevant to the title
• Put a short descriptive text relevant to this section
• Input your features and their short description under the sub-items

This is how it looks:

Pricing

Here you can:

• Select a background color
• Input a title (Pricing)
• Add a header explaining your offers. You can further break down your offerings in the text bar.

Portal Note: Only on portals that are collecting payments

Links to your Partner Organisations

Here you can:

• Select a background color
• Input a title (Organisations)
• Input a header relevant to the title
• Input a short explanation in the text form about this section
• Input "Go to organisations" as button text

This is how it looks:

Link to Your Stories

Here you can:

• Select a background color
• Input your title (Stories)
• Input a header relevant to the title
• Input a brief explanation in the text bar about this section

This is how it looks:

Link to Create a Profile

Here you can:

• Select a background color
• Input a title (Community)
• Input a header relevant to the title
• In the text bar give a brief but detailed explanation about this section
• Input "Create profile" as the button text

This is how it looks:

FAQ Section

To enable this page, you need to email your FAQ content to hello@thesocialcollective.co.

Programme and Portal Team

This space shows your super administrators and their profile pictures.

Here you can:

• Select a background color
• Input a title (Team)
• Input a header relevant to this section
• In the text bar, add the skills your team specializes in

This is how it looks:

Find Us Section

This is where you can put contact and address information if you like to share where people can find you. 

Here you can:

• Input your company's email address
• Physical address
• Contact number

This is how it looks: