7 ноября, 2020

Общие настройки виджетов Elementor

Хоть Elementor и включает в себя большое количество разноплановых виджетов, большинству из них присущи общие настройки.

Давайте рассмотрим их более подробно.

Фон.

Здесь устанавливается фон: цветом, изображением, видео и др.

Тип фона.


Предусмотрена установка четырех типов фона:

  • классический;
  • градиентный;
  • видео;
  • слайдшоу.
Фон. Классический.

Классический фон предусматривает заливку цветом и установку картинки.

Цвет.

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

Выбор предустановленного цвета
Выбор цвета в палитре

Первые четыре глобальных цвета являются системными и их нельзя удалить. Другие цвета могут быть изменены при помощи все той же палитры цветов или удалены.

Управление глобальными цветами доступно по клику на иконке «шестеренки» справа.

Настройки глобальных цветов

Или в настройках сайта.

1
2
3

Добавить цвет в палитру можно нажав значок ‘ + ‘ в правом верхнем углу.

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

Чтобы сбросить цвет в палитре, нужно нажать кнопку сброса.

Добавление изображения в разделе Тип Фона имеет больший приоритет, чем заливка цветом, т. е., при установке картинки после выбора заливки, секция зальется картинкой. При удалении картинки секция зальется ранее установленным цветом.

Изображение.

Изображение устанавливается из библиотеки WordPress, или динамически. (Работу с динамическим контентом мы рассмотрим позже в отдельной статье). Послу выбора изображения, отобразится его миниатюра.

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

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

Их всего четыре:

  • позиция;
  • привязка;
  • повтор;
  • размер.
Позиция.

Устанавливает фоновое изображение внутри относительно оси X и оси Y. Существует как предустановленные варианты, так и произвольное позиционирование.

Предустановленное позиционирование
Произвольное позиционирование
Привязка.

Здесь включается или отключается прокрутка фонового изображения.

Секция. Стиль. Фон. Изображение. Привязка
Прокрутка фонового изображения. Фон прокручивается вместе с секцией.
Закрепление фонового изображения. Фон остается на месте при прокрутке страницы.
Повтор.

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

Покажем наглядно.

По умолчанию
Не повторять
Повтор по горизонтали
Повтор по вертикали

По умолчанию небольшие изображения устанавливаются в режиме Повтор.

Данные настройки очень удобны при установке бесшовных текстур.

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

Бесшовная текстура
Повтор бесшовной структуры. Небольшая картинка заполняет всю секцию без швов.

Эффект прокрутки.

Данные пункты позволяют настраивать эффекты поведения фона при прокрутке страницы или при взаимодействии с «компьютерной мышкой».

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

Фон градиентный.

Позволяет установить фон с переходом от одного цвета к другому, так называемый градиент.

Цвет градиента.

В данном варианте фона необходимо выбрать два цвета, настроить положение, тип и угол поворота градиента. Рассмотрим настройки более подробно.

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

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

Тип.

Поддерживается два типа градиента:

  • линейный;
  • радиальный.

Линейный градиент, как видно из названия, создает заливку фона из нескольких цветов с плавным переходом вдоль прямой линии.

Угол.

Данная настройка позволяет установить угол наклона прямой линии в пределах 360 градусов. Применяется только к линейному градиенту.

Линейный градиент

Радиальный градиент создает заливку относительно точки в разные стороны, а не вдоль прямой линии.

Радиальный градиент

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

Позиция.

Позиция регулирует положение точки, относительно которой градиент расходится:

  • центр-центр;
  • центр-лево;
  • центр-право;
  • верх-центр;
  • верх-лево;
  • верх-право;
  • низ-центр;
  • низ-лево;
  • низ-право.
Видео-фон.

Данная настройка отвечает на назначение в качестве фона секции видео-файла.

Ссылка на видео.

Устанавливает ссылку на видео-фон:

  • youtube;
  • vimeo;
  • ссылка на фал на локальном хостинге.

Сами разработчики рекомендуют использовать для видеофайлов расширение mp4.

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

Время начала.

Устанавливает время, с которого видео-фон начнет воспроизводиться.

Время окончания.

Устанавливает время окончания воспроизведения фонового видео-файла.

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

Проиграть единожды.

Видео проиграется только один раз.

Проиграть на мобильных.

Разрешает проигрывание видео на мобильных (не злоупотребляйте данной настройкой, так как она очень сильно влияет на трафик через мобильные сети).

Резервный фон.

Устанавливает фоновое изображение на секцию, если по каким либо причинам видео-фон не грузится.

Слайд-шоу.

Устанавливает на фон слайд-шоу из картинок.

Изображения выбираются из стандартной медиа-библиотеки WordPress.

Дополнительно настраивается длительность и тип перехода, зацикливание пролистывания и положение слайдов.

Эффект Кена Бернса.

Обратите внимание на данную настройку. Она позволяет создать впечатление, что камера перемещается по объекту (панорамирование) или удаляется и приближается к нему (масштабирование).

Перекрытие фона.

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

Прозрачность.

Настройки аналогичны настройкам основного фона, кроме одного — появилась настройка прозрачности, которая отвечает за прозрачность перекрывающего фона.

Пример.

Изображение для основного фона
Изображение для перекрывающего фона
Результат перекрытия одного фона другим

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

Режим наложения.

Позволяет выбрать готовые фильтры наложения (пользуюсь редко).

Граница.

В данном разделе находятся настройки, связанные с границей (обводкой, border’ом) секции.

Сюда входят:

  • тип границы;
  • скругление углов;
  • тень объекта (в данном случае секции)

Тип границы.

Элементор поддерживает создание границ пяти (5) типов, хотя в html их немного больше:

  • сплошная;
  • двойная;
  • точечный пунктир;
  • штриховой пунктир;
  • выпуклость.

Покажем внешний вид каждой границы на примере внутренней секции, настройки границ которой идентичны основной секции, колонкам и всем виджетам Elementor.

Названия типов границ говорят сами за себя, поэтому что-либо разъяснять подробнее не имеет смысла.

Толщина.

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

По умолчанию толщина границы устанавливается на всю секцию путем ввода числового значения в любом поле. Чтобы установить границу для какой-то определенной стороны секции, нужно кликнуть на значке «цепочки» справа (обозначает связанные настройки, т. е. настройки одного параметра автоматически применяются ко всем параметрам), что даст возможность редактировать толщину границы для нужной стороны по отдельности.

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

Толщина границы для PC
Толщина границы для Tablet

Цвет.

Цвет границы устанавливается через хорошо знакомую палитру цветов Elementor.

Скругление углов.

Данная настройка устанавливает css свойство border-radius, отвечающее за скругление углов.

Скругление можно установить как в абсолютных, так и в относительных единицах:

  • в процентах %;
  • в пикселях px.

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

Имейте ввиду, что если не указать толщину и цвет границы, то вы не увидите скругления углов

Тень объекта.

Данный пункт отвечает за css-свойство box-shadow, т. е. отбрасывание тени секцией, колонкой или виджетом Elementor.

Тень объекта включает следующие настройки:

  • цвет;
  • горизонтальное смещение;
  • вертикальное смещение;
  • размытие;
  • размах;
  • положение.

Регулируется каждая из них при помощи горизонтальных ползунков. Все настройки, кроме Размытия, регулируются в пределах от -100 до +100.

Рассмотрим каждую настройку отдельно.

Цвет.

Устанавливается при помощи стандартной палитры Elementor.

Горизонтальное смещение (x-offset).

Устанавливает смещение тени по оси X относительно элемента. Можно устанавливать отрицательное и положительное значение.

Горизонтальное смещение тени положительное
Горизонтальное смещение тени отрицательное
Вертикальное смещение (y-offset).

Устанавливает смещение тени относительно оси Y. Положительное значение смещает тень вниз, отрицательное — вверх.

Вертикальное смещение тени положительное
Вертикальное смещение тени отрицательное
Размытие (blur).

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

Радиус размытия 10px
Радиус размытия 56px

Размах.

Устанавливает значение, на которое тень растягивается. Поддерживаются отрицательные и положительные значения.

Размах 10px
Размах 25px

Положение.

Устанавливает параметры отображения тени:

  • внутренняя;
  • внешняя.
Внешняя тень
Внутренняя тень

Наглядные настройки тени в элементоре на изображении с сайта html5book.ru ниже.

Адаптивность

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

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

Для этого, у колонки с текстом мы ставим переключатель «Скрывать на планшете», а для колонки с текстом ставим переключатель «Скрывать на телефоне». Результат представлен на изображении ниже.

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

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

Атрибуты.

Уверен, что большинство пользователей Elementor, не понимают, для чего нужна опция Elemenor — Произвольные атрибуты.

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

Итак, каждый html-элемент имеет свои атрибуты. Возможность установки некоторых из них есть в обычных настройках виджетов элементора (например для ссылок в Elementor можно указать атрибут target = «_blank», который откроет эту ссылку на новой странице браузера), но многих нет. Для этого разработчики добавили поле, в котором есть возможность прописать дополнительные атрибуты элементов.

Каждый атрибут включает ключ и значение, которые разделяются символом «|» (ключ|значение). Каждый атрибут пишется с отдельной строки.

Опять же, вернемся к примеры ниже. Допустим, для текстового блока мы хотим добавить простой атрибут title. Для этого в поле произвольных атрибутов пропишем:

title|Рыба текст

Присваиваем текстовому блоку произвольный атрибут title

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

При наведении мышки на текст, всплывает надпись со значением атрибута, в нашем случае «Рыба текст»

Обязательно ознакомьтесь с атрибутами html-элементов. Они делятся на универсальные и глобальные. Это обязательно пригодится Вам для более удобной работы с Elementor в будущем.

Пользовательские CSS.

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

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

Например, чтобы покрасить фон секции, нужно прописать следующее свойство:

selector{
    background-color: yellow;
} 

Мы изменили фон секции кодом лишь для примера, так как фон можно изменить через стандартные настройки Elementor на вкладке «Стиль».

Результат на изображении ниже.

При использовании selector (отдельно или с дочерними селекторами) стили применятся только к элементу, которому вы присвоили selector. При использовании других css-id и css-классов без использования selector, все свойства, применимые к этим классам и id применятся глобально для всех элементов на странице, которые будут иметь такие же классы и id.

Маска.

Данная настройка (маскирование в css) стала доступна только с выходом Elementor v 3.2. , хотя применяется при работе с svg-графикой очень давно.

Маскирование позволяет отсечь часть элемента по определенному шаблону. Шаблоны лучше всего использовать векторные, так как они позволяют использовать маски любой формы без ограничений.

Маска в Elementor доступна для всех виджетов, кроме секции, виджета внутренней секции и колонок.

Ну и как всегда, лучше объясним маскирование на примере.

Давайте добавим фон заголовку. Чтобы фон был лучше виден, добавим заголовку внутренние отступы по 200px сверху и снизу.

Включим маскирование.

Настройки маски включают в себя следующие значения:

  • форма;
  • размер;
  • позиционирование;
  • повтор.

Форма.

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

Всего в Элементоре доступны несколько значений стандартных масок:

  • круг;
  • цветок;
  • набросок;
  • треугольник;
  • клякса;
  • шестиугольник;
  • произвольно (неограниченное количество произвольных масок)

Как видите, теперь стало возможным делать интересные по дизайну элементы, но еще большие возможности открывает использование произвольных масок.

При выборе произвольной маски нам откроется поле для вставки маски — векторной или растровой. Советуем добавлять маски в svg-формате.

Добавим произвольные векторные маски с сайта flaticon.com

Получим следующий результат.

Думаю, что такое маскирование вы усвоили.

Продолжим.

Размер.

Включает следующие значения размера:

  • вписать;
  • заливка;
  • произвольно.

Поддерживается адаптивность, т. е. разные значения для ПК, планшета и смартфона.

Вписать.

Масштабирует маску с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

Заливка.

Масштабирует маску с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.

Произвольно.

Позволяет изменять масштаб маски вручную в px, em, % или vm.

При активации значения «Произвольно» появляется пункт регулировки масштабирования маски.

Масштаб.

Значение масштабирования можно изменить передвижением горизонтального ползунка или ввести вручную в поле справа.

Поддерживается адаптивность, т. е. разные значения для ПК, планшета и смартфона.

Позиционирование.

Позиционирует маску относительно центра блока, к которому применена маска.

Поддерживается 10 значений:

  • центр-центр;
  • центр-лево;
  • центр-право;
  • верх-центр;
  • верх-лево;
  • верх-право;
  • низ-центр;
  • низ-лево;
  • низ-право;
  • произвольно.

При выборе произвольного значения появляются настройки позиционирования по оси-y и по оси-x. Значения устанавливаются в px, em, % или vm при помощи ползунка или вводом значений с клавиатуры вручную. Адаптивность так же поддерживается.

Повтор.

Данная настройка определяет то, как будет повторяться шаблон маски внутри блока.

Для примера возьмем маску с небольшим значением масштабирования, которую использовали выше.

Теперь включим повтор.

Как видите, маска заполнила весь блок по ширине и высоте.

Доступны несколько значений повтора:

  • не повторять;
  • повтор;
  • повтор горизонталь;
  • повтор вертикаль;
  • круглый;
  • расстояние.

Позиционирование.

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

Включает в себя настройки:

  • ширина;
  • вертикальное выравнивание (пункт отображается при активации настроек ширины, кроме значения по умолчанию);
  • произвольная ширина (пункт появляется при выборе значения ширины «Произвольно»);
  • позиционирование

Ширина.

Настройки ширины предполагают следующие варианты:

  • по умолчанию;
  • во всю ширину (100%);
  • друг за другом (auto);
  • произвольно.

По умолчанию заголовок занимает всю ширину блока, в котором он находится.

Во всю ширину.

Виджет заголовка занимает 100% ширины секции.

Друг за другом.

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

Рассмотрим эту настройку на наглядном примере.

Допустим, нужно разместить на странице несколько иконок в один ряд.

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

Если мы установим в настройках ширины «Друг за другом», то виджет иконки займет ширину только по значению ширины своего внутреннего содержимого.

Следовательно, нам останется установить ширину «Друг за другом» у остальных иконок и они выстроятся в одну линию.

Виджеты выстроились в одну линию друг за другом.

Настройка ширины «Друг за другом» применима ко всем виджетам Elementor.

Произвольно.

Устанавливает произвольную ширину виджета в px, % и vm. Значения ширины можно установить перемещением ползунка слева или ввести цифровое значение в поле справа.

Вертикальное выравнивание.

Допускаются следующие значения:

  • начало;
  • центр;
  • конец.

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

Вертикальное выравнивание по верхнему краю, по центру и по нижнему краю

Позиционирование.

Отвечает за размещение элемента на странице по оси-x и по оси-y.

В Элементоре существуют 3 вида позиционирования элементов:

  • по умолчанию;
  • абсолютное;
  • фиксированное.
По умолчанию.

Позиционирует элемент относительно его первоначального расположения.

Абсолютное позиционирование.

При активации отображаются дополнительные настройки позиционирования:

  • горизонтальная ориентация;
  • смещение (для горизонтальной ориентации);
  • вертикальная ориентация;
  • смещение (для вертикальной ориентации)

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

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

Элемент с абсолютным позиционированием возможно разместить в любом месте в пределах страницы.

Перемещать элемент можно как при помощи компьютерной мыши, так и при помощи изменения горизонтальной, вертикальной ориентации, и путем изменения смещения при помощи горизонтальных ползунков. Значения устанавливаются в px, %, vm и vh.

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

Фиксированное позиционирование.

При активации отображаются дополнительные настройки позиционирования:

  • горизонтальная ориентация;
  • смещение (для горизонтальной ориентации);
  • вертикальная ориентация;
  • смещение (для вертикальной ориентации)

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

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

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

Адаптивность.

0

Напишите нам!

Мы постараемся ответить Вам в ближайшее время!