Haz clic para copiar al portapapeles

La experiencia de usuario es una parte fundamental del proceso de diseño. Aprovecha siempre la oportunidad de ir un paso más allá para hacer que una interacción sea más emocionante y fácil de usar.

Inspirados por Gradients.io de Luke Davies, vamos a llevar su brillante trabajo un poco más lejos para mejorar la experiencia de usuario. Usaremos clipboard.js para construir nuestra colección CMS de degradados en Webflow.

Aquí tienes una demostración de lo que vamos a construir

Paso 1: Crea tu colección CMS

Abre el diseñador y haz clic en la pestaña CMS del menú de la izquierda. Haz clic en Crear nueva colección.

Ponle a la colección el nombre "Gradients" y establece la URL de la colección como "Gradient".

Haz clic en Añadir nuevo campo y selecciona Texto plano entre las opciones de tipo de campo.

Llámalo "First Hex Code". Configura el campo como obligatorio marcando la opción Este campo es obligatorio. Repite el proceso y llama a tu nuevo campo "Second Hex Code".

Ya hemos terminado aquí, haz clic en Crear colección en la parte superior derecha.

Ahora vamos a añadir nuestros elementos CMS. En la parte superior derecha, haz clic en el botón Nuevo degradado.

A continuación, tienes una lista de los detalles que he usado para cada elemento CMS:

• Ultramarine #00A8C5 #FFFF7E
• Ocean-Blue #2E3192 #1BFFFF
• Sanguine #D4145A #FBB03B
• Luscious-Lime #009245 #FCEE21
• Purple-Lake #662D8C #ED1E79
• Fresh-Papaya #ED1C24 #FCEE21

Una vez que hayas introducido cada elemento CMS en la colección, ve al panel de pestañas de la izquierda en el diseñador y haz clic en la pestaña Añadir elemento(s). Coloca una sección en el lienzo, asígnale la clase "Hero Section" y utiliza los siguientes ajustes:

• Display: Flex, Vertical, Justify:Center, Align:Center
• Altura mínima: 100vh
• Color de fondo: #f1f1f1

A continuación, coloca un contenedor en el lienzo; no hace falta que le pongas nombre a la clase. Añade una lista de colección CMS y vincúlala a la colección de degradados (Gradients Collection). Para ello, selecciónala en el menú desplegable del panel de configuración de la lista de colección. Elige 3 columnas en la sección de diseño del mismo panel.

Selecciona uno de los elementos de la colección, asígnale la clase "Collection Item" y añade un margen superior e inferior de 10px (el izquierdo y el derecho tienen 10px por defecto).

Paso 2: Añadir contenido e incrustaciones HTML

Selecciona la pestaña de elementos a la izquierda, baja hasta el final y coloca un widget de incrustación HTML (HTML Embed) en uno de los elementos de la colección. Cuando se abra el cuadro de diálogo HTML, copia y pega este fragmento de CSS:

<style>

. {

   background: ; /* Para navegadores que no admiten degradados */

   background: -webkit-linear-gradient(bottom right, , ); /* Para Safari 5.1 a 6.0 */

   background: -o-linear-gradient (bottom right, , ); /* Para Opera 11.1 a 12.0 */

   background: -moz-linear-gradient(bottom right, , ); /* Para Firefox 3.6 a 15 */

   background: linear-gradient(bottom right, , ); /* Sintaxis estándar */

}

</style>

Ahora añadiremos nuestro contenido dinámico al fragmento de CSS. El código final debería quedar exactamente así:

Haz clic en el botón Guardar y cerrar (Save & Close). Con la incrustación HTML seleccionada en el panel del navegador, abre el panel de elementos y coloca un div debajo. Asígnale la clase "background-gradient" y añade los siguientes ajustes:

• Relleno inferior: 10px
• Altura mínima: 200px

Ahora añade otro HTML Embed al div background-gradient. Cuando se abra el panel HTML, añade el siguiente fragmento:

<div class="background-gradient "></div>

En el espacio junto a la última comilla, añade el campo dinámico "Name". Asegúrate de que haya un espacio entre background-gradient y el campo dinámico.

Al pulsar Save & Close, verás cómo los degradados dinámicos rellenan los divs creados anteriormente. A continuación, añade un div al contenedor del elemento de colección y asígnale la clase "Flex Row" con los siguientes ajustes:

• Display: Flex, Horizontal, Justify:Center, Align:Center

Añade un div a la fila flexible recién creada, asígnale la clase "Tooltip Wrapper" y establece el display en Position: Relative.

Coloca un bloque de texto en el div tooltip wrapper, asígnale la clase "hex-code" y utiliza los siguientes ajustes:

• Margen izquierdo y derecho: 10px
• Tamaño de fuente: 18px
• Color de fondo: Transparente (esto es necesario, ya que vamos a añadir HTML Embeds y algunos estilos predeterminados añaden un color de fondo un poco más adelante).

Ahora coloca otro widget HTML Embed junto al bloque de texto. Copia y pega el siguiente fragmento de marcado en el modal de HTML Embed.

<button id="btn" class="btn hex-code" data-clipboard-text=""></button>

Haz clic en Guardar y cerrar.

Ya puedes eliminar el bloque de texto del código hexadecimal de la colección; solo lo necesitábamos para darle estilo al texto del HTML Embed.

Coloca un nuevo bloque de texto debajo del HTML Embed del código hexadecimal y asígnale la clase "Tooltip" con los siguientes ajustes:

• Relleno (todos los lados): 5px
• Posición: Absoluta, Superior, -150%
• Tamaño de fuente: 12px
• Alineación del texto: Centrado
• Color de fondo: #f1f1f1
• Radio del borde: 3px

Ajustes de sombra de caja:

• Color: rgba(0, 0, 0, 0.48)
• Distancia: 1px
• Desenfoque: 3px

Cambia el texto a "Haz clic para copiar" y tendrás una etiqueta emergente con este aspecto:

Dejaremos las etiquetas emergentes aquí por ahora, pero volveremos más tarde para añadir interacciones heredadas.