Как добавить и анимировать свой логотип SVG внутри глобального заголовка с помощью конструктора тем Divi и Anime.js

Опубликовано: 2020-07-29

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

Давайте перейдем к этому.

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

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

Рабочий стол

svg логотип

Мобильный

svg логотип

Загрузите шаблон глобального заголовка БЕСПЛАТНО

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

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

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

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

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

1. Создайте логотип SVG в Adobe Illustrator и получите код SVG

Откройте Illustrator и создайте новый документ

В первой части этого урока мы создадим простой логотип внутри Adobe Illustrator. Если у вас уже есть собственный логотип SVG, не стесняйтесь его использовать. Кроме того, вы также можете получить доступ к образцу логотипа Illustrator в папке для загрузки выше. Если вы предпочитаете создавать образец логотипа с нуля, начните с добавления нового документа с соотношением сторон 1: 1.

Ширина: 500 пикселей
Высота: 500 пикселей

svg логотип

Добавить круг к существующему слою

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

Заливка: # 0C1019
Инсульт: нет

svg логотип

Создать новый слой и добавить текст логотипа

Далее мы добавим новый слой.

svg логотип

Мы будем использовать этот слой, чтобы добавить текст логотипа.

Шрифт: Montserrat
Плотность шрифта: черный
Размер шрифта: 110pt.

svg логотип

Создание контуров для логотипа

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

svg логотип

Выровнять контуры текста

Мы также убедимся, что контуры текста выровнены по центру.

svg логотип

Экспорт как SVG

Теперь, когда у нас есть все пути, мы можем экспортировать SVG. Для этого наведите указатель мыши на опцию «Файл» вверху, перейдите в «Экспорт» и нажмите «Экспортировать как…».

svg логотип

Получить код SVG

После того, как вы нажали кнопку «Экспорт», вы увидите окно с некоторыми дополнительными параметрами SVG. Там вы сможете скопировать код SVG. Убедитесь, что вы держите SVG под рукой, чтобы использовать его позже в этом руководстве.

svg логотип

2. Начните создание глобального / настраиваемого заголовка в Divi Theme Builder.

Перейдите в Divi Theme Builder и начните создавать глобальный заголовок

Теперь, когда мы прошли первую часть этого руководства, получив SVG-код нашего логотипа, пора перейти на Divi! Мы создадим новый глобальный заголовок, перейдя к построителю тем внутри WordPress Backend.

svg логотип

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

Фоновый цвет

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

Цвет фона: #eaeaea

svg логотип

Интервал

Перейдите на вкладку «Дизайн» и удалите все отступы по умолчанию сверху и снизу.

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

svg логотип

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

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

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

svg логотип

Размеры

Еще не добавляя никаких модулей, откройте настройки строки, перейдите на вкладку дизайна и измените настройки размера следующим образом:

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

svg логотип

Интервал

Удалите также все стандартные верхние и нижние отступы.

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

svg логотип

Главный элемент

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

display: flex;

svg логотип

Столбец 1 Главный элемент

Затем мы убедимся, что структура столбцов (1/4 и 3/4) сохраняется на экранах меньшего размера, добавляя по одной строке кода CSS в каждый столбец отдельно. Начнем с первого.

width: 25% !important;

svg логотип

Столбец 2: главный элемент

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

width: 75% !important;

svg логотип

3. Добавьте логотип SVG (модуль внутреннего кода)

Добавить модуль кода в столбец 1

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

svg логотип

Добавить скопированный код SVG

Структурируйте это

После того, как вы вставили код SVG (см. Часть 1 этого руководства) в модуль кода, он помогает структурировать все, как показано на экране печати ниже. Таким образом, у вас будет четкое представление о различных элементах SVG.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 465 465">
  
<defs>
  
<style>
.cls-1{
fill:#0c1019;  
}

.cls-2{
fill:#fff;
}
</style>
  
</defs>
  
<g id="Layer_1" data-name="Layer 1">
  
<circle class="cls-1" cx="232.5" cy="232.5" r="232.5"/>
  
</g>

<g id="Layer_2" data-name="Layer 2">
  
<path class="cls-2" d="M88,284.1a49.87,49.87,0,0,1-14.9-5.78l8.36-18.92a52.84,52.84,0,0,0,12.32,5.12,48.23,48.23,0,0,0,13.09,1.92c3.59,0,6.16-.34,7.7-1a3.36,3.36,0,0,0,2.31-3.14q0-2.42-3-3.63a66.69,66.69,0,0,0-9.95-2.64A111.94,111.94,0,0,1,89,252a25.32,25.32,0,0,1-10.34-7q-4.41-4.89-4.4-13.25a22.79,22.79,0,0,1,4.07-13.21q4.07-5.94,12.15-9.35t19.64-3.4a71.06,71.06,0,0,1,15.56,1.7,48.59,48.59,0,0,1,13.48,5l-7.81,18.8q-11.34-5.72-21.45-5.72t-10,4.84q0,2.31,3,3.47a62.92,62.92,0,0,0,9.79,2.47,101.06,101.06,0,0,1,14.85,3.8,25.9,25.9,0,0,1,10.5,7q4.46,4.84,4.46,13.2a22.59,22.59,0,0,1-4.07,13.15q-4.08,5.88-12.16,9.35t-19.63,3.46A80.82,80.82,0,0,1,88,284.1Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M204.13,227a27.32,27.32,0,0,1,10.56,11,36.64,36.64,0,0,1,0,32.94,27.42,27.42,0,0,1-10.56,10.89,28.9,28.9,0,0,1-14.57,3.79q-10,0-15.29-5.16v25.41H149.41V224.31h23.65v4.95q5.38-6,16.5-6A28.91,28.91,0,0,1,204.13,227Zm-13.47,36.14q2.75-3.09,2.75-8.69c0-3.75-.92-6.66-2.75-8.75a9.46,9.46,0,0,0-14.08,0c-1.84,2.09-2.75,5-2.75,8.75s.91,6.63,2.75,8.69a9.59,9.59,0,0,0,14.08,0Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M228,215.9a12.05,12.05,0,0,1,0-18.15q4.13-3.57,10.84-3.58t10.88,3.41a11,11,0,0,1,4.08,8.8,12.12,12.12,0,0,1-4.08,9.41q-4.07,3.69-10.88,3.69T228,215.9Zm-1.59,8.41h24.85v60.17H226.41Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M276.29,281.63a30.66,30.66,0,0,1-12.65-11.12,30.79,30.79,0,0,1,0-32.28,30.74,30.74,0,0,1,12.65-11.06,41.08,41.08,0,0,1,18.31-4q11,0,18.81,4.73A24.57,24.57,0,0,1,324.19,241l-19.25,9.46q-3.51-7.92-10.45-7.92a9.65,9.65,0,0,0-7.31,3.08c-1.95,2.06-2.92,4.95-2.92,8.69s1,6.75,2.92,8.81a9.65,9.65,0,0,0,7.31,3.08q6.93,0,10.45-7.93l19.25,9.46a24.49,24.49,0,0,1-10.78,13.09q-7.8,4.74-18.81,4.73A41.21,41.21,0,0,1,276.29,281.63Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M393.05,260.17h-41.8a10.13,10.13,0,0,0,4.4,5.23,15,15,0,0,0,7.7,1.81,19.75,19.75,0,0,0,6.66-1,23.5,23.5,0,0,0,5.88-3.42l13,13.09q-8.79,9.69-26.29,9.68a43.19,43.19,0,0,1-19.14-4,30.43,30.43,0,0,1-12.76-11.17,31.09,31.09,0,0,1-.05-32.17,30.46,30.46,0,0,1,12.21-11.06,40.22,40.22,0,0,1,34.1-.33,28.65,28.65,0,0,1,12,10.67,30.85,30.85,0,0,1,4.45,16.83Q393.38,254.9,393.05,260.17Zm-38.94-17.93a10,10,0,0,0-3.3,5.95h19.36a10.06,10.06,0,0,0-3.3-5.89,9.51,9.51,0,0,0-6.38-2.15A9.72,9.72,0,0,0,354.11,242.24Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M402,281.57a13.75,13.75,0,0,1-4.13-10.29A13.36,13.36,0,0,1,402,261.11a15.8,15.8,0,0,1,20.79,0,13.35,13.35,0,0,1,4.12,10.17,13.74,13.74,0,0,1-4.12,10.29,15.48,15.48,0,0,1-20.79,0Z" transform="translate(-17.5 -17.5)"/>
  
</g>
  
</svg>

svg логотип

Добавление обводки и ширины обводки к элементам в коде CSS

В Illustrator мы использовали только цвета заливки для добавленных элементов. Причина в том, что мы не хотим создавать лишние пути. Код SVG не всегда так предсказуем, как вы думаете, поэтому внесение некоторых изменений в код CSS вручную часто может помочь упростить пути. Чтобы добиться того же результата, что и в превью этого поста, нам нужно добавить обводку к обоим нашим элементам. Для этого мы добавим строки кода CSS к двум классам внутри нашего кода. CSS-класс «cls-1», созданный в AI, обозначает круг, CSS-класс «cls-2» представляет текстовые контуры.

stroke: #0c1019;
stroke-width: 3px;

svg логотип

Уменьшить радиус круга

Поскольку мы добавили дополнительную обводку к нашему кругу, кажется, что круг простирается дальше холста SVG (заметно по бокам), чтобы исправить это, мы просто уменьшим радиус внутри нашего тега круга. Вместо того, чтобы использовать оригинальный «232,5», мы уменьшаем его до «225». Вы можете определить для себя, какое значение вы предпочитаете, осторожно поиграв с этим числом.

r = ”225 ″

svg логотип

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

Размеры

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

Ширина:
- ПК: 25%
- Таблетка: 50%
- Телефон: 80%

svg логотип

Интервал

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

Верхняя набивка: 5%
Нижняя обивка:
- Рабочий стол: -12%
- Таблетка: -20%
- Телефон: -35%

svg логотип

4. Используйте Anime.js для анимации вашего логотипа SVG.

Добавить еще один модуль кода под предыдущим

Наш логотип SVG был добавлен в заголовок Divi! В следующей части этого урока мы анимируем логотип SVG с помощью библиотеки Anime JS. Анимация рисования, которую вы можете увидеть в предварительном просмотре, является одной из самых популярных, но вы можете создавать любые виды анимации с помощью этой библиотеки. Добавьте новый модуль кода прямо под предыдущим.

svg логотип

Добавить аниме-библиотеку

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

src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"

svg логотип

Добавить код анимации временной шкалы аниме

Прямо под ним вам нужно будет добавить код аниме JS между тегами скрипта, как показано на экране печати ниже:

jQuery(function($){
$(document).ready(function(){  
  
anime.timeline({loop: false})

.add({
duration: 2000,
})
.add({
targets: ['path.cls-2', 'circle.cls-1'],
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
duration: 1500,
delay: function(el, i) { return i * 250 },
})
.add({
targets: 'path.cls-2',
duration: 10,
fill: ['rgba(0,0,0,0)', '#fff'],
}) 
.add({
targets: 'circle.cls-1',
duration: 2000,
fill: ['rgba(0,0,0,0)', '#0c1019'],
});

});  
});

Каждая функция «добавить» представляет анимацию на временной шкале анимаций. Вы можете изменять эти «добавляющие» функции по своему усмотрению, добавлять новые или удалять текущие, просто убедитесь, что последняя функция добавления закрыта правильно с помощью ';' в конце (как вы можете видеть в приведенном выше коде). Вы можете добавлять различные свойства CSS внутри этих «добавляющих» функций. Вы можете узнать больше о свойствах и о том, как они используются, в примерах документации anime.js.

svg логотип

5. Добавьте модуль меню в столбец 2.

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

svg логотип

Выберите меню

Выберите меню по вашему выбору.

svg логотип

Удалить цвет фона

Затем удалите цвет фона по умолчанию.

svg логотип

Настройки текста меню

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

Цвет текста меню: # 000000
Размер текста меню:
- Рабочий стол: 0,7 МВт
- Таблетка: 2.2vw
- Телефон: 3vw
Выравнивание текста: вправо

svg логотип

Параметры текста раскрывающегося меню

Также измените цвет строки раскрывающегося меню.

Цвет строки раскрывающегося меню: #ffffff

svg логотип

Настройки значков

Вместе с цветом значка гамбургерного меню.

Цвет значка меню гамбургера: # 0c1019

svg логотип

Размеры

Затем перейдите к настройкам размера и убедитесь, что ширина равна «100%».

Ширина: 100%

svg логотип

Позиция

Завершите настройки модуля, переместив модуль на вкладке «Дополнительно».

Позиция: Абсолютная
Расположение: в центре справа

svg логотип

6. Сохраните все изменения в построителе тем.

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

svg логотип

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

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

Рабочий стол

svg логотип

Мобильный

svg логотип

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

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

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