Objectives:
- Learn the basics of portal customisation
- Learn the difference of the landing page and the responsive application
- Learn about logo placements
- 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:
- Application
- 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.
- Click the slider to change the headline banner's visibility
- Input the best headline you can think of
- Click the slider to show your logo above the headline
- 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:
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article