Как превратить макеты Divi в многоразовые каркасы

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

На этой неделе, в рамках нашей текущей инициативы по дизайну Divi, мы собираемся показать вам, как превратить макеты в многоразовые каркасы с помощью пакета макетов Divi Food Catering Layout Pack. Каркасные модели отлично подходят для начала процесса создания веб-сайта. Они помогают вам определиться с общей структурой и стилем дизайна веб-сайта. Они также могут помочь узнать мнение клиента о стиле дизайна, не настраивая все заранее.

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

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

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

Превратить макет в каркас

Открытие целевой страницы Food Catering с помощью Visual Builder

Идите вперед и откройте целевую страницу, которую вы создали с помощью пакета макетов Divi's Food Catering Layout Pack.

Удаление фоновых изображений раздела и полноразмерного заголовка, цвета фона и градиентного фона

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

Вместо этого придайте чередующимся секциям серый цвет фона

Чтобы помочь определить различные разделы в дизайне вашей страницы, дайте каждому из чередующихся разделов цвет фона «# f9f9fb». Позже, когда вы будете использовать каркас для создания страницы, вы сможете использовать функцию «Найти и заменить», чтобы легко добавить цветовую палитру на свою страницу.

Удалите весь цвет в элементах дизайна с помощью фильтра измененных стилей

Включить фильтр измененных стилей в кнопочном модуле

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

Придайте модулю кнопок темный фон и цвет границы

Измените цвет фона кнопки и цвет границы кнопки на «# 2b2b2b».

Копирование стилей кнопок и применение к другим кнопкам

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

Удалите лишние настройки дизайна (например, тень коробки)

Удалить тень блока кнопок

Мы также удаляем дополнительные элементы, такие как Box Shadow. Откройте тот же кнопочный модуль, над которым вы работали, и полностью удалите тень блока.

Копировать настройки теней окна модуля кнопки

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

Удалить тень коробки вручную в разделе "Герои и контакты"

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

Присвойте выделенному разделу тот же цвет фона, что и призывы к действию

Затем прокрутите вниз, пока не найдете «выделенный» раздел. Здесь используйте цвет фона раздела "# 2b2b2b". Тот же цвет был использован для призывов к действию.

Определите размеры изображения

Перейти в медиа-библиотеку

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

Открывать использованные изображения по отдельности

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

Запишите разные размеры изображений на странице

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

Создание заполнителей с размерами

Откройте Photoshop

Пришло время создать заполнители! Откройте Photoshop или любую другую программу для редактирования изображений.

Создание новых проектов для измерений

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

• 800 х 1029
• 400 х 400
• 48 х 48

Выберите серый цвет

Выберите цвет "# e7e8ed".

Разблокировать фоновый слой

Также разблокируйте фоновый слой.

Выберите инструмент «Заливка» и добавьте цвет на слой.

Затем с помощью инструмента «Заливка» раскрасьте холст в серый цвет.

Добавить текст с размерами

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

Сохранить для Интернета

Когда вы закончите, сохраните заполнитель изображения для Интернета.

Повторите для каждого размера изображения на странице

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

• 800 x 1029 (раздел о нас
• 400 x 400 (раздел галереи)
• 48 x 48 (иконки)

Заменить изображения заполнителями

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

Создание многоразового каркаса

Создание каркасной карты на компьютере

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

Макет снимка экрана и локальное сохранение

Затем используйте выбранную надстройку / расширение для захвата экрана, чтобы сделать снимок своей страницы. На изображениях ниже мы использовали надстройку FireShot для Mozilla Firefox. Убедитесь, что при сохранении скриншота вы дали ему правильное имя.

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

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

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

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

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

Поиграйте с типографикой

Включить поиск и замену шрифта заголовка

Или вы также можете поиграть с типографикой. Откройте модуль заголовка Fullwidth в разделе вашего героя и щелкните правой кнопкой мыши шрифт заголовка. Продолжите, включив функцию «Найти и заменить».

Изменить шрифт

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

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

Щелкните значок «Добавить в библиотеку».

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

Добавить новую категорию и дать элементу дизайна имя

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

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

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

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

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