Платформа Tilda є одним із найпопулярніших інструментів для створення сайтів без необхідності знання програмування. Вона надає користувачам зручний та інтуїтивно зрозумілий інтерфейс, а також безліч функціональних можливостей.
Однією з таких можливостей є створення табів – блоків, які дають змогу відображати різний контент на одній сторінці. Таби особливо корисні, коли потрібно представити велику кількість інформації в обмеженому просторі.
Для створення табів у Tilda необхідно використовувати спеціальний блок “Таби”. Він дає змогу додати кілька вкладок, кожна з яких містить свій контент. Користувач може перемикатися між вкладками, щоб переглянути потрібну інформацію.
| Tab | HTML-код | CSS-стилі | JavaScript-код |
|---|---|---|---|
| Таб 1 | <div class=”tab” id=”tab1″> <button class=”tab-btn” onclick=”openTab(‘tab1’)”>Tab 1</button> <div class=”tab-content”>Вміст таба 1</div> </div> | .tab { display: none; } .tab-content { display: none; } .active { display: block; } | function openTab(tabId) { var tab = document.getElementById(tabId); var tabs = document.getElementsByClassName(‘tab’); var content = document.getElementsByClassName(‘tab-content’); for (var i = 0; i < tabs.length; i++) { tabs[i].classList.remove('active'); content[i].style.display = 'none'; } tab.classList.add('active'); tab.getElementsByClassName('tab-content')[0].style.display = 'block'; } |
| Таб 2 | <div class=”tab” id=”tab2″> <button class=”tab-btn” onclick=”openTab(‘tab2’)”>Таб 2</button> <div class=”tab-content”>Вміст табу 2</div> </div> | .tab { display: none; } .tab-content { display: none; } .active { display: block; } | function openTab(tabId) { var tab = document.getElementById(tabId); var tabs = document.getElementsByClassName(‘tab’); var content = document.getElementsByClassName(‘tab-content’); for (var i = 0; i < tabs.length; i++) { tabs[i].classList.remove('active'); content[i].style.display = 'none'; } tab.classList.add('active'); tab.getElementsByClassName('tab-content')[0].style.display = 'block'; } |
| Таб 3 | <div class=”tab” id=”tab3″> <button class=”tab-btn” onclick=”openTab(‘tab3’)”>Таб 3</button> <div class=”tab-content”>Вміст табу 3</div> </div> | .tab { display: none; } .tab-content { display: none; } .active { display: block; } | function openTab(tabId) { var tab = document.getElementById(tabId); var tabs = document.getElementsByClassName(‘tab’); var content = document.getElementsByClassName(‘tab-content’); for (var i = 0; i < tabs.length; i++) { tabs[i].classList.remove('active'); content[i].style.display = 'none'; } tab.classList.add('active'); tab.getElementsByClassName('tab-content')[0].style.display = 'block'; } |
Як зробити вкладки з блоків у Tilda?
Щоб зробити вкладки, потрібно додати на сторінку блок ME602 або ME603 з розділу Меню . Блок дає змогу створювати на сторінці вкладки та показувати різний контент за кліком на відповідну вкладку в межах однієї сторінки. Потім нижче послідовно розташувати всі блоки, які змінюватимуться при кліці на вкладку.
Що таке таби на сайті?
У цій статті ми розглянемо, як створити сайт із використанням табів для перемикання контенту. Таби – це зручний спосіб організації інформації на веб-сторінці, що дає змогу розділити контент на кілька секцій і відображати їх по черзі під час натискання на відповідні вкладки.
Як зробити слайдер із блоків Тільда?
Щоб створити слайдер, додайте на сторінку блоки GL01, GL19, GL20, GL21 з категорії “Галерея” або блок CR30N з категорії “Обкладинка” . Задати автоматичну зміну слайдів у мілісекундах можна в Налаштуваннях блоку → Стиль галереї.
