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