Cómo agregar y animar su logotipo SVG dentro de su encabezado global con Theme Builder y 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!

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 nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

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.

• Relleno: # 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 la 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 logo, ¡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 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 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 de la canaleta: 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.

display: flex;

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.

width: 25% !important;

Elemento principal de la columna 2

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

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 (consulte la parte 1 de este tutorial) dentro del Módulo de código, es útil estructurar todo como se muestra en la pantalla de impresión a continuación. De esa manera, tendrá una descripción general clara de los diferentes elementos dentro del 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>

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 realizar algunos cambios manuales en el código CSS a menudo puede ayudar a mantener las rutas simples. Para crear el mismo resultado que en la vista previa de esta publicación, necesitaremos agregar un trazo a ambos 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.

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

Disminuir el radio del círculo

Debido a que hemos agregado un trazo adicional a nuestro círculo, el círculo parece llegar más lejos que el lienzo SVG (se nota en los lados), para solucionar esto, simplemente reduciremos el radio dentro de nuestra etiqueta de círculo. En lugar de usar el "232.5" original, lo reducimos 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 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 modificando la configuración de espaciado.

• Acolchado superior: 5%
• Acolchado inferior:
  • Escritorio: -12%
  • Tableta: -20%
  • Teléfono: -35%

4. Utilice Anime.js para animar su logotipo SVG

Agregar 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 de SVG usando la biblioteca Anime JS. La animación de dibujo que puede ver en la vista previa es una de las más populares, pero puede 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 secuencia de comandos.

• 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 de él, deberá agregar el código JS de anime entre las etiquetas de script como se muestra en la pantalla de impresión a continuación:

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 de "agregar" 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 esté cerrada correctamente con un ';' al final (como puede ver en el código anterior). Puede agregar diferentes propiedades CSS dentro de estas funciones de "agregar". Puede obtener más información sobre las propiedades y cómo se utilizan 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ú

Vaya 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

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.

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 de JavaScript de Anime. ¡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 obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.