Оптимизация изображения логотипа вашего сайта Divi с помощью глобальных предустановок
Опубликовано: 2020-09-25Оптимизация логотипа вашего сайта в Divi - важная часть дизайна вашего сайта. Но это не обязательно должно быть загадочное или устрашающее предприятие. Фактически, Divi делает это довольно простым с помощью Divi Theme Builder и всех доступных встроенных вариантов дизайна.
В этом уроке мы покажем вам, как оптимизировать ваши логотипы с правильным размером, положением и стилем в Divi. Затем мы покажем вам, как сохранить эти дизайны в качестве глобальных предустановок, которые вы можете использовать для будущих разработок.
Давайте прыгнем!
Загрузите макет предустановок изображения логотипа БЕСПЛАТНО
Чтобы получить доступ к дизайну из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.
Скачать бесплатно
Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.
Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!
Чтобы использовать этот макет изображения логотипа в вашем глобальном заголовке, вы должны сначала импортировать его в библиотеку Divi следующим образом:
- Перейдите в Divi> Divi Library.
- Нажмите кнопку импорта / экспорта вверху страницы.
- Выберите вкладку Импорт во всплывающем окне переносимости.
- Выберите предустановки для импорта
- Нажмите кнопку импорта
Затем перейдите в конструктор тем и отредактируйте глобальный заголовок. Добавьте модуль изображения там, где вы хотите, чтобы логотип был, и используйте предустановки для стилизации и размещения логотипа соответствующим образом.
Размеры логотипа
Прежде чем мы перейдем к оптимизации изображения логотипа с помощью Divi, важно подумать об оптимизации размера изображения логотипа перед его загрузкой в модуль изображения. Вы не хотите загружать изображение логотипа с разрешением 1920 на 1080 пикселей на свой сайт, если вы планируете отображать этот логотип размером 100 на 50 пикселей. Конечно, есть способы изменить размер изображения логотипа постфактум (например, srcset и плагины оптимизации изображения). Но это не лучшая практика, поскольку это может привести к замедлению загрузки страницы. И, давайте посмотрим правде в глаза, ваш логотип слишком важен, чтобы довольствоваться беспорядочными ярлыками.
Вот список распространенных размеров изображений логотипов, которые следует учитывать:
Для горизонтального расположения:
- 250 пикселей x 150 пикселей
- 350 пикселей x 75 пикселей
- 400 x 100 пикселей
Для вертикальной (квадратной) компоновки:
- 160 x 160 пикселей (большое)
- 60 x 60 пикселей (маленький)
Возможно, вам понадобится логотип большего размера, чем вы думаете.
Обычно требуется логотип меньшего размера на рабочем столе и логотип большего размера на планшете (или даже телефоне). В Divi макеты столбцов обычно объединяются в макет с одним столбцом на дисплеях планшетов и телефонов. И поскольку ширина браузера планшета обычно имеет максимальную ширину 980 пикселей, что является гораздо большим контейнером для вашего логотипа, чем, возможно, на рабочем столе. Поэтому вам может потребоваться выбрать больший размер логотипа и отрегулировать максимальную высоту или ширину в соответствии с устройством. Если вы загружаете логотип меньшего размера, чем вам нужно на планшете, вы не можете увеличить размер без ущерба для четкости изображения. Короче говоря, убедитесь, что размер логотипа соответствует максимальному размеру экрана при любой ширине браузера.
Оптимизация размера и положения логотипа вашего сайта Divi с помощью глобальных предустановок
Редактирование логотипа глобального заголовка
Для начала перейдите к Divi Theme Builder, выбрав Divi> Theme Builder. Затем щелкните, чтобы создать новый глобальный заголовок в шаблоне веб-сайта по умолчанию.
Затем выберите вариант «Строить с нуля».
В этом руководстве мы собираемся оптимизировать логотип, включенный в настраиваемый глобальный заголовок, с помощью Divi Theme Builder. Вы можете использовать существующий дизайн заголовка или импортировать один из наших готовых глобальных шаблонов заголовка (и нижнего колонтитула) из нашего блога. Чтобы не усложнять задачу, мы собираемся создать действительно простой макет заголовка с логотипом и меню.
Добавить макет строки и столбца
В редакторе макета глобального заголовка добавьте одну четвертую три четвертых строки столбца.
В правом столбце добавьте модуль изображения в качестве заполнителя, чтобы помочь нам визуализировать размещение логотипа в заголовке.
Добавьте модуль изображения для отображения изображения логотипа
Добавьте модуль изображения в левый столбец.
Использование модуля изображения для логотипов
Для более традиционных дизайнов заголовков вы можете воспользоваться модулем меню Divi для отображения вашего логотипа. Однако с возможностями динамического контента Divi вы можете отображать логотип своего сайта, используя любое количество модулей Divi. По сути, вы можете отображать свой логотип везде, где вы можете отображать изображение в Divi. Например, вы можете выбрать отображение логотипа сайта на изображении модуля аннотации или даже в качестве фонового изображения, если хотите. В этом уроке мы сосредоточимся на использовании модуля изображений для отображения логотипа сайта. Это позволяет логотипу быть полностью отдельным элементом (не связанным с другими элементами в модуле, такими как модуль меню или модуль рекламного сообщения). Кроме того, модуль изображений создан для стилизации изображений, что дает нам множество дополнительных вариантов дизайна для стилизации изображения нашего логотипа. Перейдите в конец статьи, чтобы узнать больше о том, как добавить логотип сайта в качестве динамического изображения.
Поскольку мы собираемся протестировать несколько разных размеров изображений логотипов, мы собираемся использовать обычные изображения для наших примеров вместо динамического логотипа сайта.
Пример 1: Создание глобального шаблона логотипа с выравниванием по левому краю
В этом первом примере мы собираемся создать простую предустановку для выровненного по левому краю логотипа размером 60 пикселей на 60 пикселей.
Откройте настройки модуля изображения и загрузите изображение логотипа 60 на 60 пикселей в модуль изображения.
Обновите настройки дизайна изображения следующим образом:
- Выравнивание изображения: по центру
- Максимальная ширина: 60 пикселей
- Выравнивание модуля (рабочий стол): влево
- Выравнивание модуля (планшет и телефон): по центру
Несмотря на то, что это дизайн логотипа с выравниванием по левому краю, выравнивание изображения установлено по центру, поскольку выравнивание изображения отличается от выравнивания модуля. Выравнивание изображения выполняется по центру модуля. А поскольку максимальная ширина модуля составляет 60 пикселей, выравнивание изображения действительно не имеет значения, потому что теперь выравнивание модуля будет определять выравнивание изображения логотипа.
Это полезно, если вы когда-нибудь захотите добавить фоновое изображение к логотипу или сделать контейнер скругленным. По сути, это делает контейнер изображения логотипа такого же размера, как и само изображение логотипа.
Обратите внимание, что выравнивание модуля на планшете изменено так, чтобы оно располагалось по центру, поскольку на мобильном устройстве столбцы складываются.
Создать новый пресет из текущих стилей
Теперь, когда дизайн логотипа завершен, вы можете создать глобальную предустановку для модуля изображения, щелкнув раскрывающийся список предустановок и выбрав «Создать новую предустановку из текущих стилей».
Дайте предустановке изображения логотипа уникальное имя. В этом случае мы можем дать ему имя «Logo Left (60px на 60px)», чтобы мы точно знали, какой размер изображения использовать и как логотип будет выровнен при выборе использования предустановки.
Пример 2: Создание глобального шаблона логотипа с выравниванием по правому краю
В следующем примере мы собираемся создать глобальный пресет логотипа с выравниванием по правому краю. Это будет легко сделать с нашим текущим дизайном и готовыми настройками. Просто измените макет столбца на три четверти одной четвертой, переместите меню в левый столбец и переместите логотип в правый столбец.
Откройте настройки для модуля изображения, содержащего только что созданный пресет изображения логотипа.
Затем обновите настройки дизайна, чтобы изменить выравнивание модуля вправо.
Достаточно просто. N0w щелкните раскрывающееся меню предустановок и создайте новую предустановку из текущих стилей.
Дайте пресету название «Logo Right (60px на 60px)».
Пример 3: Создание глобального пресета центрированного логотипа
В следующем примере мы собираемся создать глобальный пресет с центрированным логотипом. Поскольку это центрированный логотип, в нашем примере мы можем использовать более крупный логотип.
Во-первых, измените макет столбца на структуру 0ne-четвертая половина одной четвертой, чтобы у вас был столбец большего размера посередине для логотипа. Затем переместите логотип в центральную колонку.
Загрузите новый логотип размером 250 на 150 пикселей.
На вкладке дизайна обновите следующее:
- Максимальная ширина: 250 пикселей
- Выравнивание модуля: по центру
Затем добавьте новый глобальный пресет из текущих стилей.
Назовите его Logo Center (250 на 150 пикселей).
Пример 4: Создание глобального шаблона настроек большого логотипа с выравниванием по левому краю
В следующем примере мы собираемся создать предустановку для более крупного логотипа с выравниванием по левому краю (400 на 100 пикселей).
Поскольку логотип будет иметь ширину 400 пикселей, нам нужна структура столбцов, которая предоставит логотипу необходимое пространство.
Вернемся к двухколоночной структуре с логотипом слева и меню справа. Однако давайте изменим структуру на одну треть двух третей.
Это даст нам столбец шириной примерно 320 пикселей, если мы сохраним максимальную ширину строки по умолчанию 1080 пикселей.
Откройте настройки модуля изображения и добавьте изображение логотипа размером 400 на 100 пикселей.
На вкладке дизайна обновите следующее:
- Максимальная ширина: 400 пикселей
- Выравнивание модуля (рабочий стол): слева
- Выравнивание модуля (планшет): по центру
Как я уже упоминал, максимальная ширина столбца составляет 320 пикселей, что означает, что изображение логотипа не сможет охватить всю ширину на рабочем столе. Однако это можно будет сделать на планшете после того, как столбцы будут сложены в стопку. По этой причине мы хотим установить максимальную ширину изображения на 400 пикселей.
Теперь логотип на планшете немного больше, а также расположен по центру.
Затем добавьте новый глобальный пресет из текущих стилей.
Дайте ему имя «Logo Left (400px на 100px)» и сохраните пресет.
Пример 5: Создание логотипа с выравниванием по левому краю с помощью глобальной предустановки эффектов наведения
В этом последнем примере мы собираемся добавить некоторые эффекты наведения к выровненному по левому краю логотипу и сохранить его как новый глобальный пресет.
Обычно люди ссылаются на свой логотип на главную страницу. Добавление эффекта наведения может улучшить UX, сделав его кликабельность более очевидной.
В этом примере мы собираемся использовать изображение логотипа 60 на 60 пикселей с предустановкой «Логотип слева (60 на 60 пикселей)». Откройте настройки изображения и выберите предустановку из списка.
Теперь мы можем настроить пресет с некоторыми стилями эффекта наведения, прежде чем сохранять его как новый пресет.
Обновите следующее:
- Закругленные углы: 50%
- Box Shadow: см. Снимок экрана
- Горизонтальное положение тени блока: 0 пикселей
- Вертикальное положение тени блока: 0 пикселей (рабочий стол) 5 пикселей (при наведении)
- Цвет тени: # ac3cf7
Затем добавьте следующее вращение трансформации при наведении курсора:
- Преобразование, поворот оси Z (при наведении): 90 градусов
Затем создайте новый пресет из текущих стилей и назовите его «Logo Left w / Hover (60px на 60px)».
Вот результат.
Добавление динамического логотипа сайта в модуль изображения
Чтобы динамически добавить логотип вашего сайта в модуль изображения, сначала вам необходимо убедиться и загрузить логотип сайта в разделе «Параметры темы Divi».
Помните о размере логотипа, который вы выбираете.
Затем перейдите к модулю изображения с вашим глобальным пресетом и откройте настройки. Удалите текущее изображение, а затем щелкните значок динамического содержимого. В раскрывающемся списке выберите Логотип сайта.
Теперь ваш модуль изображений будет динамически вытягивать логотип вашего сайта.
Не забудьте также добавить к логотипу ссылку на динамическую домашнюю страницу.
Последние мысли
Надеюсь, это руководство поможет упростить процесс добавления логотипов в заголовки Divi. Он начинается с оптимизации размера вашего логотипа, прежде чем вы даже загрузите его в тему Divi. Затем вы можете использовать встроенные настройки дизайна Divi, чтобы настроить размер и положение изображения для различных макетов столбцов и различных устройств.
Конечно, для каждого веб-сайта потребуется свой уникальный стиль, некоторые из которых будут выходить за рамки рекомендаций, изложенных в этих примерах. Но я уверен, что с помощью нескольких настроек вы с легкостью сможете создавать новые пресеты для любого уникального макета!
Я с нетерпением жду вашего ответа в комментариях.
Ваше здоровье!