Добавление текста поверх изображения в Elementor звучит как двухминутная работа. Затем вы пробуете его с виджетами по умолчанию и в конечном итоге боретесь с отрицательными полями, абсолютным позиционированием и виджетом заголовка, сложенным на фоновом изображении, которое ломается на мобильном телефоне. есть более быстрый способ. Бесплатный Виджет эффектов наведения изображения из главных аддонов помещает заголовок и описание поверх любого изображения и раскрывает их с помощью одной из 30 анимаций наведения, 8 из которых бесплатны. Вы никогда не прикасаетесь к CSS.
В этом уроке вы с нуля настроите раздел "Элементор" "Текст поверх изображения": загрузите изображение, выберите эффект наведения из раскрывающегося списка, создайте стиль наложения и решите, что произойдет, когда кто-то щелкнет. Каждый снимок экрана ниже приходит прямо из редактора Elementor, поэтому вы можете следовать по щелчку мыши.
Что охватывает это руководство:
- Почему для текстового сообщения поверх изображения нужен виджет
- Виджет "Эффекты наведения изображения" с первого взгляда
- Как добавить текст поверх изображения (шаг за шагом)
- Стиль накладки: цвет, непрозрачность, форма
- Типографика названия и описания
- Нажмите действия: откройте всплывающее окно или свяжите изображение
- Советы по дизайну, которые сохраняют читаемость текста
- Другие виджеты Master Addgets для эффектов изображения
- Бесплатно против Pro: что вам действительно нужно
- Часто задаваемые вопросы
Почему текстовое сообщение поверх изображения требует виджета (не взлом CSS)
Подсказывает собственная документация "Элементора" два обхода текста поверх изображения: установите изображение в качестве фона раздела и опустите виджет заголовка внутрь или подтолкните заголовок вверх с отрицательными полями. Оба работают для статической подписи. Ни один из них не дает вам раскрытия наведения, анимированного наложения или действия щелчка, а трюк с отрицательной прибылью имеет тенденцию разваливаться в точках останова планшета и мобильных устройств.
Специальный виджет решает все это в одном месте:
- Встроенное раскрытие Hover. Изображение остается чистым до тех пор, пока посетитель не зависает, затем оживляются заголовок и описание.
- Одна панель настроек. Изображение, текст, цвет наложения и типографика живут в одном виджете вместо трех сложенных друг на друга.
- Отзывчивый по умолчанию. Наложение масштабируется вместе с изображением, поэтому на экранах меньшего размера ничего не смещается с места.
- Нажмите действия. Все изображение может открыть ссылку или всплывающее окно От этого зависят портфельные сетки и карты обслуживания.
Вот почему макеты текста поверх изображения появляются повсюду: плитки портфолио, раскрывающие название проекта, карты команды, на которых отображается биография на ховере, баннеры категорий блогов и сетки галерей, где в противном случае подписи загромождали бы дизайн.
Виджет "Влияние на виджет"
Эффекты наведения изображения поставляется в бесплатной версии Master Addons, a библиотека из более чем 80 виджетов и расширений работает на более чем 30 000 активных сайтах WordPress. вот что вы получаете в этом одном виджете:
- 30 названных эффектов зависания, каждый из которых представляет собой отдельную анимацию. восемь бесплатны (Лили, Сэди, Рокси, Бубба, Ромео, Лейла, Хани и Оскар), а Чико, Марли, Руби и остальные 19 нуждаются в Pro
- Поле заголовка с выбираемым HTML-тегом (от H1 до H6), поэтому ваш накладываемый текст может оставаться SEO-корректным
- Поле описания короткой опорной линии
- Накладывают элементы управления цветом фона, непрозрачностью изображения и непрозрачностью висения
- Радиус границы, заполнение (Pro), тень коробки и отдельная типографика для названия и описания
- Три режима щелчка: ничего, перейдите по ссылке или откройте всплывающее окно (всплывающий контент требует Pro)
Виджет, восемь бесплатных эффектов, текстовые поля и ссылки щелкают все работают без лицензии Pro. Если вам нужна ссылка на полные настройки, Документация Image Hover Effects охватывает каждый контроль.
Как добавить текст поверх изображения в Elementor (шаг за шагом)
Шаг 1: Установите главные дополнения
На панели управления WordPress перейдите по адресу Плагины > Добавить новое и поиск по “Master Addons”.Установите и активируйте бесплатный плагин от WordPress.org. Если что-то вас смущает, то руководство установки проходит через него. вам нужен Элементор активен тоже, но достаточно бесплатной версии.
Шаг 2. Перетащите виджет эффектов наведения изображения на свою страницу
Откройте любую страницу с Elementor и найдите “Image Hover Effects” на панели виджетов. вы заметите его среди других виджетов с маркой MA, таких как Advanced Image, Image Hotspot и Image Comparison. Перетащите его в свой раздел.
Шаг 3: Загрузите изображение
Вкладка "Содержимое" открывается с помощью Эффекты и изображение раздел. Нажмите Загрузить изображение и выберите что-нибудь из своей медиатеки. под ним сидят две настройки:
- Размер изображения управляет визуализированными размерами. по умолчанию работает для большинства макетов.
- Разрешение изображения выбирает, какой размер загружается WordPress. “Full” дает самый резкий результат. На странице с восемью или десятью такими плитками вместо этого перейдите к “Large”; никто не видит разницы в размере сетки, и страница загружается заметно быстрее.
Шаг 4: Выберите эффект наведения
Вот самое интересное. Откройте Эффект наведения раскрывающийся и вы получаете полный список названных эффектов: Лили, Сэди, Рокси, Бубба, Ромео, Лейла, Хани, Оскар, Марли, Руби, Майло, Декстер, Сара, Зои, Чико, Джулия, Голиаф, Гера, Уинстон, Селена, Терри, Фиби, Аполлон, Кира, Стив, Мозес, Джаз, Минг, Лекси, и Дюк Первые восемь бесплатны, а остальные несут лейбл Pro в бесплатном плагине.
Каждое имя представляет собой различную комбинацию наложения анимации и раскрытия текста. Сэди скользит по градиенту вверх снизу. Марли опускает заголовок с подчеркиванием. Чико слегка увеличивает изображение и обрамляет текст тонкой рамкой. редактор предварительного просмотра обновляется в прямом эфире, поэтому щелкните несколько и наведите курсор на изображение, чтобы проверить. Вот Чико (эффект Pro) в середине наведения:
Быстрая группировка, которая поможет вам перебрать их все:
- Тонкие затухания: Лили, Сэди, Лейла, Зои. Хороший выбор портфелей по умолчанию.
- Направленные слайды: Дорогая, Оскар, Ромео, Сара Текст вталкивается с края.
- Масштаб и масштаб: Чико, Бубба, Майло, Джулия. образ движется, что привлекает внимание.
- Игривый и смелый: Марли, Руби, Декстер, Голиаф, Аполлон. Более сильное движение, лучше всего подходит для творческих сайтов.
Шаг 5: Добавьте свой заголовок
Открыть Заголовок раздел. Введите свой заголовок и выберите Тег HTML. Это имеет большее значение, чем кажется: если изображение находится в сетке служб, H3 обычно лучше соответствует иерархии вашей страницы, чем по умолчанию H2. Поисковые системы читают этот тег, как и любой другой заголовок на странице.
Шаг 6: Напишите описание
The Описание раздел добавляет меньшую строку, которая появляется под заголовком на hover.Keep it to one или два коротких предложения.Long абзацы отрезаются на меньших изображениях и побеждают точку чистого наложения.
Стиль накладки: цвет, непрозрачность и форма
Переключиться на Стиль вкладка. Изображение панель управляет тем, как выглядит наложение:
- Цвет фона оттеняет наложение, которое появляется на hover.Выберите цвет из палитры вашего бренда; значение HEXA, как #DD5555 с уменьшенной альфа, сохраняет фотографию видимой внизу.
- Непрозрачность изображения устанавливает состояние покоя и Непрозрачность наведения устанавливает, насколько изображение тускнеет при появлении наложения. Зазор между ними (скажем, 0,5 в состоянии покоя, 0,7 при наведении) заставляет раскрытие чувствовать себя преднамеренным.
- Фильтр изображений и Фильтр изображений наведения добавьте фильтры CSS, такие как оттенки серого или размытие, для настроений до/после.
Ниже этого, Граничный радиус изменяет форму всего блока. Соответствующие значения дают вам мягкие закругленные углы; асимметричные значения (100 верхних левых, 0 верхних правых, 100 нижних правых, 0 нижних левых) создают форму листа, которую вы видите на многих современных сайтах агентств.
Типографика названия и описания
Все еще на вкладке "Стиль" Название и Описание панели каждый получает свой собственный цвет, типографику, и интервал управления. семейство шрифтов, размер, вес, преобразование, высота строки, и интервал между буквами все здесь, плюс параметр тени текста для описания, Если ваше изображение светло, переключите цвет заголовка на темное значение, чтобы текст оставался читаемым в обоих состояниях.
Стоит соблюдать одно правило читаемости: стремитесь к четкому контрасту между текстом и тем, что находится за ним. если фотография занята, опирайтесь на цвет наложения и непрозрачность предыдущего шага, а не боритесь с ним только весом шрифта.
Нажмите "Действия": откройте всплывающее окно или свяжите все изображение
Вернувшись на вкладку "Содержимое", Ссылки или всплывающие окна? управление решает, что делает щелчок. За маленьким переключателем значков расположены три параметра: нет, всплывающее окно и внешняя ссылка.
Попап (Pro) открывает окно наложения с любым содержимым, которое вы выберете. выберите Тип содержимого и либо напишите содержимое непосредственно в редакторе WYSIWYG, либо загрузите сохраненный шаблон Elementor.Сетки портфеля используют это постоянно: каждая плитка открывает тематическое исследование, не покидая страницу.
Ссылка превращает все изображение в кликабельную карту Вставьте URL-адрес в поле URL-адрес ссылки и всю область наведения там, что превосходит крошечную текстовую ссылку для тапа целей на мобильном телефоне.
Если вам нужно больше всплывающих шаблонов, помимо этого виджета (намерение выхода, триггеры прокрутки, всплывающие окна с синхронизацией), узнайте, как это сделать добавьте всплывающее окно в Elementor бесплатно.
Готовый результат
Нажмите предварительный просмотр и наведите курсор на изображение. наложение исчезает, заголовок и описание раскрываются с выбранным вами эффектом, а курсор сигнализирует о действии щелчка:
Общее время сборки составляет около пяти минут. а поскольку каждый выбор живет в настройках виджета, вы можете поменять эффект или перекрасить наложение в следующем месяце, ничего не восстанавливая.
Советы по дизайну, которые позволяют тексту оставаться доступным для чтения изображений
- Один эффект на сетку. Если вы создаете портфолио из 6 плиток, дайте каждой плитке одинаковый эффект зависания. Смешанные эффекты читаются как случайные.
- Контраст сначала. Белый текст нуждается в темном наложении; темный текст нуждается в светлом изображении или светлом наложении.
- Краткие описания. Десять слов или меньше Наложение - тизер, а не абзац.
- Тест на ощупь. На телефонах первое касание показывает наложение, а второе срабатывание срабатывает, поэтому убедитесь, что раскрытое состояние выглядит полным на маленьком экране.
- Соответствуйте радиусу границы остальным страница. 100px форма листа рядом с картами с острым углом смотрит.
Для более широкого руководства по проектированию движения, наше руководство Эффекты анимации элементара обложки при наведении, прокрутке и входной анимации зарабатывают свое место Функции анимации Master Addons страница показывает, что еще плагин может анимировать.
Другие виджеты главных дополнений для эффектов изображения
Эффекты наведения изображения - это подходящий инструмент для раскрытия текста, но несколько родственных виджетов охватывают соседние варианты использования:
- Расширенное изображение добавляет 3D-наклон, ленты, значки к единому изображению без наложения текста.
- The Виджет Flipbox переворачивает карту на полностью оформленную заднюю сторону, лучше, когда вам нужны кнопки или значки в раскрытом состоянии.
- Точка доступа к изображению прикрепляет интерактивные маркеры подсказок к определенным точкам на одном изображении, что идеально подходит для вызова продуктов.
- The Изображение Карусель обрабатывает многоизображаемые ползунки, когда одной плитки зависания недостаточно.
- Сравнение изображений помещает драгируемый ползунок до/после на две версии кадра.
Бесплатно против профессионала: что вам на самом деле нужно?
Для базового текста над разделом изображения достаточно бесплатного плагина Он включает в себя виджет, восемь эффектов наведения (Лили, Сэди, Рокси, Бубба, Ромео, Лейла, Хани и Оскар), поля заголовка и описания, фильтры изображений и клики ссылок.Pro разблокирует остальные 22 эффекта, всплывающее содержимое, а также заполнение и закругленные угловые элементы управления. Мастер Аддоны Про добавляет более широкий набор виджетов премиум-класса, наборы шаблонов и дополнительные возможности, такие как Widget Builder, поэтому стоит посмотреть, как только вы создаете целые сайты, а не один раздел. Существует 14-дневная гарантия возврата денег, если вы попробуете это и передумаете.
Предпочитаете смотреть Вот вам быстрый проход по Элементору:
Часто задаваемые вопросы
Как добавить текст поверх изображения в Elementor?
Установите бесплатный плагин Master Addons, перетащите виджет Image Hover Effects на свою страницу, загрузите изображение, затем введите название и описание на вкладке Контент. выберите эффект наведения из раскрывающегося списка, и текст появится над изображением при наведении. CSS не требуется.
Могу ли я показывать текст поверх изображения без наведения курсора в Elementor?
Да. Установите изображение в качестве фона раздела или столбца и поместите виджет заголовка внутрь для статической подписи. Используйте виджет "Эффекты наведения изображения" вместо этого, когда вы хотите, чтобы текст отображался при наведении с помощью анимации и действия щелчка.
Виджет Image Hover Effects бесплатен?
Да. поставляется в бесплатном плагине Master Addons for Elementor на WordPress.org с восемью эффектами наведения, щелчками ссылок и основными элементами управления стилем. для остальных 22 эффектов, всплывающего содержимого, а также элементов управления заполнением и закругленными углами нужен Pro.
Работает ли текст поверх изображения при наведении на мобильный телефон?
Да. сенсорные устройства рассматривают первое касание как наведение, раскрывающее накладной текст, а второе касание запускает ссылку или всплывающее окно. наложение масштабируется с изображением через адаптивные точки останова Elementor.
Может ли изображение открывать всплывающее окно при нажатии?
Да. установите ссылки или всплывающее окно во всплывающее окно, затем добавьте содержимое во встроенный редактор или загрузите сохраненный шаблон Elementor. щелчок по изображению открывает этот контент в окне наложения, что хорошо работает для тематических исследований портфолио.
Завершение
Раздел "Элементор" текст поверх изображения занимает пять минут с правильным виджетом: загляните в "Эффекты наведения изображения", загрузите свою фотографию, выберите эффект по имени и создайте стиль наложения, чтобы оно соответствовало вашему бренду. позиционирование и отзывчивое поведение уже обработаны для вас, а бесплатная версия охватывает основы этого руководства.
Возьмите бесплатный плагин, просмотрите остальную часть библиотека виджетов и расширенийи если вы застрянете документация виджета намечается каждая настройка.
Связанное чтение: Эффекты анимации элементара, виджет Elementor Flipboxи добавление всплывающих окон в Elementor бесплатно.
