6 Efectos Hover de Texto Sencillos para Squarespace
La creación de un sitio web atractivo y atractivo visualmente implica algo más que un gran contenido e imágenes. Añadir elementos interactivos, como efectos de texto flotante, puede mejorar significativamente la experiencia del usuario en tu sitio web de Squarespace, ya que ofrece movimiento en un sitio web que, de otro modo, sería estático, y atrae la atención de los usuarios cuando pasan el ratón sobre algo en lo que se puede hacer clic.
Este blog mostrará cómo implementar seis sencillos efectos hover de texto utilizando CSS para hacer que sus elementos de texto sean interactivos y elegantes.
Los efectos Hover que verá en esta lista
Efecto Hover #1: Cambio de color
Uno de los efectos hover más sencillos que puede aplicar es cambiar el color del texto cuando el puntero del ratón pasa sobre él. Este efecto puede ayudar a resaltar enlaces o títulos importantes.
Cómo personalizarlo para su sitio web:
🚨 NOTA IMPORTANTE: Las partes del código escritas en amarillo negrita son las partes que tendrás que cambiar para que este código funcione en tu sitio web de Squarespace.
Paso uno: Acceder al CSS personalizado
Ve a la sección CSS Personalizado de tu sitio Squarespace. A partir de diciembre de 2024, puedes navegar a esta sección siguiendo estos pasos:
Página web > Páginas > Herramientas del sitio web > CSS personalizado.
Segundo paso: identificar el bloque de texto
Si quieres personalizar un bloque de texto específico, necesitarás el ID de ese bloque. Es muy fácil encontrarlos con herramientas como la extensión de Chrome Squarespace ID Finder de Will Meyers.
Esta herramienta te permitirá encontrar el ID de bloque de cada bloque, sección y página de tu sitio web Squarespace con un solo clic. ¡Y es gratis!
Este es un ejemplo del aspecto que tendrá un ID de bloque:
#block-yui_3_17_2_1_1732245452165_5084
Paso 3: Especifique el texto que desea personalizar
Decida a qué elemento de texto (como un encabezado) desea aplicar el efecto hover. Para este ejemplo, nos dirigimos a los encabezados más grandes, por lo que vamos a utilizar el selector h1.
Si quieres un tipo de texto diferente para tu código, cambia el h1 en el código de abajo por un selector diferente. Encontrarás una lista de selectores de texto de Squarespace aquí.
#block-yui_3_17_2_1_1732245452165_5084 h1
Paso 4: Configurar la estructura CSS
Establezca la estructura básica del código CSS con llaves:
#block-yui_3_17_2_1_1732245452165_5084 h1 {
}
Paso 5: Definir el comportamiento de transición
Dentro de las llaves, le indicamos a Squarespace cómo debería ser la transición del texto al pasar el ratón por encima. A continuación, verás que le dijimos que el color cambiará suavemente durante 0,3 segundos.
En nuestra opinión, 0,3 segundos es un buen tiempo para la transición, ya que no es demasiado rápido como para parecer discordante, pero no demasiado lento como para parecer retrasado. Por lo tanto, recomendamos mantener el comportamiento de la transición tal y como se muestra a continuación, aunque puede probar otros tiempos si lo desea.
#block-yui_3_17_2_1_1732245452165_5084 h1 {
transición: color 0.3s ease;
}
Paso 6: Personalizar el efecto Hover
Ahora queremos añadir lo que ocurre cuando el ratón pasa por encima del texto. Así que, debajo del código que ya has escrito, añade de nuevo el ID del bloque, junto con :hover justo después, y las llaves. A continuación, después de la estructura de su efecto hover se establece, que desea especificar el color que desea que el texto para cambiar en hover.
Para ello, busque el código hexadecimal del color que desee y sustituya el texto amarillo en negrita en el código siguiente:
#block-yui_3_17_2_1_1732245452165_5084 h1 {
transición: color 0.3s ease;
}
#block-yui_3_17_2_1_1732245452165_5084 h1:hover {
color: #ffd300!important;
}
En conjunto, su código de cambio de color debe ser similar a esto
#block-yui_3_17_2_1_1732245452165_5084 h1 {
transición: color 0.3s ease;
}
#block-yui_3_17_2_1_1732245452165_5084 h1:hover {
color: #ffd300!important;
}
Efecto de texto sobreimpresionado nº 2: Efecto de sombra
Añadir una sombra paralela al texto puede hacer que destaque en su página, creando una sensación de profundidad. Este efecto es especialmente útil para títulos o frases destacadas.
Cómo personalizarlo para su sitio web:
🚨 NOTA IMPORTANTE: Las partes del código escritas en amarillo negrita son las partes que tendrás que cambiar para que este código funcione en tu sitio web de Squarespace.
Paso uno: Acceder al CSS personalizado
Ve a la sección CSS Personalizado de tu sitio Squarespace. A partir de diciembre de 2024, puedes navegar a esta sección siguiendo estos pasos:
Página web > Páginas > Herramientas del sitio web > CSS personalizado.
Segundo paso: identificar el bloque de texto
Si quieres personalizar un bloque de texto específico, necesitarás el ID de ese bloque. Es muy fácil encontrarlos con herramientas como la extensión de Chrome Squarespace ID Finder de Will Meyers.
Esta herramienta te permitirá encontrar el ID de bloque de cada bloque, sección y página de tu sitio web Squarespace con un solo clic. ¡Y es gratis!
Este es un ejemplo del aspecto que tendrá un ID de bloque:
#block-yui_3_17_2_1_1732239899056_4963
Paso 3: Especifique el texto que desea personalizar
Decida a qué elemento de texto (como un encabezado) desea aplicar el efecto hover. Para este ejemplo, nos dirigimos a los encabezados más grandes, por lo que vamos a utilizar el selector h1.
Si quieres un tipo de texto diferente para tu código, cambia el h1 en el código de abajo por un selector diferente. Encontrarás una lista de selectores de texto de Squarespace aquí.
#block-yui_3_17_2_1_1732239899056_4963 h1
Paso 4: Configurar la estructura CSS
Establezca la estructura básica del código CSS con llaves:
#block-yui_3_17_2_1_1732239899056_4963 h1 {
}
Paso 5: Definir el comportamiento de transición
Configure la transición para la sombra del texto:
#block-yui_3_17_2_1_1732239899056_4963 h1 {
transition: text-shadow 0.3s ease;
}
Paso 6: Personalizar el efecto Hover
Define la apariencia de la sombra al pasar el ratón por encima:
#block-yui_3_17_2_1_1732239899056_4963 h1 {
transition: text-shadow 0.3s ease;
}
#block-yui_3_17_2_1_1732239899056_4963 h1:hover {
sombra de texto: 1px 1px 2px rgba(0, 0, 0, 1);
}
En conjunto, su código debería tener un aspecto similar al siguiente
#block-yui_3_17_2_1_1732239899056_4963 h1 {
transition: text-shadow 0.3s ease;
}
#block-yui_3_17_2_1_1732239899056_4963 h1:hover {
sombra de texto: 1px 1px 2px rgba(0, 0, 0, 1);
}
Efecto de texto sobreimpresionado nº 3: Aumento de escala
Aumentar ligeramente el tamaño de la fuente al pasar el ratón por encima puede atraer la atención hacia un texto específico de tu sitio Squarespace. Es efectivo para menús de navegación o anuncios especiales.
Cómo personalizarlo para su sitio web:
🚨 NOTA IMPORTANTE: Las partes del código escritas en amarillo negrita son las partes que tendrás que cambiar para que este código funcione en tu sitio web de Squarespace.
Paso uno: Acceder al CSS personalizado
Ve a la sección CSS Personalizado de tu sitio Squarespace. A partir de diciembre de 2024, puedes navegar a esta sección siguiendo estos pasos:
Página web > Páginas > Herramientas del sitio web > CSS personalizado
Segundo paso: identificar el bloque de texto
Si quieres personalizar un bloque de texto específico, necesitarás el ID de ese bloque. Es muy fácil encontrarlos con herramientas como la extensión de Chrome Squarespace ID Finder de Will Meyers.
Esta herramienta te permitirá encontrar el ID de bloque de cada bloque, sección y página de tu sitio web Squarespace con un solo clic. ¡Y es gratis!
Este es un ejemplo del aspecto que tendrá un ID de bloque:
#block-yui_3_17_2_1_1732245452165_5084
Paso 3: Especifique el texto que desea personalizar
Decida a qué elemento de texto (como un encabezado) desea aplicar el efecto hover. Para este ejemplo, nos dirigimos a los encabezados más grandes, por lo que vamos a utilizar el selector h1.
Si quieres un tipo de texto diferente para tu código, cambia el h1 en el código de abajo por un selector diferente. Encontrarás una lista de selectores de texto de Squarespace aquí.
#block-yui_3_17_2_1_1732245452165_5084 h1
Paso 4: Configurar la estructura CSS
Establezca la estructura básica del código CSS con llaves:
#block-yui_3_17_2_1_1732245452165_5084 h1 {
}
Paso 5: Definir el comportamiento de transición
Configure la transición para ampliar el texto:
#block-yui_3_17_2_1_1732245452165_5084 h1 {
transición: transformar 0,3s facilidad;
}
Paso 6: Personalizar el efecto Hover
Define el efecto de escala al pasar el ratón por encima:
#block-yui_3_17_2_1_1732245452165_5084 h1 {
transición: transformar 0,3s facilidad;
}
#block-yui_3_17_2_1_1732245452165_5084 h1:hover {
transformar: scale(1.1);
}
En conjunto, su código debería tener un aspecto similar al siguiente
#block-yui_3_17_2_1_1732245452165_5084 h1 {
transición: transformar 0,3s facilidad;
}
#block-yui_3_17_2_1_1732245452165_5084 h1:hover {
transformar: scale(1.1);
}
Efecto Hover #4: Espaciado entre letras
Ajustar el espaciado entre las letras al pasar el ratón por encima puede añadir un toque estilístico sutil pero eficaz, mejorando la legibilidad o el estilo del texto.
Cómo personalizarlo para su sitio web:
🚨 NOTA IMPORTANTE: Las partes del código escritas en amarillo negrita son las partes que tendrás que cambiar para que este código funcione en tu sitio web de Squarespace.
Paso uno: Acceder al CSS personalizado
Ve a la sección CSS Personalizado de tu sitio Squarespace. A partir de diciembre de 2024, puedes navegar a esta sección siguiendo estos pasos:
- Página web > Páginas > Herramientas del sitio web > CSS personalizado.
Segundo paso: identificar el bloque de texto
Si quieres personalizar un bloque de texto específico, necesitarás el ID de ese bloque. Es muy fácil encontrarlos con herramientas como la extensión de Chrome Squarespace ID Finder de Will Meyers.
Esta herramienta te permitirá encontrar el ID de bloque de cada bloque, sección y página de tu sitio web Squarespace con un solo clic. ¡Y es gratis!
Este es un ejemplo del aspecto que tendrá un ID de bloque:
#block-yui_3_17_2_1_1732245452165_5084
Paso 3: Especifique el texto que desea personalizar
Decida a qué elemento de texto (como un encabezado) desea aplicar el efecto hover. Para este ejemplo, nos dirigimos a los encabezados más grandes, por lo que vamos a utilizar el selector h1.
Si quieres un tipo de texto diferente para tu código, cambia el h1 en el código de abajo por un selector diferente. Encontrarás una lista de selectores de texto de Squarespace aquí.
#block-yui_3_17_2_1_1732245452165_5084 h1
Paso 4: Configurar la estructura CSS
Establezca la estructura básica del código CSS con llaves:
#block-yui_3_17_2_1_1732245452165_5084 h1 {
}
Paso 5: Definir el comportamiento de transición
Configure la transición para cambiar el espaciado entre letras:
#block-yui_3_17_2_1_1732245452165_5084 h1 {
transition: letter-spacing 0.3s ease;
}
Paso 6: Personalizar el efecto Hover
Define el ajuste del espaciado de las letras al pasar el ratón por encima:
#block-yui_3_17_2_1_1732245452165_5084 h1 {
transition: letter-spacing 0.3s ease;
}
#block-yui_3_17_2_1_1732245452165_5084 h1:hover {
interlineado: 0.1em;
}
En conjunto, su código debería tener un aspecto similar al siguiente
#block-yui_3_17_2_1_1732245452165_5084 h1 {
transition: letter-spacing 0.3s ease;
}
#block-yui_3_17_2_1_1732245452165_5084 h1:hover {
interlineado: 0.1em;
}
Efecto Hover #5: Gradiente
Un efecto degradado puede hacer que su texto sea vibrante y visualmente llamativo. Es una forma excelente de llamar la atención sobre palabras o frases importantes.
Cómo personalizarlo para su sitio web:
🚨 NOTA IMPORTANTE: Las partes del código escritas en amarillo negrita son las partes que tendrás que cambiar para que este código funcione en tu sitio web de Squarespace.
Paso uno: Acceder al CSS personalizado
Ve a la sección CSS Personalizado de tu sitio Squarespace. A partir de diciembre de 2024, puedes navegar a esta sección siguiendo estos pasos:
Página web > Páginas > Herramientas del sitio web > CSS personalizado.
Segundo paso: identificar el bloque de texto
Si quieres personalizar un bloque de texto específico, necesitarás el ID de ese bloque. Es muy fácil encontrarlos con herramientas como la extensión de Chrome Squarespace ID Finder de Will Meyers.
Esta herramienta te permitirá encontrar el ID de bloque de cada bloque, sección y página de tu sitio web Squarespace con un solo clic. ¡Y es gratis!
Este es un ejemplo del aspecto que tendrá un ID de bloque:
#block-yui_3_17_2_1_1732245452165_5084
Paso 3: Especifique el texto que desea personalizar
Decida a qué elemento de texto (como un encabezado) desea aplicar el efecto hover. Para este ejemplo, nos dirigimos a los encabezados más grandes, por lo que vamos a utilizar el selector h1.
Si quieres un tipo de texto diferente para tu código, cambia el h1 en el código de abajo por un selector diferente. Encontrarás una lista de selectores de texto de Squarespace aquí.
#block-yui_3_17_2_1_1732245452165_5084 h1
Paso 4: Configurar la estructura CSS
Establezca la estructura básica del código CSS con llaves:
#block-yui_3_17_2_1_1732245452165_5084 h1 {
}
Paso 5: Definir el comportamiento de transición y de fondo
Indica a Squarespace cómo deben comportarse el fondo y la transición del texto. Establece un fondo degradado y especifica una transición suave para cuando cambie el color:
#block-yui_3_17_2_1_1732245452165_5084 h1 {
fondo: linear-gradient(90deg, #6dc8ec, #26b1e8, #173973);
-webkit-background-clip: texto;
background-clip: texto;
color: transparente;
transición: color 0.3s ease;
}
Paso 6: Personalizar el efecto Hover
Añade el cambio de color deseado cuando el ratón pase por encima del texto:
#block-yui_3_17_2_1_1732245452165_5084 h1 {
fondo: linear-gradient(90deg, #6dc8ec, #26b1e8, #173973);
-webkit-background-clip: texto;
background-clip: texto;
color: transparente;
transición: color 0.3s ease;
}
#block-yui_3_17_2_1_1732245452165_5084 h1:hover {
color: #6dc8ec;
}
En conjunto, su código debería tener un aspecto similar al siguiente
#block-yui_3_17_2_1_1732245452165_5084 h1 {
fondo: linear-gradient(90deg, #6dc8ec, #26b1e8, #173973);
-webkit-background-clip: texto;
background-clip: texto;
color: transparente;
transición: color 0.3s ease;
}
#block-yui_3_17_2_1_1732245452165_5084 h1:hover {
color: #6dc8ec;
}
Efecto de texto sobreimpresionado nº 6: Rebote
Incorporar movimiento, como un efecto de rebote, puede hacer que las interacciones en su sitio parezcan dinámicas y divertidas. Este efecto es especialmente atractivo para los botones de llamada a la acción o los encabezados interactivos.
Cómo personalizarlo para su sitio web:
🚨 NOTA IMPORTANTE: Las partes del código escritas en amarillo negrita son las partes que tendrás que cambiar para que este código funcione en tu sitio web de Squarespace.
Paso uno: Acceder al CSS personalizado
Ve a la sección CSS Personalizado de tu sitio Squarespace. A partir de diciembre de 2024, puedes navegar a esta sección siguiendo estos pasos:
Página web > Páginas > Herramientas del sitio web > CSS personalizado.
Segundo paso: identificar el bloque de texto
Si quieres personalizar un bloque de texto específico, necesitarás el ID de ese bloque. Es muy fácil encontrarlos con herramientas como la extensión de Chrome Squarespace ID Finder de Will Meyers.
Esta herramienta te permitirá encontrar el ID de bloque de cada bloque, sección y página de tu sitio web Squarespace con un solo clic. ¡Y es gratis!
Este es un ejemplo del aspecto que tendrá un ID de bloque:
#block-yui_3_17_2_1_1732245452165_5084
Paso 3: Especifique el texto que desea personalizar
Decida a qué elemento de texto (como un encabezado) desea aplicar el efecto hover. Para este ejemplo, nos dirigimos a los encabezados más grandes, por lo que vamos a utilizar el selector h1.
Si quieres un tipo de texto diferente para tu código, cambia el h1 en el código de abajo por un selector diferente. Encontrarás una lista de selectores de texto de Squarespace aquí.
#block-yui_3_17_2_1_1732245452165_5084 h1
Paso 4: Configurar la estructura CSS
Establezca la estructura básica del código CSS con llaves:
#block-yui_3_17_2_1_1732245452165_5084 h1 {
}
Paso 5: Definir el comportamiento de transición
Configura el CSS para controlar cómo se moverá el texto durante la transición:
#block-yui_3_17_2_1_1732245452165_5084 h1 {
transición: transformar 0,3s facilidad;
}
Paso 6: Personalizar el efecto Hover
Añade el movimiento de rebote cuando el ratón pasa por encima del texto:
#block-yui_3_17_2_1_1732245452165_5084 h1 {
transición: transformar 0,3s facilidad;
}
#block-yui_3_17_2_1_1732245452165_5084 h1:hover {
transformar: translateY(-5px);
}
En conjunto, su código debería tener un aspecto similar al siguiente
#block-yui_3_17_2_1_1732245452165_5084 h1 {
transición: transformar 0,3s facilidad;
}
#block-yui_3_17_2_1_1732245452165_5084 h1:hover {
transformar: translateY(-5px);
}
Selectores de texto de Squarespace
| Tipo de texto | Selector | Selector de enlaces |
|---|---|---|
| Rúbrica 1 | h1 |
h1 a |
| Rúbrica 2 | h2 |
h2 a |
| Rúbrica tres | h3 |
h3 a |
| Rúbrica 4 | h4 |
h4 a |
| Párrafo primero | .sqsrte-large |
.sqsrte-large a |
| Segundo párrafo | p |
p a |
| Párrafo tercero | .sqsrte-pequeño |
.sqsrte-pequeño a |
Conclusión
Implementar estos efectos de texto flotante en tu sitio web de Squarespace puede mejorar significativamente la experiencia del usuario, haciendo que tu sitio no sólo sea más interactivo, sino también más atractivo. Mediante sencillos ajustes de CSS, puedes crear un sitio web más dinámico y visualmente atractivo que capte la atención de tus visitantes. Recuerda que la clave de un diseño web eficaz no está sólo en la información que proporcionas, sino en cómo la presentas.
Y si tienes alguna pregunta, ¡no dudes en comentarla a continuación!
