Diseña y publica tus sitios rápidamente

Agrega diapositvas, textos y más con la app de Super Banner

¡Breezi tiene una nueva app! Te presentamos la app de Super Banner. Como su nombre lo indica, es una versión mejorada de la app de banner. Además tiene muchísimas opciones para personalizarla. Esto es lo que la hace súper. Como siempre, puedes incluir textos, imágnes y botones pero ahora, tienes la opción de agregarles diferentes transiciones, imágenes en miniatura y más. Funciona como una fusión entre la app de Slideshow y la de Banner.

Nota: dejaremos de soportar la app de Banner en un futuro. Te recomendamos que transfieras tu contenido de la Banner app a la de Super Banner o a cualquier otra app que tu elijas.

App Premium

Esta app es premium; es decir, puedes comprarla por $5 dólares americanos. Con ella agregarás valor a tu sitio y tendrás una forma asombrosa de exhibir tu contenido.

Super Banner App

¡Pruébala!

Si quieres probar la app para que veas cómo funciona y todas las opciones que tiene, puedes hacerlo en el periodo de prueba de Breezi (son 14 días donde puedes explorar y acceder a todas las funcionalidades del editor de manera gratuita).

El botón de "Try it, it's free!"

Haz clic en este botón para probar la app de Super Banner

Para instalarla

Si quieres instalar esta app, debes buscar la opción de “Super Banner” en el menú de Apps de la barra inferior. Arrastra el botón de “Install New” que está a su derecha hasta la posición deseada en tu layout.

Botón de "Install New" de la Super Banner app

Arrastra el bottón de “Install New” de la Super Banner app para instalarla en tu layout

Cuando se cargue, se verá como en la siguiente imagen. Toma en cuenta que la app de Super Banner es tan grande o pequeña como el contenedor donde la instales.

Forma predeterminada de la Super Banner app

Configuración

Ahora nos adentraremos en la parte substancial de este artículo. Esta app tiene muchas funciones y opciones para personalizarla y aquí te enseñaremos cómo usarlas. Recuerda que debes hacer clic en “Save” cuando termines de editar su configuración para que los cambios se guarden.

Para abrir el panel de”Edit Settings”, debes hacer clic en el ícono de la herramienta que se ubica en la barra de herramientas de la app.

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

Haz clic en el botón de “Edit Settings” para editar la configuración de la app

En el panel que se abrirá podrás editar la configuración general, la configuración del contenido, de las flechas, de la lista de reproducción, su comportamiento, la propagación, entre otras cosas.

Entry General Settings (configuración general)

Aquí es donde puedes editar lo más básico de la app de Super Banner:

Estos son las opciones para la configuración general de la app de Super Banner

Estos son las opciones para la configuración general de la app de Super Banner

Autoplay: ¿Te gustaría que las diapositivas rotaran automáticamente? Si es así, marca esta casilla para lograrlo.

Transition Delay: Aquí es donde puedes decidir cuántos segundos quieres que se muestre cada diapositiva antes de que se cambie automáticamente.

Transition Fx: Si marcas la casilla de Autoplay, puedes elegir un efecto para las transiciones: Dissolve, Slide, Fly, Zoom.

Fx Speed: Haz que la transiciones sean lentas, rápidas o con una velocidad media.

Content Settings (configuración del contenido)

Con esto nos referimos a los títulos, subtítulos, descripción y botones de tus diapositivas. En esta imagen, podrás ver que estos elementos están dentro de una capa más oscura en la dispositiva.

Contenido en la dispositiva

Los Content Settings manipulan al área donde van el título, el subtítulo, descripción y botón

Y he aquí las opciones para ellos:

Opciones de condiguración para el contenido de la app de Super Banner

Opciones de condiguración para el contenido de la app de Super Banner

Content Location: Decide si quieres que el contenido de la diapositiva este dentro (Inside) o fuera (Outside) de la imagen. Por otro lado, si no quieres mostrar contenido, puedes elegir Don’t Show.

Content Position: ¡Puedes colocar el contenido donde quieras! Arriba (Top), izquierda (Left), derecha (Right) o abajo (Bottom).

Display Title: Con esta casilla puedes elegir si quieres mostrar el título de las diapositivas.

Display Sub-Title: Si quieres incluir el subtítulo, marca esta casilla.

Display Description: Si agregaste una descripción para tus diapositivas y te gustaría compartirlas, haz clic en esta casilla.

Display Button: Tienes la opción de incorporar un botón en tu app de Super Banner.

Animate After Image: Aquí puedes elegir si el contenido y la imagen deben aparecer al mismo tiempo en una transición o si la imagen debe mostrarse primero y el texto después.

Arrow Nav Settings (configuración de la navegación con flechas)

Una de las maneras en que puedes navegar a través de las diapositivas de tu app es con unas flechas. En la siguiente imagen se muestran a los lados de la diapositiva:

Flechas de la app de Super Banner

Puedes usar las flechas grises para ir a las siguientes diapositivas o a las anteriores

Puedes cambiar su posición, color, etc. Aquí tienes las opciones para ellas:

Opciones de edición para las flechas del Super Banner

Opciones de edición para las flechas del Super Banner

Arrow Type: ¿Qué figura te gustaría que tuvieran las flechas? Elige de entre esta selección: V-shape Rounded, V-shape thin, V-shape Bold, V-shape Modern, Triangle Rounded, Arrow Bold, Circled Triangle Rounded, Circled V-shape Bold, Circled Arrow Rounded, Boxed Triangle Rounded, Boxed V-shape Bold, Boxed Arrow Rounded.

Arrow Location: También puedes cambiar la posición de tus flechas: dentro (Inside) o fuera (Outside) de la imagen. Si no quieres flechas, elige “Don’t Show”.

Default Color: Puedes seleccionar un color claro (Light) u oscuro (Dark) para tus flechas.

Opacity: Aquí podrás manipular la intesidad del color de tus flechas.

Rollover Color: Un color rollover es el que aparece cuando el cursor pasa sobre un objeto. Aquí también puedes decidir si quieres que sea claro u oscuro.

Rollover Opacity: Como con el color predeterminado, edita la saturación del color que aparece cuando el cursor pasa sobre las flechas.

Playlist Settings (configuración de la lista de reproducción)

Esta opción es para editar la configuración de la lista de reproducción, la cual es otra manera de navegar por las diapositivas de tu app de Super Banner. Funciona como una vista previa de las diapositivas: tiene imágenes en miniatura y puedes mostrar los textos de la misma para que tus visitantes puedan verlas y elegir cual quieren ver en grande.

Ejemplo de una lista de reproducción en la app de Super Banner

Ejemplo de una lista de reproducción en la app de Super Banner

Edita lo siguiente para cambiar su configuración:

Opciones de configuración para la lista de reproducción en la app de Super Banner

Opciones de configuración para la lista de reproducción en la app de Super Banner

Display Playlist: ¿Dónde prefieres que se localice la lista? Puede ser dentro o fuera de la imagen. Si no quieres incluir una lista de reproducción para tus diapositivas, opta por “Don’t Show”.

Playlist Bottom: Si decides incluir la lista, puedes ponerla a la izquierda (Left), arriba (Top), derecha (Right) o abajo (Bottom) de la diapositiva.

Display Playlist Thumbnails: Aquí es donde puedes escoger si quieres exhibir imágenes en miniatura de tus diapositivas.

Display Playlist Titles: Puedes añadir los títulos de tus diapositivas a tu lista con esta opción.

Display Playlist Subtitles: Muestra los subtítulos de tus diapositivas con esta casilla.

Pagination Settings (configuración de la paginación)

Con la paginación puedes moverte a través de las páginas de tu app con la ayuda de unos botones de diseño minimalista.

Botones para moverte y ver otra diapositiva

Usa estos botones para moverte y ver otra diapositiva

Al hacer clic en “Edit Settings”, podrás ver las opciones para personalizar la paginación.

Opciones en Pagination Settings

Configura la paginación de la app con estas opciones

Pagination Location: Como con las otras configuraciones, puedes incluir la paginación: Inside Image, Outside Image o Don’t Show.

Horizontal Alignment: Puedes alinear los botones horizontalmente a la izquierda (Left) al centro (Center) o a la derecha (Right).

Vertical Alignment: Además, puedes eligir si la quieres arriba (Top) o abajo (Bottom) de la diapositiva.

Pagination Type: Tus botones de paginación pueden ser pequeños puntos (Dots) o cuadros (Squares).

Default Color: Aquí es donde puedes escoger entre una variedad de colores para tus botones.

Default Opacity: Y aquí es donde puedes decidir qué tan oscuro o claro quieres que sea ese color.

Active State Color: Aquí es donde puedes elegir el color para cuando el botón esté activo; es decir, para cuando hayas hecho clic en él.

Active State Opacity: Al igual que con el color predeterminado, puedes manipular la opacidad del “Active State”.

Mouse Over Fx: Puedes hacer que haya un efecto de difuminación (Fade) para cuando el cursor pase sobre los botones.

Mouse Over Fx Speed: Y, si quieres efecto, elige su velocidad: Slow, Medium o Fast.

Behavior Settings (configuración del comportamiento)

En esta sección aprenderás lo que puedes hacer con la configuración en cuanto al comportamiento de la app. Para activar una de las siguientes opciones, solamente tienes que marcar la casilla. Todas estas opciones son para que los elementos aparezcan solamente cuando el cursor pase sobre la diapositiva.

Behavior Settings

Puedes editar estas opciones para:

  • Display Content On Mouse Over (mostrar el contenido cuando el cursor pase sobre la diapositiva)
  • Display Playlist On Mouse Over (mostrar la lista de reproducción cuando el cursor pase sobre la diapositiva)
  • Display Arrow Nav On Mouse Over (mostrar las flechas cuando el cursor pase sobre la diapositiva)
  • Display Pagination On Mouse Over (mostrar la paginación cuando el cursor pase sobre la diapositiva)

Propagation (propagación)

Casillas para la propagación geométrica y de estilos

Casillas para la propagación geométrica y de estilos

Al habilitar estas opciones, todas las versiones de esa app tendrán el mismo estilo y todas las imágenes tendrán el mismo tamaños en todo tu sitio Breezi. Además, al actualizar una de estas apps en una página, los cambios se reflejarán en todas las páginas donde hayas instalado esa app.

Al deshabilitar las opciones de propagación (Propagate Styles to All Pages y Propagate Geometry to All Pages), el estilo y los tamaños de las imágenes de esa app se editarán de forma independiente. Toma en cuenta que estas casillas están marcadas predeterminadamente.

Contenido

Con la app de Super Banner puedes incluir títulos, subtítulos, imágenes, descripciones y botones. Al instalar la app, esta contiene dos diapositivas en su estado predeterminado. En esta sección te enseñaremos a editarlas, agregar diapositivas nuevas y más.

Para empezar, debes abrir el panel CMS para la app de Super Banner. Para hacerlo, haz clic en el botón con el ícono del lápiz, llamado “Edit Content” en la barra de herramientas de la app.

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

Para abrir las opciones de edición para el contenido de la app, haz clic en el botón de “Edit Content”

Otra forma de acceder al panel es al hacer clic en cualquier componente “editable” (es decir, que aparezca el cursor como un lápiz) dentro de la app. Solamente tienes que hacer doble clic y el panel CMS se abrirá.

Así es como se ve el panel CMS para la app de Super Banner.

"View All Slides" en el panel CMS

“View All Slides” en el panel CMS

Ahora, te enseñaremos a editar el contenido.

Para editar una diapositiva

Para editar una diapositiva existente, ya sea que quieras cambiar su título, subtítulo, descripción, botón o imagen, solo se necesita hacer clic en el vínculo que dice “Edit” localizado a su derecha en la pestaña de “View All Slides”.

Vínculo de "Edit"

Para editar una diapositiva, haz clic en su respectivo vínculo de “Edit”

Esta acción logrará que se muestren las opciones de edición para esa diapositiva. Ahí es donde podrás editar lo que quieras en cuanto a contenido para esa diapositiva. Recuerda hacer clic en “Save” cuando termines de editarla para que se guarden los cambios.

Textos

Edita el título de la diapositiva en el espacio debajo de “Slide title”. Debes seleccionar y borrar el título actual y escribir uno nuevo (si así lo deseas).

Para agregar un subtítulo, dirígete a la sección debajo de “Slide subtitle” e introduce el subtítulo para esa diapositiva.

También puedes incluir una descripción en el espacio debajo de “Slide description”.

Espacios para agregar un título, subtítulo y una descripción en el panel CMS

Introduce los textos que quieras para tu diapositiva en estos espacios

Nota: Para editar los estilos del texto (tipografía, tamaño, color, etc.), deberás cerrar el panel y utilizar sus dots de estilo.

Botón

Puedes utilizar el botón de la app para vincular tu diapositiva a otra página en tu sitio o a un URL externo. Aquí podrás ver cómo luce la forma predeterminada del botón en la app de Super Banner:

Ejemplo del botón en la app de Super Banner

En cuanto a las opciones disponibles para el botón, puedes editar el texto y el vínculo.

Cambia el texto que aparece en el botón al escribir la palabra o frase deseada en el espacio debajo de “Button text”.

Para editar el vínculo, solamente tienes que hacer clic en “Edit Link”. Esto abrirá un panel donde tienes que decidir si quieres vincular el botón a una página dentro de tu sitio, a un URL externo y si quieres abrir el vínculo en la misma ventana (same window) o en una nueva (new window). Si quieres eliminar el vínculo, haz clic en la opción de “Remove Link”. Haz clic en “Save” cuando termines.

"Edit Link" en el panel CMS

Haz clic en la opción de “Edit Link” para abrir el panel y establecer un vínculo para tu botón

Nota: Como con los textos, puedes cambiar el estilo y alineación del botón con sus dots de estilo.

Imagen

Para fijar o editar la imagen para de la diapositiva, haz en el botón verde que dice “Edit Image”.

Botón de "Edit Image"

Para reemplazar, editar, cortar, agregar atributos alt o fijar una imagen en miniatura, haz clic en el botón de “Edit Image”.

En el editor de imágenes que se abrirá, podrás reemplazar la imagen, agregar atributos alt o establecerlas como la imagen en miniatura (en Thumb) o como la imagen principal (Main).

Editor de imágenes

Para agregar una nueva diapositiva

Si necesitas añadir más diapositivas a tu app de Super Banner, solo tienes que hacer clic en la pestaña que dice “New Slide” y que está localizada al lado derecho del panel CMS.

"New Slide" en el panel CMS

Haz clic en la pestaña de “New Slide” para obtener una diapositiva completamente nueva

Se abrirá un módulo nuevo y verás que las opciones para la diapositiva nueva son las mismas que te aparecen al editar una diapositiva existente. Así que, si necesitas ayuda y quisieras saber qué puedes modificar, dirígete a la sección de “Para editar una diapositiva” de este tutorial. Ahí verás qué puedes hacer con los textos, imágenes y botones de tu app.

Para eliminar una diapositiva

Si decides que ya no necesitas algunas de las diapositivas en tu app de Super Banner, solamente dirígete a la pestaña de  ”View All Slides” y haz clic en la opción de “Delete” de esa diapositiva.

Vínculo de Delete en el panel CMS

Si quieres eliminar una diapositiva, solamente haz clic en su vínculo de “Delete”, localizado a su derecha

Para cambiar el orden de las diapositivas

Algunas veces, al agregar y editar las diapositivas de tu sitio, notas que no están en el orden que quisieras que estuvieran. Si tienes 2 o más diapositivas, puedes cambiar su orden, al hacer clic en una de ellas y arrastrarla hasta su nueva posición. ¡Es muy sencillo!

Para reorganizar las diapositivas en el panel CMS

Para reorganizar las diapositivas, haz clic en una de ellas y arrástrala hasta donde quieras que aparezca

¡Eso es todo!

Eso es todo lo que tienes que saber sobre la app de Super Banner. Pruébala, aprovecha su potencial y cómprala para agregar más valor a tu sitio.

¿Te pareció útil este tutorial? Háznoslo saber en la sección de comentarios.