Как создать шаблон страницы 404 с помощью конструктора тем Divi

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

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

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

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

Рабочий стол

Мобильный

Загрузите шаблон страницы 404 БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

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

1. Перейдите в Divi Theme Builder и создайте новый шаблон.

Перейти в конструктор тем Divi

Чтобы начать создание шаблона страницы 404, перейдите в Divi Theme Builder в настройках Divi.

Создать новый шаблон

Нажмите «Добавить новый шаблон» и настройте новый шаблон для своей страницы 404.

• Использовать на: 404 странице

Скрыть область верхнего и нижнего колонтитула

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

Построить глобальное тело

Выполнив все предыдущие шаги, вы можете приступить к созданию тела страницы 404, выбрав «Создать собственное тело».

2. Начать создание тела страницы 404

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

Фоновый цвет

Оказавшись внутри редактора шаблонов, вы заметите раздел на своей странице. Откройте этот раздел и добавьте белый цвет фона.

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

Нижний разделитель

Перейдите на вкладку дизайна раздела и добавьте нижний разделитель:

• Стиль разделителя: найти в списке
• Цвет разделителя: # ffee00
• Высота разделителя: 25vw (рабочий стол), 77vw (планшет), 90vw (телефон)
• Переворот разделителя: вертикальный
• Расположение разделителей: содержание под разделом

Интервал

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

• Верхняя подкладка: 4.6vw (рабочий стол), 23vw (планшет), 25vw (телефон)
• Нижняя прокладка: 4.6vw (рабочий стол), 13vw (планшет), 11vw (телефон)

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

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

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

Размеры

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

• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 100%

Интервал

Затем измените значения верхнего и нижнего отступов строки.

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

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

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

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

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

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

• Шрифт текста: монотонный
• Цвет текста: # 000000
• Размер текста: 24vw (рабочий стол), 35vw (планшет и телефон)
• Высота текстовой строки: 1em
• Выравнивание текста: по центру

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

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

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

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

Соответственно измените текстовые настройки модуля:

• Шрифт текста: Монтсеррат
• Цвет текста: # 000000
• Размер текста: 1.2vw (рабочий стол), 2.6vw (планшет), 3vw (телефон)
• Высота текстовой строки: 1,8 м
• Выравнивание текста: по центру

Интервал

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

• Верхняя маржа: 2vw
• Нижняя маржа: 6vw

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

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

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

Размеры

Откройте настройки строки и отрегулируйте настройки размера следующим образом:

• Ширина: 32vw (настольный), 50vw (планшет и телефон)
• Максимальная ширина: 100%

Интервал

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

• Верхнее поле: 7vw (рабочий стол), 22vw (планшет), 59vw (телефон)
• Верхняя обивка: 0vw
• Нижняя обивка: 0vw

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

Цвет фона по умолчанию

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

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

Цвет фона при наведении

Измените цвет фона при наведении.

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

Граница

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

• Закругленные углы: 20 пикселей (все углы)

Тень бокса по умолчанию

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

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

Hover Box Shadow

Измените цвет тени при наведении.

• Цвет тени: rgba (0,0,0,0.12)

Масштаб преобразования по умолчанию

Затем перейдите к настройкам масштаба трансформации и убедитесь, что значения по умолчанию остаются «100%».

• Правильно: 100%
• Внизу: 100%

Масштаб преобразования при наведении

Измените значения масштаба трансформации при наведении курсора:

• Правильно: 110%
• Внизу: 110%

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

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

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

Добавить ссылку

Далее добавьте ссылку на модуль.

• URL ссылки на модуль: #
• Целевой объект ссылки модуля: в том же окне

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

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

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

Интервал

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

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

Клонировать текстовый модуль и поместить дубликат в столбец 2

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

Изменить содержимое

Убедитесь, что вы изменили содержимое дублирующего модуля.

Изменить ссылку

Ссылку тоже смени.

3. Сохраните изменения в построителе тем.

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

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

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

Рабочий стол

Мобильный

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

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

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