The landing page is likely the first thing your users will see when they arrive at your marketplace. It's important to communicate your value proposition clearly in your landing page to pique interest, inform, and inspire action.
This article starts by introducing Pages, the content editor used to create and edit all the content pages on your marketplace.
Then, we'll edit our landing page specifically to inform users what Biketribe is all about.
Using Pages
Start by going to Content > Pages, and click "landing-page".
You notice that the default landing page consists of several Sections. In this tutorial, we'll only make a few quick modifications to the existing Sections to build a landing page for our bike marketplace with a minimum amount of work. When following the tutorial, you can add and remove sections according to your unique needs.
We won't go through the meaning of each field in this tutorial. For a comprehensive overview of those, read our article on editing content pages.
Section 1: “Marketplace introduction”
The first section of our landing page is called "Marketplace introduction". It uses "Hero" as its Section template. Section templates define the layout of the section. "Hero" works well for the initial section of a page, and we're going to use it here as well. Learn more about Section templates.
Let's modify the content of the section to match our marketplace concept: bike rentals.
Tip: Before editing the content, click “View page,” which will open the landing page on a separate tab. You can use this tab’s refresh option in your browser and see changes after saving each section.
Title and description
The Hero section should feature our slogan, followed by a description text explaining what our marketplace is about. Make the following changes:
For "Section title", add: "Rent a bike from a local"
For "Section description", add: "Biketribe is the world's largest peer-to-peer bike rental marketplace. Find a bike you like or make money by listing your own bike."
Call-to-action
We want to have a button in the initial section that invites the user to browse bikes in Helsinki, as that's the first city where we're going to launch our marketplace. Make the following changes without copying the quotation marks:
For "Internal link text", add: "Browse bikes in Helsinki"
For "Internal link address", add this value (ideally by copy-pasting it): "/s?bounds=60.297839%2C25.3377299%2C60.0619677%2C24.8074457"
The address we added takes the users to the search page of your marketplace ("/s"), and gives the coordinates as parameters
Tip: If you want to add a link to a specific location, use the location search in your marketplace to find the location you want, and then copy the part starting with "/s?" from your browser's address bar.
Appearance
We want to use a biking-related background image for this section. Make the following changes:
For "Background image", remove the existing image and upload the image below in its place. You can download it here.
Tip: You can find free high quality images from Unsplash. Just search with the theme of your marketplace, and you'll likely find images you can use in your content pages.
We're done with the marketplace introduction! Save changes and then click "View page". Your marketplace introduction section should now look like this:
Section 2: “How it works”
The second default Section is called "How it works". It uses a "Columns" Section template to create a three-column layout for the content.
We're going to adapt this section to summarize the three simple steps to a successful bike rental.
Title and description
Let's start by editing the title and description, just like we did with Hero. Make the following changes:
For "Section title", add "Renting a bike couldn't be easier"
For "Section description", add "Find the right bike, make a booking and pay with your credit card. That's it."
Content blocks
Then we'll move on to Content Blocks. This is where most of the content of each Section typically lives. The Hero is the only Section template that doesn't have any Content Blocks. For all other Section Templates, you can add any number of Content Blocks. Your choice of the Section Template determines the layout of the Blocks.
You notice that by default, our section has three Content Blocks: "New listing", "Search", and "Payment".
Make the following changes to the Content Blocks:
New listing:
For "Block name", add "Step 1"
For "Block title", add "1. Find the right bike"
For "Block text", add " Search and browse for bikes. Filter the search by the dates when you need the bike and other criteria of your choice."
Search:
For "Block name", add "Step 2"
For "Block title", add "2. Book and pay"
For "Block text", add "Make a booking from the bike's calendar. Pay with your credit card. Wait until the bike owner approves your booking."
Payment:
For "Block name", add "Step 3"
For "Block title", add "3. Start riding!"
For "Block text", add "Use Biketribe's messaging system to agree on the time and location for picking up the bike, and be on your way!"
That's it! Save changes and view the page. The section should look like this:
3. Remove the other two Sections
There are two other default Sections on our landing page: "Featured locations" and "Explainer video". Our marketplace will be focusing solely on Helsinki in the beginning (in the early days, it's important to have focus), and we don't have a video yet.
4. Add a new Section: "For bike owners"
We're missing a crucial thing from our landing page: a "call-to-action" for people who own bikes to list them to our marketplace. We need a new Section for that.
Make the following changes:
Click "+ Add a new section"
Click the new Section to open it
For Section name, add "For bike owners"
Choose "Article" as the Section template. Our Section will be a simple one, with just title and description. However, we don't want it to take 80% of the screen height like "Hero" does.
For the Section title, add "Make money renting your bike"
For the Section description, add "Do you own a bike you don't need every day? Earn extra cash by renting it to others!"
For "Section call-to-action", choose "Internal link".
For "Internal link text", add "List your bike"
For "Internal link address", add "/l/new" (this is the path for the page for posting a new listing)
That's it! Save changes and view the page. The new Section should look like this:
5. SEO & Social
At the top of the page editor, there's a tab "SEO & Social".
This tab allows you to set titles and descriptions for your page used by search engines and social media sites.
Make the following changes:
For "Page title" add "Biketribe - Find a bike anywhere"
For "Page description" add "The largest online community to find and rent a bike."
For "Page title for social media", add "Find a bike everywhere"
For "Page description for social media", add "The largest online community to find and rent a bike."
Social media image: Add the image below (you can download it here).
That's it! Save changes. Now the landing page is ready!
You might notice there's one more section at the bottom of the landing page. This is a special section called "Footer". It's not edited through Pages. Instead, it has its own special editor. We'll learn how to edit the footer later in the tutorial.
Next: About page
As we mentioned at the start of the article, besides landing page, there are three other default content pages in your marketplace: "About", "Terms of Service", and "Privacy Policy". We will go through each of these in subsequent tutorials before launching our marketplace.