Articles on: Creators - Getting Started

How can I customize my landing page?

Your landing page is what users will see when they load your community URL on their web browser when they are not logged in. All landing pages follow a specific template but you will be able to change different elements on the page to fit your branding and theme.


This is only available on a desktop. The editor is not supported on smaller screens like mobile or small tablets since it will be too hard to fit and see everything.

How to edit your landing page



Log into your Locals community
Go to the Community Admin panel (located under your username menu or on the left navigation menu)
Go to Landing Design on the left side menu
You will see 2 items under the Landing Design menu: Landing Page and Landing Support
Landing page is the main page users will land on first
Landing Support is where users can give support on this page before signing up.

If you have not connected your Stripe account, users will not see the Landing Support page.

Sections of the LP builder



Device Preview - shows you how the page looks like on different device types.

Device Preview

Design Layout - choose the general template of your landing page. You can either stick with our default Locals landing page (light and dark themes available) or create your own custom page. On the Default Locals pages, you will only be allowed to edit the text. On the custom page, you can edit more like colors, and images.

Design Layout

If you select one of these, your landing page will automatically reflect this (you do not need to press the "Save Changes" button to change templates).
If you are switching from Custom to Default, you can save your design, just make sure you Click Save for later on this pop up

Save custom changes


Editor - this panel is located on the right side of the screen, you can collapse it (for larger screen view) or keep it open while you're editing. This is where the options to edit elements will appear. Make sure after you finish editing the entire page to click the Save button.

Editor

Elements you can edit



On the Locals Default layout (this includes both Landing and Landing Support pages)



Title text
Title text

Description text
Description text

On the Custom layout (Landing Page)



Background color and Background image - the background image is positioned on the upper right corner of your page (and depending on the size of your image, will expand outward in that direction).

The background image will be used for both the landing page and support page. We only support 1 image.

No Background color/no image

With Background image

With Background color

Tips for choosing the right background image dimensions for the best view across devices
If you are using a wide image (width is larger than length, i.e. 1440x860), you should leave a lot "blank space" to the left of the image to account for the image shifting to the left when the screen of the device gets smaller

Wide

If you are using a long image (length is larger than width, i.e. 608x1032), you can leave the image without much "blank space"

Long

Logo

The logo will be used for both the landing page and support page. We only support 1 image.

Logo

Title/Description text and color

Text color

Button colors

Button color

Social links color

Social Links color


Remember to save your changes when you navigate to different pages!

On the Custom layout (Landing Support Page)



Once you've saved changes for your landing page, the support page has a convenient little "Match" button that will copy most coloring styles over to the support page for easier editing.

Match styles

Apart from most things already mentioned on the Landing page section, the Support page also has a few additional elements that you can edit.

Color of the main support form box

Support box

Color of the tabs (active and inactive states)

Tab colors

Color of input box

Input box

Remember to save your changes when you navigate to different pages!

Finished Landing Pages



Once you've saved everything, you can view your landing page by entering your community url in our browser (make sure you're logged out)

Here's how our landing and support page turned out:

Landing Page

Landing Support Page

Updated on: 30/06/2021