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

Як додати віджет горизонтальних вкладок у Weebly?

1

Вміст із вкладками – це простий спосіб демонстрації великої кількості вмісту на обмеженому просторі. Weebly з впровадженням свого Центру додатків пропонує багато нових додатків для додавання додаткових елементів. “Вкладки" – це один із таких додатків, який можна безкоштовно під’єднати до свого сайту. У цій статті ми обговоримо, як додати горизонтальні вкладки у Weebly за допомогою програми вкладок за умовчанням та за допомогою користувацького коду.

Додайте горизонтальні вкладки за допомогою програми "Вкладки за умовчанням"

Центр додатків-це ринок, де можна знайти всі програми Weebly та сторонніх розробників, як-от додаток Tabs.

  • Перейшовши в редактор веб -сайтів Weebly, перейдіть до Центру додатків через «Створення> Додатки».
  • Скористайтеся вікном пошуку у верхньому правому куті, щоб ввести “tabs” і натиснути Enter.
  • Ви побачите додаток Tabs в результатах пошуку та натисніть на нього, щоб переглянути деталі.
  • Натисніть кнопку «Додати» та підключіть додаток до свого сайту Weebly.

Як додати віджет горизонтальних вкладок у Weebly?

Додаток Connecting Tabs на веб -сайті Weebly

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

Як додати віджет горизонтальних вкладок у Weebly?

Вкладки, створені за допомогою програми Weebly Tabs

Особливості програми Tabs

Користувачі можуть налаштувати в додатку вкладки наступне:

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

Хоча Tabs є рідним додатком від Weebly, це не зручний для користувача додаток. Проблема в тому, що коли ви додали вміст у неправильну вкладку, неможливо перетягнути вкладку та упорядкувати послідовність. Вам потрібно видалити весь елемент і додати його знову з правильною послідовністю.

Спеціальні вкладки для сайту Weebly

В Інтернеті є багато готових вкладок CSS та jQuery, які можна додати з невеликими змінами. Одна з таких спеціальних вкладок – це кодовані кадри, створені за допомогою CSS. Це особливо підходить, якщо у вас є лише текстовий вміст, який потрібно додати всередині вкладок. Нижче показано, як будуть виглядати вкладки.

Як додати віджет горизонтальних вкладок у Weebly?

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

Нижче наведено повний код 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 пікселів для інших заголовків. Ви можете налаштувати його відповідно, щоб область натискання відповідала заголовку вкладки. Перевага користувацького віджета вкладок полягає в тому, що ви можете підготувати вміст офлайн і вставити на свій сайт за кілька хвилин. Якщо ви хочете змінити розташування вкладок, ви можете зробити це в автономному режимі і просто замінити старий код на новий.

Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі