Как максимизировать мобильные области просмотра Divi с помощью повернутой копии

При разработке веб-сайта в самом начале вы должны сделать важный выбор: «Для какого устройства я собираюсь разработать в первую очередь?» Часто ответ - настольный компьютер. Но то, что вы сначала разрабатываете для настольных компьютеров, не означает, что ваш мобильный дизайн не может быть таким тщательным. Например, используя повернутую копию, вы можете максимизировать мобильные окна просмотра Divi и разместить больше контента в мобильных окнах просмотра, не перегружая посетителей или свой дизайн. В этом уроке мы покажем вам, как именно это сделать внутри Divi. Вы также сможете бесплатно скачать файл JSON!

Давайте перейдем к этому.

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

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

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

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

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

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

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

СКАЧАТЬ

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

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

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

Интервал

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

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

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

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

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

Размеры

Еще не добавляя никаких модулей, откройте настройки строки и измените настройки размера следующим образом:

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Выровнять высоту столбца: Да
• Ширина: 100%
• Макс.ширина: 50% (рабочий стол), 100% (планшет и телефон)
• Выравнивание ряда: по левому краю

Интервал

Затем удалите все стандартные верхние и нижние отступы.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Основной элемент CSS

Чтобы все столбцы оставались рядом друг с другом, мы также добавим одну строку кода CSS к основному элементу строки.

display: flex;

Столбец 1 Настройки

Анимация

Затем мы откроем настройки столбца 1 и добавим следующую анимацию:

• Стиль анимации: Затухание

Основной элемент CSS

Мы сохраним размер столбца на экранах меньшего размера, добавив следующую строку кода CSS к основному элементу столбца:

width: 40% !important;

Столбец 2 Настройки

Анимация

Затем мы откроем настройки столбца 2 и применим следующую анимацию:

• Стиль анимации: Затухание
• Задержка анимации: 200 мс

Основной элемент CSS

Мы сохраняем размер столбца на экранах меньшего размера, добавляя следующую строку кода CSS:

width: 60% !important;

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

Загрузить изображение

Пора добавлять модули. Добавьте модуль изображения в столбец 2 и загрузите портретное изображение по вашему выбору.

Размеры

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

• Принудительная полная ширина: Да

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

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

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

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

Перейдите на вкладку дизайна модуля и измените настройки текста H2 следующим образом:

• Шрифт заголовка 2: Montserrat
• Толщина шрифта заголовка 2: светлый
• Выравнивание текста заголовка 2: по центру (только планшет и телефон)
• Цвет текста заголовка 2: # 000000
• Размер текста заголовка 2: 3vw (рабочий стол), 50 пикселей (планшет), 40 пикселей (телефон)
• Заголовок 2 Расстояние между буквами: -3 пикселя

Размеры

Затем мы изменим ширину в настройках размера.

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

Преобразовать Повернуть

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

• Слева: 270 градусов (только планшет и телефон)

Позиция

Мы также по-разному перемещаем модуль для разных размеров экрана.

• Позиция: Абсолютная
• Расположение: внизу по центру (рабочий стол), по центру (планшет и телефон)
• Вертикальное смещение: 50 пикселей

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

Видимость

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

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

Линия

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

• Цвет линии: # 000000

Размеры

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

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

Позиция

И завершите настройки модуля, переставив модуль соответствующим образом:

• Позиция: Абсолютная
• Расположение: в центре справа

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

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

В следующей строке используйте следующую структуру столбцов:

Размеры

Еще не добавляя никаких модулей, откройте настройки строки и измените настройки размера следующим образом:

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Выровнять высоту столбца: Да
• Ширина: 100%
• Макс.ширина: 50% (рабочий стол), 100% (планшет и телефон)
• Выравнивание строк: вправо

Интервал

Затем удалите все стандартные верхние и нижние отступы.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Основной элемент CSS

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

display: flex;

Столбец 1 Настройки

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

Затем мы откроем настройки столбца 1 и применим градиентный фон.

• Цвет 1: # 1a9970
• Цвет 2: # 000000
• Тип градиента: линейный
• Направление градиента: 153 град.

Анимация

Мы также используем отложенную анимацию для этого столбца.

• Стиль анимации: Затухание
• Задержка анимации: 400 мс

Основной элемент CSS

Затем мы убедимся, что сохраняем размер столбца на экранах меньшего размера, добавив следующую строку кода CSS к основному элементу столбца:

width: 25% !important;

Видимость

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

• Горизонтальное переполнение: скрыто
• Вертикальный перелив: скрытый

Столбец 2 Настройки

Фоновый цвет

Переходим к настройкам столбца 2. Используйте для него следующий цвет фона:

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

Анимация

Также примените отложенную анимацию.

• Стиль анимации: Затухание
• Задержка анимации: 600 мс

Основной элемент CSS

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

width: 75% !important;

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

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

Пора добавлять модули. Добавьте текстовый модуль в столбец 2 с некоторым описанием по вашему выбору.

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

Перейдите на вкладку дизайна модуля и соответствующим образом измените настройки текста:

• Шрифт текста: Open Sans
• Размер текста: 15 пикселей (рабочий стол), 14 пикселей (планшет), 13 пикселей (телефон)
• Высота текстовой строки: 2,4 м

Размеры

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

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

Интервал

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

• Верхняя набивка: 15%
• Нижняя обивка: 15%

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

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

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

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

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

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

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

Далее стилизуйте кнопку.

• Использовать пользовательские стили для кнопки: Да
• Цвет текста кнопки: # 000000
• Цвет фона кнопки: #ffffff
• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 0 пикселей

• Шрифт кнопки: Montserrat
• Показать значок кнопки: Да
• Расположение значка кнопки: слева
• Показывать значок только при наведении курсора на кнопку: Нет

Интервал

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

• Верхняя набивка: 2%
• Нижняя обивка: 2%
• Левый отступ: 10%
• Правое заполнение: 10%

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

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

В столбце 1 нам нужен только текстовый модуль. Добавьте следующее содержимое в поле содержимого: '- 01'.

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

Перейдите на вкладку дизайна модуля и соответствующим образом измените настройки текста:

• Шрифт текста: Монтсеррат
• Толщина шрифта текста: тонкий
• Цвет текста: #ffffff
• Размер текста: 50 пикселей (рабочий стол), 40 пикселей (планшет), 35 пикселей (телефон)
• Выравнивание текста: по центру

Размеры

Затем увеличьте ширину модуля.

• Ширина: 150%

Преобразовать Перевести

Затем перейдите к настройкам преобразования и переместите модуль, изменив настройки преобразования:

• Внизу: -50% (только планшет и телефон)

Преобразовать Повернуть

Мы также вращаем модуль на экранах меньшего размера.

• Слева: 270 градусов (только планшет и телефон)

Позиция

И мы завершим настройку модуля, переместив модуль на вкладке «Дополнительно».

• Позиция: Абсолютная
• Расположение: Центр

Раздел клонирования для повторного использования

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

Изменить все копии и ссылки

Убедитесь, что вы изменили все копии и ссылки.

Изменить изображение

Вместе с портретным изображением и готово!

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

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

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

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

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