Bloques de creación

Puedes diseñar tu sitio web arrastrando y soltando bloques de construcción, luego editándolos para ajustarse a tus necesidades de contenido y diseño.

Añadir un bloque de construcción

Para añadir un bloque a una página del sitio web, accede a la página, haz clic en Editar, luego arrastra y suelta el bloque de construcción deseado en la ubicación apropiada. Hay dos tipos de bloques de construcción disponibles: Categorías y Contenido interno. Los bloques de construcción de Contenido interno solo se pueden añadir dentro de bloques de construcción de Categorías.

Al hacer clic en un bloque de categoría, aparece una ventana emergente que te permite seleccionar entre varias plantillas para cada categoría.

Truco

También puedes buscar un bloque específico en la ventana emergente Insert a block utilizando la barra de búsqueda.

Selección de bloque emergente

Una vez colocado el bloque de categoría, puedes arrastrar y soltar bloques de Contenido interno dentro de él. Los bloques de Contenido interno te permiten añadir elementos, como vídeos, imágenes, botones de redes sociales, etc., dentro de bloques de categoría preexistentes.

Nota

El acceso a ciertos bloques requiere la instalación de su aplicación o módulo correspondiente (p. ej., Comercio electrónico para el bloque Products).

Example

Añade todas tus cuentas de redes sociales en un solo lugar con el bloque de contenido interno Redes sociales. Activa o desactiva el interruptor junto a la plataforma deseada y copia/pega la URL de tu cuenta.

Bloque de contenido interno de redes sociales

Formulario

El bloque Formulario se utiliza para recopilar información de los visitantes del sitio web y crear registros en tu base de datos, si procede. Para añadir un formulario a una página web, arrastra y suelta la categoría Contacto y formularios y luego selecciona el bloque Formulario.

Ejemplo de un bloque de formulario

Acción

De forma predeterminada, cuando se envía el formulario, se envía automáticamente un correo electrónico con la información introducida por el visitante. Dependiendo de las aplicaciones instaladas en tu base de datos, pueden estar disponibles acciones adicionales que pueden crear registros automáticamente. Para elegir una acción diferente, haz clic en Edit, haz clic en el formulario, navega a la pestaña Customize y selecciona la Action deseada:

Editar un formulario para cambiar su acción

Por defecto, al enviar el formulario se redirige a los visitantes a una página de Gracias. Usa el campo URL para enviarlos a una página diferente. Alternativamente, puedes optar por no redirigir y mantenerlos en la página del formulario seleccionando Nada o Mostrar mensaje en el campo Al completarse.

Campos

Para añadir un nuevo campo al formulario, navega a la Customize tab y haz clic en el botón + Field junto a la sección Form o Field. Para modificar el nuevo campo (o cualquier otro) en el formulario, selecciona el campo y luego utiliza las opciones disponibles en la sección Field de la pestaña Customize. Por ejemplo, puedes:

  • Cambia el Tipo del campo.

    Truco

    También es posible seleccionar un campo existente de la base de datos y usar los datos que contiene. Los campos disponibles dependen de la acción seleccionada. También se pueden usar campos de propiedad añadidos a la base de datos.

    Todos los tipos de campos de formulario

    Algunos campos son similares visualmente, pero la información ingresada debe seguir un formato específico.

  • Edita la etiqueta del campo y adapta su posición.

  • Activar una Description de campo. Haz clic en la descripción predeterminada en el formulario para modificarla.

  • Añade un marcador de posición o valor predeterminado.

  • Especifica si el campo es obligatorio.

  • Edita la configuración de visibilidad del campo.

  • Añade una animación.

Una vez realizados los cambios deseados, haz clic en Guardar.

Añadir un formulario de contacto de Odoo en un sitio web que no sea Odoo

Puedes mostrar un formulario de contacto de Odoo en otro sitio web utilizando un iframe. Para hacerlo, sigue estos pasos:

  1. Prepara el formulario de Odoo: Crea un formulario de contacto en una página en el sitio web de Odoo y elimina el diseño del encabezado y el diseño del pie de página. Asegúrate de que solo el formulario de contacto permanezca en la página.

  2. Genera un código integrable: Copia la URL de la página del formulario de Odoo y pégala en un generador de iframe, como La Digitale.dev o iFrame Generator. Ajusta el ancho y la altura para una visualización adecuada.

  3. Añade el código incrustado al sitio web que no es de Odoo: Abre el HTML de la página correspondiente (en el editor de código o CMS) e inserta el código incrustado donde se debe mostrar el formulario.

Example

Ejemplo de un código incrustado:

<iframe src="https://example.com/odoo-form"
        style="border:0;"
        name="odooForm"
        scrolling="no"
        frameborder="0"
        marginheight="0"
        marginwidth="0"
        height="400px"
        width="600px"
        allowfullscreen>
 </iframe>

Incrustar código

Insertar código le permite integrar contenido de servicios externos en una página, como videos de YouTube, mapas de Google Maps, publicaciones de redes sociales como Instagram, etc.

Después de añadir el bloque a una página, haz clic en el bloque, luego ve a la pestaña Customize y haz clic en Edit. Reemplaza el código de marcador de posición con tu código de inserción personalizado.

Agregue el enlace al código insertado que quiere resaltar

Advertencia

No copies/pegues código que no entiendas, ya que podría poner en riesgo tus datos.

Mover, cambiar o eliminar un bloque de construcción

Arrastra los bordes turquesa del bloque para reducir o aumentar el espacio en la parte superior o inferior del mismo.

Cambia el orden del bloque haciendo clic en (comilla arriba) o (comilla abajo) y mueve el bloque en la página haciendo clic en (flechas). Cuando tienes varias columnas, mueve una columna a la izquierda o derecha haciendo clic en (comilla izquierda) o (comilla derecha).

Para eliminar un bloque, haz clic en (papelera).

Ampliar márgenes en bloque de construcción

Truco

Cambia rápidamente la categoría del bloque haciendo clic en (exchange).

Editar un bloque de construcción

Para editar el contenido de un bloque de construcción, haz clic en él y ve a la pestaña Customize. Las opciones de personalización disponibles varían según el tipo de bloque seleccionado.

Fondo

Para modificar el fondo de un bloque de construcción, selecciona el bloque, ve a la pestaña Customize y haz clic en el punto de color u otra opción de Background. Puedes cambiar el color y/o añadir una imagen, vídeo y/o forma. Una vez que hayas seleccionado una forma, aparecen nuevos campos que te permiten personalizar la forma.

Truco

  • Posiciona un elemento (imagen, texto, etc.) detrás o delante de otro usando los iconos Enviar al fondo o Traer al frente.

    Cambiar posición del bloque
  • Para cambiar el tamaño de un bloque, haz clic y arrastra los puntos alrededor de sus bordes para ajustarlo según sea necesario.

    Adaptar tamaño del bloque

Ver también

Tema general

Diseño: tablas y columnas

For most building blocks, you can choose between two layout styles: grid or columns (cols). To change the default layout style, click the block, go to the Customize tab, and set the Layout field to Grid or Cols.

Cuadrícula

El diseño Grid te permite reposicionar y cambiar el tamaño de elementos, como imágenes o texto, arrastrándolos y soltándolos. Cuando se selecciona Grid, hay opciones adicionales disponibles para Agregar elementos haciendo clic en Imagen, Texto o Botón.

Cuando se selecciona el diseño de tabla puede elegir una imagen y arrastrarla y soltarla a donde la necesite.

Columnas

Choosing the Cols layout allows you to determine the number of elements per line within the block. To do so, select the block to modify, click the dropdown next to the Cols field, and adjust the number. You can then modify a specific column’s settings using the options in the Column section of the Customize tab.

Nota

De forma predeterminada, en dispositivos móviles, solo un elemento (columna) es visible por línea para garantizar que el contenido permanezca fácilmente legible y accesible en pantallas más pequeñas. Para ajustar el valor, haz clic en el (icono de móvil) en la parte superior del editor del sitio web y adapta el número de columnas. Las formas están ocultas de forma predeterminada en móviles.

Duplicate a building block

To duplicate a building block, click the (duplicate) icon at the top of the Customize tab. Once duplicated, the new block appears on the page beneath the original one.

Guardar un bloque de construcción personalizado

You can save a customized building block to reuse it elsewhere. To do so, select it, navigate to the Customize tab, and click the (floppy disk) icon. Click the Save and reload button in the popup to confirm saving your custom block.

Para agregar un bloque de construcción guardado a la página, navega a la pestaña Bloques y arrastra y suelta el bloque Personalizado desde la sección Categorías. En la ventana emergente que se abre, haz clic en el bloque deseado en la categoría Personalizado.

Truco

En la ventana emergente Insertar un bloque, haz clic en (editar) para renombrar el bloque personalizado o (eliminar) para eliminarlo.