- Включить нумерованное содержание?
- Да
Содержание
Elementor — это многофункциональный конструктор страниц на WordPress, был разработан в 2016 году. На сегодняшний день это самый популярный инструмент в нише (количество активных установок — более 10 миллионов).
В сегодняшнем материале мы вкратце расскажем об основных возможностях Elementor и рассмотрим фишки, которые доступные в его бесплатном функционале.
Главная страница сайта elementor.com
Материал с канала: Traffic Cardinal
Плюс ко всему, инструмент имеет собственную базу из уже готовых бесплатных шаблонов страниц на любой вкус, которые вы можете добавить на свой сайт всего в пару кликов.
Выбор типа макета страницы в Elementor
Flexbox и CSS Grid пришли на смену популярному ранее float-подходу и на сегодняшний день поддерживаются всеми современными браузерами.
Так в чем же разница между этими двумя подходами и можно ли их совмещать?
Если углубляться в современные стандарты верстки, то Grid (сетку) лучше всего использовать для позиционирования основных повторяющихся элементов сайта (например, блоков с контентом). Flex подойдет для выравнивания различных меню, списков и т. д.
Совмещать разные подходы при верстке страницы — нормальная практика, но необязательная. В реальности вы можете успешно верстать гибкие и адаптивные страницы, используя лишь одну из вышеописанных технологий.
Подробно о том, как работают Flexbox и Grid CSS, можно посмотреть вот в этом видео.
К сожалению, в бесплатной версии Elementor количество таких виджетов ограничено. Но выход все же есть — проблема решается установкой сторонних дополнений, которые покрывают большую часть платного функционала. Из популярных — это Essential Addons for Elementor, ElementsKit Elementor addons и Premium Addons for Elementor.
Бесплатная версия Elementor включает в себя около 30 виджетов:
Настройки контейнера в Elementor
Пример настройки виджета в Elementor
Теперь давайте попробуем создать что-то похожее на лендинг максимально быстро, имея при этом минимум опыта работы с Elementor и веб-дизайном в целом.
Выбор структуры flex-контейнера
В нем будет содержаться следующие элементы:
Настройки фонового изображения для контейнера
Теперь методом перетаскивания по очереди отправляем виджеты «Заголовок» и «Кнопка» в левый дочерний блок нашего flex-контейнера.
Перетаскивание элементов во flex-контейнер
Далее зададим позиционирование так, чтобы кнопка находилась под заголовком и оба эти элемента располагались по центру блока. Для этого необходимо выделить сам контейнер, нажав на серый квадратик в его левом верхнем углу, зайти во вкладку «Макет» и выбрать следующие настройки:
Настройки позиционирования элементов внутри дочернего блока flex-контейнера
Установим минимальную высоту общего контейнера так, чтобы фон и элементы внутри контейнера отображались корректно. Для этого жмем «Редактировать Контейнер», заходим во вкладку «Макет» и выставляем минимальную высоту в 550 пикселей.
Настройки минимальной высоты flex-контейнера
В конце зададим стили для внутренних элементов: типографика, тени, отступы и отдельно для кнопки — пульсирующий эффект при наведении.
Стоит отметить, что настройки стилей для отдельных элементов довольно объемны, но при этом просты и интуитивно понятны. Разберется даже новичок, поэтому выводить их отдельным скрином не имеет смысла.
Получаем вот такой результат:
Готовый header
В первый блок добавляем изображение с товаром:
Добавление изображения товара
Далее нам придется прибегнуть помощи к стороннего дополнения для Elementor: устанавливаем плагин Premium Addons for Elementor и заимствуем у него виджет «Таблица цен».
Виджет «Таблица цен»
Выравниваем блоки по центру и настраиваем стили для таблицы цен.
Также Elementor позволяет добавлять различного вида разделители для блоков: жмем «Редактировать контейнер» и переходим во вкладку «Стили». Затем находим раздел «Разделитель секции».
Настройки разделителя секций
Здесь можно выбрать тип разделителя и задать для него стили.
Теперь мы справились с блоком товара и можем посмотреть, что же у нас получилось:
Готовый блок «Товар»
Так как отзывы — это повторяющиеся элементы контента, используем сетку с тремя секциями. Далее находим через поиск виджет «Отзыв» от Premium Addons и перетаскиваем его в каждую секцию.
Далее добавляем фото рандомных людей, придумываем имена, пишем фейковый отзыв (или используем Lorem Ipsum). В конце задаем стили, выше добавляем заголовок и смотрим, что получилось:
Готовый блок «Отзывы»
Сперва создаем заголовок для счетчика, затем добавляем сам счетчик от все того же плагина Premium Addons for Elementor. Задаем стили и запускаем:
Счетчик обратного отсчета
Финальная версия landing-page на Elementor
Теперь рассмотрим основные преимущества Elementor:
Ну и никогда не помешает познать нейронки для 18+: Обзор лучших нейронок для создания 18+ контента
Еще один вопрос, который будоражит публику: как скоро Elementor и другие конструкторы сайтов станут неактуальными? Действительно, мы живем в век искусственного интеллекта. ИИ развивается очень быстро и способен в любой момент заменить тот или иной инструмент. Тем не менее, десятки миллионов человек по-прежнему успешно используют конструкторы сайтов в своей работе и о доминировании искусственного интеллекта пока говорить рано.
Используете ли вы Elementor в своей работе? Обязательно делитесь личным опытом в комментариях. Всем удачи!
В сегодняшнем материале мы вкратце расскажем об основных возможностях Elementor и рассмотрим фишки, которые доступные в его бесплатном функционале.
![Главная страница сайта elementor.com Главная страница сайта elementor.com](/proxy.php?image=https%3A%2F%2Ftrafficcardinal.com%2Fuploads%2Fimages%2Fpost%2Fa44%2F44e%2Fa4444e723df4d48699b5ff6052bd0988ec2f7a1f.png%3F1721893909&hash=85c66664ecfe5b63cfb6d39b57986ed3)
Главная страница сайта elementor.com
Материал с канала: Traffic Cardinal
Принцип работы Elementor
Говоря простым языком, Elementor позволяет верстать страницы при помощи простого перетаскивания элементов. Минимальные знания HTML и CSS, несомненно, будут плюсом, но на первом этапе можно обойтись и без них. Elementor не требует от пользователя какого-либо вмешательства в код.Плюс ко всему, инструмент имеет собственную базу из уже готовых бесплатных шаблонов страниц на любой вкус, которые вы можете добавить на свой сайт всего в пару кликов.
Макет страницы
Работа с Elementor начинается с выбора одного из двух CSS-подходов позиционирования элементов на странице: Flexbox и Grid (сетка).![Выбор типа макета страницы в Elementor Выбор типа макета страницы в Elementor](/proxy.php?image=https%3A%2F%2Ftrafficcardinal.com%2Fuploads%2Fimages%2Fpost%2F3d1%2Fc79%2F3d1c795faf670e0f3cac1f8dcf457a4fabf270a0.png%3F1721893909&hash=e53f878849223addb792cf3427ba2e71)
Выбор типа макета страницы в Elementor
Flexbox и CSS Grid пришли на смену популярному ранее float-подходу и на сегодняшний день поддерживаются всеми современными браузерами.
Так в чем же разница между этими двумя подходами и можно ли их совмещать?
Если углубляться в современные стандарты верстки, то Grid (сетку) лучше всего использовать для позиционирования основных повторяющихся элементов сайта (например, блоков с контентом). Flex подойдет для выравнивания различных меню, списков и т. д.
Совмещать разные подходы при верстке страницы — нормальная практика, но необязательная. В реальности вы можете успешно верстать гибкие и адаптивные страницы, используя лишь одну из вышеописанных технологий.
Подробно о том, как работают Flexbox и Grid CSS, можно посмотреть вот в этом видео.
Элементы страницы
Построение структуры макета страницы — это лишь первый шаг. Далее нам необходимо наполнить сайт различными элементами, которые сделают его более интерактивным и информативным. И здесь Elementor снова выручает: плагин включает в себя целый набор из различных виджетов, которые мы можем размещать на страницах своего сайта и настраивать на собственный вкус.К сожалению, в бесплатной версии Elementor количество таких виджетов ограничено. Но выход все же есть — проблема решается установкой сторонних дополнений, которые покрывают большую часть платного функционала. Из популярных — это Essential Addons for Elementor, ElementsKit Elementor addons и Premium Addons for Elementor.
Бесплатная версия Elementor включает в себя около 30 виджетов:
Настройки макета и элементов
Elementor позволяет производить детальные настройки как для отдельных контейнеров, так и для виджетов.Для контейнеров
- Настройки макета;
- настройки стилей;
- расширенные настройки.
Настройки контейнера в Elementor
Для элементов
- Настройки содержимого (у каждого виджета они разные);
- настройки стилей;
- расширенные настройки.
Пример настройки виджета в Elementor
Немного практики
Elementor — это очень сильный инструмент, для идеального изучения которого все же необходимо потратить некоторое время. При этом он имеет очень дружелюбный интерфейс, к которому быстро привыкаешь. Благодаря этому процесс изучения становится приятным и эффективным.Теперь давайте попробуем создать что-то похожее на лендинг максимально быстро, имея при этом минимум опыта работы с Elementor и веб-дизайном в целом.
Хэдер
За основу шапки нашего лендинга мы возьмем flex-контейнер с двумя дочерними блоками.Выбор структуры flex-контейнера
В нем будет содержаться следующие элементы:
- фоновое изображение;
- заголовок;
- кнопка «Заказать».
![Настройки фонового изображения для контейнера Настройки фонового изображения для контейнера](/proxy.php?image=https%3A%2F%2Ftrafficcardinal.com%2Fuploads%2Fimages%2Fpost%2Ffde%2F471%2Ffde471e411414b1bdba408e18b205d4cf7db5625.png%3F1721893909&hash=b999d25db8bb80262ffed326d644d725)
Настройки фонового изображения для контейнера
Теперь методом перетаскивания по очереди отправляем виджеты «Заголовок» и «Кнопка» в левый дочерний блок нашего flex-контейнера.
![Перетаскивание элементов во flex-контейнер Перетаскивание элементов во flex-контейнер](/proxy.php?image=https%3A%2F%2Ftrafficcardinal.com%2Fuploads%2Fimages%2Fpost%2F672%2F6c1%2F6726c10275620261645826c3ca16509ca9e950c3.png%3F1721893909&hash=85e3859a6df75011b1b3b78c32087116)
Перетаскивание элементов во flex-контейнер
Далее зададим позиционирование так, чтобы кнопка находилась под заголовком и оба эти элемента располагались по центру блока. Для этого необходимо выделить сам контейнер, нажав на серый квадратик в его левом верхнем углу, зайти во вкладку «Макет» и выбрать следующие настройки:
![Настройки позиционирования элементов внутри дочернего блока flex-контейнера Настройки позиционирования элементов внутри дочернего блока flex-контейнера](/proxy.php?image=https%3A%2F%2Ftrafficcardinal.com%2Fuploads%2Fimages%2Fpost%2F61a%2F0a1%2F61a0a13b94f00b8a60303436aed1ac1aad066476.png%3F1721893909&hash=9c56918e64f76ca7bae1fd51a7d2538e)
Настройки позиционирования элементов внутри дочернего блока flex-контейнера
Установим минимальную высоту общего контейнера так, чтобы фон и элементы внутри контейнера отображались корректно. Для этого жмем «Редактировать Контейнер», заходим во вкладку «Макет» и выставляем минимальную высоту в 550 пикселей.
![Настройки минимальной высоты flex-контейнера Настройки минимальной высоты flex-контейнера](/proxy.php?image=https%3A%2F%2Ftrafficcardinal.com%2Fuploads%2Fimages%2Fpost%2Fa00%2F0b8%2Fa000b853ba788ebed0b1296f2585aaada27b0807.png%3F1721893909&hash=9412aec28a3be46439cda548d307f735)
Настройки минимальной высоты flex-контейнера
В конце зададим стили для внутренних элементов: типографика, тени, отступы и отдельно для кнопки — пульсирующий эффект при наведении.
Стоит отметить, что настройки стилей для отдельных элементов довольно объемны, но при этом просты и интуитивно понятны. Разберется даже новичок, поэтому выводить их отдельным скрином не имеет смысла.
Получаем вот такой результат:
![Готовый header Готовый header](/proxy.php?image=https%3A%2F%2Ftrafficcardinal.com%2Fuploads%2Fimages%2Fpost%2F349%2Fddc%2F349ddc453086277cc6733653a208492369000e29.png%3F1721893909&hash=583337bab44413f32c61a7b3a1cd4979)
Готовый header
Товар
Как и в случае с шапкой сайта, создаем flex-контейнер с двумя дочерними блоками.В первый блок добавляем изображение с товаром:
![Добавление изображения товара Добавление изображения товара](/proxy.php?image=https%3A%2F%2Ftrafficcardinal.com%2Fuploads%2Fimages%2Fpost%2Fd8d%2F27b%2Fd8d27bdf46b1323dac22c590de4dd745d6b2a142.png%3F1721893909&hash=1795ad667821ac1a4b9b8c87d48d6785)
Добавление изображения товара
Далее нам придется прибегнуть помощи к стороннего дополнения для Elementor: устанавливаем плагин Premium Addons for Elementor и заимствуем у него виджет «Таблица цен».
![Виджет «Таблица цен» Виджет «Таблица цен»](/proxy.php?image=https%3A%2F%2Ftrafficcardinal.com%2Fuploads%2Fimages%2Fpost%2F1ab%2F397%2F1ab39747c5ade2a65e922562e4d078d2d141b7c4.png%3F1721893909&hash=be015379ba1c3bde299b01120cd56c96)
Виджет «Таблица цен»
Выравниваем блоки по центру и настраиваем стили для таблицы цен.
Также Elementor позволяет добавлять различного вида разделители для блоков: жмем «Редактировать контейнер» и переходим во вкладку «Стили». Затем находим раздел «Разделитель секции».
![Настройки разделителя секций Настройки разделителя секций](/proxy.php?image=https%3A%2F%2Ftrafficcardinal.com%2Fuploads%2Fimages%2Fpost%2F5b9%2F90e%2F5b990e4161cc5261dadc9ee045a28c85927b6786.png%3F1721893909&hash=6d06093692e04aaab9699ac78cb04c80)
Настройки разделителя секций
Здесь можно выбрать тип разделителя и задать для него стили.
Теперь мы справились с блоком товара и можем посмотреть, что же у нас получилось:
![Готовый блок «Товар» Готовый блок «Товар»](/proxy.php?image=https%3A%2F%2Ftrafficcardinal.com%2Fuploads%2Fimages%2Fpost%2Fa8c%2F4f9%2Fa8c4f97b5b5130fb672cae780da67de325159e5b.png%3F1721893909&hash=e8c230ce0054b6393a638e78fad0e74b)
Готовый блок «Товар»
Отзывы
И снова обращаемся за помощью к плагину Premium Addons for Elementor — в этот раз нам понадобится виджет с отзывами.Так как отзывы — это повторяющиеся элементы контента, используем сетку с тремя секциями. Далее находим через поиск виджет «Отзыв» от Premium Addons и перетаскиваем его в каждую секцию.
Далее добавляем фото рандомных людей, придумываем имена, пишем фейковый отзыв (или используем Lorem Ipsum). В конце задаем стили, выше добавляем заголовок и смотрим, что получилось:
![Готовый блок «Отзывы» Готовый блок «Отзывы»](/proxy.php?image=https%3A%2F%2Ftrafficcardinal.com%2Fuploads%2Fimages%2Fpost%2F2e8%2Fc04%2F2e8c0468e617df38cc5d3ad7d047ccac2535eadb.png%3F1721893909&hash=86a04a11d0ce1bb1d24a01fea5b644ff)
Готовый блок «Отзывы»
Счетчик окончания акции
Ну и финальным штрихом добавим триггерный счетчик, сигнализирующий о скором окончании акции на товар.Сперва создаем заголовок для счетчика, затем добавляем сам счетчик от все того же плагина Premium Addons for Elementor. Задаем стили и запускаем:
![Счетчик обратного отсчета Счетчик обратного отсчета](/proxy.php?image=https%3A%2F%2Ftrafficcardinal.com%2Fuploads%2Fimages%2Fpost%2Fac5%2Fa8f%2Fac5a8fe9b51ea04c6295d6c50ab94e907de13195.png%3F1721893909&hash=20134f18436f0d94e6b2fde530b7ddd7)
Счетчик обратного отсчета
Конечный результат
Используя преимущественно стандартный функционал Elementor и потратив около 25 минут времени, нам удалось получить вот такой результат:![Финальная версия landing-page на Elementor Финальная версия landing-page на Elementor](/proxy.php?image=https%3A%2F%2Ftrafficcardinal.com%2Fuploads%2Fimages%2Fpost%2F1ce%2Ff48%2F1cef4868c1a13e6b893788cae0b53fdd2b33bde8.png%3F1721893909&hash=8a9669e94b8d8357190154bdac8783ec)
Финальная версия landing-page на Elementor
Итог
Elementor — это действительно годный конструктор, при помощи которого вы сможете максимально быстро сверстать страницу практически любой сложности, потратив минимум времени. На сегодняшний день это, наверное, лучший инструмент среди конкурентов.Теперь рассмотрим основные преимущества Elementor:
- Прост в освоении, начать верстать качественные страницы можно уже через несколько дней;
- легко запоминающийся интерфейс;
- отсутствие многих виджетов в бесплатной версии компенсируется сторонними плагинами;
- возможность создавать страницы и сайты с любой структурой;
- возможность адаптировать страницу отдельно под мобильные и десктопные устройства.
Ну и никогда не помешает познать нейронки для 18+: Обзор лучших нейронок для создания 18+ контента
Еще один вопрос, который будоражит публику: как скоро Elementor и другие конструкторы сайтов станут неактуальными? Действительно, мы живем в век искусственного интеллекта. ИИ развивается очень быстро и способен в любой момент заменить тот или иной инструмент. Тем не менее, десятки миллионов человек по-прежнему успешно используют конструкторы сайтов в своей работе и о доминировании искусственного интеллекта пока говорить рано.
Используете ли вы Elementor в своей работе? Обязательно делитесь личным опытом в комментариях. Всем удачи!