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

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

Если вы знакомы с Divi, вы уже должны знать о модуле полноэкранного заголовка, который имеет встроенную полноэкранную функциональность. Это прекрасное решение для создания полноэкранных страниц с минимальным содержанием. Но если вы хотите воспользоваться преимуществами создания полноэкранного макета страницы с использованием обычного раздела с несколькими строками и модулями, этот пост для вас. Я покажу вам несколько простых приемов, чтобы убедиться, что содержимое вашей страницы (даже панель верхнего и нижнего колонтитула) вписывается в окно вашего браузера, а затем хорошо масштабируется для разных размеров браузера.

Давайте начнем.

Sneak Peek

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

Обратите внимание, как высота страницы адаптируется к высоте окна браузера, поэтому все остается на месте.

Что вам нужно

Все, что вам действительно нужно для этого урока, - это Divi. Я также буду использовать пакет Fitness Gym Layout, доступный в Divi Builder.

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

Как создать собственную полноэкранную страницу в Divi

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

Основная идея объяснена

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

Теперь разверните Divi Builder во внешнем интерфейсе, чтобы создать свою страницу с нуля. Затем добавьте одну обычную секцию со строкой из одного столбца.

Затем добавьте модуль таймера обратного отсчета (или любой модуль) в строку с одним столбцом.

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

Теперь откройте настройки раздела, перейдите на вкладку «Дополнительно» и добавьте следующий настраиваемый CSS в основной элемент:

min-height: 100vh;
display: flex;
flex-direction: column;

Установка минимальной высоты вашего раздела на 100vh (100% высоты окна просмотра) гарантирует, что ваш раздел будет занимать все окно браузера (или окно просмотра). Свойство «display: flex» - это быстрый и простой способ центрировать содержимое раздела по вертикали.

Ознакомьтесь с этим полезным руководством для получения дополнительной информации о единице длины vh.

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

Ну вот и все. Это основная идея создания настраиваемого полноэкранного макета страницы в Divi.

Включение верхнего и нижнего колонтитула в полноэкранную страницу.

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

Включение верхнего и нижнего колонтитула добавит дополнительную высоту к области просмотра вашего браузера, поэтому раздел больше не будет соответствовать так, как когда-то. Это связано с тем, что ваша страница теперь состоит из высоты раздела, которая составляет 100% высоты области просмотра ПЛЮС высоты вашего заголовка и нижней панели нижнего колонтитула. Это слишком много. Чтобы исправить это, нам нужно настроить собственный CSS в нашем разделе на следующее:

min-height: calc(100vh - 133px);
display: flex;
flex-direction: column;

Единственная разница - это значение минимальной высоты. Теперь есть расчет, который учитывает дополнительную высоту (в пикселях) заголовка и нижней панели нижнего колонтитула вместе.

132 пикселя основаны на общей высоте заголовка по умолчанию (80 пикселей) и высоте по умолчанию нижней панели нижнего колонтитула (53 пикселя).

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

Создание полного полноэкранного дизайна страницы

Чтобы приступить к работе над этим дизайном, создайте новую страницу, дайте странице название и разверните Divi Builder. Выберите вариант «Выбрать готовый макет» и во всплывающем окне «Загрузить из библиотеки» выберите страницу «Макет фитнес-зала». Затем щелкните, чтобы перейти на страницу с ценами.

После того, как макет загрузится в конструктор, нажмите кнопку для создания интерфейса (Visual Builder), и вы готовы к работе.

Создание нового раздела

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

Добавление модулей в ваши столбцы

Используя Multiselect (удерживая ctrl / cmd и щелкните), выберите все модули в первых двух строках в первом разделе макета и перетащите их в первый столбец нового раздела вверху страницы.

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

Текст будет скрыт из-за белого фона, но мы изменим цвет фона позже.

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

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

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

Настройка параметров строки

Откройте настройки строки и начните с добавления цвета фона в столбец 2:

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

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

Сделать эту строку полной шириной: ДА
Ширина желоба: 1
Выровнять высоту столбца: ДА
Пользовательский отступ: 0 пикселей сверху, 0 пикселей снизу

Настройка параметров раздела

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

Стиль верхнего делителя: см. Снимок экрана
Цвет верхнего разделителя: # 2a2e40
Высота верхнего разделителя: 8vw
Повторение по горизонтали верхнего делителя: 0,8x
Переворот верхнего делителя: вертикальный и горизонтальный

Пользовательский отступ: 0 пикселей сверху, 0 пикселей снизу.

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

Удалите остальную часть готового макета

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

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

Добавление пользовательского CSS, чтобы сделать страницу полноэкранной

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

В меню настроек в нижней части конструктора внешнего интерфейса откройте настройки страницы. На вкладке «Дополнительно» введите следующий настраиваемый CSS:

@media (min-width: 980px){

/*If CSS IDs are added, this makes the element the same height as the browser window taking into account the header and the bottom footer bar*/
  #fullsection, #fullslide .et_pb_slide {
    height: calc(100vh - 133px);
  }
/*This centers the content of the section when the CSS ID is applied*/
  #fullsection { 
    display: flex;
    flex-direction:column;
    overflow: hidden;
  }
/*This makes the bottom footer bar fullwidth to match the fullwidth header if applied*/
  #footer-bottom .container {
    width: 100%;
    max-width: 100%;
    padding-right: 30px;
    padding-left: 30px;
  }
}

Для тех из вас, кто не знаком с CSS, обратите внимание, что код обернут медиа-запросом, который применяет стиль, когда ширина браузера составляет не менее 980 пикселей. В скобках первый фрагмент включает идентификатор CSS с именем «fullsection», за которым следует идентификатор CSS с именем «fullslide». Эти два идентификатора CSS важно запомнить, потому что нам нужно будет добавить их в наш раздел и наш слайдер. Как только мы это сделаем, будет применен css «height: calce (100vh - 133px)», что сделает их обоими полноэкранными (охватывающими всю высоту окна браузера).

Второй фрагмент применит свойство display flex к разделу, сделав все содержимое раздела вертикально центрированным. Чтобы узнать больше об этом, ознакомьтесь с нашим сообщением о том, как вертикально выровнять контент в Divi.

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

Теперь, когда у вас есть внешний CSS, мы можем добавить наши идентификаторы CSS в наш раздел и наш слайдер. Зайдите в настройки раздела и добавьте следующий CSS ID:

CSS ID: полный раздел

Теперь откройте настройки модуля слайдера для слайдера в столбце 3 и добавьте следующий идентификатор CSS:

CSS ID: fullslide

Последние штрихи

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

Добавьте интервалы в наши столбцы

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

Пользовательское заполнение столбца 1: 12vh сверху, 1vw слева, 1vw справа
Пользовательское заполнение столбца 2: 12vh сверху, 1vw слева, 1vw справа

Обратите внимание, что я использовал единицу длины vh для моих верхних значений заполнения. Это позволит масштабировать отступы с высотой области просмотра, создавая больше отступов, когда окно браузера становится выше, и создавая меньше отступов, когда браузер становится короче. Я использовал единицу длины vw (ширина области просмотра) для значений левого и правого отступов, чтобы они масштабировались в соответствии с шириной окна браузера.

Добавьте единицы длины vh в большой текст, чтобы увеличить пространство для просмотра

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

Откройте настройки текстового модуля в верхней части столбца 1 и обновите размер текста заголовка h1 до 7vh (не vw).

Затем откройте настройки текстового модуля в верхней части столбца 2 и измените размер текста заголовка 2 на 6vh.

Обновить дизайн слайдера

Чтобы завершить дизайн, вы можете скопировать дизайн кнопки в столбце 2 и вставить его в стили кнопок ползунка. Для этого откройте настройки кнопки в столбце 2, щелкните правой кнопкой мыши категорию параметров кнопки и выберите «Копировать стили кнопок».

После этого откройте настройки слайдера и вставьте стили кнопок в категорию параметров кнопки слайдера.

Вы также можете добавить фоновое наложение к отдельным слайдам.

Регулировка панели верхнего и нижнего колонтитула

Возможно, вы помните, что мы уже добавили небольшой фрагмент пользовательского CSS, который расширил нижний колонтитул до полной ширины. Это было сделано в ожидании полной ширины нашей основной панели меню. Чтобы сделать вашу основную панель меню полной шириной, перейдите на панель управления WordPress и выберите Divi> Theme Customizer> Header & Navigation> Primary Menu Bar. Затем отметьте опцию Сделать полной шириной.

Поскольку мы отображаем нижнюю панель нижнего колонтитула на нашей полноэкранной странице, мы можем обновить цвет фона нижней панели в соответствии с дизайном. Оставайтесь в настройщике темы и перейдите в Нижний колонтитул> Нижняя панель. Затем установите цвет фона на # 2a2e40.

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

Окончательный результат

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

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

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

Вот он на планшете и смартфоне.

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

Создание настраиваемого полноэкранного макета страницы в Divi не так уж сложно, если вы понимаете, как правильно настроить высоту вашего раздела по высоте вашего браузера с помощью нескольких фрагментов CSS. Но как только вы это сделаете, вы сможете создавать бесчисленное количество полноэкранных дизайнов страниц в Divi Builder. Просто будьте осторожны, чтобы свести содержание к минимуму, если вы планируете оставить все видимым в окне браузера.

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

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

Вот еще пара сообщений о полноэкранных страницах, которые могут вам понравиться.

• Как создать полноэкранные разделы со ссылками верхней и нижней прокрутки с помощью Divi
• Создайте уникальный полноэкранный макет Divi с помощью анимированной кнопки прокрутки
• и более

Я с нетерпением жду вашего ответа в комментариях ниже.

Ваше здоровье!