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

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

Лучшие практики для вариантов предметов

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

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

Например, «Минимальный заголовок (синий)» и «Минимальный заголовок (белый)» носят описательный характер и показывают, что они являются разновидностью макета под названием «Минимальный заголовок». Они также описывают, что отличается от оригинала. Они короткие, простые и понятные с первого взгляда.

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

Создайте макет заголовка

Мы начнем с того, как добавить макет заголовка в Divi Cloud. Вы можете использовать готовый макет или создать заголовок с нуля. Для своих примеров я использую БЕСПЛАТНЫЙ хедер и футер для пакета макетов электрических услуг Divi. Я назову этот заголовок Заголовок электрических служб. Я выберу Заголовки для категории и выберу один из двух тегов.

Создайте заголовок в конструкторе тем

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

1. Сначала включите Visual Builder, перейдя в «Divi» > «Theme Builder» на панели управления WordPress.
2. Создайте заголовок одним из трех способов. Выберите «Добавить глобальный заголовок», добавьте «Новый шаблон» или выберите параметр «Переносимость» и создайте или импортируйте макет заголовка.
3. Щелкните значок «Изменить» для заголовка, который вы хотите добавить в Divi Cloud.

Сохраните заголовок в Divi Cloud

Затем отредактируйте заголовок и сохраните макет в Divi Cloud.

1. Нажмите фиолетовый значок «Сохранить в библиотеку» внизу страницы.
2. Введите имя макета, выберите «Сохранить в облаке» и выберите категории и теги.
3. Нажмите «Сохранить в библиотеке».
4. Закройте редактор Theme Builder.
5. Выберите «Сохранить изменения» в верхнем левом углу конструктора тем.

Создать варианты элементов

Далее мы создадим два варианта нашего исходного заголовка. Существует несколько способов создания вариантов предметов для Divi Cloud. Мы рассмотрим несколько разных вариантов.

Первый вариант макета заголовка

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

Дублируйте шаблон заголовка

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

1. Включите Visual Builder, перейдя в «Divi»> «Theme Builder» на панели управления WordPress.
2. Выберите значок «Дублировать» над глобальным шаблоном.
3. Выберите места, которые вы хотите назначить этому шаблону во всплывающем окне, и нажмите «Сохранить» внизу.

Сохраните вариант в облаке Divi.

Затем отредактируйте заголовок и сохраните его в Divi Cloud.

1. Щелкните значок «Изменить» для заголовка, который вы хотите добавить в Divi Cloud.
2. Нажмите фиолетовый значок «Сохранить в библиотеку» внизу страницы.
3. Введите имя макета, выберите «Сохранить в облаке» и выберите категории и теги. Выберите имена, категории и теги, которые дают понять, что это вариант другого макета.
4. Нажмите «Сохранить в библиотеке».
5. Закройте редактор Theme Builder.
6. Выберите «Сохранить изменения» в верхнем левом углу конструктора тем.

Второй вариант макета заголовка

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

Дублируйте макет заголовка

Во-первых, вам нужно загрузить макет в редактор Divi Cloud.

1. Сначала включите Visual Builder, перейдя на любую страницу в интерфейсе вашего веб-сайта Divi и нажав «Включить Visual Builder» на панели инструментов в верхней части экрана.
2. Щелкните фиолетовый значок плюса на панели инструментов Divi в нижней части страницы, чтобы открыть библиотеку Divi.
3. Щелкните вкладку вверху с надписью «Ваши сохраненные макеты».
4. Затем просмотрите свои элементы Divi Cloud. Установите флажок «My Divi Cloud» в разделе «Местоположения» на левой боковой панели.
5. Найдите макет, который вы хотите продублировать, с помощью поиска, сортировки или фильтрации элементов Divi Cloud. Ищите по ключевым словам или избранным, выбирайте категории и/или теги для их фильтрации или сортируйте их по времени, имени или избранному.
6. Щелкните правой кнопкой мыши макет, который вы хотите продублировать.
7. Выберите «Дублировать» во всплывающем меню.
8. Кроме того, вы можете щелкнуть правой кнопкой мыши предварительный просмотр на экране «Сведения о макете», чтобы открыть пункты меню, и нажать «Дублировать» во всплывающем меню.
9. Откроется модальное окно, где вы можете выбрать детали. Добавьте новое имя в поле «Имя макета». Выберите категории, которые вы хотите для этого макета, или добавьте новые категории. Выберите или добавьте новые теги. Введите название макета, выберите «Сохранить в облаке» и выберите категории и теги. Выберите имена, категории и теги, которые дают понять, что это вариант другого макета.
10. Нажмите зеленую кнопку с галочкой, когда закончите. Макет автоматически сохраняется в вашем Divi Cloud, поэтому вам не нужно сохранять страницу.

Редактировать макет внутри облака

Затем внесите изменения в макет Divi с помощью Divi Visual Builder. Это работает так же, как Visual Builder на любой странице, за исключением сохранения в библиотеке, настроек страницы и переносимости. Редактор уже включен, так что вы можете просто начать вносить изменения.

1. Найдите макет, который хотите изменить, с помощью поиска, сортировки или фильтрации элементов Divi Cloud. Ищите по ключевым словам или избранным, выбирайте категории и/или теги для их фильтрации или сортируйте их по времени, имени или избранному.
2. Щелкните правой кнопкой мыши макет, который хотите отредактировать.
3. Выберите «Редактировать с Divi» во всплывающем меню. Макет откроется в новой вкладке, а не на странице вашего веб-сайта с включенным Visual Builder.
4. Кроме того, вы можете щелкнуть правой кнопкой мыши предварительный просмотр на экране «Сведения о макете», чтобы открыть пункты меню, и нажать «Редактировать с помощью Divi» во всплывающем меню.
5. Просто отредактируйте макет с помощью Divi Builder, как обычно. Добавляйте или настраивайте разделы, строки, столбцы, модули, код и т. д.

Сохраните изменения варианта заголовка в облаке

Наконец, сохраните изменения. Изменения автоматически сохраняются в Divi Cloud.

1. Нажмите «Сохранить элемент облака» в правом нижнем углу макета, чтобы сохранить изменения.
2. Дождитесь сохранения изменений. Изменения сохраняются в самом облаке.
3. Закройте вкладку, когда закончите редактирование. Это не страница вашего веб-сайта, поэтому вам не нужно выходить из Visual Builder.

Окончание мыслей

Это наш взгляд на то, как создавать варианты предметов в вашем Divi Cloud. Divi позволяет легко создавать варианты и хранить их в облаке. Существует несколько способов создания вариаций. Независимо от метода, который вы используете, обязательно создайте описательные имена и используйте категории и теги, которые помогут вам понять вариант с первого взгляда. Divi Cloud — отличный способ хранить несколько вариантов для использования на любом веб-сайте Divi.

Ждем вашего ответа. Создавали ли вы варианты предметов в Divi Cloud? Сообщите нам о своем опыте в комментариях.