Turbo site design

  1. Actions with sections
  2. Working with standard sections
  3. Working with repeating sections
  4. Section design

Actions with sections

In Turbo Site Builder you can:
  • Add sections from the library. To do this, click +Add section in the upper-left corner of the window.
  • 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 right panel.
  • Use Additional settings to play with the design of each element on your Turbo page. For example, set up text alignment, background color, or margins.

    All the design settings are hidden by default. To enable them, use the toggle in the upper-right corner. When you switch between sections, the additional settings remain open. If you don't use them often, you can disable them in the page properties: click  → Page settings → Search Engine Optimization.

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.

To make a section standard:
  1. Click under the section.
  2. In the window that opens, specify the section name.
  3. Click Add to the library.

After that, the section will be displayed in the library under My sections → Standard. To delete a standard section from the library, click  → Remove in the same block.

Working with repeating sections

You can repeat certain sections on every site page (like 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 Directory, repeating sections will work correctly with the company as well.
Attention.
  • 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.
To make a section repeatable:
  1. Click under the section.
  2. In the window that opens, specify the section name.
  3. Select Make this a repeating section.
  4. Click Add to the library.

After that, the section will be displayed in the library under My sections → Repeating. 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.

Header

The Header section is a block 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:

  • 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.

If the Goods list section has been added to the page, the Cart button is automatically placed in the header.

Cover

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.

Text
In the Text section, describe your products or services in detail. You can use different types of text blocks: titles to attract attention, subtitles to convey the main idea of your offer, and a description to provide detailed information about your product or service. The following text formatting tools are available:
  • alignment
  • numbered and bulleted lists
  • underline
  • italics
  • bold
  • hyperlinks (may lead to another section of the Turbo page or an external source)
  • color highlighting

Advantages

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. You can also add links or buttons to go to another section of the Turbo page or to the request form.

Photo

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, or 1:1.

Slider

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 or 1:1.

Clipart

Use the Clipart section to make your page more vivid: add graphic elements, monograms, and separators and arrange them in the order you want.

Buttons

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.

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.

Price

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

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.

Form

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. When collecting personal data about your customers in forms, you must specify information about yourself or your organization to show 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.

Requests are sent to the email address specified in Turbo Page Builder. You can also use the Yandex.Direct API to retrieve them. If you aren't receiving any requests, find out whether users are submitting them. To do this in Yandex.Metrica, check the goal metrics for the Turbo Pages tag:
  • Submitting a request from the form (each click on the submit form button is counted, regardless of the submit result).
  • Loading the thank-you page (counted only if form submission is successful and the thank-you message is shown to the user).

Goods list

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:

  • Image. Supported formats — 1:1 or 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.

Contacts

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.

Checkout screen

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. In the builder, the window's thumbnail 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. When collecting personal data about your customers in forms, you must specify information about yourself or your organization to show 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, Cash on delivery and Card payment on delivery.