как сделать градиент меню в тильде
Градиент для фона Тильда
Есть несколько вариантов как сделать градиент для фона в Тильде. Начнем с простых стандартных способов и дальше разберем более сложные варианты.
Добавление градиента в фон через обложку
Наверное, самый простой способ применения градиента к фону — поиск картинки с градиентом. Найти фоновые картинки с градиентом можно в поисковых системах или на сервисе Тильды —Tilda Colors.
Здесь вы можете подобрать понравившийся градиент. Их тут довольно много. Когда выберете, кликайте на стрелочки «Во весь экран»:
Вам откроется градиент во всей красе. Чтобы его скачать, кликайте на соответствующую кнопку в правом верхнем углу:
Теперь, когда градиент уже сохранен, вы сможете добавить его как обложку к блоку. Такой вариант подходит для Zero block и для стандартных блоков, у которых есть возможность добавления обложек на фон.
Плавное изменение фона у блоков
Это вариант не очень походит для получения градиента к фону. Но плавность и переливание цветов на фоне он дает. А поэтому в этой теме мы его тоже должны упомянуть.
Смотрите, как это выглядит в действии:
Как сделать такую плавную смену цвета? Инструкция ниже:
Вот и все, плавный переход работает.
Добавление градиента к любому блоку через вставку HTML-кода
Вот этот трюк немного сложнее. Но и преимущества у него очевидные — вы можете применить градиент к любому блоку в Тильде.
Что нужно сделать:
Сразу под ним вы увидите класс блока Преимуществ:
Скопируйте класс блока. В нашем примере это будет t508
Получается такая картина в блоке:
У вас получится еще лучше.
Ну а если, что-то не получилось, опишите подробно проблему. Мы попробуем вам помочь с добавлением градиента в фон Тильды.
Фон в конструкторе Tilda: как изменить?
Фон или бэкграунд (background – англ. задний план) – это элемент оформления, который дополняет и оттеняет основные элементы, делая целостной концепцию дизайна. Кроме того, бэкграунд добавляет индивидуальность и подчеркивает тематику проекта. К примеру, в магазине кожаных изделий в виде фона можно использовать текстуру кожи, которая вызывает прямые ассоциации с товаром.
Посетители сайта, как правило, не заостряют внимание на этом элементе дизайна и не замечают его. Но, тем не менее, фоновое изображение нужно для формирования впечатления при посещении ресурса. Удачно подобранный фон для сайта вызывает положительные впечатления у посетителя, а неудачный вариант, наоборот, будет смотреться неуместно и визуально мешать, не вписываясь в дизайн посадочной страницы.
ResearchGate провели исследование на тему того, насколько сильно доверяют посетители демонстрируемому сайту. Выяснилось, что 94% элементов сайта, которые вызывают недоверие, связаны именно с дизайном. Первое впечатление о странице будет зависеть от ряда нюансов, таких как выбор цвета, объем текста, подбор шрифтов и расположения объектов на странице. А фон – это всегда первое, что видит посетитель, попадая на страницу.
Подобрать фон для сайта можно, воспользовавшись услугами дизайнера, либо можно использовать сайты с бесплатными текстурами.
Рис. 1. Примеры фона со стоков.
В конструкторе Тильда при добавлении новых блоков вы увидите, что большинство из них идут с готовым цветным фоном или фоновым изображением, но с функцией редактирования. Поменяйте цвет или замените изображение в зависимости от тематики своего сайта на Tilda.
Если вместо заливки цветом фона, вы хотите разместить изображение, то перейдите в категорию «Другое» и добавьте блок ⟶ T674. Либо найдите его с помощью поисковика, безошибочно определяемого характерной иконкой в виде увеличительного стекла. Этот модификатор добавляет выбранный фон для всей страницы.
Рис.2. Добавляем фон на Тильде.
Для добавления собственного изображения перейдите во вкладку «Контент» и нажмите кнопку «Загрузить файл». Затем выберите нужное изображение с жесткого диска компьютера. После добавления нужного файла не забудьте сохранить результат. В итоге добавленное в блок изображение будет размещено на фоне страницы. Встроенный в Тильде редактор изменяет размер, обрезает изображение или добавляет фильтры.
Обратите внимание: если у блока задан цвет фона, тогда он накладывается на добавленное фоновое изображение. Исправить это можно таким способом: перейдите в меню «Настройки», после этого удалите значения из поля «Цвет фона для всего блока». После этого цвет фона станет прозрачным. Потом нажмите кнопку «Сохранить» и изменения вступят в силу.
Если нужно, чтобы при скролле фон оставался на месте, а не двигался вместе с текстом, то для этого заходим в меню «Настройки» и переходим в раздел «Эффект при скролле» и выбираем пункт «С фиксацией». Так мы сможем использовать знаменитый параллакс-эффект на странице.
В конструкторе Тильда для создания или изменения фона специальных навыков не требуется. Но пренебрегать возможностями изменять стандартные фоны под свой проект не стоит, ведь фон – это важный элемент дизайна страницы, правильно выбранный бэкграунд влияет на общее позитивное или негативное мнение посетителей о сайте.
Помимо стандартных блоков, в конструкторе Tilda также имеются пустые, так называемые Zero Block, инструменты. Zero Block, или нулевой блок, позволяет не пользоваться шаблонными решениями, а создавать индивидуальный дизайн страницы сайта. Разберем, как изменить или добавить фон, работая с нулевым блоком конструктора Тильда.
Первое, что нужно сделать, – добавить сам блок на рабочую страницу. Сделать это можно двумя способами:
1. На рабочей области нажимаем на кнопку «Добавить блок», листаем в самый низ и выбираем Zero Block.
2. Кликая по кнопке «Все блоки», вызываем меню-бар слева. Также пролистываем до самого конца и выбираем Zero Block.
После появления Нулевого Блока нажимаем на «Редактировать блок» в левом верхнем углу, попадаем в редактор, выделяем и удаляем все элементы, содержащиеся в блоке. Готово, у нас получился пустой блок, с которым можно делать все, что мы хотим.
К добавлению фона в Нулевой Блок мы вернемся ниже, сначала поможем разобраться с базовым принципом работы в нем. В Zero block есть две рабочие области или два «контейнера». Область сетки, Grid Container и Window Container, используется для условного обозначения границ экрана.
Фоновые и выносные элементы мы прикрепляем к разным рабочим областям и выставляем разные варианты масштабирования: для фона в процентах (%), для выносных элементов в пикселях (px).
Все выносные элементы (кнопки, формы, логотипы и картинки) нужно размещать в зеро-блок таким образом, чтобы они не выходили за границы Grid Container. О полноценной работе с Zero Block мы расскажем позднее, т.к. это тема отдельной статьи, сейчас сосредоточимся на добавлении фона.
Чтобы разместить фоновый элемент, который будет зафиксирован в границах экрана устройства и сможет подстраиваться под разные разрешения, нужно:
1. Выбрать в панели элементов элемент «Shape»:
Этим желтым квадратом нам и предстоит дальше работать.
2. Настраиваем расположение шейпа в Window Container:
Привязываем нашу фигуру к Window Container:
Выставляем расположения по осям – фигура должна переместиться в центр экрана:
Далее меняем значения масштабирования элемента на процентное значение, после этого shape должен растянуться по всей рабочей области:
Финальным штрихом будет загрузка подготовленного изображения. Для этого прокручиваем меню настроек ниже, где находим кнопку «Upload File». Кликаем по этой кнопке, выбираем изображение с компьютера и загружаем.
После всех действий сохраняем результат и выходим из редактора блока или продолжаем работу дальше.
Готово. Проведя все эти манипуляции, мы получаем фон для блока, который будет растягиваться и сжиматься в зависимости от размера и типа устройства, с которого пользователь просматривает страницу.
Вариантов работы с фоновыми изображениями в Zero Block множество. Нулевой Блок позволяет максимально индивидуализировать вашу страницу и отстроиться от конкурентов. При работе зиро-блок у вас нет почти никаких творческих ограничений. О том, что еще можно делать с помощью этого инструмента, мы расскажем в следующих статьях о работе в конструкторе сайтов Tilda.
Как сделать меню сайта
Укажите абсолютную ссылку на страницу, например:
http://mysite.com/about
Либо относительную:
/about
Адреса отдельных страниц задаются в настройках каждой страницы:
Не указывайте внутренний адрес страницы в редакторе Тильды, например:
По этому адресу открыть страницу можете только вы. В меню она работать не будет.
Чтобы сделать меню сразу для всех страниц проекта (сайта), создайте пустую страницу, добавьте на нее блок меню и настройте его. Затем перейдите в настройки сайта, на вкладку «Шапка и подвал» и назначьте эту страницу как Header. Нажмите «Опубликовать все страницы».
Чтобы сделать меню для навигации внутри страницы, пропишите в ссылках номера блоков (ссылка будет выглядеть как #rec2081259), на которые должны переходить пользователи по нажатию на пункт меню. Номер каждого блока указан в настройках блока.
Если вы хотите, чтобы в ссылке был не номер блока, а название раздела, используйте якорные ссылки.
Чтобы сделать двуязычный сайт, создайте два проекта. Обычно удобно сделать сначала версию на одном языке, а потом скопировать проект и перевести на другой язык.
Настройте «шапку» в обоих проектах, добавив в нее блок меню, в котором есть настройка языков: ME204, МЕ301, ME302, ME303, ME304, ME401, МЕ402, МЕ403. В содержании блока укажите языки и ссылки на проекты.
Добавьте на страницу блок меню.
Чтобы добавить второй уровень, нажмите на «+», укажите заголовок подпункта и его ссылку. Нажмите на «+» несколько раз, чтобы добавить необходимое количество подпунктов.
Добавьте на страницу любой блок меню — это будет меню первого уровня. Затем добавьте блок ME601 (Меню: второй уровень).
Блок ME601 позволяет добавить подразделы к пунктам основного меню. Они будут показываться при наведении в формате выпадающего меню. В мобильных версиях меню будет открываться по тапу.
Как это работает :
1) В блоке МЕ601: пропишите ссылку вида #submenu:more
2) В основном меню: в поле ссылка, напротив пункта, к которому вы хотите сделать подразделы, укажите #submenu:more.
Важно : сам пункт основного меню кликабельным не будет. Если нужно чтобы на нем была ссылка, продублируете этот пункт в выпадающем меню.
Примечание : «#submenu:more» может быть любым словом, например: #submenu:portfolio или #submenu:aboutus
Инструкция: создаем лендинг на Tilda через Zero Block
Лендинг – идеальный инструмент для быстрого запуска новых товаров, услуг и акций. Теперь вовсе необязательно привлекать сторонних подрядчиков, чтобы создать свою посадочную страницу: достаточно будет конструктора сайтов на Tilda в Zero Block. Вместе создадим первый экран лендинга, адаптированный под все распространенные устройства.
Интерфейс Zero-редактора
Чтобы приступить к работе, переходим на уже созданный ранее лендинг либо создаем новый и нажимаем на кнопку «Создать новую страницу»:
В случае, если мы создали новый сайт, Tilda сама предложит добавить первый блок. Выбираем иконку Zero:
Если у вас уже есть несколько блоков на странице, такого предложения вы не увидите. Нужно будет навести курсор на поле между блоками, чтобы появилась иконка плюса:
Нажимаем на плюс и прокручиваем боковое меню в самый низ. Нажимаем по кнопке «Нулевой блок»:
Поздравляем! Теперь у нас создан нулевой блок со стандартным содержимым. Он не несет никакой практической пользы, да и приятным с точки зрения визуала его никак не назовешь. Все его содержание мы удалим, после чего приступим к созданию своего уникального дизайна на базе этого самого нулевого блока.
Для редактирования содержимого нажимаем по кнопке «Редактировать блок»:
Чтобы удалить содержимое, достаточно выделить курсором все элементы и нажать на кнопку del на клавиатуре. Алгоритм такой же, как в Photoshop, Paint или любой другой офисной программе.
Многие элементы в Zero Block выполнены по аналогии с привычными программами, и, если у вас есть опыт работы в Photoshop, Word и похожем софте, вы увидите знакомые элементы.
Артборд
Артборд – наша основная рабочая зона. На ней мы размещаем элементы, и именно ее содержимое увидит реальный пользователь, когда перейдет на наш сайт.
Ширина блока составляет 1200 px – это максимально возможная ширина лендинга. Большинство ноутбуков имеют ширину экрана 1344 px, и с большей шириной сайт рискует просто не поместиться на экран. Появится горизонтальная прокрутка, что негативно скажется на пользовательском опыте и, как следствие, на конверсии. Адаптировать сайт под меньшее разрешение мы можем (вплоть до 320 px), но об этом чуть дальше в статье.
В отличие от ширины, высоту мы можем менять. Достаточно навести курсор на нижний край и с зажатой мышкой потянуть его вверх или вниз.
При работе с артбордом учитывайте, что, даже если какой-либо элемент сайта размещен вне видимой части, он все равно будет прогружаться у пользователя.
Злоупотреблять этим не стоит, т. к. большое количество элементов может повлиять на скорость загрузки. Если вы разместите элемент ниже видимой части артборда, он может отобразиться в блоке ниже.
За это отвечает параметр Overflow в настройках артборда. Доступно 3 параметра:
Модульная сетка
Обратите внимание на вертикальные полосы в артборде. Это направляющие линии, которые используются для позиционирования элементов. Их отображение можно включать и выключать – достаточно нажать на клавиатуре G. Мы ориентируемся на них, когда размещаем элементы, чтобы они выглядели органично и привычно для пользователя. Таким образом, нам не придется вручную считать пиксели.
Если необходимо, мы можем создавать дополнительные направляющие, горизонтальные и вертикальные, чтобы по ним выравнивать элементы сайта.
Для создания горизонтальных направляющих нужно нажать комбинацию клавиш Ctrl+H (⌘+H для Mac), а для вертикальных – Ctrl+Shift+H (⌘+Shift+H).
Также это можно сделать через меню в правом верхнем углу:
Направляющие не отображаются на сайте, а только служат для более точного позиционирования элементов. Удалять их не обязательно – можно просто временно скрыть через то же меню (пункт Guides: Hide/Show). Если все-таки собираетесь удалять, наведите курсор на направляющую и нажмите крестик.
Настройки блока
По умолчанию настройки скрыты. Чтобы они появились, нажмите Tab на клавиатуре.
В настройках мы можем установить высоту блока, задав точное значение в пикселях.
Не советуем устанавливать слишком большое значение. Берите максимум 700 px, иначе блок не поместится на одном экране ноутбука и ухудшит пользовательский опыт. Например, ваш оффер не будет видно, и пользователь уйдет с сайта.
Значение высоты мы можем установить как в пикелях (Grid Container Height, px), так и в процентах (Window Container Height, %). С помощью параметра Grid Container Align in window можно установить, из какой точки будет идти отчет пикселей: из центра, верней или нижней границы.
Присутствует также возможность изменить цвет фона или добавить изображение:
Предусмотрена возможность дополнить фон вертикальным градиентом, изменяя цвет и прозрачность. Особенно это полезно при создании первого экрана. Так, можно добавить тематическую картинку и затемнить ее с помощью градиента, чтобы сделать акцент над элементами сайта.
К примеру, если мы делаем лендинг компании, занимающейся строительством домов, подойдет тематическое фото постройки дома, но оно не должно перетягивать на себя внимание. Для этого добавляем фото на фон и дополняем градиентом.
Сравните оригинальное фото и получившийся результат.
Как и настройки артборда, слои по умолчанию не отображаются. Для начала работы с ними нужно нажать комбинацию клавиш Ctrl+L (либо ⌘+L для MacOS). Этот инструмент позволяет нам схематично посмотреть на элементы, из которых состоит Zero Block.
Также мы можем переносить слои, размещать одни элементы выше других, закреплять (символ замка) или выключать их отображение (символ глаза).
Учитывайте, что слои имеют приоритет по высоте. Если фон будет выше слоя с текстом, то пользователь увидит только фон – он закроет собой текст. Менять слои можно, перетаскивая их мышкой в меню слоев.
Чтобы зафиксировать слой, нажмите по символу замка справа от названия слоя. Это полезно, если речь идет о фоне или любом уже готовом элементе. После этого вы не сможете его сдвинуть, даже если случайно выделите на артборде. Такое бывает часто, если хочешь выделить текст, а попадаешь на фон. Приходится отменять действие, возвращать фон на место, снова выделять текст и т. д. Может показаться, что это некритично. Если такое будет происходить часто, вы поймете, что это может отнимать много времени. Лучше сразу блокировать слои, по крайней мере, различные фоны, которые точно не придется двигать.
Доступные элементы
Для добавления элементов на артборд необходимо нажать в левом верхнем углу на плюс, после этого появится выпадающий список с доступными элементами:
После создания и размещения элемента в артборде доступны отдельные настройки. По умолчанию они скрыты. Для их отображения нужно нажать Tab или кнопку Settings справа внизу экрана.
Настройки всех элементов начинаются с настроек позиционирования.
Мы можем выровнять объекты относительно друг друга или задать позицию, высоту и ширину объекта в пикселях.
Для разных элементов настройки тоже будут разными. Следует сначала выбрать элемент, а затем переходить к настройкам. Если они открыты, когда не выбран ни один элемент, это настройки всего артборда.
Text – самый понятный элемент. Создает обычный текст.
Текст
В первую очередь это выравнивание (слева, по центру, справа), цвет, кегль, шрифт и отступы. Учитывайте, что выравнивание по ширине выполняется относительно текстового блока, а не всей страницы.
При выборе цвета мы можем сохранить текущий, чтобы не подбирать его снова. Для этого нажмите на маленький плюсик, и тогда цвет сохранится слева от знака:
Для основного текста лучше не выбирать значения кегля меньше 14 px.
Есть 2 значения отступов (spacing): интерлиньяж (расстояние между строками) и кернинг (между символами). Рекомендую первое значение выбирать между 1,2–1,5, а второе не менять. В любом случае, в первую очередь ориентируйтесь на визуальное восприятие текста.
Нам также доступна прозрачность, изменение угла наклона и слоя текста.
Первые 2 параметра могут пригодиться для реализации нестандартного решения с текстом:
Для управления слоем с текстом мы можем воспользоваться четырьмя командами (слева направо):
При этом есть возможность через параметр Target выбрать, в каком окне откроется ссылка: в том же самом (Same window) или в новой вкладке (New window).
Если вы делаете лендинг, лучше обойтись без внешних ссылок. Если вам все-таки нужно их использовать, выбирайте New window: закрыв окно, пользователь сможет вернуться на ваш лендинг.
Чтобы добавить меню сайта, используем инструмент «Текст». Создаем первый элемент. Пусть это будет ссылка «Главная». Задаем ей основные параметры:
Я выбрал такой оттенок, чтобы он подходил под цветовую гамму сайта, но при этом на контрасте с фоном привлекал к себе внимание. Старайтесь не использовать на сайте больше 3 цветов.
Размер кегля устанавливаем такой, чтобы меню было и заметно, и не перетягивало внимание с основных элементов, которые мы разместим ниже.
Теперь мы можем просто скопировать получившийся элемент и поменять текст.
Скопировать можно двумя способами: нажатием на клавиатуре Ctrl+C (⌘+C для MacOS) и Ctrl+V (⌘+V для MacOS) или через боковое меню, нажав на Copy.
Советую приучить себя использовать именно горячие клавиши: это значительно ускорит рабочий процесс.
Теперь просто делаем нужное нам количество копий и переименовываем ссылки. Выставляем их в ряд на глаз. Более точное позиционирование элементов рассмотрим чуть позже.
Теперь добавим номер телефона и разместим его правее меню. Немного изменим его цвет – сделаем его более ярким и заметным:
Обратите внимание, что мы можем менять внешний вид текста не только для всего элемента, но и для отдельных букв или слов. Для этого дважды щелкните на тексте, чтобы выделить его. После этого появится небольшое меню вверху:
Через него мы можем:
Теперь наш первый экран выглядит вот так:
Изображения
С помощью этого элемента, как нетрудно догадаться, мы добавляем графические элементы. Это может быть как фон, так и картинка, фото, иконка и т. д.
Добавляем элемент на артборд. Сначала он будет незаполненным.
Чтобы загрузить нужное изображение, переходим в настройки этого элемента и добавляем изображение:
Доступно 2 варианта загрузки: как файл с компьютера и по ссылке из интернета.
Для загрузки файла с компьютера нажмите по кнопке Upload file в центре окна. Для загрузки по URL нажмите по ссылке Upload from URL внизу формы.
Далее идут такие же настройки, как и в тексте: прозрачность, поворот, слои, гиперссылки. Также к изображениям можно добавлять границу и текст.
Эти элементы позволяют разнообразить визуал добавленных нами изображений. Иногда уместно использовать тень, чтобы отделить изображение от остального контента страницы.
Нам доступно изменение цвета (color), ширины (brdr.size) и скругления границы (radius). Помимо этого, можно выбрать стиль самой границы через параметр Style. Доступны такие варианты:
Что касается тени, тут гораздо больше возможностей для креатива:
Секрет удачной тени кроется в параметрах Offset, Blue, Spread. Мы можем сдвинуть одну или несколько сторон, изменить размытие или величину тени. По сути, мы можем даже фон поменять не отдельным элементом, а просто изменив тень.