The Buzzbassador landing page is one of the most important parts of your ambassador program structure--it's how you can direct traffic to your application form and gain new program applicants!
There are multiple landing page templates you can choose from to help you get started. **Keep in mind, you can always build your page from scratch. The templates are just there for assistance and to give you an idea of a layout to go with.
How to build your landing page (using a template)
1. Open the landing page editor
Open the "Landing Page Editor" page from your left-side menu, and then click the "Create" button at the top right to open the actual editor.
2. Select a Templates
The easiest way to build your landing page is to start with one of our pre-built templates! Click the "Templates" button at the top right of the editor screen to begin.
Once there, you will see a variety of templates to choose from. You can preview each one to get a feel for how the template is laid out by clicking the "Preview" button. Once you decide on a template, click "Choose Template" to get started.
A message will appear asking you to confirm that you want to use that template. If you don't have any previous work that you don't want to override, just click "Yes".
3. Set a page title
Make sure to type a page title in the field at the top left of your screen! For example, you could call your page "Apply to our Program". This is only for internal use, so your ambassadors won't see it.
Now that you have opened a template, you will need to start editing! Let's go over each of the elements in the editor so you know your way around.
How to work each of the elements in the landing page editor
In the main editing panel within the Buzzbassador landing page editor, you'll see four tabs. We go over each one in detail below:
The top tab in the editing panel is the Content tab. This is where you find the main elements that you can drag and drop into your landing page. Each element is explained below:
This is an element you can drag and drop to split up your screen area into columns, which you can then drag other elements into. You can customize the number of columns, the background color or background image, the padding/border size, and more from the editing panel once this element is added to your page and selected.
This is the element you will drag and drop whenever you want to add a button to your page. When this element is added and selected, you can edit the URL the button directs to, the button's background and hover color, width, size, alignment, padding, and more.
You can drag this element into your page if you want to add a sleek line to divide your content. If you add it to your page and select it, from within the editing panel you will be able to edit its width, line style, alignment, padding, color, and more.
This element is for the pro's out there. You can use it to add your own custom HTML anywhere on your landing page. Complete editing freedom!
This element is pretty straight forward: just drag and drop it into your page to add your own image! Once the image element is added to your page and selected, you can upload your image, size it, apply effects, link it to an external URL, and more.
This element is for if you want to add a site menu to the top of your landing page. Since your landing page is just one page (and also can be integrated with your Shopify site, therefore showing your regular site menu), you most likely won't use this element much. But it's there if you ever need it! You can customize the font, color, layout, sizing, and more.
This element gives you a way to link your social media accounts directly to your landing page! You can customize which social platforms you include, and even what the icons look like.
Another straightforward element, this is just the element you add to implement text into your landing page. You can edit the color, font, alignment, spacing, padding, and more-- all from the editing panel on the right side of the screen.
Lastly, this element gives you a way to add a video to your landing page. You can link one from an existing URL (i.e. YouTube), or even upload a video file.
This tab is where you can go to add columns to your page to organize your content. It's similar to the Columns element (#1 on the list above), but its own tab with more customizable options.
The body tab is where you can edit the entire content area of your landing page. Instead of working with specific elements or sections, this tab of the editing panel applies to the entire page. You can change the width of the page, the background color/image, and more.
The images tab is where you can pull free stock images that are not copyrighted and royalty-free (meaning you have permission from the photographer/models to use them for free)! The images are pulled from sites like Unsplash, Pexels, and Pixabay. If you're lacking some images of your own to use on your page, this is a great resource to use!
The toolbar at the top right displays a preview button, a device-responsive switch (mobile vs. desktop view), and undo and redo buttons. The preview button will also let you preview the landing page in both mobile and desktop versions.
Speaking of various screen sizes, you may need to occasionally edit something differently for mobile vs. desktop screens. Make sure to check out this article if you need help with that!
And with that, you should have all the information you need to customize your landing page! Keep in mind that all these same steps apply if you'd like to build your landing page from scratch without using a template :)
If you need any further help, please don't hesitate to send us a chat at the bottom right corner of your app screen, or email us at [email protected].