Do you want to create a landing page?
In this article, you will learn step by step how to create, design, and publish your own landing page.
Content
- Create a landing page
- Landingpage Builder: Editor
- Landingpage Builder: Design
- Landingpage Builder: Settings
Create a Landing Page
To create a new landing page, go to the menu item Landing Pages and click + New Page in the overview.
You can then decide whether you want to use a template or start with a blank page.
If you want to start with a blank page, click Start below the empty page.
If you prefer to use a template, you can preview the available templates first using the Preview button, which opens them in a new window. After choosing a template, return to the previous window and click Start on your selected template.
Your landing page will now be created and opened directly for editing.
Landing Page Builder: Editor
If you start with a blank page, the Editor tab will initially contain no elements.
Using the + Add element button (or the A key on your keyboard), you can insert headings, text, images, videos, and other content.
If you are working with a template, the basic structure is already in place. You can move existing individual elements or nested elements using drag-and-drop. The three-dot menu on an element allows you to perform additional actions, such as duplicating the element, saving it to your library as a template for later use, moving it, or deleting it.
To edit an element, click directly on its name or select Edit in the three-dot menu. The editing window for that element will then open.
In the Content, Style, and Layout tabs, you will find various settings for the selected element:
-
Content
Here you define what content the element should display and what functionality it should have. The available settings depend on the element type. For a text element, for example, you can enter and format text in the editor and add links. For an image element, you can upload a photo or choose one from Unsplash (a website for license-free images). You can also set the image width and height, the aspect ratio, and a link URL. -
Style
In this area, you define the appearance and behavior of the element.
For a text element, this includes, for example, the font and link color, background color, and text alignment. You can also assign a background image to your text element and configure it in detail through additional options.Note: In the general Design area, you can set global styles so the overall design of your landing page and elements is consistent. You can override these settings for individual elements in the Style tab.
-
Layout
In the Layout tab, you can change the size, position, and shape of the element on the page. You can adjust margins, width and height, corner radius, and visibility (desktop/mobile).
You will always see your changes immediately in the live preview on the right side, so you can instantly see how your landing page will look later.
Landing Page Builder: Design
In the Design tab, you can adapt the overall appearance of your landing page to match your branding. This allows for a consistent look without editing every element individually.
The following subsections are available:
-
Page Layout
Define how the main area of your landing page — where your elements are placed — should look. This includes page width, inner and outer spacing, borders, and corner radius. -
Typography
Set the fonts, font sizes, and additional options for your text and all headings (H1–H6). -
Colors
Define colors for text, links, and the page background. -
Background Image
Upload a background image and configure its settings individually. -
Primary & Secondary Button
Design your buttons consistently by defining two separate button styles that you can use for different purposes. You can set background color, text color, size, corner radius, text alignment, and hover effects.
Landing Page Builder: Settings
In the Settings tab, you will find the sections Publish, SEO, and Custom Code.
Publish
Here you decide whether your landing page should remain in draft mode or be published and made live.
You can also assign a title for your landing page, which is only visible to you in the product overview, and define the URL under which customers can access the landing page.
The URL always starts with your domain and is followed by the path/name you choose.
Example: If your shop URL is myshop.tentary.com and you choose the path summer-sale, the full link will be: myshop.tentary.com/summer-sale
Below the URL field, you can also restore previous versions of your landing page.
SEO
In this section, you can set the page title, page description, and upload a preview image.
The title is displayed to your visitors in the browser window and, together with the description, is used by search engines to display results.
Tip: Choose a clear, descriptive title and a precise description that accurately reflects the content of your landing page.
When you share the link to your landing page, most apps will display the preview image you upload here.
Custom Code
If needed, you can insert your own JavaScript, CSS, or HTML code. You can embed code either in the header or footer tag of your page.
Note: The inserted code is not checked by us. Incorrect code can affect the functionality of your landing page. Use this option only if you are sure that your code is correct.
