Diseña y publica tus sitios rápidamente

Muestra tu contenido a través de pestañas y acordiones

¡Hemos lanzado una app nueva para Breezi! Se llama Tabs and Accordions y con ella obtienes una nueva manera de agregar contenido a tu sitio. Puedes optar por un estilo de pestaña (tab) en el que puedes visualizar tu contenido a través de estas, o de acordión (accordion) que, como su nombre lo indica, tiene forma de acordion. En este tutorial te enseñaremos a que la uses como campeón.

Nota: Esta app reemplazará la de Tabbed Widget así que te recomendamos que traslades tu contenido a esta app. Con la app de Tabs and Accordions tienes muchas opciones para personalizarla y cambiar su estilo, dándole un toque interesante a tu sitio.

Para instalarla

Dirígete a la App Store en la barra inferior y busca la opción de “Tabs and Accordions”. Para instalarla, solamente tienes que arrastrar el botón de “Install New” hasta tu layout.

"Tabs and Accordions" en el menú de las apps

“Tabs and Accordions” en el menú de las apps

A continuación podrás ver una imagen de la forma predeterminada de la app. Como te darás cuenta, siempre se carga con la opción de pestaña o “Tab”.

Forma predeterminada de la app de Tabs

Forma predeterminada de la app de Tabs

Aquí podrás ver la forma predeterminada del estilo de acordion en la app.

El acordión con su apariencia predeterminada

El acordión con su apariencia predeterminada

En la sección de “App Settings” de este tutorial, te enseñaremos a cambiar entre la opción de pestaña y de acordión.

Para editar el contenido

Para abrir el panel CMS de esta app, puedes hacer clic en el botón de “Edit Content” en la barra de herramientas o hacer doble clic en un lugar que se pueda editar dentro de la app. Toma en cuenta que estos son los pasos a seguir sin importar si tienes la app en estilo de Accordion o de Tab.

"Edit Content" en la barra de herramientas de la app

Haz clic en el ícono del lápiz para editar el contenido de la app

Al entrar al panel a través de la barra de herramientas, verás que en él aparecen dos pestañas a la izquierda: “Manage Tabs” y “New Tab”.

Manage Tabs (administrar pestañas)

En esta opción es donde podrás administrar las pestañas de tu app (editarlas, eliminarlas y reorganizarlas).

"Manage Tabs" en el panel CMS

En “Manage Tabs” podrás editar, eliminar y cambiar el orden de tus pestañas

Para eliminar uno de los elementos, solamente tienes que hacer clic en su respectivo vínculo llamado “Delete”.

Si tienes más de una pestaña y quieres cambiar el orden en que aparecen, haz clic en una y arrástrala hasta su nueva posición.

Para editar alguno de tus elementos, haz clic en el botón de “Edit” que está a su derecha con el ícono del lápiz. Ahí se abrirá una nueva sección donde verás las opciones que puedes editar: el título y texto de la pestaña (incluyendo la opción de agregar imágenes y videos). Asegúrate de hacer clic en “Save” cuando termines de editar para que se guarden los cambios.

"Edit Tab" en el panel CMS

Aquí podrás editar uno de los elementos de tu app

New Tab (pestaña nueva)

Para agregar una pestaña nueva, tienes que hacer clic en la pestaña de “New Tab” en el lado izquierdo del panel CMS. Ahí es donde podrás agregar un título (Tab Title) y un texto para ese nuevo elemento. Cuando hayas terminado, recuerda hacer clic en “Save” y luego en “Close” para cerrar el panel.

"New Tab" en el panel CMS

Agrega más contenido en la pestaña de “New Tab”

Para editar su configuración

Haz clic en “Edit Settings” de la barra de herramientas de la app para ver todas las opciones que tiene para editar su configuración. Al hacerlo, se abrirá un panel nuevo. Recuerda hacer clic en “Save” para guardar los cambios hechos a la app.

"Edit Settings" en la barra de herramientas de la app

Haz clic en el botón de la herramienta para ver las opciones de edición de la app

App Settings

"Apps Settings"

En “App Settings” podrás editar la configuración general de la app de Tabs and Accordions

App Style (estilo de la app): Aquí es donde puedes cambiar entre la vista de pestañas (tabs) y de acordiones (accordions) de la app. Tabs

Transition Speed (velocidad de la transición): Puedes elegir qué tan rápido suceden las transiciones al estar cambiando entre una pestaña y otra. Puedes hacer que sea fast (rápido), slow (lento) o medium (a velocidad media).

Tabs Style (only) Settings (configuración para la opción de pestaña)

Estas opciones solamente están disponibles para la forma de pestaña en esta app.

"Tabs Style (only) Settings"

Las opciones para “Tabs” en la app

Tabs Position (posición de la pestaña): Aquí puedes elegir si quieres tener las pestañas a la izquierda (Left), arriba (Top), a la derecha (Right) y abajo (Bottom) del contenido principal.

Fit Content To Tabs Size (acomodar el contenido al tmaño de las pestañas): En esta casilla podrás elegir si quieres que tu contenido principal tenga el mismo ancho o altura (dependiendo de la posición) que las pestañas.

Transition Effect (efectos de transición): Puedes hacer que tu contenido se deslice (Slide) o se difumine (Fade) al cambiar de pestaña.

Propagate Style to All Pages (propagación de estilo)

Al marcar esta opción, todas las versiones de esa app tendrán el mismo estilo a lo largo y ancho de tu sitio Breezi. Además, si actualizas una app en una página, los cambios se verán reflejados en todas las páginas donde esté instalada esa app.

Si deshabilitas la opción de “Propagate Style to All Pages”, los estilos de esa app se administrarán de forma independiente. Toma en cuenta que esta casilla está marcada predeterminadamente.

Sus dots de estilo

Estos son los dots de estilo para la app de Tabs and Accordions. La mayoría de ellos tienen las opciones de personalización que ya conoces (si necesitas un recordatorio, haz clic en el vínculo). Sin embargo, hay dos que son un poco diferente y aquí te explicaremos qué hacen.

Los dots de estilo para la app de Tabs and Accordions

Los dots de estilo para la app de Tabs and Accordions

Para dar estilo al texto

Primero, uno de los dots más importante: el que maneja los estilos de tus textos en la app. Para abrirlo, haz clic en el dot que está sobre el texto. En la siguiente imagen podrás ver al dot al que nos referimos.

Opciones de estilo para el texto en la app de Tabs and Accordions

Opciones de estilo para el texto en la app de Tabs and Accordions

Al hacer clic en él, se abrirá un panel donde podrás ver las opciones que tienes para los textos. Es muy parecido al Bulk Style Editor porque a la izquierda hay varias pestañas con las que puedes elegir qué parte del texto quieres modificar. En la sección de la derecha es donde podrás dar formato a los textos (tipografía, tamaño, color, etc.).

Para dar estilo a las pestañas

Esta opción es solamente para la app cuando está en forma de pestañas. Como verás, puedes ajustar las opciones para los botones o pestañas al hacer clic en el dot que está sobre el contenedor. Puedes usar separadores como balas, pipas, guiones; contenedores con forma de botón o puedes elegir que no tengan ninguna de estas opciones.

Opciones de dot de estilo para las pestañas

Opciones de dot de estilo para las pestañas

¡Voilà!

¡Eso es todo lo que necesitas saber sobre esta nueva app! Ahora tienes otra manera de agregar tu contenido de forma creativa. ¡Pruébala en tu sitio Breezi!

¿Tienes dudas? Háznoslas saber en la sección de comentarios.