как сделать меню в зеро блок на тильда с фиксацией

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Как сделать меню в зеро блок на тильда с фиксацией

Добавить на страницу блок ME301 и задать в настройках блока следующие параметры:

Основные настройки > Поведение позиционирования — С наложением на следующий блок, но без фиксирования
Фон меню > Непрозрачность фона меню — 0%

Добавить на страницу блок ME301 и задать в настройках блока следующие параметры:

Основные настройки > Поведение позиционирования — Фиксация при скролле
Фон меню > Цвет фона меню — на выбор
Фон меню > Непрозрачность фона меню — 0%
Фон меню > Непрозрачность фона меню после начала скролла — 80%

Добавить на страницу два блока ME301. И задать им следующие параметры:

Первое меню (остается на обложке)
Основные настройки > Поведение позиционирования — С наложением на следующий блок, но без фиксирования
Фон меню > Непрозрачность фона меню — 0%

Второе меню (появляется при скролле)
Основные настройки > Поведение позиционирования — Фиксация при скролле
Основные настройки > Появление меню при прокрутке через N пикселей — 600px
Фон меню > Цвет фона меню — на выбор
Фон меню > Непрозрачность фона меню — 70%

Как себя ведет:
Меню в виде трех полосок в углу экрана, при клике на которое раскрывается полная версия.

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

Добавить на страницу блок ME401/402/403/404/405, настроить поведение позиционирования, цвет иконки меню и цвет фона самого меню и цвет фона для пунктов меню. В нашем примере параметры будут следующими:

Основные настройки > Поведение позиционирования — Фиксация при скролле
Иконка меню > Цвет — черный
Фон меню > Цвет фона меню — прозрачный
Пункты меню > Цвет фона — белый

Как себя ведет:
При клике на пункт меню появляется выпадающий список вложенных пунктов.

Для чего используется:
В объемных сайтах со сложной структурой.

Добавить пункты подменю у основного блока или использовать сочетание меню ME301(или любого другого с пунктами меню) и ME601.

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

Перейти в Контент блока → Список пунктов меню → нажать «Добавить пункты второго уровня» — напротив пунктов меню появятся иконки в виде символа плюс.

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

Чтобы добавить новый пункт подменю, нажмите на иконку плюса ещё раз.

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

Важно : сам пункт основного меню кликабельным не будет. Если нужно чтобы на нем была ссылка, продублируете этот пункт в выпадающем меню.

Добавить на страницу блок ME301, настроить меню, как в примерах выше и добавить блок ME601 (Меню: второй уровень).

Блок ME601 позволяет добавить подразделы к пунктам основного меню. Они будут показываться при наведении в формате выпадающего меню. В мобильных версиях меню будет открываться по тапу.

Как это работает :
1) В блоке ME601: пропишите ссылку вида #submenu:more
2) В основном меню: в поле ссылка, напротив пункта, к которому вы хотите сделать подразделы, укажите #submenu:more.

Важно : сам пункт основного меню кликабельным не будет. Если нужно чтобы на нем была ссылка, продублируете этот пункт в выпадающем меню.

Примечание : «#submenu:more» может быть любым словом, например: #submenu:portfolio или #submenu:aboutus

Источник

Zero Block: отзывчивый дизайн

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

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

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

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

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

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

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

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

По умолчанию все элементы привязаны к 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 загрузить не получится, потому что такой размер будет влиять на производительность браузера и скорость загрузки сайта.

Источник

Как сделать меню в зеро блок на тильда с фиксацией

Чтобы получить скрипт заполните форму ниже↓.

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

Ожидания перед началом курса были – хотела получить базовые знания по SEO оптимизации, в целом, они оправдались. Все, что я узнала на курсе можно применить в работе уже сегодня. Курсы Алексея Чеснокова однозначно рекомендую!

Курсы мне понравились. Мои разрозненные знания структурировались! Понравилось живое общение c ответами на вопросы. Конкретика. Материалы презентации прекрасные. Это толчок к более углубленным знаниям в последующей работе. По курсу у меня замечаний нет.
Единственное, хотелось бы в программе видеть для SEO-шников больше практических работ по написанию мета-тегов и сниппетов, с URL-ами для контекстной рекламы. Для владельца бизнеса и постановки задач для SEO и SMM менеджеров вполне нормально.
Оценка Алексею, как преподавателю 5 из 5. Мои ожидания от курса оправдались. Интернет отдел зашевелился. Курсы Алексея Чеснокова рекомендую своим партнерам и специалистам. Ученье свет. Правда ученых стало тьма тьмущая.

Алексей, желаю Вам защитить кандидатскую, для получения ссылки МГУ 😊)) Да и побольше удачи. Она в бизнесе одно из основных слагаемых успеха, вместе с упорством и знаниями!

Мне, как человеку достаточно далекому от сайтов, продвижения, и всего того, что с этим связано, было интересно прослушать курс по SEO. Теперь стало понятно, что это и зачем нужно! Теперь буду пробовать применять полученные знания на практике. Материал излагался простым и доступным языком. Единственное, чего не хватало – это побольше практических заданий. В целом 9 из 10. Так что ожидания от курса оправдались. Обязательно порекомендую Ваши курсы!

Алексей, хочу пожелать Вам дальнейшего профессионального роста и прибыльных проектов. Удачи!!

Курс Алексея Чеснокова от других отличает особая душевность в подходе и вера в учеников. Я очень довольна процессом обучения. К своему удивлению смогла сделать то, за что боялась даже подумать браться. Хочется отметить спокойное внятное объяснение. Достаточно интересный рассказ. Все мои ожидания от обучения оправдались – я научилась делать сайты.

Спасибо за курс! Желаю вам крепкого здоровья и нервов)

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

Желаю вам успеха, интересных проектов и благодарных слушателей!

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

Карьерных высот вам!)

Интересный материал, приятная манера общения, структура курса – считаю, что именно эти моменты отличают Алексея Чеснокова от других преподавателей. От обучения получила только положительные впечатления – чувствую, что время провела с пользой, узнала новое и релевантное моим потребностям. Единственное чего не хватило в программе курса, это возможности сделать что-то самостоятельно, например, кейс какой-нибудь. На мой взгляд, нужна практическая часть. Курс, который я посетила – разработка сайтов, примерно так назывался, кажется. Мне было полезно узнать про разные движки и платформы, структуру сайта. Хорошо, что у были примеры успешных и неуспешных сайтов.

Оставайтесь таким же вдохновлённым – это важно для любого дела и преподавания в частности!

Очень понравилась креативность преподавателя, вовлеченность в процесс, его ораторское искусство и легкость передачи знаний. Благодаря этому большой объем практических знаний легко умещается и переваривается в котелке. Информация на курсе излагалась последовательно и лаконично. Профессионализм, организованность, оптимизм и контактность – все это однозначно сильные стороны Алексея Чеснокова. Удивила его готовность транслировать информация круглосуточно, без перерывов. Был замечен легкий переход на сторонние темы (хотя в моем случае это даже плюс). Мои ожидания от курса «Яндекс Директ» оправдались, получила практический опыт и знания в изучаемой области.

Желаю вам оставаться таким же жизнерадостным, открытым и креативным, совершенствовать свои знания и навыки, продвигаться в новых областях)))

Затрудняюсь дать оценку лектору, так как не с чем сравнивать, у преподавателей по созданию сайта никогда не был. Это мой первый курс по данной теме. Легко, драйвово, продуктивно – это мои впечатления от процесса обучения. Алексей Чесноков практик, ему нравится преподавать и делиться опытом (это видно). И, главное, он умеет объяснять сложное простыми словами. Минусов не нашёл). Когда шел на курс думал, что я полностью разберусь как работать при создании сайтов и смогу грамотно выстроить работу подрядчика, а также смогу убедить руководство, что у нас есть проблемы по этой части, и нам нужно менять подрядчика. А ещё я надеялся, что смогу сам «руками» работать по этому направлению. Ожидания не совсем оправдались, так как после 6 часового блока по созданию сайта в рамках digital курса все равно остались вопросы. Мне не хватило времени, чтобы спросить то, чего не было в презентации.

Желаю вам удачи в вашем деле)))

Алексей, Вы прекрасны! Иногда Вас уводит в рассуждалки, от темы… иногда перескакиваете, не дожав интересное и важное. но в целом, супер! Желаю Вам адекватных клиентов, прибыльных заказов, минимальной зависимости от дурацких гос.структур, но стабильной поддержки от них))) Творчества, сбычи желаемого и крепкого ЗДОРОВЬЯ.

Впечатления от обучения на отлично! Материал дан в полной мере, понравилась последовательность подачи материала и важные заметки/комментарии. Сложно сказать, чем еще можно улучшить программу, наверняка курс и так оттачивается от потока к потоку. Моя оценка Алексею, как преподавателю строго положительная. На курс пошел, поскольку нужны были базовые знания по AdWords, а по итогу получил углубленные. Курс Алексея Чеснокова безусловно рекомендую

Алексей, желаю вам здоровья, личностного и профессионального роста, и возможность заниматься любимым делом!

Обучение на курсе было познавательно и не скучно)) Программа достаточно охватывающая, много тем, которые хотелось бы изучить глубже. Из минусов для меня было слишком много узких профессиональных терминов, значение которых лично я спросить стеснялась. Полагаю, стоит побольше объяснять значение терминов простыми словами для таких чайников как я, хотя я из тех чайников, кто живо интересуется 🙂 Программу можно было бы улучшить добавлением часов, я уже упоминала что программа обширная. К сожалению, мои ожидания от курса не очень оправдались. Не все ясно, возможно потому, что я совсем не технарь, или мне нужно больше времени для освоения курса. Но при этом если бы я раньше прослушала ваши советы по созданию сайта, я бы не наделала ошибок в ТЗ на создание сайта Отделения платных услуг в прошлом году.

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

От души желаю большой удачи в вашем деле. Сразу заметно, что вы занимаетесь любимым делом!

Курс мне очень понравился, интересный, насыщенный и все рассказано простым языком. У Алексея интересный подход к преподаванию, лично меня порадовала неформальность общения, разбор примеров на практике – все было отлично. Единственное, по программе обучения хотелось бы больше часов. Моя оценка за курс 10 по 5-ти бальной шкале!!

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

Успехов вам и хорошего настроения!

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

Курс превзошёл мои ожидания, рекомендую всем Алексея Чеснокова. Удачи вам и успехов в маркетинге!

В целом, у меня остались только положительные впечатления от процесса обучения. Алексей все объяснял очень доступным языком, а предоставленный материал был информативным и исчерпывающим. В программе обучения понравилось, что Алексей, прежде всего, практик, и человек, который постоянно развивается в сфере digital, в курсе инструментов, последних трендов и, самое главное, что он охотно делится информацией. Как маркетолог, с какими-то инструментами я уже сталкивалась в своей работе, изучая их самостоятельно, поэтому какие-то моменты мною были упущены. Благодаря Алексею некоторые пробелы в уже имеющихся знаниях удалось устранить. Отдельное спасибо за разбор Youtube, эта тема была для меня абсолютно новая. Очень хотелось более углубленно изучить Яндекс Директ и Google Рекламу, однако понимаю, что за выделенные 152 часа это практически нереально было сделать.

Видно, что Алексей прирожденный преподаватель, и не зря имеет педагогическое образование, поэтому он достоин несомненно высокой оценки.
Курсы Алексея Чеснокова однозначно рекомендую. Хочется отдельно пожелать Алексею успехов и удачи во всех начинаниях и проектах действующих и будущих!

Источник