Почти каждой странице в конечном итоге требуется ряд маленьких карточек, которые соединяют значок с коротким заголовком и строкой текста.Особенности, услуги, шаги, контактные данные, все той же формы.The free Виджет информационного ящика в Мастер-аддоны для Elementor строит эту карту. вы выбираете значок или изображение, вводите заголовок и описание, выбираете предустановленный стиль (пять бесплатны, десять с Pro) и стилизуете каждую часть панели Elementor.
Это один из тех виджетов, к которым вы в конечном итоге постоянно обращаетесь, поскольку значок, заголовок и предложение охватывают так много разделов сайта. Ниже находится прогулка по каждой настройке, от предустановленных стилей до элементов управления значком, заголовком и описанием.
Что делает виджет Info Box #
В информационном поле значок или изображение помещается поверх заголовка и краткого описания. предустановки стиля означают, что один и тот же контент может выглядеть как заполненная карта, карта с рамкой или чистый центрированный блок, и вы можете выстроить несколько рядом, чтобы создать строку функции.
Заголовок может ссылаться в любом месте, значок можно поменять на загруженное изображение, и карта может нести свой собственный фон, границу и анимацию наведения. Есть три вкладки: Содержимое значка, заголовок и текст, Стиль для цветов и интервалов и Расширенный для обычных параметров Элементора.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
- Иконка в уме или изображение для загрузки, а также текст заголовка и описания.
Как добавить виджет Info Box #
В редакторе Elementor откройте Элементы панель и поиск Информационный ящик, или прокрутить в раздел Главные дополнения. перетащите его на свою страницу. он загружается с образцом значка, “Infobox Title,” и описание заполнителя, поэтому вы начинаете с рабочей карты вместо пустой.
Настройте контент #
Открыть Содержание вкладка. Содержание в разделе хранится все, что показывает карта, и именно здесь происходит большая часть вашего редактирования.
- Пресет стиля: выберите варианты с первого по пятый в бесплатном плагине или с шестого по десятый с помощью Master Addons Pro. Каждый из них по-разному отображает значок, заголовок и описание (подробнее об этом ниже).
- Изображение или значок: трехсторонний переключатель для "Нет", "Значок" или "Изображение". Выберите значок, чтобы использовать библиотеку значков или "Изображение" для загрузки собственного.
- Значок: при выборе значка выберите любой значок из библиотеки Font Awesome или загрузите SVG.
- Название: текст заголовка с опцией "Письмо с искусственным интеллектом" рядом с ним.
- URL-адрес заголовка: превратите заголовок в ссылку на любую страницу или внешний URL-адрес.
- Описание: одна или две строки текста под заголовком, также с надписью с помощью искусственного интеллекта.
- Читать далее Текст и читать далее Ссылка: они появляются только в шестой версии, для которой нужен Pro.
Под ними вы найдете а Помогите Документам ссылка и а Обертка Ссылка раздел из бесплатного Расширение Wrapper Link это делает всю карту кликабельной.
Выберите предустановку стиля #
Пресеты меняют весь внешний вид, не касаясь вашего контента, поэтому переключение между ними - это быстрый способ найти макет, соответствующий разделу.
- Вариации с первого по пятый (бесплатно): каждый по-разному расставляет значок, заголовок и описание. второй и третий варианты добавляют большую выцветшую копию значка за картой, а пятый вариант устанавливает значок в форме шестиугольника.
- Вариации с шестого по десятый (Pro): еще пять макетов. в шестой версии добавлена кнопка "Читать дальше" и опция фона значка градиента.
Используйте изображение вместо значка #
Если фотография или логотип подходят лучше, чем значок, установите Изображение или значок чтобы Изображение и выберите файл из Медиа Библиотеки. виджет затем показывает ваше изображение в слоте значка, который хорошо работает для логотипов партнеров, миниатюр продуктов или иллюстрированных карт функций. Установите его обратно на Нет когда вам нужно текстовое поле.
Стиль коробки #
The Стиль вкладка разделена на Общие стили, Стиль значка, Название, Описаниеи Шаблоны (из бесплатного расширения Patterns).General Styles управляет самим контейнером для карт.
- Тип границы, ширина и цвет: контур вокруг карты.
- Граничный радиус: закруглять углы.
- Набивка и маржа: расстояние внутри и вокруг коробки.
- Предыстория: установите нормальный фон и фон Hover, однотонный или изображение.
- Наведите курсор: добавьте встроенный эффект движения, например "Боб" или "Расти", когда кто-то наводит курсор на карту.
Стиль значка, названия и описания #
The Стиль значка раздел устанавливает размер значка, цвет и фон с отдельными нормальными состояниями и состояниями наведения плюс выравнивание.
The Название и Описание разделы обрабатывают типографику, цвет, выравнивание и интервал между текстом. Каждый из них имеет свои собственные нормальные состояния и состояния наведения, поэтому карта может перемещаться по мере перемещения по ней посетителей.
Цвета фона и параметры изображения #
Вернувшись в общие стили Фон контроль принимает либо твердое тело Цвет или ан Изображение. Тонированный фон с белым текстом, как заполненная карта “О Us”, - это простой способ выделить одну коробку в ряд простых.
Результат на странице #
Публикуйте или предварительно просматривайте, и поля отображаются с вашими значками, заголовками и описаниями на месте. Вот ряд из трех информационных полей, каждое из которых находится в заданном стиле, тип макета, который подходит для раздела функций или услуг.
Обычные случаи использования #
- Основные моменты в трех-четырех столбцах строка под героем.
- Услуги или предложения каждый со значком и однострочным резюме.
- Шаги "Как это работает" с пронумерованным или тематическим значком на шаг.
- Контактные данные например, телефон, электронная почта и адрес в виде связанных полей.
- О вызовах команды или о них использование предварительно заданного заполненного фона, чтобы выделиться.
Советы по работе с виджетом Info Box #
- Сохраняйте описания короткими. Одна или две строки читаются лучше всего и сохраняют ровный ряд карт.
- Сопоставьте размеры значков в строке. Установите одинаковый размер значка на каждом поле, чтобы они выстроились в ряд. это то, что обычно отзывается, когда карты не совсем совпадают.
- Используйте один предустановленный параметр в строке. Смешивание предустановок в одной строке имеет тенденцию выглядеть неравномерно; вместо этого переключайте цвет фона, когда хотите его выделить.
- Свяжите заголовок или обертку. Отправьте людей куда-нибудь полезное с помощью URL-адреса заголовка или сделайте всю карту доступной для кликинга с помощью Wrapper Link.
- Добавьте тонкую анимацию наведения. Маленький Боб или Расти на зависании сигнализирует, что карта интерактивна, не мешая.
Пресеты, демоверсии и сравнение с Elementor Icon Box см. в разделе Страница виджета информационного ящика.
Часто задаваемые вопросы #
Что такое виджет Info Box в главных аддонах?
Это виджет Elementor, который объединяет значок или изображение, заголовок и краткое описание в одну стилизованную карту. вы получаете пять бесплатных предустановок стиля (десять с Pro) и контроль над цветами, интервалом и эффектами наведения, поэтому вы можете создавать строки функций, списки услуг и вызовы прямо с панели.
Сколько предустановок стиля есть в информационном поле?
Десять. варианты с первого по пятый бесплатны, а варианты с шестого по десятый нуждаются в Master Addons Pro. каждый по-разному расставляет и украшает значок, заголовок и описание. вы переключаетесь между ними из раскрывающегося списка "Презадание стиля", не переделывая свой контент.
Могу ли я использовать изображение вместо значка?
Да. на вкладке Содержимое установите Изображение или значок в Изображение и выберите файл из Медиатеки Виджет показывает ваше изображение вместо значка, который хорошо работает для логотипов, кадров продукта или иллюстрированных карт Выберите Нет для текстового поля.
Могу ли я сделать информационное поле щелкаемым?
Вы можете связать заголовок с полем URL-адрес заголовка на вкладке Содержимое. чтобы сделать всю карту кликабельной, используйте опцию Wrapper Link, из бесплатного расширения Wrapper Link. оба позволяют посетителям нажать на поле, чтобы добраться до другой страницы или раздела.
Могу ли я добавить эффект наведения на поле информации?
Да. General Styles имеет раскрывающийся список Hover Animation со встроенными эффектами, такими как Боб и Гроу, а разделы значок, заголовок и описание имеют свои собственные состояния Hover для цвета и фона. Вместе они позволяют карте реагировать, когда кто-то перемещается по ней.
Завершая #
Виджет Info Box превращает значок, заголовок и предложение в чистую карту, которую вы можете повторить в любом разделе. Выберите предустановку, выберите значок или изображение, добавьте текст и ссылки, а затем создайте стиль поля в соответствии со своей страницей. Чтобы узнать о соответствующих инструментах макетирования, см Виджет Flipbox и Виджет "Член команды", просмотр всего Виджеты и расширения Master Addgetsи проверьте страница ценообразования за то, что включает каждый план.
