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, haga clic en Restablecer al estilo del tema.
- Elige entre estilos de tema principal o secundario y personaliza el estilo según corresponda.
-
Active la opción Flotante para que un botón permanezca visible cuando los visitantes se desplacen por la página.
Utilice 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
- Suscribir
- Solicita un presupuesto
Active 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, puede 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é utilizando una versión antigua del diseño para móviles. Para actualizar el diseño, vaya al Editor de diseño y haga 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 suba archivos de su propiedad o para los que tenga permiso de uso. No comparta 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 el elemento 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 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.
Al seleccionar un diseño de columna, se crea automáticamente una fila horizontal para contener el contenido de la columna vertical.
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.
- Haga clic con el botón derecho en el widget para abrir el menú del editor de columnas.
- Si la columna no tiene relleno, haga clic con el botón derecho en el widget dentro de la columna.
- Haga clic en Seleccionar contenedor .
- Seleccione la columna.
- Verifique que el encabezado del menú muestre "Columna".
- Edite cada columna individualmente de la siguiente manera:
-
Posición
Para cambiar la posición de la columna, haga clic en las flechas de la derecha o de la izquierda.
Las flechas se desactivan si la fila contiene solo una columna.
-
Agregar
Haga clic en + Agregar y seleccione una de las siguientes opciones:
- Columna . Agregue una nueva columna a la fila actual. Se pueden agregar un máximo de 4 columnas por fila.
- Fila interior. Añada una fila dentro de la columna actual.
- Widget A continuación , añada un nuevo widget justo debajo del actual. Puede elegir entre los siguientes: Texto , Imagen , Botón , Icono , o seleccionar Más widgets para abrir la biblioteca completa de widgets.
-
Relleno
Para eliminar el espacio interior, haga clic en Borrar relleno.
-
Revertir
Para volver a los ajustes del tema, haga 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, haga clic en Copiar.
- Ancla
- Para anclar la columna a la página, haga clic en Establecer como ancla e ingrese un nombre. Marque la casilla para agregar el ancla a la navegación de su sitio.
- Para editar el nombre de un ancla existente, haga clic en Editar ancla. Introduzca el nombre y haga clic en Actualizar.
- Para eliminar un ancla existente, haga clic en Editar ancla. Haga clic en Eliminar ancla.
- Conectar datos
- Para conectar datos, haga clic en Conectar datos. En la pestaña "Conectar", seleccione la opción correspondiente y haga clic en Conectar.
- Para cambiar los datos conectados, haga clic en Conectar datos. Seleccione Cambiar conexión. Realice los cambios necesarios y haga clic en Conectar.
- Para editar los datos conectados, haga clic en Conectar datos. Seleccione Editar contenido. Realice los cambios necesarios y haga clic en Guardar.
-
- Para eliminar la columna, selecciónela y haga 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.
- Seleccione la imagen correspondiente.
- Para crear un carrusel de imágenes de fondo, seleccione 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, consulte 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.
Haz clic en el widget y selecciona la pestaña Diseño para ajustar los colores de las filas y el ancho de las columnas.
En dispositivos móviles, elige 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 soportan 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 pasa 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 el icono
para duplicar un elemento. - Para agregar un nuevo elemento, haga clic en + Agregar artículo.
- Reglas de visualización:
- Active la opción "Mostrar un elemento expandido a la vez" para asegurarse de que solo se abra un elemento a la vez.
- Active la opción "Mostrar primer elemento expandido" para expandir el primer elemento de la lista.
- SEO: Activa 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.
Utiliza etiquetas H3 para SEO y optimiza 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".
- Aplicar 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 reservas : agrega 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 su 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", selecciona la ubicación correspondiente en el menú desplegable.
- En "Etiquetas de listado (categorías)", selecciona las etiquetas de categoría correspondientes.
- Selecciona el número de dormitorios y baños, e introduce la tarifa por noche del anuncio.
- Selecciona 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", activa 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.
Marca 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.
- Establezca la hora de finalización de la cuenta regresiva en el campo correspondiente. Ingrese una hora específica, por ejemplo, 23:45 si es necesario.
- Seleccione una zona horaria en el menú desplegable.
- En el campo "Mensaje de fin de tiempo", introduzca el mensaje que aparecerá cuando finalice la cuenta atrás.
- Seleccione Mostrar contador en 0000 y mensaje debajo o Eliminar contador y mostrar solo el mensaje.
- En el campo "Título", introduzca el texto necesario para la cuenta atrás. Para ocultar el título, haga clic aquí.
