Diseña y publica tus sitios rápidamente

Aprende a sacarles partido a los perfiles de los dots

Aquí en Breezi trabajamos para hacer que el proceso de diseño fluya rápidamente para nuestros usuarios. Es por ello que decidimos crear una forma de administrar y propagar los estilos de los dots. En este artículo te enseñaremos todo lo que tienes que saber sobre los Dots Propagables. Con ellos podrás acelerar la creación de tu sitio al mismo tiempo que obtendrás control total sobre los elementos de tu sitio.

Dots Propagables

Puedes crear estilos que se propaguen a lo largo de tu sitio

Utiliza los perfiles de los dots como clases de CSS

Con nuestros dots puedes modificar bordes, colores, espaciado, márgenes y más en las apps y componentes del layout. Cada uno de estos elementos tiene varios dots de estilo con los que podrás manipular la apariencia de cada uno de ellos. Una vez que sepas usar los dots de estilo, podrás empezar a usar sus perfiles. Hemos agregado una función a los dots que te permitirá propagar los estilos de un dot en específico al guardarlo como un perfil (o clase de CSS) y aplicarlo a otros elementos similares. Esto quiere decir que nuestra app de diseño realmente es un editor visual de CSS.

El proceso es bastante simple: haces clic en un dot para abrirlo, das estilo al elemento, guardas estas modificaciones como un perfil y, al abrir otro dot, verás que puedes aplicar y vincular el perfil que creaste a este otro elemento.

Pero, ¿para qué sirve? Al usar los perfiles de los dots, ahorrarás tiempo porque no tendrás que editar los estilos de tus elementos individualmente. Esta herramienta junto con el Bulk Style Editor, te ayudarán a diseñar tu sitio más rápido que nunca.

Por ejemplo, si quieres que todos tus botones tengan un mismo color, sombreado, bordes, etc., pero no quieres modificarlos uno por uno porque te tomaría mucho tiempo, solamente tienes que usar los perfiles de los dots. Guarda el perfil y aplícalo a cada uno de los dots. Esto es muy similar a lo que se logra con las clases de CSS al codificar un sitio.

Además, si quieres vincular todos estos botones y cambiar su estilo más adelante, puedes hacerlo al publicar los cambios y guardar y propagar ese estilo a cada dot donde se aplicó ese perfil.

Guarda y propágalos

Algo que debes tomar en cuenta es que al hacer un cambio en un dot al que le aplicaste el perfil de otro dot (más adelante tocaremos el tema más a fondo), los cambios no se transferirán a otros dots que estén vinculados a ese mismo perfil automáticamente. Para hacerlo debes publicar esos cambios y hacer clic en la opción de Save And Propagate que aparece al hacer clic en el ícono del engrane en la parte superior del panel.

Save & Propagate

Usa el botón de Save & Propagate para propagar los cambios hechos en ese dot, a los otros dots con el mismo perfil

Para guardar un perfil

Lo primero que debes hacer es abrir el dot y después de modificar los estilos, deberás guardarlo. Haz clic en el botón de “Save Style as Dot Profile” en la parte inferior del panel.

Save Styles as Dot Profile

Este es el vínculo en el que debes hacer clic para guardar el perfil del dot

Al hacerlo, se abrirá otro módulo en el que tendrás que asignarle un nombre al perfil del dot. Debajo del espacio para el nombre, verás una casilla que dice “Save as linked dot profile”, la cual está marcada de forma predeterminada. Con esta opción podrás vincular este dot con otros que tienen el mismo perfil. Si no quieres que todos los dots a los que les aplicaste ese perfil estén vinculados, deberás deshabilitar la opción.

"Save as linked dot profile"

Deshabilita esta opción si no quieres que este perfil se propague a los otros dots que estén vinculados a él

Perfiles vinculados y la propagación

En caso de que hayas dejado la casilla marcada, te aparecerá un mensaje en el que se te preguntará si quieres que este dot también esté vinculado al nuevo perfil que creaste. Al hacer clic en “Yes” el editor vinculará ese dot a ese perfil y a cualquier otro dot al que le apliques ese perfil.

Vinculación de dots

Puedes elegir si quieres que el dot que editas actualmente se vincule al perfil que acabas de crear o no

Después de hacerlo verás que el dot vinculado será de un color más oscuro.

Dots

Aquí puedes observar las diferencias entre un dot que no está vinculado (el blanco) y otro que sí está (el gris)

Para cargar y aplicar un perfil

Ahora que ya guardaste las características en un perfil para tu dot, puedes hacer clic en otro dot y seleccionar la opción de “Load Dot Profile” para cargar los perfiles que tienes guardados. Esto logrará que se abra otro módulo donde verás los perfiles que has guardado, sus nombres, su clasificación y si están vinculados o no. En la parte superior de dicho módulo encontrarás la clasificación del dot que estás utilizando (es decir, a qué elemento pertenece: columnas, imágenes, botones, etc.). Pasa el cursor sobre el perfil que quieras usar y haz clic en el botón de “Load” que aparecerá a su derecha.

Load a dot profile into this dot

Aquí puedes ver que la flecha negra te muestra el tipo de dot que está seleccionado y la roja te enseña la información de un dot: nombre, clasificación, vinculación, etc.

Si el dot que seleccionaste y el perfil que le aplicarás son de la misma categoría o clasificación (por ejemplo, un perfil para un botón y el dot para un botón), el editor se encargará de aplicar el perfil y vincular a los otros dots con el mismo perfil (esto si el perfil está vinculado; si no lo está, solamente aplicará el perfil a ese dot).

Correlación

Como verás, el perfil que será aplicado y el dot al que se le aplicará tienen la misma clasificación

Si decides aplicar un perfil a un dot con una clasificación diferente (por ejemplo, al aplicar el perfil de un botón al dot de una imagen), el editor te hará saber sobre esta diferencia y te preguntará si de todas formas quieres seguir con el proceso (en un caso como este, el perfil del dot no estará vinculado).

Cannot Link Dot of Different Types

Ya que el dot que estás editando y el perfil que quieres aplicar no son de la misma clasificación, estos dos no estarán vinculados

Para modificar un dot vinculado

Algo importante sobre los perfiles de los dots es que, aun si tu dot está vinculado a un perfil, no quiere decir que no puedas “liberarte” de él.

No te preocupes: si tienes un dot vinculado, aun puedes modificar su apariencia, aún cuando ya le aplicaste un perfil. Los dots grises tienen un menú que aparece al hacer clic en el ícono del engrane. Tienes las opciones de: “Load Another Profile” (cargar otro perfil), “Save It As a New Profile (guardar como perfil nuevo) y “Unlink” (desvincular).

Ícono del engrane

Haz clic en el ícono del engrane de un dot vinculado para modificarlo

Al eliminar el vínculo o aplicarle otro perfil que no esté vinculado, verás que el dot regresará al color blanco.

La pestaña de “Dots”

En la barra inferior del editor, hay una pestaña que dice “Dots”. Con este menú puedes administrar y hacer cambios a los perfiles que has guardado.

Puedes editar el perfil, guardarlo como un perfil nuevo, cambiarlo de nombre, eliminarlo cambiar sus estilos y las opciones de vinculación. Recuerda que los cambios hechos al perfil no se reflejarán hasta que hagas clic en “Save And Propagate”. Al eliminar un perfil vinculado, los dots a los que les hayas aplicado dicho perfil, serán desvinculados y el color de su dot regresará a su estado normal.

Pestaña de "Dots"

Haz clic en la pestaña de “Dots” y luego en el ícono del engrane para ver las opciones que tienes.

Clasificaciones de los dots

Hemos creado una manera de adminitrar tus dots a través de categorías que dependen del elemento que estés editando. Es decir, imágenes, botones, apps, secciones, bloques, etc. A continuación verás un listado de estas categorías y su definición.

  • Block – Bloque: Estos son los dots que controlan un área más grande y con los que puedes agregar un fondo, etc.
  • Section – Sección: Esto se refiere a aquellos dots que controlan el área que está contenida dentro de los bloques. Ahí es donde puedes instalar apps y mide 960 pixeles de ancho. Un bloque puede contener varias secciones.
  • Column – Columna: Estos dots son los que controlan las columnas, las cuales están dentro de las secciones. Dichas columnas pueden medir 160 px de ancho. Una sección puede contener 6 columnas y puedes agregar varias apps en cada una de ellas.
  • Apps: Todas las apps tienen su propio dot, el cual define el área en el que está contenida la app.
  • Inner Block App – Bloques Internos de la App: Existen algunas apps que están formadas por textos u otro tipo de área. Con estos dots puedes manipular ese espacio.
  • Image – Imagen: Todas las imágenes (excepto aquellas que están dentro de la app de texto) tienen su propio dot con el que puedes aplicarle ciertos estilos.
  • Button – Botón: Estos dots modifican los estilos de los botones.
  • Navigation – Navegación: Son dots para cambiar la apariencia de la app de navegación.
  • Text – Texto: Controlan los estilos de los textos.

Tips

-Te recomendamos que planees tu sitio antes de empezar a diseñar: piensa qué apps y componentes del layout quieres que tengan el mismo estilo. Al terminar alguno de editar alguno de ellos, guarda el perfil, aplícalo a otros dots y vínculalos en caso de que quieras hacer algún cambio.

Si tienes alguna pregunta o comentario, por favor, no dudes en hacérnoslo saber. Gracias por leer este tutorial