Utiliza widgets básicos para construir la base de tu sitio web. Estas herramientas te permiten añadir elementos esenciales como texto, botones y herramientas de navegación para ayudar a los visitantes a encontrar información y realizar acciones.
Utiliza el widget de texto o título para crear titulares, compartir información y presentar tu sitio web a los visitantes. Hay tres widgets de texto disponibles: Texto, Título grande (H1) y Título pequeño (H3).
Haz clic en el widget para abrir la barra en línea y aplicar formato al texto de la siguiente manera:
- Utiliza el Asistente de IA para generar o editar contenido.
- Aplica una familia tipográfica y estilos de fuente, como negrita, cursiva o subrayado, a tu texto.
- Agrega o modifica hipervínculos.
- Crea listas numeradas o con viñetas.
- Conecta datos.
Como alternativa, asigna estilos especiales en el tema del sitio para gestionar el diseño de forma global.
Fomenta la interacción de los visitantes añadiendo botones. Los enlaces pueden dirigir a páginas, artículos de la tienda, ventanas emergentes, anclas o archivos descargables.
Haz clic en el widget y selecciona la pestaña Contenido para realizar las siguientes acciones:
- En el apartado "Texto del botón", introduce el texto correspondiente para el botón.
- Selecciona el destino del enlace.
- Utiliza la herramienta de auditoría de enlaces para garantizar que tu botón enlace a la ubicación esperada.
Haz clic en el widget y selecciona la pestaña Diseño.
Nota:
Los cambios realizados en el editor de diseño anulan los estilos establecidos a nivel de botón del tema. Para volver al estilo del botón del tema, haz clic en Restablecer al estilo del tema.
- Elige entre estilos de tema principal o secundario y personaliza el estilo según corresponda.
-
Activa la opción Flotante para que un botón permanezca visible cuando los visitantes se desplacen por la página.
Utiliza botones flotantes para mantener las llamadas a la acción importantes fijas, visibles y clicables en todas las páginas del sitio. Algunos casos de uso ideales incluyen:
- Contáctanos
- Suscríbete
- Solicita un presupuesto
Activa la opción "Mostrar solo en esta página" si es necesario.
- En dispositivos móviles, sugerimos colocar el botón flotante en la esquina inferior de la pantalla para que los visitantes puedan pulsarlo fácilmente con una sola mano.
- En dispositivos móviles, puedes mostrar un icono en lugar de texto eligiendo el diseño que incluye un icono.
- Si un botón flotante no se muestra en dispositivos móviles, es posible que estés utilizando una versión antigua del diseño para móviles. Para actualizar el diseño, ve al Editor de diseño y haz clic en Diseño del sitio.
Utilice el widget Espaciador para crear un diseño profesional y organizado y mejorar la legibilidad añadiendo espacio vertical en blanco entre los widgets.
Haz clic en el widget para cambiar su altura.
Ofrezca folletos, libros electrónicos o documentos para descargar. Los visitantes del sitio pueden compartir sus enlaces de descarga a través de otros medios, como correo electrónico y redes sociales.
Antes de comenzar
- No puedes subir archivos a tu carpeta raíz.
- Los archivos subidos son públicos. Solo sube archivos de tu propiedad o para los que tengas permiso de uso. No compartas datos confidenciales.
- Los formatos compatibles incluyen
.pdf, .xls, .xlsx, .doc, .docx, .zip, .ppt, .pptx, .psd, .txt, .xml, .mp3, .ttf, .otf, .woff, .eot, .svg, .odt, .ott, .js, .css, .png, .jpg, .gif, .jpeg, .rar - Puedes añadir hasta 15.000 archivos por sitio. El límite de tamaño de archivo es de 200 MB.
- No se admiten espacios en los nombres de archivo.
- Haz clic en el widget y selecciona la pestaña Contenido .
- En el apartado "Texto del botón", introduce el texto del botón en el campo correspondiente.
- Haz clic en + Archivo para añadir un archivo.
-
Para añadir nuevos archivos, haz clic en + Subir archivos .
Arrastra tus archivos o haz clic en «Elegir archivos» para añadir archivos o carpetas. También puedes descargar archivos desde Dropbox, Google Drive, un enlace o Gmail. Puedes añadir varios archivos para subirlos simultáneamente.
- Selecciona los archivos correspondientes y haz clic en Cargar . Recibirás una notificación cuando la carga haya finalizado.
- Selecciona el archivo correspondiente.
- Opcional: Marca la casilla "No indexar el archivo" para evitar que los motores de búsqueda muestren el archivo en los resultados de búsqueda.
- Haz clic en Listo .
Organice la información utilizando plantillas de lista preformateadas.
Para listas más complejas, considere utilizar el widget de menú de restaurante .
- Haz clic en el widget y selecciona la pestaña Contenido.
- Elige incluir un elemento de Imagen y un elemento de Enlace asociado a cada elemento de tu lista.
- Haz clic en Crear tu lista para añadir contenido.
- Haz clic en un elemento de la lista para abrir los "Ajustes de la lista". Tienes las siguientes opciones:
- Haz clic en + Imagen para añadir una imagen.
- En "Etiqueta del artículo", introduce el texto de la etiqueta. Para ocultar la etiqueta, haz clic en
. - En "Descripción", introduce el texto de la descripción necesario. Para ocultar la descripción, haz clic en .
- Haz clic en Agregar enlace para seleccionar el tipo de enlace que deseas agregar al elemento.
- En "Texto del enlace", introduce el texto del enlace. Para ocultar el texto del enlace, haz clic en .
- Haz clic en + Agregar artículo para añadir artículos adicionales a la lista.
- En el apartado "Título de la lista principal", introduce el título de la lista en el campo correspondiente.
- Haz clic y arrastra un artículo para reordenarlo.
Haz clic en el widget y selecciona la pestaña Diseño para personalizarlo, incluyendo el diseño, los estilos de fuente, los bordes redondeados de las imágenes y los estilos de los separadores.
Utilice el widget de columna para organizar y distribuir el contenido dentro de una fila.
Importante:
Crea una copia de seguridad de tu sitio antes de editar las columnas para garantizar que puedes restaurar una versión anterior si es necesario.
- Haz clic con el botón derecho en el widget para abrir el menú del editor de columnas.
- Si la columna no tiene relleno, haz clic con el botón derecho en el widget dentro de la columna.
- Haz clic en Seleccionar contenedor.
- Selecciona la columna.
- Verifica que el encabezado del menú muestre "Columna".
- Edita cada columna individualmente de la siguiente manera:
-
Posición
Para cambiar la posición de la columna, haz clic en las flechas de la derecha o de la izquierda.
Las flechas se desactivan si la fila contiene solo una columna.
-
Agregar
Haz clic en + Agregar y selecciona una de las siguientes opciones:
- Columna. Agrega una nueva columna a la fila actual. Se pueden agregar un máximo de 4 columnas por fila.
- Fila interior. Añade una fila dentro de la columna actual.
- Widget A continuación, añade un nuevo widget justo debajo del actual. Puedes elegir entre los siguientes: Texto, Imagen, Botón, Icono, o selecciona Más widgets para abrir la biblioteca completa de widgets.
-
Relleno
Para eliminar el espacio interior, haz clic en Borrar relleno.
-
Revertir
Para volver a los ajustes del tema, haz clic en Restablecer espaciado predeterminado.
-
Animación
Haz clic en Animación y selecciona un estilo de animación, como un fundido o un zoom, para aplicar a la columna.
-
Esconder
Para ocultar la columna en las vistas de escritorio, tableta o móvil, haga clic en Ocultar de y selecciona la opción correspondiente.
-
Copiar
Para copiar la columna, haz clic en Copiar .
-
Ancla
- Para anclar la columna a la página, haz clic en Establecer como ancla e ingresa un nombre. Marca la casilla para agregar el ancla a la navegación de tu sitio.
- Para editar el nombre de un ancla existente, haz clic en Editar ancla . Introduce el nombre y haz clic en Actualizar .
- Para eliminar un ancla existente, haz clic en Editar ancla . Haz clic en Eliminar ancla .
-
Conectar datos
- Para conectar datos, haz clic en Conectar datos. En la pestaña "Conectar", selecciona la opción correspondiente y haz clic en Conectar .
- Para cambiar los datos conectados, haz clic en Conectar datos. Selecciona Cambiar conexión. Realiza los cambios necesarios y haz clic en Conectar .
- Para editar los datos conectados, haz clic en Conectar datos. Selecciona Editar contenido. Realiza los cambios necesarios y haz clic en Guardar .
-
- Para eliminar la columna, selecciónala y haz clic en Eliminar .
Para editar el estilo de fondo o el espaciado de una columna:
- Haz clic en el widget.
- En el editor de diseño, elige un tipo de fondo:
-
Color :
- Selecciona un color sólido o un degradado. Los colores degradados anulan las imágenes y viceversa.
- Personaliza el color, el ancho y el radio del borde.
- Activa la opción Sombra y selecciona un color, tipo y posición.
-
Imagen :
- Para añadir una imagen al fondo, haz clic en + para abrir el selector de imágenes.
- Selecciona la imagen correspondiente.
- Para crear un carrusel de imágenes de fondo, selecciona varias imágenes en el selector de imágenes.
- Haz clic en Listo .
- Elige cómo quieres que se muestre tu imagen: Portada, Imagen completa, Mosaico o Sin repetición.
- Configura la posición, la superposición de fondo, el borde y la sombra de la imagen.
- Para añadir una imagen al fondo, haz clic en + para abrir el selector de imágenes.
-
Video :
- Haz clic en Seleccionar vídeo para elegir un archivo subido, o pega una URL de YouTube, Vimeo o Dailymotion.
- Para obtener más información sobre fondos de vídeo, consulta Fondos de vídeo .
-
Color :
Muestra los datos en filas y columnas. Puedes escribir los datos directamente, pegar una tabla existente o cargar un archivo CSV.
Antes de comenzar
- Sube un archivo CSV exportado y copiado desde Google Sheets o Excel (solo para idiomas que no se escriben de derecha a izquierda).
- Las tablas solo pueden incluir texto y enlaces. Utilice filas y columnas o los widgets de lista para crear una tabla con imágenes, botones u otros widgets.
- El editor de tablas no es compatible con Edge versión 17.
- La tabla puede incluir hasta 30 filas y columnas.
- Cuando se conecta a datos, el límite de filas es el límite del tipo de colección :
En la pestaña Contenido , escriba directamente en el editor o haga clic en Cargar un archivo CSV para agregar datos a la tabla.
Utilice la opción Borrar todo para eliminar todos los datos de su tabla.
Haga clic en el widget y seleccione la pestaña Diseño para ajustar los colores de las filas y el ancho de las columnas.
En dispositivos móviles, elija entre las opciones de visualización Aplastar , Desplazar o Contraer .
El widget Tabla sincroniza datos de fuentes internas o externas, como Google Sheets y Airtable, lo que permite gestionar el contenido fuera del editor. Vincula automáticamente las filas a las páginas dinámicas existentes en la misma colección para facilitar la navegación.
Las tablas conectadas admiten los siguientes tipos de campos:
- Texto enriquecido
- Texto sin formato
- Imagen
- Enlace
- Número
- Fecha y hora
- Correo electrónico
- Selección múltiple
- Teléfono
Conectar el widget de tabla a una colección
- Haga clic con el botón derecho en el widget Tabla y haga clic en Conectar a datos .
- En la pestaña "Conectar", seleccione una colección en el menú desplegable.
- Seleccione los campos necesarios en las opciones de Campos a mostrar . Las columnas se ordenarán en el mismo orden en que se seleccionen.
- Haga clic en Conectar .
- Una conexión de datos exitosa se marca con
cuando pase el cursor sobre el widget de la tabla.
Lista de ingredientes
Lista de precios
Lista de ubicaciones
Lista de sabores
Ayuda a los visitantes a navegar por la jerarquía de tu sitio. Las migas de pan muestran la ruta a la página actual, lo que mejora tanto la experiencia del usuario como el SEO.
- Haz clic en el widget y selecciona la pestaña Contenido.
- Activa o desactiva los elementos que quieras que aparezcan en la ruta de navegación. Tienes las siguientes opciones:
- Página de inicio. Mostrar siempre la página de inicio en la ruta de navegación.
- Página actual. Mostrar la página actual en la ruta de navegación.
- Ocultar las migas de pan cuando no haya una página principal. Habilita las migas de pan para todas las páginas excepto la página de inicio o las páginas del primer nivel de navegación.
Haz clic en el widget y selecciona la pestaña Diseño para personalizar el estilo de la fuente y elige un estilo de separador para dividir los nombres de página.
Organiza el contenido en secciones desplegables, como preguntas frecuentes o información destacada de productos. Esto reduce la necesidad de desplazarse y ayuda a los visitantes a encontrar información rápidamente.
El widget Acordeón puede mostrar páginas dinámicas, así como información específica de colección o productos mediante el enlace en línea.
- Haz clic en el widget y selecciona la pestaña Contenido.
- Agregue o modifique los campos:
-
Elementos:
- Haz clic en un elemento para editar su contenido.
- Haga clic en
para duplicar un elemento. - Para agregar un nuevo elemento, haga clic en + Agregar elemento.
-
Reglas de visualización:
- Desactive la opción "Mostrar un elemento expandido a la vez" para permitir que se abran varios elementos simultáneamente.
- Active la opción "Mostrar primer elemento expandido" para expandir el primer elemento de la lista.
- SEO: Active la opción "Habilitar esquema de preguntas frecuentes" para ayudar a los motores de búsqueda a previsualizar tu contenido.
-
Elementos:
Haz clic en el widget y selecciona la pestaña Diseño para personalizar su estilo.
Utilice etiquetas H3 para SEO y optimice el espaciado para dispositivos móviles.
Muestra contenido relacionado, como servicios o planes, en secciones compactas. Los visitantes pueden navegar entre pestañas para ver información diferente sin salir de la página.
Nota:
Puedes tener un número ilimitado de pestañas; sin embargo, las etiquetas de las pestañas se reducen a medida que se agregan más para dejar espacio para las nuevas pestañas.
- Haz clic en el widget y selecciona la pestaña Contenido.
- Haz clic en una pestaña para editarla. Puedes editar la imagen, el texto alternativo de la imagen, la etiqueta de la pestaña, el tipo de encabezado de la etiqueta, el título, la descripción, el botón y el enlace del botón.
- Para añadir una nueva pestaña, haz clic en + Añadir pestaña.
- Para mostrar la imagen, activa la opción Mostrar imagen.
- Haz clic en el widget y selecciona la pestaña Diseño.
- Haz clic en la miniatura del diseño para seleccionar uno.
- Haz clic en Todas las pestañas para personalizar el estilo de las mismas.
- Haz clic en la pestaña seleccionada y coloca el cursor sobre ella para personalizar el estilo del texto y el fondo. Esto no afecta al diseño de "Todas las pestañas".
- Aplica estilos adicionales a lo siguiente:
- Estilo de Descripción
- Estilo de botón
- Estilo de imagen
- Estilo de marco
Integra un widget de búsqueda que permita a los huéspedes seleccionar las fechas de su estancia. Una vez que el huésped elige las fechas deseadas, se le redirige al Motor de reservas de Guesty para que seleccione una propiedad.
El filtro de destino extrae automáticamente los datos del campo "dirección" de tus anuncios. Puedes personalizar estos valores para mostrar barrios o regiones en lugar de ciudades; sin embargo, esto podría afectar la conexión con plataformas como Airbnb, Booking.com y Vrbo debido a sus requisitos de dirección.
Por defecto, el widget del Motor de reservas se integra en tu página de inicio cuando empiezas a crear tu sitio web de Guesty.
- Haz clic en el widget y selecciona el editor de contenido.
- Opcional: Seleccione la ubicación de las propiedades que desea mostrar en el menú desplegable.
- Opcional: Seleccione sus fechas de check-in y salida.
Haz clic en el widget y selecciona el editor de diseño para personalizar el botón.
Añade un aviso de derechos de autor que se actualice automáticamente al año en curso. Esto demuestra a los visitantes que tu sitio web está activo y actualizado.
- Haz clic en el widget y selecciona la pestaña Contenido.
- En el apartado "Descripción", introduce el texto de tu descargo de responsabilidad en el campo de texto correspondiente.
-
Activa la opción de invertir la posición del icono/año si es necesario.
El widget de derechos de autor se muestra en todas las páginas de tu sitio web.
Haz clic en el widget y selecciona la pestaña Diseño para editar la fuente, el color y la alineación del texto.
Consejo:
Arrastra el widget a la posición deseada. La ubicación estándar es en la parte inferior del sitio web.
Muestra propiedades específicas según criterios como la ubicación o las comodidades. Usa este widget en tus páginas de destino para mejorar tu posicionamiento en los resultados de búsqueda de Google.
Añade títulos atractivos como «Apartamentos con piscina en Ámsterdam» y ofrece opciones de filtrado y clasificación para ayudar a los visitantes a encontrar la propiedad perfecta. Cuando los huéspedes buscan apartamentos con piscina en Ámsterdam en Internet, es más probable que lleguen a tu página y reserven a través de tu sitio web. Crea tantas páginas de destino segmentadas como necesites para que tus propiedades sean fáciles de encontrar.
Cuando un visitante hace clic en una propiedad en el widget, se le redirige a tu Motor de reservas Guesty para comenzar la reserva. Al filtrar u ordenar los resultados, solo verá los anuncios que coincidan con su selección.
Para obtener la página de destino más efectiva, combina los siguientes widgets:
- Widget de barra de búsqueda de Reserva : añade una barra de búsqueda en la parte superior para que los huéspedes puedan iniciar una reserva fácilmente. Completa previamente la ubicación y otros campos para que coincidan con el enfoque de la página (por ejemplo, establece la ubicación en "Ámsterdam" en tu página de apartamentos junto a la piscina).
- Widget de Propiedades Destacadas : colócalo debajo de la barra de búsqueda para resaltar tus mejores propiedades. Aprende cómo .
- Widget de resultados de búsqueda SEO : añade tu título principal (como "Apartamentos junto a la piscina en Ámsterdam") y muestra toda tu selección de anuncios con opciones de búsqueda y filtro.
Añade el widget de resultados de búsqueda SEO a una página de destino específica con una URL clara, o a tu página de inicio. También puedes añadirlo a cualquier página sin combinarlo con otros widgets. Simplemente arrastra y suelta el widget donde quieras.
- Haz clic en el widget y selecciona la pestaña Contenido.
- En la sección "Propiedades que se mostrarán a los huéspedes cuando accedan por primera vez a esta página", seleccione la ubicación correspondiente en el menú desplegable.
- En "Etiquetas de listado (categorías)", seleccione las etiquetas de categoría correspondientes.
- Seleccione el número de dormitorios y baños, e introduzca la tarifa por noche del anuncio.
- Seleccione una de las siguientes opciones de visualización:
- Precio: de menor a mayor
- De lo nuevo a lo viejo
- De lo antiguo a lo nuevo
- En la sección "Permitir a los huéspedes filtrar y ordenar", active las opciones de filtro necesarias:
- Habilitar filtros para huéspedes
- Habilitar la clasificación para los huéspedes
- Haz clic en Aplicar.
Haz clic en el widget y selecciona la pestaña Diseño para añadir animación y espaciado al widget.
Marque la casilla "Mostrar botón 'Ver más'" para permitir que los visitantes vean más propiedades.
Resalta las propiedades de mayor rendimiento o de lujo con el widget de Propiedades. Es ideal para páginas de destino donde deseas que ciertas propiedades destaquen. Puedes arrastrar y soltar el widget en cualquier lugar de tu sitio web o en una página de destino específica.
- Haz clic en el widget y selecciona la pestaña Contenido.
- Busca y selecciona las propiedades que deseas mostrar.
- Puedes elegir hasta 30 propiedades por widget.
- El estado del anuncio debe ser "Propiedad anunciada".
- Haz clic en + Agregar filtro para refinar los resultados por servicios, tipo de propiedad y/o ubicación.
- En la pestaña "Seleccionados", puedes arrastrar las propiedades para cambiar el orden de visualización.
-
Haz clic en Guardar.
Consejo:
Puedes añadir varios widgets de propiedades y configurar diferentes grupos de propiedades destacadas para que se muestren en cada uno.
Añade imágenes con texto ajustado automáticamente. El texto se adapta automáticamente a la imagen según su posición.
Nota:
Haz clic con el botón derecho y selecciona Conectar con datos para usar contenido dinámico.
- Haz clic en el widget y selecciona la pestaña Contenido.
- Selecciona la posición de la imagen: izquierda o derecha.
- Haz clic en la miniatura de la imagen para seleccionar una imagen.
- Para añadir un enlace, haz clic en la imagen del enlace y selecciona la ubicación correspondiente.
- En el campo "Texto alternativo", introduce el texto requerido si se proporciona dicho campo.
- En el apartado "Párrafo", introduce el texto que desees.
Haz clic en el widget y selecciona la pestaña Diseño para ajustar las propiedades de la fuente y la imagen.
Añade una cuenta atrás en tiempo real a tu sitio web para aumentar la interacción y crear una sensación de urgencia, destacando el tiempo limitado que queda para ventas, eventos y promociones.
- Haz clic en el widget y selecciona la pestaña Contenido.
- Introduce la fecha en la que finaliza la cuenta atrás en el campo correspondiente.
- Establece la hora de finalización de la cuenta regresiva en el campo correspondiente. Ingresa una hora específica, por ejemplo, 23:45 si es necesario.
- Selecciona una zona horaria en el menú desplegable.
- En el campo "mensaje de fin de tiempo", introduce el mensaje que aparecerá cuando finalice la cuenta atrás.
- Selecciona Mostrar contador en 0000 y mensaje debajo o Eliminar contador y mostrar solo el mensaje.
- En el campo "Título", introduce el texto necesario para la cuenta atrás. Para ocultar el título, haz clic aquí. .
