Как создать шаблон лендинга для WordPress

Как создать лендинг для WordPress (Видео-урок +бесплатный шаблон лендинга для скачивания)

Привет ребят. В этот раз я подготовил для вас еще один бесплатный шаблон лендинга для WordPress + видео-урок по тому, как я его создавал. Ссылка на все инструменты, сервисы и прочее в описании под этим видео.

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

Как создать лендинг для WordPress с нуля

Как создать лендинг для WordPress (Видео-урок +бесплатный шаблон лендинга для скачивания)

Основные инструменты и сервисы:

➡ Хостинг, домен и CMS регистрируем тут: https://clck.ru/JLr9M
➡ Генератор логотипов для сайта тут: https://clck.ru/MPpyv
➡ Мой бесплатный курс по созданию сайтов с нуля тут: https://clck.ru/PwJAv

Шаблон сайта + видео-инструкция по установке:

📌Шаблон сайта из видео можно скачать тут: https://yadi.sk/d/faJWhVx9JUks9A
📌Инструкция по размещению сайта на хостинге и подключение домена: https://youtu.be/rvl3gDmuj_o

Название плагинов и тем, которые я использую в видео:

  1. Тема — ASTRA
  2. Плагины:
  • Elementor
  • Elementor — Header, Footer & Blocks
  • Essential Addons for Elementor
  • Livemesh Addons for Elementor
  • jQuery Smooth Scroll
  • Contact Form 7
  • Popup Maker

Шрифты и цвета из урока:

Шрифты и цвета, которые я использовал в уроке:
Шрифт — Source Sans Pro

Цвета:
#FF7951 — Основной цвет (оранжевый)
#532437 — Градиентный bac (темно-фиолетовый)
#100C1B — Градиентный bac (темно-синий)
#FF6383 — Мелкие подзаголовки (фиолетовый)
#F0F0F0 — Цвет текста (серый)
#54595F — Цвет текста (черный)

Дополнительные материалы к уроку:

  1. Как придумать доменное имя для своего сайта: https://clck.ru/NBhsQ
  2. Как зарегистрировать домен и подключить его к сайту: https://youtu.be/6bkvslQMH6E
  3. Бесплатные изображения для сайта можно брать тут: https://clck.ru/JfNoy
  4. Бесплатные иконки для сайта можно брать тут: https://clck.ru/NBhcs
  5. Генератор политики конфиденциальности тут: https://clck.ru/JLtr3
  6. Google кириллические шрифты тут: https://clck.ru/EACPK

Таймкоды на темы из видео:

0:34 — старт урока
0:58 — организационные моменты

Начинаем создавать лендинг:
3:07 — что потребуется для создания лендинга
5:13 — настраиваем Астру (шрифт, лого, фавикон)
9:50 — наполняем страницу «Политика конфиденциальности»
11:40 — как работать в Elementor (обзор инструментов)

Работа в Элементоре:
15:58 — начинаем создавать лендинг
16:45 — первый экран лендинга (создаем и настраиваем)
32:46 — второй экран лендинга (создаем и настраиваем)
44:28 — настраиваем разделитель секции (переход из 1 к 2 экрану)
46:35 — третий экран лендинга (создаем и настраиваем)
52:08 — четвертый экран лендинга (создаем и настраиваем)
55:23 — пятый экран лендинга (создаем и настраиваем)
1:04:05 — шестой экран лендинга (создаем и настраиваем)
1:15:44 — добавляем якорные ссылки (anchor)

Контактная форма и поп-ап окна
1:20:37 — активируем контактную форму 7 и попап мэйкер
1:21:17 — настраиваем контактную форму 7
1:26:16 — настраиваем попап мэйкер
1:28:42 — добавляем и настраиваем два попап окна

Настраиваем мобильную и планшетную версии
1:37:18 — настраиваем планшутную версию
1:42:13 — настраиваем мобильную версию

Настраиваем подвал и шапку сайта
1:46:57 — активируем плагин, создаем шапку в Elementor
1:49:03 — создаем меню шапки сайта
1:59:15 — создаем подвал сайта

Настраиваем главную страницу сайта
2:04:46 — выставляем лендинг в качестве главной страницы

Заключение

На этом у меня все. Как обычно, если этот урок оказался для вас полезным — поделитесь им в соц сетях, для меня это будет лучшая благодарность. Ну, а если у вас остались вопросы или вам есть что добавить — пишите в комментарии тут или на ютубе и я отвечу/дополню урок.


Пролистать наверх