База знаний

Цветовая Схема

В этом разделе вы можете полностью настроить цветовую палитру вашего лендинга, чтобы она соответствовала вашему бренду и создавала нужное настроение у посетителей. Правильно подобранные цвета улучшают читаемость, акцентируют внимание на важных элементах и делают страницу визуально привлекательной.

Как пользоваться палитрой?

Для каждого элемента в списке вы можете выбрать цвет одним из следующих способов:

1. Выбрать из предложенной палитры: Нажмите на цветной квадрат, чтобы открыть палитру и выбрать нужный оттенок.

2. Ввести код цвета: Если у вас есть точный код цвета (например, в формате HEX — #FFFFFF), введите его в текстовое поле. Нажмите на панель RGB для смены режима цвета.

1. Цвет пунктов меню

Здесь настраиваются цвета текста ссылок в навигационном меню вашего сайта.

2. Цвет предзаголовка

Текст, который располагается над основным заголовком H1. Часто используется для дополнительного привлечения внимания.

3. Цвет заголовка H1

Самый главный заголовок на странице. Его цвет должен привлекать внимание в первую очередь.

4. Цвет подзаголовка

Поясняющий текст под заголовком H1.

5. Цвет кнопки (CTA)

CTA (Call to Action) — это кнопка призыва к действию (например, "Купить", "Зарегистрироваться"). Ее цвет должен быть контрастным и заметным, чтобы мотивировать пользователя нажать на нее.

6. Текст на кнопке

Цвет текста на кнопке призыва к действию. Он должен хорошо читаться на фоне самой кнопки.

7. Цвет заголовка H2

Заголовки второго уровня, используются для названий основных разделов лендинга.

8. Цвет контент-текста

Цвет основного текста на вашей странице. Важно, чтобы он был хорошо читаемым и не утомлял глаза.

9. Цвет заголовка H3

Заголовки третьего уровня, обычно это подзаголовки внутри разделов.

10. Основной фон

Это главный цвет фона вашей страницы. Он задает общую атмосферу лендинга.

11. Дополнительный фон

Используется для выделения отдельных секций или блоков на странице (например, блока FAQ, блока с преимуществами или тарифами). Это помогает визуально разделить контент и улучшить его восприятие.

12. Цвет текста FAQ

Цвет текста в секции "Часто задаваемые вопросы".

13. Цвет текста (Футер)

Цвет текста в самой нижней части сайта (подвале), где обычно размещается контактная информация и дополнительные ссылки.

Совет: После внесения изменений обязательно проверьте, как все элементы выглядят на странице. Убедитесь, что тексты легко читаются, а важные кнопки выделяются на общем фоне.

Шрифты

Правильный выбор шрифтов — ключ к профессиональному виду вашего лендинга и удобству для посетителей. В этом разделе вы можете задать уникальный стиль для текстовых элементов, чтобы улучшить читаемость и расставить визуальные акценты. Вам будет предложен выпадающий список с набором проверенных и красивых шрифтов. Просто выберите тот, который лучше всего соответствует стилю вашего бренда.

1. Шрифт для заголовков

Этот параметр применяется ко всем заголовкам на вашей странице (H1, H2, H3 и т.д.). Шрифт для заголовков обычно более выразительный и акцентный, его главная задача — привлечь внимание к ключевым разделам лендинга.

2. Шрифт для основного текста

Этот шрифт будет использоваться для всего контентного текста: параграфов, описаний, списков и других текстовых блоков. Главное требование к нему — максимальная читаемость. Выбирайте простой и понятный шрифт, который не будет утомлять глаза пользователя при чтении.

Настройки шапки (Header)

Шапка сайта (или Header) — это первое, что видят ваши посетители. Она находится в самом верху страницы и обычно содержит логотип и навигационное меню. Правильная настройка шапки помогает пользователям ориентироваться на лендинге и укрепляет узнаваемость вашего бренда.

1. Управление логотипом

Логотип — это лицо вашей компании. Вы можете легко добавить его в шапку сайта.

• Добавить или убрать логотип: Используйте переключатель, чтобы показать или скрыть блок с логотипом. Для загрузки своего изображения просто нажмите на соответствующую кнопку и выберите файл на вашем компьютере.
• Настройка размеров логотипа: С помощью полей «Ширина (px)» и «Высота (px)» вы можете задать точные размеры вашего логотипа, чтобы он выглядел аккуратно и пропорционально.
• Ссылка на логотипе: Активируйте эту опцию, чтобы сделать ваш логотип кликабельным. Обычно сюда вставляют ссылку, ведущую на главный экран (якорная ссылка #top) или на основной сайт.
• Alt текст для логотипа: Это обязательное поле для SEO. Напишите здесь название вашей компании. Этот текст увидят поисковые системы, а также пользователи, у которых не загрузилось изображение.

2. Настройка меню навигации

Меню помогает пользователям быстро перемещаться по разделам вашего лендинга. Вы можете настроить до 6 пунктов меню.

• Добавление и редактирование пунктов меню: В этом блоке вы можете изменять названия пунктов меню (например, «О нас», «Услуги», «Тарифы», «Контакты») и задавать для них якорные ссылки.
• Что такое якорная ссылка? Это ссылка, которая ведет не на другую страницу, а на определенный блок на этой же странице. При нажатии на такой пункт меню, страница будет плавно прокручиваться до соответствующего раздела.
• Как настроить якорную ссылку? У каждого блока на вашем лендинге есть уникальный ID (например, id="mobile-app"). Чтобы сослаться на него, в поле для ссылки пункта меню нужно написать этот ID со знаком # в начале. Например: #mobile-app.

Настройки блока «Первый экран» (Hero Section)

«Первый экран» — это визитная карточка вашего лендинга. Это первое, что видит пользователь, заходя на сайт. Ваша задача — за 3-5 секунд захватить его внимание, ясно донести главное предложение (оффер) и мотивировать к действию.

1. Фоновое изображение

Это визуальная основа вашего первого экрана. Правильно подобранное изображение задает настроение, передает суть продукта и делает страницу привлекательной.

URL фонового изображения: Вставьте сюда прямую ссылку на изображение, которое вы хотите использовать в качестве фона.

2. Текстовый контент

Тексты на первом экране должны быть краткими, убедительными и бить точно в цель.

• Пред-заголовок: Короткая фраза над основным заголовком. Используйте ее, чтобы привлечь внимание.
• Главный заголовок H1: Это самый важный текст на всей странице как для пользователя, так и для поисковых систем (SEO). Он должен четко и ясно отвечать на вопрос «Что вы предлагаете?». Используйте здесь ваши главные ключевые слова.
• Подзаголовок: Раскрывает или дополняет смысл главного заголовка. Здесь можно указать ключевое преимущество, уточнить детали предложения или снять возможное возражение клиента.

3. Кнопка призыва к действию (Call to Action — CTA)

Это элемент, который превращает посетителя в клиента. Он должен быть максимально заметным и понятным.

• Текст кнопки: Текст должен быть глаголом, призывающим к действию. Используйте более конкретные и мотивирующие фразы: «Получить бесплатный расчет», «Скачать прайс-лист», «Записаться на консультацию».
• Ссылка для кнопки: Укажите, куда попадет пользователь после нажатия на кнопку. Это может быть:
  1. Якорная ссылка на другой блок на этой же странице (например, на блок с тарифами: #tarify)
  2. Партнерская ссылка на другой сайт.
  3. Ссылка на файл для скачивания или готовый apk.

Настройки блока «Контент-секция»

«Контент-секция» — это универсальный и самый гибкий блок вашего конструктора. С его помощью вы можете рассказать о вашем продукте, описать преимущества, показать характеристики, добавить прайс-лист и многое другое. Вы можете добавить на страницу столько контент-секций, сколько вам необходимо.

1. Настройка всей секции

Прежде чем наполнять секцию контентом, вы можете задать ей важные параметры.

ID секции (якорь): Это уникальное имя вашей секции, которое используется для навигации. Например, если вы создаете секцию «Мобильное приложение», вы можете задать ей ID app. После этого в настройках шапки вы сможете создать пункт меню «Mobile App» и указать для него якорную ссылку #app. При клике на этот пункт меню страница будет плавно прокручиваться к этой секции.

Использование HTML-тегов для SEO: В текстовых редакторах внутри секции вы можете использовать специальные HTML-теги для улучшения SEO и визуального выделения текста. Просто выделите нужный фрагмент и примените тег:

• Теги strong и b: Делают текст жирным. Поисковые системы считают текст внутри strong более важным.
• Тег a: Создает гиперссылку на другой сайт или страницу.

2. Добавление элементов внутрь секции

Внутри каждой контент-секции вы можете комбинировать различные элементы, чтобы создать нужную структуру.

• Заголовок H2: Основной заголовок секции (например, «Наши преимущества» или «Как мы работаем»).
• Заголовок H3: Подзаголовок для разделения информации внутри секции (например, «Гарантия качества» под основным заголовком «Наши преимущества»).
• Текстовый блок: Используется для написания обычных абзацев, описаний и любого сплошного текста.
• Маркированный список: Идеально подходит для перечисления преимуществ, особенностей или пунктов, не имеющих строгого порядка.
• Нумерованный список: Используется для описания пошаговых инструкций, этапов работы или рейтинга.
• Таблица: Отличный инструмент для сравнения тарифов, отображения характеристик или любых структурированных данных. Вы можете настроить необходимое количество строк и столбцов.
• Картинка: Визуализируйте ваш текст с помощью изображений. Для каждой картинки вы можете и должны прописать Alt текст — это короткое описание изображения, важное для SEO и доступности сайта.
• Кнопка (CTA): Добавьте кнопку призыва к действию в любом месте секции, чтобы направить пользователя к целевому действию (например, «Узнать подробнее», «Перейти к тарифам»).

Совет по структурированию контента: Чередуйте текстовые блоки с изображениями, списками и таблицами. Разбивайте большой объем информации на логические части с помощью заголовков H2 и H3. Это делает текст легким для восприятия и улучшает пользовательский опыт.

Настройки блока «Секция FAQ» (Часто задаваемые вопросы)

Блок FAQ (Frequently Asked Questions) — это эффективный способ ответить на самые популярные вопросы ваших потенциальных клиентов, снять их возражения и сомнения еще до того, как они их зададут. Хорошо проработанная секция FAQ повышает доверие к вашему предложению, сокращает количество обращений в поддержку и помогает пользователю быстрее принять решение о покупке.

На вашем лендинге вопросы будут представлены в виде интерактивного списка (аккордеона): пользователь видит вопрос, нажимает на него, и ему плавно открывается ответ.

1. Заголовок секции

Это основной заголовок всего блока, который видят пользователи. По умолчанию он может называться «Часто задаваемые вопросы», но вы можете его изменить на любой другой, который лучше подходит вашему стилю.

2. Добавление и удаление вопросов с ответами

Это основной функционал блока. Вы можете создать список из вопросов и ответов, которые наиболее важны для вашей аудитории.

• Нажмите кнопку «Добавить вопрос», чтобы создать новую пару "вопрос-ответ".
• Введите в первое поле сам вопрос.
• Во втором поле напишите развернутый и понятный ответ.
• Вы можете добавить столько пар, сколько необходимо.
• Чтобы удалить ненужный вопрос, просто нажмите на иконку удаления (крестик) рядом с ним.

Совет по наполнению секции FAQ: Подумайте, какие вопросы могут возникнуть у вашего клиента на пути к покупке. О чем он беспокоится? Что ему может быть непонятно?

Настройки футера (Footer)

Футер (или подвал) — это блок, расположенный в самом низу вашего лендинга. Хотя он находится в конце страницы, его роль очень важна. В футере обычно размещают служебную информацию, контакты и ссылки на социальные сети. Это помогает укрепить доверие пользователя и предоставить ему дополнительные способы связи с вами.

1. Текст копирайта (Copyright)

Это текстовая строка в футере, которая информирует о защите авторских прав. Она также используется для размещения важной дополнительной информации.

2. Добавление ссылок на социальные сети

Размещение иконок социальных сетей в футере — это отличный способ познакомить аудиторию с вашим брендом ближе и дать возможность следить за вашими новостями на удобной для них платформе.

Как это работает:

• Найдите в списке нужную социальную сеть (например, Facebook).
• Вставьте в поле напротив полную ссылку на ваш профиль или страницу.
• Как только вы вставите ссылку, соответствующая иконка автоматически появится в футере вашего сайта. Если вы оставите поле пустым, иконка отображаться не будет.

Поддерживаемые социальные сети:

• Twitter
• Facebook
• YouTube
• Instagram
• LinkedIn

Совет: Даже если ваш основной бизнес не связан с активным ведением соцсетей, наличие ссылок на них повышает доверие пользователей, показывая, что вы открытая и реальная компания.

Настройки SEO (Поисковая оптимизация)

SEO-настройки — это ваш инструмент для общения с поисковыми системами, такими как Google и Яндекс. Заполнив эти поля, вы помогаете поисковым роботам правильно понять, о чем ваша страница, и кому ее стоит показывать. Именно эта информация используется для формирования вида вашей страницы (сниппета) в результатах поиска.

1. Title (Заголовок страницы)

Что это? Это самый главный SEO-элемент. Текст из этого поля отображается:

• Как основной синий заголовок, на который нажимают пользователи в результатах поиска.
• В названии вкладки (сниппете) в браузере.

Как заполнять?

• Длина: Старайтесь укладываться в 50-60 символов.
• Содержание: Заголовок должен быть привлекательным и содержать ваш самый главный поисковый запрос (ключевое слово). Он должен точно отражать суть вашего предложения.

2. Meta Description (Описание)

Что это? Это короткий текст (1-2 предложения), который отображается под синим заголовком в результатах поиска. Его задача — "продать" ваш сайт пользователю и убедить его перейти именно к вам.

Как заполнять?

• Длина: Примерно 150-160 символов.
• Содержание: Кратко опишите ваше предложение, упомяните ключевые преимущества и добавьте призыв к действию (CTA). Используйте ключевые слова, так как они могут подсвечиваться жирным в поиске.

3. Canonical URL (Канонический URL)

Что это? Это более технический параметр. Он указывает поисковым системам "основную" или "предпочтительную" версию страницы, если ее контент доступен по нескольким разным URL-адресам (чтобы избежать проблем с дублированием контента).

Как заполнять?

• Для большинства лендингов это поле можно оставить пустым. Конструктор автоматически подставит правильный адрес вашей страницы.
• Вам нужно заполнять это поле только в том случае, если вы точно знаете, что эта страница является копией другой, и вы хотите указать поисковику основной адрес.

3. Атрибут Lang (Язык страницы)

Что это? Это код, который сообщает поисковым системам и браузерам, на каком языке написан контент вашей страницы.

Как заполнять?

Укажите двухбуквенный код языка в формате ISO 639-1.

• ru — для русского языка
• en — для английского языка
• uz — для узбекского языка

И так далее..

Это помогает поисковикам правильно таргетировать вашу страницу на аудиторию, говорящую на этом языке, а также важно для корректной работы переводчиков и программ для чтения с экрана.

Настройки Микроразметки

Микроразметка — это специальный код, который вы добавляете на свою страницу. Он невидим для обычных посетителей, но служит своеобразным "переводчиком" для поисковых роботов (Google, Яндекс) и социальных сетей (Facebook, Telegram, VK). Этот код объясняет им, что именно означает тот или иной контент на вашем лендинге.

Зачем это нужно? Страницы с микроразметкой выглядят в поиске и соцсетях гораздо привлекательнее, что напрямую влияет на количество переходов на ваш сайт.

1. Разметка FAQ (Автоматически)

Что это? Это специальная разметка для вашего блока «Часто задаваемые вопросы». Она сообщает поисковым системам, что этот блок является списком вопросов и ответов.

В чем выгода? Google может использовать эту разметку, чтобы показать ваши вопросы и ответы прямо в результатах поиска под ссылкой на ваш сайт. Это делает ваш сниппет (блок с описанием сайта в поиске) более крупным, информативным и кликабельным.

Как это работает?

Вам ничего не нужно делать дополнительно! Если вы заполнили секцию FAQ в конструкторе, система автоматически создаст для нее правильную микроразметку. Просто убедитесь, что переключатель этой функции активен.

2. Разметка Open Graph (для красивых ссылок в соцсетях)

Что это? Open Graph — это стандарт микроразметки, созданный Facebook, который используется всеми основными социальными сетями и мессенджерами (Telegram, WhatsApp, VK, Twitter и др.). Заполнив эти поля, вы сами решаете, как будет выглядеть ссылка на ваш лендинг, когда кто-то ей делится.

Вместо обычной синей ссылки появится красивая карточка с заголовком, описанием и картинкой.

Как заполнять поля Open Graph:

• OG: Title (Заголовок для соцсетей): Жирный заголовок, который будет отображаться в карточке ссылки. Он может отличаться от вашего SEO-заголовка и быть более рекламным или "цепляющим".
• OG: Description (Описание для соцсетей): Текст под заголовком. Он должен кратко описывать ваше предложение и мотивировать кликнуть по ссылке.
• OG: Image URL (URL картинки для превью): Самый важный элемент. Это ссылка на картинку, которая будет показана в превью. Без картинки ссылка теряет до 80% привлекательности.
• OG: URL (URL страницы): Полный адрес вашей страницы. Обычно конструктор может подставлять его автоматически, но для надежности лучше указать его здесь вручную.
• OG: Locale (Язык и регион): Указывает соцсетям, для какой языковой аудитории предназначен ваш контент.

Профессиональный совет: После заполнения полей Open Graph проверьте, как будет выглядеть ваша ссылка, с помощью специальных сервисов, например, Facebook Sharing Debugger. Это поможет убедиться, что все отображается корректно.

3. Вставить свою микроразметку

Эта опция предназначена для опытных пользователей и SEO-специалистов, которым требуется полный контроль над структурированными данными на странице.

При активации переключателя «Вставить свою микроразметку» на странице появится специальное текстовое поле. В это поле вы можете самостоятельно вставить готовый код микроразметки в формате JSON-LD или другом поддерживаемом формате. Это позволяет добавить на страницу любую необходимую схему (например, FAQPage, Product, Organization), даже если для нее нет стандартных полей в конструкторе.

Важно: Используйте эту функцию с осторожностью. Некорректный или содержащий ошибки код микроразметки может негативно повлиять на то, как поисковые системы индексируют вашу страницу. Перед сохранением всегда проверяйте свой код с помощью специальных валидаторов (например, Schema Markup Validator от Google).

Настройки Аналитики

Аналитика помогает вам понять, как пользователи находят ваш сайт и что они на нем делают. Подключив сервисы аналитики, вы сможете отслеживать посещаемость, видеть, по каким поисковым запросам вас находят, и выявлять технические ошибки.

Подключение Google Search Console (GSC)

Google Search Console — это бесплатный и обязательный инструмент от Google для владельцев сайтов. Он позволяет:

• Увидеть, как Google видит ваш сайт.
• Узнать, по каким запросам пользователи находят вас в поиске.
• Отслеживать ошибки, которые мешают вашему сайту хорошо ранжироваться.
• Сообщать Google о готовности вашего сайта к индексации.

Как подключить?

Чтобы подключить GSC, вам нужно подтвердить, что вы являетесь владельцем сайта. Для этого используется специальный код верификации.

Где взять Код верификации Google?

1. Перейдите на сайт Google Search Console и войдите в свой Google-аккаунт.
2. Добавьте новый ресурс (сайт). Google предложит два варианта. Выберите правый — "Ресурс с префиксом в URL" и введите полный адрес вашего сайта
3. Google предложит несколько способов подтверждения прав. Прокрутите вниз и выберите способ под названием "HTML-тег".
4. Вы увидите строку кода, которая выглядит примерно так: meta name="google-site-verification" content="**abcdefg12345ABCDEFG**"
5. Скопируйте только тот набор символов, который находится внутри кавычек content="...". В нашем примере это abcdefg12345ABCDEFG. Не нужно копировать весь тег целиком!
6. Вернитесь в конструктор, в раздел "Аналитика", и вставьте этот скопированный код в поле «Код верификации Google».

Подключение Bing Webmaster Tools

Это сервис от Microsoft, который позволяет отслеживать, как ваш сайт представлен в поисковой системе Bing. Чтобы подключить его, скопируйте метатег для подтверждения прав из вашего аккаунта Bing Webmaster Tools и вставьте его в это поле. После этого вы сможете анализировать поисковый трафик из Bing, находить и устранять ошибки индексации и управлять представлением вашего лендинга в этой поисковой системе.

Подключение Яндекс.Метрика

Один из самых популярных инструментов для анализа поведения пользователей на сайте. Для подключения просто вставьте номер (ID) вашего счетчика Яндекс.Метрики в это поле. Это позволит вам отслеживать посещаемость, источники трафика, поведение пользователей с помощью Вебвизора, карт кликов и скроллинга, а также настраивать и отслеживать достижение целей (конверсий).

Подключение Microsoft Clarity

Это бесплатный сервис от Microsoft, который помогает визуализировать поведение пользователей на вашем лендинге. Скопируйте идентификатор (ID) вашего проекта из Microsoft Clarity и вставьте его сюда. Сервис предоставляет доступ к записям сеансов (видео визитов), тепловым картам кликов и картам прокрутки. С его помощью вы сможете наглядно увидеть, с какими трудностями сталкиваются пользователи и какие элементы на странице привлекают больше всего внимания.