Как убрать значок тильда в подвале
Как убрать подвал Тильды с сайта?
Многие из Вас задают вопрос, как убрать подвал с лейблом Тильды на сайте.
Если что-то не получается, напишите мне, я помогу. Ситуации бывают разные, все их описать просто невозможно.
Многие прибегают к нечестным способам скрыть назойливый логотип. Данные способы мы крайне НЕ рекомендуем, так как это является нарушением правил Тильды и может повлечь за собой последствия для Вашего сайта в виде, например, блокировки со стороны Тильды.
Такими нечестными способами являются попытки переопределить стили блока, в которых содержится информация о том, что сайт создан на Тильде.
Например, у нас есть страница с активным лейблом:
Мы хотим его убрать, но не хотим за это платить. Что ж, многие начинают химичить.
С помощью пользовательского кода и ZERO блока попробуем переопределить стили для блока с данными Тильды и некоторых его элементов и тем самым спрятать его.
Добавляем на страницу ZERO блок. Он должен располагаться прямо над подвалом Тильды. Чтобы затем закрыть его собой:
Заходим в редактирование блока:
Удаляем все элементы, находящиеся в блоке, кроме желтого квадрата (клик по элементу левой кнопкой мыши и нажатие кнопки DELETE). Он пригодится.
Далее редактируем квадрат, обязательно кликаем по нему.
Необходимо выставить ему ширину на 100% ширины окна.
Нажмем на настройку, показанную на рисунке ниже:
Забегая вперед, этим квадратом мы должны накрыть блок с информацией о том, что сайт сделан на Тильде.
На данный момент имеем:
Итак, ZERO блок настроен необходимым образом.
Теперь нужно написать кое-какие стили, чтобы наша схема перекрытия подвала Тильды сработала.
Если необходимо, уменьшите нижний отступ в блоке, который расположен на странице над ZERO блоком, добавленным для наших манипуляций.
Еще раз напоминаю, что этот способ нарушает правила пользования сервисом, предоставляемым Тильдой, и может повлечь за собой санкции в отношении Вашего сайта, вплоть до блокировки. Так что лучше несколько раз подумайте, прежде чем пытаться избавиться от этого лейбла. Так ли он Вам мешает на самом деле?
Таким образом, мы научились не удалять, но скрывать подвал Тильды на нашем сайте.
Если что-то не получилось, напишите мне, я помогу. Ситуации бывают разные, все их описать просто невозможно.
Надеюсь, пост был полезен для Вас и Вы не воспользуетесь данной инструкцией 😉
Желаю Вам удачи в Вашем творчестве!
Как убрать made on Tilda (самый лучший способ)
После публикации сайта на конструкторе Tilda внизу страницы появляется значок “Made on Tilda” (мэйд он тильда, сделано на тильде, если по-русски). Это стандартный ход разработчиков закрепить права на результаты своего труда, установить копирайт (лейбл). Так делают все нормальные сервисы. Это необходимо как минимум по двум причинам:
Как обмануть Тильду? Или себя?
Соответственно, есть очень хитрые пользователи, которые берут платный тариф, потом переходят на бесплатный с сохранением блоков и могут не платить за конструктор вообще никогда, хотя функциональность уже созданных блоков сохраняется и можно копировать сайт абсолютно бесплатно (я вам этого не говорил!). Поэтому разработчики всячески стараются копирайт свой не убирать. А убрать самостоятельно кажется для большинства пользователей платформы непосильной задачей.
Если платформа позволяет дизайнеру или разработчику с минимальными знаниями собрать абсолютно любой сайт без знаний HTML, CSS и PHP, адаптивности и кроссбраузерности самому бесплатно, без программиста, разве не стоит Тильду за это отблагодарить?
Лучший способ убрать надпись made on Tilda — оплатить тариф Personal или Business на год.
После этого в дополнительных настройках сайта будет возможность выбрать опцию “Не выводить Platform Label”. Если вы разработчик, вы уверены в конструкторе, собрали на нём десятки лендингов, Tilda вас никогда не подводила — убедите клиента оплатить эти 6000 руб.
Почему нужно выбрать Тильду и платный тариф
Поясним на примере:
Клиент : Коллеги, нам нужно настроить оплату на сайте. Суббота и воскресенье — это не выходные, а менее загруженные дни. Ждем ответ до 17. Вот доступы.
Разработчик на CMS : Хммм. Я сейчас поищу, есть ли в вашей CMS модуль интеграции с этой платежной системой… А еще чеки нужно передавать? Онлайн касса? Хм. Доступы к тестовой среде попробуем, работает ли этот модуль, он что-то не обновлялся уже год. Надо разобраться в документации, модуль ошибку выдаёт. Сейчас счет выставим на 8 часов предварительно, давайте разбираться …
Разработчик на фреймворке : Это сложная доработка, вы же понимаете, никто вам не сделает это за день! Драйверы есть, мы настроим новый контроллер, доработаем модуль, протестируем оплату, настроим ответ на успешную оплату и ошибки. По срокам примерно 2 недели, бюджет: 25 000. Счет на ваше ООО выставляем?
Клиент : Коллеги, а вы без бюджета вообще хоть что-нибудь можете?
Вы понимаете, конечно, что я утрирую. Но такая ситуация может быть, ведь многие корректировки, которые на обычном сайте делаются с привлечением программиста, на Тильде выполняются в 3 клика даже дизайнером. Зафиксировать меню? Пожалуйста. Копировать сайт на другой аккаунт Tilda? Да запросто. Интернет-магазин? Отправляйте товары, и завтра уже всё будет работать! Реальному потребителю пофиг на то, что внутри сайта, какие там технологии, какой там фреймворк. Ему нужно, чтобы формы отправлялись, товары с картинками были, оплата заказов работала. Поэтому еще раз повторю — чтобы убрать made on Tilda, лучше заплатите за годовой тариф.Это сэкономит вам многие часы работы программиста и расходы.
Как убрать надпись made on Tilda бесплатно
Если по какой-то причине вы не можете сейчас оплатить, а убрать надпись “надпись сделано на Tilda” нужно прямо сейчас, она не подходит по дизайну (она может быть только черная, белая и серая), то вот вам 3 способа. Мы поможем скрыть ссылку визуально, но поисковикам она всё равно будет видна и все ваши усилия по продвижению будут давать прирост Тильде.
Первый способ: незакрытый тег iframe
Вам нужно добавить в самый конец страницы блок с кодом. Стандартный блок T123 на добавление HTML не получится создать, там валидация. Нужно сделать zero block и добавить туда HTML-код
Второй способ: махинации с CSS или Javascript
Необходимо после тега #allrecords создать элемент нужного цвета. Можно сделать сотней способов, но вот самый простой. В тег HTML добавьте такой код, где background это ваш цвет.
Третий способ: экспорт кода
После экспорта кода на Бизнес тарифе вы получаете доступ HTML, в котором можете удалить любой блок. Находите там вот это и удаляете:
Теперь вы знаете, как убрать значок made on Tilda внизу страницы. Давайте подытожим 4 способа:
Если вам эти способы кажутся сложными или непонятными, пишите нам, и мы поможем разобраться. Вы также можете заказать сайт на Tilda или внесение корректировок на старой площадке.
Лучший хостинг для вашего сайта
Используем для всех своих проектов, советуем и вам.
Обращайтесь, перенесём сайт на Beget.
Как скрыть блок в Тильде?
Возможны различные ситуации, когда нам необходимо скрыть определенную секцию, или блок, на сайте:
Если что-то не получается, напишите мне, я помогу. Ситуации бывают разные, все их описать просто невозможно.
Как скрыть блок на Тильде совсем?
Переходим в режим редактирования страницы Тильды, наводим курсором мыши на нужный блок, появляется меню (выделено красным на рисунке ниже):
В этом меню есть кнопка ВКЛ/ВЫКЛ (выделено синим на рисунке выше).
С помощью этой кнопки происходит скрытие блока Тильды с экрана на опубликованном сайте.
При этом блок остается на странице, но он скрыт:
В любой момент можно его активировать и продолжить работу над ним. Все, что было сделано в блоке до этого, сохранится.
Достаточно снова навести курсором на блок, воспользоваться верхним правым меню, кнопкой ВКЛ/ВЫКЛ:
Не забываем, чтобы применились те или иные изменения на странице, ее необходимо опубликовывать:
Следующий вариант:
Как скрыть блок Тильды для определенных разрешений экранов, имеющихся в настройках Тильды?
Скрыть блок Тильды для конкретных экранов устройств, например, для мобильных, можно, изменив соответствующий параметр на вкладке НАСТРОЙКИ для конкретного блока:
Диапазон видимости на устройствах
Здесь достаточно просто подвигать ползунки в необходимое положение (выделено синим на рисунке выше), определяющее в каком диапазоне ширины экрана блок будет отображаться на сайте.
В примере ниже мы скрыли блок для экранов мобильных устройств шириной от 0 до 320 пикселей:
Информация о том, на каких экранах будет отображаться блок, доступна в верхнем левом меню конкретного блока при наведении на него курсора мыши:
Как видите, все довольно просто.
В том случае, если нам достаточно указать предусмотренные Тильдой брейк-пойнты (точки перехода от одного экрана к другому):
Обратимся в таком случае к пользовательскому коду!
Как скрыть блок Тильды для любых нестандартных разрешений экранов, не предусмотренных настройками Тильды?
Многое, что невозможно сделать с помощью стандартных настроек Тильды, мы сделаем с помощью пользовательского кода, в том числе в данном конкретном случае.
Добавим на страницу блок T123 HTML-код, если еще не добавлен.
Допустим, наш блок необходимо отобразить на экранах разрешения от 600 до 1000 пикселей (пример условный).
Напишем в блок Т123 код:
Опубликуем изменения, переходим на страницу и видим, что на мониторе ПК (более 1000 пикселей) наш блок не отображается:
Продолжим уменьшать ширину блока до диапазона менее 600px. Блок снова исчезнет:
Таким образом, мы смогли отобразить блок Тильды на тех разрешениях экрана, которые нам были нужны, хоть эти размеры и не были предусмотрены стандартными настройками Тильды.
Надеюсь, пост помог Вам в решении Ваших задач.
Если что-то не получилось, напишите мне, я помогу. Ситуации бывают разные, все их описать просто невозможно.
Как работать с конструктором Tilda
Tilda – это конструктор, позволяющий создавать профессиональные сайты без знания программирования. Принцип конструирования заложен в блоках – добавляя их, можно создавать различные страницы. Но конструирование с помощью готовых шаблонов – это лишь один из способов создания ресурсов на Tilda. Отличительной особенностью сервиса является функция «Zero-Block», с помощью которой можно создавать уникальные блоки, а также адаптировать их под разные устройства.
Сегодня мы рассмотрим, почему отдают предпочтение подобному конструктору и какие с его помощью можно реализовать проекты, а после этого создадим сайт-визитку с нуля.
Почему выбирают Tilda
Ответ здесь довольно прост – потому что это многофункциональное решение для тех, кто не умеет разрабатывать сайты с помощью кода. Естественно, что навыки дизайна и типографики также должны присутствовать, но получить их гораздо проще, чем изучить основы верстки и программирования.
Это была лишь часть особенностей конструктора Tilda, ознакомиться со всеми можно на официальном сайте.
Что умеет Тильда
Чтобы понять, на что способна Tilda, рекомендую посмотреть на готовые сайты, созданные с помощью данного конструктора.
Вот так может выглядеть сайт-портфолио:
Лендинг для продажи интерактивных роботов:
Лендинг для проката автомобилей:
Лендинг для продажи элитной недвижимости:
Если вы хотите научиться делать мощные и продающие сайты на Тильде, то рекомендую поизучать подобные сайты. Постепенно будет прокачиваться насмотренность – умение распознать стильное и гармоничное решение.
Посмотреть больше сайтов на Тильде можно здесь.
Тарифные планы Tilda
Владельцам аккаунтов доступно 3 тарифных плана – Free, Personal и Business.
Free
Free – бесплатный, активируется автоматически после регистрации учетной записи. Он вполне может сгодиться для создания сайта, но совсем простого. Подобный тариф разрешает пользоваться Zero-Block, однако в нем нет опции подключения собственного доменного имени, SSL-сертификата, аналитики сайта и многого другого. Тариф Free – это отличный способ разобраться в работе конструктора.
Лимиты тарифа: максимальное количество проектов – 1, количество страниц для каждого проекта – 50, объем загруженных файлов – 50 Мб.
Personal
Personal – стандартный тариф, который открывает доступ ко всем возможностям Тильды: полная коллекция блоков, подключение своего домена, коллекция бесплатных иконок и многое другое. Ознакомиться с полным набором функций можно здесь.
Лимиты тарифа: максимальное количество проектов – 1, количество страниц для каждого проекта – 500, объем загруженных файлов – 1 Гб.
Стоимость тарифа: 750 руб./месяц + домен в подарок.
Business
Business – профессиональный тариф, который предназначен для размещения нескольких сайтов. Он позволяет на одном аккаунте создать 5 и более сайтов – для каждого отведено определенное количество страниц, свой домен и так далее.
Тарифный план также имеет разновидности – это Business 10, 15, 20 и 30. Число указывает на количество сайтов. Например, в тарифе Business 15 разрешено создавать до 15 сайтов.
Еще одно отличие от предыдущих тарифов – возможность экспорта исходного кода. Благодаря этому можно создать сайт на Тильде и перенести его на свой хостинг. Подойдет для тех, кто хочет подредактировать HTML-код и разместить его на другом хостинге.
Лимиты тарифа: максимальное количество проектов – от 5 до 30, количество страниц для каждого проекта – 500, объем загруженных файлов – 1 Гб.
Стоимость тарифа: от 1250 руб./месяц + домен в подарок.
Как убрать надпись «Made on Tilda»
Стоит заметить, что при ежемесячной оплате любого тарифа остается одна неприятная особенность – надпись «Made on Tilda» в подвале сайта.
Надпись исчезает, если оплатить тариф Personal или Business на год. Также вы можете подключить тарифный план Business, а затем экспортировать весь код и удалить в нем блок HTML-кода с надписью – такой вариант подойдет только для тех, кто собирается размещать сайт на другом хостинге.
Если вам не подходит годовая оплата, можно рассмотреть другие конструкторы. Например, на Craftum нет такой особенности, но точно так же можно собирать сайты как с помощью шаблонов, так и с нуля. Есть 10-дневный тестовый период, во время которого доступны все возможности конструктора.
Создаем сайт на Tilda
Приступим к практическим навыкам – в данном разделе мы научимся создавать полноценный сайт как с помощью обычных блоков, так и с помощью Zero-Block. Для примера возьмем небольшой сайт-визитку, включающий в себя такие блоки, как «Главный экран», «Информация о компании» и «Контакты». Но перед этим зарегистрируемся на сервисе.
Готово! Мы создали сайт и активировали тариф Personal. Теперь можно переходить к редактированию будущего веб-ресурса, подключению домена и т.д. Первым делом наполним наш сайт теми блоками, что мы решили создать.
Вот так можно создать сайт и выпустить его в свет. Советую детально изучить раздел «Zero-Block», где мы самостоятельно создавали страницу «О компании». Именно в нем и проводят большую часть времени разработчики сайтов на Тильде.
Также не стоит забывать и об обычных блоках: несмотря на то, что они довольно шаблонные, некоторые из них нередко встречаются на популярных сайтах. Чаще всего это блоки с контактами либо отзывами.
Как настроить сайт на Tilda
Те функции, с помощью которых мы создали сайт, – это не все, что может Тильда. Есть еще один раздел редактирования, в котором можно поменять различные настройки веб-сайта. Чтобы его открыть, достаточно перейти в раздел «Мои сайты», выбрать «Редактировать сайт» и затем нажать «Настройки сайта».
Здесь находятся все внутренности сайта: настройка шрифтов, цвета и главной страницы, аналитика сайта, добавление собственного доменного имени, подключение SEO-сервисов и многое другое.
Тут же мы можем подключить платежные системы либо ограничить доступ к опубликованным страницам. Функционала вполне достаточно, но я не рекомендую забивать голову всем сразу: для начала будет достаточно первых 4-х разделов.
Заключение
Tilda – это отличное решение для тех, кто хочет научиться создавать красивые сайты без знания программирования. Да, будет проблематично развернуть огромный веб-ресурс с большой базой данных, но для небольших интернет-магазинов, лендингов и визиток подобный конструктор отлично подойдет.
Учимся работать с 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-блока в режим редактирования макета для вертикально ориентированного смартфона.
Смотрим, как отображается макет по умолчанию.
Можно просто поправить обозначенные места на скриншоте, и работа будет завершена. Но мы же перфекционисты, а восприятие информации со смартфона отличается от восприятия с планшета или десктопа, так что внесём больше правок:
Начнём стандартно — выставим высоту экрана рабочей области.
После этого избавляемся от подложки текста описания: удалить её нельзя — тогда она пропадёт со всех остальных макетов. Поэтому просто смещаем её за пределы экрана или делаем прозрачной.
Теперь уберём за пределы экрана и фотографию — это поможет сконцентрироваться на компоновке текста и других элементов в рабочей области.
На этом этапе у вас должно получиться что-то подобное:
Переносим заголовок, описание и ссылку в рабочую область экрана.
Меняем цвет текста описания с помощью панели настроек.