Как в тильде выделить несколько объектов

Группировать и анимировать набор объектов

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

Группировка набора элементов и применение анимации

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

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

Дополнительные сведения о группировке и анимации

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

• Группировка и разгруппировка фигур, других объектов и изображений
• Анимация текста и объектов
• Настройка времени запуска и скорости воспроизведения эффекта анимации

Действия с блоками

Скопировать блок можно с помощью выпадающего меню в правом верхнем углу блока. После этого его можно вставить на эту или другую страницу с помощью этого же выпадающего меню → Вставить.

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

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

Таким способом можно копировать и вставлять как на одной странице, так и на другую страницу
Перемещение: c помощью стрелок и выделения блока

Переместить блок можно с помощью стрелок в правом верхнем углу блока или с помощью выделения и кнопки «Переместить».

Zero Block: создание собственных блоков

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

Вы уже тут!
Проскрольте, чтобы начать читать
Обзорная статья по основным возможностям
Статья о работе с контейнерами и созданию «резиновых» элементов
Cписок всех комбинаций для ускорения работы
Cоздание единой схемы расположения всех элементов сайта
Справка по простой анимации: фиксации, параллаксу и анимации появления
Статья о сложной пошаговой анимации: основные принципы, настройки и примеры
Справка по сложной триггерной анимации: настройка и примеры

Как автоматически импортировать макет из Figma в Zero Block

Как добавить «Нулевой блок»

Чтобы добавить «Нулевой блок» на страницу, нажмите кнопку Zero внизу страницы. Либо выбeрите его в библиотеке блоков — он находится в самом низу, после категории «Другое».

Zero Block сохраняет основные функции обычного блока — его можно копировать, перемещать, удалять, прятать. У него есть настройки. Только вместо кнопки «Контент» кнопка «Редактировать блок». Ее нужно нажать, чтобы начать редактирование блока, откроется редактор.

Общее представление об интерфейсе

В «Нулевом блоке» две рабочих области или два «контейнера»: область сетки — Grid Container и Window Container — условное обозначение границ экранов браузера.

В Grid Container используется та же сетка, что и в Тильде, 12 колонок (1200 px). Если включить привязку объектов к Grid Contaner и располагать элементы внутри Grid Container, то они всегда будут в границах 12 колонок, независимо от размера экрана.

Grid Container — это основная, главная рабочая область.
Подробная информация о контейнерах содержится во второй части руководства: «Отзывчивый дизайн».
Добавление и редактирование элементов

Чтобы добавить элемент на страницу, нажмите «плюс» в левом верхнем углу. Вы можете добавить текст, изображение, объект, кнопку, видео, тултип, блок кода, форму или галерею.

Изображение также можно добавить, перетянув картинку из папки в область блока.

Редактирование элемента мышкой

В Zero Block поддерживаются все основные манипуляции, выполняемые с помощью мышки: элементы можно перемещать, менять размер, копировать (зажав клавишу Alt), выделять несколько объектов.

В элементах с изображением можно поменять размер, но пропорции исходной картинки всегда сохранятся .

В элементах с текстом высота меняется автоматически , в зависимости от объема текста.

Размер кнопки и фигуры меняется во всех направлениях.

Для операций с несколькими объектами нажмите: Cmd+A (выделить все объекты), либо, удерживая Shift, выделите мышкой те объекты, с которыми нужно работать.

Когда выделено несколько объектов, их можно выровнять по горизонтали и по вертикали относительно друг друга или относительно контейнера

Редактирование элемента с клавиатуры

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

Поменять тип экрана
Спрятать сетку
Спрятать настройки
Спрятать управляющие элементы
Отмена последнего действия
Сохранить
Копировать элемент
Вставить элемент
Переместить элемент
Удалить элемент
Изменить прозрачность
Заблокировать элемент
Изменить размер шрифта
Изменить межстрочное расстояние
Изменить межбуквенное расстояние
Выделить все
Показать/спрятать слои
Добавить горизонт. направляющие
Добавить верт. направляющие

⌘+1. 5
G
TAB
F
⌘+Z
⌘+S
⌘+C
⌘+V
(Shift+) ←↑→↓
Backspace
0. 9
L
+ / –
⌘+ ↑ / ↓
⌘+ ← / →
⌘+A
⌘+L
⌘+H
⌘+Shift+H
(На Windows используйте Ctrl вместо ⌘)
Также список горячих клавиш вы найдете в контекстном меню «нулевого блока».
Редактирование через панель настроек
(Клавиша TAB)
Текст
Полные настройки элемента открываются при клике на кнопку Settings в правом нижнем углу экрана.
Открывать/закрывать панель настроек можно нажатием клавиши Tab.
По умолчанию панель настроек всегда свернута, чтобы рабочее пространство было свободнее.

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

Ниже — координаты положения элемента. Могут быть заданы в пикселях или в процентах. Ниже мы рассмотрим этот момент подробнее.

Начало координат обозначено синим крестиком .

Здесь же параметры элемента: ширина и высота. Единицы измерения — пиксели.

Изменение контейнера и начала координат для элемента

Чтобы поменять размер шрифта, используйте клавиши –/+
Cmd+стрелки вверх-вниз меняют межстрочное расстояние.
Cmd+стрелки влево-вправо меняют межбуквенное расстояние.
Чтобы скопировать элемент, зажмите Alt и потяните его .

Прозрачность удобно регулировать с помощью клавиш:
1 — 10%
2 — 20%
.
0 — 100%

Изображение

При загрузке картинка принимает размер фрейма, в который она загружается. Кнопка Original size в настройках возвращает изображению исходный размер.

Если вы хотите сделать фото в круге, задайте изображению радиус скругления.

Чтобы получился ровный круг, исходное фото должно быть квадратным, а радиус скругления равен половине длины стороны . То есть если у картинки размер 100×100 px, задайте радиус 50.

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

Каждому изображению можно задать aльтернативный текст (тег alt) . Поисковые системы воспринимают альтернативный текст как ключевые слова и учитывают их при индексации. Напишите текст таким образом, чтобы он был релевантен содержанию сайта в целом и отражал содержание картинки.

Любое изображение можно сделать ссылкой — чтобы при клике на него пользователь переходил на другую страницу. Укажите в настройках ссылку и назначение: открывать в том же окне или в новом.

Фигура (Shape)

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

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

Либо задайте значения в настройках элемента.

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

Линия. Задайте в настройках высоту прямоугольника 1-5 px, получится линия.

Фигурам можно задавать тень, обводку и ставить на них ссылки.
Кнопка

У кнопки меняется размер, цвет, радиус скругления. Можно сделать обводку и добавить тень.

Надпись на кнопке и ссылка задаются в настройках . Там же настраивается типографика: размер, тип, насыщенность и цвет шрифта.

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

Тултип

Tooltip — это интерактивный элемент, при наведении на который появляется подсказка с текстом и/или изображением.

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

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

Использование тултипа для того, чтобы показать характеристики товара. Фото: SPERA.de
Форма

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

Форма в нулевом блоке в блоге Tilda Publishing

Чтобы отредактировать поля формы, перейдите в Настройки элемента формы и далее в Input fields. Здесь вы можете отредактировать и настроить поля как в блоке обычной формы.

Для подключения сервисов приема данных перейдите в Настройки элемента формы и далее в Services. Здесь вы можете подключить интегрированные с сайтом сервисы приема данных.

Галерея

В Zero Block можно добавить галерею изображений. У галереи можно изменять ширину и высоту, как у элемента Shape.

Рассмотрим настройки галереи:

Stretch. Имеет два параметра: Cover и Contain.

При параметре Cover изображения будут полностью заполнять область галереи, таким образом могут обрезаться, если отличаются по формату от галереи.

При параметре Contain изображения внутри галереи будут всегда в исходном формате, таким образом при любом формате галереи не будут обрезаться.

Position. Определяет положение изображения относительно области галереи. Например, при параметре Left Top изображение будет расположено относительно левого верхнего угла галереи.

Loop. Эта настройка зацикливает слайды (изображения) в галерее. Имеет два параметра: Loop и None.

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

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

Slide Speed. Определяет вид анимации смены слайдов. Имеет три параметра: None, Slow и Fast.

При параметре None будет слайды будут перелистываться без анимации.

При параметре Slow слайды будут перелистываться медленно.

При параметре Fast слайды будут перелистывать быстро.

Autoplay. Определяет скорость автоматической смены слайдов в секундах. Если значение в секундах не задано, то автоматической смены слайдов не будет.

Zoomable. Добавляет возможность увеличивать изображения галереи по клику. Имеет два параметра: Zoom on Click и None.

При параметре Zoom on Click изображения будут увеличиваться по клику.

При параметре None изображения не будут увеличиваться по клику.

Arrows. Набор настроек, который определяет внешний вид стрелок (кнопок).

Dots. Набор настроек, который определяет внешний вид точек под галереей. Точки отображают количество слайдов.

У каждого слайда (изображения) есть индивидуальные настройки:

В них можно задать подпись к слайду (Image Caption), alt-тег для SEO, добавить видео из YouTube или Vimeo, а также добавить ссылку, по которой будет осуществлен переход при клике на этот слайд.

Zero Block в Tilda: верстка с нуля

О чем речь? Zero Block в Tilda – это то, что по сути рушит идею конструктора. С помощью этого инструмента делают блоки так, как хочется, без использования шаблонов. Проще говоря, верстают с нуля.

Как работает? Встроенный редактор прост, интерфейс интуитивно понятен. В настройках знакомые вкладки, все работает по принципу перетаскивания и загрузки файлов. Опция Zero Block здорово облегчает труд дизайнера.

В статье рассказывается:

1. Что такое Zero Block в Tilda
2. Отличия от стандартного блока
3. Возможности Zero Block
4. Создание Zero Block в Tilda
5. Инструменты Zero Block
6. Верстка простой визитки с помощью Zero Block в Tilda
7. Адаптация дизайна для экранов
8. Проверка верстки
9. Горячие клавиши
10. Когда Zero Block не нужен

Пройди тест и узнай, какая сфера тебе подходит:
айти, дизайн или маркетинг.
Бесплатно от Geekbrains

Что такое Zero Block в Tilda

Tilda для многих сегодня — просто один из сервисов для быстрой сборки простых лендингов и сайтов-визиток. Дизайнеры тоже не относятся к «Тильде» как к солидному профессиональному инструменту.

Разве можно создать настоящий креатив в конструкторе сайтов? О каком серьёзном дизайне может идти речь, если надо комбинировать готовые модули и нет никакого простора для фантазии, да и инструментов не особо много?

Однако в Tilda тоже возможно создать уникальный дизайн. Для этого надо воспользоваться таким инструментом, как Tilda Zero Block, который существует с 2016 года.

Zero Block в Tilda был разработан, когда возникла необходимость выйти за рамки готовых шаблонов и начать делать уникальные сайты как по оформлению, так и по структуре. Все эти годы Zero Block постоянно улучшали и развивали, у него появлялись новые опции и функции, расширявшие сферу применения.

Tilda благодаря Zero Block из ничем не примечательного конструктора сайтов постепенно превратилась в полноценный инструмент для дизайнера. Функционала и возможностей Zero Block хватает, чтобы решать типичные дизайнерские задачи.

В Zero Block от Tilda, профессиональном браузерном редакторе, можно отрисовать интерфейс любого веб-ресурса от начала и до конца.

С помощью этого инструмента можно проектировать собственные модули для сайта, абсолютно неповторимые: весь спектр доступных средств вам в помощь. Вы можете нарисовать лендинг, сайт-визитку, промо-страничку и даже собрать простой интернет-магазин. При этом, чтобы пользоваться Zero Block, необязательно быть профессиональным дизайнером или верстальщиком.

Разрабатывая дизайн в Tilda Zero Block, вы сразу же видите результат: все изменения тут же применяются к сайту. Ошибки легко скорректировать.

К примеру, если вы делаете анимацию в Tilda Zero Block, то можете проверить, как она будет работать. Это не просто статичный макет, а полноценная веб-страничка, редактируемая в режиме реального времени.

Отличия от стандартного блока

В Tilda шаблонные блоки называются стандартными. В таких готовых компонентах редактировать можно только заливку, изображения и иконки, тексты (их содержание и кегль, гарнитуру шрифта), а также добавлять анимации из списка доступных. А вот структура блока всегда неизменна.

Узнай, какие ИТ — профессии
входят в ТОП-30 с доходом
от 210 000 ₽/мес
Павел Симонов
Исполнительный директор Geekbrains

Команда GeekBrains совместно с международными специалистами по развитию карьеры подготовили материалы, которые помогут вам начать путь к профессии мечты.

Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее будущее!

Скачивайте и используйте уже сегодня:

Павел Симонов
Исполнительный директор Geekbrains

Топ-30 самых востребованных и высокооплачиваемых профессий 2023

Поможет разобраться в актуальной ситуации на рынке труда

Подборка 50+ бесплатных нейросетей для упрощения работы и увеличения заработка

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

ТОП-100 площадок для поиска работы от GeekBrains

Список проверенных ресурсов реальных вакансий с доходом от 210 000 ₽

Получить подборку бесплатно
Уже скачали 26918

Иная ситуация с Tilda Zero Block: это настоящий редактор для создания нестандартных модулей по вашему вкусу. Можно добавить сколько угодно текста и других элементов, причём в любые места; реализовать собственную структуру; придумать сложную, необычную анимацию; изменить размеры элементов, задать им прозрачность; адаптировать сайт под мобильные девайсы вручную. Ограничений здесь гораздо меньше, чем у стандартных блоков. Поэтому с помощью Tilda Zero Block дизайнеры успешно создают уникальные лендинги.

Возможности Zero Block

Этот редактор открывает возможности для:

• размещения любого количества элементов на странице;
• позиционирования их друг относительно друга как угодно;
• ручного установления размеров, отображения, местоположения всех элементов для различных разрешений экрана;
• самостоятельного определения длины элементов;
• добавления иллюстраций, текстов, фигур, в том числе размещения картинок в любых плашках и карточках;
• воплощения нестандартных идей в плане типографики;
• создания интерактивных подсказок (в TildaZero Block для этого есть инструмент Tooltip);
• создания слоёв, которые обеспечат эффект глубины;
• задания прозрачности элементам;
• добавления анимаций разных типов — появления элементов и пошаговых изменений при клике, скролле, наведении;

Читайте также

Создание Zero Block в Tilda

Чтобы создать в Tilda с помощью Zero Block форму или какой-либо другой компонент, в меню блоков ближе к концу отыщите «Нулевой блок» (ниже вкладки «Другое»). Он содержит несколько элементов по умолчанию (текстовые блоки, шейп-файлы).

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

Grid Container – это 12-колоночная сетка, традиционная для Tilda, главная рабочая область.

Window Container показывает границы браузерного окна.

Для вас подарок! В свободном доступе до 17.03 —>
Скачайте ТОП-10
бесплатных нейросетей
для программирования
Помогут писать код быстрее на 25%
Чтобы получить подарок, заполните информацию в открывшемся окне

Grid Container имеет фиксированную ширину 1200 пикселей. Высота регулируется настройками (если указать там число) или вручную мышью. Чтобы добраться до настроек артборда (например, для добавления фоновой картинки, смены цвета), кликните по пустой области.

Инструменты Zero Block

В режиме редактирования в левом верхнем углу нажимаем кнопку «Плюс», чтобы получить доступ ко всем функциям Zero Block в Tilda, а именно, к:

• Текстовому блоку (Text). Здесь настраивают шрифт и цвет, межбуквенные, межстрочные расстояния и прочие типографские характеристики.
• Изображению (Image). Можно добавить картинку, изменить её форму и размер, обернуть ссылкой, чтобы по клику на неё пользователь переходил на другую страницу.
• Объекту (Shape), которым по умолчанию является квадрат, но можно изменить его, превратив в прямоугольник, круг и т. д. Фигуры тоже можно оборачивать ссылками. Их заливка, обводка, тени тоже настраиваются.
• Кнопке (Button). Помимо ссылки и текста, можно задать кнопке размер и форму, цвет, поколдовать со шрифтом, установить, что должно происходить при наведении или по клику (например, могут меняться цвета, кнопка может немного увеличиваться и т. д.).
• Видеоролику (Video). Zero Block в Tilda позволяет добавлять видео с популярных платформ вроде Vimeo и Youtube. Кстати, местоположение и габариты плеера можно изменить.
• Фрагменту кода (HTML). Через HTML-код на сайт встраивают сторонние виджеты, счётчики, сервисы. Например, можно с помощью Zero Block в сайт на Tilda встроить виджет погоды.
• Интерактивной подсказке (Tooltip), которая появляется при наведении на элемент. В тултипе могут находиться текст и картинка (все типографские характеристики и размеры настраиваются, как и анимация).
• Форме обратной связи (Form). Её можно подключить к сервису сбора данных.
• Слайдеру с картинками (Gallery). Если вы хотите создать кастомный слайдер в Zero Block от Tilda, нужно просто подгрузить изображения и задать размер галереи, местоположение, тип воспроизведения (только при клике или автоматически).

Расширенный доступ ко всем настройкам вы получите, кликнув на «Settings» — кнопку, расположенную в нижнем правом углу: развернётся панель с настройками, обычно скрытая. То же самое можно сделать клавишей Tab.

Верстка простой визитки с помощью Zero Block в Tilda

Шаг 1. Размещаем картинку

• Кликнув на «+», выбираем «Image».
• В появившемся квадрате нажимаем на «Settings» (правый нижний угол).
• Попав в настройки, нажимаем на «Upload file», чтобы выбрать и подгрузить фотографию с устройства.

Шаг 2. Добавляем подпись к картинке

Хорошо бы подписать фото. В Zero Block от Tilda это тоже делается кнопкой «+», только выбрать надо «Text».

Дарим скидку от 60%
на обучение «Инженер-программист» до 17 марта
Уже через 9 месяцев сможете устроиться на работу с доходом от 150 000 рублей

Вставьте свой текст, нажмите на текстовый блок и попадёте в настройки (это то же меню, что и под кнопкой «Settings», расположенной внизу справа).

Задайте гарнитуру и кегль шрифта, его цвет, выравнивание (стандартными кнопками «Right», «Left», «Center»).

Есть некоторые тонкости работы с Zero Block в Tilda:

• Текст и его заголовок редактируются отдельно.
• Помните об отступах.
• Перенос строки нажатием на Enter– плохая практика. Создайте несколько текстовых блоков или измените их размер.
• Используйте неразрывные пробелы или подгоняйте ширину блоков, чтобы не было «висячих» предлогов в конце строк.

Сайт-визитка ни в коем случае не должен озадачивать пользователя. Чем он проще и яснее, тем лучше.

Шаг 3. Указываем контактный телефон

Телефонный номер лучше оборачивать активной ссылкой. Делается это так: напишите номер в новом текстовом элементе, перейдите в настройки, задайте там в поле Url ссылку вида tel:+7123456789 (никаких пробелов!).

Шаг 4. Создаём кнопку

Кнопку в Zero Block от Tilda добавить очень просто: нажав на «+», выбирайте опцию «Add Button».

Затем просто отредактируйте появившуюся черную кнопку.

Только до 14.03
Скачай подборку материалов, чтобы гарантированно найти работу в IT за 14 дней
Список документов:

ТОП-100 площадок для поиска работы от GeekBrains

20 профессий 2023 года, с доходом от 150 000 рублей

Чек-лист «Как успешно пройти собеседование»

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

Кликните по кнопке, чтобы попасть в её настройки:

• Надпись «Lеt’s go» в поле CAPTION замените на нужную вам.
• В Url пропишите ссылку на форму или блок, куда должна вести кнопка.
• В поле BGCOLOR отредактируйте цвет заливки (если кнопка прозрачная, просто удалите цвет).
• Мышью растяните кнопку до нужного размера и поместите её в нужную область страницы.
• Чуть опустите её вниз с помощью настроек, пропишите цвет обводки в BORDER.
• Толщина обводки тоже настраивается (в BRDR.SIZE).

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

Проверьте, как ваш сайт на Tilda выглядит на разных экранах: попереключайтесь между брейкпойнтами (они расположены в верхней части экрана). Всё ли корректно, не съехала ли вёрстка?

Когда дизайн в целом проработан, адаптируйте его к разным разрешениям: планшетам, смартфонам, ПК. Исправьте ошибки, переставьте и подровняйте блоки, если надо. Высота картинок и колонок текста легко настраивается, равно как и высота всего артборда.

Проверка верстки

Закончив настраивать дизайн, нажмите на «Опубликовать». Ещё раз перепроверьте, как смотрится сайт на различных экранах.

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

Есть несколько способов её протестировать:

• Проще всего потихоньку сужать окно браузера, где открыт сайт, и смотреть, как он меняется при уменьшении ширины.
• Если в вашем распоряжении есть несколько гаджетов — ноутбук, телефон (в горизонтальном и вертикальном положении), большой монитор — то следует потестить сайт на них.
• На опубликованной странице, щелкнув по любой точке правой кнопкой мыши, найдите «Просмотреть код» в выпадающем менюи поправьте в Tilda Zero Block все недочёты и ошибки, попереключавшись между гаджетами и проверив, всё ли смотрится нормально.
• Использовать браузерное расширение Window Resizer.

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

Работать в Tilda Zero Block – оформлять карточку товара, наполнять фотогалерею, верстать текст — намного удобнее и быстрее, зная горячие клавиши:

• ⌘+1…5 для смены типа экрана;
• G — для скрытия сетки;
• TAB — чтобы скрыть панели настроек;
• F — чтобы спрятать элементы управления;
• ⌘+Z — чтобы откатить последнее действие;
• ⌘+S — для сохранения изменений;
• ⌘+C — для копирования элемента;
• ⌘+V — для вставки элемента;
• (Shift+) ←↑→↓ — для перетаскивания элемента;
• Backspace — для его удаления;
• прозрачность меняется с помощью 0…9;
• клавиша L блокирует элемент;
• + / – меняют кегль шрифта;
• межстрочное расстояние редактируется с помощью ⌘+ ↑ / ↓;
• а межбуквенное — с помощью ⌘+ ← / →;
• нажмите ⌘+A, чтобы выделить весь контент;
• для показа и скрытия слоёв есть сочетание клавиш ⌘+L;
• горизонтальные направляющие добавляются нажатием ⌘+H;
• а вертикальные — ⌘+Shift+H.

Если вы работаете на Windows, ⌘ замените на Ctrl.

Когда Zero Block не нужен

• Когда функциональности обычных блоков хватает для ваших задач.

Не пренебрегайте стандартными блоками Tilda: их можно очень гибко настраивать! Главное — подобрать нужный и, покопавшись в настройках, понять, подходит ли он для ваших целей. Например, создать галерею в Tilda можно и без Zero Block, для неё уже есть готовый компонент.

• Задать адаптивные отступы, которые хорошо смотрятся на мобильных устройствах.

Tilda позволяет устанавливать разную величину отступов для десктопов и мобильных гаджетов.