Добро пожаловать на одиннадцатый урок. Сегодня поговорим про оптимизацию и адаптивность, адаптивную вёрстку и тестирование на различных устройствах.

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

Для начала давайте включим режим адаптивности и перейдём во вкладку «Планшет». Как вы видите, всё стало не очень. Отсутствуют везде отступы. Здесь, где было три колонки, совсем всё сбилось. Давайте посмотрим, как это должно быть, у дизайнера в макете.

Как видите, у дизайнера в планшетной версии две колонки, а третья отсутствует. В мобильной версии — в одну колонку и в три ряда. Давайте так и сделаем.

Но для начала вернёмся в десктопную версию. И перейдём в колонку. Зададим ей «Во всю ширину» и ширину примерно 31%. Так же сделаем для этих двух колонок: «Во всю ширину» и 31%.

Это потому, что если брать за основу внешний контейнер 100% и разделить его на три, учитывая расстояние между колонками по 40 пикселей, то и выходит примерно по 31%.

Теперь вернёмся обратно в планшетную версию. И зададим всему внешнему контейнеру отступы слева и справа, чтобы «отлипли» от краёв. Вспомните предыдущий урок и подумайте, где лучше всего задать отступ: снаружи или внутри. Конечно же, отступ внутри. Проверьте сами, что будет, если поставить отступ снаружи.

Давайте зададим слева и справа примерно по 30 пикселей. Теперь у нас у этого контейнера и у этого внутреннего контейнера аккуратненько по 30 пикселей «отлипло» от краёв.

Перейдём в этот контейнер и сделаем, чтобы колонки могли переноситься на новую строку. А расстояние между колонками сделаем по 20 пикселей. Это примерно как здесь.

А теперь зададим этому контейнеру примерно 48%. Это, опять же, учитывая, что у нас ширина 100%, мы берём две, делим на 2 и учитываем ещё расстояние между контейнерами. Также зададим в процентах — 48.

Почему мы задаём ширину в процентах, а не в пикселях, например, или в других единицах измерения? А это для того, чтобы при разных разрешениях экрана у нас колонки растягивались.

В макете третья колонка отсутствует. Для этого зайдём в колонку, «Расширенные» и «Адаптивность». И для этого нажмём «Скрыть на планшете». Как видите, она стала серой такой. Давайте посмотрим: скрывается.

Давайте теперь посмотрим изменения. Для этого обновим и посмотрим изменения. Нажимаем F12. Чтобы поменять разрешение экрана, нажимаем на этот значок и на эти вкладки. Это десктопная версия, планшетная (1024) и планшетная (768 пикселей). Далее идёт мобильная версия, но нам нужна эта. Давайте посмотрим. Как видите, третьей колонки нет. И выглядит довольно хорошо.

Но у нас здесь очень большой заголовок и маленькая фотография. Вернёмся в редактор и применим стиль. Давайте для изображения ширину в процентах сделаем 43, а для заголовка (посмотрим) — 28 пикселей.

Также у нас здесь расстояние между элементами и краями 20 пикселей. Давайте так же сделаем — 20 пикселей. Теперь выглядит всё довольно аккуратно. Здесь можно сделать чуть-чуть поменьше ширину. Вот так, в процентах.

Чтобы так же было.

Теперь посмотрим на мобильную версию. Расстояние у контейнера теперь между краями стало слишком большое. Давайте зайдем и уменьшим примерно как здесь, по 20 пикселей.

Колонки теперь стали в 100% и во всю ширину. И появилась третья колонка, так как мы в «Адаптивности» скрывали её только на планшете. Можем скрыть на мобильном.

Давайте теперь перейдём в макет и посмотрим. У нас образовалась проблема. У дизайнеров фотографии и тексты расположены горизонтально, а у нас здесь получилось вертикально. Давайте сделаем во всю ширину. И мы здесь поменять это никак не сможем.

Не знаю, почему разработчики Elementor так сделали, но в мобильной версии картинка с текстом становятся блоком. Но мы это можем легко поправить. Вспомните урок с пользовательским CSS. Посмотрим в коде. Обновим. Найдём этот блок. Так, давайте в мобильную версию.

Вот он, этот блок.

Скопируем class, перейдём в редактор и в «Расширенных» — в «Пользовательские CSS». В поле прописываем медиа-запрос: media (max-width: 767px){.

Также прописываем префикс selector и вставляем наш class, не забывая точку. Задаём display: flex и align-items: center. Как вы видите, всё выровнялось.

Так, зададим в стилях. «Содержимое». Уменьшим заголовок на 24 пикселя. И немножко уменьшим изображение, наверное. Сделаем выравнивание по левому краю. И так как мы прописывали свои стили, теперь эти штуки не работают.

Надо опять прописывать свой стиль. Для этого перейдём в код, найдём наш заголовок (он «прилипает»). Вот он. Копируем стиль и в редакторе, также в этом медиазапросе, прописываем стиль, теперь уже к заголовку. Также прописываем: selector. Вставляем наш class и прописываем отступ: margin-left: 15px. Как видите, всё получилось.

Давайте обновим и посмотрим в нашем, как тут будет выглядеть. В основном 15 пикселей наши, margin-left, который мы задавали. Font-size. Посмотрим на других разрешениях.

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

Также можно проверить, например, здесь: iPhone XR. Давайте 100%. Видите? Всё хорошо. Например, iPad Pro. Также. Samsung Galaxy Z.

Вернёмся в «Адаптивность».

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

На сегодня у меня всё. Увидимся на следующем уроке. Пока.