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, haga clic en Widgets.
Agregar widget
Para ingresar al editor:
- Inicie sesión en su cuenta de Guesty.
- En la barra de navegación superior, haga clic en el selector de modo y seleccione Modo de crecimiento.
- Haga clic en Distribución.
- Haga clic en la miniatura de Sitios web de Guesty.
- A la derecha del sitio web correspondiente, haga clic en Editar.
Agregar widgets desde la biblioteca de widgets
Para agregar widgets desde la biblioteca de widgets:
- En el panel lateral, haga 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 su sitio, tenga 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 de ella.
- 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:
- Haga clic derecho en cualquier widget y seleccione Agregar widget debajo en el menú contextual para agregar widgets inmediatamente debajo del widget actual.
- En el modo Flex, haga clic en el ícono más (+) en el menú flotante.
- Si hace clic derecho en una columna, haga clic en Agregar y seleccione 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 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, haga clic derecho en el elemento y seleccione "Editar diseño". O bien, si está en modo flexible, seleccione "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, haga clic en el diseño que aparece en el Editor de Diseño (o haga clic en la flecha pequeña junto a él) para abrir el menú "Seleccionar Diseño". Para cambiar el diseño seleccionado, haga clic en el diseño que desee usar y se actualizará en el widget.
Estilo
- Color. Haga clic en el icono redondo de color a la derecha del nombre de la configuración para abrir el selector de color y cambiarlo.
- Borde. Modifique el ancho del borde con el control deslizante o el cuadro de texto. Haga clic en el icono del engranaje (design-gear.png) para ver más opciones.
- Fondo. Use una imagen o un color de fondo para este widget mediante el cuadro de diálogo "Seleccionar y colocar imágenes" o la URL de un video.
- Ancho y alto. Utilice 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. Define 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, haga 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 se hace 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, consulte 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 entiendan, 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, haga clic derecho en el elemento y seleccione "Editar diseño". O bien, si está en modo flexible, seleccione "Editar diseño" en el menú flotante para abrir el panel de diseño.
- Vaya a la sección Animación.
- Seleccione un disparador (Entrada o Desplazamiento) y una animación.
- (Opcional) Personaliza la animación (por ejemplo, la dirección desde donde ingresará).
Para restablecer la animación, haga 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, por lo que las animaciones configuradas para escritorio y tableta no se aplicarán.
Consideraciones sobre la animación
Al agregar animaciones, tenga en cuenta lo siguiente:
- Demasiadas animaciones pueden desorientar o distraer a los usuarios, así que úselas 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, haga clic derecho en el elemento y seleccione "Editar diseño". O bien, si está en modo flexible, seleccione "Editar diseño" en el menú flotante para abrir el panel de diseño.
- Vaya a la sección Animación.
- Haga clic en el menú desplegable Animación y seleccione 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
Establezca si el widget está alineado a la izquierda, a la derecha o al centro de su área.
Algunos widgets se comportan de forma muy distinta en distintas vistas. Después de añadirlo, comprueba cómo se muestra tu widget en cada vista para asegurarte de que se muestre correctamente.
Para establecer la alineación, haga clic derecho en el widget y haga 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 le permite encontrarlo y editarlo fácilmente.
Haga clic con el botón derecho en el widget, haga clic en Seleccionar contenedor y seleccione 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.
Haga clic derecho en el widget y haga 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 "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.
Haga clic derecho en el widget, haga clic en Ocultar en el dispositivo, en el editor clásico, seleccione un dispositivo.
Si aparece un icono de ojo (
) está presente en el panel lateral, lo que 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 se siente cómodo con estos lenguajes.
Haga clic derecho en el widget y luego haga 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 a la que se desea hacer referencia. Para obtener más información sobre los enlaces de anclaje, consulte Etiquetas y enlaces de anclaje.
Haga clic derecho en el widget y haga clic en Establecer como ancla.
Eliminar widget
Para eliminar un widget y quitarlo de todos los dispositivos, haga clic derecho en el widget y haga 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 estrictos estándares y someterse a un riguroso proceso de control de calidad por parte del equipo de Guesty.
Para obtener una respuesta más detallada, consulte la sección de preguntas frecuentes en el artículo de Resumen de la tienda de aplicaciones.