Diseña y publica tus sitios rápidamente

¡Crea un skin para tu sitio Breezi!

En Breezi, tenemos una herramienta que te permite aplicar un estilo específico a una o todas tus páginas sin que se altere tu contenido. Además, puedes guardar los estilos para usarlos en un futuro. La herramienta se llama Skins y en este tutorial te enseñaremos a crear tu propio skin para que puedas usarlo donde quieras y cuando quieras.

¿Qué son los skins?

En español, skin significa “piel” y eso es lo que emulan en tu sitio. Los skins son una serie de reglas y estilos que se aplican al contenido de tu página. Con ellas puedes colorear y dar cierto estilo a tu sitio sin tener que eliminar o reemplazar elementos. En otras palabras, “es una carátula para tu sitio que funciona independientemente del layout, contenido o acomodo de las apps”.  Los skins serán de gran ayuda para los diseñadores o creativos que usen Breezi porque podrán agregar una prediseñada o podrán crear una para utilizarla más adelante.

En esta imagen podrás ver algunas de los skins que te ofrecemos.

Skins showcase

Estas son algunas de los skins en nuestro repertorio. ¡Pronto agregaremos más!

En las siguientes secciones podrás aprender a crear tu propio skins en Breezi

Etiqueta tus textos

Una vez que termines de agregar el contenido a tu sitio Breezi, podrás seguir con el estilo del mismo. Empieza por definir el contenido de tu sitio; es decir, agrega las etiquetas correspondientes.

Puedes agregar etiquetas H a tus textos para después modificar su estilo con el Bulk Style Editor. Esto logrará que el diseño sea consistente. Necesitas tener claro qué etiquetas vas a usar. Toma en cuenta que no es necesario usarlas todas pero intenta usarlas de forma lógica y consecuente (del H1 al H6).

En la siguiente imagen podrás ver algunas de estas etiquetas en acción. Haz doble clic en el texto y selecciona una de las etiquetas en el menú desplegable del editor.

Etiquetas

Aquí puedes ver que cada una de las secciones del texto tiene una etiqueta diferente

Utiliza el Bulk Style Editor

Ya que hayas organizado tu layout, agregado el contenido y etiquetado los textos, podrás empezar a agregar estilos con el Bulk Style Editor. Los cambios que hagas con el Bulk Style Editor serán parte del skin y se guardarán para cuando lo utilices en un futuro. Aquí podrás encontrar una guía que te ayudará a modificar los estilos de tu skin para que puedas utilizarlo en un futuro.

Las pestañas de los contenedores

Puedes comenzar a trabajar en cada una de las pestañas que están del lado izquierdo en el Bulk Style Editor. Al hacer clic en cualquiera de las pestañas podrás ver los estilos que puedes modificar para ese componente. Además, verás que puedes elegir los bloques a los que les quieres cambiar el estilo.

En la siguiente imagen verás que al hacer clic en una de las pestañas, se despliegan algunas subsecciones. Al hacer clic en ellas, obtendrás otras opciones de personalización.

Container Tabs

Ejemplo de lo que puedes modificar con las pestañas del Bulk Style Editor

Revisa cada una de las pestañas del panel e intenta con diferentes estilos hasta que te sientas satisfecho con el resultado. Al cerrar el panel, los cambios se guardarán automáticamente.

Con las pestañas puedes modificar los estilos de los elementos principales en tu layout. Page Container es la más amplia de todas. Mientras más bajes en el menú, más específica será el área que dicha pestaña modificará. Recuerda que todos estos elementos tienen una jerarquía; es decir, ya que el Page Container abarca todo, cuando modifiques alguna de las otras secciones (bloques, contenedores, etc.) estos nuevos estilos sobreescribirán aquello que hayas modificado en Page Container o en las pestañas anteriores.

Textos

Ahora es momento de cambiar la tipografía. Haz clic en la pestaña de texto o Text y empieza por editar el texto normal. Cuando termines, dirígete a cada una de las etiquetas H y a los vínculos.

En esta siguiente imagen verás que al editar las opciones de texto en la pestaña de H4, el color, altura y espaciado del contenido (aquel con la etiqueta de H4) se ajustará a los cambios que se hicieron en la pestaña. Cuando termines tu Skin, verás que todos los textos etiquetados con H4 adoptarán estos estilos.

Tipografía

Aquí puedes ver cómo aquello que fue modificado en el Bulk Style Editor, se aplica en el texto de tu sitio.

Como ya etiquetaste tu texto, todos los cambios que hagan a esa etiqueta, se verán reflejados en aquellas secciones donde usaste esas etiquetas en específico. No es necesario que etiquetes todo tu texto pero puede ser muy útil para cuando apliques el skin.

Botones e imágenes

Ahora sigue cambiar el estilo de los botones e imágenes en tu sitio. Aunque estos pueden ser pocos, son una parte importante de tu sitio y deben ser consistentes.

A continuación podrás ver que, al igual con otros de los elementos en tu sitio, puedes cambiar el aspecto de los botones. Selecciona la pestaña de “Buttons” para hacerlo.

Botones en el Bulk Style Editor

Edición de botones con el Bulk Style Editor

Con el Bulk Style Editor puedes modificar elementos en tu página y aplicarlos a los bloques que quieras.

Existen dos cosas que debes tomar en cuenta cuando estés usando el Bulk Style Editor para crear un Skin. Una de ellas es que estas modificaciones no se aplicarán a elementos que no existan. Por ejemplo, no se aplicará el estilo de los botones si no hay botones. Si no hay un elemento al cual agregarle los estilos, estos no se guardarán con el Skin.

La otra es que estas modificaciones se ven reflejadas solamente en los bloques y elementos seleccionados. Por ejemplo, si todos los bloques están seleccionados al modificar las imágenes, todas las imágenes en todos los bloques cambiarán su estilo.

Para guardar tu Skin

Una vez que estés satisfecho con todas las modificaciones estéticas que hiciste con el Bulk Style Editor, puedes guardar tu Skin. Haz clic en la pestaña de “Skins” en la barra inferior. Luego, presiona “Save Current Page Skin”. Esto abrirá una ventana donde te preguntarán por el nombre de tu Skin (Skin Name). Cuando termines, haz clic en “Create!”. Así, tu skin se guardará para que lo puedas usar en un futuro.

Panel de Create Skin

Haz clic en el botón de “Create!” para que puedas guardar tu propio skin.

Con esta guía podrás crear tu propio skin con layouts, textos, imágenes y botones definidos. ¡Úsala cuando quieras! También puedes crear skins parciales con el Bulk Style Editor.

Recuerda que puedes aplicar tu skin a una o a todas tus páginas. ¡O puedes utilizar alguna de nuestra sección de Skins!