Turbo page design

Click +Add in the upper-left corner of Turbo page creation window and select a relevant section. To change the layout of sections on the Turbo page, go to Navigation and drag a section to the desired location. To remove a section, click . The Footer section is required and cannot be removed.

To edit a section, click on it in the preview area or in Navigation. On the tab that opens, configure the elements for the selected section.

You can combine sections from the library and build the page structure to suit your needs.

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 depending on 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.
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:
  • align
  • numbered and bulleted lists
  • underline
  • italics
  • bold
  • hyperlinks (may lead to another section of the Turbo page or an external source)
  • color highlighting of text
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 image 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 image 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

Let's say 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 “Destination” field is filled in with the chosen destination.

Price

Specify the price of your product so that the user can make a purchase decision directly in the Turbo page. Add the current price and previous price: the discount will be calculated automatically, so you can display it as a percentage or an amount. The price should be specified based on the currency used and the advertising rules in the country where the Turbo page is displayed.

Float buttons

A float button allows the user to contact the page owner by phone, write an email, visit a a social media page, or chat in a messenger. A float button moves along the page as the user scrolls, so it's always in view. In the mobile version, float buttons are positioned at the bottom of the page and appear on scroll-up. You can customize the design of float buttons yourself or choose from original design styles.
Form

By adding aForm 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 — you can use forms only if you have indicated the personal data operator. If necessary, provide a link to the full version of your user agreement. It will appear in a pop-up window when you click on the Learn more label under the form.

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 the Turbo Page Constructor. 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).