Простые и креативные способы отображения логотипов компании в Divi

Есть много причин для размещения логотипов компаний на вашем сайте. Раздел логотипов компании «В избранном» может иметь значение для потенциальных инвесторов или партнеров. Или раздел «Наши клиенты включают» может предоставить посетителям ценное социальное доказательство. Но какой бы ни была причина, важно знать, как добавить эти логотипы на свой сайт. В этом уроке я собираюсь рассмотреть три различных метода добавления логотипов компании на ваш сайт с помощью Divi. Я даже покажу вам, как добавить галереи логотипов в любой модуль Divi!

Вот что будет рассмотрено в этом руководстве:

• Подготовка изображений вашего логотипа
• Использование модуля Divi Gallery для отображения логотипов простым перетаскиванием
• Использование встроенной галереи WordPress для отображения логотипов
• Использование Divi Builder для создания пользовательского макета для логотипов

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

Sneak Peek

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

Подготовка изображений логотипа

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

Поскольку каждый логотип имеет уникальный размер, практически невозможно сделать их все точными. Вот тут-то и пригодится фоторедактор. Например, с помощью Photoshop вы можете создать новый файл и установить размеры документа на любой размер, который вы хотите, чтобы все изображения вашего логотипа были (в данном случае 226 пикселей на 100 пикселей).

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

Затем экспортируйте изображение как файл png, чтобы сохранить прозрачный фон.

Затем повторите процесс для остальных логотипов.

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

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

# 1 Использование модуля Divi Gallery для отображения логотипов компаний (простое перетаскивание)

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

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

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

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

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

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

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

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

Ширина границы изображения: 1 пикс.
Цвет границы изображения: #dddddd
Image Box Shadow: см. Снимок экрана

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

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

# 2 Использование встроенной галереи WordPress для отображения логотипов компаний (с любым модулем Divi)

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

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

В Divi Builder создайте новый раздел со структурой столбцов 1/4/3/3.

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

Содержание: «Как показано в»
Шрифт текста: Монтсеррат
Толщина шрифта текста: полужирный
Размер текста текста: 26 пикселей
Ориентация текста: по центру

Теперь добавьте еще один текстовый модуль в правый столбец. На вкладке содержимого удалите имитацию содержимого и нажмите кнопку «Добавить мультимедиа» в верхней части окна редактора содержимого.

Появится всплывающее окно Media Gallery. Затем щелкните ссылку «Создать галерею» слева от всплывающего окна. Затем выберите изображения логотипов, которые вы хотите включить в галерею (в этом примере я использую восемь изображений). Нажмите кнопку «Создать галерею».

Во всплывающем окне появится страница редактирования галереи. Обновите настройки галереи на правой боковой панели следующим образом:

Ссылка на: Нет
Столбцы: 8 (это должно равняться количеству изображений в галерее, чтобы они оставались на одной строке)
Размер: полный размер

Затем нажмите кнопку «Создать новую галерею».

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

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

Сделать эту строку полной шириной: ДА
Использовать нестандартную ширину желоба: ДА
Ширина желоба: 1
Выровнять высоту столбца: ДА

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

align-items: center;

Этот CSS работает, потому что мы установили для параметра «Выровнять высоту столбца» значение «YES», тем самым активировав свойство «display: flex» для строки. Чтобы узнать больше об этом, узнайте, как вертикально выровнять контент в Divi.

И чтобы убрать серую границу вокруг наших изображений, нам нужно добавить следующий фрагмент CSS в настройки нашей страницы:

.gallery img {
border: none !important;
}

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

Вот он с черным фоном, добавленным к строке.

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

Встраивайте галереи логотипов в любой модуль Divi

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

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

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

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

# 3 Использование Divi Builder для создания индивидуального макета для логотипов компании

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

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

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

Прежде чем мы начнем добавлять что-либо в наши столбцы, перейдите к настройкам строки и обновите следующее:

Специальная ширина: 90%
Ширина желоба: 1
Выровнять высоту столбца: ДА

Пользовательское заполнение: 4vw сверху, 4vw снизу

Сохранить настройки.

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

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

Столбец 1: 1 логотип
Колонка 2: 2 логотипа.
Колонка 3: 3 логотипа.
Колонка 4: 3 логотипа.
Колонка 5: 2 логотипа.
Столбец 6: 1 логотип

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

align-items: center;

Как видите, это создает округлый макет для логотипов.

Но для этого макета я собираюсь выровнять модули по нижней части ряда. Поэтому замените фрагмент «align-items: center» следующим:

align-items: flex-end;

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

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

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

Стиль верхнего делителя: см. Снимок экрана
Цвет верхнего разделителя: rgba (255,255,255,0,03)
Высота верхнего разделителя: 13vw
Переворот верхнего делителя: вертикальный

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

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

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

Цвет фона: # 2a3443

Стиль нижнего разделителя: см. Снимок экрана
Цвет нижнего разделителя: rgba (238,238,238,0.09)
Высота нижнего разделителя: 13vw

Пользовательский отступ: 0 пикселей внизу

Теперь сохраните ваши настройки и добавьте текстовый модуль в строку и обновите следующее:

Для содержания добавьте следующее:

<h2>As Featured In</h2>

Шрифт заголовка 2: Montserrat
Толщина шрифта заголовка 2: полужирный
Выравнивание текста заголовка 2: по центру
Цвет текста заголовка 2: #ffffff
Размер текста заголовка 2: 32 пикселя

Пользовательское поле: внизу 0 пикселей

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

Выравнивание изображения: по центру
Пользовательское поле: -75 пикселей

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

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

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

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

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