Посетители вашего сайта хотят знать, кто стоит за брендом. хорошо продуманный член команды Элементар раздел ставит лица в ваш бизнес, формирует доверие, и делает ваш сайт чувствовать себя личным, а не корпоративным Проблема? Elementor не поставляется со специальным виджетом члена команды из коробки.
Вот где Мастер-аддоны для Elementor входит. Он дает вам два специально созданных виджета для этого: Член команды MA виджет (для макетов сетки) и Члены команды MA Карусель (для раздвижных секций команды).Оба бесплатны, и оба поставляются с 11 уникальными вариантами дизайна, которые вы можете применить одним щелчком мыши.
В этом руководстве вы точно узнаете, как это сделать создайте раздел членов команды в Elementor используя оба метода, настройте стиль и получите максимальную отдачу от всех доступных вариантов дизайна.
Почему каждому веб-сайту нужен раздел для членов команды
Люди покупают у людей Исследование Trust Barometer Эдельмана показало, что потребители гораздо чаще доверяют компании, когда видят за ней реальных людей Ваша страница “About” или “Team” часто является одной из самых посещаемых страниц на всем вашем сайте.
Вот что хорошего раздел членов команды в Элементоре делает для вашего сайта:
- Повышает доверие прежде чем связаться, визиторы могут увидеть, с кем они работают
- Создает личные связи Фотографии и короткие биографии сделают ваш бренд интересным
- Увеличивает конверсии ush-сигналы, как командные фотографии
- Улучшает брендинг работодателя – покажите работу своей команде
- Снижает показатели отказов разделы Eng сохраняют на странице дольше
Независимо от того, управляете ли вы небольшим агентством, компанией SaaS или местным бизнесом, добавление командного раздела на ваш сайт WordPress занимает 10 минут и оказывает измеримое влияние.
Что включить в раздел "Член вашей команды"
Прежде чем перетаскивать какой-либо виджет на страницу, спланируйте, какую информацию должна показывать каждая командная карта. вот краткая разбивка, что включить и что пропустить:
| Элемент | Приоритет | Почему это важно |
|---|---|---|
| Фото | Существенный | Люди обрабатывают лица быстрее, чем текст. используйте последовательные, профессиональные снимки головы. |
| Имя | Существенный | Должен появиться непосредственно рядом или под фотографией, чтобы соединение было мгновенным. |
| Назначение/Название должности | Существенный | Рассказывает посетителям, какую роль этот человек играет в команде. |
| Краткое описание | Рекомендуется | Биография из 1-2 предложений. Сохраняйте это человеческим и личностным. |
| Ссылки на социальные сети | Рекомендуется | Позволяет посетителям подключаться к LinkedIn, Twitter или другим каналам. |
| Электронная почта или телефон | Необязательно | Добавляйте только в том случае, если вам нужен прямой контакт (обычно для команд с высокими продажами). |
Совет профессионала: Сохраняйте единообразие снимков головы в команде. один и тот же цвет фона, схожие обрезки и соответствующие размеры изображения (300x300px или 400x400px хорошо работают) делают весь раздел отполированным.
Что понадобится перед началом
Чтобы следовать этому руководству, убедитесь, что у вас есть:
- WordPress установлен и запущен (любая недавняя версия)
- Элементор (бесплатно или Pro) — работает с обоими
- Мастер-аддоны для Elementor (бесплатная версия) (бесплатная версия) скачать с сайта WordPress.org
- Фотографии членов команды готовы к загрузке (выстрелы головой, рекомендуется квадратное соотношение)
После установки и активации Master Addons вы найдете Член команды MA и Члены команды MA Карусель виджеты внутри редактора Elementor под вкладкой “MASTER ADDONS”.
Как создать раздел сетки участников команды Elementor
Схема сетки идеальна, когда вы хотите отобразить свою команду в чистом структурированном формате с несколькими столбцами. Вот как настроить ее шаг за шагом:
Шаг 1: Вставьте новый раздел
Откройте любую страницу в редакторе Elementor. щелкните значок “+”, чтобы добавить новый раздел. выберите предпочитаемую структуру столбцов. для командного раздела лучше всего работает макет из 3 столбцов или 4 столбцов.
Шаг 2: Добавьте внутренний раздел
Если вам нужен больший контроль над интервалом и раскладкой, перетащите Внутренняя секция виджет внутри вашего основного раздела. Это дает вам вложенные столбцы, где каждая карта члена команды находится независимо.
Создайте столько столбцов, сколько вам нужно для размера вашей команды Три столбца в строке - наиболее распространенный выбор для настольных дисплеев.
Шаг 3: Перетащите виджет участника команды MA
На панели Элементор слева прокрутите вниз до МАСТЕР АДДОНЫ вкладка (или просто поиск “MA Team Member” в строке поиска).Перетащите Член команды MA виджет в одну из ваших колонок.
Сразу увидите, как появится карточка участника команды по умолчанию с изображением-заполнителем, именем, обозначением, социальными значками.
Шаг 4: Повторите для каждого члена команды
Дублируйте виджет или перетащите новый Член команды MA виджет в каждый оставшийся столбец. каждый виджет представляет одного члена команды, поэтому вы имеете полный контроль над отдельными картами.
Совет профессионала: Щелкните виджет правой кнопкой мыши и выберите “Duplicate”, чтобы скопировать его со всем сохранным стилем. Затем просто поменяйте фотографию и текст на каждого нового члена команды.
Настройка содержимого виджета члена команды Elementor
Нажмите на любой Член команды MA виджет для открытия своих настроек. The Вкладка Содержимое это место, где вы добавляете все личные данные каждого члена команды.
Подробности о члене команды
Вкладка "Содержимое" в виджет члена команды Элементар дает вам поля для:
- Изображение outcome photo. Вы также можете установить размер изображения и выбрать индивидуальное соотношение сторон.
- Имя – полное имя члена команды. Это отображается как тег заголовка, поэтому выберите соответствующий тег HTML (H3 или H4 типичен для карт команды).
- Обозначение “ Название, роль или должность (например, “Lead Designer” или “Co-Founder & CEO”).
- Описание — Короткая биография или слоган. Сохраните его в 1-2 предложениях для самого чистого вида.
Профили социальных сетей
Ниже основных деталей вы найдете раздел социальных сетей Добавить ссылки на профили каждого члена команды Виджет поддерживает все основные платформы, в том числе
- Фейсбук
- Твиттер /Х
- Инстаграм
- ГитХаб
- Пользовательские URL-адреса с пользовательскими значками
Социальные ссылки появляются в виде маленьких значков под информацией члена команды Они открываются в новой вкладке по умолчанию, поэтому посетители не покинут вашу страницу.
Вкладка "Стиль": вариации и предустановки дизайна
Вот где Член команды MA виджет действительно выделяется на основе базовых обходных путей Elementor. Вместо того, чтобы создавать дизайн командных карт с нуля, вы получаете 11 уникальных вариаций дизайна и 5 предустановок стиля на выбор из.
Вариации дизайна
Нажмите на Вкладка Стильзатем откройте Общие стили панель. Вы найдете раскрывающийся список с надписью “Design Variation.” Выберите любой из 11 вариантов, и виджет мгновенно реструктурирует макет карты. в некоторых вариантах изображение ставится над текстом. Другие используют параллельные макеты. Некоторые добавляют эффекты наложения при наведении.
Самое приятное: переключение между вариациями не стирает ваш контент. Ваше имя, фотография, биография и социальные ссылки остаются нетронутыми. Вы можете попробовать все варианты и остановиться на том, который соответствует дизайну вашего сайта.
5 предустановок стиля
В рамках панели "Общие стили" вы также найдете 5 предустановок стиля. Это предварительно настроенные комбинации цвета и макета, которые придают вам отполированный вид одним щелчком мыши.
Ручные элементы управления стилем
Для полного творческого контроля вкладка Стиль также позволяет настроить:
- Цвет фона Набор сплошного цвета, градиента или прозрачного фона для каждой карты
- Выравнивание контента — слева, центр или справа выровнять весь текст и значки
- Типографика Полный размер, вес, высота строки и расстояние между буквами для имени, обозначения и описания отдельно
- Текстовые цвета Различные цвета для имени, обозначения и текста описания
- Социальные цвета значков Значок Customize для нормальных состояний и для зависания
- Расстояние и набивка — Fine-настройте пространство между элементами внутри карты
- Радиус границы и границы — Добавить границы или по углам карты
- Коробка Тень – тонкие теневые эффекты для глубины
Для полного прохождения каждого варианта стиля проверьте Документация для членов команды MA.
Как создать карусель для членов команды в Элементоре
Есть более крупная команда? Члены команды MA Карусель виджет позволяет добавлять неограниченное количество членов команды в одном скользящем разделе. Это лучше подходит, когда у вас 6+ членов команды и вы не хотите заполнять целую страницу сеткой.
Вот как карусель членов команды в Элементоре работы:
Шаг 1: Перетащите карусельный виджет участников команды MA
В отличие от метода сетки, вы это делаете не нужен внутренний раздел или несколько столбцов. просто добавьте новый раздел с одним столбцом, затем найдите “MA Team Members Carousel” и перетащите его внутрь.
Шаг 2: Добавьте членов своей команды
Внутри виджета вы увидите поле ретранслятора Каждый пункт в ретрансляторе представляет одного члена команды Нажмите “Add Item” для создания новых карт Для каждой карты заполните:
- Фото
- Имя
- Обозначение
- Описание
- Ссылки на социальные сети
Можно добавить сколько угодно членов команды Нет предела Карусель с одинаковой легкостью обрабатывает 5 членов или 50 участников.
Шаг 3: Установите тег заголовка
Определите тег заголовка HTML для имен членов вашей команды (H2, H3, H4 и т. д.). Для большинства страниц H3 или H4 - правильный выбор, поскольку заголовок раздела выше обычно представляет собой H2.
Настройки карусели: навигация, столбцы и автовоспроизведение
Виджет карусели поставляется со специальной панелью настроек для управления тем, как ведет себя ползунок Вот что можно настроить:
Столбцы и элементы для прокрутки
Установите, сколько членов команды появляется на экране одновременно Вы можете показать 2, 3, 4 или более столбцов в зависимости от ширины макета.Настройка “Items to Scroll” управляет тем, сколько карт перемещается, когда посетитель нажимает на навигационную стрелку.
| Размер экрана | Рекомендуемые столбцы | Предметы для прокрутки |
|---|---|---|
| Рабочий стол (1200px+) | 3-4 столбца | 1-2 |
| Планшет (768px-1199px) | 2-3 столбца | 1 |
| Мобильный (ниже 768px) | 1 колонка | 1 |
Стиль навигации
Вы получаете два типа навигации:
- Стрелки – слева и кнопки со стрелками справа по бокам карусели. Лучше всего подходит для рабочего стола, где часто встречаются взаимодействия с наведением.
- Точки indicators Small dot ниже автомобиля, показывающий общее количество слайдов и текущее положение. Хорошо работает как на настольном компьютере, так и на мобильном телефоне.
Вы можете включить один, оба, или ни то, ни другое. если вы включите автовоспроизведение, некоторым пользователям может даже не понадобиться ручная навигация.
Автовоспроизведение
Переключить автовоспроизведение на и установить длительность в миллисекундах. значение 3000-5000ms (3-5 секунд) дает посетителям достаточно времени, чтобы прочитать каждую карту до движения ползунка. вы также можете включить паузу на зависании, чтобы ползунок останавливался, когда кто-то зависает над картой.
Варианты стиля карусели
Как и виджет сетки, карусель поставляется с 5 предустановок стиля и полное ручное управление:
- Набивка предметов (пространство между каждой командной картой)
- Типографика имени, обозначения и описания
- Цвета для каждого текстового элемента
- Фоновые и пограничные настройки для каждой карты
- Навигационная стрелка/точка стиль и цвета
Полную ссылку на настройки см. в разделе Члены команды Документация по карусели.
Советы по улучшению командного раздела
После создания сотен командных разделов вот небольшие детали, которые отделяют хорошую командную страницу от отличной:
- Используйте реальные фотографии, а не стоковые изображения. Посетители могут отличить. подлинные снимки головы создают больше доверия, чем когда-либо будут полированные стоковые фотографии.
- Сохраняйте описания краткими и последовательными. Если у одного человека есть биография из 3 предложений, а у другого - полный абзац, это создает визуальный дисбаланс. Цельтесь на одинаковую длину по всем картам.
- Точно совпадайте с размерами изображения. Загрузите все снимки головы с одинаковым разрешением (например, 400x400px).Несовпадающие размеры нарушают выравнивание сетки.
- Включайте только активные социальные профили. Мертвая ссылка LinkedIn хуже, чем отсутствие ссылки вообще Придерживайтесь платформ, которые ваша команда действительно использует.
- Тест на мобильном. Особенно карусельные секции нуждаются в мобильном тестировании. убедитесь, что карты читаемы, а навигационные точки легко нажимаются.
- Используйте карусель для 6+ участников. Если у вас 3-4 члена команды, сетка выглядит чище.Сохраните карусель для больших команд, где прокрутка становится необходимой.
Член команды MA против членов команды MA Карусель: какую следует использовать?
| Особенность | Член команды MA (сеть) | Члены команды MA Карусель |
|---|---|---|
| Лучший для | Малые команды (2-6 членов) | Более крупные команды (6+ участников) |
| Макет | Статические столбцы (вы управляете сеткой) | Скользящая карусель с автоматической/ручной навигацией |
| Настройка | По одному виджету на члена команды во внутренних разделах | Одиночный виджет с полем ретранслятора |
| Вариации дизайна | 11 вариаций | 5 предустановок стиля |
| Навигация | Не нужно (все видно) | Стрелки, точки, автоигра |
| Пространство страницы | Требует больше вертикального пространства | Компактный, экономит место |
| Индивидуальный контроль карты | Полный (каждый виджет независим) | Унифицированный стиль всех карт |
Для большинства веб-сайтов малого бизнеса подход сетки с 3-4 членами команды является сладкой точкой. если ваша команда вырастает больше 6 человек, переключитесь на карусель, чтобы сохранить страницу чистой.
Хотите изучить полный список доступных виджетов? Посмотрите полная библиотека виджетов Master Addget с более чем 80 виджетами и расширениями.
Часто задаваемые вопросы
Есть ли у Elementor встроенный виджет члена команды?
Нет. Элементор (бесплатно или Про) не включает выделенный виджет члена команды. вам нужен сторонний аддон, как Мастер Аддоны чтобы получить специально созданную виджет члена команды Элементар с предустановками дизайна, социальными ссылками и вариантами каруселей.
Виджет MA Team Member бесплатен?
Да. как член команды MA, так и члены команды MA Виджеты карусели доступны в бесплатной версии Master Addons for Elementor.Вы можете загрузите его с сайта WordPress.org бесплатно. для некоторых усовершенствованных вариантов дизайна может потребоваться версия Pro.
Сколько членов команды я могу добавить в карусель?
Нет предела. карусель членов команды MA использует поле ретранслятора, поэтому вы можете добавить столько членов команды, сколько нужно вашей странице. виджет обрабатывает 5 или 50 карт без проблем с производительностью. просто установите видимые столбцы и позвольте ползунку обрабатывать остальные.
Могу ли я использовать разные дизайны для разных членов команды?
С сеткой макет (виджет MA Team Member), да. так как каждый член команды является отдельным виджетом, вы можете применить различные вариации дизайна к каждой карте В карусели все карты имеют один и тот же дизайн предустановленный для визуальной согласованности.
Какой размер изображения мне следует использовать для фотографий членов команды?
Квадратные изображения между 300x300px и 500x500px работают лучше всего. сохраняйте все фотографии одинаковых размеров для согласованного выравнивания. формат JPEG или WebP на уровне 80% дает вам хорошее визуальное качество без больших размеров файлов, которые замедляют вашу страницу.
Связанное чтение
Завершение
Создание а раздел членов команды в Элементоре не требует пользовательского кода или дорогостоящих дополнений для создания страниц. с помощью двух командных виджетов Master Addons вы можете перейти от пустого раздела к полностью стилизованной командной странице менее чем за 10 минут.
Для небольших команд используйте Член команды MA виджет в сетке. Для больших команд переключитесь на Члены команды MA Карусель для слайдера, экономящего пространство. оба варианта дают вам предустановки дизайна, интеграцию с социальными сетями, а также полную типографику и управление цветом.
Начните работу с Master Add и создайте командный раздел, которому ваши посетители действительно будут доверять.
