Esta guía documenta los componentes disponibles en el editor de páginas de ThinkWeb. Describe para qué sirve cada componente, detalla los campos disponibles en el formulario de edición y señala cualquier particularidad que encontramos al probar en el editor en vivo. Las capturas de pantalla del entorno de demostración ilustran cómo se ve cada componente ya renderizado en una página.

Panel de ThinkWeb

Cómo trabajar con páginas

En el panel de ThinkWeb, ve a Pages. Ahí verás una lista de las páginas que forman tu sitio de ThinkWeb.

Name - Es el nombre de la página
Type - El tipo de página
Language - El idioma de la página
Path - También conocido como “slug.”
Draft? - Indica si el estado de la página es borrador o no.

Si la página tiene Draft? = “Yes”, no será visible públicamente, no se incluirá en el mapa del sitio ni será indexada por los motores de búsqueda.

Una vez que la página se publica (Draft? = “No”), será accesible mediante el enlace directo y podrá ser indexada.

Importante: Una vez que la página deja de ser borrador, debes publicar cualquier cambio.

Crear una página nueva

Ve a la lista de Pages.
Haz clic en el botón New en la parte superior derecha.
¡Una página nueva está lista para agregarle componentes!
Haz clic en el botón New en la esquina superior derecha para empezar a agregar componentes.
Consulta la información a continuación para saber más sobre cómo editar la configuración de la página (“Editing Page Settings”) y agregar componentes a tus páginas.
Contacta a nuestro equipo de servicios web para que agreguen la página a la navegación del sitio.

Abrir una página para editarla

Ve a la lista de Pages.
Selecciona la página que quieres editar.
Haz clic en Edit.
El editor se abre en dos paneles:
- Izquierda: Vista previa en vivo de la página.
- Derecha: Panel de Components para administrar el contenido.

Editar la configuración de la página

En la parte superior del editor, haz clic en Edit Page.
Aparece una ventana modal de Page Settings.
Puedes actualizar:
- El nombre, la ruta y el idioma de la página.
- El título y la descripción SEO.
- Activar o desactivar Draft Mode.
Haz clic en Update para aplicar los cambios (se mantienen en la sesión actual).
Haz clic en Cancel para cerrar sin guardar los cambios.
Importante: Haz clic en Save en la parte inferior del editor para conservar todas las actualizaciones.

Agregar un componente

En el editor, haz clic en New (esquina superior derecha).
Aparece la ventana modal New Component.
Explora categorías como Blocks, Images o Videos.
Selecciona un componente (por ejemplo, Single Image).
Haz clic en Add.
El componente se agrega al final de la sección actual.

Importante: Los componentes solo actualizan la vista previa de la página después de hacer clic en Update en el formulario de edición del componente. Al eliminar un componente no se actualiza la vista previa. Para solucionarlo, abre otro componente y haz clic en Save.

Editar los detalles de un componente

En la lista de Components:
- Haz doble clic en un componente, o
- Haz clic en su ícono de lápiz.
Se abre un panel lateral con los campos específicos de ese componente (por ejemplo, carga de imagen, texto, enlaces).
Haz clic en Update para aplicar los cambios, o en Cancel para descartarlos.
Para eliminar el componente:
- Haz clic en el ícono de papelera dentro del panel de edición.
- Confirma la eliminación en la ventana modal de advertencia (esta acción es irreversible).

Mover componentes hacia arriba o abajo

Haz clic en el ícono de flecha de un componente para entrar en Reorder Mode.
Aparecen líneas punteadas azules con signos de más (+) entre los componentes.
El componente seleccionado muestra un ícono de “X” para salir del modo de reordenamiento.
Haz clic en un signo de más en el lugar donde quieres mover el componente.
- El componente salta a esa posición.
Nota: Arrastrar los componentes directamente no funciona; usa los signos de más.

Clonar y eliminar componentes

Para clonar un componente

Ubica el componente que quieres duplicar en el panel de Components.
Haz clic en el ícono de doble cuadrado (Clone).
Aparece un duplicado del componente justo debajo del original, en la misma sección.

Para eliminar un componente

Abre el panel de edición del componente:
- Haz doble clic en el componente, o
- Haz clic en su ícono de lápiz.
Dentro del panel de edición, haz clic en el ícono de papelera.
Aparece una ventana modal de confirmación. Confirma la eliminación para quitar el componente de forma permanente.

⚠️ Nota: La eliminación es irreversible.

Editar una sección

Haz clic en el nombre de la sección (por ejemplo, Section 1) para resaltarla.
Haz doble clic en el nombre de la sección o haz clic en el ícono de lápiz para abrir el panel de edición.
Aparece el panel de configuración de la sección con los siguientes campos editables:
- Section name
- Section ID
- CSS class
- Background color
- Optional background image
Haz clic en Update para aplicar tus cambios.
Para eliminar la sección por completo, haz clic en Delete en la parte inferior del panel.

⚠️ Esto elimina de forma permanente la sección y todos sus componentes.

Clonar una sección

Resalta la sección que quieres duplicar.
Haz clic en el ícono de doble cuadrado (Clone).
Aparece una copia completa de la sección, con todos sus componentes, debajo de la original.
- La nueva sección se nombra automáticamente de forma secuencial (por ejemplo, Section 2).

Mover secciones

Haz clic en el ícono de flecha de una sección para entrar en Section Reorder Mode.
Aparecen líneas punteadas azules entre las secciones, cada una con un signo de más (+).
Haz clic en un signo de más en la posición deseada para mover ahí la sección seleccionada.
Haz clic en el ícono X de la sección seleccionada para salir del modo de reordenamiento.

⚠️ Problema conocido: Actualmente, es posible que las secciones no se muevan al hacer clic en los signos de más o al arrastrarlas.

Crear una sección nueva (moviendo un componente)

Inicia Reorder Mode en un componente (consulta la sección Mover componentes).
Aparece un área de New Section en la parte inferior del panel de Components, con su propio signo de más (+).
Haz clic en el signo de más debajo de New Section.
El componente seleccionado se mueve a una sección recién creada (por ejemplo, Section 2).
- Este método es útil para dividir el contenido existente en varias secciones.

Update vs. Save

“Update”

Se usa dentro de los formularios de edición (de componentes o secciones).
Aplica los cambios de forma local dentro de la sesión de edición actual.
No guarda los cambios de forma permanente en la página.

“Save”

Se encuentra en la parte inferior derecha del editor.
Envía todos los cambios pendientes al servidor.
Haz clic en Cancel en lugar de Save para salir del editor y descartar todas las ediciones sin guardar.

⚠️ Precaución: La versión original del sitio no tiene respaldo cuando haces cambios.

Cómo trabajar con componentes

Esta sección explica las instrucciones y notas de cada componente.

Componente Check Availability

Agregar un componente nuevo

Paso 1: En la sección de componentes a la derecha de la página, en la esquina superior derecha, haz clic en + New. Aparecerá una ventana emergente; selecciona el componente que quieres y luego haz clic en Add en la parte inferior de la ventana emergente.

Paso 2: El componente se agrega automáticamente al final de la página. Muévelo al lugar de la página donde quieras que esté: selecciona el componente y haz clic en ↑↓. Aparecerá un círculo con un + y ahí seleccionas dónde lo quieres. También aparece una sección nueva al final para que puedas colocarlo en una sección nueva y luego mover la sección de la misma manera.

Nota: El widget CheckAvailability debe ser el último widget de la sección para que quede sobre la imagen de fondo. La imagen de ejemplo de arriba es incorrecta para ilustrar este punto.

Editar componente

Este componente no tiene opción de edición.

Eliminar componente

Paso 1: Haz clic en el componente que quieres eliminar y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en el ícono de papelera en la esquina inferior izquierda

Paso 3: Aparecerá una ventana emergente de verificación que dice “Are you sure you want to delete this component? This action cannot be undone.” - Haz clic en “Delete”

Paso 4: Haz clic en “Save” en la esquina inferior izquierda

Paso 5: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo

Componente Heading Banner

También conocido como: Banner promocional

¿Qué es? Una sección destacada en la parte superior de cada página, debajo de la navegación, para mostrar una promoción u otro anuncio.

Descripción: Una descripción de una oración sobre una promoción, oferta o anuncio para llamar la atención de quienes visitan el sitio.

Puede ser clicable hacia otra página o hacia el motor de reservas
Solo puede mostrar un banner a la vez

Agregar un componente nuevo

Paso 1: En la sección de componentes a la derecha de la página, en la esquina superior derecha, haz clic en + New. Selecciona en la ventana emergente el componente que quieres agregar y luego haz clic en Add en la parte inferior.

Paso 2: El componente se agrega automáticamente al final de la página. Muévelo al lugar de la página donde quieras que esté: selecciona el componente y haz clic en el botón ↑↓. Aparecerá un círculo con un +. Selecciona dónde lo quieres.

También aparece una sección nueva al final para que puedas colocarlo en una sección nueva y luego mover la sección de la misma manera.

Editar componente

Paso 1: Haz clic en el título, HeadingBanner; el widget se pone azul

Paso 2: Haz clic en el ícono de lápiz; se abre un panel de edición

Paso 3: Agrega tu encabezado y subencabezado (si aplica)

Paso 4: Elige el nivel del encabezado (1 = el más grande, 6 = el más pequeño)

Paso 5: Haz clic en el botón Choose Image para agregar tu imagen de fondo

Paso 6: Haz clic en Update

Consejos útiles:

Ni la fuente ni el color del texto se pueden personalizar.
Aunque este es un componente responsivo, solo el ancho se ajusta; la altura del banner se mantiene proporcional, de aproximadamente 394 píxeles. Si se carga una imagen más grande, el widget recorta la parte superior e inferior y muestra únicamente la parte central de la imagen.
El fondo con degradado blanco es el predeterminado y no se puede quitar ni modificar.

Eliminar componente

Paso 1: Haz clic en el componente que quieres eliminar y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en el ícono de papelera en la esquina inferior izquierda

Paso 3: Aparecerá una ventana emergente de verificación que dice “Are you sure you want to delete this component? This action cannot be undone.” - Haz clic en “Delete”

Paso 4: Haz clic en “Save” en la esquina inferior izquierda

Paso 5: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo.

Componente Hero Image

También conocido como: Imagen principal del encabezado

¿Qué es? Una imagen grande que aparece debajo de la navegación principal, detrás del widget Check Availability.

Descripción: La imagen debe tener un mínimo de 1920 píxeles de ancho; lo habitual es 1920x1080 o 1920x1280.

Agregar un componente nuevo

También aparece una sección nueva al final para que puedas colocarlo en una sección nueva y luego mover la sección de la misma manera.

Editar componente

PARA AGREGAR:

Paso 1: Haz clic en el título, HeroImage; el widget se pone azul

Paso 2: Haz clic en el ícono de lápiz; se abre un panel de edición

Paso 3: Haz clic en el botón Choose Image

Paso 4: Se abre la Media Library.

Paso 5: Navega por las carpetas, si es necesario, para encontrar tu imagen.

Paso 6: Haz clic en la imagen; un marco azul la resalta.

Paso 7: Haz clic en el botón Select, en la esquina inferior derecha.

Paso 8: Haz clic en Update para aplicar tu acción.

PARA MODIFICAR

Paso 1: Haz clic en el título, HeroImage; el widget se pone azul

Paso 2: Haz clic en el ícono de lápiz; se abre un panel de edición

Paso 3: Haz clic en el botón Switch Image para seleccionar una imagen diferente

Paso 4: Haz clic en el botón Remove Image para quitar la imagen

Consejos útiles:

Este widget mostrará el alto y el ancho completos de tu imagen. El tamaño ideal de la imagen es 1920 x 1080 (aunque la altura puede variar).
Si se carga una imagen más pequeña, el widget la estirará para llenar el espacio. Esto puede hacer que la imagen se pixele.
Quitar la imagen no elimina el widget. Queda un marcador de posición gris. Elimina el widget por completo para quitar el marcador gris.

Eliminar componente

Paso 1: Haz clic en el componente que quieres eliminar y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en el ícono de papelera en la esquina inferior izquierda

Paso 3: Aparecerá una ventana emergente de verificación que dice “Are you sure you want to delete this component? This action cannot be undone.” - Haz clic en “Delete”

Paso 4: Haz clic en “Save” en la esquina inferior izquierda

Paso 5: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo

Componente Hero Image Rotation

También conocido como: Imagen principal del encabezado rotativa

¿Qué es? Varias imágenes grandes que aparecen debajo de la navegación principal, detrás del widget Check Availability.

Descripción: Las imágenes deben tener un mínimo de 1920 píxeles de ancho; lo habitual es 1920x1080 o 1920x1280.

Agregar un componente nuevo

También aparece una sección nueva al final para que puedas colocarlo en una sección nueva y luego mover la sección de la misma manera.

Editar componente

PARA CONFIGURAR:

Paso 1: Haz clic en el título, HeroImageRotation; el widget se pone azul.

Paso 2: Haz clic en el ícono de lápiz; se abre un panel de edición .

Paso 3: Haz clic en el botón Choose Image.

Paso 4: Se abre la Media Library.

Paso 5: Navega por las carpetas, si es necesario, para encontrar tus imágenes.

Paso 6: Haz clic en las imágenes; un marco azul las resalta.

Paso 7: Haz clic en el botón Select, en la esquina inferior derecha.

Paso 8: Haz clic en Update para aplicar tu acción.

PARA MODIFICAR:

Haz clic en el título, HeroImageRotation; el widget se pone azul.
Haz clic en el ícono de lápiz; se abre un panel de edición

PARA AGREGAR UNA IMAGEN:

Haz clic en + para agregar una imagen adicional. Se abre la Media Library.

PARA QUITAR UNA IMAGEN:

Selecciona la imagen. Mantén presionada la tecla Shift para seleccionar varias imágenes.
Haz clic en el - para quitar una imagen.

Consejos útiles:

El widget muestra todas las imágenes, sin importar su tamaño, a ancho completo x 1080 de alto.
Text Overlay (JSON) no funciona por el momento.

Eliminar componente

Paso 1: Haz clic en el componente que quieres eliminar y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en el ícono de papelera en la esquina inferior izquierda

Paso 3: Aparecerá una ventana emergente de verificación que dice “Are you sure you want to delete this component? This action cannot be undone.” - Haz clic en “Delete”

Paso 4: Haz clic en “Save” en la esquina inferior izquierda

Paso 5: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo

Componente Hero Video

También conocido como: Video principal del encabezado

¿Qué es? Un video que aparece debajo de la navegación principal, detrás del widget Check Availability.

Descripción: El video debe tener 1080 px de ancho y ser un archivo mp4

Agregar un componente nuevo

También aparece una sección nueva al final para que puedas colocarlo en una sección nueva y luego mover la sección de la misma manera.

Editar componente

PARA CONFIGURAR:

Paso 1: Haz clic en el título, HeroVideo; el widget se pone azul.

Paso 2: Haz clic en el ícono de lápiz; se abre un panel de edición.

Paso 3: Ingresa la URL completa del video.

Paso 4: Ponle un título a tu video.

Paso 5: Haz clic en Update.

PARA MODIFICAR:

Paso 1: Haz clic en el título, HeroVideo; el widget se pone azul.

Paso 2: Haz clic en el ícono de lápiz; se abre un panel de edición.

Paso 3: Ingresa una URL diferente.

Consejos útiles:

Los videos cargados en la Media Library de ThinkWeb funcionarán. Los enlaces externos (como los de YouTube o Vimeo) requieren un enlace de inserción (embed), no el enlace para compartir, para funcionar.

Eliminar componente

Paso 1: Haz clic en el componente que quieres eliminar y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en el ícono de papelera en la esquina inferior izquierda

Paso 3: Aparecerá una ventana emergente de verificación que dice “Are you sure you want to delete this component? This action cannot be undone.” - Haz clic en “Delete”

Paso 4: Haz clic en “Save” en la esquina inferior izquierda

Paso 5: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo

Componentes del cuerpo de la página

Componente Heading / Sub Heading

También conocido como: Título

¿Qué es? El título principal en la parte superior de la página o al inicio de una sección de la página

Descripción: El encabezado de una página web es un título o etiqueta que aparece en la parte superior del contenido, normalmente con una fuente más grande o más gruesa, para resumir o presentar de qué trata la página o la sección.

Agregar un componente nuevo

También aparece una sección nueva al final para que puedas colocarlo en una sección nueva y luego mover la sección de la misma manera.

Editar componente

PARA CONFIGURAR:

Paso 1: Haz clic en el título, Heading; el widget se pone azul.

Paso 2: Haz clic en el ícono de lápiz; se abre un panel de edición.

Paso 3: Escribe el texto de tu titular.

Paso 4: Escribe el texto de tu subtítulo (opcional).

Paso 5: Elige el nivel del titular (1=fuente más grande, 6=fuente más pequeña).

Paso 4: Is Heading Centered? Actívalo o desactívalo.

Paso 5: Divider? Actívalo o desactívalo.

PARA MODIFICAR:

Paso 1: Haz clic en el título, Heading; el widget se pone azul.

Paso 2: Haz clic en el ícono de lápiz; se abre un panel de edición.

Paso 3: Cambia lo que desees.

Paso 4: Haz clic en Update para guardar.

Consejos útiles:

Aquí no se puede cambiar ni la familia de fuente ni el color. Tampoco se puede cambiar el color del divisor.

Eliminar componente

Paso 1: Haz clic en el componente que quieres eliminar y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en el ícono de papelera en la esquina inferior izquierda

Paso 3: Aparecerá una ventana emergente de verificación que dice “Are you sure you want to delete this component? This action cannot be undone.” - Haz clic en “Delete”

Paso 4: Haz clic en “Save” en la esquina inferior izquierda

Paso 5: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo

Componente General Content

También conocido como: Cuadro de texto

¿Qué es? Un cuadro para incluir texto. Nota: solo texto; no titulares ni imágenes.

Descripción: Se usa para agregar texto a una página.

Agregar un componente nuevo

También aparece una sección nueva al final para que puedas colocarlo en una sección nueva y luego mover la sección de la misma manera.

Editar componente

PARA CONFIGURAR:

Paso 1: Haz clic en el título, General Content; el widget se pone azul.

Paso 2: Haz clic en el ícono de lápiz; se abre un panel de edición.

Paso 3: Aparece un cuadro de contenido. Escribe el texto.

Paso 4: Haz clic en Update para guardar.

PARA MODIFICAR:

Paso 1: Haz clic en el título, General Content; el widget se pone azul.

Paso 2: Haz clic en el ícono de lápiz; se abre un panel de edición.

Paso 3: Cambia lo que desees.

Paso 4: Haz clic en Update para guardar.

Eliminar componente

Paso 1: Haz clic en el componente que quieres eliminar y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en el ícono de papelera en la esquina inferior izquierda

Paso 3: Aparecerá una ventana emergente de verificación que dice “Are you sure you want to delete this component? This action cannot be undone.” - Haz clic en “Delete”

Paso 4: Haz clic en “Save” en la esquina inferior izquierda

Paso 5: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo

Componente Staggered Content

También conocido como: Imagen de un lado y contenido del otro

¿Qué es? Un diseño visual donde una imagen puede ir a la izquierda o a la derecha, con el contenido correspondiente en el lado opuesto.

Descripción: Esta función se puede agregar a una página para mostrar una imagen, ya sea a la izquierda o a la derecha, con espacio en el lado opuesto para un encabezado, subencabezado, línea divisoria si se desea, contenido, un botón que enlace a un sitio web interno o externo, o un botón de “leer más” si quieres que se abra una ventana modal con contenido adicional.

Agregar un componente nuevo

También aparece una sección nueva al final para que puedas colocarlo en una sección nueva y luego mover la sección de la misma manera.

Editar componente

Paso 1: Haz clic en el componente StaggardContent y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Ingresa el Heading (el título en la parte superior) y el Subheading (justo debajo del encabezado)

Paso 3: Elige el Heading Level (H1-6)

Paso 4: Selecciona Divider si quieres uno (pondrá una línea delgada debajo del subencabezado)

Paso 5: Agrega el Content (el párrafo que quieres debajo del subencabezado). Puedes agregar formato y enlaces con este sitio: https://html-online.com/

Paso 6: Selecciona si quieres que los encabezados y el párrafo estén centrados activando “Is Text Centered?”.

Paso 7: Elige la imagen o el video que quieres (se mostrará al lado del contenido).

Para una imagen: Haz clic en el botón “Choose Image” y se abrirá la Media Library. Haz clic en la carpeta thinkreservations y luego en la carpeta correspondiente. Si quieres cargar una imagen nueva, haz clic en el botón “Upload” en la esquina superior izquierda.

Para un video: Ingresa un Src (URL) de YouTube o de la Media Gallery (si cargaste uno ahí). En Video Title, agrega un título adecuado.

Paso 8: Elige si la imagen o el video irá a la izquierda o a la derecha activando “Is Image/Video First”?

Paso 9: Ignora “Should The Image Be A Background Image?”

Paso 10: Si quieres un botón debajo del contenido, agrega lo siguiente:

Agrega el texto que quieres en el botón en “Button Text”
SI quieres que el botón lleve a un enlace: Ingresa el Href (URL) al que quieres que lleve el botón. Si el enlace es a una página de tu sitio web, solo tienes que agregar el “enlace relativo” (ej. en lugar de agregar “https://www.yourwebsite.com/page” solo tienes que poner “/page”)
SI quieres que el botón abra una ventana modal emergente: En el cuadro Button Modal Contents agrega el contenido de texto que quieres mostrar en la ventana emergente. Para agregar enlaces o formato al texto, puedes crearlo en HTML con sitios como https://html-online.com/.

Paso 11: Haz clic en “Update” en la esquina inferior izquierda para ver la vista previa

Paso 12: Haz clic en “Save” en la esquina inferior izquierda

Paso 13: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo.

Eliminar componente

Paso 1: Haz clic en el componente que quieres eliminar y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en el ícono de papelera en la esquina inferior izquierda

Paso 3: Aparecerá una ventana emergente de verificación que dice “Are you sure you want to delete this component? This action cannot be undone.” - Haz clic en “Delete”

Paso 4: Haz clic en “Save” en la esquina inferior izquierda

Paso 5: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo

Componente Stack Two

También conocido como: Fila de dos fotos

¿Qué es? Una fila de dos imágenes con título, descripción y enlaces apilados debajo

Descripción: Cada “stack” tiene la opción de agregar una imagen, título, subencabezado, línea divisoria, contenido de texto y botones debajo. La altura de las imágenes varía según el tamaño de las imágenes.

Agregar un componente nuevo

También aparece una sección nueva al final para que puedas colocarlo en una sección nueva y luego mover la sección de la misma manera.

Editar componente

Paso 1: Haz clic en el componente StackTwo y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Elige el Heading Level (H1-6). Este será el tamaño del encabezado debajo de cada imagen.

Paso 3: Selecciona Divider si quieres uno (pondrá una línea delgada debajo de cada subencabezado)

AGREGA ELEMENTOS PARA CADA STACK (COLUMNA):

Paso 4: Elige la imagen que quieres.

Haz clic en el botón “Choose Image” y se abrirá la Media Library. Haz clic en la carpeta thinkreservations y luego en la carpeta correspondiente. Si quieres cargar una imagen nueva, haz clic en el botón “Upload” en la esquina superior izquierda.

Paso 5: Ingresa el Heading (título debajo de la imagen) y el Subheading (justo debajo del encabezado)

Paso 6: Agrega el Content (el párrafo que quieres debajo del subencabezado). Puedes agregar formato y enlaces con este sitio: https://html-online.com/

Paso 7: Si quieres un botón debajo del contenido, agrega lo siguiente:

Agrega el texto que quieres en el botón en “Button Text”.
Si quieres que el botón lleve a un enlace: Ingresa el Href (URL) al que quieres que lleve el botón. Si el enlace es a una página de tu sitio web, solo tienes que agregar el “enlace relativo” (ej. en lugar de agregar “https://www.yourwebsite.com/page” solo tienes que poner “/page”)
Si quieres que el botón abra una ventana modal emergente: En el cuadro Button Modal Contents agrega el contenido de texto que quieres mostrar en la ventana emergente. Para agregar enlaces o formato al texto, puedes crearlo en HTML con este sitio: https://html-online.com/.

Paso 8: Continúa con los pasos 4-7 para cada Stack

Paso 9: Haz clic en “Update” en la esquina inferior izquierda para ver la vista previa

Paso 10: Haz clic en “Save” en la esquina inferior izquierda

Paso 11: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo.

Eliminar componente

Paso 1: Haz clic en el componente que quieres eliminar y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en el ícono de papelera en la esquina inferior izquierda

Paso 3: Aparecerá una ventana emergente de verificación que dice “Are you sure you want to delete this component? This action cannot be undone.” - Haz clic en “Delete”

Paso 4: Haz clic en “Save” en la esquina inferior izquierda

Paso 5: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo.

Componente Stack Three

También conocido como: Fila de tres fotos, Tríptico

¿Qué es? Una fila de tres imágenes con título, descripción y enlaces apilados debajo

Agregar un componente nuevo

También aparece una sección nueva al final para que puedas colocarlo en una sección nueva y luego mover la sección de la misma manera.

Editar componente

Paso 1: Haz clic en el componente StackThree y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Elige el Heading Level (H1-6). Este será el tamaño del encabezado debajo de cada imagen.

Paso 3: Selecciona Divider si quieres uno (pondrá una línea delgada debajo de cada subencabezado)

AGREGA ELEMENTOS PARA CADA STACK (COLUMNA):

Paso 4: Elige la imagen que quieres.

Haz clic en el botón “Choose Image” y se abrirá la Media Library.
Haz clic en la carpeta thinkreservations y luego en la carpeta correspondiente.
Si quieres cargar una imagen nueva, haz clic en el botón “Upload” en la esquina superior izquierda.

Paso 5: Ingresa el Heading (título debajo de la imagen) y el Subheading (justo debajo del encabezado)

Paso 6: Agrega el Content (el párrafo que quieres debajo del subencabezado). Puedes agregar formato y enlaces con este sitio: https://html-online.com/

Paso 7: Si quieres un botón debajo del contenido, agrega lo siguiente:

Agrega el texto que quieres en el botón en “Button Text”
Si quieres que el botón lleve a un enlace: Ingresa el Href (URL) al que quieres que lleve el botón. Si el enlace es a una página de tu sitio web, solo tienes que agregar el “enlace relativo” (ej. en lugar de agregar “https://www.yourwebsite.com/page” solo tienes que poner “/page”)
Si quieres que el botón abra una ventana modal emergente: En el cuadro Button Modal Contents agrega el contenido de texto que quieres mostrar en la ventana emergente. Para agregar enlaces o formato al texto, puedes crearlo en HTML con este sitio: https://html-online.com/.

Paso 8: Continúa con los pasos 4-7 para cada Stack.

Paso 9: Haz clic en “Update” en la esquina inferior izquierda para ver la vista previa

Paso 10: Haz clic en “Save” en la esquina inferior izquierda

Paso 11: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo

Eliminar componente

Paso 1: Haz clic en el componente que quieres eliminar y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en el ícono de papelera en la esquina inferior izquierda

Paso 3: Aparecerá una ventana emergente de verificación que dice “Are you sure you want to delete this component? This action cannot be undone.” - Haz clic en “Delete”

Paso 4: Haz clic en “Save” en la esquina inferior izquierda

Paso 5: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo

Componente Stack Four

También conocido como: Fila de cuatro fotos

¿Qué es? Una fila de cuatro imágenes con título, descripción y enlaces apilados debajo

Agregar un componente nuevo

También aparece una sección nueva al final para que puedas colocarlo en una sección nueva y luego mover la sección de la misma manera.

Editar componente

Paso 1: Haz clic en el componente StackThree y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Elige el Heading Level (H1-6). Este será el tamaño del encabezado debajo de cada imagen.

Paso 3: Selecciona Divider si quieres uno (pondrá una línea delgada debajo de cada subencabezado)

AGREGA ELEMENTOS PARA CADA STACK (COLUMNA):

Paso 4: Elige la imagen que quieres.

Paso 5: Ingresa el Heading (título debajo de la imagen) y el Subheading (justo debajo del encabezado)

Paso 6: Agrega el Content (el párrafo que quieres debajo del subencabezado). Puedes agregar formato y enlaces con este sitio: https://html-online.com/

Paso 7: Si quieres un botón debajo del contenido, agrega lo siguiente:

Agrega el texto que quieres en el botón en “Button Text”
SI quieres que el botón lleve a un enlace: Ingresa el Href (URL) al que quieres que lleve el botón. Si el enlace es a una página de tu sitio web, solo tienes que agregar el “enlace relativo” (ej. en lugar de agregar “https://www.yourwebsite.com/page” solo tienes que poner “/page”)
SI quieres que el botón abra una ventana modal emergente: En el cuadro Button Modal Contents agrega el contenido de texto que quieres mostrar en la ventana emergente. Para agregar enlaces o formato al texto, puedes crearlo en HTML con este sitio: https://html-online.com/.

Paso 8: Continúa con los pasos 4-7 para cada Stack.

Paso 9: Haz clic en “Update” en la esquina inferior izquierda para ver la vista previa.

Paso 10: Haz clic en “Save” en la esquina inferior izquierda.

Paso 11: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo.

Eliminar componente

Paso 1: Haz clic en el componente que quieres eliminar y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en el ícono de papelera en la esquina inferior izquierda

Paso 3: Aparecerá una ventana emergente de verificación que dice “Are you sure you want to delete this component? This action cannot be undone.” - Haz clic en “Delete”

Paso 4: Haz clic en “Save” en la esquina inferior izquierda

Paso 5: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo.

Componente Stack Five

También conocido como: Fila de cinco fotos

¿Qué es? Una fila de cinco imágenes con título, descripción y enlaces apilados debajo

Agregar un componente nuevo

También aparece una sección nueva al final para que puedas colocarlo en una sección nueva y luego mover la sección de la misma manera.

Editar componente

Paso 1: Haz clic en el componente StackFive y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Elige el Heading Level (H1-6). Este será el tamaño del encabezado debajo de cada imagen.

Paso 3: Selecciona Divider si quieres uno (pondrá una línea delgada debajo de cada subencabezado)

AGREGA ELEMENTOS PARA CADA STACK (COLUMNA):

Paso 4: Elige la imagen que quieres.

Paso 5: Ingresa el Heading (título debajo de la imagen) y el Subheading (justo debajo del encabezado)

Paso 6: Agrega el Content (el párrafo que quieres debajo del subencabezado). Puedes agregar formato y enlaces con este sitio: https://html-online.com/

Paso 7: Si quieres un botón debajo del contenido, agrega lo siguiente:

Agrega el texto que quieres en el botón en “Button Text”
Si quieres que el botón lleve a un enlace: Ingresa el Href (URL) al que quieres que lleve el botón. Si el enlace es a una página de tu sitio web, solo tienes que agregar el “enlace relativo” (ej. en lugar de agregar “https://www.yourwebsite.com/page” solo tienes que poner “/page”)
Si quieres que el botón abra una ventana modal emergente: En el cuadro Button Modal Contents agrega el contenido de texto que quieres mostrar en la ventana emergente. Para agregar enlaces o formato al texto, puedes crearlo en HTML con este sitio: https://html-online.com/.

Paso 8: Continúa con los pasos 4-7 para cada Stack

Paso 9: Haz clic en “Update” en la esquina inferior izquierda para ver la vista previa

Paso 10: Haz clic en “Save” en la esquina inferior izquierda

Paso 11: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo

Eliminar componente

Paso 1: Haz clic en el componente que quieres eliminar y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en el ícono de papelera en la esquina inferior izquierda

Paso 3: Aparecerá una ventana emergente de verificación que dice “Are you sure you want to delete this component? This action cannot be undone.” - Haz clic en “Delete”

Paso 4: Haz clic en “Save” en la esquina inferior izquierda

Paso 5: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo

Componente Stack Two with Background Image

También conocido como: Fila de dos fotos con fondo

¿Qué es? Una fila de dos imágenes con título, descripción y enlaces en un cuadro blanco sobre la imagen

Descripción: Cada imagen tiene la opción de agregar una imagen, título, subencabezado, línea divisoria, contenido de texto y botones sobre la imagen. La altura está fijada en un tamaño vertical/horizontal determinado y se recortará si es necesario.

Agregar un componente nuevo

También aparece una sección nueva al final para que puedas colocarlo en una sección nueva y luego mover la sección de la misma manera.

Editar componente

Paso 1: Haz clic en el componente StackTwoBackgroundImage y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Elige el Heading Level (H1-6). Este será el tamaño del encabezado debajo de cada imagen.

Paso 3: Selecciona Divider si quieres uno (pondrá una línea delgada debajo de cada subencabezado)

AGREGA ELEMENTOS PARA CADA STACK (COLUMNA):

Paso 4: Elige la imagen de fondo que quieres.

Paso 5: Ingresa el Heading (título debajo de la imagen) y el Subheading (justo debajo del encabezado)

Paso 6: Agrega el Content (el párrafo que quieres debajo del subencabezado). Puedes agregar formato y enlaces con este sitio: https://html-online.com/

Paso 7: Si quieres un botón debajo del contenido, agrega lo siguiente:

Agrega el texto que quieres en el botón en “Button Text”
SI quieres que el botón lleve a un enlace: Ingresa el Href (URL) al que quieres que lleve el botón. Si el enlace es a una página de tu sitio web, solo tienes que agregar el “enlace relativo” (ej. en lugar de agregar “https://www.yourwebsite.com/page” solo tienes que poner “/page”)
SI quieres que el botón abra una ventana modal emergente: En el cuadro Button Modal Contents agrega el contenido de texto que quieres mostrar en la ventana emergente. Para agregar enlaces o formato al texto, puedes crearlo en HTML con este sitio: https://html-online.com/.

Paso 8: Continúa con los pasos 4-7 para cada Stack

Paso 9: Haz clic en “Update” en la esquina inferior izquierda para ver la vista previa

Paso 10: Haz clic en “Save” en la esquina inferior izquierda

Paso 11: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo.

Eliminar componente

Paso 1: Haz clic en el componente que quieres eliminar y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en el ícono de papelera en la esquina inferior izquierda

Paso 3: Aparecerá una ventana emergente de verificación que dice “Are you sure you want to delete this component? This action cannot be undone.” - Haz clic en “Delete”

Paso 4: Haz clic en “Save” en la esquina inferior izquierda

Paso 5: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo.

Componente Stack Three with Background Image

También conocido como: Fila de tres fotos con fondo

¿Qué es? Una fila de tres imágenes con título, descripción y enlaces en un cuadro blanco sobre la imagen

Agregar un componente nuevo

También aparece una sección nueva al final para que puedas colocarlo en una sección nueva y luego mover la sección de la misma manera.

Editar componente

Paso 1: Haz clic en el componente StackThreeBackgroundImage y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Elige el Heading Level (H1-6). Este será el tamaño del encabezado debajo de cada imagen.

Paso 3: Selecciona Divider si quieres uno (pondrá una línea delgada debajo de cada subencabezado)

AGREGA ELEMENTOS PARA CADA STACK (COLUMNA):

Paso 4: Elige la imagen de fondo que quieres.

Paso 5: Ingresa el Heading (título debajo de la imagen) y el Subheading (justo debajo del encabezado)

Paso 6: Agrega el Content (el párrafo que quieres debajo del subencabezado). Puedes agregar formato y enlaces con este sitio: https://html-online.com/

Paso 7: Si quieres un botón debajo del contenido, agrega lo siguiente:

Agrega el texto que quieres en el botón en “Button Text”
Si quieres que el botón lleve a un enlace: Ingresa el Href (URL) al que quieres que lleve el botón. Si el enlace es a una página de tu sitio web, solo tienes que agregar el “enlace relativo” (ej. en lugar de agregar “https://www.yourwebsite.com/page” solo tienes que poner “/page”)
Si quieres que el botón abra una ventana modal emergente: En el cuadro Button Modal Contents agrega el contenido de texto que quieres mostrar en la ventana emergente. Para agregar enlaces o formato al texto, puedes crearlo en HTML con este sitio: https://html-online.com/.

Paso 8: Continúa con los pasos 4-7 para cada Stack

Paso 9: Haz clic en “Update” en la esquina inferior izquierda para ver la vista previa

Paso 10: Haz clic en “Save” en la esquina inferior izquierda

Paso 11: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo

Eliminar componente

Paso 1: Haz clic en el componente que quieres eliminar y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en el ícono de papelera en la esquina inferior izquierda

Paso 3: Aparecerá una ventana emergente de verificación que dice “Are you sure you want to delete this component? This action cannot be undone.” - Haz clic en “Delete”

Paso 4: Haz clic en “Save” en la esquina inferior izquierda

Paso 5: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo

Componente Single Image

También conocido como: Una sola imagen en la página

¿Qué es? Una sola imagen que no es una imagen de encabezado ni está dentro de uno de los componentes apilados.

Descripción: Se puede usar para llenar un espacio donde sería bueno tener una imagen individual.

El tamaño puede variar, pero ten en cuenta que esta imagen no ocupará todo el ancho de la página (usa Edge to Edge Content para eso).
¡La imagen puede ser un enlace!

Agregar un componente nuevo

También aparece una sección nueva al final para que puedas colocarlo en una sección nueva y luego mover la sección de la misma manera.

Editar componente

Paso 1: Haz clic en el componente SingleImage y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Elige la imagen que quieres.

Paso 3: Ingresa el Max Width de la imagen en píxeles con “px” al final (Ej. 500px). Nota: La imagen no puede ocupar todo el ancho; siempre habrá un margen a ambos lados

Paso 4: Si quieres que la imagen sea un enlace, ingresa la URL en el campo Href. Si el enlace es a una página de tu sitio web, solo tienes que agregar el “enlace relativo” (ej. en lugar de agregar “https://www.yourwebsite.com/page” solo tienes que poner “/page”)

Paso 5: Haz clic en “Update” en la esquina inferior izquierda para ver la vista previa.

Paso 6: Haz clic en “Save” en la esquina inferior izquierda.

Paso 7: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo.

Eliminar componente

Paso 1: Haz clic en el componente que quieres eliminar y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en el ícono de papelera en la esquina inferior izquierda

Paso 3: Aparecerá una ventana emergente de verificación que dice “Are you sure you want to delete this component? This action cannot be undone.” - Haz clic en “Delete”

Paso 4: Haz clic en “Save” en la esquina inferior izquierda

Paso 5: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo

Componente Single Comment

También conocido como: Cita individual

¿Qué es? Una sola línea de texto encerrada entre comillas gráficas

Descripción: Una sola línea de texto, centrada, con comillas gráficas a cada lado. La línea de texto está debajo de una imagen pequeña y centrada, que puede ser la imagen de perfil de quien emitió la cita (por ejemplo, la foto de perfil de una persona o el logotipo de TripAdvisor, si la cita proviene de un negocio).

Agregar un componente nuevo

También aparece una sección nueva al final para que puedas colocarlo en una sección nueva y luego mover la sección de la misma manera.

Editar componente

Paso 1: Haz clic en el componente SingleComment y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Agrega el comentario que quieres entre las comillas. No puedes agregar formato adicional.

Paso 3: Agrega la imagen que quieres mostrar sobre la cita.

Paso 4: Haz clic en “Update” en la esquina inferior izquierda para ver la vista previa.

Paso 5: Haz clic en “Save” en la esquina inferior izquierda.

Paso 6: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo.

Eliminar componente

Paso 1: Haz clic en el componente que quieres eliminar y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en el ícono de papelera en la esquina inferior izquierda

Paso 3: Aparecerá una ventana emergente de verificación que dice “Are you sure you want to delete this component? This action cannot be undone.” - Haz clic en “Delete”

Paso 4: Haz clic en “Save” en la esquina inferior izquierda

Paso 5: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo

Componente Reviews

También conocido como: Un carrusel de reseñas

¿Qué es? Un carrusel de reseñas de la propiedad.

Descripción: Esta es una función que puedes agregar a una página para mostrar reseñas. El cliente elige las reseñas que quiere de Google, TripAdvisor, etc., y las agrega a esta sección. Puedes elegir mostrar una a la vez, dos a la vez o máximo tres a la vez. También puedes elegir si quieres que las reseñas se desplacen automáticamente.

Consejo profesional: Se ve mejor con un fondo sólido blanco o de color claro.

Agregar un componente nuevo

También aparece una sección nueva al final para que puedas colocarlo en una sección nueva y luego mover la sección de la misma manera.

Configurar el componente

Paso 1: Actualiza los elementos según corresponda.

Item #1 Auto Scroll button: hace que las reseñas del sitio web se queden en pantalla el tiempo suficiente para leerlas y luego pasen automáticamente a la(s) siguiente(s) reseña(s).

El estado predeterminado es izquierda / gris claro / APAGADO (OFF).
Desliza el botón a la derecha / se vuelve gris oscuro / ENCENDIDO (ON).

# of Visible Reviews: cuántas reseñas aparecen a la vez en la sección de reseñas. El campo muestra un 0; sin embargo, el componente mostrará 2 reseñas a la vez si no se define un número aquí.

Cuadro de contenido de Review 1

Title es el título de la reseña
Author es la persona que escribió la reseña
Content es el contenido de la reseña

Paso 2: Haz clic en el botón Add Review para generar otro cuadro de contenido y agregar una segunda reseña.

Sigue haciendo clic en el botón Add Review para generar el número necesario de cuadros de contenido y completar todas las reseñas.

Paso 3: Haz clic en el botón Update para guardar tu trabajo.

Nota: Si haces clic en el ícono de cuadrícula a la izquierda de Review 1 (o Review 2, Review 3, etc.), podrás hacer clic, mantener presionado y arrastrar el cuadro de contenido de la reseña hacia arriba o abajo para reordenar el orden en que aparecen las reseñas.

Editar componente

Paso 1: Haz clic en el nombre del componente (Reviews). Se pone azul. Haz clic en el ícono de lápiz para abrir el componente.

Paso 2: Se pueden modificar los ajustes y editar el texto.

Paso 3: Haz clic en el botón Update para guardar tu trabajo.

Eliminar una reseña

Paso 1: Haz clic en el nombre del componente (Reviews). Se pone azul. Haz clic en el ícono de lápiz para abrir el componente.

Paso 2: Haz clic en el ícono de papelera junto a la reseña que quieres eliminar (Review 1, Review 2, etc.)

Paso 3: Haz clic en el botón Update para guardar tu trabajo.

Agregar una reseña adicional

Paso 1: Haz clic en el nombre del componente (Reviews). Se pone azul. Haz clic en el ícono de lápiz para abrir el componente.

Paso 2: Haz clic en el botón Add Review para generar otro cuadro de contenido y agregar una segunda reseña.

Sigue haciendo clic en el botón Add Review para generar el número necesario de cuadros de contenido y completar todas las reseñas.

Paso 3: Haz clic en el botón Update para guardar tu trabajo.

Componente Edge-to-Edge Reviews

También conocido como: Un carrusel de reseñas con imagen de fondo

¿Qué es? Un carrusel de reseñas de la propiedad, mostrado sobre una imagen de fondo.

Descripción: Esta función se puede agregar a una página para mostrar reseñas en un cuadro blanco que se superpone a una imagen de fondo. Puede estar centrado sobre la imagen o extenderse por encima o por debajo de ella para lograr un efecto visual. El cliente elige las reseñas que quiere de Google, TripAdvisor, etc., y las agrega a esta sección. Puedes elegir mostrar una a la vez, dos a la vez o máximo tres a la vez. También puedes elegir si quieres que las reseñas se desplacen automáticamente. En esta función puedes agregar un encabezado y un subencabezado sobre las reseñas, y el tamaño de imagen habitual es de 1920px por 550px.

Agregar un componente nuevo

También aparece una sección nueva al final para que puedas colocarlo en una sección nueva y luego mover la sección de la misma manera.

Configurar el componente

Paso 1: Haz clic en el componente EdgeToEdgeContent y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en Choose Image y se abrirá la Media Library. Elige tu imagen de la biblioteca. Si aún no has cargado tu imagen, puedes cargarla haciendo clic en el botón Upload a la derecha. Si ya está cargada, haz un solo clic en la imagen y luego clic en select en la parte inferior; o haz doble clic y se agregará automáticamente.

Consejo útil: Se recomienda que esta imagen sea de 1920x550 píxeles

Paso 3: Elige la posición de tu imagen (dónde quedará la imagen detrás del contenido): Top, Center o Bottom.

Paso 4: Elige la posición del desvanecimiento de tu imagen (None, Center, Bottom)

Paso 5: Si decides usar un desvanecimiento, elige la cantidad (cuánto se desvanece sobre la imagen). Empieza con 300, míralo después de actualizar y revisa si te gusta cómo queda. Puedes ajustar la cantidad de desvanecimiento hacia arriba o hacia abajo hasta que quede como lo quieres.

Paso 6: Ingresa el ancho máximo del contenido, normalmente 1000 (qué tan ancho será el cuadro blanco)

Paso 7: Agrega tu encabezado

Paso 8: Elige el nivel de tu encabezado (1 para una imagen principal en la parte superior de la página; normalmente 2 dentro del cuerpo de la página)

Paso 9: Agrega tu subencabezado (se mostrará debajo del encabezado) o déjalo en blanco

Paso 10: Activa el botón de divisor si quieres una línea divisoria después del encabezado y el subencabezado

Paso 11: Agrega el Content (el párrafo que quieres debajo del subencabezado). Puedes agregar formato y enlaces con este sitio: https://html-online.com/

Paso 12: Si quieres un botón, ingresa el Href (URL) al que quieres que lleve el botón. Si el enlace es a una página de tu sitio web, solo tienes que agregar el “enlace relativo” (ej. en lugar de agregar “https://www.yourwebsite.com/page” solo tienes que poner “/page”)

Cuadro de contenido de Review 1

Title es el título de la reseña
Author es la persona que escribió la reseña
Content es el contenido de la reseña

Auto Scroll button: hace que las reseñas del sitio web se queden en pantalla el tiempo suficiente para leerlas y luego pasen automáticamente a la(s) siguiente(s) reseña(s).

El estado predeterminado es izquierda / gris claro / APAGADO (OFF).
Desliza el botón a la derecha / se vuelve gris oscuro / ENCENDIDO (ON).

Paso 13: Haz clic en el botón Update para guardar tu trabajo.

Nota: Si haces clic en el ícono de cuadrícula a la izquierda de Review 1 (o Review 2, Review 3, etc.), podrás hacer clic, mantener presionado y arrastrar el cuadro de contenido de la reseña hacia arriba o abajo para reordenar el orden en que aparecen las reseñas.

Editar componente

Paso 1: Haz clic en el nombre del componente (ReviewsEdgetoEdge). Se pone azul. Haz clic en el ícono de lápiz para abrir el componente.

Paso 2: Se pueden modificar los ajustes y editar el texto. Consulta más abajo para saber más.

Paso 3: Haz clic en el botón Update para guardar tu trabajo.

Eliminar una reseña

Paso 1: Haz clic en el nombre del componente (ReviewsEdgetoEdge). Se pone azul. Haz clic en el ícono de lápiz para abrir el componente.

Paso 2: Haz clic en el ícono de papelera junto a la reseña que quieres eliminar (Review 1, Review 2, etc.)

Paso 3: Haz clic en el botón Update para guardar tu trabajo.

Agregar una reseña adicional

Paso 1: Haz clic en el nombre del componente (ReviewsEdgetoEdge). Se pone azul. Haz clic en el ícono de lápiz para abrir el componente.

Paso 2: Desplázate más allá de los ajustes hasta el botón Add Review en la parte inferior. Haz clic en el botón para generar otro cuadro de contenido y agregar una segunda reseña.

Sigue haciendo clic en el botón Add Review para generar el número necesario de cuadros de contenido y completar todas las reseñas.

Paso 3: Haz clic en el botón Update para guardar tu trabajo.

Componente Edge-to-Edge Content

También conocido como: Imagen de fondo de ancho completo con contenido encima

¿Qué es? Una función de imagen en una página que además puede mostrar texto

Descripción: Esta sección muestra una imagen que va de borde a borde (ancho completo) de la página, con un cuadro de contenido superpuesto que puede estar centrado sobre la imagen o extenderse por encima o por debajo de ella para lograr un efecto visual. Puedes agregar un efecto de desvanecimiento en la parte superior o inferior de la imagen. El tamaño de imagen habitual para esta función es de 1920px por 550px.

Image Position (CENTER, TOP, BOTTOM) y Image Fade Location (NONE, TOP, BOTTOM) en el componente deben cambiarse a letras minúsculas, ya que es lo único que acepta el componente. Es contradictorio.

Agregar un componente nuevo

También aparece una sección nueva al final para que puedas colocarlo en una sección nueva y luego mover la sección de la misma manera.

Editar componente

Paso 1: Haz clic en el componente EdgeToEdgeContent y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Consejo útil: Se recomienda que esta imagen sea de 1920x550 píxeles

Paso 3: Elige la posición de tu imagen (dónde quedará la imagen detrás del contenido): Top, Center o Bottom.

Paso 4: Elige la posición del desvanecimiento de tu imagen (None, Center, Bottom)

Paso 6: Ingresa el ancho máximo del contenido, normalmente 1000 (qué tan ancho será el cuadro blanco)

Paso 7: Agrega tu encabezado

Paso 8: Elige el nivel de tu encabezado (1 para una imagen principal en la parte superior de la página; normalmente 2 dentro del cuerpo de la página)

Paso 9: Agrega tu subencabezado (se mostrará debajo del encabezado) o déjalo en blanco

Paso 10: Activa el botón de divisor si quieres una línea divisoria después del encabezado y el subencabezado

Paso 11: Agrega el Content (el párrafo que quieres debajo del subencabezado). Puedes agregar formato y enlaces con este sitio: https://html-online.com/

Paso 13: Haz clic en “Update” en la esquina inferior izquierda para ver la vista previa.

Paso 14: Haz clic en “Save” en la esquina inferior izquierda.

Paso 15: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo.

Eliminar componente

Paso 1: Haz clic en el componente que quieres eliminar y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en el ícono de papelera en la esquina inferior izquierda

Paso 3: Aparecerá una ventana emergente de verificación que dice “Are you sure you want to delete this component? This action cannot be undone.” - Haz clic en “Delete”

Paso 4: Haz clic en “Save” en la esquina inferior izquierda

Paso 5: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo

Componente Frequently Asked Questions

También conocido como: Panel de acordeón

¿Qué es? Una sección de contenido expandible

HAZ CLIC PARA VERLO EN ACCIÓN

Descripción: Una sección que se expande y se contrae: al hacer clic en la flecha junto a un titular, el cuadro de contenido se expande para mostrar información adicional.

Puede requerir el uso de algo de código HTML.

Agregar un componente nuevo

También aparece una sección nueva al final para que puedas colocarlo en una sección nueva y luego mover la sección de la misma manera.

Editar componente

Paso 1: Haz clic en el componente Frequently Asked Questions y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: En la parte superior dirá “Review 1.” Debajo hay un campo “Question” y un campo “Answer.” Completa cada campo con el contenido correspondiente. Cuando termines, haz clic en el botón “Add FAQ” para agregar otra.

Paso 5: Haz clic en “Update” en la esquina inferior izquierda para ver la vista previa.

Paso 6: Haz clic en “Save” en la esquina inferior izquierda.

Paso 7: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo.

Eliminar componente

Paso 1: Haz clic en el componente que quieres eliminar y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en el ícono de papelera en la esquina inferior izquierda

Paso 3: Aparecerá una ventana emergente de verificación que dice “Are you sure you want to delete this component? This action cannot be undone.” - Haz clic en “Delete”

Paso 4: Haz clic en “Save” en la esquina inferior izquierda

Paso 5: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo

Notas sobre HTML

1) Cómo agregar una lista con viñetas en el campo de respuesta:

En este caso necesitarías usar HTML.

Ejemplo:

La respuesta en HTML se vería así:

<p>Your nightly rate includes:</p>
<ul>
<li>Beautifully maintained guest room</li>
<li>High-speed Wi-Fi</li>
<li>Private bathroom</li>
<li>Kitchenette</li>
<li>Air conditioning &amp; heat</li>
<li>Smart TV</li>
<li>Historic-coastal d&eacute;cor</li>
<li>Complimentary on-site parking (one spot per room)</li>
<li>Unbeatable location steps from the beach , shopping and fine dining .</li>
<li>Beach Chairs &amp; Beach Towels</li>
</ul>

2) Cómo agregar un hipervínculo en una respuesta

Puedes usar el componente FAQ para otros fines, como el “calendario de eventos” de la imagen de abajo. El “Allstate Sugar Bowl” tiene un hipervínculo.

La respuesta en HTML se vería así:

<p><strong>Jan 1:</strong> <a href="https://allstatesugarbowl.org/" target="_blank">Allstate Sugar Bowl</a></p>
<p><strong>Jan 6:</strong> <a href="https://joanofarcparade.org/" target="_blank">Joan of Arc Parade</a>&nbsp;</p>
<p><strong>Jan 15-18:</strong> <a href="https://www.teaserfest.com/">Teaser Festival</a> (Burlesque &amp; Live Music Festival)</p>

Componente Tabbed Content

También conocido como: Páginas con pestañas

¿Qué es? Una página que tiene varias pestañas (páginas dentro de una página)

Descripción: Una página que puede tener mucho contenido que quieras dividir en diferentes páginas dentro de la misma página, para que cada dato sea fácil de encontrar sin tener que desplazarse por toda la página; por ejemplo, Things to Do puede tener una página con pestañas distinta para Things to Do, Shopping, Dining, Events, etc. Cada pestaña está diseñada como una página independiente, pero todas aparecen como páginas distintas dentro de la página principal

Agregar un componente nuevo

También aparece una sección nueva al final para que puedas colocarlo en una sección nueva y luego mover la sección de la misma manera.

Editar componente

Paso 1: Haz clic en el componente TabbedContent y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: En el cuadro Tabbed Content Page IDs agregarás un ID de página para el contenido de cada pestaña (uno en cada línea).

CÓMO CREAR EL CONTENIDO DE LA PESTAÑA Y EL ID DE PÁGINA:

Crea una página nueva (en la lista principal de páginas del Editor, haz clic en “+ New” en la esquina superior derecha)
Haz clic en “Edit Page” en la parte superior
Agrega el “Name” de la pestaña
En “Type” elige “Tabbed Content”
En “Path” ingresa el nombre de la página en la que pondrás las pestañas y un # antes del nombre de la pestaña (ej. /pagename#tabname)
En “Title” pon el nombre que quieres que se muestre en la pestaña (Ej. “Holiday Packages”)
Puedes agregar contenido a la página con los componentes descritos en este documento.
Haz clic en “Update”
Haz clic en “Save”

Paso 3: Abre la página con pestañas que acabas de crear. Al final de la URL del navegador, copia la cadena de letras y números del ID de la página que aparece después de “pages/”.

Paso 4: Pega la cadena del ID de la página en el cuadro Tabbed Content Page IDs del componente TabbedContent, en la página donde quieres que estén las pestañas.

Repite el proceso para cada pestaña que quieras y pon los IDs de página, uno por línea, en el cuadro.

Paso 5: Haz clic en “Update” en la esquina inferior izquierda para ver la vista previa.

Paso 6: Haz clic en “Save” en la esquina inferior izquierda.

Paso 7: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo.

Eliminar componente

Paso 1: Haz clic en el componente que quieres eliminar y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en el ícono de papelera en la esquina inferior izquierda

Paso 3: Aparecerá una ventana emergente de verificación que dice “Are you sure you want to delete this component? This action cannot be undone.” - Haz clic en “Delete”

Paso 4: Haz clic en “Save” en la esquina inferior izquierda

Paso 5: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo

Componente Logo Columns

También conocido como: Exhibición de logotipos

¿Qué es? Una fila/sección horizontal que puede mostrar hasta 5 logotipos

Descripción: Una función que puedes agregar a una página para mostrar horizontalmente hasta 5 logotipos, cada uno de los cuales puede enlazar a un sitio web externo. El ancho del logotipo no puede ser mayor a 200px.

Agregar un componente nuevo

También aparece una sección nueva al final para que puedas colocarlo en una sección nueva y luego mover la sección de la misma manera.

Editar componente

Paso 1: Haz clic en el componente LogoColumns y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en “+ Add Images”

Paso 3: Se abrirá la Media Library. Haz clic en la carpeta “thinkreservations” y luego selecciona la carpeta correspondiente.

Paso 4: Si las imágenes aún no están en la carpeta, puedes cargarlas haciendo clic en el botón “upload” en la esquina superior derecha.

Paso 5: Haz clic en las imágenes que quieres (hasta 5). Para seleccionar más de una, mantén presionada la tecla control o shift mientras haces clic en las imágenes que quieres. Haz clic en “Select”

Para cambiar el orden de las imágenes: Haz clic en las imágenes que quieres mover (puedes seleccionar más de una manteniendo presionada la tecla control o shift mientras haces clic en las imágenes) y usa las pequeñas flechas (← →) para moverlas donde las quieras.

Para eliminar imágenes: Haz clic en la imagen que quieres eliminar (puedes seleccionar más de una manteniendo presionada la tecla control o shift mientras haces clic en las imágenes) y luego haz clic en el botón de menos (-) en la parte superior (no hay advertencia, así que asegúrate de seleccionar las correctas).

Paso 6: Si quieres que las imágenes sean enlaces, agrega los enlaces en el cuadro “Image URLs”. Pon una URL en cada línea, en el mismo orden en que están las imágenes.

Paso 7: Haz clic en “Update” en la esquina inferior izquierda para ver la vista previa

Paso 8: Haz clic en “Save” en la esquina inferior izquierda

Paso 9: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo.

Eliminar componente

Paso 1: Haz clic en el componente que quieres eliminar y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en el ícono de papelera en la esquina inferior izquierda

Paso 3: Aparecerá una ventana emergente de verificación que dice “Are you sure you want to delete this component? This action cannot be undone.” - Haz clic en “Delete”

Paso 4: Haz clic en “Save” en la esquina inferior izquierda

Paso 5: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo.

Componente Hosted Video

También conocido como: Video

¿Qué es? Agrega un video en cualquier parte del sitio web

Descripción: El video debe cargarse en la Media Library y luego se usa el enlace dentro de este componente. "Hosted" aquí significa que el archivo vive en el mismo servidor que tu sitio web, en lugar de en otra plataforma como YouTube o Vimeo.

Agregar un componente nuevo

También aparece una sección nueva al final para que puedas colocarlo en una sección nueva y luego mover la sección de la misma manera.

Editar componente

Paso 1: Carga tu video en la Media Library:

Haz clic en el pequeño logotipo de casa de ThikWeb en la esquina superior izquierda. Luego haz clic en Media Library (haz clic derecho y “Abrir enlace en una pestaña nueva” para que sea fácil volver a la página de edición.)
Haz clic en la carpeta “thinkreservations”
Selecciona la carpeta correspondiente y haz clic en el botón “Upload” en la esquina superior derecha.
Una vez cargado el video, haz clic en el video y luego en “Edit” en la esquina superior izquierda
Haz clic en “Copy Url”

Paso 2: En el Editor de páginas (si aún no lo tienes abierto, haz clic en el pequeño logotipo de casa de ThikWeb en la esquina superior izquierda, selecciona “ThinkWeb” y luego la página en la que quieres trabajar). Haz clic en el componente HostedVideo y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 3: En el campo Video Src, pon la URL del video (consulta el Paso 1 para saber cómo obtenerla).

Paso 4: Ingresa un Title para el video (solo se mostrará cuando alguien pase el mouse sobre el video)

Paso 5: Elige si quieres que el video:

Se reproduzca automáticamente (Autoplay)
Esté silenciado (Be Muted, sin audio)
Muestre los controles (Show controls: reproducir, pausar, etc.)
Se repita en bucle (Loop: vuelve a empezar desde el principio cuando llega al final)

Paso 6: Haz clic en “Update” en la esquina inferior izquierda para ver la vista previa

Paso 7: Haz clic en “Save” en la esquina inferior izquierda

Paso 8: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo

Eliminar componente

Paso 1: Haz clic en el componente que quieres eliminar y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en el ícono de papelera en la esquina inferior izquierda

Paso 3: Aparecerá una ventana emergente de verificación que dice “Are you sure you want to delete this component? This action cannot be undone.” - Haz clic en “Delete”

Paso 4: Haz clic en “Save” en la esquina inferior izquierda

Paso 5: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo

Componente Video

También conocido como: Video web

¿Qué es? Muestra un video publicado en tu sitio web

Descripción: Los videos viven (están alojados) en plataformas de terceros, como YouTube y Vimeo. Puedes usar este componente para reproducirlos. Pega el enlace para compartir de tu video de YouTube o Vimeo.

Agregar un componente nuevo

También aparece una sección nueva al final para que puedas colocarlo en una sección nueva y luego mover la sección de la misma manera.

Editar componente

Paso 1: Haz clic en el componente Video y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: En el cuadro Video Src, agrega la URL del video (en YouTube, haz clic en Compartir y luego en Insertar. En el código de inserción, elige la URL que está entre comillas después de “src=”)

Paso 3: Ingresa un Title para el video (solo se mostrará cuando alguien pase el mouse sobre el video)

Paso 4: Haz clic en “Update” en la esquina inferior izquierda para ver la vista previa

Paso 5: Haz clic en “Save” en la esquina inferior izquierda

Paso 6: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo.

Eliminar componente

Paso 1: Haz clic en el componente que quieres eliminar y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en el ícono de papelera en la esquina inferior izquierda

Paso 3: Aparecerá una ventana emergente de verificación que dice “Are you sure you want to delete this component? This action cannot be undone.” - Haz clic en “Delete”

Paso 4: Haz clic en “Save” en la esquina inferior izquierda

Paso 5: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo

Componente Video List

¿Qué es? Muestra videos lado a lado en tu sitio web

Descripción: Se pueden mostrar varios videos en línea en tu sitio. Puede ser una combinación de videos alojados en ThinkReservations o en una plataforma de terceros como Vimeo o YouTube.

Agregar un componente nuevo

También aparece una sección nueva al final para que puedas colocarlo en una sección nueva y luego mover la sección de la misma manera.

Editar componente

PARA CONFIGURAR:

Paso 1: Haz clic en el título, Video List; el widget se pone azul.

Paso 2: Haz clic en el ícono de lápiz; se abre un panel de edición.

Paso 3: Selecciona el número de Columns en el menú desplegable (1, 2 o 3).

Paso 4: Completa el campo Title.

Paso 5: Pega el enlace del video. Puede ser un enlace para compartir de YouTube, Vimeo u otra fuente. Si el video se cargó en tu Media Library, pega la URL del video.

Paso 6: Haz clic en el botón Add Video para agregar otro video.

Paso 7: Haz clic en Update para guardar tu componente.

Paso 8: Haz clic en Save para guardar tu página.

PARA MODIFICAR:

Paso 1: Haz clic en el título, Video List; el widget se pone azul.

Paso 2: Haz clic en el ícono de lápiz; se abre un panel de edición.

Paso 3: Cambia lo que desees.

Haz clic en el ícono de cuadrícula que está a la izquierda de Video # para cambiar el orden en que se muestran los videos.
Haz clic en el ícono de papelera a la derecha de Video # para eliminar ese video.
Haz clic en el ícono de papelera en la parte inferior izquierda del componente para eliminar el componente Video List.

Paso 4: Haz clic en Update para guardar.

Eliminar componente

Paso 1: Haz clic en el componente que quieres eliminar y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en el ícono de papelera en la esquina inferior izquierda

Paso 3: Aparecerá una ventana emergente de verificación que dice “Are you sure you want to delete this component? This action cannot be undone.” - Haz clic en “Delete”

Paso 4: Haz clic en “Save” en la esquina inferior izquierda

Paso 5: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo

Componente Responsive Table

También conocido como: Una tabla con columnas y filas

¿Qué es? Una tabla con varias filas y columnas para mostrar información detallada de un vistazo

Descripción: Se puede usar como cuadro comparativo para destacar diferentes amenidades de las habitaciones o diferentes paquetes y lo que ofrecen.

Puede tener imágenes o no
Las imágenes deben ser horizontales, de cualquier tamaño, pero se mostrarán de 150x100 píxeles
Puede requerir conocimientos de HTML

Agregar un componente nuevo

Paso 1: Haz clic en el botón +New del componente en la parte superior derecha. Elige el componente Responsive Table en la sección Advance. Selecciónalo y haz clic en el botón Add. Se agregará a tu lista de componentes a la derecha. Muévelo a otra sección haciendo clic en el componente Responsive Table; haz clic en las flechas hacia arriba y abajo y agrégalo en el + que está debajo de new section.

Paso 2: Haz doble clic en el componente Responsive Table y se abrirá. Crea primero tus columnas… A la izquierda del botón Add Column escribe el nombre de esa columna, una característica por columna… por ejemplo, Picture (si quieres una imagen), Room, Guests, Bathroom, Features, etc. Haz clic en Add Column después de cada una y se mostrará una columna nueva para que agregues otra.

Paso 3: Agrega tus filas a continuación. Se generarán automáticamente según las columnas que creaste. Todas las columnas que creaste se mostrarán con un cuadro para ingresar tu información.

Paso 4: Para agregar una imagen, necesitas tenerla en formato HTML. Tendrás que abrir la imagen que quieres agregar en la Media Library, copiar el enlace de la URL y luego agregarlo a una línea de HTML, por ejemplo:

<img src="https://media-bridge.thinkreservations.com/media-library/hotels/953789243112/0e1d3aaf-a374-4c6d-ab00-69fcaeb06456/lanaux-mansion-hero-3.jpg">

Solo tienes que reemplazar todo lo que está entre las comillas con la URL de la imagen que vas a usar. Ponlo en la fila y haz clic en add. *Se recomienda que todas tus imágenes tengan el mismo tamaño y sean horizontales.

Paso 5: Para que una habitación tenga un hipervínculo a la página de una habitación en particular, deberás tenerlo en formato HTML. Necesitarás la URL de la habitación (que empieza con la página de habitaciones/nombre-de-la-habitación), junto con el nombre de la habitación; agrega el nombre y la URL de tu habitación al código:

<a href="/luxury-rooms-and-suites/wieland-suite">Wieland Suite</a>

Reemplaza el slug /luxury-rooms-and-suites/wieland-suite con el slug de tu habitación, luego agrega el nombre de la habitación donde dice Wieland Suite, copia todo desde <a href….</a> y ponlo en la fila y haz clic en add.

Paso 6: Deberías poder simplemente escribir los datos que quieras en las demás filas… por ejemplo, Guests: 2 Bed: King Features: Private Bath, Jacuzzi Tub, Microwave, Coffeemaker View: Garden

Paso 7: Una vez que hayas llenado todas tus columnas y filas, haz clic en Update en la parte inferior para ver una vista previa. Si te gusta como está, haz clic en Save.

Paso 8: Luego haz clic en Publish, y vuelve a hacer clic en Publish para que quede en vivo.

Editar componente

Sigue los mismos pasos de Agregar un componente nuevo que se indican arriba, a partir del Paso 2.

Puedes cambiar cualquiera de las columnas y características existentes, o agregar columnas o características nuevas, cambiar habitaciones, etc.

Eliminar componente

Paso 1: Haz clic en el componente que quieres eliminar y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en el ícono de papelera en la esquina inferior izquierda

Paso 3: Aparecerá una ventana emergente de verificación que dice “Are you sure you want to delete this component? This action cannot be undone.” - Haz clic en “Delete”

Paso 4: Haz clic en “Save” en la esquina inferior izquierda

Paso 5: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo

Componente HTML

También conocido como: Cuadro de código HTML

¿Qué es? Un cuadro de contenido para ingresar HTML

Descripción: Permite ingresar código HTML básico. Es necesario cuando tienes HTML sin procesar que debe insertarse en la página.

Ten en cuenta: No todo el HTML es compatible.

No se admite el uso de estilos en línea (CSS) en este componente.

Esto no sirve para agregar scripts a tu página.

Agregar un componente nuevo

También aparece una sección nueva al final para que puedas colocarlo en una sección nueva y luego mover la sección de la misma manera.

Editar componente

Paso 1: Haz clic en el componente HTML y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Ingresa el HTML que quieras en el cuadro. Puedes crear tu HTML con sitios como este: https://html-online.com/

Paso 3: Haz clic en “Update” en la esquina inferior izquierda para ver la vista previa

Paso 4: Haz clic en “Save” en la esquina inferior izquierda

Paso 5: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo

Eliminar componente

Paso 1: Haz clic en el componente que quieres eliminar y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en el ícono de papelera en la esquina inferior izquierda

Paso 3: Aparecerá una ventana emergente de verificación que dice “Are you sure you want to delete this component? This action cannot be undone.” - Haz clic en “Delete”

Paso 4: Haz clic en “Save” en la esquina inferior izquierda

Paso 5: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo

Componentes relacionados con botones

Estos son componentes que usan botones en tus páginas.

Componente Button

También conocido como: Botón CTA (Call to Action, llamada a la acción)

¿Qué es? Un rectángulo clicable que te dirige a contenido adicional.

Descripción: Una llamada a la acción que enlaza a contenido nuevo.

Agregar un componente nuevo

También aparece una sección nueva al final para que puedas colocarlo en una sección nueva y luego mover la sección de la misma manera.

Editar componente

Paso 1: Haz clic en el componente Button y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Ingresa el Text que quieres en el botón

Paso 3: Ingresa el Href (URL) al que quieres que lleve el botón. Si el enlace es a una página de tu sitio web, solo tienes que agregar el “enlace relativo” (ej. en lugar de agregar “https://www.yourwebsite.com/page” solo tienes que poner “/page”)

Paso 4: Haz clic en “Update” en la esquina inferior izquierda para ver la vista previa y probar tu botón

Paso 5: Haz clic en “Save” en la esquina inferior izquierda

Paso 6: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo

Eliminar componente

Paso 1: Haz clic en el componente que quieres eliminar y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en el ícono de papelera en la esquina inferior izquierda

Paso 3: Aparecerá una ventana emergente de verificación que dice “Are you sure you want to delete this component? This action cannot be undone.” - Haz clic en “Delete”

Paso 4: Haz clic en “Save” en la esquina inferior izquierda

Paso 5: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo

Componente Button Modal

También conocido como: Ventana emergente para ver más

¿Qué es? Un rectángulo clicable que abre una ventana emergente con contenido adicional

Descripción: Se usa para incluir texto adicional, pero ocultarlo en la página. El botón revela el texto. Por ejemplo, el botón podría decir “Learn More”.

Agregar un componente nuevo

También aparece una sección nueva al final para que puedas colocarlo en una sección nueva y luego mover la sección de la misma manera.

Editar componente

Paso 1: Haz clic en el componente ButtonModal y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Ingresa el Text que quieres en el botón

Paso 3: En el cuadro Button Modal Contents agrega el contenido de texto que quieres mostrar en la ventana emergente. Para agregar enlaces o formato al texto, puedes crearlo en HTML con este sitio: https://html-online.com/. Deja vacío el campo Class Name.

Paso 4: Haz clic en “Update” en la esquina inferior izquierda para ver la vista previa y probar tu botón

Paso 5: Haz clic en “Save” en la esquina inferior izquierda

Paso 6: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo

Eliminar componente

Paso 1: Haz clic en el componente que quieres eliminar y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en el ícono de papelera en la esquina inferior izquierda

Paso 3: Aparecerá una ventana emergente de verificación que dice “Are you sure you want to delete this component? This action cannot be undone.” - Haz clic en “Delete”

Paso 4: Haz clic en “Save” en la esquina inferior izquierda

Paso 5: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo

Componentes relacionados con imágenes

Estos son componentes que se relacionan con fotos o imágenes.

Componente Card Carousel

También conocido como: Carrusel de tarjetas con desplazamiento

¿Qué es? Imágenes con títulos y/o logotipo encima

Descripción: Tres imágenes con imágenes de fondo y la opción de poner un título y un logotipo encima. Hay puntos debajo en los que puedes hacer clic para ver más “tarjetas” si hay más de tres.

Agregar un componente nuevo

También aparece una sección nueva al final para que puedas colocarlo en una sección nueva y luego mover la sección de la misma manera.

Editar componente

PARA CONFIGURAR:

Paso 1: Selecciona la imagen de fondo de la media library.

Paso 2: Selecciona el logotipo de la media library (opcional).

Paso 3: Agrega cualquier texto en el campo Content (opcional).

Paso 4: Agrega una URL (opcional).

Paso 5: Haz clic en el botón Add Card para agregar una tarjeta adicional.

Paso 6: Sigue haciendo clic en Add Card para incluir todas las tarjetas que quieras.

Paso 7: Haz clic en Update para guardar tu componente.

Paso 8: Haz clic en Save para guardar tu página.

PARA MODIFICAR:

Paso 1: Haz clic en el título, Card Carousel; el widget se pone azul.

Paso 2: Haz clic en el ícono de lápiz; se abre un panel de edición.

Paso 3: Cambia lo que desees.

Haz clic en el ícono de cuadrícula que está a la izquierda de Card # para cambiar el orden en que se muestran las tarjetas.
Haz clic en el ícono de papelera a la derecha de Video # para eliminar esa tarjeta.
Haz clic en el ícono de papelera en la parte inferior izquierda del componente para eliminar el componente Card Carousel.

Paso 4: Haz clic en Update para guardar.

Eliminar componente

Paso 1: Haz clic en el componente que quieres eliminar y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en el ícono de papelera en la esquina inferior izquierda

Paso 3: Aparecerá una ventana emergente de verificación que dice “Are you sure you want to delete this component? This action cannot be undone.” - Haz clic en “Delete”

Paso 4: Haz clic en “Save” en la esquina inferior izquierda

Paso 5: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo

Componente Image Grid - Bento

También conocido como: Galería Bento

¿Qué es? Una galería en cuadrícula con dos imágenes lado a lado (tamaños de ⅓ y ⅔) apiladas en filas.

Descripción: Las imágenes horizontales funcionan mejor; las imágenes verticales se recortan.

Agregar un componente nuevo

También aparece una sección nueva al final para que puedas colocarlo en una sección nueva y luego mover la sección de la misma manera.

Editar componente

Paso 1: Haz clic en el componente BentoImageGrid y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en “+ Add Images”

Paso 3: Se abrirá la Media Library. Haz clic en la carpeta “thinkreservations” y luego selecciona la carpeta correspondiente.

Paso 4: Si las imágenes aún no están en la carpeta, puedes cargarlas haciendo clic en el botón “upload” en la esquina superior derecha.

Paso 5: Haz clic en las imágenes que quieres en la cuadrícula de imágenes. Para seleccionar más de una, mantén presionada la tecla control o shift mientras haces clic en las imágenes que quieres. Haz clic en “Select”

Paso 6: Haz clic en “Update” en la esquina inferior izquierda para ver la vista previa

Paso 7: Haz clic en “Save” en la esquina inferior izquierda

Paso 8: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo

Eliminar componente

Paso 1: Haz clic en el componente que quieres eliminar y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en el ícono de papelera en la esquina inferior izquierda

Paso 3: Aparecerá una ventana emergente de verificación que dice “Are you sure you want to delete this component? This action cannot be undone.” - Haz clic en “Delete”

Paso 4: Haz clic en “Save” en la esquina inferior izquierda

Paso 5: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo

Componente Image Grid - Mosaic

También conocido como: Galería de mosaico

¿Qué es? Una galería en cuadrícula con tres columnas de imágenes lado a lado.

Descripción: Las alturas varían según el tamaño de la imagen. Funciona bien para galerías con imágenes de distintos tamaños.

Agregar un componente nuevo

También aparece una sección nueva al final para que puedas colocarlo en una sección nueva y luego mover la sección de la misma manera.

Editar componente

Paso 1: Haz clic en el componente MosaicImageGrid y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en “+ Add Images”

Paso 3: Se abrirá la Media Library. Haz clic en la carpeta “thinkreservations” y luego selecciona la carpeta correspondiente.

Paso 4: Si las imágenes aún no están en la carpeta, puedes cargarlas haciendo clic en el botón “upload” en la esquina superior derecha.

Paso 5: Haz clic en las imágenes que quieres en el mosaico de imágenes. Para seleccionar más de una, mantén presionada la tecla control o shift mientras haces clic en las imágenes que quieres. Haz clic en “Select”

Paso 6: Haz clic en “Update” en la esquina inferior izquierda para ver la vista previa

Paso 7: Haz clic en “Save” en la esquina inferior izquierda

Paso 8: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo.

Eliminar componente

Paso 1: Haz clic en el componente que quieres eliminar y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en el ícono de papelera en la esquina inferior izquierda

Paso 3: Aparecerá una ventana emergente de verificación que dice “Are you sure you want to delete this component? This action cannot be undone.” - Haz clic en “Delete”

Paso 4: Haz clic en “Save” en la esquina inferior izquierda

Paso 5: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo.

Componente Image Grid - Photo Strip

También conocido como: Galería de tira de fotos

¿Qué es? Una fila de cuatro imágenes lado a lado, recortadas a la misma altura

Descripción: Puede usar de 2 a 4 imágenes, pero las recortará a la misma altura. Si se agregan más de 4 imágenes, las adicionales no se mostrarán.

Agregar un componente nuevo

También aparece una sección nueva al final para que puedas colocarlo en una sección nueva y luego mover la sección de la misma manera.

Editar componente

Paso 1: Haz clic en el componente PhotoStripImageGrid y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en “+ Add Images”

Paso 3: Se abrirá la Media Library. Haz clic en la carpeta “thinkreservations” y luego selecciona la carpeta correspondiente.

Paso 4: Si las imágenes aún no están en la carpeta, puedes cargarlas haciendo clic en el botón “upload” en la esquina superior derecha.

Paso 5: Haz clic en las 2-4 imágenes que quieres en la tira de imágenes (solo se mostrarán las primeras cuatro imágenes, aunque cargues más). Para seleccionar más de una, mantén presionada la tecla control o shift mientras haces clic en las imágenes que quieres. Haz clic en “Select”

Paso 6: Haz clic en “Update” en la esquina inferior izquierda para ver la vista previa

Paso 7: Haz clic en “Save” en la esquina inferior izquierda

Paso 8: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo.

Eliminar componente

Paso 1: Haz clic en el componente que quieres eliminar y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en el ícono de papelera en la esquina inferior izquierda

Paso 3: Aparecerá una ventana emergente de verificación que dice “Are you sure you want to delete this component? This action cannot be undone.” - Haz clic en “Delete”

Paso 4: Haz clic en “Save” en la esquina inferior izquierda

Paso 5: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo.

Componente Image Rotation

También conocido como: Presentación de diapositivas

¿Qué es? Un bloque de una sola imagen que rota entre las imágenes incluidas

Descripción: Se puede insertar en cualquier parte del sitio web para incluir una rotación de imágenes. Se muestra centrado en la página con márgenes a la izquierda y a la derecha; no ocupa todo el ancho del sitio web.

Agregar un componente nuevo

También aparece una sección nueva al final para que puedas colocarlo en una sección nueva y luego mover la sección de la misma manera.

Editar componente

Paso 1: Haz clic en el componente ImageRotation y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en “+ Add Images”

Paso 3: Se abrirá la Media Library. Haz clic en la carpeta “thinkreservations” y luego selecciona la carpeta correspondiente.

Paso 4: Si las imágenes aún no están en la carpeta, puedes cargarlas haciendo clic en el botón “upload” en la esquina superior derecha.

Paso 5: Haz clic en las imágenes que quieres en la rotación. Para seleccionar más de una, mantén presionada la tecla control o shift mientras haces clic en las imágenes que quieres. Haz clic en “Select”

Para cambiar el orden de las imágenes: Haz clic en las imágenes que quieres mover (puedes seleccionar más de una manteniendo presionada la tecla control o shift mientras haces clic en las imágenes) y usa las pequeñas flechas (← →) para moverlas donde las quieras.

Para eliminar imágenes: Haz clic en la imagen que quieres eliminar (puedes seleccionar más de una manteniendo presionada la tecla control o shift mientras haces clic en las imágenes) y luego haz clic en el botón de menos (-) en la parte superior (no hay advertencia, así que asegúrate de seleccionar las correctas).

Paso 6: Si quieres que las imágenes tengan enlaces, agrega los enlaces en el cuadro Links. Pon un enlace por línea, en el mismo orden de las imágenes.

Paso 7: Haz clic en “Update” en la esquina inferior izquierda para ver la vista previa

Paso 8: Haz clic en “Save” en la esquina inferior izquierda

Paso 9: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo.

Eliminar componente

Paso 1: Haz clic en el componente que quieres eliminar y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en el ícono de papelera en la esquina inferior izquierda

Paso 3: Aparecerá una ventana emergente de verificación que dice “Are you sure you want to delete this component? This action cannot be undone.” - Haz clic en “Delete”

Paso 4: Haz clic en “Save” en la esquina inferior izquierda

Paso 5: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo.

Componente Image with content hover

También conocido como: Texto superpuesto

¿Qué es? Contenido que aparece al pasar el mouse sobre una imagen de fondo de ancho completo

Descripción: Una imagen de fondo de ancho completo con un titular encima; al pasar el mouse, muestra un fondo blanco al 90 %, con el titular, subtítulo, divisor, texto y botón visibles.

Agregar un componente nuevo

También aparece una sección nueva al final para que puedas colocarlo en una sección nueva y luego mover la sección de la misma manera.

Editar componente

Paso 1: Haz clic en el componente ImageContentHover y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Ingresa el Heading (el título que se mostrará antes de pasar el mouse y en la parte superior una vez que lo pases) y el Subheading (justo debajo del encabezado después de pasar el mouse)

Paso 3: Elige el Heading Level (H1-6)

Paso 4: Selecciona Divider si quieres uno (pondrá una línea delgada debajo del subencabezado)

Paso 5: Agrega el Content (el párrafo que quieres debajo del subencabezado). Puedes agregar formato y enlaces con este sitio: https://html-online.com/

Paso 6: Elige la imagen que se mostrará de fondo. Haz clic en el botón “Choose Image” y se abrirá la Media Library. Haz clic en la carpeta thinkreservations y luego en la carpeta correspondiente. Si quieres cargar una imagen nueva, haz clic en el botón “Upload” en la esquina superior izquierda.

Paso 7: Si quieres un botón debajo del contenido, agrega lo siguiente:

Agrega el texto que quieres en el botón en “Button Text”
Ingresa el Href (URL) al que quieres que lleve el botón. Si el enlace es a una página de tu sitio web, solo tienes que agregar el “enlace relativo” (ej. en lugar de agregar “https://www.yourwebsite.com/page” solo tienes que poner “/page”)

Paso 8: Haz clic en “Update” en la esquina inferior izquierda para ver la vista previa

Paso 9: Haz clic en “Save” en la esquina inferior izquierda

Paso 10: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo

Eliminar componente

Paso 1: Haz clic en el componente que quieres eliminar y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en el ícono de papelera en la esquina inferior izquierda

Paso 3: Aparecerá una ventana emergente de verificación que dice “Are you sure you want to delete this component? This action cannot be undone.” - Haz clic en “Delete”

Paso 4: Haz clic en “Save” en la esquina inferior izquierda

Paso 5: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo

Componente Contact Information

También conocido como: Contáctanos

¿Qué es? La dirección y el número de teléfono que se muestran en el pie de página y en la página de contacto/cómo llegar

Descripción: Se genera automáticamente a partir de la información de contacto en ThinkReservations > Settings > Busines Settings. Información de contacto en el pie de página y en la página de contacto/cómo llegar.

Agregar un componente nuevo

También aparece una sección nueva al final para que puedas colocarlo en una sección nueva y luego mover la sección de la misma manera.

Editar componente

Este componente agrega tu información de contacto tal como la ingresaste en tu configuración.

Paso 1: Ve a ThinkReservations > Settings > Business Settings.

Paso 2: Actualiza tus datos según sea necesario.

Paso 3: Haz clic en el botón verde Save en la parte inferior de la página para guardar tus cambios.

Eliminar componente

Paso 1: Haz clic en el componente que quieres eliminar y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en el ícono de papelera en la esquina inferior izquierda

Paso 3: Aparecerá una ventana emergente de verificación que dice “Are you sure you want to delete this component? This action cannot be undone.” - Haz clic en “Delete”

Paso 4: Haz clic en “Save” en la esquina inferior izquierda

Paso 5: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo.

Componente Google Map

También conocido como: Mapa interactivo

¿Qué es? Un mapa de Google incrustado a ancho completo

Descripción: Un mapa dinámico de Google (que resalta la ubicación de la propiedad) se incrusta en la página. Se muestra a ancho completo y la altura se puede personalizar.

Agregar un componente nuevo

También aparece una sección nueva al final para que puedas colocarlo en una sección nueva y luego mover la sección de la misma manera.

Editar componente

Paso 1: Haz clic en el componente GoogleMap y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Ingresa el Src (la URL del mapa que quieres incrustar).

Para obtener el Src:

2a. Ve al mapa de tu propiedad en Google.

2b.Haz clic en el botón Share.

2c .Se abre una ventana emergente de Share. Haz clic en la opción Embed a map.

2d. Haz clic en el texto COPY HTML

Toda la línea de código HTML se resalta. Aparece una notificación de copiado en la parte inferior.

2e. Pega esa línea de código en un bloc de notas o documento.

2f. Resalta el enlace.

Empezando con http:// hasta donde termina la “ . Consulta la imagen de arriba.

2g. Pega esa URL en el campo Src del componente.

Paso 3: Agrega un Title para el mapa (será visible cuando quien visite el sitio web pase el mouse sobre el mapa)

Paso 4: Ingresa la altura del mapa en píxeles (o déjalo en blanco).

Paso 5: Haz clic en “Update” en la esquina inferior izquierda para ver la vista previa

Paso 6: Haz clic en “Save” en la esquina inferior izquierda

Paso 7: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo.

Eliminar componente

Paso 1: Haz clic en el componente que quieres eliminar y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en el ícono de papelera en la esquina inferior izquierda

Paso 3: Aparecerá una ventana emergente de verificación que dice “Are you sure you want to delete this component? This action cannot be undone.” - Haz clic en “Delete”

Paso 4: Haz clic en “Save” en la esquina inferior izquierda

Paso 5: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo.

Privacy Policy: Componente Default Information

También conocido como: Política de protección de datos

¿Qué es? Una descripción de cómo se recopilan y almacenan los datos de quienes visitan el sitio

Descripción: Una declaración legal que explica cómo el sitio web recopila, usa, almacena y protege la información personal de quienes lo visitan. Su objetivo es informar a los usuarios sobre sus derechos de privacidad y cómo se manejan sus datos. También es necesaria para cumplir con los requisitos del procesamiento de pagos.

Agregar un componente nuevo

También aparece una sección nueva al final para que puedas colocarlo en una sección nueva y luego mover la sección de la misma manera.

Editar componente

No hay nada que editar en este componente: simplemente agrega tu Política de privacidad de ThinkWeb.

Eliminar componente

Paso 1: Haz clic en el componente que quieres eliminar y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en el ícono de papelera en la esquina inferior izquierda

Paso 3: Aparecerá una ventana emergente de verificación que dice “Are you sure you want to delete this component? This action cannot be undone.” - Haz clic en “Delete”

Paso 4: Haz clic en “Save” en la esquina inferior izquierda

Paso 5: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo

Declaración de accesibilidad del sitio web

También conocido como: Declaración ADA

¿Qué es? Texto de divulgación predeterminado sobre la accesibilidad de tu propiedad y de tu sitio web.

Descripción: Este componente inserta automáticamente la declaración de accesibilidad estándar de ThinkWeb, con formato de encabezados y texto.

Agregar un componente nuevo

Este widget no está disponible en el Editor para agregarse por el momento.

Editar componente

No hay nada que editar en este componente.

Eliminar componente

Paso 1: Haz clic en el componente que quieres eliminar y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en el ícono de papelera en la esquina inferior izquierda

Paso 3: Aparecerá una ventana emergente de verificación que dice “Are you sure you want to delete this component? This action cannot be undone.” - Haz clic en “Delete”

Paso 4: Haz clic en “Save” en la esquina inferior izquierda

Paso 5: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo

Componente Calendar of Events

También conocido como: Listado de eventos, Calendario

¿Qué es? Una lista de próximos eventos

Descripción: Un bloque de contenido que contiene una fecha, título, descripción y una imagen pequeña. Los bloques de contenido se apilan y se muestran del más reciente al más antiguo.

Agregar un componente nuevo

Este widget tiene código personalizado. Todavía no está disponible en el Editor por el momento.

Editar componente

Por el momento, el equipo técnico tendrá que hacer las ediciones.

Eliminar componente

Paso 1: Haz clic en el componente que quieres eliminar y luego en el ícono de lápiz Edit para personalizar esta sección (O haz doble clic en el componente).

Paso 2: Haz clic en el ícono de papelera en la esquina inferior izquierda

Paso 3: Aparecerá una ventana emergente de verificación que dice “Are you sure you want to delete this component? This action cannot be undone.” - Haz clic en “Delete”

Paso 4: Haz clic en “Save” en la esquina inferior izquierda

Paso 5: Haz clic en “Publish” para que tu cambio se muestre en tu sitio web en vivo

Páginas especiales

Algunos tipos de página son especiales y los cambios en su contenido se manejan de forma diferente. Además, la vista previa de la página en ThinkWeb no reflejará el contenido completo de la página tal como se ve en vivo en línea.

Página de habitaciones

La página de habitaciones usará el tipo "AVAILABILITY_SEARCH". La ruta o slug normalmente es /accommodations.

Esta página incluirá automáticamente un widget de check availability en la parte superior y una cuadrícula dinámica de unidades, según las fechas seleccionadas, como contenido principal. Al hacer clic en una unidad, el usuario va a la página de resumen de esa unidad, donde puede completar su reserva.

Las fotos y descripciones de las habitaciones se obtienen automáticamente de tu cuenta. Ve a ThinkReservations > Settings > Rooms, luego haz clic en una habitación para revisarla o cambiarla según sea necesario. Los cambios en la configuración de las habitaciones se reflejan automáticamente en esta página de ThinkWeb cuando se guardan.

Página de certificados de regalo

Los huéspedes pueden comprar certificados de regalo de tu propiedad en línea. Esta compra se hace mediante un formulario de pedido en línea en tu sitio: la página de certificados de regalo. Esta página especial tendrá el tipo "GIFT_CERTIFICATE".

Es común ver esta página sin componentes adicionales. Aunque no tenga componentes agregados y no se vea ningún formulario en el editor de ThinkWeb, la página en vivo con la que interactúan los usuarios seguirá incluyendo el formulario de pedido en línea para comprar su certificado, debido a la naturaleza especial de esta página.

Blog

Si tienes un blog, la página de Blog de tu sitio tendrá el tipo "BLOG". Al igual que las demás páginas especiales, no es raro que no tenga componentes, o que solo tenga un componente Heading. No verás tus artículos del blog en el editor de ThinkWeb al mirar esta página especial. Sin embargo, quienes visiten tu página de blog verán los artículos publicados que se hayan configurado en la sección Blog de ThinkReservations.

Configuración del sitio web

También conocido como: Funciones de diseño

¿Qué es? Contenido y marca del encabezado y del pie de página.

Descripción: Un conjunto adicional de configuraciones que se aplica a todo el sitio.

Ten en cuenta: Los cambios en esta página están restringidos actualmente. Contáctanos para solicitar ajustes.

Navegación y encabezado del sitio web

Si necesitas cambios en tus enlaces de navegación o en el encabezado del sitio, contáctanos con tu solicitud.

Configuración del sitio

Los siguientes campos se controlan en el archivo de configuración. Avísanos si necesitas algún cambio en la lista de abajo.

Logotipo
Logotipo del pie de página
Favicon
Fuente de los encabezados
Grosor de la fuente de los encabezados
Color de la fuente de los encabezados
Fuente de los subencabezados
Grosor de la fuente de los subencabezados
Color de la fuente de los subencabezados
Fuente de los subencabezados
Grosor de la fuente de los subencabezados
Color de la fuente de los subencabezados
Fuente del cuerpo
Color de la fuente del cuerpo
Color del enlace principal de navegación
Color de los enlaces del encabezado
Color de fondo del pie de página
Color del texto del pie de página
Color de los enlaces del pie de página
Navegación
CSS
Captura de correos electrónicos

Los cambios en esta página están restringidos por razones de estabilidad. Nuestro equipo técnico con gusto actualizará por ti la configuración necesaria.

Editor de ThinkWeb: guía detallada

Panel de ThinkWeb

Cómo trabajar con páginas

Crear una página nueva

Abrir una página para editarla

Editar la configuración de la página

Agregar un componente

Editar los detalles de un componente

Mover componentes hacia arriba o abajo

Clonar y eliminar componentes

Para clonar un componente

Para eliminar un componente

Editar una sección

Clonar una sección

Mover secciones

Update vs. Save

“Update”

“Save”

Cómo trabajar con componentes

Componente Check Availability

Componente Heading Banner

Componente Hero Image

Componente Hero Image Rotation

Componente Hero Video

Componentes del cuerpo de la página

Componente Heading / Sub Heading

Componente General Content

Componente Staggered Content

Componente Stack Two

Componente Stack Three

Componente Stack Four

Componente Stack Five

Componente Stack Two with Background Image

Componente Stack Three with Background Image

Componente Single Image

Componente Single Comment

Componente Reviews

Componente Edge-to-Edge Reviews

Componente Edge-to-Edge Content

Componente Frequently Asked Questions

Componente Tabbed Content

Componente Logo Columns

Componente Hosted Video

Componente Video

Componente Video List

Componente Responsive Table

Componente HTML

Componentes relacionados con botones

Componente Button

Componente Button Modal

Componentes relacionados con imágenes

Componente Card Carousel

Componente Image Grid - Bento

Componente Image Grid - Mosaic

Componente Image Grid - Photo Strip

Componente Image Rotation

Componente Image with content hover

Componente Contact Information

Componente Google Map

Privacy Policy: Componente Default Information

Declaración de accesibilidad del sitio web

Componente Calendar of Events

Páginas especiales

Página de habitaciones

Página de certificados de regalo

Blog

Configuración del sitio web

Navegación y encabezado del sitio web

Configuración del sitio