In this article, you learn how to edit a content page with Pages. Pages lets you edit your marketplace’s content pages, like your Landing page, About page, or any custom pages you decide to create.
Sections and Content Blocks
Each content page consists of a number of Sections. Each section, in turn, can have the following content: a title, a description, a call-to-action (typically a button linking to another part of your marketplace), and any number of Content Blocks.
You can customize the look and feel of a Section from its Appearance settings, and change its layout by choosing from a set of Section Templates.
Most of the content of each Section lives in Content Blocks. They can contain text, images, or embedded YouTube videos.
When you create a new marketplace with Sharetribe, it comes with a default landing page that has a number of example Sections that give you an idea of how Sections and Content Blocks work. It looks like this:
In this article, we're going to make some changes to this default landing page. These same instructions for editing page content can be applied to all the other content pages. You can find your landing page in Console -> Pages -> landing-page.
How to add a new Section
These are the typical steps to create a new Section:
Give your section a name
Select the Section template
Define number of columns (for carousel and column templates only)
Add title and/or description (optional)
Add call-to-action content (optional)
Specify background and text color
Add Content Blocks to a Section (optional)
To add a Section, click on the “+ Add a new Section” link.
Give your section a name (optional)
It's a good idea to give your section a descriptive name. It's not mandatory, as the name is not displayed to your users in the page, but it makes it easier for you to later remember what the section is about, if your page has lots of sections.
Select the Section template (mandatory)
The Section Template determines how content is laid out in your Section. There are five possible layouts:
Article: Content Blocks are displayed in a narrow one column layout optimized for reading longer texts.
Carousel: Content Blocks are displayed next to each other horizontally, and you can swipe or scroll through them.
Columns: Content Blocks are displayed in a grid of 1, 2, 3 or 4 columns.
Features: Text and media are displayed side by side in alternating order
Hero: A simple section without any Content Blocks. It only has a title, description, and a call to action. It works well as the initial section of a page.
Section Template is mandatory: you can't save your section without adding one.
Add a title and a description (Optional)
The title and description will be visible to your users at the top of the section, before Content Blocks. The title will be displayed in bigger font. The font size is determined by Section title size. You can choose from two options:
Page title (H1). To optimize your page for search engines, you should have only one H1 title per page. Page title has the biggest font size.
Section title (H2). The font size is a bit smaller.
The description is a text displayed with a smaller font under the section title.
Add a call-to-action (Optional)
The call-to-action is the main action you're hoping your user to take after viewing this section. There are three options:
No call to action. No button displayed.
Internal link. Clicking the button takes the user to another page in your marketplace website.
External link. Clicking the button takes the user to another website.
If you choose an internal or external link, you then need to specify link text (the label displayed to the users on your page) and the link address (the web address where the link should be pointing to).
If you're adding an internal link, you should only add the path after your main marketplace domain as the link address. For example, your About page will be located in https://www.example.com/p/about, but you should only be adding "/p/about" as the internal link address.
If you're adding an external link, you should add the entire web address, including https://, to the link address. For example, you could add https://www.facebook.com/yourcompany.
Specify Section appearance (Optional)
Section appearance defines the look and feel of your section. You can choose between two options
Default. The background color alternates between white and light grey: every other section has a white background and every other section a light grey background. Font is black.
Custom. You can freely define the background color and background image. You can choose between black and white font color. The background color is only displayed if the Section doesn't have a background image, or if the background image is partially transparent. To make the text easier to read, you can darken a background image by adding a partially transparent dark overlay on top of it.
Add Content Blocks (Optional)
If your Section Template is something else than Hero, you can add content to your section by adding Content Blocks. You can add a new Content Block by clicking the “+ Add a new block” link at the bottom of the Section.
Content Blocks only have optional fields. Each Content Block can have the following fields:
Name. Just like with section, this is not displayed
Media. An image or an embedded YouTube video.
Title. This works just like a section title.
Text. Text content for the Block. You can add formatting (bolding, links, subtitles, etc) with Markdown. Learn more about formatting text with markdown.
Call-to-action. This works just like the call-to-action for Sections.
Alignment. You can choose the alignment of the content of the block: left (default), center, or right.
Anchor link ID. If you want to link directly to a specific block on your page, you can specify an anchor link ID.
Adding an image to a Content Block
You can add an image to a Content Block by choosing "Image" from "Block media". You then need to upload the image file, choose the aspect ratio of the image, and specify an Alt text. Alt text is a mandatory field for images. It describes what is seen in the image. It is important for accessibility and search engines. You can also make the image clickable by adding a block image link to an internal or external page.
Embedding a YouTube video to a Content Block
Adding an embedded YouTube video to a content block by choosing "YouTube video" from "Block media". You then need to add the ID of the YouTube video. The ID is the part of a YouTube link after "watch?v=". For example, for the video youtube.com/watch?v=UffchBUUIoI, the ID is UffchBUUIoI. You also need to specify the video aspect ratio.
Add a Section anchor link ID
If you want to link directly to a specific section on your page, you can specify an anchor link ID. You can then link to the section with an URL like this: https://www.example.com/p/page-id#anchor-link-id.
Save changes
Once you've done adding content to your section, press "Save changes" at the bottom of the page. Then click "View page" at the top to see your new section on your Page.
How to edit existing Sections
To edit an existing Section, click it and start modifying its content. Once you've made your edits, remember to press "Save changes" at the bottom of the page to save your edits. If the button is disabled, it means that there are no unsaved changes.
How to reorder Sections and Content Blocks
You can alter the order of the Sections within the Page or the Blocks within a Section by dragging and dropping the elements. Make sure to save your changes after altering the Section content or changing the order of the elements.
How to remove Sections or Content Blocks
You can remove a Section or a Content Block by clicking on the three-dot menu on the top right corner of the Section card. Remember to save your changes after you've removed a Section or a Block. After you've saved your changes, they are irreversible: the older version is not preserved.
How to edit the Footer
The Footer, which is located at the bottom of all your content pages and dynamic pages, is a special section. It's not edited with Pages. Instead, it has its own editor. Learn more about editing the Footer.
How to adjust SEO and Social metadata
Every page has metadata, also called meta tags, which determines how the page is displayed in search engines and social media platforms. Google, for example, uses the title and description you set to your page to populate their search results page. Learn more about editing the SEO and Social media metadata of a page.
How to publish your changes to your Live marketplace
If you have previewed the changes you made to your page in your Test environment and now want to publish them in your live marketplace, you need to copy the changes you made to your Live environment. You can do this by pressing the "Copy changes to..." button at the Console top bar, choosing the content you want to copy, and pressing "Copy to Live". It will take up to 5 minutes for the changes to be visible in your Live marketplace.