10 июня, 2024

Текст в раскрывающихся карточках на Тильде на всю ширину экрана

Модификация для отображения стандартных блоков Тильды TX16N и TX16N2 (текст в раскрывающихся карточках) на всю ширину экрана, а также замена в них стандартной иконки на свою.
Как сделать блоки на всю ширину
Данная модификация растягивает стандартные блоки текста в раскрывающихся карточках (TX16N и TX16N2) на всю ширину экрана с отступами по 40рх по краям на всех экранах, начиная с 961рх по ширине.

Для случая, когда карточки расположены в два столбца, между ними расстояние также равно 40рх.
Внимание!

Для данной модификации вы можете настраивать у блоков любую ширину в колонках, они все равно растянутся на весь экран в один или два столбца.
Добавьте на страницу блок Т123 и вставьте туда тот код, который подходит под ваш запрос.
Блок TX16N в один столбец:
<style>
@media (min-width: 961px) {
.t585 .t-container {
    max-width: 100%;
}
.t585 .t-col {
    max-width: 100%;
    margin-left: 40px;
    margin-right: 40px;
    padding: 0;
}
}
</style>
Блок TX16N в два столбца:
<style>
@media (min-width: 961px) {
.t585 .t-container {
    max-width: calc(100% - 40px);
}
.t585 .t-col {
    max-width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    padding: 0;
}
}
</style>
Блок TX16N2 в один столбец:
<style>
@media (min-width: 961px) {
.t668 .t-container {
    max-width: 100%;
}
.t668 .t-col {
    max-width: 100%;
    margin-left: 40px;
    margin-right: 40px;
    padding: 0;
}
}
</style>
Блок TX16N2 в два столбца:
<style>
@media (min-width: 961px) {
.t668 .t-container {
    max-width: calc(100% - 40px);
}
.t668 .t-col {
    max-width: calc(50% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    padding: 0;
}
}
</style>
Как заменить стандартную иконку на свою
Для начала создайте любой блок на тильде и загрузите туда два файла с вашими иконками: первая — обычная иконка, вторая — иконка при наведении. В какой блок загружать иконки — неважно, потом вы его все равно обязательно отключите (но не удаляйте!). Ваша задача загрузить иконки и скопировать ссылки на них. Проще всего это сделать в zero-блоке.

Далее добавьте на страницу блок Т123, вставьте туда код для нужного блока и замените в нем две ссылки, ведущие на ваши иконки.
Для блока TX16N:
<style>
.t585__lines {
    display: none;
}
.t585__icon:before, .t585__icon-hover:before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background-size: cover;
    position: relative;
    z-index: 10;
    transition: all 0.3s;
}
.t585__opened .t585__icon:before {
    transform: rotate(90deg);
}

.t585__icon:before {
    /*Обычная иконка*/
    background-image: url(https://static.tildacdn.com/tild3331-3436-4732-a365-643732386562/Frame_39843.svg);
}
.t585__icon-hover:before {
    /*Иконка при наведении*/
    background-image: url(https://static.tildacdn.com/tild3932-3938-4835-a138-316636656530/Frame_39844.svg);
}
</style>
Для блока TX16N2:
<style>
.t668__lines {
    display: none;
}
.t668__icon:before, .t668__icon-hover:before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background-size: cover;
    position: relative;
    z-index: 10;
    transition: all 0.3s;
}
.t668__opened .t668__icon:before {
    transform: rotate(90deg);
}

.t668__icon:before {
    /*Обычная иконка*/
    background-image: url(https://static.tildacdn.com/tild3331-3436-4732-a365-643732386562/Frame_39843.svg);
}
.t668__icon-hover:before {
    /*Иконка при наведении*/
    background-image: url(https://static.tildacdn.com/tild3932-3938-4835-a138-316636656530/Frame_39844.svg);
}
</style>
Заключение
Если у вас есть дополнительные пожелания к данной модификации, напишите мне, и я допишу код под ваши требования.
Понравилась статья?
Будьте в курсе
Подписывайтесь на мой ТГ канал
Там я пишу о разработке сайтов на Тильде, дизайне и делюсь полезными ресурсами, статьями и модификациями.
Перейти в канал
Похожие статьи

Модификация для отображения стандартных блоков с новостями на Тильде на всю ширину экрана, работает для FD301, FD302 и FD401

Модификация для создания собственных кнопок-стрелок для листания в бок блока с отзывами

Комментарии
Потоки на Тильде на всю ширину экрана
Предыдущая статья
Напишите мне
Хотите нанять меня? Или узнать больше о моей работе? Свяжитесь со мной, я буду рада ответить на все ваши вопросы или обсудить с вами наш новый проект.