Как изменить сетку тильда

#tildaupdates: Настройка модульной сетки в Zero Block

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

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

По умолчанию в Тильде используется 12-колоночная сетка. Чтобы настроить уникальную сетку, перейдите в Zero Block, откройте настройки Artboard и найдите кнопку Zero block settings. Разберёмся, для чего нужно каждое поле.

Columns — количество колонок в сетке.
Column Width — ширина колонок. При изменении ширины, меняется значение межколоночного расстояния Column Gutter и наоборот.
Column Margins — отступы слева и справа от края артборда для колонок.

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

Row Baseline — шаг горизонтальной сетки. Обычно это значение берётся исходя из базового размера вашего шрифта. Например, если для основного текста вы используете шрифт размером 14px с межстрочным расстоянием 20px, то и расстояние между линиями будет 20px.

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

Row margins — отступ сверху и снизу от края артборда.

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

По умолчанию настройки сетки задаются для всего проекта. Если мы создадим новый Zero block, то увидим в нём ту модульную сетку, которую только что настроили. Это удобно, чтобы сохранить единство дизайна на разных страницах проекта.

Но если вам нужна уникальная сетка для конкретного блока, то вернитесь в настройки сетки и выберите для параметра Use for опцию Current Block. Тогда настройки применятся только к текущему блоку.

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

Источник

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

Нулевой блок (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 Block: отзывчивый дизайн

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

По оси X Grid Container всегда позиционируется по центру.

То же самое происходит с версиями для разных устройств: при переключении между экранами ширина Grid Container становится 980, 640, 480, 320 px, он остается неизменным и всегда по центру.

Высоту Grid Container можно задать в настройках артборда или потянув контейнер вверх / вниз с помощью мыши. Ее можно задавать для каждого разрешения свою. Высота Grid Container является высотой блока.

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

Для этого нужно открыть настройки элемента и поменять тип контейнера на Window Container. Начало координат сместится в левый верхний угол Window Container.

У каждого элемента в рабочей области есть координаты — положение относительно начало координат по оси X и по оси Y.

Выделите объект, откройте панель настроек (клавиша tab) и в самом верху вы увидите координаты объекта.

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

Например, мы хотим, чтобы половина экрана всегда была желтая. Добавим фигуру и в настройках элемента зададим контейнер — Window Container , а для ширины и высоты поменяем единицы измерения на проценты вместо пикселей и зададим 50% ширины экрана и 100% высоты. Также в процентах можно задавать значения осей — если нужно, чтобы элемент всегда занимал правую половину экрана, поставим значение для оси X — 50%.

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

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

Чтобы включить автоматическое масштабирование, откройте настройки артборда и найдите параметр Scale Grid Container. Выберите параметр Autoscale to Window Width и сохраните изменения.

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

При необходимости, вы можете установить автоматическое масштабирование для всех типов экрана или, например, только для мобильных устройств, установив настройку только в определенном диапазоне ширины экрана. Контейнер десктопной версии увеличивается от 1200px до 1920, 4К или даже 6К. В мобильной версии размер увеличивается от 320px.

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

Чтобы кнопка оставалась на нужном расстоянии от границ окна браузера, но не масштабировалась на разных разрешениях, задайте для неё координаты в Window Container. Используйте привязку к разным контейнерам, чтобы некоторые элементы в рамках одного блока масштабировать, а некоторые оставлять с фиксированным расстоянием от краёв браузера, но без изменения размера.

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

Используйте векторные изображения в формате svg для иконок, а фоновые изображения и фотографии загружайте с запасом. В Тильде при загрузке большого изображения оно по умолчанию уменьшается до 1680 пикселей, но если вы нажмёте на иконку шестерёнки при загрузке, появится возможность загрузить изображение с размером 1920px по большей стороне. Переключите тумблер “Разрешить загрузку до 1920px”, а затем загрузите файлы. Изображения больше 1920px загрузить не получится, потому что такой размер будет влиять на производительность браузера и скорость загрузки сайта.

Источник

Как создать сайт на Tilda?

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

Для кого подойдет Tilda?

Станьте архитектором веб-пространства. Научитесь создавать удобные сайты

Конструктор сайтов подойдет для малых и средних проектов. Он позволяет сэкономить ресурсы на дорогой HTML-верстке и программировании. Для создания сайта на Tilda не требуется команда разработчиков, дизайнеров и верстальщиков.

Вот примеры сайтов, которые можно создать в конструкторе:

• сайт-презентация;
• продающий лендинг компании;
• личный сайт и портфолио;
• небольшой интернет-магазин (без возможности интеграции с 1С, синхронизации витрины и складских остатков, входа в личный кабинет);
• сайты для мероприятий.

Основные настройки сайта Tilda

Интерфейс выглядит следующим образом: на странице «Мои сайты» вы увидите список своих сайтов и две кнопки — «Создать новый сайт» и «Создать рассылку».

Изучите также

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

Шрифты и цвета

В этом разделе настроек вы сможете задать шрифтовую пару — комбинацию шрифтов, на которой строится типографика веб-страницы. Сервис предлагает свою библиотеку шрифтов. Нажав на «Расширенные настройки», вы сможете настроить шрифт для заголовков и основного текста не только из библиотеки Tilda, но и из Google Fonts, Adobe Fonts или загрузить свой собственный шрифт.

Совет: в настройках шрифта и цвета пролистните в самый конец и настройте цвет ссылок (Link Color) — так вы определите, какие текстом выделять гиперссылки на вашем сайте. Если его не изменить, то по умолчанию все ссылки будут выделяться фирменным оранжевым цветом Tilda. В примере мы выбрали красный:

Главная страница

В настройках главной страницы вы можете назначать из каждой созданной страницы главную страницу, header (шапку), footer (подвал) и многое другое. Для этого переходим в Настройки сайта, затем в раздел «Главная страница» и переключаем ту страницу, которую хотим указать главной.

Если вам нужно разместить блок сразу на всех страницах сайта (например, шапку или подвал), нужно создать отдельную страницу, поместить на нее элементы, которые должны быть на всех страницах по вашей задумке, перейти в настройки сайта, затем в раздел «Шапка и подвал» и назначить созданную страницу как шапку или подвал.

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

Действия

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

В разделе «Еще» можно найти важные настройки для любого проекта: Favicon, настройка 404 страницы.

Favicon — значок веб-сайта или страницы, который появляется в браузере или в качестве картинки рядом с закладкой. Его можно загрузить только в формате .ico. Конвертировать ваше изображение в .ico можно здесь.

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

Готовые шаблоны сайтов Tilda: примеры

В готовых решениях шаблоны сайтов разделяются на темы: бизнес, магазин, событие, блог и многие другие.

Стандартные блоки Tilda

После создания страницы вы сможете добавлять на ваш будущий сайт дизайн-элементы: обложку сайта, меню, отзывы, формы и кнопки и так далее. Все стандартные блоки вы сможете выбрать из библиотеки блоков. Блоки в Tilda сортируются от самых популярных до менее используемых. Готовые блоки уже адаптированы под десктопную и мобильную версии.

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

Для любого сайта нужна обложка. Добавляем ее в первую очередь на наш сайт.

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

В этом разделе можно изменить текст и фоновое изображение блока.

Помимо контента, конструктор Tilda позволяет настраивать отступы, типографику, SEO и цвета блока, текста и кнопок.

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

Совет: при выборе разных стилей сделайте активной кнопку «Сохранять контент при переключении» — так вы не потеряете контент, который создали ранее.

В 2022 году пользователи во всем мире проведут в интернете 12,5 трлн часов. Научитесь профессионально создавать сайты и приложения, на которых хочется задержаться подольше.

Zero Block Tilda

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

Вот так выглядит Zero Block:

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

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

Grid Container и Window Container

В артборде существует две рабочие области — сетка (Grid) и окно (Window). Все элементы, которые вы добавляете в Zero Block, можно выравнивать относительно сетки и целого экрана. Главное отличие между ними — Grid Container измеряется в пикселях, Window Container — в процентах.

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

В Window Container элемент располагается относительно пропорции, которую вы выставили в процентах: получается, что если элемент на десктопной версии заполняет 80% экрана, то на мобильной версии он также будет занимать эти 80%. В Grid Container масштаб остается неизменным.

Базовая анимация

Basic Animation — простая анимация с простыми и популярными эффектами: появление элемента (Animation), эффект параллакса (Parallax) и фиксация (Fixing).

У анимации появления есть несколько вариантов: простое появление (Fade In), появление справа (Fade In Right), слева (Fade In Left), сверху (Fade In Up) и снизу (Fade In Down) и появление с увеличением (Zoom In).

У анимации появления есть несколько настроек: длительность (Duration), задержка (Delay) и отступ в пикселях от нижнего края Window-контейнера, при котором начнет воспроизводиться анимация (Trigger Offset).

Эффект параллакса можно настроить по двум параметрам: движение мыши и скролл. У последнего можно изменять скорость (Speed), которая измеряется в процентах: если скорость меньше 100%, то элемент движется медленнее скролла страницы, если скорость больше 100% — то быстрее.

Пошаговая анимация

Step-by-step Animation — более сложная анимация, которая подойдет продвинутым пользователям. Чтобы настроить пошаговую анимацию, добавьте новый элемент → выделите его → перейдите в настройки → долистайте до Step-by-step Animation → нажмите Add.

Настройка пошаговой анимации начинается с выбора Event — условия, при котором начнет проигрываться анимация. Есть пять условий:

• Element on Screen — анимация начинается при появлении элемента на экране;
• Block on Screen — анимация начинается при появлении на экране всего текущего блока;
• On Scroll — анимация запускается и продолжается во время скролла;
• On Hover — анимация появляется при наведении на элемент;
• On Click — анимация начинается при клике на элемент.

Пример анимации

Как подключить домен на Tilda?

К любому сайту на конструкторе можно подключить свой собственный домен — уникальный адрес сайта. Подключение домена возможно только на платных версиях. Бесплатные сайты будут публиковаться только под доменом Tilda — название сайта или вашего проекта.tilda.ws.

Купить домен можно внутри сервиса или у регистраторов доменов. Популярные регистраторы: REG.RU, RU-CENTER, GoDaddy, 2domains, Timeweb, Beget.

Добавить домен можно в настройках сайта.

Веб-аналитика: подключение Яндекс.Метрики и Google Analytics

В движок Tilda встроена аналитика, но иногда она работает некорректно. В руководстве вы сможете найти инструкции по подключению Яндекс.Метрики и Google Analytics. Счетчики помогают отслеживать путь пользователей и их поведение. Очень полезный инструмент для маркетологов и аналитиков.

Платежные системы Tilda

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

Tilda принимает многие платежные системы: Cloudpayments, Robokassa, PayPal, Альфа Банк, Сбербанк, Тинькофф Банк, LiqPay, bePaid, 2Checkout, PayAnyWay, Stripe и многие другие.

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

Поддержка, справочная документация и стоимость тарифов Tilda

На сайте конструктора можно выбрать из нескольких тарифов. Цены актуальны на декабрь 2021 года.

В бесплатной версии можно создать один сайт, без вашего домена на 50 страниц и 50 Mб места на сервере сервиса.

Приятный бонус: есть бесплатный тестовый период Tilda Personal на 2 недели. Реквизиты карты вводить не нужно.

В версии Personal пользователи получают также один сайт, но с возможностью подключения домена, полную коллекцию блоков и 1 Гб места на сервере.

Версия Business дает вам больше возможностей: можно создать 5 сайтов с 500 страницами. Если вам понадобится больше сайтов, то вы сможете докупать возможность создания 5+ сайтов.

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

В 2022 году пользователи во всем мире проведут в интернете 12,5 трлн часов. Научитесь профессионально создавать сайты и приложения, на которых хочется задержаться подольше.

соберете 5 полноценных работ в портфолио

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

попрактикуетесь на проектах для Ситимобил, Delivery Club, Юла, VK

соберете 5 полноценных работ в портфолио

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

попрактикуетесь на проектах для Ситимобил, Delivery Club, Юла, VK

Источник

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

Вот так выглядела моя проблема

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

Причины проблемы и решение

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

Для этого: 1) вы переходите в мобильной версию сайта

2) выбираете каждый элемент, который должен касаться вашей направляющей, выбираете для него WINDOW CONTAINER , а в качестве отступа по оси Х указываете 20px

3) делаете это для всех элементов в ZERO блоке

4) Еще вы можете задать ширину блока в процентах. Для это кликаете в конце строки W____ 370 на «PX», но имейте ввиду, что блок с текстом в таком случае могут наезжать друг на друга и поэтому тестируйте на разных ширинах экрана