Currículo: este documento representa una parte del complemento práctico del Tema 3. Desarrollo web para Computación y Robótica de 1ºESO.
Tabla de contenidos
Como requisito previo, es necesario que tengas una cuenta de usuario registrada en la aplicación. Si no sabes cómo hacerlo, sigue estos pasos. Además, debes conocer la interfaz de usuario del programa, así que revisa esto si no tienes muy claro dónde se encuentra cada elemento de Webflow. Para finalizar, es muy recomendable que conozcas el funcionamiento del modelo de cajas de la web.
A lo largo de esta guía vamos a aprender a gestionar los estilos de los componentes que forman una web.
1. Introducción
Se trata de guardar con un nombre la configuración de las propiedades de un elemento -a ese nombre le llamamos class-, para que luego podamos aplicárselas a otros elementos, sin que sea necesario volver a aplicarles esas propiedades una a una a cada elemento.
2. Crear un estilo personalizado
Por ejemplo: vamos a añadir una caja a nuestro lienzo, y dentro de ella, vamos a meter un párrafo.
Ahora, vamos a modificar las propiedades del Div Block, para ponerle un borde rojo de 5px y un color de fondo gris clarito. Esto es algo que ya hemos hecho en varias ocasiones, así que, no debes tener dificultades para lograrlo:
Lo que vamos a hacer ahora -teniendo la caja Div Block activada- es irnos a las propiedades Style:
Ese cuadradito azul que sale, es el nombre por defecto que Webflow ha asignado a la configuración de estilos de esa caja.
Una configuración de estilos determinada se llama class. En este caso a esa caja que tenemos en nuestro lienzo se le está aplicando el class Div Block 3.
Vamos a situarnos encima, desplegar sus opciones y a cambiarle el nombre -opción Rename class– :
Le vamos a poner CajaRoja:
Ahora, vamos a darle estilos al párrafo, así que lo activamos y le cambiamos las propiedades, para dejarlas como se muestra a continuación. Además, en el panel de Style vamos a renombrar su class para llamarle ParrafoCursiva:
Ya tenemos nuestra primera caja -y su contenido- terminadas.
Ahora vamos a hacer lo mismo, añadiendo otra caja -con otro párrafo dentro- pero esta vez le vamos a poner al Div Block un borde verde y un fondo celeste. A esa caja le renombraremos su class para llamarle CajaVerde. Y a su párrafo, le vamos a cambiar también las propiedades para que aparezca otro tipo de letra y en negrita. A su class le llamaremos ParrafoNegrita.
Nuestro árbol de componentes quedaría así:
Y esta sería la configuración de las propiedades de la caja y el párrafo:
 |  |
Muy bien, tenemos lo que queríamos.
Ahora, vamos a configurar el «layout» de nuestra página para que se muestre en forma de parrilla –Grid– con 3 filas –Row– y 3 columnas –Column-.
Si recuerdas, de la práctica anterior, esto lo conseguimos activando el Body y cambiando su propiedad Display:
 |  |
Observemos cómo va quedando nuestra página:
3. Aplicar estilos guardados
¿Qué utilidad nueva tiene todo lo que hemos hecho con los class?
Pues que podemos crear cajas y párrafos con esas propiedades sin necesidad de tener que especificarlas manualmente, simplemente le ponemos el nombre de un class que ya tengamos guardado, y automáticamente se le aplicarán todos esos estilos.
Por ejemplo, vamos a añadir a nuestro árbol de componentes –Navigator– una nueva caja, y dentro de ella, un nuevo párrafo:
Este es el aspecto que tendría nuestra web en este momento:
Como puedes ver, nuestra última caja no tiene aplicado ningún estilo, pero esa es precisamente la utilidad que estamos aprendiendo.
Activa la última caja, el último Div Block, y en su sección de Style, pincha dentro y selecciona el class que quieres aplicarle, en nuestro caso CajaRoja, para aplicarle los estilos de esa caja:
Si no recuerdas cómo se llamaba el class que quieres usar, puedes hacer dos cosas: (1) Pinchas dentro del Style selector, y te saldrá una lista de los últimos class usados; o (2) empiezas a escribir el nombre del class que buscas, y el Style selector te ofrecerá algunas sugerencias.
Al hacerlo, observa cómo se ve ahora la caja:
Se han aplicado los estilos de la caja, pero el párrafo sigue igual.
Ahora activa el último párrafo, y aplícale el class ParrafoNegrita:
Acabamos de combinar los estilos de una caja y un párrafo, simplemente asignándole un class que previamente habíamos guardado.
De esta manera podemos hacer cajas con CajaVerde–ParrafoCursiva, CajaRoja–ParrafoNegrita, una CajaRoja con párrafo normal, ParrafoCursiva con caja normal, o cualquier otra combinación que se nos ocurra:
Ahí radica la potencia de los estilos: nos permite acelerar el diseño estético de nuestro sitio web.