¡Tu licencia Divi con un -20% de DescuentoOferta aquí

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

Sep 18, 2020 | Tutoriales para 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!

Descargar el tutorial GRATIS

Para descargar el fichero JSON de este tutorial, será necesario descargarlo usando el botón de descarga, suscribiendose a nuestra lista de correo electrónico mediante el siguiente formulario. Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se «volverá a suscribir» ni recibirá correos electrónicos adicionales.

Avance

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

Escritorio

logotipo de svg

Móvil

logotipo de svg

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

logotipo de svg

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

logotipo de svg

Crear nueva capa y agregar texto de logotipo

A continuación, agregaremos una nueva capa.

logotipo de svg

Usaremos esta capa para agregar texto de logotipo.

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

logotipo de svg

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.

logotipo de svg

Alinear contornos de texto

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

logotipo de svg

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 …».

logotipo de svg

logotipo de svg

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.

logotipo de svg

logotipo de svg

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.

logotipo de svg

logotipo de svg

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

logotipo de svg

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

logotipo de svg

Agregar nueva fila

Estructura de columna

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

logotipo de svg

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%

logotipo de svg

Espaciado

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

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

logotipo de svg

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.

01
display: flex;

logotipo de svg

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.

01
width: 25% !important;

logotipo de svg

logotipo de svg

Elemento principal de la columna 2

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

01
width: 75% !important;

logotipo de svg

logotipo de svg

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.

logotipo de 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.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<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>

logotipo de 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.

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

logotipo de svg

logotipo de svg

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″

logotipo de svg

logotipo de svg

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%

logotipo de svg

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%

logotipo de svg

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.

logotipo de svg

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”

logotipo de svg

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:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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'],
});
 
}); 
});

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.

logotipo de svg

5. Add Menu Module to Column 2

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

logotipo de svg

Select Menu

Select a menu of your choice.

logotipo de svg

Remove Background Color

Then, remove the default background color.

logotipo de svg

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

logotipo de svg

logotipo de svg

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

logotipo de svg

Configuración de iconos

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

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

logotipo de svg

Dimensionamiento

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

  • Ancho: 100%

logotipo de svg

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

logotipo de svg

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.

logotipo de svg

logotipo de svg

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

¡20% de Descuento en Divi!

Sitios web y usuarios ilimitados

Únete a más de 700.000 clientes y obten acceso a Divi, Extra, Bloom, Monarch y mucho más. Impulsa a todo tu equipo y crea sitios web ilimitados con una licencia.

¡Ir al descuento!



You have Successfully Subscribed!

Pin It on Pinterest

Share This