Cómo agregar y animar su logotipo de SVG en su encabezado global con temas de divirador & amp;Anime.js

Su logotipo es una parte central de la identidad de su marca, por lo que casi siempre se incluye en cualquier sitio web que cumpla. Cuando agrega un logotipo a su encabezado, puede optar por cargar un archivo PNG o elegir una integración SVG. Para un enfoque más personalizado, puede animar su logotipo SVG. Esto es exactamente lo que le mostraremos en esta publicación. Le mostraremos cómo agregarlo primero al encabezado global construido por DIV y luego animarlo usando la biblioteca de anime JS. Usaremos un diseño simple para nuestro ejemplo, pero una vez que obtenga el enfoque, ¡puede animar cualquier logotipo!
Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Descargue el encabezado global de forma gratuita para poner su mano en la plantilla de encabezado global, primero deberá descargarlo con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
1. Cree el logotipo de SVG en Adobe Illustrator y obtenga el código SVG Open Illustrator y cree un nuevo documento en la primera parte de este tutorial, crearemos un logotipo simple en Adobe Illustrator. Si ya tiene su propio logotipo SVG, no dude en usarlo. Alternativamente, también puede acceder al ejemplo del archivo Illustrator del logotipo desde la carpeta de descarga de arriba. Si prefiere crear la muestra del logotipo desde cero, comience agregando un nuevo documento con un informe 1: 1.
Ancho: 500 PX
Altura: 500 PX
Agregue el círculo a la capa existente El primer elemento que agregaremos es un círculo. Utilizaremos un color de relleno que se adapte a la paleta de colores del paquete Spice Stores. También nos aseguraremos de que el círculo esté alineado centralmente en nuestro lienzo.

Finalización: # 0C1019
Accidente cerebrovascular: ninguno
Cree una nueva capa y agregue texto del logotipo, agregaremos una nueva capa.

Usaremos esta capa para agregar un texto del logotipo.

Fuente: Montserrat
Peso de fuente: negro
Tamaño de fuente: 110pt
Cree contornos para el logotipo Después de haber terminado de cambiar el texto del logotipo, puede hacer clic en el elemento y hacer clic en “Crear contornos” para girar el texto. Alinee los contornos del texto Nos aseguraremos de que los contornos estén alineados con el centro.

Exportar en formato SVG ahora, que tenemos todos los sentidos en su lugar, podemos exportar el SVG. Para hacer esto, moveremos la opción “Archivo” en la parte superior, iremos a “Exportar” y hacer clic en “Exportar como …”.

Obtenga el código SVG Después de hacer clic en el botón “Exportar”, verá una ventana con algunas opciones SVG adicionales. Allí, podrá copiar el código SVG. Asegúrese de mantener SVG casi para ser utilizado más adelante en este tutorial.

2. Comience a crear encabezado global / personalizado en Divic Builder Access the Divic Builder y comience a crear encabezado global ahora, que hemos viajado la primera parte de este tutorial, obteniendo el código SVG de nuestro logotipo, ¡es hora de pasar a la división! Crearemos un nuevo encabezado global navegando en temas Builder en WordPress Backend.


Sección de configuración Color de construcción Después de la plantilla de esquema global introducida, notará una sección. Abra esa sección y aplique un color de fondo.


Color de fondo: #eaea


Espacio ir a la pestaña de diseño y eliminar todos los valores predeterminados desde arriba e abajo.
SUS Lingo: 0 PX

Finamiento inferior: 0 PX
Agregue una nueva estructura de columna de fila Continuar agregando una nueva línea utilizando la siguiente estructura de columnas:
Dimensión sin agregar módulos, abrir la configuración de línea, acceder a la pestaña de diseño y cambiar la configuración de tamaño de la siguiente manera:

Use el ancho personalizado de la canaleta: el daño de la canaleta: 1

Igualar las alturas de la columna: sí
Ancho: 95%
Ancho máximo: 100%
El espacio elimina y todos los rellenos predeterminados, arriba e inferior.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX

El elemento principal para garantizar que nuestras columnas permanezcan una al lado de la otra en dimensiones de pantalla más pequeñas, también agregaremos una línea de código CSS al elemento principal de la fila. Pantalla: Flex;
El elemento principal de la columna 1, entonces, nos aseguraremos de que la estructura de la columna (1/4 y 3/4) se mantenga en dimensiones de pantalla más pequeñas, agregando una línea de código CSS a cada columna individual. Empiece con el primero.
Ancho: 25%! Importante;

El elemento principal de la columna 2 hace lo mismo para la segunda columna, pero use otro porcentaje de ancho. Ancho: 75%! Importante;

3. Agregue el logotipo SVG (módulo de código interior) Agregue un módulo de código en la columna 1 es hora de agregar módulos, comenzando con un módulo de primer código. Colocaremos este módulo de código en la columna 1 y lo usaremos para agregar nuestro código SVG.
Agregue la estructura del código SVG copiado después de haber pegado el código SVG (consulte la parte 1 de este tutorial) en el módulo de código, le ayuda a estructurar todo como se muestra en la pantalla de impresión a continuación. De esta manera, tendrá una imagen general limpia en los diferentes elementos de SVG.

.Cls-1 {
Relleno:#0C1019;
}
.Cls-2 {
Relleno: #fff;
}

! 0,1,4.08,8.8.8,12.12.12.12,0,0,1-4.08,9.41Q-4.07,3.69-10.88,3.69T28,215.9ZM-1.59,8.41H24.85V60.17H26.41Z ” = “traducir (-17.5 -17.5)”/>

Agregue la carrera y el ancho de la carrera a los elementos del código CSS en Illustrator, solo usé colores de llenado para los elementos que agregué. La razón es que queremos evitar la generación de formas adicionales. El código SVG no siempre es tan predecible como podría pensar, por lo que hacer cambios manuales en el código CSS a menudo puede ayudar a simplificar las formas. Para crear el mismo resultado que en la vista previa de esta publicación, tendremos que agregar un golpe a ambos elementos. Para hacer esto, agregaremos líneas de código CSS a las dos clases 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.
Ancho de trazo: 3px;
Reduzca el radio del círculo porque hemos agregado una línea adicional a nuestro círculo, el círculo parece llegar más allá del lienzo SVG (visible en los lados), para remediar esto, simplemente reduciremos el radio dentro de nuestra etiqueta del círculo. En lugar de usar el “232.5” original, lo llevamos a “225”. Puede determinar qué valor prefiere jugando fácilmente con este número.
R = “225”
Cambie la configuración del módulo de código de dimensión SCE ahora, cuando nuestro código SVG está en vigor, podemos hacer algunos cambios adicionales en el módulo de código en sí. Vaya a la pestaña de diseño y cambie el ancho del módulo en diferentes tamaños de pantalla.


Ancho:
Escritorio: 25%
Tableta: 50%


Teléfono: 80%
Espacio también, generamos una superposición inferior cambiando la configuración de espaciado.


Revestimiento superior: 5%
Levante inferior:
Escritorio: -12%
Tableta: -20%
Teléfono: -35%

4. Use Anime.js para animar su logotipo de SVG Agregue otro módulo de código debajo de nuestro logotipo SVG anterior se ha agregado a nuestro encabezado de la Divica. En la siguiente parte de este tutorial, animaremos el logotipo de SVG usando la biblioteca de 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. Agregue una biblioteca anima. Lo primero que debe hacer es agregar la biblioteca a las etiquetas de script.
Src = “https://cdnjs.cloudflare.com/ajax/lbs/animejs/3.2.0/anime.min.js”
Agregue el código de animación de la línea de tiempo del anime justo debajo, deberá agregar el código de anime js entre las etiquetas de script, como se muestra en la pantalla de impresión a continuación: jQue (function ($) {
$ (documento) .Ready (function () {
anime.timeline ({bucle: false})
.agregar ({

Duración: 2000,

})
.agregar ({

Objetivos: [‘path.cls-2’, ‘circle.cls-1’],
strokedashoffset: [anime.setdashoffset, 0],
Falcando: ‘FacilINOutsine’,
Duración: 1500,
Retraso: function (el, i) {return i * 250},
})
.agregar ({
Objetivos: ‘Path.Cls-2’,
Duración: 10,
Relleno: [‘RGBA (0.0,0,0),’ #fff ‘],
})
.agregar ({
Objetivos: ‘circle.cls-1’,
Duración: 2000,
Relleno: [‘RGBA (0.0,0,0),’#0C1019 ‘],
});
});
}); Cada función de “adición” representa una animación en una cronología de animaciones. Puede cambiar estas funciones “Agregar” de todos modos que desee, agregar otras nuevas o eliminar las actuales, asegúrese de que la última función de agregar esté correctamente cerrada con un ‘;’ al final (como puede ver en el código anterior). Puede agregar diferentes propiedades de CSS a estas funciones de “adición”. Puede obtener más información sobre las propiedades y cómo se usan en ejemplos de documentación de anime.js.5. Agregue el 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 Menú Seleccione un menú de su elección.
Retire el color de fondo y luego elimine el color de fondo predeterminado.
Configuración de texto del menú Vaya a la pestaña Diseño y cambie la configuración del texto del menú de la siguiente manera:
Color de texto del menú: # 000000
Tamaño del texto del menú:
Escritorio: 0.7 VW
Tableta: 2.2VW

Teléfono: 3VW

Alineación del texto: Derecho

Configuración de texto en el menú desplegable y cambie el color del menú desplegable.

Color de la línea desplegable del menú: #ffffff
Configuración del icono junto con el color del icono del menú de hamburguesas.
Icono de menú de hamburguesas de color: # 0C1019
Dimensión Luego, acceda a la configuración de dimensionamiento 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 derecho
6. Guarde todos los cambios del fabricante en el tema después de haber completado todo el diseño de encabezado global, ¡puede guardar todos los cambios del fabricante y puede ver el resultado en su sitio web!

Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla.Escritorio
Pensamientos finales En esta publicación, le mostré cómo llevar el encabezado de la Divica Global un paso más allá en su viaje de desarrollo web.Específicamente, le mostré cómo agregar y animar su logotipo SVG usando la biblioteca JavaScript JavaScript.¡Lograste descargar el encabezado Global JSON gratis!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 obtener más información sobre Divi y obtener más regalos de la Divicidad, 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 beneficios de este contenido gratuito.