Введение
Всем привет! С Вами Денис, я подготовил урок по основам конструктора Elementor. Разобрав основы вы поймете как устроен интерфейс и на чем основывается разработка сайта. В данной статье рассматривается построение сайта с помощью секций и колонок.
Видео урок
Знакомство с интерфейсом Elementor
Сейчас перед Вами открыта новая страница в режиме редактирования Elementor. С левой стороны мы видим интерфейс конструктора, а с правой стороны – область для редактирования, которую можно наполнять контентом.
Элементы или витжеты
Настройки сайта и глобальные стили
В верху, нажав на «гамбургер-меню» можно найти и настроить глобальные стили (необходимые цвета, шрифты и так далее). Это очень удобно, так как глобальные настройки позволят сэкономить много времени и задать для всего сайта шрифт и цвет, который будет применен по умолчанию.
Нижняя панель — настройки
Посмотрим на нижнюю панель. Первый пункт – настройки. Здесь отображаются настройки текущей страницы: заголовок, статус (черновик или опубликовано), плюс присутствует пункт на который стоит обратить внимание – макет страницы. Имеется 4 варианта и каждым из них Вы будете пользоваться в зависимости от ситуации.
По умолчанию – это шаблон из с настройками по умолчанию из нашей темы.
Холст Elementor — это полностью чистая страница, без шапки и подвала сайта.
Elementor полная ширина — включает шапку, подвал и содержимое во всю ширину экрана.
Тема — Elementor наследует настройки из темы WordPress .
Нижняя панель — навигатор
Навигатор — поможет вам ориентироваться по странице между секциями колонками и элементами.
Нижняя панель — история
История — здесь можно увидеть все изменения, которые производились с данной страницей и можно легко отменить любое из действий. Можно сравнить с журналом, в который записываются абсолютно все действия, производимые с сайтом.
Нижняя панель — режим адаптивности
Режим адаптивности — очень полезная функция, она поможет Вам создавать сайт сразу для всех типов устройств, а именно десктоп, мобайл и планшет.
Нижняя панель — предпросмотр
И последняя функции в нижней панели это – предпросмотр, нажав на него – откроется новое окно, и Вы сможете увидеть Ваш сайт со всеми изменениями.
Отлично! Теперь предлагаю добавить витжет – заголовок, в чистую область и рассмотреть основные настройки для витжетов. Как мы видим появилось три вкладки «Содержимое», «Стиль» и «Расширенные».
Содержимое витжета
В первой вкладке мы можем поменять содержимое элемента, в данном случае – это текст заголовка. Можем сделать заголовок – ссылкой ведущей на другую страницу или на секцию. Добавить HTML-тег для SEO-оптимизации, а также выровнять элемент.
Стиль витжета
Во второй вкладке можно настроить стиль элемента: цвет, типографику — семейство и размер шрифта, насыщенность, преобразование, стиль и оформление. Плюс можно задать расстояние между строками и расстояние между символами. Ниже настраиваем – тень текста. Дополнительно можно сделать режим наложения.
Расширенные настройки витжета
Третья вкладка с расширенными настройками, не самая простая, сейчас расскажу самое необходимое, далее на практике освоим все остальные настройки. Сперва можно настроить внешние и внутренние отступы элемента. Настроить позиционирование – абсолютное или фиксированное.
И указать элементу видимость (скрыть или показать) для разных устройств в режиме адаптивности.
Секции, колонки и витжеты
Это были настройки для витжетов. Теперь поговорим об основах сайтостроения на Elementor. Есть три кита, на чем базируется разработка сайтов – первое это секции, второе – это колонки и третье – это витжеты которые Вы уже видели.
Секции – это большие блоки нашего сайта внутри которых располагаются – колонки с контентом. В качестве контента, как Вы уже поняли мы всегда используем витжеты.
Секции и колонки – также как и витжеты имеют свои настройки. Если мы кликнем на секцию – то откроется меню с настройками именно для секции. Если выберем колонки – то увидим меню для колонок. Настройки для секций и колонок – довольно простые и мы разберем их в ходе практических занятий.
Как мы видим на изображении — присутствует секция, внутри которой колонка, внутри которой содержатся витжеты с контентом. Каждый элемент на странице при наведении курсора подсвечивается и если нажать на него, то в панели слева откроется окно, в котором мы можем вносить изменения.
Совет на будущее: смотря на дизайн сайта, который вы будете верстать с помощью Elementor, всегда выстраивайте структуру, что будет секцией, сколько будет колонок, какой контент будет в данных колонках, то есть какие витжеты будут использованы. Так Вам будет легче подходить к созданию сайта.
Заключение
Вот и подошел к концу урок, мы прошлись по каждому пункту из меню с настройками и разобрали основы построения сайта с помощью Elementor. Пора переходить к практике, чтобы усвоить как можно лучше полученный материал.