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.
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.
Device Preview - shows you how the page looks like on different device types.
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 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
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.
Title text
Description text
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.
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
If you are using a long image (length is larger than width, i.e. 608x1032), you can leave the image without much "blank space"
Logo
The logo will be used for both the landing page and support page. We only support 1 image.
Title/Description text and color
Button colors
Social links color
Remember to save your changes when you navigate to different pages!
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.
Color of the main support form box
Color of the tabs (active and inactive states)
Color of input box
Remember to save your changes when you navigate to different 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:
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.
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 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
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)
Title 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.
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
If you are using a long image (length is larger than width, i.e. 608x1032), you can leave the image without much "blank space"
Logo
The logo will be used for both the landing page and support page. We only support 1 image.
Title/Description text and color
Button colors
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.
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
Color of the tabs (active and inactive states)
Color of 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:
Updated on: 30/06/2021