Cómo agregar y animar un logotipo SVG con Anime.js de Divi

Su logotipo es una parte central de la identidad de su marca. Es por eso que casi siempre se incluye en cualquier encabezado de sitio web con el que te encuentres. Al agregar un logotipo a su encabezado, puede optar por cargar un archivo PNG o optar por una integración SVG. Para un enfoque más personalizado, también puede animar su logotipo SVG. Eso es exactamente lo que te mostraremos en esta publicación. Primero le mostraremos cómo agregarlo a su encabezado global creado por Divi, y luego animarlo usando la biblioteca Anime JS . Usaremos un diseño simple para nuestro ejemplo, pero una vez que obtenga el enfoque, ¡puede animar cualquier logotipo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

1. Cree un logotipo SVG en Adobe Illustrator y obtenga un código SVG

Abra Illustrator y cree un documento nuevo

En la primera parte de este tutorial, crearemos un logotipo simple dentro de Adobe Illustrator. Si ya tiene un logotipo SVG propio, no dude en usarlo. Alternativamente, también puede acceder al archivo de muestra del logotipo de Illustrator en la carpeta de descarga de arriba. Si prefiere crear la muestra del logotipo desde cero, comience agregando un nuevo documento con una proporción de 1: 1.

• Ancho: 500px
• Alto: 500px

Agregar círculo a la capa existente

El primer elemento que agregaremos es un círculo. Usaremos un color de relleno que coincida con la paleta de colores del Spice Shop Layout Pack. También nos aseguraremos de que el círculo esté alineado centralmente dentro de nuestro lienzo.

• Rellenar: # 0C1019
• Accidente cerebrovascular: ninguno

Crear nueva capa y agregar texto de logotipo

A continuación, agregaremos una nueva capa.

Usaremos esta capa para agregar texto de logotipo.

• Fuente: Montserrat
• Peso de fuente: negro
• Tamaño de fuente: 110pt

Crear contornos para logotipo

Una vez que haya terminado de modificar el texto del logotipo, puede hacer clic derecho en el elemento y hacer clic en «Crear contornos» para convertir el texto en un contorno.

Alinear contornos de texto

Nos aseguraremos de que los contornos del texto también estén alineados al centro.

Exportar como SVG

Ahora que tenemos todas las rutas en su lugar, podemos exportar el SVG. Para hacer eso, colocaremos el cursor sobre la opción «Archivo» en la parte superior, vamos a «Exportar» y hacemos clic en «Exportar como …».

Obtener código SVG

Una vez que haya hecho clic en el botón «Exportar», verá aparecer una ventana con algunas opciones adicionales de SVG. Allí podrás copiar el código SVG. Asegúrese de tener el SVG cerca para usarlo más adelante en este tutorial.

2. Comience a crear un encabezado global / personalizado dentro de Divi Theme Builder

Vaya a Divi Theme Builder y comience a crear un encabezado global

Ahora que hemos pasado por la primera parte de este tutorial, obteniendo el código SVG de nuestro logotipo, ¡es hora de cambiar a Divi! Crearemos un nuevo encabezado global navegando hasta Theme Builder dentro del Backend de WordPress.

Configuración de la sección

Color de fondo

Una vez que haya ingresado la plantilla de encabezado global, verá una sección. Abra esa sección y aplique un color de fondo.

• Color de fondo: #eaeaea

Espaciado

Vaya a la pestaña de diseño y elimine todo el relleno superior e inferior predeterminado a continuación.

• Relleno superior: 0px
• Acolchado inferior: 0px

Agregar nueva fila

Estructura de columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila, vaya a la pestaña de diseño y modifique la configuración de tamaño de la siguiente manera:

• Usar ancho de canalón personalizado: Sí
• Ancho del canal: 1
• Ecualizar alturas de columna: Sí
• Ancho: 95%
• Ancho máximo: 100%

Espaciado

Elimine también todo el acolchado superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado inferior: 0px

Elemento principal

Para asegurarnos de que nuestras columnas permanezcan una al lado de la otra en tamaños de pantalla más pequeños, también agregaremos una línea de código CSS al elemento principal de la fila.

Elemento principal de la columna 1

A continuación, nos aseguraremos de que la estructura de la columna (1/4 y 3/4) se mantenga en tamaños de pantalla más pequeños agregando una línea de código CSS a cada columna individualmente. Empiece por el primero.

Elemento principal de la columna 2

Haga lo mismo con la segunda columna, pero use otro porcentaje de ancho.

3. Agregue el logotipo SVG (módulo de código interno)

Agregar módulo de código a la columna 1

Es hora de agregar módulos, comenzando con un primer módulo de código. Colocaremos este módulo de código en la columna 1 y lo usaremos para agregar nuestro código SVG.

Agregar código SVG copiado

Estructurarlo

Once you’ve pasted the SVG code (see part 1 of this tutorial) inside the Code Module, it helps to structure everything as shown in the print screen below. That way, you’ll have a clean overview of the different elements inside the SVG.

Add Stroke & Stroke Width to Elements in CSS Code

In Illustrator, we only used fill colors for the elements we added. The reason for that is because we want to avoid generating extra paths. SVG code isn’t always as predictable as you may think, so making some manual changes in the CSS code can often help keep the paths simple. To create the same outcome as in the preview of this post, we’ll need to add a stroke to both our elements. To do that, we’ll add to lines of CSS code to the two classes inside our code. The “cls-1” CSS class that was generated in AI stands for the circle, the “cls-2” CSS class represents the text outlines.

Decrease Circle Radius

Because we’ve added an extra stroke to our circle, the circle seems to reach further than the SVG canvas (noticeable on the sides), to fix this, we’ll simply reduce the radius inside our circle tag. Instead of using the original “232.5”, we’re bringing it down to “225”. You can determine for yourself what value you prefer by gently playing around with this number.

• r=”225″

Modify Code Module Settings

Sizing

Now that our SVG code is in place, we can make some additional changes to the Code Module itself. Go to the design tab and modify the module’s width across different screen sizes.

• Width:
  • Desktop: 25%
  • Tablet: 50%
  • Phone: 80%

Spacing

We’re generating a bottom overlap as well by modifying the spacing settings.

• Top Padding: 5%
• Bottom Padding:
  • Desktop: -12%
  • Tablet: -20%
  • Phone: -35%

4. Use Anime.js to Animate Your SVG Logo

Add Another Code Module Below Previous One

Our SVG logo has been added to our Divi header! In the next part of this tutorial, we’ll animate the SVG logo using the Anime JS library. The drawing animation that you can see in the preview is one of their most popular ones but you can create any kind of animation with this library. Add a new Code Module right below the previous one.

Add Anime Library

The first thing you’ll need to do is adding the library inside script tags.

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

Add Anime Timeline Animation Code

Right below it, you’ll need to add the anime JS code between script tags as shown in the print screen below:

Each “add” function represents an animation in a timeline of animations. You can modify these “add” functions however you want, add new ones or remove current ones, just make sure that the last add function is closed properly with a ‘;’ at the end (as you can see in the code above). You can add different CSS properties inside these “add” functions. You can find out more about the properties and how they’re used in the anime.js documentation examples.

5. Add Menu Module to Column 2

The only element we need to complete our global header is a Menu Module in column 2.

Select Menu

Select a menu of your choice.

Remove Background Color

Then, remove the default background color.

Menu Text Settings

Move on to the design tab and modify the menu text settings as follows:

• Menu Text Color: #000000
• Menu Text Size:
  • Desktop: 0.7vw
  • Tableta: 2.2vw
  • Teléfono: 3vw
• Alineación de texto: derecha

Configuración de texto del menú desplegable

Cambie también el color de la línea del menú desplegable.

• Color de la línea del menú desplegable: #ffffff

Configuración de iconos

Junto con el color del icono del menú de hamburguesas.

• Color del icono del menú de hamburguesas: # 0c1019

Dimensionamiento

Luego, vaya a la configuración de tamaño y asegúrese de que el ancho sea «100%».

• Ancho: 100%

Posición

Complete la configuración del módulo reposicionando el módulo en la pestaña avanzada.

• Posición: Absoluto
• Ubicación: Centro a la derecha

6. Guardar todos los cambios del generador de temas

Una vez que haya completado todo el diseño del encabezado global, puede guardar todos los cambios del generador de temas y ver el resultado en su sitio web.