Добавить виджет «Член команды» в Weebly »WebNots

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

Элемент карты Weebly Team

Элемент карты Weebly Team

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

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

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

Посмотреть живую демонстрацию

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

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

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

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

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

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

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

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

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

В виджете используются значки с потрясающим шрифтом. Добавьте приведенный ниже код в раздел «Настройки> SEO> Код заголовка», чтобы связать значки CSS на вашем сайте Weebly:

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

Связывание Font Awesome CSS в Weebly

Связывание Font Awesome CSS в 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;
}

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