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.

How to edit your landing page

1. Log into your Locals community
2. Go to the Community Admin panel (located under your username menu or on the left navigation menu)
3. Go to Landing Design on the left side menu
4. 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.

Sections of the LP builder

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

2. 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.

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

3. 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.

Elements you can edit

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

1. Title text
   

2. Description text
   

On the Custom layout (Landing Page)

1. 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).

• 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

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

2. Logo

3. Title/Description text and color

4. Button colors

5. Social links color

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.

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

1. Color of the main support form box

2. Color of the tabs (active and inactive states)

3. Color of input box

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:

Updated on: 30/06/2021