Как добавить виджет горизонтальных вкладок в Weebly?

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

Добавление горизонтальных вкладок с помощью приложения вкладок по умолчанию

Центр приложений – это торговая площадка, где вы можете найти все приложения Weebly и сторонних производителей, например, приложение Tabs.

  • Как только вы войдете в редактор сайта Weebly, перейдите в Центр приложений через «Сборка> Приложения».
  • Используйте поле поиска в правом верхнем углу, чтобы ввести «вкладки» и нажмите Enter.
  • Вы увидите приложение «Вкладки» в результатах поиска и щелкните его, чтобы просмотреть подробности.
  • Нажмите кнопку «Добавить» и подключите приложение к своему сайту Weebly.
Подключение приложения Tabs к Weebly Site

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

Вкладки, созданные с помощью приложения Weebly Tabs
Вкладки, созданные с помощью приложения Weebly Tabs

Особенности приложения Tabs

Пользователи могут настраивать следующее в приложении вкладок:

  • Добавляйте неограниченное количество вкладок – мы рекомендуем ограничить до 4 или 5 вкладок максимум, чтобы не зацикливаться на редакторе. Также большее количество вкладок будет иметь проблемы с читаемостью на мобильных устройствах.
  • Настройте цвет активных, неактивных вкладок и границы.
  • Перетащите любые элементы внутри области содержимого вкладок. Вы можете карты, контактную форму, слайд-шоу и т. Д. Внутри области содержимого вкладок.
  • Выберите одну из тем – стандартную, линейную, материальную и простую – для содержимого с вкладками.

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

Пользовательские вкладки для сайта Weebly

В Интернете доступно множество готовых вкладок CSS и jQuery, которые вы можете добавить с небольшими изменениями. Одна из таких настраиваемых вкладок – это закодированные капли, созданные с помощью CSS. Это особенно удобно, когда у вас есть только текстовое содержимое для добавления во вкладки. Ниже показано, как будут выглядеть вкладки, и вы можете просмотреть живую демонстрацию здесь.

Виджет горизонтальных вкладок
Виджет горизонтальных вкладок

Ниже приведен полный код CSS для виджета горизонтальных вкладок. Вы можете вставить его на свой сайт Weebly в раздел «Код заголовка» страницы.

Добавить код заголовка на страницу
Добавить код заголовка на страницу
<style>
.tabs {
position: relative;
width: 100%;
}

.tabs input {
position: absolute;
z-index: 1000;
width: 160px;
height: 40px;
left: 0px;
top: 0px;
opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
cursor: pointer;
}

.tabs input#tab-2{
left: 160px;
}

.tabs input#tab-3{
left: 320px;
}

.tabs input#tab-4{
left: 480px;
}

.tabs label {
background: skyblue;
font-size: 16px;
line-height: 40px;
position: relative;
padding: 0 20px;
float: left;
display: block;
color: #333333;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: bold;
text-align: center;
text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
border-radius: 3px 3px 0 0;
box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
}

.tabs label:after {
content: '';
background: #fff;
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
display: block;
}

.tabs input:hover + label {
background: #f1f1f1;
}

.tabs label:first-of-type {
z-index: 4;
box-shadow: 2px 0 2px rgba(0,0,0,0.1);
}

.tab-label-2 {
z-index: 3;
}

.tab-label-3 {
z-index: 2;
}

.tab-label-4 {
z-index: 1;
}

.tabs input:checked + label {
background: #f8f8f8;
z-index: 6;
}

.clear-shadow {
clear: both;
}

.content {
background: rgba(96, 125, 139, 0.16);
position: relative;
width: 100%;
height: 300px;
z-index: 5;
box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
border-radius: 0 3px 3px 3px;
}

.content div {
position: absolute;
top: 0;
left: 0;
padding: 10px 40px;
z-index: 1;
opacity: 0;
-webkit-transition: opacity linear 0.1s;
-moz-transition: opacity linear 0.1s;
-o-transition: opacity linear 0.1s;
-ms-transition: opacity linear 0.1s;
transition: opacity linear 0.1s;
}

.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4 {
z-index: 100;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition: opacity ease-out 0.2s 0.1s;
-moz-transition: opacity ease-out 0.2s 0.1s;
-o-transition: opacity ease-out 0.2s 0.1s;
-ms-transition: opacity ease-out 0.2s 0.1s;
transition: opacity ease-out 0.2s 0.1s;
}

.content div h2,
.content div h3{
color: lightslategrey;
padding: 20px;
}

.content div p {
font-size: 20px;
line-height: 28px;
font-style: italic;
text-align: left;
color: #777;
padding-left: 15px;
font-family: Cambria, Georgia, serif;
border-left: 8px solid rgba(63,148,148, 0.1);
}

</style>

Ниже приведен HTML-код для вкладок, который можно вставить с помощью элемента «Код для вставки».

<section class="tabs">
<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
<label for="tab-1" class="tab-label-1">This is Tab 1</label>
<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
<label for="tab-2" class="tab-label-2">This is Tab 2</label>
<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
<label for="tab-3" class="tab-label-3">This is Tab 3</label>
<input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
<label for="tab-4" class="tab-label-4">This is Tab 4</label>
<div class="clear-shadow"></div>
<div class="content">

<!-- This is a content for Tab 1 -->
<div class="content-1">
<h2>Heading 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h3>Sub-Heading 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<!-- This is a content for Tab 2 -->
<div class="content-2">
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h3>Sub-Heading 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<!-- This is a content for Tab 3 -->
<div class="content-3">
<h2>Heading 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h3>Sub-Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<!-- This is a content for Tab 4 -->
<div class="content-4">
<h2>Heading 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<h3>Sub-Heading 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</section>

Мы делаем первый заголовок на вкладке (это вкладка 1) размером 160 пикселей и увеличиваем до 320 пикселей и 480 пикселей для последующих заголовков. Вы можете настроить его соответствующим образом, чтобы интерактивная область соответствовала заголовку вкладки. Преимущество виджета с настраиваемыми вкладками заключается в том, что вы можете подготовить контент в автономном режиме и вставить на свой сайт за несколько минут. Если вы хотите изменить порядок вкладок, вы можете сделать это в автономном режиме и просто заменить старый код новым.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *