Cómo agregar y animar su logotipo SVG dentro de su encabezado global con Divi’s Theme Builder y Anime.js

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 que encuentre. Al agregar un logotipo a su encabezado, puede elegir cargar un archivo PNG o optar por una integración SVG en su lugar. Para un enfoque más personalizado, también puede animar su logotipo SVG. Eso es exactamente lo que te mostraremos en este post. 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!

Hagámoslo.

Avance

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

Escritorio

Móvil

Descargue la plantilla de encabezado global GRATIS

Para poner sus manos en la plantilla de encabezado global, primero deberá descargarla usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.

Descárgalo gratis

Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

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

Abra Illustrator y cree un nuevo documento

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

  • Ancho: 500px
  • Altura: 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 paquete de diseño de la tienda de especias. También nos aseguraremos de que el círculo esté alineado centralmente dentro de nuestro lienzo.

  • Llenar: #0C1019
  • Trazo: Ninguno

Crear nueva capa y agregar texto de logotipo

A continuación, agregaremos una nueva capa.

Usaremos esta capa para agregar algo de texto de logotipo.

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

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 ello, desplazaremos la opción «Archivo» en la parte superior, iremos a «Exportar» y haremos clic en «Exportar como…».

Obtener código SVG

Una vez que haya hecho clic en el botón «Exportar», verá que aparece una ventana con algunas opciones SVG adicionales. Allí, podrá copiar el código SVG. Asegúrese de mantener 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 al generador de temas dentro del backend de WordPress.

Ajustes de sección

Color de fondo

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

  • Color de fondo: #eaeaea

Espaciado

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

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

Agregar nueva fila

Estructura de la 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 la 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ón: 1
  • Igualar alturas de columna: Sí
  • Ancho: 95%
  • Ancho máximo: 100%

Espaciado

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

  • Relleno superior: 0px
  • Relleno 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.

01
display: flex;

Columna 1 Elemento principal

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. Comience con el primero.

01
width: 25% !important;

Elemento principal de la columna 2

Haz lo mismo para la segunda columna, pero usa otro porcentaje de ancho.

01
width: 75% !important;

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

Una vez que haya pegado el código SVG (vea la parte 1 de este tutorial) dentro del Módulo de código, ayuda a estructurar todo como se muestra en la pantalla de impresión a continuación. De esa forma, tendrá una visión clara de los diferentes elementos dentro del SVG.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
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>

Agregar trazo y ancho de trazo a elementos en código CSS

En Illustrator, solo usamos colores de relleno para los elementos que agregamos. La razón de esto es porque queremos evitar generar rutas adicionales. El código SVG no siempre es tan predecible como podría pensar, por lo que hacer algunos cambios manuales en el código CSS a menudo puede ayudar a simplificar las rutas. Para crear el mismo resultado que en la vista previa de esta publicación, necesitaremos agregar un trazo a nuestros dos elementos. Para hacer eso, agregaremos líneas de código CSS a las dos clases dentro de nuestro código. La clase CSS «cls-1» que se generó en AI representa el círculo, la clase CSS «cls-2» representa los contornos del texto.

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

Reducir el radio del círculo

Debido a que agregamos un trazo adicional a nuestro círculo, el círculo parece llegar más lejos que el lienzo SVG (se nota a los lados), para arreglar esto, simplemente reduciremos el radio dentro de nuestra etiqueta de círculo. En lugar de usar el «232.5» original, lo reduciremos a «225». Puede determinar por sí mismo qué valor prefiere jugando suavemente con este número.

  • r=”225″

Modificar la configuración del módulo de código

Dimensionamiento

Ahora que nuestro código SVG está en su lugar, podemos realizar algunos cambios adicionales en el propio módulo de código. Vaya a la pestaña de diseño y modifique el ancho del módulo en diferentes tamaños de pantalla.

  • Ancho:

    • Escritorio: 25%
    • Tableta: 50%
    • Teléfono: 80%

Espaciado

También estamos generando una superposición inferior al modificar la configuración de espaciado.

  • Acolchado superior: 5%
  • Acolchado inferior:

    • Escritorio: -12%
    • Tableta: -20%
    • Teléfono: -35%

Agregue otro módulo de código debajo del anterior

¡Nuestro logotipo SVG se ha agregado a nuestro encabezado Divi! En la siguiente parte de este tutorial, animaremos el logotipo SVG usando la biblioteca Anime JS . La animación de dibujo que puedes ver en la vista previa es una de las más populares, pero puedes crear cualquier tipo de animación con esta biblioteca. Agregue un nuevo módulo de código justo debajo del anterior.

Agregar biblioteca de anime

Lo primero que deberá hacer es agregar la biblioteca dentro de las etiquetas de script.

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

Agregar código de animación de línea de tiempo de anime

Justo debajo, deberá agregar el código JS del anime entre las etiquetas del script, como se muestra en la pantalla de impresión a continuación:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
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'],
});
 
}); 
});

Cada función «añadir» representa una animación en una línea de tiempo de animaciones. Puede modificar estas funciones de «agregar» como desee, agregar nuevas o eliminar las actuales, solo asegúrese de que la última función de agregar se cierre correctamente con un ‘;’ al final (como se puede ver en el código de arriba). Puede agregar diferentes propiedades CSS dentro de estas funciones de «agregar». Puede obtener más información sobre las propiedades y cómo se usan en los ejemplos de documentación de anime.js .

5. Agregar módulo de menú a la columna 2

El único elemento que necesitamos para completar nuestro encabezado global es un módulo de menú en la columna 2.

Seleccione el menú

Seleccione un menú de su elección.

Eliminar color de fondo

Luego, elimine el color de fondo predeterminado.

Configuración del texto del menú

Pase a la pestaña de diseño y modifique la configuración del texto del menú de la siguiente manera:

  • Color del texto del menú: #000000
  • Tamaño del texto del menú:

    • Escritorio: 0.7vw
    • Tableta: 2.2vw
    • Teléfono: 3vw
  • Alineación de texto: Derecha

Ajustes 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: Absoluta
  • Ubicación: Centro 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.

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo llevar su encabezado global Divi un paso más allá en su viaje de desarrollo web. Más específicamente, le mostramos cómo agregar y animar su logotipo SVG usando Divi y la biblioteca Anime JavaScript. ¡También pudo descargar el archivo JSON de plantilla de encabezado global de forma gratuita! Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.

Si está ansioso por aprender más sobre Divi y obtener más regalos de Divi, asegúrese de suscribirse  a nuestro boletín de correo electrónico  y  al canal de YouTube  para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.

Publicaciones relacionadas:

  1. Cómo agregar un título de sitio dinámico y un eslogan a un encabezado global de Divi
  2. Cómo agregar dos botones uno al lado del otro a su encabezado global Divi
  3. Cómo crear una plantilla de tarjeta de receta con Divi Theme Builder
  4. Cómo agregar un logotipo al menú secundario de Extra