Elementos

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

Para añadir o modificar un elemento del sitio web:

  1. Vaya a la página del sitio web correspondiente y haga clic en Editar.

  2. Haga clic en la sección de la página en la que desea añadir o modificar un elemento.

  3. Realice los cambios necesarios.

  4. Haga clic en Guardar.

Nota

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

screenshot: website-elements-webdesign-elements
menu
Website ‣ Edit ‣ (text area)
shows
The powerbox drop-down menu opened by typing a forward slash in a text area, listing the website elements that can be inserted.
highlight
The powerbox menu (red frame).
data
Demo website 'My Website' in the website editor.
module
website
notes
English UI, light theme, 1440px width.

Títulos

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

Truco

También puede escribir el texto, seleccionarlo y elegir el estilo adecuado en la sección Texto en línea de la pestaña Personalizar del editor del sitio web. En esta sección también encontrará opciones de formato adicionales, como fuentes y colores.

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. Escriba /button.

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

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

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

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

  6. Haga clic en Aplicar para guardar los cambios.

Truco

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

Imagenes

Para insertar una imagen:

  1. Escriba /image.

  2. Busque en la base de datos de Unsplash o haga clic en Subir una imagen para elegir un archivo de sus imágenes locales.

  3. Haga clic en Añadir.

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

    • Reemplazar la imagen.

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

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

    • Añada una Forma; algunas formas también permiten personalizar el color.

    • Ajuste el Ancho de la imagen, por ejemplo, para mejorar el rendimiento. Es posible que se sugiera un tamaño menor si es suficiente para su visualización.

    • Cambie el tamaño de la imagen con la herramienta Transformar.

    • Ajuste el Relleno para añadir espacio (en píxeles) alrededor de la imagen.

    • Etc.

Vídeos

Para añadir un vídeo, escriba /video, introduzca la URL y active las opciones deseadas:

  • Reproducción automática: para reproducir el vídeo de forma automática al acceder a la página. El vídeo se silencia de forma automática de manera predeterminada.

  • Bucle: para reproducir el vídeo en bucle.

  • Ocultar controles del reproductor

  • Ocultar botón de pantalla completa

Iconos

Para insertar un icono, escriba /image, vaya a la pestaña Iconos, seleccione un icono y haga clic en Añadir. Para modificar un icono, haga clic en él y utilice 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 con claridad, lo que facilita la lectura de la información y mejora la estructura de las páginas web. Escriba /list y elija entre tres tipos de listas: Listas con viñetas, Listas numeradas o Listas de verificación.

Resaltados de texto

Puede añadir resaltados a los títulos y al texto mediante la sección Texto en línea del editor del sitio web. Para añadir un resaltado:

  1. Seleccione el texto o título que desea resaltar.

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

  3. Seleccione el estilo de resaltado.

  4. Modifique su Color.

  5. Elija su Grosor.

screenshot: website-elements-highlights-elements
menu
Website ‣ Edit ‣ (selected text)
shows
A selected text with the text toolbar open on the highlight options, and a title already highlighted below it.
highlight
The highlight options in the toolbar (red frame).
data
Demo website 'My Website' in the website editor.
module
website
notes
English UI, light theme, 1440px width.

Animaciones

Las animaciones se utilizan para añadir movimiento a los bloques de creación y a elementos del sitio web, como imágenes y texto. Hay tres tipos de animación disponibles: Al desplazarse, Al aparecer y Al pasar el cursor (solo para imágenes).

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

  1. Haga clic en el elemento.

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

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

  4. Personalice la configuración 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:

  • Elija Entrada para añadir la animación cuando el elemento entra en la pantalla y Salida para añadirla cuando sale de la pantalla.

  • Seleccione un Efecto.

  • Elija la Dirección del efecto.

  • Adapte la Intensidad del efecto.

  • Defina la Zona de desplazamiento, donde el primer valor representa el porcentaje de la pantalla que se muestra cuando comienza el efecto y el segundo valor representa su porcentaje al final.

Animaciones al aparecer

Respecto a las animaciones de aparición, es posible:

  • Elegir entre diferentes efectos.

  • Elija la Dirección del efecto.

  • Seleccionar una opción de Activador para definir cuándo se produce la animación: Solo la primera vez o Cada vez.

  • Adapte la Intensidad del efecto.

  • Si quiere que la animación se active tras un número de segundos, defina ese número en el campo Iniciar después de.

  • 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. Puede elegir el Efecto de la animación, así como el Color y el Grosor del trazo.

Ver también

Editor HTML de Odoo