Los widgets son los componentes clave de un sitio web, ya que permiten añadir y gestionar contenido eficazmente. Son elementos esenciales que mejoran tanto la funcionalidad como el diseño de tu sitio web. Al incorporar varios tipos de widgets, puedes crear una experiencia de usuario dinámica y atractiva.
Biblioteca de widgets
La biblioteca de widgets contiene todos los widgets. Están divididos en categorías. También hay una función de búsqueda en la parte superior.
Para acceder a la biblioteca de widgets, en el panel lateral, haz clic en Widgets .
Agregar widget
Para ingresar al editor:
- Inicia sesión en tu cuenta de Guesty .
- En la barra de navegación superior, haz clic en el selector de modo y selecciona el Modo de crecimiento .
- Haz clic en Distribución .
- Haz clic en la miniatura de Sitios web de Guesty .
- A la derecha del sitio web correspondiente, haz clic en Editar .
Agregar widgets desde la biblioteca de widgets
Para agregar widgets desde la biblioteca de widgets:
- En el panel lateral, haz clic en Widgets para abrir la biblioteca de widgets.
- Se pueden buscar widgets utilizando la barra de búsqueda en la parte superior o desplazándose por las diferentes secciones de la biblioteca.
- Haz clic y arrastra el widget a la ubicación deseada en el sitio. Aparecerá un indicador de ubicación azul.
- El widget aparecerá en la ubicación que muestra el indicador de ubicación azul.
Al arrastrar y soltar un widget en tu sitio, ten en cuenta el texto en el indicador de ubicación azul:
- Insertar aquí. El widget se añadirá a una fila o columna existente.
- Insertar en nueva fila. Se añadirá una nueva fila y el widget se colocará dentro.
- Insertar en nueva columna. Se añadirá una nueva columna y el widget se colocará dentro de ella.
Agregar widgets desde el lienzo
Para agregar widgets desde el lienzo:
- Haz clic derecho en cualquier widget y selecciona Agregar widget debajo en el menú contextual para agregar widgets inmediatamente debajo del widget actual.
- En el modo Flex, haz clic en el ícono más (+) en el menú flotante.
- Si haces clic derecho en una columna, haz clic en Agregar y selecciona Agregar widget a continuación.
- Selecciona uno de los cuatro widgets más populares o haz clic en "Más widgets" para abrir el menú completo. Después de añadir el widget, puedes editarlo como siempre.
Widget de edición: contenido y diseño
Puedes personalizar los widgets para ajustar el contenido, la apariencia y el diseño de tu sitio. Editar los widgets te permite tener un mayor control sobre las funciones de tu sitio y su funcionamiento.
La mayoría de los widgets tienen un área para su contenido y su diseño.
Área de contenido
El área de contenido es donde normalmente se configura el contenido de un widget. Las secciones y opciones disponibles en el área de contenido varían según el widget. Por ejemplo, algunos widgets permiten añadir un enlace, mientras que otros no.
Para acceder al editor de contenido, haz clic derecho en el widget y selecciona "Editar contenido" . Si estás en modo flexible, la opción para acceder al editor de contenido está disponible en el menú flotante.
Editar diseño
La mayoría de los widgets del editor incluyen opciones de diseño que permiten personalizar su apariencia para tu sitio. No todos los widgets tienen las mismas opciones. Por ejemplo, algunos widgets no permiten editar el espaciado interno, mientras que otros no permiten cambiar el espaciado externo.
Para acceder al editor de diseño, haz clic derecho en el elemento y selecciona "Editar diseño" . O bien, si estás en modo flexible, selecciona "Editar diseño" en el menú flotante para abrir el panel de diseño.
Las siguientes son ajustes de diseño comunes.
Estilos de texto
Para los widgets con texto, puedes editar los estilos de texto. Cualquier cambio que realices en un widget específico anulará el estilo de texto del tema.
Si necesitas anular el tamaño del texto por dispositivo, puedes ajustar el tamaño del texto en el Texto del tema y el texto no se reducirá según el tamaño de la pantalla.
A continuación se muestran ejemplos de cómo se ajustará el tamaño del texto en diferentes escenarios:
- Si configuras el tamaño del texto a 40 px en el escritorio, el texto se reducirá automáticamente a 34 px en la tableta y a 32 px en el dispositivo móvil.
- Si configuras el tamaño del texto a 16 px en la versión de escritorio, no se reducirá en un 85 % a 13 px en la tableta ni en un 80 % a 12 px en el móvil, ya que es demasiado pequeño para leer y está por debajo del mínimo de 16 px. En cambio, el tamaño del texto se mantendrá en 16 px en todos los tamaños de pantalla.
- Si configuras el tamaño del texto a 100 px en la versión de escritorio, se ajustará a 60 px en la tableta, ya que ese es el máximo, en lugar de 85 px, que sería el 85 % del tamaño del texto en la versión de escritorio. El tamaño del texto en dispositivos móviles también se ajustará a 40 px, ya que ese es el máximo, en lugar de 80 px, que sería el 80 % del tamaño del texto en la versión de escritorio.
Disposición
Las opciones de diseño suelen ser específicas de ciertos widgets. Para seleccionar entre las opciones de diseño disponibles para ese widget, haz clic en el diseño que aparece en el Editor de Diseño (o haz clic en la flecha pequeña junto a él) para abrir el menú "Seleccionar Diseño" . Para cambiar el diseño seleccionado, haz clic en el diseño que desees usar y se actualizará en el widget.
Estilo
- Color. Haz clic en el icono de color redondo a la derecha del nombre de la configuración para abrir el selector de color y cambiarlo.
- Borde. Modifica el ancho del borde con el control deslizante o el cuadro de texto. Haz clic en el icono del engranaje (design-gear.png) para ver más opciones.
- Fondo. Utiliza una imagen o un color de fondo para este widget mediante el cuadro de diálogo "Elegir y colocar imágenes" o la URL de un vídeo.
- Ancho y alto. Utiliza el control deslizante o el cuadro de texto para cambiar el número de píxeles.
- Esquinas redondeadas. Aumenta o reduce el redondeo de las esquinas de un widget. Haz clic en el icono del engranaje (design-gear.png) para ver más opciones.
- Sombras. Activa o desactiva una sombra para este widget.
- Texto. Establece diversos aspectos del texto, como la familia de fuentes, el grosor de la fuente, etc.
Botones
Los widgets que incorporan un botón permiten seleccionar si este hereda el estilo principal o secundario definido en el panel de temas. Además, puedes elegir entre diferentes diseños de botones, editar su estilo (ancho, alto) y texto (fuente, tamaño del texto), y ajustar el espaciado interno y externo.
Cualquier cambio que realices en el editor de diseño anulará los estilos establecidos en el botón del tema. Si necesitas volver al estilo del botón del tema, haz clic en "Restablecer estilo del tema" .
Botones de tema principal y secundario
- Si se realizan cambios en el botón (que anularán los estilos establecidos en el nivel del botón del tema), seguirá habiendo un cuadro indicador presente en el estilo del botón principal o secundario.
- Si haces clic en el estilo del botón que no tiene el cuadro indicador, se restablecerá el botón al estilo establecido en el nivel del botón del tema.
Espaciado
Cambia el espaciado interno (dentro de los bordes del widget) y el espaciado externo (fuera de los bordes del widget). Cada número en el cuadro externo define el espaciado externo para su lado (superior, inferior, izquierdo o derecho), y cada número en el cuadro interno define el espaciado interno para su lado (superior, inferior, izquierdo o derecho).
Para obtener información detallada, consulta Espaciado exterior e interior.
Animación
Las animaciones de entrada te permiten animar widgets y widgets de página al cargar por primera vez en tu sitio. El movimiento y la interactividad hacen que tu sitio sea más memorable y pueden destacar las secciones que quieres que los visitantes noten, como un número de teléfono o un botón de contacto.
Además, puedes controlar dónde comienza y termina la animación en la pantalla mediante los Ajustes de Desplazamiento.
Para agregar una animación:
- Para acceder al editor de diseño, haz clic derecho en el elemento y selecciona "Editar diseño" . O bien, si estás en modo flexible, selecciona "Editar diseño" en el menú flotante para abrir el panel de diseño.
- Ve a la sección Animación.
- Selecciona un disparador ( Entrada o Desplazamiento ) y una animación.
- (Opcional) Personaliza la animación (por ejemplo, la dirección desde la que ingresará).
Para restablecer la animación, haz clic en Restablecer valores predeterminados .
Si utilizas una animación de desplazamiento, puedes hacer clic en Pausar animación ( 
) en el panel lateral para pausar todas las animaciones mientras estás en modo de edición. Las animaciones seguirán activas en la vista previa y en el sitio web en vivo.
Nota:
Las animaciones configuradas para escritorio y tableta están vinculadas y serán las mismas. Sin embargo, la versión móvil es independiente y las animaciones configuradas para escritorio/tableta no se aplicarán a ellas.
Consideraciones sobre la animación
Al agregar animaciones, ten en cuenta lo siguiente:
- Demasiadas animaciones pueden desorientar o distraer a los usuarios, así que úsalas con moderación.
- Al eliminar una animación, recuerda que las animaciones se pueden aplicar tanto a filas como a widgets, por lo que la animación que estás viendo podría haberse agregado en algún lugar inesperado.
Eliminar animaciones
Para eliminar animaciones:
- Para acceder al editor de diseño, haz clic derecho en el elemento y selecciona "Editar diseño" . O bien, si estás en modo flexible, selecciona "Editar diseño" en el menú flotante para abrir el panel de diseño.
- Ve a la sección Animación.
- Haz clic en el menú desplegable Animación y selecciona Ninguna .
Nota:
Si un elemento no tiene una animación, se podría aplicar a uno de los contenedores en los que se encuentra el elemento. Se recomienda verificar todos los contenedores para detectar posibles animaciones.
Alineación
Establece si el widget está alineado a la izquierda, a la derecha o al centro de su área.
Algunos widgets se comportan de forma muy diferente en distintas vistas. Comprueba cómo se muestra tu widget en cada vista después de añadirlo para asegurarte de que se muestre correctamente.
Para establecer la alineación, haz clic derecho en el widget y haz clic en el ícono Alinear a la izquierda , Alinear al centro o Alinear a la derecha .
Seleccionar contenedor
Selecciona el contenedor en el que se encuentra el widget, lo que te permite encontrarlo y editarlo fácilmente.
Haz clic derecho en el widget, haz clic en Seleccionar contenedor y selecciona Columna o Fila .
Copiar y pegar
Se puede copiar y pegar un widget en otra ubicación. La opción de pegar solo aparece si ya se ha copiado un widget.
Haz clic derecho en el widget y haz clic en Copiar o Pegar .
No recomendamos copiar y pegar formularios de contacto, ya que esto generalmente genera problemas en el formulario de contacto duplicado.
Ocultar en el dispositivo
Usa la función de ocultar en el dispositivo para cambiar tu contenido según el dispositivo que use tu visitante para acceder a tu sitio web. Por ejemplo, muestra un widget de clic para llamar para usuarios móviles o un formulario de contacto para usuarios de escritorio.
Los widgets ocultos por la función Ocultar en el dispositivo no se eliminan.
Haz clic derecho en el widget, haz clic en Ocultar en el dispositivo , en el editor clásico, selecciona un dispositivo.
Si aparece un icono de ojo ( 
) en el panel lateral, indica que hay elementos ocultos en el dispositivo que estás editando. Para verlos, haz clic en el icono del ojo .
Nota:
Es posible que aún aparezca contenido oculto en el código del sitio web (después de publicarlo o republicarlo). Esto es normal y se debe a la tecnología utilizada.
Editar el HTML/CSS del widget
Permite modificar el HTML o CSS del widget. Solo recomendamos esta opción si te sientes cómodo con estos lenguajes.
Haz clic derecho en el widget y luego haz clic en Editar HTML/CSS .
Establecer el widget como ancla
Los enlaces de anclaje permiten dirigir a los visitantes a una sección específica de la página, lo que facilita su acceso a un punto específico de una página más larga o a una sección específica que se desee consultar. Para obtener más información sobre los enlaces de anclaje, consulta Etiquetas y enlaces de anclaje .
Haz clic derecho en el widget y haz clic en Establecer como ancla .
Eliminar widget
Para eliminar un widget y quitarlo de todos los dispositivos, haz clic derecho en el widget y haz clic en Eliminar .
Preguntas frecuentes y solución de problemas de widgets
¿Cuál es la diferencia entre aplicaciones y widgets personalizados?
Si bien puede haber diferencias según lo que una aplicación o un widget personalizado intente lograr, los widgets creados con nuestro generador de widgets no son necesariamente mejores que los widgets creados por nuestros socios de aplicaciones.
Las aplicaciones también deben cumplir estándares estrictos y someterse a un riguroso proceso de control de calidad por parte del equipo de Guesty.
Para obtener una respuesta más detallada, consulta la sección de preguntas frecuentes en el artículo Resumen de la tienda de aplicaciones .