Оглавление
Добавляем или удаляем элементы
Другой вариант макета страницы
Макет страницы подписки
Страница подписки содержит только основную информацию и форму подписки. Наверняка, Вы уже встречали немало таких страниц. Например, у меня на сайте она выглядит вот так
Сейчас создаём по данному макету с помощью Elementor. В ходе выполнения шагов Вы разберётесь как это делается и сможете отредактировать или даже заново собрать свой макет подписной страницы.
Создаём новую страницу
Идём на вкладку Страницы – Добавить новую. В поле «Добавить заголовок» пишем название и нажимаем кнопку «Редактировать в Elementor»
Страница собирается из блоков как конструктор.
Добавляем заголовок
Перетаскиваем блок «Заголовок» в область виджетов
Введите текст заголовка вашей страницы и поставьте выравнивание посередине
Чтобы изменить цвет заголовка переходим на вкладку «Стиль»
Нажимаем на кнопку «Цвет заголовка» и выбираем нужный цвет перемещая кружочек по шкале либо введя цифровое значение в нижнем поле после символа #
Далее нажимаем на значок несколько квадратиков, чтобы вызвать меню элементов
Добавляем текст
Слева выбираем «Текстовый редактор» и переносим его в поле добавления элементов
Слева появляется панель текстового редактора, куда пишем ваш текст и оформляем его красиво: меняем цвет, шрифт, выравнивание и т.д.
Далее нам нужно вставить секцию с двумя колонками. В поле «Перетащите виджет» нажимаем на плюс в бардовом кружочке. Выбираем структуру в две колонки
В каждую секцию вставляем «Текстовый редактор»
Редактируем текст в каждой секции. В моём примере слева текст выделен жирным, а справа текст в виде заголовка 5 и везде выравнивание посередине. Можно поменять цвет текста, его размер, сам тип шрифта на ваше усмотрение
Далее снова вставляем двойную секцию.
Добавляем изображение
Размещаем в левой части изображение
После перетаскивания элемента слева появляется окно редактирования
Переходим в библиотеку файлов, выбираем из уже загруженных либо загружаем нужное изображение и нажимаем кнопку «Вставить»
Выставляем выравнивание посередине
Добавляем форму подписки
В правой секции вставим форму подписки. Пролистываем левую панель элементов в самый низ, находим «HTML-код» и перетаскиваем в правую секцию
Идём в наш личный кабинет Автовебофис, переходим на вкладку Маркетинг – Формы, выбираем ранее созданную нами форму
В открывшемся окне вносим нужные правки (если нужно), сохраняем результат и копируем код для вставки на сайт
Возвращаемся в консоль сайта и вставляем полученный код в секцию
Осталось добавить счётчик посещаемости и ссылку на политику конфиденциальности (обязательна, если на странице есть форма сбора данных). Добавляем секцию с двумя колонками.
В левую колонку перетаскиваем виджет «HTML-код» и вставляем туда код счётчика посещаемости.
Добавляем ссылку в текст
В правую перетаскиваем виджет «Текстовый редактор», пишем «Политика конфиденциальности». Выделяем эту фразу, нажимаем на значок ссылки
В появившемся поле начинаем печатать название страницы и из появившихся подсказок выбираем нужную страницу (в теме “Астра” она создана автоматически)
Нажимаем на значок шестеренки, чтобы настроить ссылку
Здесь ставим галочку «Открывать в новой вкладке» и нажимаем кнопку «Обновить»
Предварительный просмотр страницы
Посмотреть создаваемую страницу можно нажав на глазик внизу левой панели
Вот такой она выглядит сейчас
Видим, что отсутствует разделительная линия после заголовка. Исправляем, заодно учимся добавлять элементы на страницу.
Добавляем или удаляем элементы
Чтобы вставить между секциями дополнительную, наведите курсор на плюсик нижней секции. В нашем случае это плюсик секции «Текстовый редактор»
Если нужна секция с несколькими колонками, нажимаем на плюсик в появившемся поле
Выбираем нужную структуру: одной колонкой или с разбивкой на несколько секций
Сейчас для разделительной линии нам нужна одна колонка, поэтому просто перетаскиваем элемент
Видим, что полоска чёрного цвета
Можно сделать её другого цвета или менее насыщенной
Смотрим изменения и, если всё устраивает, нажимаем кнопку «Опубликовать» внизу панели.
Если публиковать рано, то перед выходом из редактора обязательно сохраните черновик – нажмите на стрелочку рядом с надписью «Опубликовать» и выберите «Сохранить черновик».
Чтобы удалить ненужную секцию, нажмите на крестик
После окончания работы со страницей выходим в консоль сайта
Отличная работа, – страница подписки готова!
Другой вариант макета страницы
Есть и другой вариант этой же страницы, который содержит чуть больше информации – там вставлен блок «Вкладки» с программой каждого дня марафона
Можете использовать любой макет, но не перегружайте страницу лишней информацией.
Аналогичным образом создаётся лендинг – продающая страница с информацией о платном продукте. Обычно распределяют по условным экранам:
- Уникальное предложение
- Боли потенциального клиента
- Преимущества вашего продукта
- Отзывы
- Программа курса или содержание книги
- Выгоды от приобретения вашего продукта
- Автор курса или книги
- Как проходит обучение
- Стоимость продукта и гарантии
Вместо формы подписки на лендинге ставим кнопку оформления заказа (этим будем заниматься попозже, когда будем настраивать приём оплаты).
