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

Модификация для отображения стандартных блоков Тильды 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>

Заключение

Если у вас есть дополнительные пожелания к данной модификации, напишите мне, и я допишу код под ваши требования.

Понравилась статья?

Будьте в курсе

Подписывайтесь на мой ТГ канал

Там я пишу о разработке сайтов на Тильде, дизайне и делюсь полезными ресурсами, статьями и модификациями.

Перейти в канал