Elementos

Los elementos ayudan a estructurar y presentar el contenido de manera efectiva. Van desde componentes basados en texto como títulos, listas y resaltados de texto hasta componentes interactivos como botones y enlaces. También se pueden agregar elementos visuales como imágenes, iconos, vídeos y animaciones para mejorar la presentación y organización del contenido.

Para agregar o modificar un elemento del sitio web:

  1. Navega a la página web correspondiente y haz clic en Editar.

  2. Haz clic en la sección de la página donde deseas agregar o modificar un elemento.

  3. Realiza los cambios necesarios.

  4. Haz clic en Guardar.

Nota

Los estilos predeterminados para encabezados, botones, enlaces y texto de párrafo, por ejemplo, se definen en la pestaña Tema del editor del sitio web.

Escribe / para agregar elementos del sitio web.

Títulos

Los títulos definen encabezados y organizan el contenido del sitio web en diferentes niveles para mayor claridad y estructura. Para insertar un título, escribe /title, elige el estilo de encabezado (Encabezado 1, Encabezado 2 o Encabezado 3) y escribe el texto.

Truco

Alternativamente, escribe el texto, selecciónalo y elige el estilo apropiado desde la sección Texto en línea en la pestaña Personalizar del editor del sitio web. Las opciones de formato adicionales, como fuentes y colores, también están disponibles en esta sección.

Botones

Los botones son elementos interactivos que permiten enlazar a otra página o a un ancla de página. Para insertar un botón:

  1. Escribe /button.

  2. Introduce la etiqueta del botón en el campo Etiqueta del enlace.

  3. Añade la URL o correo electrónico. Escribe / para buscar una página y # para enlazar a un ancla.

  4. Define el Estilo, Tamaño y Diseño para determinar la apariencia del botón.

  5. Si es necesario, activa el interruptor para abrir la página o ancla enlazada en una nueva pestaña.

  6. Haz clic en Aplicar para guardar los cambios.

Truco

Para modificar un botón existente, haz clic en el botón y edita las opciones en la sección Texto en línea del editor del sitio web.

Imagenes

Para insertar una imagen:

  1. Escribe /image.

  2. Busca en la base de datos de Unsplash o haz clic en Subir una imagen para elegir un archivo de tus imágenes locales.

  3. Haga clic en Añadir.

  4. Para personalizar la imagen, haz clic en ella y edita las opciones en la sección Imagen del editor del sitio web. Por ejemplo:

    • Reemplaza la imagen.

    • Define una etiqueta alt en el campo Descripción.

    • Introduce una etiqueta de título en el campo Información sobre herramientas. Este texto aparecerá cuando los visitantes pasen el ratón sobre la imagen.

    • Añade una Forma; algunas formas también permiten la personalización del color.

    • Ajusta el Ancho de la imagen, por ejemplo, para mejorar el rendimiento. Se puede sugerir un tamaño menor si es suficiente para la visualización.

    • Cambia el tamaño de la imagen usando la herramienta Transformar.

    • Ajusta el Relleno para agregar espacio (en píxeles) alrededor de la imagen.

    • Etc.

Vídeos

Para agregar un video, escribe /video, inserta la URL y activa las opciones deseadas:

  • Reproducción automática: reproduce automáticamente el video cuando se accede a la página. El video se silencia automáticamente por defecto.

  • Bucle: reproduce el video en bucle.

  • Ocultar controles del reproductor

  • Ocultar botón de pantalla completa

  • Comenzar en: para definir la marca de tiempo donde debe comenzar el vídeo, en formato MM:SS.

Iconos

Para insertar un icono, escribe /image, ve a la pestaña Iconos, selecciona un icono y haz clic en Agregar. Para modificar un icono, haz clic en él y usa la sección Icono del editor del sitio web para personalizar opciones como Color, Tamaño, Animaciones, Forma, etc.

Listas

Las listas ayudan a organizar el contenido de forma clara, facilitan la lectura de la información y mejoran la estructura de las páginas web. Escribe /list y elige entre tres tipos diferentes de listas: Listas con viñetas, Listas numeradas o Listas de verificación.

Resaltados de texto

Se pueden agregar resaltados a títulos y texto usando la sección Texto en línea del editor del sitio web. Para agregar un resaltado:

  1. Selecciona el texto o título que quieres resaltar.

  2. En el editor del sitio web, haz clic en Resaltar.

  3. Selecciona el estilo de resaltado.

  4. Modifica su Color.

  5. Elige su Grosor.

Resaltar textos y títulos

Animaciones

Las animaciones se usan para agregar movimiento a bloques de construcción y elementos del sitio web como imágenes y texto. Hay tres tipos de animación disponibles: Al desplazar, Al aparecer y Al pasar el cursor (solo para imágenes).

Para añadir una animación a un elemento del sitio web:

  1. Haz clic en el elemento.

  2. En el editor del sitio web, ve a la sección relevante para el elemento (por ejemplo, Botón, Columna, Texto en línea, etc.).

  3. En el campo Animación, selecciona el tipo de animación deseado.

  4. Personaliza los ajustes de la animación según sea necesario. Las opciones disponibles varían según el tipo de animación seleccionado.

Animaciones al desplazarse

Para las animaciones al desplazarse, es posible:

  • Elegir Entrada para añadir la animación cuando el elemento entre en la pantalla y Salida para añadirla cuando salga de la pantalla.

  • Seleccionar un Efecto.

  • Elegir la Dirección del efecto.

  • Adaptar la Intensidad del efecto.

  • Definir la Zona de desplazamiento, donde el primer valor representa el porcentaje de la pantalla mostrado cuando el efecto comienza, y el segundo valor representa su porcentaje al final.

Animaciones al aparecer

Para las animaciones al aparecer, es posible:

  • Elegir entre diferentes efectos.

  • Elegir la Dirección del efecto.

  • Seleccionar una opción de Activador para definir cuándo ocurre la animación: ya sea la Primera vez solamente o Cada vez.

  • Adaptar la Intensidad del efecto.

  • Si quieres que la animación se active después de un número de segundos, define este número en el campo Iniciar después.

  • Elegir una Duración para la animación.

Animaciones al pasar el cursor (solo para imágenes)

Las animaciones Al pasar el cursor se pueden añadir a las imágenes. Puedes elegir el Efecto de la animación, así como el Color y el Ancho del trazo.

Ver también

Editor HTML de Odoo