Как создавать мобильные проекты с Divi

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

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

Давайте приступим к делу!

Предварительный просмотр

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

Мобильный

Рабочий стол

Подход

Подпишитесь на наш канал Youtube

1. Переключитесь на мобильный просмотр сразу после добавления новой страницы.

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

2. Включите адаптивные параметры для каждого элемента дизайна и сначала измените мобильные значения.

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

3. Удалите расстояние между столбцами по умолчанию и при необходимости добавьте отступы вручную.

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

4. Поместите 2 или 3 столбца рядом друг с другом, чтобы создать горизонтальный дизайн.

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

5. Изменяйте представления рабочего стола и планшета по ходу или после

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

Начнем воссоздавать пример!

Добавить новый раздел

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

Добавить строку №1

Структура столбца

Продолжите, добавив новую строку в свой раздел, используя следующую структуру столбцов:

Добавить текстовый модуль в строку

Добавить контент H2

Добавьте текстовый модуль в столбец вашей строки и введите содержимое заголовка H2.

Настройки текста H2

Затем перейдите к настройкам текста заголовка и измените внешний вид заголовка.

• Шрифт заголовка 2: Didact Gothic
• Выравнивание текста заголовка 2: по центру
• Цвет текста заголовка 2: # 333333
• Размер текста заголовка 2: 5.5vw (телефон), 5vw (планшет), 2vw (рабочий стол)

Добавить модуль разделителя в строку

Видимость

Прямо под текстовым модулем, который вы добавили, добавьте модуль разделителя. Убедитесь, что опция «Показать разделитель» включена.

• Показать разделитель: Да

Цвет

Затем перейдите на вкладку дизайна и измените цвет разделителя.

• Цвет: # 333333

Размеры

Измените также настройки размера.

• Ширина: 48%
• Выравнивание модуля: по центру

Добавить строку №2

Структура столбца

Продолжите, добавив еще одну строку в раздел, используя следующую структуру столбцов:

Фоновый цвет

Еще не добавляя никаких модулей, откройте настройки строки и добавьте цвет фона для строки.

• Цвет фона: # ffe69e

Цвет фона столбца 2

Также добавьте цвет фона ко второму столбцу строки.

• Цвет фона столбца 2: # ffd65b

Выравнивание

Затем измените выравнивание строки.

• Выравнивание ряда: по левому краю

Размеры

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

• Использовать нестандартную ширину: Да
• Единица: PX
• Настраиваемая ширина: 700 пикселей
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Выровнять высоту столбца: Да

Интервал

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

• Верхняя маржа: 5vw
• Нижняя маржа: 5vw
• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей
• Верхнее заполнение столбца 1: 10vw (телефон), 8vw (планшет), 4vw (рабочий стол)
• Нижнее заполнение столбца 1: 10vw (телефон), 8vw (планшет), 4vw (рабочий стол)

Граница

Также добавьте закругленные углы к ряду.

• Вверху справа: 10 пикселей
• Внизу справа: 10 пикселей

Коробка Тень

И придайте ему также тонкую тень коробки.

• Сила размытия тени коробки: 50 пикселей
• Цвет тени: rgba (0,0,0,0.16)

Пользовательские CSS

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

display: flex;

Добавить текстовый модуль в столбец 1

Добавить контент H3

Пора начинать добавлять модули! Добавьте заголовок «Текстовый модуль» в первый столбец и введите содержимое H3.

Настройки текста H3

Затем перейдите на вкладку дизайна и измените настройки текста заголовка.

• Шрифт заголовка 3: Didact Gothic
• Толщина шрифта заголовка 3: полужирный
• Выравнивание текста заголовка 3: по центру
• Цвет текста заголовка 3: # ee6f49
• Размер текста заголовка 3: 4vw (телефон), 3vw (планшет), 1.5vw (рабочий стол)

Добавить модуль разделителя в столбец 1

Видимость

Затем добавьте разделительный модуль. Убедитесь, что опция «Показать разделитель» включена.

• Показать разделитель: Да

Цвет

Затем измените цвет разделителя.

• Цвет: #ffffff

Размеры

Вместе с настройками размеров.

• Вес разделителя: 4 пикселя
• Ширина: 30%
• Выравнивание модуля: по центру

Интервал

Также добавьте настраиваемое верхнее поле к модулю.

• Верхняя маржа: 4vw (телефон), 2vw (планшет), 1.5vw (телефон)

Добавить модуль кнопок в столбец 1

Добавить копию

Следующий и последний модуль, необходимый в первом столбце, - это кнопочный модуль. Введите какую-нибудь копию.

Выравнивание

Затем перейдите на вкладку дизайна и измените выравнивание кнопок.

• Расположение кнопок: по центру

Настройки кнопок

Измените также внешний вид кнопки в настройках кнопки.

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 3vw (телефон), 2vw (планшет), 1.5vw (рабочий стол)
• Цвет текста кнопки: #ffffff
• Цвет фона кнопки: # ee6f49
• Ширина границы кнопки: 0 пикселей
• Шрифт кнопки: Didact Gothic
• Толщина шрифта: полужирный

Добавить модуль изображения в столбец 2

Значок загрузки

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

Выравнивание

Затем перейдите на вкладку дизайна и измените выравнивание изображения.

• Выравнивание изображения: по центру

Clone Row # 2

Как только вы закончите изменять строку, вы можете клонировать ее.

Изменить цвет фона строки

Нам нужно будет внести некоторые изменения в этот дубликат, начиная с цвета фона строки.

• Цвет фона: # 8ee5cf

Удалить цвет фона столбца 2

Продолжите, удалив цвет фона столбца 2.

Добавить цвет фона столбца 1

Вместо этого мы добавляем цвет фона к первому столбцу.

• Цвет фона столбца 1: # 47e5bd

Изменить модули в столбцах

Мы также меняем столбцы для модулей.

Изменить значок в модуле изображения

Затем измените значок в модуле изображения.

Добавить фильтр в модуль изображения

И совместите его с новыми цветами фона строк и столбцов, изменив оттенок в настройках фильтров.

• Оттенок: 65 градусов

Изменить выравнивание строки

Затем измените выравнивание строки.

• Выравнивание строк: вправо

Изменить границу строки

Наряду с закругленными углами.

• Вверху слева: 10 пикселей
• Внизу слева: 10 пикселей

Изменить цвет текста текстового модуля в столбце 2

Мы также используем другой цвет текста для текстового модуля в столбце 2.

• Цвет текста заголовка 3: # 7b9710

Изменить цвет фона кнопки

И мы используем тот же цвет для фона кнопки.

• Цвет фона кнопки: # 7b9710

Клонировать обе строки

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

Изменить дубликат №1

Изменить цвет фона строки

Начнем с изменения цвета фона строки первого дубликата.

• Цвет фона: # ffc9cf

Изменить цвет столбца

Затем мы также изменим цвет фона столбца 2.

• Цвет фона столбца 2: # ffadb6

Изменить значок в модуле изображения

Измените значок в модуле изображения на другой по вашему выбору.

Добавить фильтр в модуль изображения

И измените оттенок в настройках фильтров, чтобы он соответствовал новым цветам фона строки и столбца.

• Оттенок: 309 градусов

Изменить цвет текста

Мы тоже меняем цвет текста.

• Цвет текста заголовка 3: # f862b0

Изменить цвет фона кнопки

И мы используем тот же цвет для фона кнопки.

• Цвет фона кнопки: # f862b0

Изменить дубликат №2

Изменить цвет фона строки

Переходим к следующему и последнему дубликату! Измените цвет фона строки.

• Цвет фона: # b2c4ff

Изменить цвет столбца

Сделайте то же самое для цвета фона столбца 1.

• Цвет фона столбца 1: # 9eb4ff

Изменить значок в модуле изображения

Затем измените используемый значок.

Добавить фильтр в модуль изображения

Вместе с оттенком в настройках фильтров модуля изображения.

• Оттенок: 221deg

Изменить цвет текста

Затем измените цвет текста модуля изображения.

• Цвет текста заголовка 3: # 6287f9

Изменить цвет фона кнопки

И используйте тот же цвет для фона кнопки.

• Цвет фона кнопки: # 6287f9

Предварительный просмотр

Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим на результат.

Мобильный

Рабочий стол

Последние мысли

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