Как сделать раскрывающийся блок в elementor

Добавил пользователь Евгений Кузнецов
Обновлено: 05.10.2024

Создание страницы в удобном и легком в использовании интерфейсе с мгновенной и гибкой настройкой. Пошагово разберем на примере тестовой страницы функциональные возможности конструктора страниц для WordPress – Elementor.

Возможности с Elementor WordPresse

Перед использованием плагина Elementor, необходимо сделать подготовительные работы:

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

Как создать страницу благодарности в Elementor WP

Рассмотрим создание страницы благодарности.

Итак, загрузим изображение в редакторе страниц WordPress и пропишем название страницы. Заходим в

Elementor WordPress: Обзор Визуального Редактора

Конструктор Elementor страниц загрузился, переходим к обзору визуального редактора Елементор WP. Рассмотрим, как выглядит главная страница редактора Elementor.

Более подробно со всеми элементами редактора будем знакомиться в процессе проектирования страницы.

Благодаря конструктору Elementor страниц можно формировать страницу и одновременно видеть, как она выглядит, свернув редактор. Нажимаем на стрелку, и редактор закроется. Повторным нажатием, можно вернуть его обратно. Таким образом, очень удобно работать, так как весь процесс формирования выполняется непосредственно на странице и не надо переходить в режим предварительного просмотра.

Приступаем к проектированию страницы в конструкторе Elementor страниц, функциональная возможность которого позволяет (в процессе создания страницы) отменить или повторить любое Ваше действие. Просто нажимаете Ctrl / Cmd + Z. Или можно посмотреть в списке действий. Переходите в Редакции и смотрите список всех ранее сохраненных версий Вашей страницы.

Настраиваем Макет страницы

Появилось очерченное поле с двумя колонками. Жмем по полю первой колонки и с помощью функциональной

Знакомимся с функциями данных разделов.

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

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

Изображение в Elementor

Переходим ко второму шагу.

И рассмотрим, как установить и настроить картинку/изображение в Elementor.

Как Настроить ИЗОБРАЖЕНИЕ

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

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

открыть в новом окне
или тегом – добавить nofollow

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

Третий шаг

На вкладке «Выравнивание№ задаем расположение текста на странице. Здесь же можно выбрать и цвет текста (№ 4).

П осмотрим, как визуально выглядит страница, которую мы настраиваем. Даже без движения видна выпуклость как картинки, так и текста. А если посмотреть в движении, очень круто получилось!

Еще можно увеличить расстояние между основным текстом и футером. Переходим к четвертому шагу. Установим Разделитель или Интервал.

Возвращаемся в редактор.

Как установить/настроить Интервал/Разделитель в Elementor

Имеет он три раздела:

Содержимое,
Стиль
и расширенные.

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

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

Пятый шаг – кнопка.

Кнопка в Elementor

Рассмотрим, как установить и настроить кнопку в Elementor при создании страницы.

Как Настроить кнопку в Elementor

Итак, настраиваем нужный элемент страницы — кнопка.

Заключение

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

Мы разобрали, как настраиваются базовые элементы редактора страниц Elementor. Надеюсь, все будет хорошо.

WordPress и Elementor: создаем за 15 минут сайт услуг

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Russian (Pусский) translation by Yuri Yuriev (you can also view the original English article)

В предыдущей части этого урока How to Build a WordPress Website With Elementor я показал вам, как настроить веб-сайт WordPress с помощью Elementor. Мы установили необходимые плагины, включая плагин Envato Elements WordPress, а затем использовали набор шаблонов для подготовки простого веб-сайта с четырьмя страницами.

В этой, второй и заключительной части, мы будем настраивать эти страницы. Давайте начнём!

Вспомним: что такое Elementor?

Elementor - это плагин создания страниц для WordPress. Позволяет размечать макеты; добавлять, редактировать и удалять элементы; использовать различные шаблоны для создания сайтов всех видов. Он поставляется как в бесплатной версии, так и в версии Pro, в зависимости от ваших потребностей.

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

Настройка страниц с Elementor

1. Настройка нашего сайта

Начнем с настройки цветов нашего сайта. Мы выберем страницу для редактирования, перейдя на Pages и выбрав домашнюю страницу. Мы создаем новый раздел (для демонстрационных целей) в верхней части страницы, нажимая значок + на вкладке элемента:

Используя нужную опцию, мы выбираем макет из двух столбцов. Затем можем перетащить некоторые виджеты в созданные нами колонки.

Чтобы изменить цвет, перейдите в редактор Elementor Menu> Default Colors и вы увидите цветовую палитру:

Можем выбрать любую из палитр, перечисленных в разделе More Palettes. Изменения будут отражены на странице в реальном времени.

Это глобальные стили, но если требуется редактировать цвета на уровне виджета - как мы это сделаем? Кликните по виду, который вы хотите изменить. Откроется меню слева. Выберите Style, чтобы увидеть настройки цвета.

Любые внесенные изменения не будут затронуты никакими будущими изменениями в глобальных стилях; вы просто переписали их для этого виджета.

Настройка шрифтов

Далее, чтобы редактировать шрифты по всему шаблону, перейдите в Menu > Default Fonts. Вы сможете установить стили для заголовков, основного и выделенного текста. И он работает так же, как и с цветами: сделайте глобальные изменения на весь шаблон или введите виджет, чтобы переопределить эти параметры на его уровне.

2. Последние штрихи

Есть ещё одна или две детали, которые мы хотим изменить, редактируя веб-сайт с Elementor. Например, раздел темы “Twenty Seventeen”, который присутствует на каждой странице, должен идти:

Мы можем сделать это, вернувшись к странице в администраторе и изменив шаблон страницы с Elementor Full Width до Elementor Canvas.

Дублирующие элементы

Четыре из трёх

Нажав на новый четвёртый флип-бокс, вы получите целую кучу опций для замены цвета, содержимого, значков, анимации, фонового изображения, и всё это происходит по щелчку (и ни строчки кода !)

Изменение полей

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

Выбрав заголовок и нажав кнопку edit (значок карандаша), затем вкладку Advanced, мы можем изменить конкретные параметры этого элемента. Здесь я изменю верхнюю границу от -60px до 0. Исправлено.

Изменение фона в разделе

Ниже на странице меню есть фоновое изображение, которое я хотел бы изменить. Это можно сделать, щёлкнув раздел и перейдя на Style.

Мы можем изменить изображение, а затем, перейдя к настройкам Background Overlay, поменяем непрозрачность, местоположение и более сложные параметры, такие как CSS Filters (опять же, не касаясь строки кода).

Использование блоков

Создавая новый раздел, вместо того, чтобы вручную заполнять его столбцами, виджетами и прочим, можно использовать то, что в Elementor называет “Blocks”. Блоки являются многократно используемыми фрагментами контента, которые вы можете выбрать из библиотеки или создать сами.

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

Как только мы внесли изменения в наш блок, правым щелчком по нему можем перейти к Save as Template. Этот блок теперь будет сохранен в библиотеке в разделе My Templates, готовый к повторному использованию на других страницах.

Посмотреть для себя!

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

Возможно вас заинтересует, аналогичный конструктор на Joomla. Доступно бесплатно серия уроков.

БЫСТРЫЙ СТАРТ C ELEMENTOR

Урок 8: WordPress, Elementor — оформляем подвал сайта

Урок 9: WordPress, Elementor — как сделать продающую шапку на сайте

Урок 10: Создаем якорное меню в Elementor / WordPress

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

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

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

Чтобы увидеть это на практике, я возьму пример Bootstrap Carousel. Мы создадим плагин WordPress для пользовательского виджета Elementor. Этот виджет даст вам возможность добавить карусель Bootstrap на свои страницы.

Цель этого руководства – познакомить вас с разработкой виджетов Elementor. Мы собираемся разработать виджет Elementor для Bootstrap Carousel. Используя тот же подход, вы можете создавать свои собственные виджеты.

Создание расширения для Elementor

Внутри нашего плагина создайте файл artisansweb-elementor-add-on .php . Этот файл будет содержать код, который создает расширение Elementor.

Вы получите шаблон для создания расширения в документации Elementor .

Следуя документации, я написал приведенный ниже код, который вы должны добавить в artisansweb-elementor-add-on .php файл.

Я добавил файлы JS и CSS Bootstrap из enqueue_scripts функции. Обратите внимание, я указал путь CDN к этим файлам напрямую. Пользователь может сохранить эти файлы в папке плагинов и включить их, заменив указанный выше путь к CDN.

На этом этапе вы должны увидеть название плагина на странице Plugins-> Installed Plugins.

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

Структура виджета Elementor

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

Добавьте в artisansweb-testimonial-widget .php файл базовую структуру следующим образом.

Все методы, определенные в приведенном выше классе, несут свою ответственность. Вы должны добавить свое имя виджета в метод get_name() , значок виджета войдет внутрь get_icon() , часть внешнего интерфейса будет отображаться из render() метода и так далее. Описания всех методов доступны в их документации.

Залим код для всех методов, кроме render() . Поскольку нам нужно взять ссылку из карусели Bootstrap, мы добавим код для render() функции в более поздней части руководства.

Я использовал элемент управления повторителем Elementor, который позволяет создавать повторяющиеся блоки полей. Поскольку мы создаем карусель, у нее будет несколько полей. Здесь я дал варианты добавления изображения и подписи с помощью элемента управления повторителем.

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

Активируйте плагин и попробуйте отредактировать свою страницу с помощью Elementor. Найдите “Artisansweb Carousel”, добавьте этот виджет на страницу. Вы увидите варианты добавления подписи и изображений, как показано на скриншоте ниже.

Bootstrap Carousel с использованием настраиваемого виджета Elementor

Мы все решили построить карусель с помощью виджета Elementor. Если вы посмотрите документацию Bootstrap carousel, там есть HTML-код для карусели. Я беру в пример карусель с субтитрами. Для этого типа карусели вы должны использовать приведенный ниже HTML.

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

Итак, наш render() метод будет иметь следующий код.

Это оно! Добавьте изображения и подписи, и теперь на вашей странице должна появиться карусель Bootstrap.

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

Надеюсь, вы понимаете, как создать собственный виджет Elementor. Пожалуйста, поделитесь своими мыслями и предложениями в разделе комментариев ниже.

Добрый день. В этом уроке рассматриваются все стандартные элементы Elementor.

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

Рисунок 1 - базовые элементы Elementor

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

Рисунок 2 - элемент "Заголовок"

Что такое индексация страницы и зачем она нужна?

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

Рисунок 3 - текстовый редактор

Рисунок 4 - видео

Рисунок 5 - кнопка

Рисунок 6 - разделитель

Рисунок 7 - интервал

Рисунок 9 - иконка

Общие элементы Elementor

Сюда входят расширенные наборы элементов, которые обладают большим функционалом, чем базовые. Эти элементы призваны сделать сайт красивым и удобным, рисунок 10.