Adding tabs to your Squarespace website is a great way to organize your content and make it more user-friendly. There are two ways to add tabs in Squarespace: using the Tab Block or the Code Block.
Как создать вкладки в Squarespace?
To add tabs using the Tab Block, simply drag and drop the Tab Block into your desired location on your page. Then, click on the tab to edit the title and content. To add more tabs, click on the + icon. You can also reorder your tabs by dragging and dropping them into the desired order.
PRO TIP: Please be aware that creating tabs in Squarespace can be a complex process, and may not work as intended in all cases. If you are not familiar with the platform, we recommend seeking out professional help before attempting to create tabs.
To add tabs using the Code Block, first add a Code Block to your page.
Then, copy and paste the following code into the Code Block:
<div class="tabs"> <div class="tab"> <input type="radio" id="tab-1" name="tab-group-1" checked> <label for="tab-1">Tab One</label>
<div class="content"> Content for tab one goes here! </div> </div> <div class="tab"> <input type="radio" id="tab-2" name="tab-group-1"> <label for="tab-2">Tab Two</label> <div class="content"> Content for tab two goes here! </div> </div> ..more tabs. // Здесь вы можете стилизовать свои вкладки: .tabs { width: 100%; //Регулируйте ширину по мере необходимости display: flex;} .tab { //Стиль каждой отдельной вкладки flex: 1;} .content { //Стиль содержимого каждой вкладки background-color: lightgrey;} input[type=radio] { //Скрытие радиокнопок opacity: 0;} label { //Стиль меток (заголовок каждой вкладки) padding: 10px 20px;} label::before { //Стиль иконок (маленькие кружочки) border-radius: 50%; content: "";}
Затем вы можете изменить стиль вкладок с помощью CSS. Например, чтобы изменить ширину вкладок, добавьте следующий код в файл CSS:
.tabs {width: 100%;}.
А чтобы изменить цвет фона содержимого каждой вкладки, добавьте следующий код:
.content {background-color: lightgrey;}.