Как красиво продемонстрировать услуги на мобильных устройствах с Divi (бесплатная загрузка!)

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

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

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

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

Пример # 1

Пример # 2

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

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

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

Градиентный фон

Создайте новую страницу и добавьте к ней обычный раздел. Откройте настройки раздела и добавьте градиентный фон.

• Цвет 1: # ff0f83
• Цвет 2: rgba (255,255,255,0)
• Тип градиента: радиальный
• Радиальное направление: влево
• Стартовая позиция: 20%
• Конечная позиция: 20%

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

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

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

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

Добавить содержимое

Первый модуль, который нам понадобится, - это текстовый модуль. Добавьте содержимое в поле содержимого.

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

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

• Шрифт текста: Поппинс
• Толщина шрифта текста: толстый
• Цвет текста: #ffffff
• Размер текста: 20vw
• Высота текстовой строки: 1em

• Сила размытия теней текста: 0.95em
• Цвет тени текста: rgba (0,0,0,0.13)
• Ориентация текста: по центру

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

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

Добавьте еще один текстовый модуль прямо под предыдущим. Введите содержание H2 по вашему выбору.

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

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

• Шрифт заголовка 2: Poppins
• Толщина шрифта заголовка 2: полужирный
• Выравнивание текста заголовка 2: по центру
• Цвет текста заголовка 2: # 000000
• Размер текста заголовка 2: 10vw (телефон и планшет), 10vw (рабочий стол)

Интервал

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

• Верхнее поле: -12vw (телефон), -10vw (планшет), -8vw (настольный компьютер)

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

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

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

Градиентный фон

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

• Цвет 1: # 3239ff
• Цвет 2: rgba (255,255,255,0)
• Тип градиента: радиальный
• Радиальное направление: вправо
• Стартовая позиция: 30%
• Конечная позиция: 30%

Размеры

Затем перейдите к настройкам размера и позвольте строке занять всю ширину экрана.

• Сделать эту строку полной шириной: Да
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1

Интервал

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

• Левое заполнение: 0vw (телефон и планшет), 15vw (рабочий стол)
• Правое заполнение: 0vw (телефон и планшет), 15vw (рабочий стол)

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

Мы также размещаем два столбца рядом друг с другом, добавляя одну строку кода CSS на вкладке «Дополнительно».

display: flex;

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

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

Теперь можно приступить к добавлению модулей! Добавьте текстовый модуль в первый столбец с копией H3 и ссылкой.

Фоновый цвет

Затем перейдите в настройки фона модуля и добавьте цвет фона.

• Цвет фона: rgba (255,255,255,0.95)

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

Продолжите, изменив ориентацию текста в настройках текста модуля.

• Ориентация текста: по центру

Настройки текста ссылки

Также измените настройки текста ссылки.

• Шрифт ссылки: Poppins
• Толщина шрифта Linke: полужирный
• Стиль шрифта ссылки: подчеркивание
• Цвет подчеркивания ссылки: # 000000
• Цвет текста ссылки: # 000000
• Размер текста ссылки: 3vw (телефон), 2vw (планшет), 1vw (рабочий стол)

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

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

• Шрифт заголовка 3: Poppins
• Толщина шрифта заголовка 3: Ультра легкий
• Цвет текста заголовка 3: # 000000
• Размер текста заголовка 3: 4vw (телефон), 3vw (планшет), 2vw (рабочий стол)
• Высота текстовой строки заголовка 3: 1.9em для формы круга или 3em для овальной формы.

Интервал

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

• Левое поле: 5vw
• Правое поле: -5vw
• Верхняя прокладка: 17vw (телефон), 20vw (планшет), 15vw (рабочий стол)
• Нижняя прокладка: 17vw (телефон), 20vw (планшет), 15vw (рабочий стол)

Граница

Мы превращаем квадрат в круг, используя закругленные углы, добавляя «100vw» к каждому из углов.

Коробка Тень

И чтобы создать некоторую глубину, мы добавим тонкую тень блока.

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

Клонировать текстовый модуль 4 раза

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

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

Интервал

Продолжите, изменив настройки интервала первого дубликата.

• Верхняя маржа: 20vw
• Левое поле: -5vw
• Правое поле: 5vw

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

Фоновый цвет

Затем откройте второй дубликат и измените цвет фона.

• Цвет фона: rgba (255,248,209,0.92)

Интервал

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

• Верхняя маржа: -5vw

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

Фоновый цвет

Затем откройте третий дубликат и измените цвет фона.

• Цвет фона: rgba (219,255,223,0.95)

Интервал

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

• Верхняя маржа: -5vw
• Левое поле: -5vw
• Правое поле: 5vw

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

Интервал

Также откройте последний дубликат и добавьте отрицательное верхнее поле, чтобы закончить дизайн.

• Верхняя маржа: -5vw

Приступим к воссозданию примера №2

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

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

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

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

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

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

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

Первый модуль, который нам понадобится, - это текстовый модуль. Введите содержание H2 по вашему выбору.

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

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

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

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

Видимость

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

Цвет

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

• Цвет: # 333333

Размеры

Поиграйте также с настройками размеров.

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

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

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

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

Фоновый цвет

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

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

Размеры

Затем перейдите к настройкам размера и позвольте строке занять всю ширину экрана.

• Сделать эту строку полной шириной: Да
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1

Интервал

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

• Верхняя маржа: 2vw
• Нижняя маржа: 2vw
• Верхняя прокладка: 10vw (телефон и планшет), 5vw (рабочий стол)
• Нижняя прокладка: 10vw (телефон и планшет), 5vw (рабочий стол)
• Левое заполнение: 2vw (телефон и планшет), 20vw (рабочий стол)
• Правая прокладка: 2vw (телефон и планшет), 20vw (настольный компьютер)

Коробка Тень

Мы также используем тонкую тень коробки.

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

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

И последнее, но не менее важное: поместите оба столбца рядом друг с другом, добавив одну строку кода CSS к основному элементу на расширенной вкладке.

display: flex;

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

Выбрать значок

Теперь мы можем начать добавлять модули! Единственный модуль, который нам нужен в столбце 1, - это модуль Blurb. Выберите значок по вашему выбору.

Градиентный фон

Затем добавьте градиентный фон.

• Цвет 1: # 7b28ef
• Цвет 2: # 29b6e5
• Направление градиента: 142 градуса

Настройки значков

Затем измените настройки значка.

• Цвет значка: #ffffff
• Расположение значков: вверху
• Использовать размер шрифта значка: Да
• Размер шрифта значков: 5vw (телефон и планшет), 4vw (рабочий стол)

Размеры

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

• Ширина: 48% (телефон и планшет), 78% (рабочий стол)

Интервал

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

• Верхняя маржа: 2vw (телефон)
• Верхняя прокладка: 8.5vw (телефон), 9vw (планшет), 6vw (рабочий стол)
• Нижняя прокладка: 3vw (телефон), 5vw (планшет), 4vw (рабочий стол)

Граница

Затем превратите модуль в круг, добавив «100vw» к каждому из углов в настройках границы.

Коробка Тень

Мы также добавляем тень блока.

• Положение прямоугольной тени по вертикали: 10 пикселей
• Сила распространения тени коробки: 5 пикселей
• Цвет тени: rgba (2,185,252,0,35)

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

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

Переходим ко второй колонке! Первый модуль, который нам нужен, это текстовый модуль заголовка. Добавьте контент H3.

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

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

• Шрифт заголовка 3: Poppins
• Размер текста заголовка 3: 4vw (телефон), 3vw (планшет), 2vw (рабочий стол)

Интервал

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

• Верхняя маржа: 0vw (телефон), 3vw (планшет и компьютер)
• Левое поле: -20vw (телефон и планшет), 0vw (рабочий стол)
• Правое поле: 0vw
• Нижняя прокладка: 2vw (телефон и планшет), 1vw (рабочий стол)
• Левое заполнение: 5vw (телефон и планшет), 2vw (рабочий стол)

Граница

Вместе с левой границей.

• Ширина левой границы: 5 пикселей
• Цвет левой границы: # f4f4f4
• Стиль левой границы: двойной

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

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

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

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

Цвет

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

• Цвет: # f4f4f4

Стили

Затем измените стиль разделителя в настройках стилей.

• Стиль разделителя: Двойной

Размеры

Продолжите, изменив различные параметры в настройках размеров.

• Вес разделителя: 5 пикселей
• Высота: 0 пикселей

Интервал

И также поиграйте со значениями интервалов.

• Левое поле: -20vw (телефон и планшет), 0vw (рабочий стол)

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

Добавить содержимое

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

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

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

• Размер текста: 2vw (телефон), 1.7vw (планшет), 0.8vw (рабочий стол)
• Ориентация текста: влево

Интервал

Поиграйте также со значениями интервалов.

• Верхняя маржа: 0vw
• Левое поле: -20vw (телефон и планшет), 0vw (рабочий стол)
• Правое поле: 0vw
• Верхняя подкладка: 3vw (телефон и планшет), 2vw (рабочий стол)
• Левое заполнение: 5vw (телефон и планшет), 2vw (рабочий стол)

Граница

И добавьте левую границу.

• Ширина левой границы: 5 пикселей
• Цвет левой границы: # f4f4f4
• Стиль левой границы: двойной

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

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

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

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

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

• Использовать пользовательские стили для кнопки: Да
• Размер текста кнопки: 2.5vw (телефон), 2vw (планшет), 1vw (рабочий стол)
• Цвет текста кнопки: # 4f77e8
• Ширина границы кнопки: 1 пиксель
• Цвет границы кнопки: # 4f77e8

• Радиус границы кнопки: 1px
• Шрифт кнопки: Поппинс

Интервал

Также измените значения интервала.

• Верхняя маржа: 4vw (телефон и планшет), 2vw (настольный компьютер)
• Левое поле: -20vw (телефон и планшет), 0vw (рабочий стол)

Клонировать строку дважды

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

Изменить значки

Убедитесь, что вы изменили значки для обоих модулей Blurb.

Изменить градиентный фон

Измените также градиентный фон.

• Цвет 1: # ff2885
• Цвет 2: # d6ac24

• Цвет 1: # 70ff1e
• Цвет 2: # 2699ff

Изменить цвета теней коробки

Совместите цвет тени блока с новым градиентным фоном.

• Цвет тени: rgba (255,208,2,0.37)

• Цвет тени: rgba (42,255,0,0.37)

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

И завершите дизайн, изменив цвет границы кнопки и текста.

• Цвет текста кнопки: # e96c54
• Цвет границы кнопки: # e96c54

• Цвет текста кнопки: # 4dcb93
• Цвет границы кнопки: # 4dcb93

Скачать Разделы мобильных сервисов БЕСПЛАТНО

Чтобы получить доступ к разделам бесплатных мобильных сервисов, вам сначала необходимо загрузить их с помощью кнопки ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

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

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

Пример # 1

Пример # 2

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

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