Маркировка углов изображения в потрясающей сетке галереи с Divi

Ищете уникальный и красивый способ отображения изображений в галерее на вашем веб-сайте? Если да, то мы уверены, что вам понравится этот пост. Мы собираемся показать вам, как обрезать углы изображения с помощью текстовых модулей в рамках красивого дизайна, который остается на 100% отзывчивым на всех размерах экрана. Это отличный способ добавить пронумерованные метки к вашим изображениям, сохранив при этом потрясающий дизайн. Вы также сможете бесплатно скачать файл JSON с примером дизайна.

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

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

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

Скачать макет раздела галереи БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

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

Начнем воссоздавать

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

Интервал

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

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Добавить новую строку

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

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

Фоновый цвет

Затем добавьте белый цвет фона.

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

Размеры

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

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

Интервал

Продолжите, удалив все отступы по умолчанию сверху и снизу.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Столбец 1, 2, 3 и 4 Главный элемент

Теперь, чтобы убедиться, что структура из 4 столбцов сохраняется для всех размеров экрана, мы собираемся убедиться, что каждый из столбцов сохраняет свою ширину 25%, добавив следующую строку кода CSS к каждому основному элементу столбца индивидуально:

width: 25% !important;

Добавить модуль изображения в столбец 1

Загрузить 1: 1 изображение

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

Лайтбокс

Затем включите опцию лайтбокса в настройках ссылки.

• Открыть в лайтбоксе: Да

Размеры

Чтобы изображение оставалось отзывчивым на всех размерах экрана, мы также включим опцию «Force Fullwidth».

• Принудительная полная ширина: Да

Фильтры по умолчанию

Также меняем яркость.

• Яркость: 50%

Фильтры при наведении

И мы вернем его к «100%» при наведении курсора.

• Яркость: 100%

Индекс Z по умолчанию

Перейдите к настройкам видимости и убедитесь, что индекс Z остается равным «0» в своем состоянии по умолчанию.

• Индекс Z: 0

Индекс наведения Z

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

• Индекс Z: 100

Клонировать модуль изображения 3 раза и разместить в оставшихся столбцах

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

Изменить изображения

Меняет изображения в дубликатах.

Добавить верхнее поле к модулю изображения в столбце 2

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

• Верхняя маржа: 24,7vw

Добавить текстовый модуль под модулем изображения №1

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

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

Фоновый цвет

Затем измените цвет фона. Этот цвет должен соответствовать цвету фона, который вы назначили строке.

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

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

Перейдите на вкладку дизайна и измените настройки текста.

• Шрифт текста: Lora
• Выравнивание текста: вправо
• Цвет текста: # 000000
• Размер текста: 3vw
• Высота текстовой строки: 3vw

Размеры

Мы также уменьшаем ширину модуля.

• Ширина: 7vw

Интервал

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

• Верхняя набивка: 0,5 Вт
• Нижняя обивка: 2,5 ВВт
• Правое заполнение: 0.9vw

Индекс Z

И увеличьте индекс Z.

• Индекс Z: 99

Клонировать текстовый модуль 3 раза

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

Позиционирование

Разместите дубликаты соответственно:

Настроить текстовые модули

Текстовый модуль №1

Отрицательная максимальная маржа

Пора приступить к настройке различных текстовых модулей в соответствии с их положением! Откройте текстовый модуль в столбце 1 и добавьте отрицательное верхнее поле.

• Верхняя маржа: -5.9vw

Коробка Тень

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

• Положение тени коробки по горизонтали: 7vw
• Положение прямоугольной тени по вертикали: 5.9vw
• Сила распространения тени коробки: 0 пикселей
• Цвет тени: rgba (35,50,255,0.94)

Текстовый модуль # 2

Изменить нумерацию

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

Выравнивание текста

Также измените выравнивание текста.

• Выравнивание текста: по левому краю

Выравнивание модуля

И измените выравнивание модуля в настройках размеров.

• Выравнивание модуля: справа

Интервал

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

• Верхняя маржа: -6vw
• Левое заполнение: 0.9vw

Коробка Тень

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

• Положение тени коробки по горизонтали: 7vw
• Позиция тени коробки по вертикали: -6vw
• Сила распространения тени коробки: 0 пикселей
• Цвет тени: #ededed

Текстовый модуль # 3

Изменить нумерацию

Переходим к текстовому модулю в столбце 3! Измените номер в поле содержимого.

Отрицательная максимальная маржа

Перейдите на вкладку дизайна и добавьте отрицательное верхнее поле.

• Верхняя маржа: -6vw

Коробка Тень

Также используйте тень коробки.

• Положение тени коробки по горизонтали: -7vw
• Положение тени коробки по вертикали: -6vw
• Сила распространения тени коробки: 0 пикселей
• Цвет тени: # ff2323

Текстовый модуль # 4

Изменить нумерацию

Переходим к следующему и последнему текстовому модулю. Здесь также измените номер.

Выравнивание текста

Затем измените выравнивание текста.

• Выравнивание текста: по левому краю

Выравнивание модуля

Измените также выравнивание модуля в настройках размеров.

• Выравнивание модуля: справа

Изменить интервал

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

• Верхняя маржа: 24,7vw
• Нижняя маржа: -6vw
• Левое заполнение: 0.9vw

Коробка Тень

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

• Положение тени коробки по горизонтали: -7vw
• Положение тени коробки по вертикали: -5.9vw
• Сила распространения тени коробки: 0 пикселей
• Цвет тени: # 000000

Клонировать всю строку

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

Изменить нумерацию и изображения

Убедитесь, что вы изменили все изображения и числа, и все готово!

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

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

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

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

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