Как сделать сокращённый текст в ZeroBlock в Tilda
Founder & Art Director
Design Director
Customers Support
Max Holden
Lucy Good
Eva Stark
We are cute
The smartest people work every day to provide the best service and to make our clients happy
Max invented our company. He is the father of our main goals and values. He has founded first core members of our team and helped them to show their unique talents in work process.
Read more
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tellus lacus, dictum eget libero fringilla, ornare volutpat neque volutpat.
Julia takes care of everything you can see. She spent five years in London learning visual communication. She uses her knowledge to make the world a little more beautiful.
Read more
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tellus lacus, dictum eget libero fringilla, ornare volutpat neque volutpat.
Eva is the voice of our brand. She spends hours to make our clients feel care and enjoy communication with the company. If you have any suggestions or ideas you can write her.
Read more
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tellus lacus, dictum eget libero fringilla, ornare volutpat neque volutpat.

Как сделать сокращённый текст в ZeroBlock в Tilda

1
Создали текстовый элемент в ZeroBlock и добавили текст
2
Разбили условно его на 2 равные части, написали посередине слово Read more и задали ему ссылку #showmore
3
Верхнему и нижнему участку текста назначили чёрный цвет через верхнюю панель редактирования
4
Добавили код на страницу, в блок Другое - Т123
В коде прописали изменяемые слова
(text == "Read more" ? "< Back" : "Read more")
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Получить полное видео
Посмотреть все видео
Создаём скрытый текст, который показывается с подменой основного текста.
Длительность видео: 14 мин
Фрагмент видео
Посмотреть видео в личном кабинете ►
Библиотека для примера

<script>
$(document).ready(function(){
$('a[href = "#showmore"]').addClass('showmore');
$('.showmore').nextAll('span').addClass('ztext hideme').hide();
$('.showmore').prevAll('span').addClass('ztext showme');
$('.showmore').click(function(event) {event.preventDefault();
$(this).prev('br').hide();
var text = $(this).text();$(this).text(text == "Read more" ? "< Back" : "Read more");
$(this).siblings('span').toggle(500);
});});
</script>
Made on
Tilda