Лендинг за день: быстрый старт с Elementor, Flexbox и Grid

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

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

Для создания лендинга на мастер-классе №1 понадобится бесплатная версия плагина Elementor.

Зарегистрируйтесь и скачайте бесплатный плагин с официального сайта Elementor в разделе "Внешние ресурсы".

Для того чтобы улучшить созданный лендинг в рамках мастер-класса №2, вам потребуется платная версия плагина Elementor – Elementor Pro.

В разделе "Внешние ресурсы" перейдите по ссылке, чтобы приобрести Elementor Pro.

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

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

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

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

В этом уроке Вы познакомитесь с разными видами шапки (header) и подвала (footer) на многостраничных сайтах и лендинге, созданных при помощи Elementor и его PRO-версии. Вы научитесь создавать, настраивать и публиковать эти элементы, а также удалять их для отображения на компьютере и мобильных устройствах.

На первом мастер-классе, в процессе создания лендинга с минимальным применением виджетов и максимальным Flexbox контейнеров бесплатной версии Elementor, Вы научитесь:

• Настраивать дизайн систему и стили темы

• Уверенно работать с Flexbox контейнерами

• Работать с фоном: Цвет, Градиент, Изображение, Перекрытие

• Работать с базовыми виджетами “Заголовок”, “Изображение”, “Текстовый редактор”, “Иконка”, “Карты Google”, “Разделитель”, “Кнопка”, “Шорткод”

• Устанавливать форму обратной связи с помощью плагина WPForms

• Использовать виджет “Шорткод”

• Устанавливать Карту Google

• Добавлять анимацию к элементам

• Создавать эффект фиксированного фона при прокрутке экрана

• Располагать изображение в произвольном месте на экране

• Создавать ссылки — якоря для перехода в нужный раздел на этой же странице

• Адаптировать страницу под мобильные устройства

• Скрывать элементы на мобильных устройствах

Для создания лендинга на мастер-классе №1 понадобится бесплатная версия плагина Elementor.

Зарегистрируйтесь и скачайте бесплатный плагин с официального сайта Elementor в разделе "Внешние ресурсы".

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

• 00:00 – Обзор дизайна лендинга, сознанного на мастер-классе с минимальным применением виджетов и максимальным Flexbox контейнеров Elementor.

• 01:29 – Обзор переделки дизайна лендинга с применением фишек Elementor PRO.

• 00:00 – Вход в админ панель сайта

• 00:34 – Создание страницы лендинга

• 01:08 – Настройка дизайн системы

• 03:25 – Замена и настройка стилей темы сайта

В этом уроке мы вместе с Вами шаг за шагом пройдем следующие этапы:

• Научимся входить в админку сайта.

• Создадим страницу — лендинг и установим ее.

• Подготовим Elementor к работе — выполним нужные настройки дизайна.

• Поменяем стандартный дизайн сайта на свой собственный дизайн. Настроим его как нужно

Материалы к уроку:

Глобальные цвета

Первый: #2E2829

Второй: #2E2829

Текст: #2E2829

Акцент: #1AB1B1

Фон: #384863

Настройка стилей темы

Текст: Open Sans

Заголовки: Lora

Создайте стильную шапку для лендинга с нуля всего за 15 минут!

Содержание видео:

• 00:00 – Особенность создания шапки и подвала сайта с помощью Elementor

• 01:05 – Удаление Шапки и Подвала темы WordPress, установленной по умолчанию.

• 01:39 – Установка для шапки лендинга Flexbox контейнера и его первоначальная настройка.

• 03:29 – Установка и настройка логотипа.

• 05:35 – Установка и настройка номера телефона с иконкой.

• 10:09 – Адаптивность шапки лендинга для корректного отображения на компьютере и мобильных устройствах.

В этом уроке Вы научитесь:

• Удалять стандартную шапку WordPress,

• Добавлять и настраивать Flexbox контейнеры,

• Размещать и настраивать логотип,

• Добавлять номер телефона с иконкой,

• Делать шапку адаптивной для всех устройств.

Материалы урока:

Скачайте картинку логотипа из раздела "Материалы для скачивания"

Содержание видео:

• 00:00 – Фишка фона шапки

• 01:31 – Фон общего контейнера

• 02:39 – Фон с изображением справа

• 06:38 – Внутренние контейнеры

• 08:18 – Текст и кнопка слева

• 15:18 – Адаптивность Hero-блока

• 24:50 – Стрелочка к кнопке

Hero-блок – это верхний или нижний блок на главной странице сайта, который обычно содержит наиболее важную информацию о компании, ее продуктах или услугах.

В этом уроке на примере лендинга я научу Вас, как создать стильный верхний Hero-блок сайта с фоном, текстом, картинками и кнопкой. Мы будем использовать только с помощью Flexbox из бесплатной версии Elementor, без программирования.

В этом уроке Вы узнаете:

• Как добавить фон в шапку сайта.

• Как разместить контент с фоновым изображением.

• Как сделать адаптивный дизайн под все устройства.

• Как добавить стрелочку к кнопке для привлечения внимания.

Материалы урока:

Скачайте картинку Hero-блока из раздела "Материалы для скачивания".

Содержание видео:

• 00:00 – Контейнер с двумя контейнерами внутри

• 00:14 – Контейнер с изображением

• 00:29 – Контейнер с заголовком, булетами и описанием Преимуществ

• 01:08 – Выбор виджета для описания Преимуществ

• 02:19 – Контейнеры и виджеты для описания Преимуществ

• 04:18 – Контейнеры и виджетов “Иконка”, “Заголовок”, “Текстовый редактор”

• 16:16 – Адаптивность блока “Преимущества”

В этом уроке я покажу, как создать блок с изображением, заголовком и описанием преимуществ продукта/услуги без использования готовых шаблонов Elementor с помощью Flexbox из бесплатной версии.

Вы научитесь:

• Добавлять и настраивать изображения.

• Оформлять привлекающие внимание заголовки.

• Оформлять преимущества с помощью текста и булетов.

• Комбинировать виджеты для нестандартных блоков.

• Делать блоки адаптивными для мобильных устройств.

Материалы урока:

Скачайте картинку блока "Преимущества" из раздела "Материалы для скачивания".

Название иконок:

calendar

skype

wallet

Содержание видео:

• 00:00 – Варианты создания формы обратной связи

• 00:58 – Контейнер с фоном

• 02:52 – Настройка текста и разделителя над формой

• 06:46 – Установка плагина WPForms

• 07:56 – Настройка формы

• 10:00 – Установка формы на страницу

В этом уроке, за 15 минут я покажу, как быстро и просто можно реализовать форму обратной связи на сайте с помощью WordPress, плагина WPForms и конструктора Elementor с помощью Flexbox из его бесплатной версии.

Вы научитесь:

• Добавлять контейнеры в Elementor.

• Настраивать фон и оформление формы.

• Устанавливать и подключать WPForms.

• Создавать и настраивать поля формы.

• Размещать готовую форму на сайте.

Материалы урока:

Скачайте картинку блока "Заказать звонок" из раздела "Материалы для скачивания".

Название плагина:  WPForms (бесплатная версия). 

Содержание видео:

• 00:00 – Варианты добавления отзывов на лендинг

• 01:40 – Настройка на блоке отзывов текста и изображения

• 05:33 – Дублирование и настройка блока с отзывами

• 08:28 – Адаптивность блока с отзывами

В этом уроке, за 12 минут, я научу создавать стильный блок с отзывами клиентов без использования готовых шаблонов Elementor с помощью Flexbox из бесплатной версии.

Вы узнаете:

• Как добавлять текст, изображения и заголовки.

• Как сформировать готовый отзыв из виджетов.

• Как дублировать и настраивать блоки.

• Как сделать отзывы адаптивными для мобильных устройств.

Материалы урока:

Скачайте картинки блока "Отзывы" из раздела "Материалы для скачивания".

Содержание видео:

00:00 – Как будем создавать блок “Сертификаты”

00:26 – Копируем блок “Отзывы”

00:43 – Добавляем фон

01:24 – Удаляем отзывы, меняем цвет границы контейнера блока “Отзывы”

02:11 – Загружаем изображения сертификатов

03:52 – Вид блока “Сертификаты” в Elementor PRO

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

Вы научитесь:

• Копировать и изменять блоки в Elementor,

• Добавлять фоны к контейнерам,

• Загружать и размещать изображения,

• Удалять и добавлять нужные элементы,

• Всего за 5 минут я научу вас экономить время при создании новых блоков в Elementor.

Материалы урока:

Скачайте картинки блока "Сертификаты" из раздела "Материалы для скачивания".

Содержание видео:

• 00:00 – Как создается карта на сайте

• 00:18 – Добавляем Flexbox контейнер

• 00:24 – Добавляем и настраиваем виджет “Карты Google”

В этом уроке, всего за 2 минуты я научу вас создавать интерактивные карты для сайта или лендинга на Elementor. Это сэкономит ваше время!

Вы научитесь:

• Добавлять Flexbox контейнеры

• Использовать виджет “Карты Google”

• Быстро настраивать и размещать карту

Содержание видео:

• 00:00 – Flexbox контейнер для footer

• 00:31 – Фон footer

• 00:38 – Логотип в footer

• 00:52 – Юридическая информация

• 02:49 – Копия элементов шапки (header) для footer

• 03:05 – Исправление неточностей в дизайне footer

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

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

Содержание видео:

• 00:18 – Добавляем ссылку к логотипу в шапке и футере

• 01:00 – Исправляем телефон

• 01:15 – Делаем номер телефона ссылкой

• 02:46 – Исправляем текст на кнопке

• 03:08 – Поправляем расположение стрелочки

• 03:30 – Добавляем к кнопке ссылку с якорем на этой же странице

• 05:00 – Исправляем текст заголовка в контейнере с формой

• 05:19 – Делаем эту страницу главной сайта

В этом уроке, я покажу как найти и поправить огрехи на лендинге, созданном в Elementor, не обращаясь к разработчику!

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

После просмотра этого урока вы сможете находить и исправлять ошибки на лендинге, не обращаясь к разработчику и экономя деньги!

Материалы урока:
Скачайте картинку фавикона из раздела "Материалы для скачивания".

Содержание видео:

• 00:00 – Возможности анимации в бесплатной версии Elementor

• 00:28 – Анимация в блоке “Hero”

• 02:13 – Анимация в блоке “Преимущества”

• 05:03 – Анимация в блоке “Форма заявки”

• 06:13 – Анимация в блоке “Отзывы”

• 06:40 – Анимация в блоке “Сертификаты”

В этом уроке, за 9 минут, я покажу как без сложностей оживить свой лендинг с помощью бесплатного Elementor и сделать его более привлекательным для посетителей!

Вы научитесь:

• Добавлять анимацию на главный блок Hero, чтобы сделать его появление более эффектным,

• Оживлять блоки с преимуществами, отзывами, сертификатами, заявкой, чтобы привлечь к ним внимание посетителей,

• Настраивать задержку анимации и продолжительность эффектов,

• После этого урока Вы сможете добавлять анимацию на любые блоки лендинга и оживлять контент с помощью бесплатного Elementor.

На втором мастер — классе мы вместе доработаем лендинг, сделанный на бесплатном Elementor, с использованием расширенных возможностей Elementor PRO.

Вы научитесь:

• Работать с произвольными иконками

• Работать с произвольными шрифтами

• Сохранять страницу и контейнер как шаблоны и в дальнейшем использовать их

• Создавать PopUp окна и вызывать их на странице при клике по ссылке

• Создавать формы обратной связи с помощью виджета “Форма”

• Познакомитесь с динамическими тегами

• Создадите шаблон шапки (header) и подвала (footer) в “Конструкторе тем”

• Создадите шапку, прилипающую к верху страницы при прокрутке экрана

• Работать с виджетом Pro: “Обратный отсчет”

• Работать с виджетом Pro:“Анимированный заголовок”

• Работать с виджетом Pro:“Карусель отзывов”

• Работать с виджетом Pro:“Медиа карусель”

• Работать с виджетом Pro:“Форма”

• Копировать контейнер в шаблоне и вставлять на странице

• Сохранять виджет как глобальный и в дальнейшем использование его

• Создадите в нижней части сайта копирайт с текущим годом

• Создадите эффект движения изображения при движении мышки и при прокрутке

• Работать с произвольным CSS

• Работать с произвольным JS

• Работать с произвольным HTML

  
  

Содержание видео:
00:00 – Шапка (header)и подвал (footer) для всего сайта

00:27 – Счетчик обратного отчета со специальным предложением

00:47 – Иконка с изображением телефона

01:27 – PopUp окно для заказа звонка с формой Elementor Pro в header

02:12 – Движение изображения при наведении мышки

02:44 – Движение изображения при прокрутке

02:59 – Заголовок с анимацией

03:10 – Утонченные иконки

03:24 – Форма обратной связи Elementor Pro

03:45 – Карусель с отзывами

04:16 – Карусель 3D с сертификатами

04:33 – PopUp окно для заказа звонка с формой Elementor Pro в footer

04:42 – Произвольные шрифты

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

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

Мы разместим иконку телефона для быстрой связи и всплывающее окно для заказа звонка.

Вы узнаете, как добавить эффекты движения для изображений и анимацию для заголовков. Я расскажу про крутые иконки и готовые формы Elementor Pro.

Мы сделаем карусель с отзывами и 3D-презентацию сертификатов. И разместим еще одно всплывающее окно в подвале сайта!

Вы хотите сделать свой лендинг по-настоящему крутым и привлекательным?  Тогда вам нужна платная версия Elementor Pro!

Содержание видео:
00:00 – Приветствие. Какие изменения сделаем в лендинге мастер-класса

01:05 – Как купить плагин Elementor PRO по лучшей цене

02:40 – Как скачать, установить и активировать Elementor PRO

04:06 – Перевод Elementor PRO на русский язык

07:01 – Что нового в Elementor PRO

В этом уроке я расскажу как получить Elementor Pro и начать им пользоваться.

Сначала мы вместе выберем выгодное предложение для покупки Elementor Pro на официальном сайте. Я объясню, как купить плагин по лучшей цене, если Вы из России.

Дальше я покажу, как скачать Elementor Pro на компьютер и установить его в WordPress для активации. Мы пройдем процесс активации лицензии в несколько кликов. И настроим русский язык для удобства работы.

После этого Вы сможете использовать все возможности Elementor Pro для улучшения своего лендинга!

Если у Вас еще нет плагина Elementor PRO, перейдите по ссылке "Купить плагин Elementor Pro" в разделе "Внешние ресурсы" для приобретения платной версии плагина Elementor Pro на официальном сайте Elementor.

Содержание видео:

00:00 – Подготовка к редактированию лендинга

00:06 – Загрузка произвольных иконок

01:04 – Icomoon – генерация svg иконок в шрифт

03:34 – Загрузка произвольного шрифта

Вы хотите, чтобы дизайн вашего лендинга выделялся и запоминался? Тогда самое время использовать кастомные иконки и шрифты!

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

Сначала мы вместе подготовим лендинг к редактированию.Затем я покажу пошагово, как найти и загрузить нужный набор иконок в формате SVG. Расскажу про сервис IcoMoon, который может объединить разрозненные иконки в единый шрифт для удобства использования в Elementor.

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

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

Материалы урока:

Скачайте иконки из раздела "Материалы для скачивания".

Скачайте шрифт Snell Roundhand из раздела "Материалы для скачивания".

Содержание видео:
00:00 – Сохраняем страницу лендинга мастер — класса как шаблон в Elementor

01:26 – Сохраняем Flexbox контейнер с шапкой (header) как шаблон

02:16 – Сохраняем Flexbox контейнер — футер (footer) как шаблон

Хотите создавать новые страницы и блоки для сайта в разы быстрее? Тогда обязательно используйте шаблоны в Elementor!

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

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

Также мы создадим шаблон из блока футера, чтобы его тоже можно было использовать повторно.

После этого видео урока Вы сможете собирать новые страницы как конструктор — из готовых блоков — шаблонов, экономя массу времени!

Содержание видео:

00:00 – Что сделаем в этом видео

00:15 – Создание Popup окна с формой Elementor Pro

00:57 – Настройка Popup окна

02:22 – Фон Popup окна

03:26 – Внутренние отступы Flexbox контейнера в Popup окне

04:02 – Добавляем контент в Popup окно

04:20 – Настройка заголовка

04:40 – Настройка разделителя

06:09 – Настройка формы

Хотите быстро добавить на сайт Popup с формой для сбора заявок?

В этом уроке я подробно покажу, как создать такой Popup в Elementor Pro с нуля.

Сначала мы добавим базовый элемент Popup и выполним его настройки. Далее настроим фон Popup для комфортного восприятия. Затем внутри разместим гибкий Flexbox контейнер, настроим отступы. Добавим Заголовок, Разделитель и Форму от Elementor Pro.

Я продемонстрирую, как быстро настроить заголовок, разделитель и саму форму — поля, кнопку отправки и т.д.

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

Содержание видео:
00:00 – Создание Popup

00:19 – Добавляем Flexbox контейнер

00:23 – Добавляем Заголовок

00:41 – Добавляем Текстовый виджет

В этом уроке я расскажу и покажу, как создать важный PopUp “Политика конфиденциальности” с нуля с помощью Elementor Pro.

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

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

Содержание видео:

00:11 – Создание шапки (header) для лендинга мастер – класса в Конструкторе тем

00:30 – Вставка шаблона header

01:13 – Замена иконки телефона на произвольную иконку

02:20 – Изменение структуры Flexbox контейнера с телефоном в header

04:05 – Добавляем ссылку в header для вывода Popup окна с формой

05:37 – Отступы в контейнере и дизайн ссылки с Popup

07:05 – Делаем подчеркивание ссылки пунктиром и используем индивидуальное выравнивание элемента

09:40 – Добавляем Flexbox контейнер над header и задаем фон

10:00 – Устанавливаем и настраиваем виджет “Обратный отсчет”

14:28 – Устанавливаем и настраиваем виджет “Анимированный заголовок”

19:29 – Проверка на всех устройствах

20:50 – Фиксируем Flexbox контейнер к верхней границе экрана

20:50 – Условия отображения header — Закрепляем шапку для всего сайта

24:05 – Копирование Flexbox контейнера с телефоном и вставка его в футер

В этом уроке я подробно покажу, как создать красивую и функциональную шапку в Конструкторе тем Elementor Pro.

Сначала мы вставим базовый шаблон шапки и начнем его дорабатывать: заменим иконку телефона, изменим структуру блока с номером.

Далее добавим ссылку для вызова PopUp с формой и выполним необходимые настройки. Затем создадим над шапкой блок с таймером акции и анимированным заголовком.

Проверим адаптивность на всех устройствах и отображение на экране при прокрутке. В завершение продублируем блок с телефоном в footer лендинга.

После этого у Вас будет готовая к использованию адаптивная шапка лендинга с полезным функционалом!

Содержание видео:

00:00 – Копирование flexbox-контейнера с телефоном в нижний колонтитул (footer);

08:57 – Создание footer в Конструкторе тем;

10:45 – Вставка копирайта в footer;

12:49 – Использование HTML вместо года для вывода текущего года;

14:57 – Вставка произвольного JavaScript кода для отображения текущего года в footer;

16:22 – Редактирование шаблонов header и footer в Конструкторе тем для улучшения дизайна и функциональности лендинга.

В этом уроке я покажу как Вам воспользоваться конструктором темы Elementor Pro, который позволит Вам создать уникальный и стильный footer для вашего лендинга.

Вы научитесь, копировать Flexbox контейнер с телефоном и вставить его в footer, создадите и настроите Footer в Конструкторе тем, добавите копирайт и исправим год, используя HTML.

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

Материалы урока:

• Код HTML для вывода текущего года

• HTML точка посередине

• Код JS для отображения текущего года

Скачайте файл "Коды HTML и JS" для вставки на сайт из раздела "Материалы для скачивания".

Описание видео:

00:00 – Создание новой страницы для лендинга

00:18 – Вставка Шаблона страницы (в видео №3 мы сохранили шаблон-лендинг)

00:34 – Удаляем контейнер с хедер и футер

00:46 – Меняем шаблон страницы с “Холст Elementor” на “Elementor полная ширина”

01:19 – Куда делась шапка?

02:48 – Добавляем эффект движения изображения при движении мышки

03:46 – Добавляем эффект движения изображения при прокрутке

04:32 – Замена заголовка на “Анимированный заголовок”

05:28 – Переход с редактирования страницы в редактирования шаблона шапки

06:50 – Стиль анимированного заголовка

07:23 – Меняем иконки на произвольные

07:43 – Замена формы WP Forms на Elementor Pro форму

08:50 – Сохраняем форму в Popup как глобальный виджет

10:50 – Виджет “Карусель отзывов”

15:52 – Виджет “Медиа карусель”

19:52 – Проверка адаптивности страницы на мобильных устройствах

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

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

После этого я покажу, как добавить карусель с отзывами и 3D-карусель с изображениями. Проверим адаптивность лендинга на мобильных устройствах.

За 27 минут мы с нуля создадим полноценный лендинг с анимацией, кастомизацией и готовыми виджетами. Вы сможете использовать полученные навыки для своих проектов!

Содержание видео:

00:00 – Произвольный CSS код для кнопки

03:53 – Произвольный CSS код для кнопки на форме

04:55 – Располагаем поля форм обратной связи по горизонтали

В этом уроке я покажу, как добавлять произвольный CSS-код, чтобы настроить уникальный дизайн кнопок — изменить стиль кнопки, добавив тень, градиент и другие эффекты через CSS.

Также я покажу, как исправить расположение полей в форме обратной связи.

Материалы урока:

Стиль кнопки с бликом при наведении мышки

Ссылку смотрите в разделе "Внешние ресурсы"

Отредактированный CSS кнопки с бликом при наведении мышки для виджета “Кнопка”
Отредактированный CSS кнопки с бликом при наведении мышки для кнопки в форме

Скачайте файл "CSS" для вставки отредактированных CSS кнопок с бликом на сайт из раздела "Материалы для скачивания".