¡Webflow es súper potente tal cual viene de fábrica! Pero aquí tienes 6 de mis fragmentos de código favoritos que uso para ampliar la funcionalidad de Webflow. Estas personalizaciones demuestran tu atención al detalle como diseñador y mejoran la experiencia del usuario. ¡Todos ganan!
1. Dale estilo a la barra de desplazamiento
La barra de desplazamiento es algo tan común, que pasa desapercibida en segundo plano. Darle estilo puede contribuir a la experiencia general del usuario: ¡un pequeño detalle extra que no pasará inadvertido y que seguro encantará!
Paso 1: Añade el fragmento
Pega este fragmento de código en la sección de Código Personalizado (Custom Code) de la página de configuración de tu sitio web.
<style>
::-webkit-scrollbar {
width: 8px; /* Controla el ancho total de la barra de desplazamiento */
padding: 2.5px; /* Controla el relleno de la barra de desplazamiento */
}
/* Carril - Esta es la parte que contiene el elemento que haces clic y arrastras */
::-webkit-scrollbar-track {
background: transparent; /* Establece el fondo como transparente, cámbialo a un valor Hex o RGB si lo deseas */
}
/* Tirador - Esta es la parte que realmente haces clic y arrastras */
::-webkit-scrollbar-thumb {
background: #3b3b3b; /* Cambia el valor Hex para modificar el tirador de desplazamiento */
border-radius: 6px; /* Cambia los "px" para ajustar el radio del borde del tirador */
border: white 1px solid /* Esto controla si el tirador tiene borde; ahora mismo está configurado como un borde blanco sólido de 1px. Puedes cambiar estos ajustes o eliminar esta línea por completo si no quieres un borde */
}
</style>
He añadido notas al fragmento de código anterior. Siéntete libre de eliminarlas para tu sitio publicado. Cada nota te ofrece una breve descripción de lo que hace esa línea en la barra de desplazamiento y cómo puedes cambiar los valores.
Nota: Esta función no está disponible actualmente en Firefox ni en Edge; esos navegadores mostrarán el estilo predeterminado.
2. Añade un botón de retroceso con JavaScript
Suelo usar este fragmento de código para clientes que tienen un blog o algo similar, es decir, una página con varios puntos de entrada. Volver atrás debería ser lo más sencillo posible, pero un botón estático que lleve a la página principal del blog no siempre funciona, ya que el usuario no necesariamente empezó allí.
¡JavaScript al rescate! Este pequeño código recuerda la última ubicación del usuario y lo lleva de vuelta con un solo clic.
Paso 1: Añade el botón
Ve al panel de elementos en el diseñador y arrastra un botón hasta donde quieras que aparezca. Yo decidí colocar el mío justo encima del inicio de la entrada del blog.
Asígnale la clase "Back Button" y utiliza la siguiente configuración:
- Relleno (izquierdo): 25px
- Margen (inferior): 30px
- Color de fuente: #333
Configuración de la imagen de fondo:
- Flecha izquierda (icono SVG disponible en Flaticon)
- Ancho: 19px
- Posición: Izquierda
- Mosaico: Ninguno
Paso 2: Añade el fragmento de JavaScript
Haz clic para seleccionar el botón y, en el panel de configuración a la derecha, pega el siguiente código. No presiones Enter para enviar el enlace, ya que Webflow lo estropeará añadiendo "https://". Para evitar esto y completar el proceso, simplemente haz clic fuera del campo del enlace.
`javascript: history.go(-1)
¡Listo! ¡Publica y prueba!
Diseña interacciones y animaciones sin escribir código
Crea interacciones y animaciones complejas sin tener que tocar ni una línea de código.
3. Actualiza la información de copyright anualmente
El copyright está vigente tanto si la información aparece en tu sitio como si no. Mostrarlo puede disuadir a quienes quieran plagiar tu arduo trabajo. Y tener la información de copyright actualizada, aunque sea un fastidio, es importante. Especialmente si gestionas varios sitios. Aquí tienes un pequeño y práctico fragmento de JavaScript que actualizará el año automáticamente a medida que pase el tiempo.
Damos por hecho que ya has configurado una fuente para el cuerpo de texto de tu proyecto.
Paso 1: Aplica el estilo
Añade un bloque de texto al lienzo y asígnale la clase "Copyright" con los siguientes ajustes:
- Tamaño de fuente: 10px
- Color: Blanco (he elegido blanco por el pie de página oscuro, pero siéntete libre de cambiarlo según tus necesidades)
- Alineación del texto: Centrado
Paso 2: Añade el fragmento de código
Copia y pega el código de abajo en un widget de inserción HTML en tu lienzo y colócalo donde quieras que aparezca. Yo lo pondré en el pie de página, justo debajo del bloque de texto que acabo de estilizar.
<div class="copyright">Copyright de “Nombre de la empresa” <script language="javascript" type="text/javascript">
var today = new Date()
var year = today.getFullYear()
document.write(year)
</script></div>
Como ves en el fragmento anterior, hay una línea de texto: sustituye "Nombre de la empresa" por el titular de los derechos de autor. Guarda y cierra.
Verás que la información de copyright recién colocada tiene exactamente el mismo estilo que el bloque de texto anterior. Esto es porque comparten la misma clase. Ahora debemos eliminar el bloque de texto original que estilizamos, dejando solo la inserción HTML.
¡Cuidado, hay algunos trucos!
Si borraras el bloque de texto de copyright, la próxima vez que limpies las clases no utilizadas de tu proyecto, perderías el estilo de tu inserción HTML. Para evitarlo, debemos colocar el bloque de texto de copyright en una página que no se use.
Suelo crear una página en mi proyecto de Webflow llamada "/Assets". Ahí pongo todo lo que quiero conservar o usar más tarde. Así, el sistema de Webflow no borrará la clase.
4. Personaliza el color de Chrome en Android
No todos los navegadores son iguales, y Chrome es, con diferencia, el más popular del mundo. ¡Por suerte para nosotros, los diseñadores, ofrece opciones geniales de personalización! El navegador Chrome de Google te permite cambiar su color para crear una experiencia de navegación móvil perfectamente integrada con tu marca.
Aquí tienes un ejemplo de cómo el navegador aplica este fragmento. Seguro que estarás de acuerdo en que es otra herramienta fantástica para tu arsenal, cada vez más grande, con la que personalizar la experiencia del usuario.
Paso 1: Añade el fragmento de código
Abre el panel de configuración de tu proyecto, ve a la sección de código personalizado (Custom Code) y pega el siguiente fragmento en la sección de código del encabezado (Head Code).
<meta name="theme-color" content="#000"> /* Cambia "#000" por el color que mejor combine con el tema y estilo de tu proyecto */
Así de fácil: publícalo y ábrelo en un dispositivo Android.
5. Estiliza el resaltado de texto
A menudo, los diseñadores olvidan los valores predeterminados del sistema, como el color de resaltado del texto. Pero, de nuevo, es esa atención al detalle la que marca la diferencia.
Paso 1: Añade el fragmento
Copia el siguiente fragmento de código al portapapeles y ve a la configuración de tu proyecto. Abre la pestaña de código personalizado (Custom Code) y pega el fragmento en la sección de código del encabezado (Header Code).
<style>
::selection {
background: #000; /* Navegadores WebKit/Blink */
color: white;
}
::-moz-selection {
background: #000; /* Navegadores Gecko */
}
</style>
Haz clic en guardar cambios y publica el sitio. Previsualízalo en el sitio publicado.
Paso 2: Ajusta los colores
He dejado el fragmento con un fondo negro y el texto en blanco, pero tienes total libertad creativa para cambiarlo por el color que prefieras.
En el fragmento, simplemente cambia los códigos hexadecimales por el color que desees.
Solo recuerda guardar los cambios y publicar para verlo en tu sitio web en vivo.
6. ¡Usa guiones!
Si eres un fanático de la tipografía, sabes que un guion en el lugar justo puede marcar la diferencia entre una lectura agradable y un bloque de texto que te hará llorar a mares.
Especialmente si usas texto justificado. (No lo recomendamos). O si publicas en un idioma que, como el alemán, es propenso a las palabras polisílabas.
Por supuesto, puedes añadir manualmente la entidad HTML ­ para decirle a los navegadores "separa con guion aquí si es necesario", pero eso puede volverse tedioso en cualquier sitio con más de un par de páginas. Y no funcionará en campos de texto enriquecido.
Afortunadamente, CSS ha venido al rescate con el salto de línea y la separación con guiones.
.my-class {word-break: break-word;-webkit-hyphens: auto;-moz-hyphens: auto;-ms-hyphens: auto;hyphens: auto;}
Para analizar esa declaración paso a paso:
- Hyphens: auto Esto le indica a los navegadores que procedan a separar automáticamente las palabras con guiones según sea necesario, basándose en el diccionario del navegador para el idioma que hayas declarado en tu sitio. Y sí, esto significa que debes especificar el idioma de tu sitio en la etiqueta HTML. Puedes hacerlo en la sección de Configuración avanzada de la pestaña de Código personalizado en la Configuración de tu proyecto.
- Las 4 líneas de abreviaturas de guiones Estas son solo versiones específicas de cada navegador de hyphens-auto para asegurar que la separación con guiones funcione en todos ellos.
- Word-break: break-word Esta es una medida de seguridad, ya que lo único que hace realmente es decirle al navegador que está bien añadir un salto de línea en medio de una palabra si es necesario. Lo cual es, en cierto modo, el objetivo de todas las declaraciones de "hyphens".
Vale la pena señalar que Chrome en Windows aún no admite la separación automática con guiones.
Un agradecimiento al usuario del foro @prohaska por este práctico fragmento.
¿Qué código personalizado utilizas tú?
¡Eso es todo! Estos son los fragmentos de código esenciales que uso en prácticamente todos mis proyectos de Webflow. Espero que te ayuden a llevar tus diseños al siguiente nivel.
