22 мая, 2021

Маска в Elementor. Вкладка Расширенные. Общие настройки виджетов Elementor.

Маска.

maska 001

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

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

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

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

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

maska 002

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

maska 003

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

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

Форма.

maska 003 1

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

maska.forma.czvetok

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

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

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

maska.formy.proizvolnye

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

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

maska.formy.proizvolnye 002

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

maska.formy.proizvolnye 003

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

Продолжим.

Размер.

maska.forma.razmer

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

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

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

Вписать.

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

maska.forma.razmer.vpisat

Заливка.

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

maska.forma.razmer.zalivka

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

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

maska.forma.razmer.proizvolno 001

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

Масштаб.

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

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

maska.forma.razmer.proizvolno 002

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

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

maska.poziczionirovanie

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

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

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

maska.poziczionirovanie.proizvolno

Повтор.

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

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

maska.povtor 002

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

maska.povtor 003

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

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

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

0

Интересные статьи

Секция. Вкладка Макет.

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

Читать полностью »
Подписаться
Уведомить о
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии

Маска в Elementor. Вкладка Расширенные. Общие настройки виджетов Elementor.

Новые статьи
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x
()
x

Блог о Веб-разработке на Wordpress, Elementor и Elementor Pro:
Документация. Уроки. Видео

Блог о Веб-разработке на Wordpress, Elementor и Elementor Pro:
Документация. Уроки. Видео

Регистрация

Announce

2019 collection

Let’s face it, no look is really complete without the right finishes. Not to the best of standards, anyway (just tellin’ it like it is, babe). Upgrading your shoe game. Platforms, stilettos, wedges, mules, boots—stretch those legs next time you head out, then rock sliders, sneakers, and flats when it’s time to chill.