Поле изображения Elementor - это виджет, который объединяет изображение с заголовком и кратким описанием в одном связанном блоке. Именно так большинство сайтов WordPress создают сетки служб, строки функций и разделы команд. Elementor поставляет один бесплатно; шестнадцать дизайнов ниже заменяют его макетами и перемещают виджет по умолчанию, который не может создать.
Поскольку у всех один и тот же виджет, раздел услуг на площадке сантехника в Лидсе расположен идентично разделу дизайн-студии в Лиссабоне. Те же три колонны, то же центральное изображение, тот же разрыв в 16%.
Итак, мы построили шестнадцать замен. каждый из них - рабочий виджет Elementor, у каждого есть живая демоверсия, которую вы можете открыть прямо сейчас, и ссылка для скачивания на этой странице. вам не нужно передавать адрес электронной почты или создавать учетную запись, чтобы получить ее.
На этой странице
Оглавление
Краткий обзор 16 дизайнов
| # | Дизайн | Что делает | Лучший для |
|---|---|---|---|
| 01 | Коробки изображений Lumen | Источник света следует за курсором по карте | Темные сайты, технические услуги |
| 02 | Граничные коробки изображений | Смещенные пластины, которые открываются при прокрутке мимо | Редакция, руководства, бренды на открытом воздухе |
| 03 | Коробки изображений Aperture | Каждое изображение открывается из обрезанной апертуры | Фотография, печать, сетки из шести предметов |
| 04 | Коробки с баскульными изображениями | Карты поворачиваются на петле, показывая заднюю сторону | До и после, - показывает спец |
| 05 | Каскадные коробки изображений | Четыре карты оседают последовательно, а не все сразу | Шаги процесса, услуги студии |
| 06 | Коробки с филигранными изображениями | Маленькие миниатюры, тонкие правила, плотный список из двух столбцов | Меню длительного обслуживания, прайс-листы |
| 07 | Фриз Стрип | Горизонтальную полосу, которую вы перетаскиваете или прокручиваете | Длинные последовательности, производственные линии |
| 08 | Коробки изображений круговоротов | Карты наклоняются к указателю блеском | Продукция, готовые изделия |
| 09 | Коробки с импульсными изображениями | Карты тянутся к курсору, как магнит | Бронирование, курсы, прокат |
| 10 | Коробки изображений Кинцуги | Изображения поступают в виде осколков и собираются заново | Ремесло, стекло, керамика, реставрация |
| 11 | Коробки с изображениями Палисада | Высокие панели, построенные из вертикальных планок | Мастерские, столярные изделия, узкие колонны |
| 12 | Коробки изображений Refract | Цветная стирка в смешанном режиме расположена поверх каждого изображения | Студии, музыка, лицензирование |
| 13 | Коробки изображений Riser | Карты встают на место с губой, подходящей под ее текст | Агентства, производство |
| 14 | Коробка изображений солнцестояния | Большая шахматная пара с дуотонной обработкой | Кофе, поиск, рассказывание историй |
| 15 | Пороговая коробка изображений | Двери расходятся посередине, открывая изображение | Производители, питомники, раскрывает |
| 16 | Коробка изображений Vellum | Мягкое размытие проясняется, когда зажимы для карт открываются | Переплет, архивы, тихие бренды |
Что вам нужно для запуска этих
Для самой страницы достаточно Elementor free Дизайны - другое дело.
- Всем шестнадцати нужны главные аддоны. Каждый из них построен на элементах управления (ретранслятор, типографика, размеры, граница, пикер значков, вкладки), которые полностью Виджет Строитель предоставляет. бесплатный плагин имеет конструктор виджетов, но эти элементы управления отображаются как заблокированные.
- Загрузки на этой странице бесплатны и не имеют ограничений. Возьмите JSON и сохраните его. вы можете изменить ограниченные параметры в бесплатной версии. Но версия pro разблокирует все.
- Живые демо вообще ничего не стоят. Открыть один, изменить размер браузера, перетащить карту, таб с клавиатурой. вот честный способ судить, подходит ли стиль движения вашему контенту, и это бесплатно.
Если вам нужны дизайны, работающие на бесплатном плагине, восемь бесплатных виджетов в нашем Шаблоны ползунков элементаров в коллекции нет элементов управления Pro, и некоторые из них представляют собой макеты карт, а не ползунки.
01. Коробки изображений Lumen
Живая демо Скачать виджет JSON
Четыре карты на почти чёрном фоне Переместите указатель по ним и мягкий свет движется вместе с ним, осветляя часть изображения под курсором и оставляя тусклыми остальные Карта, на которую вы смотрите, - это карта, которая зажжена.
Что заставляет его работать, так это удерживающее устройство. Карты не движутся и не масштабируются при зависании. Единственное, что меняется, это место, где падает свет, что близко к тому, как вы на самом деле смотрите на объекты на верстаке под лампой.
Используйте его для: технические службы, сайты темной тематики, все, что фотографируется на темной земле.
Не используйте его для: белый фон Прожектор не с чем работать и все это читается как слегка грязное зависание состояние.
02. Граничные поля изображений
Живая демо Скачать виджет JSON
Две колонны, намеренно не в ногу, поэтому правая колонна находится ниже левой. Каждая пластина открывается, когда она пересекает в поле зрения. Заголовки несут небольшую круглую стрелку, а под ними сидит бровь этикетка в буквенных шапках: СНЕГОПЛАВ, САММИТЫ, ТРАВЕРСЫ.
Это смещение делает реальную работу Прямая сетка говорит глазу сканировать в строках и он перестает читать. шатайте столбцы и он должен двигаться вниз по странице вместо этого, что направление вы на самом деле хотите.
Используйте его для: редакционные страницы, руководства, все, что содержит от четырех до шести существенных статей.
Не используйте его для: больше чем около восьми пунктов. шатается и страница становится очень высокой, очень быстрой.
03. Коробки изображений диафрагмы
Живая демо Скачать виджет JSON
Шесть коробок в два ряда по три, на теплом бумажно-сером. каждое изображение маскируется, и маска открывается наружу по мере поступления ряда, как это делает апертура линзы. каждая карта содержит небольшую ссылку "ПОСМОТРЕТЬ ДЕТАЛИ" под своим описанием.
Это тот, к которому нужно стремиться, когда у вас есть шесть вещей, и они действительно равны. Большинство макетов ящиков с изображениями тихо ранжируют свои предметы по размеру или положению. Этот нет.
Используйте его для: услуги фотолаборатории и печати, сетки из шести предметов, все фотографическое.
Не используйте его для: три пункта. двухрядный ритм - это весь дизайн, и один ряд из трех теряет его.
04. Коробки с баскульными изображениями
Живая демо Скачать виджет JSON
Названа в честь моста, а не баланса. Каждая карта поворачивается на горизонтальном шарнире, и за ней ждет настоящая задняя сторона, а не CSS-фильтр на том же изображении, а настоящая вторая сторона, на которую вы записываете копию.
Примечание от его построения: флип выключается ниже точки останова, и это специально. шарнирная анимация на телефоне означает, что касание делает что-то неожиданное, и исправление заключается в том, чтобы не делать этого, а не делать это медленнее.
Используйте его для: до и после, специальные листы, все, где вторая часть информации так же интересна, как и первая.
Не используйте его для: ваша основная навигация по странице. Содержимое переворота - это контент, который большинство посетителей никогда не видят.
05. Каскадные коробки изображений
Живая демо Скачать виджет JSON
Четыре карты, которые приходят одна за другой, а не вместе, каждая из которых устанавливает бит позади последней. разница небольшая, но вы чувствуете это. раздел раздается вам, а не просто появляется.
На каждой карте есть ссылка "ДАТЫ КУРСА", которая является подарком тому, для чего на самом деле предназначен этот макет: вещам, которые повторяются в порядке, где имеет значение заказ.
Используйте его для: услуги студии и мастер-классов, списки курсов, этапы процесса.
Не используйте его для: над складкой. Пошатывайте вход первого, что видит посетитель, и ваш сайт чувствует себя медленно, даже если это не так.
06. Коробки с филигранными изображениями
Живая демо Скачать виджет JSON
Тихий. миниатюры размером с почтовую марку, правила линии роста волос, две колонны, четыре предмета в пространстве большинство этих рисунков используют для одного. тип набора рук, полимерные пластины, высечка, окраска краев: торговый список, выложенный как торговый список.
Это здесь, потому что не каждый раздел услуг заслуживает героического отношения Иногда есть одиннадцать вещей, которые вы делаете, и посетитель хочет их сканировать, а не восхищаться ими.
Используйте его для: меню длительного обслуживания, прайс-листы, специализированные сделки с большим количеством линейных товаров.
Не используйте его для: три службы заголовков. на этот счет похоже, что вы забыли закончить раздел.
07. Фриз-Стрип
Живая демо Скачать виджет JSON
Единственный здесь, который идет вбок. карты убегают от правого края экрана и вы перетаскиваете их, прокрутите или используете две круглые кнопки стрелки вверху справа. тонкое правило под заполняет, как вы идете, так что вы всегда знаете, сколько осталось.
Камвольный прядение, короблени и лучи, малиновка ткачество, штучное крашение, отделка Пять стадий мельницы в том порядке, в котором они происходят. сетка разбила бы эту последовательность на ряды. полоса держит ее на одной линии, что и есть последовательность производства на самом деле.
Используйте его для: производственные последовательности, длинные списки, которые разрушают сетку, все, что имеет присущий порядок.
Не используйте его для: четыре пункта. если все уже помещается на экране, вы просите людей прокручивать боком просто так.
08. Коробки с изображениями круговоротов
Живая демо Скачать виджет JSON
Карты наклоняются к тому месту, где указатель, и блеск пересекает поверхность при их движении Это эффект, который все пробовали в 2021 году и большинство людей перестарались Наклон здесь на пару градусов, а не пятнадцать.
Пользователи клавиатуры обрабатываются должным образом, чего почти ничего не делает. Вкладка в карту, и вы получаете подъем и блеск, но не вращаетесь, потому что клавиатура не имеет положения указателя, к которому можно было бы вращаться, и подделка одной из них - это нонсенс.
Используйте его для: физические продукты, рамы, изделия, все, что стоит поймать.
Не используйте его для: текстовые карты. наклонять абзац, пока кто-то его читает, враждебно.
09. Коробки импульсных изображений
Живая демо Скачать виджет JSON
Карты наклоняются к курсору по мере приближения, затем отпускают по мере выхода. Тяга нормализуется к половине карты и зажимается, поэтому, как только вы пройдете край, она перестанет увеличиваться, а не бросать карту по экрану.
Каждая карта заканчивается горячей оранжевой кнопкой Курсы для начинающих, коучинг, прокат досок Магнетизм - это фишка на странице бронирования, потому что она создает ощущение, будто она хочет быть нажатой, и она тратится куда угодно карта не призыв к действию.
Используйте его для: уроки, прокат, бронирование, все, где каждая карта заканчивается кнопкой.
Не используйте его для: информационные карты без цели клика. Вы обещаете взаимодействие, которое не выполняете.
10. Коробки с изображениями Кинцуги
Живая демо Скачать виджет JSON
Изображения приходят частями и собираются заново. С ним сочетаются две модели разрыва: три высокие части, похожие на треснувшее по высоте стекло, и шесть клиньев, расходящихся от точки, смещенной от центра, что читается как удар, а не как чистый разрыв.
Выдувные сосуды, отлитые и печи сформированы, реставрация, обучающая скамейка. демо-версия стекло работы повсюду. дизайн был построен для горячего магазина и он показывает, но он приземляется везде, где предмет что-то сделано, разбито или поставлено обратно вместе.
Используйте его для: стекло, керамика, реставрация, ремонт, консервация.
Не используйте его для: больницы, страховка, все, где “shattering” несет в себе смысл, которого вы не хотите.
11. Коробки с изображениями Палисада
Живая демо Скачать виджет JSON
Три высокие панели, каждая собрана из вертикальных реек, которые приходят последовательно, ограждение строится по одной доске за раз. счет реек адаптируется к ширине панели, поэтому более узкая колонна получает меньше, более широкие доски вместо того же числа сжатый тоньше.
Лестницы, створчатые окна, оборудованные комнаты. Все это предметы, которые вы бы фотографировали стоя, а не лежа, и это лучше подходит к такой планировке, чем когда-либо ландшафтная карта.
Используйте его для: столярные изделия, архитектура, интерьеры, кадры из высокого продукта.
Не используйте его для: пейзажная фотография. портретные панели обрезают картинку до слота, и вы теряете кадр.
12. Коробки с изображениями преломления
Живая демо Скачать виджет JSON
Цветная стирка помещается над каждым изображением в режиме смешивания, поэтому четыре фотографии, снятые в четыре разных дня в четырех разных источниках света, выглядят как один набор. Это настоящая работа здесь, и она менее гламурна, чем кажется.
Запись местоположения, фоли и реквизит, реставрация, лицензирование библиотек Это звуковая работа, где стоковая фотография неизбежна и картинки никогда не совпадают, поэтому стирка скрывает швы.
Используйте его для: изображения из смешанных источников, стоковые фотографии, все, что нельзя переснять.
Не используйте его для: точность цвета продукта. Промывка образца краски является проблемой возврата.
13. Коробки с изображениями ризера
Живая демо Скачать виджет JSON
Карты поднимаются снизу с липом подписи, показывающим внизу. губа измеряется по тексту внутри нее, а не устанавливается на фиксированную высоту, поэтому подпись из двух слов и двухстрочная надпись сидят правильно, а не одна из них обрезается.
Заказные заказы, переформулировка, мелкосерийное производство Три предмета, три темных изображения, минимал хром. самый традиционный дизайн в наборе Иногда хочется, чтобы макет ушел с пути работы.
Используйте его для: агентства, продюсерские компании, страницы с тремя сервисами.
Не используйте его для: длинные описания. губа - это подпись, а не абзац.
14. Коробка изображений солнцестояния
Живая демо Скачать виджет JSON
Самые большие коробки в наборе. два столбца, сильно не в ногу намеренно, изображения достаточно большие, чтобы на самом деле смотреть. Дуотонная обработка связывает изображения и может быть сброшена на карту, если одна фотография борется с ней.
Оптовая обжарка, зеленый источник, калибровка эспрессо. Три услуги дали пространство шесть. Используйте его, когда у вас мало что можно сказать, и они стоят целого экрана каждый.
Используйте его для: два-четыре премиальных сервиса, страницы рассказывания историй, бренды кофе и продуктов питания.
Не используйте его для: шесть или более предметов. Этот дизайн из шести предметов представляет собой очень длинную страницу, до нижней части которой никто не доходит.
15. Пороговая коробка изображений
Живая демо Скачать виджет JSON
Две двери сидят закрытыми над каждым изображением и расстаются посередине, когда карта попадает в поле зрения. двери построены из собственного источника изображения, поэтому они никогда не расходятся с картиной за ними.
Глубокая зеленая земля, четыре карты: коллекции теплиц, банк семян, зимний сад, учебные курсы Использование дверей для раздела о входе в сад очевидно, и в данном случае очевидно - это нормально.
Используйте его для: сады, площадки, открытия, все, во что физически входит посетитель.
Не используйте его для: двенадцать карт. двенадцать наборов дверей открываются - это много дверей.
16. Коробка изображений Vellum
Живая демо Скачать виджет JSON
Каждая карта открывается из клипа, в то время как мягкое размытие очищает изображение, как бумага вытягивается. Каждая карта в разделе вооружена в одном фиксаторе, что означает один проход макета для всего ряда, а не один на карту.
Переплет дел, консервация, коробки и вольеры, работа издания. демо - переплетная мастерская. это самое мягкое движение в наборе и то, которое с наибольшей вероятностью выживет клиент, который говорит, что ненавидит анимацию.
Используйте его для: архивы, переплет, консервация, тихие и дорогие бренды.
Не используйте его для: все, что нуждается в срочности. у этой конструкции нет и не претендует.
Что может сделать виджет поля изображения Elementor по умолчанию?
Бесплатное поле изображения Elementor дает вам изображение, заголовок, описание и дополнительную ссылку. на вкладке Стиль вы можете установить ширину изображения, радиус границы, расстояние между изображением и текстом, выравнивание и положение изображения (вверху, слева или справа).Эффекты наведения ограничиваются глобальными CSS-фильтрами и преобразованиями Elementor.
Это охватывает множество сайтов, и если он покрывает ваш, используйте его. Вам не нужен аддон, чтобы поставить картинку над заголовком.
Там, где она заканчивается, движение и структура. нет ни задней поверхности, ни последовательности каждой карты, ни горизонтальной компоновки, ни способа заставить одну карту вести себя иначе, чем ее соседи. вот те пробелы, которые заполняют шестнадцать рисунков выше.
Поле изображения против поля значка: что следует использовать?
Используйте поле изображения, когда изображение является содержимым, например фотография работы, комнаты или продукта. Используйте поле значков, когда изображение является украшением, а слова несут значение. В остальном виджеты почти идентичны: оба соединяют графику с заголовком и описанием в одном связанном блоке.
Практический тест заключается в том, заметите ли вы, исчез ли графика. Если сетка служб все еще хорошо читается с исчезнувшими значками, они были декоративными, и ящик для значков был правильным вызовом. Если удаление изображений оставляет вам список имен, вам нужен был ящик для изображений.
Третий вариант, который люди забывают: а флипбокс, который представляет собой коробку изображений со спинкой. Баскуле выше, это та идея перестроенная с шарниром.
Как добавить эффект наведения на поле изображения Elementor?
Выберите виджет, откройте вкладку Стиль, разверните раздел Изображение и переключитесь на вкладку Наведение. получаете непрозрачность, CSS-фильтры (размытие, яркость, насыщенность, контрастность, оттенок) и продолжительность перехода. для преобразований типа масштабирования или поворота используйте элементы управления наведением на вкладке Дополнительно.
Вот и вся встроенная поверхность. Для чего-либо за ней, например, для света, отслеживающего курсор, магнитного притяжения или блеска, пересекающего наклон, требуется специальный CSS или виджет, который передает поведение.
Если вам нужны именно эффекты "текст за изображением", мы каталогизировали 25+ Элементорный текст поверх эффектов наведения изображения отдельно, и те работают с виджетом акций.
Как импортировать эти дизайны ящиков с изображениями Elementor
Загрузите JSON из любого дизайна выше, а затем в WordPress перейдите по адресу Мастер-аддоны → Виджет-строитель → Импорт виджета и загрузить файл Виджет появляется на панели Элементор в разделе Избранное, с собственными элементами управления во вкладках Содержимое и Стиль.
- Нажмите Скачать виджет JSON на дизайн вы хотите. zip содержит JSON и изображение предварительного просмотра.
- Распечатайте его. собственный импортер шаблонов Elementor не будет читать этот файл, потому что он поступает в Widget Builder, а не в Templates.
- Перейти к Мастер-аддоны → конструктор виджетов и выбирать Импортировать виджет.
- Загрузить JSON. Редактируйте любую страницу с помощью Elementor и выполните поиск на панели имени виджета.
- Замените изображения заполнителя и текст. карты являются повторителем, поэтому добавляйте или удаляйте элементы там, а не дублируйте виджет.
Распространенной ошибкой является шаг 2. Это виджеты Widget Builder, а не Шаблоны разделов Элементор, так что импорт их через Шаблоны → Импорт не удастся и сообщение об ошибке не объясняет почему.
Работают ли эти поля с изображениями на мобильных устройствах и доступны ли они?
Да обоим, с одной оговоркой уровня дизайна. Каждый виджет здесь уважает prefers-reduced-motion: если у посетителя на уровне ОС включено уменьшенное движение, входная анимация не запускается и карты отображаются в окончательном состоянии. Это обрабатывается в виджете, а не оставлено на ваше усмотрение.
Конструкции с помощью указателя скорее ухудшаются, чем ломаются. Наклон Джайра и магнит Импульса нуждаются в положении указателя, которого не обеспечивает сенсорный экран, поэтому на мобильном устройстве карты отображаются статичными, и все остается читаемым и наносимым. Bascule намеренно отключает откидную кнопку ниже точки останова.
Также Gyre обрабатывает фокус клавиатуры отдельно от hover.Tab к карте и вы получаете подъем и блеск без вращения. большинство эффектов наклона пропускают это и оставляют пользователей клавиатуры ни с чем.
Какой ящик с изображением Элементора вам действительно следует выбрать?
Начните с количества товаров, а не с эффекта.
- Два-четыре пункта, каждый важный: Солнцестояние или грань.
- Ровно три услуги: Райзер, круговорот или баскуль.
- Четыре предмета: Люмен, Каскад, Кинцуги, Порог или Веллум.
- Шесть равных предметов: Апертура.
- Восемь и более: Фриз Стрип, если это последовательность, Филигрань, если это список.
- Высокие портретные изображения: Палисад.
- Фотографии, которые не совпадают друг с другом: Преломлять.
- Каждая карта заканчивается кнопкой: Импульс.
Тогда проверьте эффект против вашего субъекта.Кинцуги на юридическую фирму - плохая шутка. Порог на саду почти слишком аккуратный. если в предложении что-то не сказано о работе, бросьте ее и используйте Riser.
Часто задаваемые вопросы
Виджет поля изображения Elementor бесплатен?
Да. Ящик с изображениями поставляется в бесплатном плагине Elementor с изображениями, заголовками, описаниями, ссылками, положением изображения и базовыми фильтрами наведения. Шестнадцать дизайнов на этой странице разные: это виджеты Master Addons Widget Builder, и для редактирования им нужны Master Addons Pro, хотя сами загрузки бесплатны.
Могу ли я добавить кнопку в поле изображения Elementor?
Не в виджете стока, который связывает всю коробку вместо того, чтобы дать вам отдельную кнопку, Чтобы получить настоящую кнопку вы либо поместите виджет Кнопка под ним внутри того же контейнера, или использовать дизайн, который включает в себя один Импульс, Апертура, Каскад и Круговорот все поставляются с кнопкой в карте.
Как сделать коробки изображений Elementor одинаковой высоты?
Поместите коробки в гибкий контейнер и установите выравнивание элементов контейнера на растяжение, затем установите каждый столбец поля изображения на полную высоту. Неравномерная длина текста - обычная причина. каждый дизайн на этой странице обрабатывает равные высоты в своем собственном CSS, поэтому проблема не возникает.
Чем отличается ящик с изображением от виджета изображения?
Виджет изображения помещает единое изображение с необязательной подписью и ссылкой.Ящик изображения представляет собой составное: изображение, заголовок, описание и ссылку в одном блоке, стилизованное и разнесенное как единое целое. используйте виджет изображения для отдельной фотографии, ящик изображения для карты в сетке.
Нужен ли мне Elementor Pro для этих конструкций?
Нет. Elementor бесплатно достаточно, потому что конструкции построены с Мастер Аддоны, а не Elementor Pro виджеты, Что вам нужно Мастер Аддоны Pro, так как каждый дизайн использует элементы управления Widget Builder (повторитель, типографика, размеры, граница, значки, вкладки), которые заблокированы в бесплатном плагине.
Куда идти дальше
Если вам нужен более импортный дизайн, 20 шаблонов ползунков элементаров коллекция является ближайшим братом этой страницы, и восемь из них работают на бесплатном плагине. конкретно карусели см Виджеты карусели Элементорили что вообще-то бесплатно если вопрос о лицензии вас волнует.
Для связанных шаблонов карт: горячие точки изображения для аннотирования одной большой картинки, секции членов команды для людей, а не для услуг, и 3D-анимации флипбоксов если Bascule попался вам на глаза. детали лицензии на страница ценообразования, и полный список виджетов находится в 100+ лучших дополнений Elementor.
