TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Как добавить виджет члена команды в Weebly?

5

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

Приложение Weebly Team Member

Вы можете подключить к своему сайту бесплатное приложение «Team Cards» из центра приложений Weebly. Это простой вариант, поскольку приложение также разработано разработчиками Weebly.

Как добавить виджет члена команды в Weebly?

Приложение Weebly Team Cards

Однако в приложении много ошибок, что создает неудобства для пользователей, когда вы пытаетесь редактировать контент в редакторе. Всплывающее окно настроек скроет контент, который вы хотите редактировать, и будет вас все время раздражать. Прошло более 5 лет, и Weebly не исправляла и не оптимизировала это приложение. Поэтому вместо того, чтобы ждать, пока Weebly обновит приложение, вы можете попробовать следующие карточки участников команды.

Давайте подумаем о типичном виджете члена команды с социальными профилями и обсудим далее, как добавить виджет члена команды на сайт Weebly с помощью традиционного элемента «Вставить код ». Виджет, о котором мы говорим, будет выглядеть ниже с двумя карточками участников.

Как добавить виджет члена команды в Weebly?

Виджет панели участника команды

Особенности виджета члена команды

  • Каждая карточка члена команды состоит из следующих элементов:
    • Изображение профиля
    • Имя и обозначение
    • Краткое описание
    • Социальные иконки для ссылок на социальные профили
  • Вы можете добавить несколько карточек членов команды, поместив элемент «Код для вставки» рядом друг с другом.
  • Цвета и шрифты каждой карточки члена команды легко настроить по своему усмотрению.
  • В виджете используются значки социальных сетей Font awesome, что устраняет необходимость в изображениях значков социальных сетей. Вы можете добавить участникам группы значки Twitter, Facebook, Skype, LinkedIn или любые другие социальные сети. По сути, это означает, что вы можете добавлять разные наборы социальных иконок для разных членов команды в зависимости от их профиля.

Шаги по добавлению виджета члена команды

Ниже приведены шаги по добавлению виджета члена команды на ваш сайт Weebly.

  • Связывание иконок CSS
  • Добавление кода CSS
  • Загрузка изображений профиля
  • Добавление HTML-кода

Шаг # 1 – Связывание значков CSS

Первый шаг – связать исходный CSS-код значков font awesome с вашим сайтом. Войдите на свой сайт Weebly и добавьте приведенный ниже код в раздел «Настройки> SEO> Код заголовка».

<link rel="stylesheet" href="https://www.webnots.com/resources/font-awesome/css/font-awesome.min.css">

Как добавить виджет члена команды в Weebly?

Добавить код заголовка на уровне сайта Weebly

Шаг # 2 – Добавление кода CSS

Следующим шагом является добавление приведенного ниже кода CSS в файл «main.less» вашего сайта.

.team { position: relative; min-height: 1px; width:330px; } .person-details figure { display: block; overflow: hidden; background: #FFFFFF; border: 1px solid rgba(216, 216, 216, 0.73); border-radius: 5px; margin: 0; } .person-details figure figcaption { padding: 15px; } .margin-bottom-10 { margin-bottom: 10px; } .person-details figure small { font-size: 65%; } .h4 small { font-weight: normal; line-height: 1; color: #b3b3b3; } .person-details-icons { background: #bc5e43; padding: 10px; text-align: center; margin: 0; } .list-inline { padding-left: 0; list-style: none; margin-left: -5px; } .list-inline > li { display: inline-block; padding-left: 5px; padding-right: 5px; } .person-details-icons [class^="fa-"]:before, .person-details-icons [class=" fa-"]:before { color: #ffffff; padding: 0; } a:hover { opacity: 0.5; }

Как добавить виджет члена команды в Weebly?

Редактирование основного файла CSS в Weebly

Если вы добавляете этот CSS в раздел заголовка сайта или страницы, обязательно добавьте код в теги … </ style>.

Шаг № 3 – Загрузка изображений профиля

Загрузите изображения профилей членов вашей команды в раздел «Assets» редактора кода Weebly, и путь к загруженному файлу изображения должен быть таким: «http://your-weebly-site.com/files/theme/profile1.png ».

Шаг # 4 – Добавление HTML-кода

Последний шаг – добавить приведенный ниже HTML-код внутри элемента «Вставить код» на страницу, на которую вы хотите добавить членов команды.

<div class="person-details margin-bottom-30">  <div class="team"> <figure> <img style="width:330px; height:200px" src="https://img.webnots.com/2015/08/Testimonial2.jpg"> <figcaption> <h4 class="margin-bottom-10">Isabel Tietz <small>- Plugin Developer</small> </h4> <div style="text-align:justify;">Super specialist on PHP template design and development for Weebly and WordPress platforms.</div> </figcaption> <ul class="list-inline person-details-icons"> <li> <a href="#">    <i class="fa fa-twitter">   </i> </a> </li> <li> <a href="#"> <i class="fa fa-linkedin">   </i> </a> </li> <li> <a href="#"> <i class="fa fa-facebook">   </i> </a> </li> <li> <a href="#"> <i class="fa fa-skype">   </i> </a> </li> <li> <a href="#"> <i class="fa fa-google-plus">   </i> </a> </li> </ul> </figure> </div> </div>

Настройка виджета

Добавление приведенного выше HTML-кода активирует одну карточку члена команды, и вы можете настроить виджет, изменив соответствующий раздел.

  • Замените URL-адрес изображения своим собственным из шага 3 и используйте атрибуты высоты и ширины, чтобы настроить положение и видимость изображения профиля.

  • В

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

  • Используйте любые значки социальных сетей с подходящим кодом. Например, используйте код <i class = "fa fa-instagram”>, чтобы добавить значок Instagram.

  • Используйте, чтобы обеспечить разрыв между социальными элементами в зависимости от позиции на вашем сайте.

  • Замените # на социальные ссылки члена команды.

  • Добавьте больше членов команды, разместив элементы «Вставить код» рядом.

  • Вы можете изменить цвета и размер шрифта в коде CSS. Мы ограничили ширину каждой карточки команды до 330 пикселей для лучшего отображения на мобильных устройствах. Вы можете попробовать изменить эту ширину, если у вас длиннее «имя + обозначение».

Примечание. Изображения в виджете предназначены исключительно для демонстрационных целей и не указывают на реальных членов команды.

Источник записи: www.webnots.com

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. ПринимаюПодробнее