6 уникальных дизайнов границ для изображений модуля Divi Gallery

Опубликовано: 2019-02-28

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

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

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

Sneak Peek

# 1 Галерея изображений Polaroid

Начать проектирование здания №1

# 2 Чистая сетка

Начать проектирование здания №2

# 3 Пользовательское фоновое изображение для всей галереи

Начать проектирование здания # 3

# 4 Пользовательское фоновое изображение за каждым элементом галереи

Начать проектирование здания №4

# 5 Box Shadow и Border Combo

Начать проектирование здания №5

# 6 Дизайн границы кинопленки

Начать проектирование здания №6

Что вам нужно для начала

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

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

Настройка вашей новой страницы

Для начала вам нужно будет создать новую страницу, дать ей название и развернуть Divi Builder. Выберите вариант «Создать с нуля», а затем опубликуйте свою страницу. Затем нажмите, чтобы построить переднюю часть.

Сохранение шаблона модуля галереи Divi

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

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

Divi заполнит модуль галереи некоторыми изображениями из вашей медиа-галереи в виде сетки, как показано ниже:

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

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

Количество изображений: 12
Показать заголовок и подпись: НЕТ
Показать разбиение на страницы: НЕТ

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

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

Вот и все. А теперь перейдем к рамкам!

# 1 Галерея изображений Polaroid

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

Вот как это сделать.

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

Создайте новый обычный раздел со строкой из одного столбца. Затем добавьте сохраненный шаблон модуля галереи Divi из библиотеки (объяснено выше). Перед редактированием модуля Галерея откройте настройки раздела и добавьте серый цвет фона, чтобы наши белые границы немного выделялись.

Справочная информация: #dddddd

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

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

Ширина желоба: 1

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

Настройки модуля галереи

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

Показать заголовок и подпись: ДА

Толщина шрифта заголовка: полужирный
Стиль шрифта заголовка: TT
Выравнивание текста заголовка: по центру
Высота строки заголовка: 2em

Ширина верхней границы изображения: 10 пикселей
Цвет верхней границы изображения: #ffffff
Ширина левой границы изображения: 10 пикселей
Цвет левой границы изображения: #ffffff
Ширина правой границы изображения: 10 пикселей
Цвет правой границы изображения: #ffffff

Чтобы создать интервал между нашими изображениями, добавьте следующую границу к элементам галереи:

Ширина границы: 10 пикселей
Цвет границы: #dddddd (соответствует цвету фона раздела)

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

Цвет фона: #ffffff

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

Вот окончательный результат дизайна границы поляроид.

# 2 Чистая сетка

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

Вот как это сделать.

Создайте новый обычный раздел со строкой из одного столбца. Затем добавьте сохраненный шаблон модуля галереи Divi из библиотеки (объяснено выше).

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

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

Ширина желоба: 1
Пользовательский отступ: 0 пикселей сверху, 0 пикселей снизу.
Ширина границы: 10 пикселей
Цвет границы: #dddddd

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

Настройки модуля галереи

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

Ширина границы изображения: 20 пикселей
Цвет границы изображения: #ffffff

Ширина границы: 10 пикселей
Цвет границы: прозрачный (это важно для отображения цвета фона)

Теперь добавьте цвет фона в модуль галереи, чтобы завершить дизайн.

Цвет фона: #dddddd (соответствует цвету границы строки)

Поскольку граница вашего элемента галереи прозрачна, она наследует цвет фона.

Окончательный дизайн

Изменение цвета границы путем изменения цвета фона

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

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

Теперь вы можете настроить цвет фона по своему усмотрению:

# 3 Пользовательское фоновое изображение для всей галереи

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

Вот как это сделать.

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

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

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

Настройки модуля галереи

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

Фоновое изображение: [добавить изображение] (вы пока не сможете его увидеть)
Цвет фона: #dddddd (отображается только в том случае, если вы используете фоновое изображение в формате png с прозрачностью)
Ширина границы изображения: 10 пикселей
Цвет границы изображения: #ffffff

Ширина границы (для модуля): 10 пикселей
Цвет границы: #ffffff

Затем добавьте следующий настраиваемый CSS в элемент галереи:

padding: 3%;

Это создает разделение между элементами галереи для завершения дизайна.

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

# 4 Пользовательское фоновое изображение за каждым элементом галереи

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

Вот как это сделать.

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

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

Сделать эту строку полной шириной: ДА
Ширина желоба: 2

Настройки модуля галереи

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

Ширина границы изображения: 10 пикселей
Цвет границы изображения: #ffffff

Затем добавьте следующий настраиваемый CSS в элемент галереи:

padding: 30px;
background-image: url(&quot;&quot;);
background-size: contain;
background-repeat: no-repeat;
background-position: right;

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

Теперь вернитесь и откройте настройки модуля галереи и вставьте URL-адрес в настраиваемый CSS, где говорится «вставьте здесь URL-адрес изображения». Убедитесь, что вы сохранили URL-адрес внутри цитат.

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

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

# 5 Box Shadow и Border Combo

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

Вот как это сделать.

Добавить границу изображения и тень блока

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

Ширина границы изображения: 10 пикселей
Цвет границы изображения: #ffffff

Image Box Shadow: см. Снимок экрана
Горизонтальное положение тени блока: -30 пикселей
Вертикальное положение тени блока: -30 пикселей
Сила распространения тени коробки: -10 пикселей
Цвет тени: # e08474

Добавить границу элемента галереи

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

Ширина правой границы: 7 пикселей
Цвет правой границы: #dddddd
Стиль правой границы: пунктирная
Ширина нижней границы: 7 пикселей
Цвет нижней границы: #dddddd
Стиль нижней границы: пунктирная

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

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

Чтобы дать вашему дизайну больше места, откройте настройки строки и обновите следующее:

Сделать ряд на полную ширину: ДА

Окончательный дизайн

Вот окончательный дизайн.

# 6: Дизайн границы кинопленки

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

Вот как это сделать.

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

Перед редактированием модуля Галерея откройте настройки строки и измените ширину желоба на 1.

Ширина желоба: 1

Это позволит избавиться от стандартного расстояния между полями между изображениями.

Настройки модуля галереи

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

Добавить пунктирные границы изображения

Ширина правой границы изображения: 8 пикселей
Цвет правой границы изображения: #dddddd
Стиль правой границы изображения: штриховая
Ширина левой границы изображения: 8 пикселей
Цвет левой границы изображения: #dddddd
Стиль левой границы изображения: штриховая

Добавить границу элемента галереи для интервала

Ширина левой границы: 20 пикселей
Цвет левой границы: #ffffff
Ширина правой границы: 20 пикселей
Цвет правой границы: #ffffff

Добавить тень изображения

Image Box Shadow: см. Снимок экрана
Сила размытия тени коробки: 0 пикселей
Сила распространения тени коробки: -10 пикселей
Цвет тени: # 222222

Добавить цвет фона

Цвет фона: # 222222

Затем добавьте следующий настраиваемый CSS в элемент галереи:

padding: 5px 10px;

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

А теперь посмотрите на результат.

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

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

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

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