Diseña y publica tus sitios rápidamente

Cómo funciona la app de Tabbed Widget

En este artículo te enseñaremos a usar la app de Tabbed Widget. La puedes usar para exponer tu contenido con pestañas, como se muestra en la siguiente imagen. Al hacer clic en el título de una pestaña (a la izquierda), verás el contenido para esa misma a la derecha.

This is how a Tabbed Widget app will look for your visitors

1. Dirígete a la barra inferior una vez que hayas entrado a tu sitio y haz clic en la app de Tabbed Widget en el menú de “Apps”.

Click on "Tabbed Widget" from the Apps menu on the shelf

2. Arrastra el botón de “Install New App Version” y suéltalo en donde desees dentro de tu página.

Drag and drop your app to a  (or column)

3. Una vez posicionado, debe verse como en la siguiente imagen.

Default look of the Tabbed Widget app

4. Para editar el texto, haz clic en cada lugar que diga “Click to edit this text!”. Así podrás cambiar el título de la app y el título y el contenido de cada elemento.

Clicking on each field that reads "Click to Edit..." will allow you to modify it

5. Dentro del contenido del elemento, puedes agregar texto y darle formato (con las fuentes de letras, tamaños, colores, etc.). También puedes agregar imágenes y video. Agrégalos con la barra de herramientas superior.

Use the edit in place toolbar to insert videos and images

6. El título de cada elemento se puede editar al hacer clic en él. Si haces clic y lo sostienes, podrás cambiar de elemento cuando tengas más de uno.

Click on the entry title of a tab to edit it

7. Para agregar más elementos, pasa el cursor sobre la app y haz clic en el ícono de la página con el signo de más (New Entry).

Add entries with the "plus" icon on the left side of the app toolbar

Se insertará una nueva pestaña debajo de la primera, tal como en la siguiente imagen.

A new entry added below the first one on the Tabbed Widget

8. Para cambiar de pestaña, haz clic y sostenlo por aproximadamente 2 segundos. Verás que un círculo blanco se irá llenando siempre y cuando sostengas el clic.

Click and hold for approximately 2 seconds and you will switch to that item

Esto te llevará a otro elemento, al que le podrás agregar y editar contenido (texto, imágenes o video).

9. Si agregaste dos o más elementos, es posible que quieras reorganizarlos.

Here we have 3 tabs that we want to reorder

Para cambiar el orden, haz clic en el botón de “Recorder”.

Click the reorder button to fix the order of your items

Se abrirá una nueva ventana donde podrás hacer clic y arrastrar los elementos hasta una nueva posición.

To re-arrange, click and drag items on this window

Una vez que estés satisfecho con el orden, haz clic en “Close” de arriba a la derecha.

10. Si necesitas eliminar uno de tus elementos, debes encontrar el botón de “Remove” enseguida del de “Recorder” debajo de cada elemento. Al hacer clic en el botón, podrás eliminar ese elemento.

The remove item button, will appear below each item

¡Ten cuidado de no hacer clic en la “X” de arriba a la derecha en la app, porque eso eliminará la app completa! Si esto llegara a pasar, siempre puedes restaurarla.

11. Por último, las opciones. Haz clic en el botón de “Edit settings” el cual está representado con el ícono de una herramienta.

To open the "Edit Settings" window, click the wrench icon

Esto abrirá una nueva ventana con una casilla que dice “Propagate Style to All Pages”. El hacer clic en ella, permitirá que la configuración de los dots de estilo de esa app, se copie en las otras versiones de esa misma (aunque estén en diferentes páginas dentro del mismo sitio).

This is the Settings modal window

¡Eso es todo! Con esta app, puedes organizar el contenido de tu sitio con pestañas. ¡Inténtalo!

Si tienes dudas o comentarios sobre este artículo, háznoslos saber en la sección de comentarios.