Стекломорфизм - это матовый стеклянный вид: полупрозрачная карта, которая размывает все, что находится за ней, стиль, в который Apple и Windows опирались через свои интерфейсы. Построение его вручную в Elementor означает пользовательский CSS с фоновым фильтром и несколькими причудами браузера. Бесплатный Расширение стекломорфизма в Мастер-аддоны для Elementor превращает его в переключатель на вкладке "Дополнительно" любого элемента.
Вы включаете его, устанавливаете значение размытия и полупрозрачный цвет фона, закругляете углы, и элемент становится стеклянной картой. вот вся установка.
Что делает расширение Glassmorphism #
Расширение добавляет a Стекломорфизм раздел к Продвинутый вкладка каждого элемента Elementor, от полных разделов до отдельных виджетов. Включите его, и элемент получит размытие фона, поэтому фоновое изображение или содержимое за ним размазывается в матовое стекло, в то время как собственный текст элемента остается острым.
Лучше всего образ работает, когда элемент сидит поверх чего-то визуально занятого, как фон фотографии или градиент Над простым белым участком нечего размывать, поэтому эффекту нечего показать.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Следуйте руководство установки первый.
- Glassmorphism - это бесплатное расширение, поэтому лицензия Pro не требуется.
- Элемент, помещенный поверх изображения или красочного фона, поэтому размытию есть с чем работать.
Как включить расширение Glassmorphism #
С панели управления WordPress перейдите по адресу Мастер Аддоны и откройте Расширения вкладка. Стеклянный морфизм находится в Отображение виджетов группа с популярным значком, рядом с узорами и Сетка Линия. Нажмите на его переключатель, чтобы он стал фиолетовым, а затем нажмите Сохранить изменения вверху страницы и дождитесь зеленого “Настройки, сохраненные успешно” уведомление.
Где найти в редакторе Elementor #
Откройте свою страницу с Elementor и выберите элемент, который вы хотите превратить в стекло. в видео примере это виджет с двойным заголовком, сидящий на фоне фотографии. Перейти к Продвинутый вкладка, и вы найдете Стекломорфизм раздел с фиолетовым значком MA, а также другими расширениями Master Addons, такими как условия отображения и плавающие эффекты.
Объяснены настройки стекломорфизма #
Флип Включить Glassmorphism да и элементы управления появляются.
- Значение размытия: насколько сильно размазывается фон за элементом, от 0 до 100px (20px по умолчанию). размытие относится ко всему контейнеру, и даже небольшое значение вроде 2 четко читается поверх фотографии.
- Цвет фона: оттенок стекла. на кончике панели написано ясно: используйте цвета RGBA для лучшего контроля. Простой цвет HEX преобразуется в RGBA при 30-процентной непрозрачности автоматически, поэтому стекло никогда не становится твердым.
- Граничный радиус: закругляет углы стеклянной карты с каждой стороны или с привязкой.
- Ширина границы: добавляет полупрозрачный белый контур от 0 до 10px, который читается как край стекла Цвет границы здесь не регулируется.
- Исправьте переполнение (если размытие не работает): спасательный выключатель Некоторые макеты несут переполнение:hidden, который блокирует фоновый фильтр, который питает размытие Включите это, если вы включили все и все еще не видите никакого эффекта.
Выберите оттенок стекла цвета RGBA #
Нажмите пользовательский образец рядом с Цвет фона и выберите цвет, затем потяните альфа ползунок вниз. в демо-версии значение полупрозрачный красный (#DC4C4C8C), который оттеняет карту, в то время как сиденья на фотографии позади него остаются видимыми сквозь размытие.
Обведите углы и удалите пропавшее пятно #
Установить a Граничный радиус чтобы смягчить карту. для стеклянного вида достаточно нескольких пикселей. а если размытие отказывается показываться, переверните Исправить переполнение да: удаляет правило exploy:hidden, которое блокирует фоновый фильтр в некоторых контейнерах.
Готовый эффект #
Вот результат на лицевой стороне: закругленная стеклянная карта с красным оттенком, фотография размыта за ней, а заголовок и текст остры сверху.
Где стекломорфизм работает хорошо #
- Наложения Героя. Стеклянная панель для заголовка и CTA поверх фотографии во всю ширину.
- Цены и специальные карты. Стеклянные карты на фоне градиентного сечения.
- Блоки отзывов. Цитаты, которые парят над изображениями, не скрывая этого.
- Липкие заголовки. Тонкое размытие делает меню читаемым, поскольку контент прокручивается под ним.
- Вход или регистрационные поля. Классическая матовая панель поверх фирменного изображения.
Часто задаваемые вопросы #
Что такое расширение Glassmorphism в Master Addons?
Это бесплатное расширение, которое добавляет эффект матового стекла к любому элементу Elementor из вкладки Расширенный Вы получаете элементы управления для силы размытия, полупрозрачного цвета фона, радиуса границы и ширины границы, и вам никогда не нужно писать CSS самостоятельно.
Почему не проявляется размытие стекломорфизма?
Обычно родительский контейнер несет переполнение:hidden, который блокирует фон-фильтр за эффектом Включите переключатель Исправить переполнение в нижней части раздела Glassmorphism. также проверьте, что элемент находится над изображением или цветным фоном, так как размытие над простым белым невидимо.
Какие элементы могут использовать эффект стекломорфизма?
Любой элемент Elementor с вкладкой Advanced: разделы, столбцы, контейнеры и отдельные виджеты. включите расширение один раз на панели управления Master Addons, и раздел Glassmorphism появится на вкладке Advanced каждого элемента в редакторе.
Какой цвет фона мне следует использовать для стекломорфизма?
Полупрозрачный цвет RGBA. Выберите любой оттенок и опустите альфа-канал, чтобы фон оставался видимым сквозь оттенок. Если вы вводите сплошной цвет HEX, расширение преобразует его в RGBA с непрозрачностью 30 процентов, поэтому эффект стекла все еще работает.
Расширение Glassmorphism бесплатное?
Да. поставляется с бесплатной версией Master Addons for Elementor, в группе Display Widgets вкладки Расширения The страница ценообразования перечисляет, что планы Pro добавляют помимо бесплатных функций.
Завершая #
Расширение Glassmorphism превращает фидди-трюк CSS в несколько элементов управления на вкладке Advanced: включить, размыть, оттенок, радиус и граница. поместите виджет поверх фотографии, сохраните цвет фона полупрозрачным и обратитесь к исправлению переполнения, если размытие когда-либо скрывается.The Страница расширения GlassMorphism сравнивает его с написанием CSS самостоятельно. для получения дополнительных обновлений редактора, подобных этому, просмотрите Виджеты и расширения Master Addgetsили возьмите готовый дизайн из наборы шаблонов и сверху добавить стакан.
