Виджет участника команды Elementor: как представить свою команду

Опубликовано: 2023-06-10

Хотя на многих бизнес-сайтах его нет, страница, представляющая вашу команду, или страница «Знакомство с командой», очень важна. Это помогает посетителям познакомиться с вашей услугой или продуктом на продвинутом уровне, поскольку они могут связать продукт с людьми, стоящими за ним . Страница «Знакомство с командой» или «Команда» , как бы вы ее ни называли, по сути является подстраницей вашей страницы «О нас» . Вместе эти две страницы показывают посетителям, как ваша команда работает и слаженно работает над созданием продукта или услуги, которую вы предлагаете.

Страница команды в идеале должна включать:

  • Изображение или, чаще, аватар члена команды
  • Имя и фамилия
  • Позиция в команде
  • Социальные и контактные ссылки

Виджет Elementor Team Member от знаменитого Qi Addons — отличное решение, если вы ищете надежный виджет. Вы можете отображать сколько угодно членов вашей команды , будь то пять или пятьдесят, или даже больше. Вы можете очень легко настроить стиль, выбрать шрифты, цвета, социальные иконки . Кроме того, этот виджет члена команды Elementor предлагает ряд доступных макетов, с которыми вы можете ознакомиться на демонстрационной странице виджета . Мы покажем вам, как использовать его для отображения вашей команды шаг за шагом, и, если вы предпочитаете, есть также видеоурок:

Виджет Elementor Team Member — один из бесплатных дополнений Qi. В дополнение к этому, Qi Addons для Elementor имеет более 100 других полезных и удивительных виджетов (как бесплатных, так и премиальных), поэтому, если вы ищете надстройки, которые действительно могут творить чудеса для вашего сайта, мы не можем рекомендовать эту коллекцию. достаточно сильно. В сочетании с темой Qi это действительно что-то другое.

  • Шаг 1: Установите Qi Addons для Elementor
  • Шаг 2: Добавьте виджет члена команды Elementor на свою страницу WordPress.
  • Шаг 3: Добавьте контент
  • Шаг 4: Стилизация виджета
  • Шаг 5: Добавление других членов команды

Шаг 1: Установите Qi Addons для Elementor

Чтобы получить доступ к этому виджету, вам необходимо установить Qi Addons для Elementor. Просто сделайте это так же, как при установке любого другого плагина : Плагины > Добавить новый . Установите его и активируйте его, и все. Теперь вы найдете его в списке виджетов на каждой странице вашего сайта.

Install Qi addons for Elementor

Как мы уже говорили, Qi Addons имеет более 100 виджетов, и многие из них бесплатны . Это означает, что при установке Qi вы получаете не только виджет Team Member, но и все остальные бесплатные виджеты. Здесь следует отметить, что в самом плагине вы можете легко деактивировать виджеты, которые вы не хотите использовать, и, таким образом, избавить свой сайт от ненужной нагрузки .

Найдите надстройки Qi для Elementor на панели инструментов после установки плагина и перейдите в раздел «Виджеты». Здесь вы найдете список всех виджетов, которые у вас есть, и здесь вы можете просто деактивировать те, которые вам не нужны . Опять же, там есть много полезных, так что взгляните и посмотрите, есть ли что-нибудь еще, что может помочь сделать ваш сайт лучше и функциональнее. Конечно, вы всегда можете повторно активировать виджеты, когда это необходимо.

Deactivate widgets

Шаг 2: Добавьте виджет члена команды Elementor на свою страницу WordPress.

Вы добавите этот виджет на страницу так же, как и любой другой. Найдите его среди элементов и просто перетащите на страницу .

Важно отметить, что когда вы добавляете один виджет «Команда», он представляет одного человека в вашей команде . Вот почему первое, что нужно сделать, это добавить на свою страницу строку с количеством столбцов, равным количеству членов вашей команды, поскольку в каждом столбце будет один виджет (член команды).

Elementor team member-widget

Совет: не создавайте виджеты сразу для всех участников. Вместо этого добавьте первый, стилизуйте его, а затем скопируйте (все параметры стилей также будут скопированы) и просто измените информацию (имя, ссылки и т. д.).

Шаг 3: Добавьте контент

Как только вы перейдете к параметрам виджета Elementor Team Member, вы увидите, что они разделены на три вкладки. Первые два относятся к этому виджету, а последний — стандартный виджет Elementor, поэтому мы не будем его здесь рассматривать .

Первая — это вкладка «Содержимое» . Здесь вы будете добавлять весь контент, такой как имя и фамилия, изображение, должность и социальные ссылки. Здесь вы также выберете макет. Все остальные параметры стилей находятся на следующей вкладке.

Это очень интуитивно понятный виджет, поэтому нет необходимости объяснять все до мельчайших деталей — вы увидите, что с ним очень легко работать. Конечно, каждое сделанное вами изменение мгновенно отображается на экране справа.

Content tab of Elementor team member widget

Что касается макетов, то они довольно понятны. Чтобы вдохновиться и увидеть несколько примеров работы виджета, перейдите на демонстрационную страницу виджета. Конечно, вы можете поиграться с виджетом, экспериментировать и тестировать, пока не достигнете желаемого результата .

Elementor team member widget layout

Нет никаких ограничений на количество отображаемых социальных сетей . Для каждого из них вы можете выбрать значок и добавить ссылку.

Elementor team member widget social

Все макеты имеют одинаковые параметры содержимого. Только Info on Hover Insert имеет дополнительную опцию Text . Вы можете использовать его, чтобы предоставить дополнительную краткую биографию или другую соответствующую информацию, которая будет отображаться, когда посетитель наводит курсор мыши.

Info on hover options

Мы добавили нашего первого члена команды, и это то, что нравится виджету при добавлении контента. Перейдем к вариантам укладки.

WodPress team member-widget after adding content

Шаг 4: Стилизация виджета

Элементы оформления виджета расположены на второй вкладке . Стиль разделен на три сегмента . Опять же, все очень интуитивно понятно и просто в использовании, и предлагает широкий спектр возможностей.

Elementor team member widget style tab

Сегмент « Стиль» позволяет настроить цвет и типографику текстового содержимого (имя и фамилия, должность, краткая биография) . Здесь вы также можете добавить другой ховер для изображения . Доступные здесь параметры зависят от выбранного вами типа макета.

Styling team element

Всего за пару минут мы настроили контент под наши нужды. На изображении ниже показано состояние наведения — значки социальных сетей другого цвета, а курсор на красном, поэтому виджет отображает другой цвет, который мы установили в параметрах.

Team member content style

Параметры стиля интервала очень важны, потому что вам часто потребуется точно настроить интервал между элементами виджета. Хорошая новость заключается в том, что в этом виджете можно установить почти все интервалы, причем очень просто.

Team member spacing style

Последний сегмент стилизации касается выравнивания. Здесь у вас есть три стандартных варианта выравнивания, как и везде в WordPress — слева, справа и по центру.

Team member content alignment

Шаг 5: Добавление других членов команды

После того, как вы добавили и настроили один дисплей участника команды, все, что вам нужно сделать, это скопировать его столько раз, сколько у вас есть членов команды . Таким образом вы убедитесь, что все элементы виджета (все члены команды) одинаковы. Конечно, если вы хотите сделать их разными или объединить разные стили, вы тоже можете это сделать. Просто изменить информацию, и все!

Elementor team widget

В этом примере все члены команды имеют одинаковый стиль и выглядят одинаково, за исключением того, что мы решили немного поиграть и сделали одного из них больше. Как мы сказали в начале, это достигается установкой столбцов в строке.

Давайте завернем это!

Как мы видели, благодаря необычному виджету Elementor Team Member из коллекции Qi Addons for Elementor, одному из лучших командных плагинов для WordPress , создание современного, стильного и привлекательного отображения вашего персонала или команды стало проще, чем когда-либо. Страница или раздел «Команда» помогут вам установить более тесные отношения с вашей аудиторией и могут значительно помочь в превращении их в клиентов или заказчиков.

Виджет разработан в соответствии с высочайшими стандартами производительности и дизайна, поэтому, используя его, вы убедитесь, что ваши страницы выглядят очень профессионально, современно и надежно. А благодаря богатым возможностям виджета возможности практически безграничны!

Мы надеемся, что эта статья была полезной. Если вам понравилось, не стесняйтесь проверить некоторые из этих статей!

  • Лучшие SEO-плагины для WordPress
  • Бесплатные темы WordPress для разных компаний
  • Как создать свою собственную страницу магазина Elementor WooCommerce