Turbo site design
Actions with sections
- Add sections from the library. To do this, click +Add section in the upper-left corner of the window. You can change the section name on the Settings tab on the right panel.
- Use the right panel to rearrange sections on the page by drag-and-drop.
- Delete sections from a page by clicking
. Please note that the Footer section is required and cannot be moved or removed. - Edit the section text. You can do it directly in the preview area or on the right panel on the Content tab.
- Set up the design of each element on your Turbo page, such as text alignment, background color, and margins. To edit the design, select the Design tab on the right panel or click Configure style on the Content tab.
To expand the section editor to the full screen height, click Pin settings panel at the bottom.
Working with standard sections
If you create a site from multiple pages (like a portfolio site), you can save standard sections and reuse them on other pages. Standard sections are available for all sites under your account.
- Click
under the section. - In the window that opens, specify the section name.
- Click Add to the library.
After that, the section will be displayed in the library under . To delete a standard section from the library, click → Remove in the same block.
Working with repeating sections
You can use the same sections on all your site pages, if needed (e.g., headers and footers). When you make changes to these sections, your changes are applied to all pages that use them. If you linked a company from Yandex Business to your Turbo site, repeating sections will work correctly with the company as well.- Repeating sections only work within a given Turbo site.
- After editing your repeating section, make sure that you save and publish the page. Then the section is updated on all pages that use it.
- You can't move a page with repeating sections to another site. To move a page, delete all the repeating sections or convert them to normal sections.
- Click under the section.
- In the window that opens, specify the section name.
- Select Make this a repeating section.
- Click Add to the library.
After that, the section will be displayed in the library under . To delete a repeating section from the library, click → Remove under it. The sections added to the page will become normal sections.
If you are editing a repeating section but you want to apply changes to one page only, click → Make regular in the box below the section. The repeating section will stay in the library, but the changes you made will only be saved on the page you are working with.
Section design
You can combine sections from the library and build the site structure to suit your needs.
Check the recommendations for Turbo sites.
- Your logo as text or an icon.
- Menu linking to other sections of the Turbo page for quick navigation.
- Contacts: phone number, address, email, or opening hours.
- Links to social media pages.
- A button to navigate to another section of the Turbo page, such as a request form.
- alignment
- numbered and bulleted lists
- underline
- italics
- bold
- hyperlinks (may lead to another section of the Turbo page or an external source)
- color highlighting
- Example
-
Your Turbo page is going to tell visitors about trips to Lake Baikal, Kamchatka and Altai. The destination that interests a user will be passed to the request form. Add “Book a tour” buttons after the description of each destination. Configure the buttons to pass the corresponding value (“Baikal”, “Kamchatka”, or “ Altai”) to the “Destination” field in the form. When the user clicks the button, the request form opens, and the chosen destination populates the “Destination” field.
- At the email address specified in Turbo Page Builder.
- Using the Yandex Direct API.
- In Yandex Messenger.
To accept requests using Yandex Messenger:
- Go to the Yandex Messenger automatic registration page.
- In Turbo Page Builder, open and enable Send requests to Yandex Messenger.
Requests will be sent to the username specified when creating the Turbo page and to your email (as before). Learn more.
- Image. Supported formats — 1:1 and 4:5.
- Price. Add the current price and previous price. The discount will be calculated automatically and you can display it as a percentage or an amount. The price should be specified based on your selected currency and advertising rules in the country where the Turbo site is displayed.
- Button to navigate from the product card. Enter a name and specify the action on click: add an item to the cart, go to another site, go to a site section, or open the request form. The cart is generated automatically as items are added to it if the page has the Header.
The Header section is located at the top of the page. You can insert various details about your company in the header. It automatically fits in the template according to the screen width. For example, some of the information might be hidden in the side menu so only the most important things are visible.
It makes sense to place the following things in the header:
If the Products section has been added to the page, the Cart button is automatically placed in the header.
The Cover section is a text block where you can add an image and buttons. Use the cover to tell your audience about your offer and place information about your product or promo campaign.
In the cover, you can customize the title, subtitle, buttons, and an image. You can also select the location of the image: right, left, or bottom.
In the Advantages section you can add several key messages about your company, product, or service that you are promoting. The section consists of text blocks with images. Also you can add links or buttons to go to another section of the Turbo page or to the request form.
Show what your product looks like. If you are selling a product, add a photo of it. If you offer a service, show this service in action in the photo. In the Photo section, you can add one photo with a short description. Supported aspect ratios are 16:9, 5:4, and 1:1.
The Slider section is a series of images with a brief description. You can use your own images, library images, or previously used images. A slider shows images one at a time, in order. You can use this to show a step-by-step process. Supported aspect ratios in the slider are 16:9 and 1:1.
In the Gallery section, you can communicate a message about your product using a series of images with a brief description. You can use your own images, library images, or previously used images. The gallery shows several images on the page at once, with horizontal scrolling. Supported aspect ratios are 16:9 and 1:1. You can use different aspect ratios in the same gallery.
Use the Clipart section to make your page more vivid: add graphic elements, monograms, and separators and arrange them in the order you want.
Add at least one button to avoid losing potential conversions. A button on the first screen increases the conversion rate. In the Buttons section, specify the button's destination: a website, Turbo page section, or request form .
You can pass any value to the request form, such as the model or product characteristics. To do this, select the field name and specify the value that will be substituted in this field. If you use a field with a drop-down list in the form, it will be substituted with one of the list options.
Specify the price of your product so that the user can make a purchase decision directly on the Turbo page. Add the current price and previous price. The discount will be calculated automatically and you can display it as a percentage or an amount. The price should be specified based on your selected currency and advertising rules in the country where the Turbo site is displayed.
Contact buttons allow the user to contact the page owner by phone or email, visit a social media page, or chat in a messenger. The button always stays in view as the user scrolls. In the mobile version, the contact buttons are positioned at the bottom of the page and appear on scroll-up. You can customize the button design yourself or choose from original design styles.
By adding a Form section, you can process requests submitted by users on your Turbo page. Select one of the templates: email request, callback request from an individual, or callback request from a company. You can add fields to your forms, configure their names, explanatory text, make them required, and limit their character length. You can also select the field type: standard or drop-down list.
Fill in the Legal information section. While collecting personal data about your customers through forms, you must specify information about yourself or your organization that is inserted in the message under the form. Select the business structure (an individual or legal entity) and fill in the information in this section. If necessary, add a link to the full version of your user agreement. It will be shown in a pop-up that opens after clicking Learn more.
Configure how your thank-you message is shown: it is generated automatically and displayed in a pop-up window after the form is submitted. From this window, you can navigate the user to your site or back to the Turbo page.
How you can collect requests using the form:
If you aren't receiving any requests, find out whether users are submitting them. To do this, for the Turbo Pages tag in Yandex Metrica, check the Sent request form conversion metric (every successfully submitted form is counted).
The Goods list section allows you to accept orders from users, including via the shopping cart that appears automatically in the Turbo page header if you have added the Header section.
The Goods list section includes product cards, prices, and checkout buttons. For each product, you can configure:
In the Contacts section, add a phone number, address, email, and opening hours, as well as links to social media pages. Select contacts with a map so that the users can easily locate you. You can create a map in Yandex Map Builder. After that, you can add your map code or map link in the contacts section, and add directions for how to find you. You can place your map to the right of your contacts or expand it to full page width.
You can choose a standard or compact footer type, and a dark or light theme for it. Every page footer contains the Turbo icon and Complain button for users to report the page content.
The section has the Use legal information option. Ads for certain goods and services, such as medicine, financial services, and shared-equity construction, must use notices. When filling out legal information, keep in mind that the Turbo page must include all the information that is required by law and Yandex guidelines.
This section is added automatically if the Header and Goods list sections are included on the Turbo page. The Checkout screen opens when the user clicks the Checkout button in the cart. The window preview is under the Footer section.
Enter the email address to send the orders from the form to. You can specify multiple addresses separated by commas. This might make sense, if you have assigned several employees to process your orders.
Fill in the Legal information section. While collecting personal data about your customers through forms, you must specify information about yourself or your organization that is inserted in the message under the form. Select the business structure (an individual or legal entity) and fill in the information in this section. If necessary, add a link to the full version of your user agreement. It will be shown in a pop-up that opens after clicking Learn more.
Configure the fields for the customer's contact details: add the missing fields, select the format for each field, and specify which fields are required.
Select the available shipment types. The available shipment types are Pick-up and Delivery. Specify the pickup address for the first shipment type and delivery cost for the second shipment type. Set up your payment methods: for example, Pay to the courier by cash and Pay to the courier by bank card.
