Diseña y publica tus sitios rápidamente

Usa el Bulk Style Editor de una forma más eficiente

Puedes usar el Bulk Style Editor de Breezi para personalizar los elementos, al igual que con los dots de estilo, pero con un alcance mucho mayor. Con él es mucho más fácil ser consistente al mismo tiempo de que te permite ser selectivo.

Como sabrás, nuestro editor te da la oportunidad de tener todo el control para modificar el diseño de tu sitio rápida y fácilmente. En este tutorial, te sugeriremos una serie de pasos que te servirán de guía para aprovechar todo el potencial del Bulk Style Editor para que puedas mejorar tu proceso de diseño.

El Bulk Style Editor

Puedes hechar un vistazo a la sección de recursos al final de este artículo. Ahí conocerás algunas de las características básicas e intermedias del Bulk Style Editor (en caso de que no las conozcas). Dirígete a esa sección para aprender más sobre cómo implementar esta funcionalidad clave en Breezi.

Sigue un proceso lógico

Una vez que termines de preparar tu página y que ya hayas agregado todo el contenido, necesitarás categorizarlo y empezar a pensar en el estilo que quieres para él. Si todavía no sabes qué contenido utilizarás, podrás usar un texto de muestra (como el de Lorem Ipsum) para que te des una idea de cómo lo organizarás.

Los cambios en el Bulk Style Editor se reflejan de lo general a lo particular. Esto quiere decir que si haces un cambio a un bloque y luego decides cambiar el estilo de la columna, este último sobreescribirá aquel que hiciste al bloque (porque un bloque contiene secciones que a su vez, están formadas por columnas). Es por eso que es buena idea seguir un proceso lógico al editar en el Bulk Style Editor si quieres conservar los cambios que has hecho.

Por ejemplo, puedes empezar a editar los elementos del layout, luego el texto (incluyendo las etiquetas H y los vínculos) y dejar los detalles y casos especiales para el final. Más adelante podrás ver cómo muchos de nuestros usuarios y diseñadores llevan este proceso.

En la siguiente imagen podrás ver que el Bulk Style Editor está diseñado para que vayas editando los elementos en las pestañas de forma ordenada (arriba a abajo).

Main

El Bulk Style Editor de Breezi

Ten como objetivo seguir un orden consecutivo, lógico y constructive que permita que el diseño de tu sitio fluya fácilmente.

Combina y divide los bloques

Con el Bulk Style Editor tienes la opción de seleccionar todos los bloques para modificarlos al mismo tiempo o seleccionar unos cuantos para editarlos de forma independiente. Esto quiere decir que debes fijarte muy bien en qué bloques seleccionaste para que se apliquen los cambios en donde no los quieras.

Hay una casilla en la parte inferior del Bulk Style Editor que dice “Merge Selected Block Controls”; es decir, cuando esta casilla esté marcada, podrás modificar todos los bloques al mismo tiempo. Si quieres aplicar estilos a bloques específicos, dirígete al menú desplegable en el Bulk Style Editor que se encuentra del lado superior izquierdo sobre las pestañas (como se ve en la imagen a continuación) o en el menú que aparece en cada una de las pestañas.

El menú desplegable del Bulk Style Editor

Todos los bloques están seleccionados en el menú desplegable del Bulk Style Editor

En la siguiente imagen podrás ver dónde puedes habilitar o deshabilitar la opción de “Merge Selected Block Controls”.

Merge Selected Block Controls

Utiliza esta opción si quieres modificar todos los bloques al mismo tiempo

Recuerda tener mucho cuidado con los bloques que seleccionaste. Revisa que estés editando solo aquellos que quieres modificar para que no se arruine tu trabajo.

Las pestañas

Ahora sigue repasar cada una de las pestañas para aprender qué hace cada uno y cómo se deben de usar. Algunas de estas tienen opciones muy similares pero están divididas en categorías para que sea más fácil utilizarlas. Asegúrate de familiarizarte con las secciones de tu sitio para que sepas lo que puedes hacer con el Bulk Style Editor.

Las pestañas son las que estan del lado derecho en el Bulk Style Editor, justo debajo del menú desplegable de bloques.

pestañas

Algunas de las pestañas en el Bulk Style Editor

Subsecciones de las pestañas

Al seleccionar una pestaña, aparecen las opciones de personalización para ella. Sin embargo, podrás darte cuenta de que también se abren algunas variables específicas para la pestaña debajo de la misma.

Así es como se ven las subsecciones de la pestaña de Text. Toma en cuenta que no todas las pestañas contienen estas secciones

Secciones

Puedes editar el formato del texto para las etiquetas H y vínculos

La pestaña de “All Colors”

Una vez que tengas listo tu contenido, podrás empezar a darle un estilo. “All Colors” significa “todos los colores”. Al abrir el Bulk Style Editor verás que es la primera pestaña que aparece. Esta es la pestaña más general y básica de todas.

Como sabrás, los colores tienen un papel muy importante en el diseño de tu sitio. Con ella puedes modificar los elementos principales de tu sitio sin discriminar entre pestañas, bloques o el layout (a menos de que hayas habilitado la opción de “Merge Selected Block Controls”).

Pestaña de "All Colors"

Estas son las opciones de la pestaña de “All Colors”

Te recomendamos que esta sea la primera pestaña que utilices y que, una vez que estés satisfecho con el resultado, no vuelvas a usarla (a menos de que quieras que todos tus colores se modifiquen).

Trabaja con tus pestañas

Las pestañas que siguen son un poco engañosas. Estas son las de Page, Block, Section, Column, App and Inner App (Página, Bloque, Sección, Columna, App y Dentro de la App) y estas son el núcleo de tu layout. Dichos elementos son la base de tu sitio ya que con ellos puedes definir el flujo y cómo funciona. Haz clic aquí para ver cómo cada uno de estos son parte esencial de tu layout.

Cada una de estas secciones de tu sitio tienen su propio dot con el que puedes ajustar sus estilos. Sin embargo, verás que también puedes modificarlas con el Bulk Style Editor.

Estos contenedores van de lo general a lo particular en tu layout; es decir, son un diseño en capas. La pestaña de Page es la capa del fondo, así que, todos los cambios que hagas a capas que estén más arriba que esta sobreescribirán o quedarán encima de aquellos que hayas hecho en la pestaña de Page.

En la siguiente imagen podrás ver una versión en 3D de una página en Breezi para que comprendas mejor el concepto de que una capa está “sobre” la otra.

Imagen de Firefox 3D Tilt Inspect

Imagen de Firefox 3D Tilt Inspect para que tengas una mejor idea de cómo funcionan estas capas

Por ejemplo, al elegir un color de fondo para una sección y luego otro para la columna, For example, choosing a background color for a Section and then another one for a Column and setting both containers background color opacity at 25% will create a mixture of both colors. Take a look at the following images and see how the layers work.

Textos, vínculos y etiquetas H

Con etiquetas puedes mejorar la jerarquía y lo referente a SEO en tu sitio. Es por ello que es una buena idea utilizarlas en tus textos. Para asignar una etiqueta a tus títulos, subtítulos o texto en general, debes seleccionar el texto y definirlo con una etiqueta. Recuerda que mientras más bajo el número de la etiqueta (H1, H2, etc.) más alto el valor de ese texto en específico.

En esta imagen verás cómo agregar etiquetas a algunos de los textos en tu página.

Etiquetas y textos

Etiquetas y textos

Recuerda que debes usarlas de forma lógica y consecutiva y aunque no tienes que usar todas las etiquetas, no te saltes el orden. Por ejemplo, si tienes 3 textos de diferente  importancia, etiquétalos como  H1, H2 y H3 (en lugar de desorganizarlos y ponerlos como H1, H4 and H2)

En esta imagen puedes ver qué uso tiene cada etiqueta: H1 para títulos, H2 para subtítulos y H3 para definir secciones dentro de los subtítulos.

Etiquetas

Hay un propósito para cada etiqueta

Abre el Bulk Style Editor y en la pestaña de Text verás que tienes la opción de modificar el estilo de las etiquetas y vínculos. Es de gran importancia seguir la secuencia: del texto normal, a las secciones, vínculos y etiquetas (del H1 al H6). Edita los estilos hasta que sientas que se ven como tu quieres. Deja los detalles para después (los cuales puedes definir con los dots de estilo).

Botones

Los botones son una parte muy específica de tu sitio y puedes editarlos rápidamente en la pestaña de “Buttons”. Te recomendemos que dejes la edición de los botones al final, una vez que hayas definido los estilos más básicos. De esta manera el proceso de diseño será más fluido. Con esta pestaña solamente podrás editar los botones para darles la apariencia exacta para el sitio que estás diseñando. Como sabes, puedes editarlos todos al mismo tiempo o modificarlos individualmente.

En esta imagen verás cómo aquello que editas en el Bulk Style Editor se ve reflejado en el elemento que está en tu sitio.

Un botón que se está editando con el Bulk Style Editor

Un botón que se está editando con el Bulk Style Editor

Imágenes

Esta útlima pestaña es para manejar el aspecto estético de las imágenes. Cabe mencionar que funciona de forma muy parecida a la pestaña de Buttons: te puede servir para dar consistencia a todas las imágenes en tu página (o en parte de ella). Sin embargo, toma en cuenta que las imágenes dentro de la app de texto no se modifican con esta pestaña.

Imágenes siendo editadas con el Bulk Style Editor

Imágenes siendo editadas con el Bulk Style Editor

Tips

  • Planea lo que editarás con anticipación. De esta manera no habrá confusiones en el editor y ya sabrás qué estilos quieres aplicar (colores, tipografías, contenido, etc.).
  • Asígnale un propósito a tus etiquetas para que sea más fácil saber en qué texto debes aplicarlas. Una vez que hayas definidos tus textos con las etiquetas, deberás empezar a editar su estilo.
  • Sigue un proceso lógico y consecutivo. Al hacerlo, te evitarás tener que regresar y editar las pestañas nuevamente. Ve de arriba a abajo  en el Bulk Style Editor y abre cada una de las pestañas y sus subsecciones. También deberás seguir un orden lógico con las etiquetas.
  • Una vez que termines con una sección importante, cierra el Bulk Style Editor para que se guarden los cambios.

Errores comunes

  • Regresar a pestañas más generales a editarlas. Al hacerlo, es posible que sobreescriba algunos cambios que hiciste en tu sitio.
  • No usar unas de las pestañas. Intenta editar cuanto puedas con el Bulk Style Editor. Te ahorrará tiempo y logrará que haya consistencia en tu sitio.
  • No revisar qué bloques están seleccionados. Si no revisas tus bloques, podrías editar secciones que ya estaban terminadas.

Ya debes tener un poco más claro cómo funciona el proceso de diseño con el Bulk Style Editor. Sin embargo, recuerda que no hay una forma correcta de diseñar en Breezi. Estas son solamente recomendaciones. Lo importante es que estés satisfecho con el diseño de tu sitio. En la sección de recursos podrás encontrar tutoriales sobre temas relacionados con este. Si tienes alguna duda, publícala en la sección de comentarios.

Recursos

Constructor de Layouts

Bulk Style Editor

Propagación del Bulk Style Editor