Как создать лендинг для 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
Название плагинов и тем, которые я использую в видео:
- Тема — ASTRA
- Плагины:
- 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 — Цвет текста (черный)
Дополнительные материалы к уроку:
- Как придумать доменное имя для своего сайта: https://clck.
ru/NBhsQ - Как зарегистрировать домен и подключить его к сайту: https://youtu.be/6bkvslQMH6E
- Бесплатные изображения для сайта можно брать тут: https://clck.ru/JfNoy
- Бесплатные иконки для сайта можно брать тут: https://clck.ru/NBhcs
- Генератор политики конфиденциальности тут: https://clck.ru/JLtr3
- Google кириллические шрифты тут: https://clck.ru/EACPK
ru/NBhsQТаймкоды на темы из видео:
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 — выставляем лендинг в качестве главной страницы
Заключение
На этом у меня все.
Как обычно, если этот урок оказался для вас полезным — поделитесь им в соц сетях, для меня это будет лучшая благодарность. Ну, а если у вас остались вопросы или вам есть что добавить — пишите в комментарии тут или на ютубе и я отвечу/дополню урок.
Шаблоны WordPress 💡 — Лучшие и проверенные темы 2021 года
Александр АйвазовШаблоны сайтов для WordPress сильно сокращают время на разработку, а так же экономят бюджет. Есть маркетплейсы, где можно купить готовое решение и наполнить его нужным контентом. В статье я буду давать ссылки на самый популярный из них. Я сам купил там множество тем для своих и клиентских задач. И поэтому уверен в качестве конечного продукта. В зависимости от типа сайта можно выбрать соответствующую тему вордпресс. Этой статьей я открываю серию подборок.
Содержание
- Маркетплейс Themeforest
- Универсальные шаблоны WordPress
- WordPress шаблон Salient
- Тема Brooklyn
- Шаблон Ohio
- Brook
- Stockholm
- Uncode
- Hub
Для начала почитайте мою статью о создании сайта на WordPress.
В ней вы найдете исчерпывающую информацию обо всем подготовительном этапе.
Все ссылки в этой статье будут вести на самый популярный маркетплейс в мире. Там работают самые сильные дизайнеры и разработчики со всего света. Перед загрузкой тема вордпресс проходит жесткую модерацию на качество кода и эстетическую составляющую. Поэтому можно быть уверенным в качестве шаблонов. К слову, их там больше 50 000.
К минусам можно отнести, что все они – англоязычные. Хотя русифицировать можно с помощью плагина Loco Translate. Или с помощью более мощного WPML.
Универсальные мульти-шаблоны WordPress
Так я называю темы, которые являются чем-то вроде конструкторов и включают в себя разные варианты дизайна по принципу «все в одном». Их можно использовать для создания сайта компании, услуг, лендинга, интернет-магазина. Они включают весь необходимый список плагинов как для управления дизайном, так и для управления базой товаров, если речь о ecommerce. Обычно такие плагины платны, но если вы покупаете их вместе с шаблоном, – они входят в стоимость.
Шаблон для WordPress / Salient
Salient – универсальная ворпдресс-тема, в которой есть 350 предустановленных шаблонов на любой вкус. Очень качественно проработана с точки зрения визуализации и работы со шрифтами. Можно использовать практически для любой сферы деятельности.
Посмотреть демо / Купить шаблон / Заказать разработку
- Для чего подойдет: wordpress, блог, интернет-магазин, сайт услуг, портфолио, лендинг
- Визуальный конструктор: модифицированный WPBakery
- Плагины : woocommerce, nectar slider, contact form 7
- Импорт демо-контента: есть, в один клик
- Адаптивность: да, адаптивен для всех устройств
- Особенности: много вариантов внешнего вида меню, встроенная большая коллекция иконок, базовая seo-оптимизация, пожизненное обновление шаблона, 9 встроенных стилей портфолио, 19 встроенных стилей дизайна поста, гладкая анимация элементов, интеграция со соцсетями, плавные межстраничные переходы, эффект параллакса, возможность создания собственного дизайна страницы.
Варианты главной страницы темы Salient
>> Купить шаблон / Заказать разработку <<
Brooklyn – мульти-шаблон ворпдресс, открывающий широкие возможности для создания сайта. Более 50 предустановленных тем. Встроенный визуальный конструктор страниц. Создавайте лендинг, сайт агентства, портфолио. Устанавливайте демо-контент в 1 клик. Работайте с Revolution Slider для привлечения внимания уже с первого экрана.
Посмотреть шаблон / Купить тему / Заказать разработку
- Для чего подойдет: wordpress, блог, интернет-магазин, сайт услуг, портфолио, лендинг
- Визуальный конструктор: Visual Composer
- Плагины: woocommerce, slider revolution, contact form 7
- Импорт демо-контента: есть, в один клик
- Адаптивность: да, адаптивен для всех устройств
- Особенности: встроенный конструктор шапки и подвала сайта, пожизненное обновление шаблона, базовая seo-оптимизация
Шаблоны темы Brooklyn
Купить тему / Заказать разработку
Шаблон для WordPress / Ohio
Ohio – современная, стильная, динамичная тема для wp с легкой анимацией элементов.
С внимательным отношением к цвету, шрифтам и расположением элементов. Включает в себя множество шаблонов. Подойдет для портфолио, сайтов креативных агентств, модных интернет-магазинов и блогов. Тема относительно новая, часто обновляется. В отличие от предыдущих вариантов возможна работка как в wpbakery, так и в очень удобном elementor.
Посмотреть демо / Купить шаблон / Заказать разработку
- Для чего подойдет: wordpress, событие, блог, персональный сайт, интернет-магазин, интернет-сервис, приложение, сайт услуг, портфолио, лендинг
- Визуальный конструктор: elementor, wpbakery
- Плагины: woocommerce, slider revolution, advanced custom fields, contact form 7
- Импорт демо-контента: есть, в один клик
- Адаптивность: да, адаптивен для всех устройств
- Особенности: тонкая настройка шапки сайта, меню, подвала и каждого элемента страницы, возможность переключаться между темной и светлой темой, множество шаблонов страниц портфолио, постов, интернет-магазина. Гладкая анимация элементов, большая коллекция шотр-кодов, исходники в Figma. Базовая seo-оптимизация
Гладкая анимация элементов, большая коллекция шотр-кодов, исходники в Figma. Базовая seo-оптимизацияВарианты дизайна темы Ohio
Купить шаблон / Заказать разработку
Шаблон для WordPress / Brook
Brook – красивая, современная и красочная тема для wp. В нее входит более 40 готовых шаблонов для самых популярных сфер деятельности. Их можно использовать «как есть», заменив только текст. Есть варианты с минималистичным дизайном и вертикальным меню. Легкая анимация создает дополнительную динамику.
Посмотреть демо / Купить шаблон / Заказать разработку
- Для чего подойдет: wordpress, агентство, блог, персональный сайт, интернет-магазин, сайт услуг, портфолио, лендинг
- Визуальный конструктор: wpbakery
- Плагины: woocommerce, slider revolution, contact form 7
- Импорт демо-контента: есть, в один клик
- Адаптивность: да, адаптивен для всех устройств
- Особенности: Гладкая анимация элементов, базовая seo-оптимизация, приятный дизайн от минималистичного до яркого, 22 способа вывода страниц порфтолио, 21 шаблон блоговых страниц
Шаблоны WordPress темы Brook
Купить шаблон / Заказать разработку
Шаблон для WordPress / Stockholm
Stockholm – минималистичная wp-тема со 140 вариантами дизайна.
Простота, блоковость, большие изображения и тексты делают ее современной. Она подойдет для всего, что связано с креативом, визуализацией и мобильностью.
Посмотреть демо / Купить шаблон / Заказать разработку
- Для чего подойдет: wordpress, агентство, блог, персональный сайт, интернет-магазин, сайт услуг, портфолио, лендинг
- Визуальный конструктор: wpbakery, elementor
- Плагины: woocommerce, slider revolution, contact form 7, timetable responsive
- Импорт демо-контента: есть, в один клик
- Адаптивность: да, адаптивен для всех устройств
- Особенности: большая коллекция шаблонов внутри, гладкая анимация, крутая прокрутка проектов в портфолио, большие элементы дизайна
Варианты дизайна темы Stockholm
Купить шаблон / Заказать разработку
Шаблон для WordPress / Uncode
Uncode – огромная коллекция сайтов на wordpress, объединенная грамотным дизайном, расположением элементов, шрифтами, текстовыми блоками и, конечно, автором.
В нем есть все для быстрого старта проекта.
Посмотреть дмо / Купить шаблон / Заказать разработку
- Для чего подойдет: wordpress, агентство, блог, персональный сайт, интернет-магазин, сайт услуг, портфолио, лендинг
- Визуальный конструктор: wpbakery
- Плагины: woocommerce, slider revolution, contact form 7,
- Импорт демо-контента: есть, в один клик
- Адаптивность: да, адаптивен для всех устройств
- Особенности: большая коллекция шаблонов и дизайна отдельных элементов, больше 50 вариантов страниц блога, больше 40 вариантов страниц портфолио, кастомизатор шапки сайта и футера.
Дизайн главных страниц Uncode
Купить шаблон / Заказать разработку
Woprdpress-тема Hub
Сочетает в себе и креативную, и деловую подачу. Есть гладкие анимации элементов, красивые переходы. Варианты с вертикальными и горизонтальными меню, для портфолио, блогов и интернет-магазинов. Любая страница имеет тонкие настройки по цвету, изображениям и тексту. Очень модная, свежая, приятная во всех отношения wp-тема.
Посмотреть демо / Купить шаблон / Заказать разработку
- Для чего подойдет: wordpress, интернет-магазин, промо-сайт, портфолио, сайт агентства, сайт услуг, лендинг, приложение, онлайн-сервис
- Визуальный конструктор: модифицированный wpbakery
- Плагины: woocommerce, slider revolution, contact form 7, licquid events, mailchimp
- Импорт демо-контента: есть, в один клик
- Адаптивность: да, адаптивен для всех устройств
- Особенности: более 700 шаблонов в одной теме! Мегаменю, постраничная прокрутка. Действительно качественный и проработанный дизайн каждого шаблона и страницы с залипательным эффектом.
Действительно качественный и проработанный дизайн каждого шаблона и страницы с залипательным эффектом.Варианты дизайна Hub
Купить шаблон / Заказать разработку
Создать сайт на шаблоне просто. Особенно, если вы прочитали статью обо всех подготовительных этапах. Пробуйте. А если лень во всем этом разбираться, то можете заказать разработку через форму ниже.
Помните: для этого контента требуется JavaScript.
Целевая страница для бизнеса от WordPressRiver
- Добавить в избранное
- Добавить в коллекцию
Предварительный просмотр в реальном времени
Выделенные функции (последнее обновление: 25 июня 2022 г.)
- Купите один раз и получите бесплатные пожизненные обновления.
- ELEMENTOR КОНСТРУКТОР СТРАНИЦ № 1 В МИРЕ
- Импортер демонстраций в один клик
Всего одним щелчком мыши вы можете сделать свой сайт похожим на Live Preview. - Пятизвездочная служба поддержки клиентов Наша служба поддержки всегда готова помочь вам в течение одного рабочего дня
- WPML — Полная многоязычная поддержка.
- 16 Demo Home (08 Multi + 08 One page) & 35+ Awesome Inner Pages.
- Бесплатная установка темы Вы можете запросить бесплатную установку темы с демо-импортом после покупки
- Дополнительные демонстрационные страницы + функции.
Aveit — многоцелевая тема WordPress для целевой страницы — это отзывчивая, быстро и легко настраиваемая тема WordPress для целевой страницы современных многоцелевых бизнес-решений, которая включает более 25 страниц и более 12 вариантов домашней страницы.
Aveit — многоцелевая тема WordPress для целевых страниц
- 12+ креативных, модных и уникальных демонстрационных домашних страниц
- 25+ внутренних страниц
- 03 Хорошо продуманный макет страницы блога и отдельной публикации
- Навыки программирования не требуются!
- Redux Framework:
- Мощные параметры темы: Используя параметр темы, вы можете легко изменить многие вещи. Например, логотип, фавикон, заголовок, нижний колонтитул и т. д.
- Импорт демо в один клик: Вы можете легко импортировать демонстрационные данные с помощью импорта демо в один клик. Таким образом, вам не нужно начинать с нуля, просто импортируйте демо-данные, и вы можете настроить сайт.
- Полная отзывчивость: Наша тема также на 100% отзывчива, поэтому она будет хорошо работать на всех смарт-устройствах (смартфонах, планшетах, ПК и настольных компьютерах)
- Контактная форма 7
- Совместимость с WPML
- Хорошо закодированные файлы
- Уникальный, чистый и современный дизайн
- Проверенные коды W3c
- Кроссбраузерная оптимизация
- Фон параллакса
- Пользовательский эффект анимации
- SEO-дружественный код
- Гладкая спираль
- Закрепляемое меню
- Шрифты Google
- Бесплатные значки шрифтов
- Простая настройка
- Анимация CSS3
- Включает библиотеку Aveit Font Awesome
- Отличная поддержка клиентов: Мы заботимся о вашем сайте так же, как и вы, и поможем всем, чем сможем! И многое другое…
Например, логотип, фавикон, заголовок, нижний колонтитул и т. д.Показать больше Показать меньше
Naxos — Тема WordPress целевой страницы приложения от AthenaStudio
- Добавить в избранное
- Добавить в коллекцию
Предварительный просмотр в реальном времени
Naxos — мощная, отзывчивая и удобная для мобильных устройств тема WordPress для демонстрации приложений, созданная на базе Bootstrap.
Любой может использовать этот шаблон для демонстрации любого продукта и настройки функций.
Если вам интересно создать целевую страницу онлайн-маркетинга/бизнеса Naxos — идеальная тема для вас.
Вы можете использовать Naxos как лучший способ представить и продвигать свои стартовые мобильные приложения, приложения SaaS, программное обеспечение, цифровые продукты, даже книги или журналы. Пользователям понравится ваш сайт, потому что он дает им уникальный пользовательский интерфейс (UX) и пользовательский интерфейс (UI).
Включенные функции:
- Полностью Адаптивный дизайн
- Retina готов
- Построено с Начальная загрузка
- HTML5 и CSS3 техники
- 3 стиля домашней страницы
- Полноэкранный фон с одним изображением
- Полноэкранный фон слайд-шоу изображений
- Полноэкранный фон видео Youtube
- 3 формы днища для введения
- Sticky or Static навигации
- Параллакс секций
- Контактная форма 7 Интеграция плагинов
- Ajax PHP Форма подписки с MailChimp API
- Совместимость с WooCommerce с индивидуальным дизайном и корзиной покупок Ajax
- 8 предопределенные цветные темы оформления
- Неограниченное количество цветовых комбинаций с помощью пользовательского стиля
- WPBakery Page Builder конструктор перетаскивания
- Шорткоды для простого дизайна
- Типографика на основе веб-шрифтов Google
- Font Awesome и Иконки Linea
- Поддержка RTL для таких языков, как арабский или иврит
- CSS3 Анимации
- W3C Действительный код
- Перевод готов
- Совместимость с WPML
- Импорт демо в один клик
- Образец Демо-контент
- Дочерняя тема поддержка
- Бесплатно Быстрая поддержка
- Онлайн-документация
Изображения предназначены только для демонстрационных целей и не включены в пакет загрузки.
Список изменений
Версия 1.7 — 18 октября 2022 г.
Обновлены внешние плагины.
Версия 1.6 – 16 августа 2022 г.
Интеграция с WooCommerce Обновлены демо-данные Обновленный файл справки
Версия 1.5 – 31 мая 2022 г.
Исправлена проблема с мобильным меню Исправлена проблема с типографикой Обновлены демо-данные Добавлена опция значка изображения Добавлены скриншоты и пользовательские счетчики клиентов. Исправлена проблема с кнопками «Поделиться». Незначительные корректировки CSS/JS/PHP Обновлены внешние плагины.
Версия 1.4 – 17 февраля 2022 г.
Обновлен стиль страницы 404. Обновлены внешние плагины.
Версия 1.3 – 25 декабря 2021 г.
Обновлены внешние плагины. Обновлен до Bootstrap 5.x Измененный стиль кнопки нижнего колонтитула
Версия 1.2 – 28 ноября 2021 г.