Фишки верстки в конструкторе сайтов: как быстро подстроить страницу под разные устройства — 3 практических кейса
Частая боль веб-дизайнера — как быстро и грамотно подготовить мобильную и широкоэкранную версии сайта. Во-первых, не потратить на это целую вечность, закопавшись в рутинной перестановке и подгонке элементов. Во-вторых, сделать как на дизайн-макетах — с нужными пропорциями и выверенным лейаутом. Расскажем, как автоматизировать процесс, используя фишки верстки в конструкторе Taptop . С ними вы полюбите адаптацию сайтов) Покажем всё наглядно и на примерах. Дополнительно по этой теме читайте нашу статью про авто-лейауты — там тоже много полезных лайфхаков по ускорению работы.
Вопрос: почему в Taptop, в отличие от многих других конструкторов, можно быстро перестроить лейаут страницы под любой размер экрана?
Ответ: потому что создание сайтов в нашем конструкторе максимально приближено к профессиональной веб-разработке. Это дает возможность пользоваться приемами верстки для оптимизации рутинных процессов.
В основе платформы — визуальный дизайн, базирующийся на принципах верстки.
Всё по-взрослому — параметры дизайна напрямую связаны с доступными в веб-программировании элементами и их свойствами. С той лишь разницей, что разработчик описывает их с помощью кода HTML и CSS, а мы с вами выбираем нужные значения в визуальном интерфейсе.
Такой подход позволяет:
- автоматизировать многие процессы при создании сайтов и сократить рутинные действия;
- точно настраивать дизайн сайта, в том числе — поведение элементов при изменении размеров экрана;
- получать чистый код сайта, который будет быстро загружаться.
А теперь посмотрим, как это работает на практике на примере трех кейсов.
Кейс 1: Фон — как сделать несколько фоновых изображений в блоке, а еще оригинально адаптировать фон для разных устройств
Фон, состоящий из нескольких изображений, приятно разнообразит интерфейс. Но хочется сделать так, чтобы картинки гармонично смотрелись на экране любого устройства, не мешая контенту. Для этого важно иметь возможность управлять их позиционированием и масштабированием.
Покажем на примере, как эту задачу можно решить в Taptop.
1. Делаем составной фон
Здесь на странице используется многослойный фон: фоновый цвет и 4 изображения.
Вот как выглядят эти настройки в редакторе дизайна.
Каждое фоновое изображение настраивается индивидуально:
- устанавливаем позиционирование относительно сторон блока,
- настраиваем масштаб в процентах.
Например, для изображения со стаканом сока настроен масштаб 40% и позиционирование по центру нижней стороны блока.
Для настройки позиционирования есть следующие опции:
- Точка привязки — относительно какой точки будет позиционироваться изображение. Здесь можно выбрать один из четырех углов блока, его центр или середину одной из его сторон.
- Координаты по X и Y — смещение по осям относительно точки привязки.
Например, можно разместить изображение в верхнем левом углу, сместив вниз на 30 пикселей.
2. Делаем адаптацию фона для разных размеров экранов
Сделаем так, чтобы фоновые картинки меняли размеры и расположение в зависимости от устройства просмотра.
Для каждого размера экрана можно отдельно кастомизировать настройки всех фоновых изображений.
Мы можем уменьшать или увеличивать изображения в зависимости от размеров экрана, менять их расположение, а также полностью удалять определенные картинки.
Например, для мобильной версии лучше сделать поменьше фоновых картинок, чтобы не перегружать пользователя. Так что некоторые изображения можно удалить.
Сделаем версию для планшета: изображения с лимонами передвинем и уменьшим до 80%, апельсин тоже сделаем поменьше, а картинку со стаканом сока — наоборот увеличим до 55%.
Теперь доработаем версию для смартфона: оставим только картинки с лимонами, сделаем их разного размера и поменяем позиционирование.
На видео можно увидеть, как меняется фон при изменении размеров экрана:
Резюме — вы можете менять настройки фона для разных устройств, абсолютно любым образом:
- масштабировать изображения
- передвигать их на другие места
- заменять одни изображения на другие
- удалять изображения
- делать разные цвета фона для разных экранов (ну а вдруг вам такое надо)
Суть в том, что со стороны конструктора здесь нет ограничений — можно экспериментировать бесконечно. Все настройки фона, которые верстальщик мог бы запрограммировать кодом — вы можете сделать в редакторе дизайна в Taptop. Так что воплотить на сайте задизайненные на макетах идеи не будет проблемой.
Небольшое дополнение.
Почему лучше использовать фоновые изображения, а не элементы с картинками?
В этом кейсе мы полностью работаем с фоном блока, не добавляя дополнительных элементов с картинками. Почему это важно? Для внешнего вида — вроде бы без разницы. Но для кода сайта, который получается в результате нашего творчества, это имеет значение. Именно так принято делать в профессиональной верстке при написании кода, чтобы он получился оптимальным.
Мы не перегружаем страницу лишними элементами, а решаем все задачи с помощью настроек стилей фона. Поэтому код будет чище и легковеснее, и страница будет загружаться быстрее. Станем чуть ближе к профессиональным верстальщикам)
Кейс 2: Контейнер — как удерживать в рамках и центрировать контент на странице
Задача: на небольших экранах сделать контент блока на всю ширину, а на Full HD добавить по краям отступы и центрировать содержимое, чтобы оно не разъезжалось.
Здесь нам поможет контейнер.
Контейнер — это специальный элемент, предназначенный для размещения контента и центрирования его на странице.
Этот блок изначально настроен так, что располагается в центре страницы по горизонтали — благодаря автоматическим внешним отступам. К тому же, по умолчанию он имеет максимальную ширину 960px. Ее можно изменить, исходя из вашего макета.
Как это работает? На маленьких экранах контейнер займет всю ширину (т.к. она меньше его максимально допустимого размера), а на больших — ограничится заданным значением, оставив по бокам отступы.
Посмотрим на примере. У нас есть блок, представляющий собой секцию шириной 100% экрана — именно у него мы настраивали фон в предыдущем примере. В секции размещен контейнер, содержащий блоки с контентом.
Установим контейнеру максимальную ширину — 1600px.
В общем-то это и всё, что нужно сделать. Задача выполнена. Теперь на всех экранах меньше 1600 пикселей контент будет растягиваться на всю ширину устройства, а на экранах большего размера — оставаться в пределах 1600 пикселей.
Магия — мы всего лишь установили максимальную ширину контейнера, и теперь он автоматически адаптируется к размерам экрана, не давая контенту разъезжаться.
Посмотрите на видео:
Вот еще один подобный пример, который также реализован с помощью ограничения ширины контейнера:
Бывает и обратная ситуация — нужна резиновая верстка. Тогда можно просто сбросить значение максимальной ширины контейнера — и он даст возможность контенту распределиться на весь экран:
Кейс 3: Шапка сайта — как менять порядок элементов при отображении на разных устройствах
Посмотрим кейс с официального сайта Taptop. Задача: поменять местами логотип и меню на мобильной версии.
При отображении на компьютере логотип располагается в левом углу шапки, а справа от него идет меню.
На мобильной версии меню должно сворачиваться в кнопку-бургер и отображаться в левом углу шапки, а логотип — справа от него.
Первая мысль — для этого придется дублировать блоки, делая два виджета меню, и попеременно их скрывать. Но это долго, неудобно и неоптимально с точки зрения кода, т.к. нагружает его дополнительными элементами.
В Taptop такую задачу можно решить гораздо проще и функциональнее — благодаря настройке порядка элементов в авто-лейауте.
Посмотрим на структуру элементов в шапке. Логотип со ссылкой (элемент Link Block) и меню (виджет Menu) размещаются в Div-блоке.
1. Создаем авто-лейаут. Div-блоку задаем настройки авто-лейаута, чтобы он управлял расположением вложенных в него элементов.
2. Настраиваем опции виджета Menu:
- Отображение мобильного меню. Выбираем, начиная с какого размера экрана меню будет отображаться в виде бургера. В нашем случае — “Планшет и меньше”.
- Лейаут дочернего элемента. Устанавливаем опцию Порядок — “Первый”, чтобы меню отображалось первым в авто-лейауте.
Вместо настройки лейаута дочернего элемента можно воспользоваться другой опцией:
- Направление в авто-лейауте. Установим в авто-лейауте, содержащем логотип и меню, обратное направление (справа налево). Поскольку в Div-блоке есть только два элемента, то они просто поменяются местами.
Можно выбирать любой способ изменения порядка элементов в зависимости от задачи. В нашем случае подойдут оба варианта, поскольку в авто-лейауте только два элемента. Если элементов будет больше двух, то:
- Лейаут дочернего элемента — подойдет для изменения расположения одного из элементов.
- Направление в авто-лейауте — используйте для изменения порядка нескольких элементов на обратный.
Посмотрим на видео, что у нас получилось:
Обратите внимание — мы сделали настройки только для планшетной версии, но они автоматически применяются и ко всем экранам меньшего размера. Поэтому нам не придется заново настраивать порядок элементов для смартфона. Это избавляет от двойной работы.
Резюме:
- Используйте принципы верстки при сборке сайта — так будет быстрее и эффективнее. И результат получится хороший — красивые адаптивы и качественный код.
- Создание адаптивных версий — не такое сложное, если освоить несколько правил и приемов.
- В верстке есть много полезного и интересного — и в Taptop вы можете осваивать это без изучения кода, а просто кликая мышкой в интерфейсе)
Если остались непонятные моменты или есть любые вопросы по верстке в Taptop — велком в комментарии. С практическими вопросами можно также в наш чат поддержки на платформе — там помогут внимательно и подробно.
P.S. А поделитесь в комментариях, какие у вас бывали сложности с адаптацией сайтов на конструкторах. Интересно было бы собрать статистику.
Создавайте уникальные сайты на платформе Taptop.
Полезные материалы про дизайн и новости продукта:
Телеграм канал и группа ВКонтакте.Наши проекты на Dprofile.
Эх, хорошо у вас все, красиво. Но когда уже будут интеграции? Хоть с таблицами.
А то без этого грустно, невозможно использовать на реальных кейсах.
Да, понимаем, что это важно. Обязательно сделаем. Сейчас работаем над анимациями, интеграции в планах после них.
Приветствую. Можете подробнее раскрыть про интеграции.
1. Пдатежки, crm и т.д.
2. CMS - блог, новости, шаблонные страницы?
Просто про таблицы сказали, это интеграция, но для контента. Как я понял, вам 2 пункт нужен больше всего. Если пришлете примеры сайтов, которые хотите собирать, будет круто)