Mantenerse al día con las tendencias en el espacio del diseño web es una de las mejores maneras de mantenerse actualizado como diseñador web. Le permite crear sitios web modernos que impresionarán a sus clientes y lo ayudarán a llevar su conjunto de habilidades al siguiente nivel. En el tutorial de hoy, le mostraremos cómo familiarizarse con una tendencia que a menudo ve hoy en día en sitios web avanzados; Animaciones SVG de texto circular. Le mostraremos cómo agregarlos dentro del diseño de su página Divi , e incluso usarlos como un botón también. ¡También podrá descargar el archivo JSON de forma gratuita!
Hagámoslo.
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descarga el diseño GRATIS
Para poner sus manos en el diseño gratuito, primero deberá descargarlo 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!
Crear diseño de héroe
Agregar nueva sección
Color de fondo
Comencemos por crear el diseño del héroe. Abra una página nueva o existente con Divi y agréguele una nueva sección normal. Abra la configuración de la sección y aplique un color de fondo de su elección.
- Color de fondo: #f3eee8
Espaciado
Pase a la siguiente configuración de espaciado y modifique los valores de relleno superior e inferior.
- Relleno superior: 30px
- Relleno inferior: 30px
Agregar nueva fila
Estructura de la columna
Continúe agregando una nueva fila a la sección, utilizando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar módulos todavía, abra la configuración de la fila, navegue a la pestaña de diseño, abra la configuración de tamaño y realice los siguientes ajustes:
- Ancho: 95%
- Ancho máximo: 2580px
Configuración de la columna 1
Una vez que la configuración general de la fila esté en su lugar, puede proceder a abrir la configuración de la primera columna.
Imagen de fondo
Dentro de la configuración de fondo, cargue una imagen de fondo de su elección. Esta imagen aparecerá debajo de la animación SVG del texto del círculo más adelante en el tutorial.
- Tamaño de la imagen de fondo: Portada
- Posición de la imagen de fondo: Centro
- Repetición de la imagen de fondo: sin repetición
Agregue el Módulo de Texto #1 a la Columna 2
Agregar contenido H1
Es hora de agregar módulos, comenzando con un primer Módulo de texto en la columna 2. Agregue algún contenido H1 de su elección si está usando esta sección como héroe, o contenido H2 si está usando esto en cualquier otro lugar de su página.
Configuración de texto H1
A continuación, diseñe la configuración del texto del encabezado de este módulo.
- Fuente del título: Playfair Display
- Color del texto del encabezado: #212121
- Tamaño del texto del encabezado:
- Escritorio: 100px
- Tableta: 60px
- Teléfono: 45px
Dimensionamiento
Luego, vaya a la configuración de tamaño y aplique un ancho máximo.
- Ancho máximo: 600px
Agregue el Módulo de Texto #2 a la Columna 2
Agregar contenido
Debajo del primer módulo de texto, agregaremos otro módulo de texto. Esta vez, incluiremos algo de contenido descriptivo.
Configuración de texto
Navegue a la pestaña de diseño y aplique estilo al texto de la siguiente manera:
- Fuente del texto: Montserrat
- Tamaño del texto: 15px
- Altura de línea de texto: 2em
Dimensionamiento
Use un ancho máximo en la configuración de tamaño también.
- Ancho máximo: 520px
Espaciado
Luego, navegue a la configuración de espaciado y use algunos valores de respuesta.
- Margen superior:
- Escritorio: 20vh
- Tableta y teléfono: 50px
- Relleno izquierdo: 5%
Borde
También estamos incluyendo un borde izquierdo en la configuración del borde.
- Ancho del borde izquierdo: 2px
- Color del borde izquierdo: #000000
Agregar animación SVG de texto circular
Agregar módulo de código a la columna 1
Ahora que hemos creado la base de nuestro diseño de sección, podemos centrarnos en crear la animación SVG de texto circular. Para agregar la animación SVG de texto circular, vamos a usar un módulo de código en la columna 1. Continúe y agregue uno.
Añadir enlace
Si desea que se pueda hacer clic en esta animación SVG de texto circular, puede agregar una URL de su elección en la configuración de enlace del módulo.
Dimensionamiento
Asegúrese de que el ancho del módulo también esté establecido en «100%» en la configuración de tamaño.
- Ancho: 100%
Agregue SVG de círculo y texto al cuadro de código
Vuelva al cuadro de código en la pestaña de contenido. Aquí, primero agregaremos el círculo SVG y la ruta de texto usando el siguiente código HTML:
|
01
02
03
04
05
06
07
08
09
|
<svg viewBox="0 0 500 500"><defs> <path d="M50,250c0-110.5,89.5-200,200-200s200,89.5,200,200s-89.5,200-200,200S50,360.5,50,250" id="circle"> </path></defs> <text dy="70"> <textPath xlink:href="#circle">View Portfolio • New Homes •</textPath> </text></svg> |
Estilo SVG con CSS
Por supuesto, necesitaremos diseñar la ruta de texto SVG para que coincida con nuestro diseño. Nos estamos asegurando de que el SVG también esté configurado en «100%». Pegue las siguientes líneas de código CSS dentro del cuadro de código, entre las etiquetas de estilo:
|
01
02
03
04
05
06
07
08
09
10
11
12
|
<style>svg { width: 100%;}svg textPath { font-size: 39px; font-family: "Montserrat"; text-transform: uppercase; letter-spacing: 20px; fill: #fff;}</style> |
Ahora, para crear una rotación sin fin para nuestro texto, vamos a usar el elemento de transformación animado que nos permite crear la animación sin necesidad de un código JavaScript externo. Estos son los atributos que estamos asignando a nuestro SVG:
|
01
02
03
04
05
06
07
08
09
|
<animateTransform attributeName="transform" begin="0s" dur="15s" type="rotate" from="0 250 250" to="360 250 250" repeatCount="indefinite" /> |
Puede modificar estos atributos como desee, para crear la animación de su elección. Observe cómo el último atributo, repeatCount, se establece en «indefinido». Esto nos permite crear un ciclo interminable de rotación para nuestro SVG.
Modificar ruta de texto para uso propio
Por supuesto, querrá modificar el texto para que coincida con su propio sitio web, puede hacerlo fácilmente entre las etiquetas de ruta de texto. Sin embargo, una vez que cambie la longitud de la copia, deberá modificar la configuración para asegurarse de crear un círculo perfecto. Puede jugar con el valor «dy», que indica un desplazamiento a lo largo del eje y y cambiar el tamaño de fuente y el espaciado entre letras de la ruta de texto hasta que obtenga el resultado deseado. ¡Eso es todo!
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 mantener su sitio web actualizado con las tendencias de diseño. Más específicamente, le mostramos cómo crear una animación SVG de texto circular y usarla elegantemente en su diseño Divi. Una vez que obtenga el enfoque, puede usar este elemento para mostrar cualquier texto que desee y ajustarlo a su propio diseño. ¡También pudo descargar el archivo JSON 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.