Как в тильде установить межбуквенный интервал

Нулевой блок, или Zero Block в сервисе Tilda

21.01.2021

Сложность: средняя

7 мин.

5 108

Нулевой блок (Zero Block) — редактор в Тильде, позволяющий реализовать разнообразные концепты и идеи, создавать блоки для индивидуального адаптивного дизайна сайта и редактировать каждый элемент в них. По функциональности не уступает популярным профессиональным графическим редакторам.

Можно собрать полноценный сайт или лендинг на Tilda только из нулевых блоков или миксовать их с обычными блоками Тильды. Теперь подробнее рассмотрим интерфейс зеро блока и разберем его функционал.

Создание Zero Block

Рис. 1. Добавляем зеро блок

Переходим в меню блоков, в самом конце меню под вкладкой «Другое», находим «Нулевой блок».

Вот так выглядит добавленный зеро блок. По умолчанию в нем уже содержится ряд элементов – это шейп-файлы и блоки с текстом.

Рис. 2. Вид зеро блока

Главные функции стандартного блока сохраняются: вырезать, удалить, копировать, скрыть или переместить. Присутствуют привычные «Настройки», но кнопка «Контент» заменена кнопкой «Редактировать блок», при нажатии на нее открывается рабочая область — артборд, состоящий из 2 рабочих областей: Grid Container и Window Container.

Первая — это основная рабочая область, сетка, состоит из 12 колонок, как и в Тильде.

Рис. 3. Редактирование нулевого блока.

Вторая область — обозначает границы окна браузера. Ширина Grid Container фиксированная – 1200 px, регулировать высоту можно при помощи мышки, или прописав в настройках нужное значение. При клике на пустую область, отобразятся настройки артборда, можно поменять цвет блока или добавить фоновое изображение.

Набор инструментов

Переходим в режим редактирования, нажав в левом верхнем углу экрана кнопку «Плюс». Открывается инструментарий нулевого блока. Состоящий из следующих элементов:

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

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

Shape – объект (по умолчанию квадрат) трансформируемый в другие геометрические фигуры (окружность или прямоугольник). На фигуры можно ставить ссылки, менять цвет, обводку или тень.

Button – кнопка, меняется ее внешний вид (форма, размер, цвет, настраивается типографика), добавляется текст и ссылка, устанавливается реакция при нажатии или наведении (цвет надписи или фона меняются).

Video – размещает на страницу видео-файлы с популярных видеохостингов (Youtube, Vimeo). Расположение и размеры плеера настраиваются.

HTML – добавляет сервисы, виджеты и другие элементы на страницу сайта с помощью HTML-кода.

Tooltip – всплывающая при нажатии или наведении курсора интерактивная подсказка (текст или изображение), настраиваются анимация, цвет, тень и размер.

Form – форма обратной связи с функцией подключения сервисов приема данных.

Gallery – устанавливает слайдер фотографий, количество изображений, размер и положение настраиваются. Воспроизводится по клику или автоматически.

Для доступа ко всему функционалу настроек, нажмите кнопку «Settings» в правом нижнем углу экрана или клавишу Tab на клавиатуре, откроется панель настроек. Изначально она свернута, чтобы визуально освободить рабочее пространство.

Адаптация дизайна для экранов

Настроить адаптив можно переключив точки адаптации, расположенные вверху экрана. Проверяем, корректность отображения на устройствах с разным размером экрана.

После создания дизайна переключитесь на экраны представленных размеров, чтобы посмотреть как страница выглядит на смартфонах, планшетах или компьютерах. Если объекты расположены неправильно, можно поправить их, правильно расположив элементы, настроив высоту артборда, размер изображения или ширину текстовой колонки.

Горячие клавиши

По словам разработчиков и дизайнеров, использование горячих клавиш заметно ускоряет работу, их список можно увидеть на фото выше или непосредственно в контекстном меню нулевого блока. На Windows вместо «Command» используйте Ctrl. Запомнив сочетания клавиш, сможете выполнять работу быстрее и продуктивнее, не прибегая к помощи мыши. Они позволяют сохранять, вставлять, копировать и перемещать элементы. Отменять последнее действие, изменять межстрочные и межбуквенные расстояния, размер шрифта и др.

Настройки блоков Тильды

Создадим какой-нибудь блок, например, текстовый.
Итак, у нас есть текст, выполненный черным цветом, расположенный посередине экрана:

Допустим, нам необходимо, чтобы отступы текста от края экрана или соседних блоков были больше. Чтобы изменить этот параметр, зайдем во вкладку Настройки, расположенную в верхнем левом углу блока, появляющуюся при наведении на блок курсора мыши:

Для каждого блока в настройках доступны:

• ширина блока,
• отступ слева,
• выравнивание,
• настройки типографики, позволяющие настроить отображение текста,
• настройки анимации появления элементов на странице при загрузке и скроллинге,
• верхний и нижний отступ от соседних блоков,
• цвет фона для всего блока,
• настройки видимости блока на различных разрешениях экранов. То есть Вы можете скрыть блок на том или ином устройстве,
• конвертация блока в ZERO блок. Подробнее об этом — в отдельной статье.

Подробнее о настройках блока в сайтах на Тильде

Как настроить ширину блока в сайте на Тильда?

Напомним, что в Тильде для построения сайта используется 12-колоночная сетка.
Чтобы настроить ширину блока, нам необходимо указать количество колонок, которое будет занимать блок — от 1 до 12 колонок:

Изменив ширину блока, например, на 8 колонок, необходимо настроить отступ слева у этого блока. Так как блоком мы заняли 8 колонок, свободными у нас остаются 4 колонки. Если мы хотим, чтобы блок отображался по центру, тогда для отступа слева нужно задать 2 колонки (для отступа справа также останется 2 колонки: 4-2=2).

Выравнивание текстового содержимого блока в Тильде. Настройки типографики

Выровнять содержимое блока в Тильде можно:

• по левому краю,
• по центру,
• по правому краю.

Настройки текста в Тильде

Для изменения параметров для текста в Тильде доступны следующие настройки типографики:

• цвет текста,
• размер шрифта,
• шрифт,
• межстрочное расстояние,
• межбуквенное расстояние,
• насыщенность текста,
• начертание текста заглавными буквами,
• отступы от текста сверху и снизу,
• прозрачность текста.

Настройка анимации элементов блоков в Тильде

В Тильде можно настроить анимацию появления элементов сайта при его загрузке и скроллинге. Доступны следующие стандартные виды анимации:

• прозрачность,
• прозрачность (снизу),
• прозрачность (сверху),
• прозрачность (справа),
• прозрачность (увеличение).

Как задать отступы снизу и сверху блока Тильды

В Тильде имеются настройки для того, чтобы увеличить или уменьшить верхний и нижний отступы для блоков:

Отдельно можно указать отступы блока Тильды для мобильных устройств. Зачастую они должны быть меньше, чем отступы на экранах ПК, ноутбуков. Для этого нужно нажать на иконку с монитором, после чего появятся отдельные настройки отступов для экранов мобильных устройств:

Как настроить цвет фона для блока Тильды

Для того, чтобы указать цвет фона для блока Тильды, необходимо кликнуть мышью в соответствующее поле, после чего появится встроенная в Тильду палитра цветов, в которой Вы можете подобрать необходимый цвет. Либо напечатать в это поле код в формате hex заранее подготовленного цвета (например, #ff00ff). Такие цвета легко найти, воспользовавшись, например, поиском Яндекс или Гугл, также в макете сайта в Фотошопе, Фигме или другом графическом приложении, кроме того, цвет можно определить с помощью различных специализированных расширений для браузеров.

Как включить или отключить анимацию появления блоков Тильды

Для управления анимацией появления блоков сайта на Тильде в настройках предусмотрен переключатель — чекбокс:

Диапазон видимости блоков Тильды на различных устройствах

Блоки Тильды можно настраивать таким образом, что блок может быть виден на определенных разрешениях экрана, и при этом не будет отображаться на других. Сделать это можно, передвигая левый и правый ползунки соответствующей настройки блока:

В данной статье мы рассмотрели с Вами пример настройки простейшего текстового блока Тильды.
На самом деле это не исчерпывающий набор настроек. И для блоков других категорий Вы найдете множество дополнительных настроек: для изображений, кнопок, галерей, карточек и т.д.

Мы же в нашем блоге эти настройки будем рассматривать в соответствующих более подробных тематических статьях, посвященных уже конкретным видам блоков.

Как рассказать о бизнесе живо и с пользой

Статья полезна предпринимателям, которые самостоятельно пишут текст для сайта. Представим процесс подготовки текста с нуля до его завершения, поделимся полезными сервисами и рекомендациями людей, которые знают в этом толк.

Три важных правила написания текстов для сайта

В самом начале стоит снять завышенные ожидания. Поэтому начнем с трех важных правил.
1. Не переоценивайте силу текста

Слабый текст на сайте не обрушивает продажи, а сильный не увеличивает их в разы.

Убедитесь, что ваш продукт нужен людям, что продавцы продают, товар на складе, а офис-менеджер не грубит по телефону. Если бизнес проседает в продажах, текст этого не исправит.

2. Не пишите, если можете показать

Текст — основа любого сайта, но помните, что никакой текст не заменит фотографию.

Если вы продаете шведские разноцветные носки, одна фотография расскажет об их красоте больше, чем страница текста. Подкрепляйте текст иллюстрациями, или даже заменяйте текст фотографиями.

Не пишите о том, что можно показать.

Цветные носки носят под классические туфли, мокасины и каждодневную обувь, с джинсами и даже брюками.

3. Оформляйте текст на сайте красиво

Даже лучший текст не прочтут, если он плохо оформлен. Красиво — это минималистично и не броско.

Покупатели любят лаконичный и понятный текст — чтобы сразу понять, что им предлагают, и нужно ли им это. Поэтому уделите внимание оформлению текста, изучите возможности дизайна Тильды и пользуйтесь встроенным типографом.

Сайты на Тильде ценят за эстетику и атмосферность. Тильда помогает предложить товар или услугу со вкусом.

Сергей Болисов,
автор тренинга по вёрстке в Тильде и координатор SMM в «Нетологии»

Как оформить текст для сайта на Тильде:

Чтобы заголовки и абзацы выглядели аккуратно, используйте правильные тире, кавычки и переносы. Встроенный в Тильду типограф быстро приведёт текст в порядок.

Не пишите заголовок в блоке для лида, а абзац в блоке для цитат, потому что лень копаться в библиотеке. Это усложнит настройку раздела и может испортить мобильную вёрстку.

Не увлекайтесь курсивом, подчёркиванием и зачёркиванием текста, это отвлекает. Для выделения важных моментов пользуйтесь специальными блоками.

Регулируйте межстрочное расстояние. Слипшийся текст читать труднее, но слишком большие пробелы между строками тоже ни к чему.

В нулевом блоке можно настраивать межбуквенное расстояние — не переусердствуйте. Его стоит добавлять только для прописных, и то осторожно.

Все три правила сводятся к одной мысли: текст — это лишь форма подачи информации, главное — содержание. Текст сам по себе не ценен: удаляйте его, заменяйте на картинки, облегчайте его восприятие для посетителя.

Когда есть это понимание — вы готовы писать текст.

Забудьте, чему вас учили в школе. Вместо длинных сочинений — легко и по теме. Вместо сложных предложений — коротко и ясно. Посетитель вашего сайта ждет от вас информации, а не роман на сотни страниц.

Нора Галь в книге «Слово живое и мертвое» борется за легкость и ясность текста, краткость и красоту языка. Это настольная книга для переводчиков и редакторов художественной литературы, выпущенная в 1972 году.

Увы, надо смотреть правде в глаза: канцелярит не сдается, он наступает, ширится. Это окаянный и зловредный недуг нашей речи. Сущий рак: разрастаются чужеродные, губительные клетки — постылые штампы, которые не несут ни мысли, ни чувства, ни на грош информации, а лишь забивают и угнетают живое, полезное ядро. И уже не пишут просто: «Рабочие повышают производительность труда» , а непременно: «… принимают активное участие в борьбе за повышение производительности труда…»…

Перед тем, как писать текст для сайта, повторим:

• Клиенту не интересен текст, ему нужна информация.

• Пишем так, как говорим.

• Проще — значит лучше.

Как написать понятный текст для каждого раздела сайта

Существуют универсальные правила хорошего текста, которым подчиняются и текст «о компании», и текст на главной странице сайта, и продающий текст на лэндинге. Рассказываем по шагам.

1. Ставьте цель

Сначала формулируйте цель, потом пишите. Цель — какую задачу должен решить текст. Например:

Цель: помочь читателю понять, что с нами ему проще выбрать подходящую кофемашину для кофейни, чем выбирать самостоятельно.

(Подумайте пока, что не так в этой цели?)

Цель нужна, чтобы отсекать лишнее. Если абзац или предложение не соответствуют цели — удаляйте.

Не пишите без цели.

Ева Кац,
управляющий партнер Агентства интернет-продаж 5 o`click, поставщик контента для Tilda

Самая большая ошибка копирайтеров в том, что они хотят охватить все в одном тексте. Это получается, если вы пишете лонгрид с четким планом и пониманием, какую именно задачу должен решить текст. Если последнего нет, то получается салат из букв и попыткой написать книгу сразу обо всем.

Как в мультике про 7 шапок, копирайтер пишет обо всем сразу, разгоняется на десятки страниц и не понимает, почему получается плохо. Редактор режет такие тексты, копирайтер теряет мотивацию и устает от темы.

Отсутствие цели в начале — это всегда конфликт. Цель важнее плана. Потому что она задает тон тексту и миссию копирайтеру. Человек не просто пишет много букв, он решает задачу.

Старайтесь ставить четкие цели. Максимально сужайте их и дробите на небольшие участки. Так каждый небольшой кластер текста будет решать свою задачу и состоять только из хорошего мясного текста.

Вернемся к цели. Если мы хотим убедить читателя, что с помощью нашего текста он легче выберет подходящую кофемашину, то цель подходит. Но ведь мы не будем писать целый текст о том, как хорошо умеем помогать людям с помощью текстов выбирать кофемашины? Выходит, что цель поставлена не совсем корректно.

Встаем на сторону читателя и пишем цель так, чтобы она решала его задачи.

Цель: помочь читателю выбрать подходящую кофемашину для кофейни.

Здесь можно остановиться. Но если у нас сайт по выбору кофемашин, стоит разбить эту тему еще на несколько.

Цель: помочь читателю выбрать кофемашину для кофейни с небольшой проходимостью.

Цели текста лучше разбивать на небольшие кусочки. Чтобы каждый из них точно решал задачи читателя.

Цель — как хороший тренер. Помогает собраться и выдать максимальный результат. Без заигрываний, рассеянности и лишних движений.

2. Записывайте все мысли по теме, которые приходят в голову

Не старайтесь написать красиво и понятно. Дайте волю мыслям и быстро записывайте их. Не обращайте внимания на ошибки и путаницу. Представьте, что вы рассказываете о своем бизнесе другу за бокалом пива.

Если стопоритесь, запишите голосом на диктофон.

Посетитель на сайте, как клиент в магазине: вы встречаете его и рассказываете о товаре.

— Так этот блендер в Китае собирают?! Я думал он американский. Не развалится?

— А вот за это не беспокойтесь, многие спрашивают. Мы же даем гарантию 12 месяцев. Мы шестой месяц продаем их, пока ни одного возврата. Работают и в офисах, и в кофейнях. На неделе получил дозаказ, владелец тренажерки еще один берет, протеиновые коктейли крутят целыми днями.

— Да? Ну я беру для смузи, утром и вечером пью. Два раза в день всего.

Сергей Король,
редактор и коммерческий писатель

Мне кажется, что хороший текст ближе к устной речи, чем к высокопарному повествованию, как в романах. Хороший текст легко прочитать вслух — он не будет звучать пафосно. Хороший текст звучит, а плохой — нет.

Перенесите сказанное «на бумагу». Записывайте как есть, без изменений. Если попытаетесь сделать сразу красиво, придется начинать сначала.

Ева Кац,
управляющий партнер Агентства интернет-продаж 5 o`click, поставщик контента для Tilda

В бизнес-тексте должны быть ответы на вопросы людей, их сомнения, возражения и страхи. В своем агентстве я рекомендую использовать технику «маленького мудака».

Когда вы пишете, представляйте, что он стоит у вас за спиной и противным голосом на половину ваших доводов спрашивает «И че? / А мне что с этого? / Да у других тоже самое / Что-то дорого / А где гарантии? и т. д.». Он помогает относиться к тексту критично и сразу закрывать большинство важных вопросов, которые задают посетители. Когда у маленького мудака не останется вопросов и возражений по теме, тогда текст будет целостным.

Еще одна техника, которую можно использовать — облако тегов. Во время создания текста для сайта набросайте на маленьких листочках все смежные темы. И уже на их основе набрасывайте мясо.

Сократить и ужать текст вы всегда успеете во время редактуры. Сейчас важно передать нужную информацию и отработать предположительные вопросы людей.

3. Структурируйте мысли

Сначала получится поток сознания. Наша задача: выделить главные мысли, разбить их на абзацы и выжать пользу.

Одно предложение — одна мысль. Один абзац — мысли одного порядка. Если в абзаце две разные мысли — разбиваем на два абзаца.

Рассмотрим на примере. Слева записанный разговор, так, как есть. В колонке справа выделены главные мысли, которые образуют структуру.

Рассказ поставщика электротехники для ресторанов и кофеен:;Главные мысли:

Мы за пять лет стали лучшими в городе. Есть склад на Черемушках, там прошлом году со склада воры вынесли пять посудомоечных машин, поэтому наняли частную охранную фирму.;1. Работаем пять лет. Обычно у нас на складе около сорока моделей холодильников хранится, по три-четыре каждого, мы их отгружаем в день заказа. И ходовые модели кофемашин. Есть такие подороже, которые на заказ привозим, там специальные отсеки и навороты.;2. Мы единственные в городе, кто специализируется на электротехнике для заведений общественного питания. Их доставляем клиенту за пять рабочих дней. Сейчас все под охраной, никуда не пропадут, а тогда пришлось с покупателями решать ситуацию. В минус сработали.;3. Охраняемый склад. Ну а так-то мы пытаемся подстроится под клиентов, у нас сервис. Доставляем холодильники, кофемашины и другие приборы в день заказа, сами, бесплатно привозим в кафешки и подключаем.;4. Всегда в наличии ряд холодильников, кофемашин, посудомоечных машин. Вот эти все расходы на перевозку и грузчиков на себя берем. Оно ведь как, пусть в минус сейчас работаем, зато потом еще раз купят, друзьям посоветуют ну и не вернут уже купленное.;5. Доставляем в день заказа. Ну и даже если что ломается, мы сами приезжаем и чиним на месте. Я так считаю, что это в плюс для нас.;6. Привезем нужную модель на заказ, которая удовлетворяет потребности конкретного ресторана. Доставляем за 5 дней. Дизайнерские холодильники, кофемашины под заказ. Ну понятное дело, что на кухню не заходим, там просим в сервисный центр привезти. Чинить же не будем возле еды.;7. Бесплатная доставка и установка в помещении ресторанов и кофеен. Мы же даем гарантию 12 месяцев. И я лично в марте на китайском заводе был, так там двадцать итальянцев постоянно на месте, следят за качеством, чтобы китайцы не филонили.;8.Особые пожелания выслушаем и постараемся помочь. Там все блестит, делают все по стандартам. В прошлом году был на заводе в Польше, вообще ничем не отличается.;9. Даем гарантию 12 месяцев. Мы там сертификацию проходим. Китайскими моделями в самой же Италии пользуются, это как с Айфонами.;10. Сотрудники проходят обучение и получают сертификаты. Изучают производственный процесс на заводах.

Изменение интервалов между строками и абзацами в Publisher

Междустроальный интервал определяет расстояние по вертикали между строками текста в абзаце. По умолчанию междустрочами являются одинарки. Это означает, что междустрок вмещаются наибольшие шрифт в этой строке, а также небольшое дополнительное пространство.

Интервалы между абзацами определяют интервал выше или ниже абзаца. Если нажать ввод, чтобы начать новый абзац, интервалы будут переходить к следующему абзацу, но вы можете изменить параметры для каждого абзаца.

Интервалы между строками и абзацами можно настроить на вкладке «Отступы и интервалы» в диалоговом окне «Абзац» на вкладке«Главная».

Вы также можете выровнять текст по опорные направляющие, чтобы точно выровнять текст по нескольким столбцам. Направляющие базового плана можно настроить на вкладке «Направляющие направляющие» в диалоговом окне «Направляющие разметки» (вкладка«Макет страницы»). Вы можете выровнять текст по направляющих направляющих на вкладке «Отступы и интервалы» диалогового окна «Абзац» на вкладке«Главная».

Параметры по умолчанию для параметров строки и абзаца определяются стилем.

Изменение пробела между абзацами

1. Select the text you want to change.
2. На вкладке «Главная» нажмите кнопку запуска абзаца, чтобы от показать диалоговое окно «Абзац».
3. Перейдите на вкладку «Отступы и интервалы».
4. В области междустроксделайте следующее:
5. В поле «Перед абзацем» введите или выберите нужное расстояние.
6. В поле «После абзацев» введите или выберите нужное расстояние под абзацем.

Совет: Значение по умолчанию для пробелов до и после абзацев отображается в пунктах. Можно указать другие единицы измерения, введя их аббревиатуру после численного значения: дюймы (дюйм), сантиметры (см), пики (пк), пункты (пт) или пиксели (пкс). Если указать единицу измерения, которая не превышает точки, Microsoft Office Publisher преобразует единицы измерения в баллы.

Настройка автоматического интервала между строками текста

1. Select the text you want to change.
2. На вкладке «Главная» нажмите кнопку запуска абзаца, чтобы от показать диалоговое окно «Абзац».
3. Перейдите на вкладку «Отступы и интервалы».
4. В поле «Междустроками» введите или выберите нужное расстояние между строками текста. Например, для двойного типа пробела или выбора 2 ст. Чтобы изменить тип с двойного на один или на один, выберите 1 ст.

Совет: Значение по умолчанию для пробелов между строками отображается в пробелах (SP). Если ввести целое число, Publisher интерпретирует его как несколько пробелов. Можно указать другие единицы измерения, введя их аббревиатуру после численного значения: дюймы (дюйм), сантиметры (см), пики (пк), пункты (пт) или пиксели (пкс). Если задать единицу измерения, которая не является пробелом, Publisher преобразует единицы измерения в пункты.

Интервалы между строками и абзацами можно настроить на вкладке «Отступы и интервалы» в диалоговом окне «Абзац» (меню«Формат»).

Вы также можете выровнять текст по опорные направляющие, чтобы точно выровнять текст по нескольким столбцам. Эти направляющие можно настроить на вкладке «Направляющие базового плана» в диалоговом окне «Направляющие разметки»(меню «Упорядоть»). Вы можете выровнять текст по направляющих направляющих на вкладке «Отступы и интервалы» диалогового окна «Абзац» (меню«Формат»).

Параметры по умолчанию для параметров строки и абзаца определяются стилем.

Изменение пробела между абзацами

1. Select the text you want to change.
2. В меню Формат выберите пункт Абзац и откройте вкладку Отступы и интервалы.
3. В области междустроксделайте следующее:
4. В поле «Перед абзацем» введите или выберите нужное расстояние.
5. В поле «После абзацев» введите или выберите нужное расстояние под абзацем.

Совет: Значение по умолчанию для пробелов до и после абзацев отображается в пунктах. Можно указать другие единицы измерения, введя их аббревиатуру после численного значения: дюймы (дюйм), сантиметры (см), пики (пк), пункты (пт) или пиксели (пкс). Если указать единицу измерения, которая не превышает точки, Microsoft Office Publisher преобразует единицы измерения в баллы.

Настройка автоматического интервала между строками текста

1. Select the text you want to change.
2. В меню Формат выберите пункт Абзац и откройте вкладку Отступы и интервалы.
3. В поле «Междустроками» введите или выберите нужное расстояние между строками текста. Например, для двойного типа пробела или выбора 2 ст. Чтобы изменить тип с двойного на один или на один, выберите 1 ст.

Совет: Значение по умолчанию для пробелов между строками отображается в пробелах (SP). Если ввести целое число, Publisher интерпретирует его как несколько пробелов. Можно указать другие единицы измерения, введя их аббревиатуру после численного значения: дюймы (дюйм), сантиметры (см), пики (пк), пункты (пт) или пиксели (пкс). Если задать единицу измерения, которая не является пробелом, Publisher преобразует единицы измерения в пункты.