диапазон видимости на устройствах тильда что это
Мобильная версия сайта на Тильде
Зачем нужна мобильная версия сайта
Начну с краткого экскурса.
Для чего нужна мобильная адаптация?
В первую очередь для того, чтобы посетителю с мобильных устройств было удобно просматривать ваш сайт. Ведь если он зайдет с мобильного, а ему покажется обычная версия сайта (под десктопы), то с огромной вероятностью, посетитель уйдет искать более удобный сайт. А в 2021 году, процент посетителей с телефонов и планшетов сильно обгоняет компьютерный трафик.
Почему же Тильда?
Я ярый приверженец конструктора Tilda Publishing. Потому что, ребята очень активно развиваются, сама платформа не глючная (я знаю, о чем говорю, у меня за спиной работа не в одном десятке конструкторов). Широчайшие возможности. Даже если что-то не удается реализовать в стандартном функционале, то есть энтузиасты, которые помогают пользователям с реализацией кода.
Из коробки в Тильде идет интеграция со множествами сервисами (оплаты, рекламы и аналитики от Яндекс и Google, CRM, email-рассылок и тд.)
Особенно хорошо продвигаются сайты на Тильде в поиске. Есть чек-лист проверки сайта под SEO, настройка переадресации и редиректов.
Есть прекрасный функционал мультилендинга, что значительно увеличивает конверсию с платного трафика.
Что-то я отвлекся. На самом деле, конструктор Tilda я могу расхваливать часами)))
Перейдем к адаптации.
Настройка диапазона видимости в Tilda
Мобильная адаптация стандартных блоковна платформе Tilda
Мало кто знает, но у стандартных блоков Тильды, можно настраивать отдельно отступ для мобильной адаптации. Сверху и снизу. Ну это логично)))
Но для этого надо нажать на иконку ноутбука, где настраиваются отступы.
Вообще, Tilda мне нравится еще и тем, что они лаконично и удобно вписывают настройки в интерфейс. То, что может навредить в дизайне сайтов молодому дизайнеру, они прячут.
А вообще, функционал стандартных блоков конструктора крайне ограничен и сложные проекты разработчику на них сложно создать. Для этого на помощь приходит Zero!
Мобильная версия на Зеро (Zero) в Tilda
Тут ты волен творить, что душе угодно. Главное не перемудрить. Если ты дизайнер с опытом, то этот блок точно для тебя.
Кстати, возможно, кто-то не знает, но в Тильде можно конвертировать стандартный блок в Зеро. Не все, но многие.
Только главное правило, сначала конвертируй, потом уже в нем создавай страницу или блок. Потому что можно подумать, что сначала я сделаю, то что мне нужно, а потом я сконвертирую в Zero и будет мне счастье, но нет. При конвертации, все ваше редактирование, слетит и блок превратится в базовую версию стандартного.
Вообще, для быстрой работы с Zero и настройки адаптации, нужен опыт. Я вспоминаю себя, начинающим пользователем Tilda, для меня адаптация превращалась в ад, я тратил на нее уйму времени, делая ее самостоятельно, без расширений и помощников в виде обычного shape. Я с калькулятором и направляющими считал отступы и в редакторе двигал элементы.
Я даже не думал о том, что отступы можно было измерить шэйпом и этот же шэйп использовать как измеритель расстояния других элементов.
Отключение адаптивной верстки
Расширение-помощник для работы в адаптацией в Тильде
Сейчас же, появилось прекрасное расширение Annexx (платное) от сторонних разработчиков с мощным функционалом, но его цена ничтожна мала по сравнению с экономией времени.
Разработчики дали возможность сами выбрать, сколько оплатить. Цена в месяц. Минимальная стоимость около 250 руб.
С этим расширением легко массово настраивать выравнивание и сетку (Grid Window контейнер). Для текстовых элементов, есть возможность (как в Фигме) одной кнопкой сделать все буквы с большой или маленькой буквы.
Есть возможность предпросмотра штрифтов из Google Fonts. Именно предпросмотра. Для этого вы в Зеро в Тильде включаете определенный штрифт, расширение его подтягивает из Гугл шрифтов, для предпросмотра, а при выходе, он сбрасывается. Это сделано для того, чтобы вы могли быстро перебирать штрифты и выбирать понравившиеся. А потом, подключать в Тильде.
Лично я этой функцией не пользуюсь, потому что я все сайты сначала делаю в Фигме, а потом переношу в Тильду.
Также, можно массово включать и копировать sbs-анимацию.
Более подробно обо всех функциях можете прочитать на сайте разработчика.
В Zero, лучше делать все по порядку.
Например, у вас есть карточки товаров или что-то подобное, что сильно меняет расположение и размер в зависимости от разрешения экрана (как у меня на скрине).
Не делайте все сразу элементы, в одном разрешении.
Вы сэкономите кучу времени сделав так:
Настроили один элемент, обязательно его сначала адаптируйте под все разрешения, а потом копируйте его. Далее вам нужно будет только выравнивать относительно сетки и других элементов, а размеры у вас автоматом уже меняются)
Не уделяйте много времени всем разрешениям, которые настраиваются в Тильде!
Уделяйте много времени только трем разрешениям:
— от 0 до 320 px,
— от 320 до 480 px,
— от 1200 до ∞
Почему так? Потому что это самые популярные разрешения, с которых заходят пользователи на сайты.
Нет смысла прорабатывать планшеты и разрешения маленьких старых мониторов, просто потому, что максимум 5% людей зайдут именно с них.
То есть, прорабатываем мобилки и компы (ноуты). Остальное, просто должно все вмещаться в видимую зону.
Верстка текста и заголовков в Zero (на мобильных)
Для тех пользователей, которые верстают текстовые блоки в редакторе зеро в Тильде.
Многие замечали, наверное, что если мы чередуем стандартный блок и зеро, где есть текст или заголовок, то у них разные отступы на телефонах.
Частое сочетание, когда стандартный блок заголовка, а текст сверстанный в зеро. У стандартных блоков стоит отступ 20 пикселей от края экрана (Window), а в зеро, стандартно на мобильной версии 10 px по Grid.
Чтобы это исправить, нужно просто в Zero задать отступ 20 px и поставить Window контейнер.
Так как разрешения мобильных экранов, пестрят разнообразностью, то текст нужно выровнить аккуратно по всей ширине экрана телефона. Для этого надо в настройках ширины текстового контейнера, переключить с пикселей на %. (На скрине ниже показано) и отрегулировать чтобы текст занимал всю ширину экрана, но и были отступы примерно по 20 px от левого и правого края экрана.
Есть минусы этого способа верстки, но они не значительные, поэтому об этом не будем (Если кому интересно, пишите в комментах, отвечу). Ну и в любом случае, другого способа выравнивания контента в Zero относительно стандартных блоков в Тильде я не нашел.
Мобильное меню в Тильде
Подходим к одному из самых интересных моментов в статье про адаптацию на Тильде — это мобильное меню.
И всю эту информацию, надо уместить потом в мобильной версии.
Логотип, телефон, почта и кнопка меню, прекрасно умещаются на телефоне, а вот остальное нужно «упаковать» в моб меню и его надо выбирать из возможностей и данного проекта, над которым работаете.
Кнопку бургера можно использовать стандартную из блока, можно нарисовать свою уникальную с помощью шэйпов в Тильде, а потом сгруппировать эти слои (кстати, совсем недавнее обновление в конструкторе Tilda) и поставить ей ссылку на меню.
Если есть вопросы по Тильде, задавайте в конце этой страницы, после видео.
Как создать сайт без программирования на Тильде с нуля
Прошли те времена, когда сайты создавали только программисты и IT-компании. Теперь любой, вне зависимости от возраста, рода занятий и навыков, может сделать свой сайт. И выглядеть это будет стильно. Бросьте все эти «не умею», «не могу» и «не разбираюсь». К концу этого материала у вас будет достаточно знаний, чтобы запилить свой собственный интернет-магазин, страницу компании, портфолио (да что угодно) в конструкторе сайтов Тильда.
Почему Tilda подходит для не-программистов
Если вы в принципе не задумывались над тем, как создаются сайты, вы вряд ли пользовались конструкторами и знаете, как они устроены. Tilda — это блочный конструктор сайтов. Внутри больше 480 готовых блоков. Все они разделены по назначению, чтобы было проще найти нужный: готовые меню, обложки, блоки «О компании», списки услуг и тарифов, галереи, формы захвата данных, карточки товаров интернет-магазина и все-все, что нужно вам для создания сайта. И все это вы можете комбинировать, настраивать и изменять на свое усмотрение. А можете и не изменять: блоки сконструированы так, чтобы органично смотреться друг с другом. Отдельный инструмент — «Нулевой» блок. Его возможности почти безграничны, а контент не привязан к заданным местам.
Конструктор несложный и интуитивно понятный. В самом начале вы получите все инструкции, где искать блоки, как менять настройки и контент, как работать в Нулевом блоке. В общем, вас всему научат, и вы быстро освоитесь, не переживайте.
С чего начать, если я не хочу заморачиваться?
С шаблонов. В Тильде их сотни. При условии, что у вас уже есть вся информация и картинки, вам хватит и получаса (15 минут из них вы будете осваиваться и подгонять детали). Универсальные варианты для компаний, магазинов, блогов и мероприятий, резюме и портфолио. Услуги нотариуса и адвоката, автосервис, салон красоты, кофейня или ресторан, фитнес-центр, детский сад, хостел, мобильное приложение, интернет-магазин, резюме или портфолио. Если вы не готовы заниматься структурой и дизайном, берите один из готовых шаблонов, добавляйте свою информацию и публикуйте сайт.
Совет
Не зацикливайтесь на шаблонах для ваших целей. Лучше смотрите на структуру страницы и подбирайте вариант, который подойдет вашим целям. Заменить контент проще, чем выстраивать структуру. А если в готовом шаблоне не нашлось нужных блоков, поищите их в других примерах и просто скопируйте на страницу.
Как редактировать блоки?
У каждого блока есть вкладки настроек и контента. В первой вы можете отрегулировать ширину и высоту, выбрать выравнивание картинки и текста, настроить типографику и особенности кнопок, добавить анимацию и выставить диапазон видимости на разных устройствах (это понадобится вам для адаптации под смартфоны и планшеты). На вкладке контента вы сможете добавить и заменить текст и картинки. Впрочем, это же вы можете делать, не открывая вкладку. Редактирование текста доступно прямо в окне. В некоторых блоках и картинки можно заменить, просто перетащив их с компьютера. И никаких бесконечных обновлений страницы и превью — результат буден виден сразу.
А что, если мне не нужны шаблоны? Хочу создать свою структуру
Значит, зарывайтесь в библиотеку блоков. В ней вы гарантированно залипнете. Выберите блоки, которые отвечают вашим целям. Добавьте свои тексты и изображения, выберите фирменные цвета и настройте отображение кнопок. Вы можете менять высоту и ширину блоков, количество элементов в ряду и еще множество параметров, чтобы сделать сайт именно таким, как вам хочется. При этом процесс настолько упрощен, что все делается по клику и выглядит презентабельно.
Совет
Накидайте структуру сайта сначала на бумаге. Опирайтесь на цели сайта и поведение вашей целевой аудитории. Подумайте, что хотите донести и какой путь приведет пользователя к желаемой цели: заявке, звонку или реакции на новый пост в блоге. Не исключено, что в процессе структура изменится, но вам нужен план действий, чтобы не растягивать процесс и не сбиваться с пути. А если трудно определиться, почитайте пошаговое руководство Тильды вот тут.
Список блоков регулярно обновляется, и в Тильде появляется все больше вариантов, которые заточены под конкретные цели. Здесь вы можете создавать даже голосования и викторины.
Все. Я готов идти дальше. Что там было про «Нулевой» блок?
Этот блок в Тильде дает впечатляющий диапазон возможностей. В вашем распоряжении будут тексты, картинки, формы, кнопки, видео, галереи и HTML-контейнеры. И все это не привязано к конкретным местам, как в готовых блоках. Вы вольны расставлять, настраивать и сочетать элементы, как вам вздумается.
Совет
В настройках сайта вы можете выбрать шрифт для всего сайта из стандартных или загрузить свой. После смены шрифта переопубликуйте все созданные страницы.
«Нулевой» блок придется адаптировать для планшетов и смартфонов вручную. Но именно здесь создаются нестандартные и оригинальные блоки. Не говоря уже о том, что в «Нулевой» блок зашит мощный инструмент пошаговой анимации.
Так-так. Про анимацию подробнее.
Настроить анимацию можно почти во всех стандартных блоках Тильды. Делается это в настройках. По мере скролла блоки будут плавно появляться, увеличиваться или выезжать с выбранной стороны. Все возможности анимации в Тильде собраны в нулевом блоке. Вы можете задать объектам некие сценарии поведения. Элементы будут реагировать на скролл, наведение или клик, увеличиваться, уменьшаться, крутиться, исчезать и появляться, складываться с другими элементами или зависать на определенной точке. Настроек много, и с помощью пошаговой анимации можно создавать целые мини-ролики. Подробнее о том, как совладать с пошаговой анимацией читайте в бесплатном онлайн-учебнике Тильды.
Давайте-ка откатимся назад. В начале поста было что-то про формы и интернет-магазин.
В Тильде можно создать полноценный интернет-магазин, с корзиной, оплатой онлайн, выбором параметров товаров, вариантов доставки и промокодами. Все серьезно. Здесь и интеграция с онлайн-кассами, и с платформой для онлайн-магазинов Ecwid, и с почтовыми сервисами для рассылки автоматический уведомлений на почту. Если рассказывать обо всем, этом материал вам придется читать добрых полчаса. Поэтому вот тут есть все инструкции, как создать интернет-магазин на Тильде.
С формами все проще. В Тильде есть несколько готовых блоков и настраиваемый объект в Нулевом блоке. Предлагайте посетителям сайта подписаться на вашу рассылку, оставить контакты для связи, отправить параметры будущего заказа для расчета стоимости или написать отзыв. Данные форм будут сохраняться в разделе «Заявки» на странице со списком страниц вашего сайта. Также к любой форме вы можете подключиться один или несколько из 20 сервисов приема данных, включая почту, Google Таблицы, Битрикс, Telegram, Slack, Trello и собственный скрипт.
Совет
Не забывайте о политике обработки персональных данных. По закону у вас она должна быть, и вы должны пообещать (и сдержать это обещание), что данные будете использовать только внутри компании и не станете передавать их третьим лицам. У Тильды есть свой конструктор. В нем вам нужно будет заполнить данные своей компании и цели сбора данных. Готовую политику обработки персональных данных останется только вставить в нужный блок.
Окей. Я в этом деле не новичок. Давайте о серьезном. Что делать с SEO-оптимизацией?
Настраивать! Во-первых, сайты на Тильде, как говорится на самой платформе, автоматически неплохо индексируются в поисковиках за счет последовательной структуры. Во-вторых, конструктор дает целый пул возможностей для SEO-оптимизации.
Вы можете добавить название и описание страницы, задать понятный адрес для каждой страницы сайта, настроить отображение страницы в Facebook, использовать теги заголовков и альтернативный текст для изображений, которые учитываются в поисковой выдаче.
Совет
У Тильды есть свой веб-мастер, который проверяет сайт на ошибки, влияющие на индексацию, и дает рекомендации, как их исправить. Он находится в настройках сайта в разделе SEO. Подробнее о том, как настроить SEO оптимизацию, читайте в этом гиде.
Все это слишком хорошо звучит. Сколько мне придется заплатить?
Возможно, нисколько. Тильда предлагает бесплатный тариф. В него входит один сайт и 50 страниц. Да, у вас будут ограничения в библиотеке. Но «Нулевой» блок доступен, а значит, бесплатный тариф придется компенсировать созданием некоторых блоков вручную.
Тариф Personal открывает всю коллекцию блоков, позволяет подключить домен, убрать лейбл Тильды. Помимо прочего, вы получите 500 страниц и расширите хранилище на сервере до 1 ГБ. Стоит тариф 500 рублей в месяц, если платить сразу за год. Еще и домен подарят и два курса по дизайну и маркетингу. Если же ваши планы чуть шире, подойдет тариф Business. В него помимо всех преимуществ Personal входит пять сайтов и возможность экспортировать исходный код. Подробные условия тарифов ищите здесь.
Совет
Если хотите увидеть Тильду во всей ее мощи, сразу активируйте 2 недели пробного периода, который откроет вам доступ к полной библиотеке блоков. Вводить никакие данные не придется, и автоматически продлеваться тариф не будет. Так что никакого подвоха!
Создать сайт на Тильде действительно несложно. Даже эта статья куда сложнее. Конструктор создан так, чтобы в нем могли освоиться и программист, и дизайнер, и человек, совершенно не разбирающийся в том, как делать сайты. Площадка предоставляет базовые инструменты и практически неограниченный простор для творчества. Жмите на кнопку и пробуйте. У вас получится!
Приходит сегодня дочь (6 лет) и говорит, папа, напечатай мне голых женщин! Три, можно четыре.
От мамы слышится какое-то громкое WTF, дочка бежит ко мне и типа всё понятно, что мама голых женщин печатать не будет.
Уточняю. а каких тебе голых женщин? Бумажных, отвечает ребенок. Можно девушек. можно сбоку, но лучше спереди. Сзади не надо.
Слово за слово, выясняем что нужны плоские бумажные «куклы» на которые надеваются бумажные же платья, которые надо вырезать с листа.
Напечатал дочке пачку голых женщин.
Сказка
Ответ на пост «Сила Пикабу, помоги, очень нужна работа»
Попытался помочь человеку с работой и вот что из этого вышло:
написал человеку на почту и попросил резюме
первое сообщение было в 0.20 с запросом резюме
ответ пришёл почти в полдень, а именно 11.48
В ответе содержалось резюме в txt файле. Ну ладно человек торопился или не имел возможности прислать нормальное резюме. Попросил человека зайти на hh.ru перебить туда резюме и скачать его как pdf, чтобы его можно было закинуть в хантфлоу для трекинга вакансии.
По факту содержимого резюме кандидат действительно оказался мне крайне интересным, т.к. компания, где я работаю, занимается разработкой софта в области ИБ и мы как раз ищем инженера в отдел сопровождения и сервиса, а также есть вакансия в отдел разработки на роль владельца продукта/архитектора SIEM.
Кадры подхватили человека в 16.11 1 декабря и уже в 17.17 человеку было отправлено приглашение на собеседование в Teams (ниже оно выглядит так, но на турецком, а человеку ушло на русском) на 02.12 в 11.00.
2 декабря в 11.00 выясняется, что у кандидата на домашнем компе стоит Линукс и он не может подключиться из-за этого (хотя есть браузерная версия и версия на линукс), а вот что было дальше (беседа с руководителем)
Кандидат захотел проводить собеседование в вотсапе, ну пофиг согласовали собеседование на 03.12 в 11.00.
Сегодня наконец-то состоялось собеседование и вот его результаты (меня там не было):
1. человек вообще не знает куда и на какую позицию проходит собеседование, хотя ему направлялась информация о вакансии и компании
2. все кто его собеседовал отметили его крайнюю упёртость и медлительность
3. были обнаружены недостающие навыки, которые были нам необходимы и никто не услышал желания эти навыки приобрести
Исходя из общей картины и его комментариях в оригинальном посте, складывается следующая картина:
1. человек не читает письма (не прочитал описание вакансии и не ознакомился с компанией)
2. человек не готовится к собеседованиям (иначе бы не случилась накладка с Тимсом, он сам предлагает варианты подключения в случае отсутствия клиента на компьютере)
3. он не зарегистрирован ни на одной из площадок по поиску работ и как следствие не откликается на вакансии и не виден для HRов (это просто бомба)
4. он не горит желанием изучать даже предложенные вакансии (зачем тогда писал пост?)
5. на собеседование не проявил никакого интереса к предлагаемой вакансии (зачем тогда писал пост? #2)
Отсюда складывается следующий вывод: человек ждёт пока желанная вакансия сама упадёт к нему в руки, и он не хочет ничего делать для поиска новой работы. Может ему и не нужна работа вовсе с таким подходом?
П.С. я не любитель писать публично, но у меня подгорело от такого поведения отсюда и этот пост.
Мобильная версия на Тильде
Как делать не надо и как делаю я 🙂
Это специальный блок, где вручную проставляются характеристики для каждого элемента в каждом разрешении экрана. Такой подход хорош тем, что дизайнер может добавлять элементы, не предусмотренные стандартными блоками: иконки, дополнительные текстовые блоки, кнопки и поля для ввода в любом количестве.
Но есть и минусы у Zeroblock. Во-первых, клиент уже не отредактирует этот блок, если захочет изменить текст или дополнить описание. Без навыков работы на Тильде он не справится, как со стандартным блоком. Второй минус — это цена и сроки. Ведь стандартный блок подгоняется автоматически, и дизайнер задает только общие характеристики: загружает 1 картинку, задает цвет шрифта и ссылку кнопки. Работая в Zeroblock, дизайнер проставляет характеристики и положение каждого элемента на 5 разрешениях монитора: десктоп (большой монитор или ноутбук), горизонтальный и вертикальный планшет и 2 размера смартфона.
Тильда рекламирует себя, заявляя о полной адаптивности и отсутствии проблем с отображением на мобильных устройствах. Но штатная адаптация подойдет только тем заказчикам, которых не волнует эстетика. Если задача состоит в том, чтобы сделать удобный и адаптивный сайт, уточняйте у дизайнера возможность проработки мобильной версии. Не у всех дизайнеров эта функция включена в стоимость.
Озвучивая вам цену за сайт, я обязательно включаю в него адаптив сайта. Все больше людей пользуются смартфонами и планшетами, совершают покупки и заказывают услуги с этих устройств. Делать сайт без мобильной версии — пустить деньги на ветер.
Учимся работать с Tilda: создание отзывчивого дизайна в Zero-блоках
Адаптировать сайт под разные устройства и экраны — та ещё задача. Разбираемся, как сделать это в Zero-блоках на «Тильде».
Типовые блоки «Тильды» сами подстраиваются под разные экраны — будь то телефон или Mac Pro. Но как только собираешь свой сайт на Zero-блоках, вёрстка плывёт. В этом уроке мы сверстаем несколько простых и красивых страниц сайта, которые будут одинаково хорошо выглядеть на всех устройствах.
Автор статей по дизайну. В веб-дизайн пришел в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил верстку. Время от времени публикую переводы на хабре.
Что такое отзывчивый дизайн
Отзывчивый дизайн — это когда элементы сайта сами перераспределяются по экрану и подстраиваются под любое устройство. На «Тильде» необязательно создавать уникальный дизайн-макет для каждого разрешения — надо только грамотно расставить все элементы.
Сделать отзывчивый дизайн в «Тильде» можно двумя способами:
Создаём учебный Zero-блок
Для работы над проектом надо создать Zero-блок.
В настройках блока выставляем параметры как на картинке.
Когда вы создаёте Zero-блок, «Тильда» по умолчанию делает проект для десктопной версии экрана — он считается основным, поэтому вёрстку логичнее начать с него. Поменять экран можно на панели устройств.
Расположение элементов в десктопной версии
Теперь нам надо разместить в Zero-блоке макет — можете использовать свои заготовки или взять за основу проект Moon Tutorial, сайт астрофотографии.
Макет состоит из простых элементов:
Настройки для десктопной версии:
Используйте комбинации клавиш, чтобы перемещаться по рабочей области (а не всему экрану) «Тильды»:
Макет может занимать много больше места, чем ожидалось, панели будут мешать увидеть и оценить его общий вид. Нажмите Ctrl+ или Ctrl− несколько раз, чтобы уменьшить или увеличить зону рабочей области. При этом элементы окна браузера останутся на своих местах — то есть изменения произойдут только в рабочей области. Это особенность «Тильды». Изменение масштаба в процентах отображается в верхнем левом углу.
Собираем макет для планшета с горизонтальной ориентацией
Горизонтальная версия для планшета почти не отличается от десктопной, поэтому изменений будет немного. Основное отличие — фотография Луны растянется на весь экран. В результате получится вот такой макет.
Перейти с десктопной версии на планшет можно с помощью панели для работы с отзывчивым дизайном — она расположена вверху в центре. Тут есть иконки для основных экранов устройств:
Разрешение экрана можно посмотреть на этой же панели — просто наведите курсор на нужную иконку.
Нажимаем на иконку планшета и переходим в рабочую область экрана планшета — нас встретит такая безрадостная картина.
Практически все элементы в беспорядке — блоки текста уехали вправо за границы экрана рабочей области, меню последовало за ними, нумерация слайдов перекрыла строку авторских прав.
Начинаем исправлять. Для этого задаём глобальные параметры GRID Container Height 640 px. Высоту окна не трогаем, оставляем 100%.
Следующим шагом масштабируем изображение Луны по высоте рабочей области и располагаем по центру.
Переносим логотип ближе к левому краю и выравниваем по вертикальной сетке.
Сиреневая рамка вокруг элемента означает, что объект позиционируется относительно контейнера окна, а синяя рамка — что относительно грид-контейнера.
Переходим к блоку описания изображения.
По идее, текст не должен был сместиться относительно блока. Поэтому заглянем в десктопную версию и посмотрим, почему так произошло. За смещение элементов относительно друг друга и экрана отвечает настройка позиционирования ( Container) на панели Settings. Ищем решение проблемы там.
Выделяем подложку блока описания и переходим на панель настроек. На панели открываем строку Container и смотрим, какие значения указаны для подложки блока описания.
Подложка позиционируется относительно грид-контейнера: по оси X — справа, по оси Y — сверху. Теперь проверяем эти же параметры у текстового блока. Выделяем текст и смотрим на значения.
Сразу видим несоответствие: текст позиционируется по оси X слева, в то время как подложка блока — справа. Меняем значение и проверяем: блоки текста автоматически выравниваются по правому краю.
Теперь необходимо сделать выключку текста влево. Для этого используем инструмент выравнивания элементов на панели настроек и двигаем текстовые блоки немного правее, чтобы они не прилипали к левому краю.
Отлично, в версии для планшета текст больше не съезжает. Этот небольшой лайфхак позволил сократить время и не двигать каждый элемент отдельно — мы быстро скорректировали весь текстовый блок.
Теперь выделите текст вместе с подложкой, переместите на фотографию и выровняйте по сетке.
Осталось выровнять строку копирайта относительно логотипа, поставить на место нумерацию слайдов и сместить меню влево.
Выделяем строку авторских прав, перетаскиваем левее и выше, ставим на одну вертикальную линию с логотипом, а низ ровняем по основанию подложки.
Инструменты выравнивания тут бессильны — не получится автоматически скорректировать расположенный вертикально текст относительно логотипа. Причина проста: контейнер текста располагается горизонтально, а сам текст — вертикально. Но выравнивание идёт относительно контейнера. Значит, этот элемент придётся перетаскивать вручную для каждого типа экрана.
Поэтому выравниваем элемент вручную по сетке. Потом ровняем меню — делаем тот же отступ, что и для логотипа, только справа. Нумерацию слайдера выравниваем по подложке блока описания.
Тут тоже есть нюанс: текст не прилипает к своему контейнеру, а значит, после выравнивания текст будет располагаться чуть выше подложки — хотя формально они находятся на одной высоте. Если такой вариант вас не устраивает — корректируем ручками.
Ещё один важный момент: меню, логотип, чаты и другие функциональные элементы, которые обычно располагаются по краям, старайтесь позиционировать с помощью Window Container. Так с ними будет проще работать на разных экранах.
После всех корректировок и выравниваний элементов относительно друг друга получаем такую картинку.
Закрываем редактор Zero-блока, публикуем и просматриваем страницу.
Конечно, в идеале надо проверить макет на реальном планшете, но его может не оказаться под рукой, да и на этапе разработки это не очень удобно. Поэтому мы используем эмулятор различных устройств и экранов. Вызвать его можно клавишей F12. Другой вариант — щёлкнуть правой кнопкой мыши в любом месте экрана и выбрать пункт « Просмотреть код».
Внизу появится панель разработчика. Я обычно перетаскиваю её слева или справа — так удобнее тестировать вёрстку. Для этого нажмите на троеточие в правой части панели и выберите нужное расположение.
Далее нажмите на иконку экранов и введите нужное разрешение экрана ( 960×640) в центральной панели.
У нас получился добротный макет для планшета с горизонтальной ориентацией экрана.
Собираем макет для планшета с вертикальной ориентацией
Для вертикальной версии планшета макет будет немного отличаться — текстовые блоки с подложкой перенесём влево, строку копирайта — вправо, увеличим нумерацию слайдера и немного увеличим меню и логотип. Результат будет таким.
Возвращаемся в редактор Zero-блока и переходим на версию для планшета с вертикальной ориентацией.
Могло быть и хуже. Вот что мы сделаем:
Первым делом выставляем нужную высоту в панели настроек. Рекомендую всегда начинать с этого действия — так удобнее работать.
Теперь увеличиваем изображение Луны, чтобы оно было по всей высоте экрана, и выравниваем картинку по левому краю. То, что не входит в основную часть экрана, не будет отображаться на сайте.
Теперь переносим блок с текстом к левому краю и слегка вниз. Подложку блока увеличиваем, нумерацию слайдера ставим под текст, а сам текст на подложке выравниваем по сетке.
Сейчас текст маловат относительно блока — увеличим его. Начинаем с заголовка — Photo Moon. Кликните по нему и перейдите к панели настроек. Напротив Size (размер шрифта) задайте значение 70.
Отлично, заголовок увеличили, но возникла проблема — он вылез за пределы блока. Тут есть два решения:
1. Переходим в режим редактирования текста и переносим слово Moon на вторую строку.
Правда, теперь заголовок разобьётся на две строки на всех экранах. Это особенность «Тильды». Но есть второй способ.
2. Меняем размер контейнера текста вручную или с помощью настройки ширины контейнера.
Ширину контейнера можно указать в пикселях и процентах. Чтобы поменять шкалу, нажмите на значок пикселей справа от значения и выберите проценты.
Проценты можно использовать для автоматической подстройки текста под разрешение экрана. Но такой способ уменьшает контроль над блоками текста и элементами, которые находятся рядом.
Теперь с помощью контейнера текста переносим слово Moon на вторую строку и уменьшаем параметр Spacing (межстрочный интервал) до единицы.
С заголовком разобрались, теперь то же самое проделываем с текстом описания. Но для начала передвинем его под заголовок. Размер гарнитуры шрифта описания — 18, размер ссылки — 14, размер номеров в слайдере — 40, размер шрифта строки копирайта менять не надо.
Макет для вертикального экрана планшета собран. Осталось увеличить логотип и немного поправить его по сетке.
Готовый макет в «Тильде».
Закрываем редактор Zero-блока, публикуем и просматриваем страницу.
Получилось достойно. В последнем блоке статьи переверстаем страничку под смартфон в вертикальном положении — а горизонтальный макет попробуйте сделать самостоятельно. Это хорошая практика.
Собираем макет для смартфона
Макет для смартфона будет существенно отличаться от предыдущих версий: мы уберём плашку, увеличим заголовок, покрасим его в белый цвет, описание перекрасим в серый, приглушим фотографию Луны, чтобы яркая картинка не перебивала восприятие текста, а потом немного увеличим логотип и меню. У нас получится такой макет. Годнота.
Переходим в редактор Zero-блока в режим редактирования макета для вертикально ориентированного смартфона.
Смотрим, как отображается макет по умолчанию.
Можно просто поправить обозначенные места на скриншоте, и работа будет завершена. Но мы же перфекционисты, а восприятие информации со смартфона отличается от восприятия с планшета или десктопа, так что внесём больше правок:
Начнём стандартно — выставим высоту экрана рабочей области.
После этого избавляемся от подложки текста описания: удалить её нельзя — тогда она пропадёт со всех остальных макетов. Поэтому просто смещаем её за пределы экрана или делаем прозрачной.
Теперь уберём за пределы экрана и фотографию — это поможет сконцентрироваться на компоновке текста и других элементов в рабочей области.
На этом этапе у вас должно получиться что-то подобное:
Переносим заголовок, описание и ссылку в рабочую область экрана.
Меняем цвет текста описания с помощью панели настроек.