Как перенести новый стиль дизайна на другую страницу с помощью функций повышения эффективности Divi

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

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

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

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

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

Подход

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

Часть 1. Открытие двух страниц рядом друг с другом

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

Часть 2: Сброс некоторых настроек раздела

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

Часть 3: Использование функций Divi Cross-Page Copy-Paste & Extend Styles для раздела Hero

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

Часть 4: Внесение изменений вручную (в соответствии с макетом) и использование функций повышения эффективности

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

Часть 5: Добавление характеристик конструкции

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

Часть 1. Открытие двух страниц рядом друг с другом

Создание новой страницы с использованием макета с использованием целевой страницы пакета макетов мебельного магазина

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

Создайте новую страницу с помощью целевой страницы пакета макетов хостинговой компании

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

Часть 2: Сброс некоторых настроек раздела

Сбросить отдельные настройки раздела целевой страницы хостинговой компании

Открыть раздел героев

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

Сбросить фон раздела и распространить на все разделы

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

Сбросить разделители и распространить на все разделы

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

Часть 3: Использование функций Divi Cross-Page Copy-Paste & Extend Styles для раздела Hero

Межстраничное копирование и вставка элементов раздела героя

Настройки раздела

Пора начать использовать функцию копирования и вставки между страницами! Мы изменим каждый элемент дизайна в разделе героев. Начните с копирования стилей разделов героев на целевой странице мебельного магазина. Затем вернитесь на целевую страницу хостинговой компании и вставьте скопированные стили разделов.

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

Сделайте то же самое для ряда.

Модуль текста заголовка

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

Модуль основного текста

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

Расширить стили

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

Измените ориентацию обратного текста на центр, где это необходимо

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

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

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

Расширить стили для настроек кнопок

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

Расширить стили для интервалов

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

Расширить стили для тени коробки

И настройки тени блока тоже.

Копировать-вставить оставшиеся элементы один раз + расширить стиль

Делитель

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

Расширить стили

Опять же, распространите стили этого модуля на всю страницу.

Часть 4: Внесение изменений вручную (в соответствии с макетом) и использование функций повышения эффективности

Изменения в макете

Найти и заменить шрифт заголовка

Пришло время внести некоторые изменения вручную! Первое, что мы сделаем, это сопоставим шрифт. Откройте текстовый модуль на странице и найдите шрифт Rubik, который используется на всей странице. Затем нажмите «Найти и заменить» и замените шрифт на Montserrat.

Найти и заменить толщину шрифта заголовка

Сделайте то же самое с жирностью шрифта. Вместо использования «Средний» выберите «Светлый».

Найти и заменить закругленные углы

Мы также удаляем границы закругленных углов по всей странице, используя функцию «Найти и заменить» и применяя «0 пикселей» к каждому из углов по всей странице.

Сбросить настройки фона CTA и расширить стиль в разделе

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

Найти и заменить цвет фона CTA в разделе

Как только вы это сделаете, появится цвет фона по умолчанию. Найдите и замените этот цвет и измените его на «# 1a2545» во всем разделе.

Найти и заменить цвет текста CTA в разделе

Также замените цвет текста на «Светлый» во всем разделе.

Изменить настройки кнопки таблицы цен

Затем перейдите к таблицам цен на странице и измените настройки кнопки:

• Цвет фона кнопки: # ef6f49
• Ширина границы кнопки: 8 пикселей
• Цвет границы кнопки: # ef6f49
• Радиус границы кнопки: 0 пикселей
• Расстояние между буквами кнопки: 2 пикселя (по умолчанию), 1 пиксель (при наведении)
• Шрифт кнопки: Montserrat
• Толщина шрифта: полужирный
• Стиль шрифта: прописные
• Расположение кнопок: влево

Расширить стили для таблиц цен и модулей CTA

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

Часть 5: Добавление характеристик конструкции

Цвет фона раздела # 1

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

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

Цвет фона раздела # 2

Сделайте то же самое для раздела ниже.

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

Раздел градиентный фон №1

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

• Цвет 1: #ffffff
• Цвет 2: # 1a2545
• Направление градиента: 90 градусов
• Стартовая позиция: 55%
• Конечная позиция: 55%

Раздел градиентного фона # 2

Используйте другой градиентный фон для раздела ниже:

• Цвет 1: rgba (210,218,228,0,38)
• Цвет 2: #ffffff
• Направление градиента: 90 градусов
• Стартовая позиция: 45%
• Конечная позиция: 45%

Раздел Градиентный Фон # 3

И последнее, но не менее важное: добавьте фон с линейным градиентом в последний раздел на странице.

• Цвет 1: #ffffff
• Цвет 2: # f7f3ec
• Стартовая позиция: 40%
• Конечная позиция: 40%

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

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

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

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