Bloques de creación¶

Puede diseñar su sitio web arrastrando y soltando bloques de creación y luego editándolos para adaptarlos a sus necesidades de contenido y diseño.

Añadir un bloque de creación¶

Para añadir un bloque a una página del sitio web, acceda a la página, haga clic en Editar y luego arrastre y suelte el bloque de creación deseado en el lugar correspondiente. Hay dos tipos de bloques de creación disponibles: Categorías y Contenido interno. Los bloques de creación de Contenido interno solo se pueden añadir dentro de los bloques de Categorías.

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

Truco

También puede buscar un bloque específico en la ventana emergente Insertar un bloque mediante la barra de búsqueda.

screenshot: website-building-blocks-insert-a-block

menu: Website ‣ Edit ‣ Blocks
shows: The website editor's block panel open on the left, with the block categories (Structure, Features, Dynamic Content, Inner content) and their previews.
highlight: The block panel (red frame).
data: Demo website 'My Website' in the website editor.
module: website
notes: English UI, light theme, 1440px width.

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

Nota

El acceso a determinados bloques requiere la instalación de su aplicación o módulo correspondiente (por ejemplo, Comercio electrónico para el bloque Productos).

Example

Añada todas sus cuentas de redes sociales en un solo lugar con el bloque de contenido interno Redes sociales. Active o desactive el interruptor junto a la plataforma deseada y copie y pegue la URL de su cuenta.

screenshot: website-building-blocks-social-media-inner-content

menu: Website ‣ Edit ‣ Blocks ‣ Inner content
shows: A Social Media inner-content block placed in a page, showing the social network icons.
highlight: The Social Media block (red frame).
data: Facebook, LinkedIn and YouTube links set on the company.
module: website
notes: English UI, light theme, 1440px width.

Formulario¶

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

screenshot: website-building-blocks-form-block

menu: Website ‣ Edit ‣ Blocks ‣ Features
shows: A Form block placed in a page, with its default fields (Your Name, Email, Subject, Your Question) and the Send button.
highlight: The Form block (red frame).
data: Demo website 'My Website' in the website editor.
module: website
notes: English UI, light theme, 1440px width.

Acción¶

De forma predeterminada, al enviar el formulario se envía automáticamente un correo electrónico con la información introducida por el visitante. Según las aplicaciones instaladas en su base de datos, es posible que haya disponibles acciones adicionales que puedan crear registros de forma automática. Para elegir una acción diferente, haga clic en Editar, haga clic en el formulario, vaya a la pestaña Personalizar y seleccione la Acción deseada:

Postularse a un empleo (Reclutamiento)
Crear un cliente (Comercio electrónico)
Crear una oportunidad (CRM)
Suscribirse al boletín (Marketing por correo electrónico)
Crear una tarea (Proyecto)

screenshot: website-building-blocks-inner-content-edit-form

menu: Website ‣ Edit ‣ (Form block)
shows: The website editor's right sidebar for a selected Form block, with the Action drop-down menu open on the available actions (Send an Email, Create a Lead, Apply for a Job, Create a Task, …).
highlight: The Action drop-down menu (red frame).
data: Demo website 'My Website' in the website editor.
module: website
notes: English UI, light theme, 1440px width.

De forma predeterminada, al enviar el formulario se redirige a los visitantes a una página de Agradecimiento. Utilice el campo URL para enviarlos a una página diferente. También puede optar por no redirigirlos y mantenerlos en la página del formulario seleccionando Nada o Mostrar mensaje en el campo Al tener éxito.

Campos¶

Para añadir un nuevo campo al formulario, vaya a la pestaña Personalizar y haga clic en el botón + Campo junto a la sección Formulario o Campo. Para modificar el nuevo campo (o cualquier otro) del formulario, selecciónelo y utilice las opciones disponibles en la sección Campo de la pestaña Personalizar. Por ejemplo, puede:

Cambiar el Tipo del campo.

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

screenshot: website-building-blocks-all-types-of-field
menu
Website ‣ Edit ‣ (Form block) ‣ (field)
shows
The field option panel of a form field showing the available field types (Text, Long Text, Number, Email, Telephone, Date, Selection, Checkboxes, Radio buttons, File Upload).
highlight
The field type list (red frame).
data
Demo website 'My Website' in the website editor.
module
website
notes
English UI, light theme, 1440px width.
Algunos campos son similares visualmente, pero la información ingresada debe seguir un formato específico.
Editar la Etiqueta del campo y adaptar su Posición.
Habilitar la Descripción de un campo. Haga clic en la descripción predeterminada del formulario para modificarla.
Añadir un Marcador de posición o un Valor predeterminado.
Especificar si el campo es Obligatorio.
Editar la configuración de visibilidad del campo.
Añadir una animación.

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

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

Puede mostrar un formulario de contacto de Odoo en otro sitio web mediante un iframe. Para ello, siga estos pasos:

Prepare el formulario de Odoo: cree un formulario de contacto en una página del sitio web de Odoo y elimine el diseño del encabezado y el diseño del pie de página. Asegúrese de que solo quede el formulario de contacto en la página.
Genere un código insertable: copie la URL de la página del formulario de Odoo y péguela en un generador de iframes, como La Digitale.dev o iFrame Generator . Ajuste el ancho y el alto para que se muestre correctamente.
Añada el código insertado al sitio web que no sea de Odoo: abra el HTML de la página correspondiente (en el editor de código o CMS) e inserte el código insertado en el lugar donde debe mostrarse el formulario.

Example

Ejemplo de código insertado:

<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, haga clic en él, vaya a la pestaña Personalizar y haga clic en Editar. Reemplace el código de marcador de posición con su código de inserción personalizado.

screenshot: website-building-blocks-embed-code-pop-up

menu: Website ‣ Edit ‣ Blocks ‣ Inner content ‣ Embed Code
shows: The Embed Code pop-up window with the HTML code field where the external code is pasted.
highlight: The code field (red frame).
data: A short sample iframe snippet.
module: website
notes: English UI, light theme, 1440px width.

Truco

Con el módulo Editor de código del sitio web: insertar medios (website_code_editor_media) instalado, hay disponible un botón Medios en el editor de código del bloque Incrustar código — y en el editor de recursos HTML/CSS/JS del sitio web. Abre el cuadro de diálogo de medios habitual e inserta la URL de la imagen o el documento seleccionado en el cursor, de modo que se pueda hacer referencia a una imagen de la biblioteca de medios en código escrito a mano sin tener que buscar su dirección.

screenshot: website-building-blocks-code-editor-insert-media

menu: Website ‣ Edit ‣ (Embed Code block) ‣ Edit
shows: The embedded code editor with the Media button above the code area, and the media dialog opened over it.
highlight: The Media button (red frame).
data: One image selected in the media library.
module: website_code_editor_media
notes: English UI, light theme, 1440px width.

Advertencia

No copie ni pegue código que no comprenda, ya que podría poner en riesgo sus datos.

Mover, cambiar o eliminar un bloque de creación¶

Arrastre los bordes turquesa del bloque para reducir o aumentar el espacio en su parte superior o inferior.

Cambie el orden del bloque haciendo clic en (flecha hacia arriba) o (flecha hacia abajo) y mueva el bloque en la página haciendo clic en (flechas). Cuando tenga varias columnas, mueva una columna hacia la izquierda o la derecha haciendo clic en (flecha hacia la izquierda) o (flecha hacia la derecha).

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

screenshot: website-building-blocks-padding-building-block
menu
Website ‣ Edit ‣ (building block)
shows
A selected building block in the editor with its padding handles visible at the top and bottom.
highlight
The padding handles (red frame).
data
Demo website 'My Website' in the website editor.
module
website
notes
English UI, light theme, 1440px width.

Truco

Cambie rápidamente la categoría del bloque haciendo clic en (intercambiar).

Editar un bloque de creación¶

Para editar el contenido de un bloque de creación, haga clic en él y vaya a la pestaña Personalizar. Las opciones de personalización disponibles varían según el tipo de bloque seleccionado.

Ver también

Fondo¶

Para modificar el fondo de un bloque de creación, seleccione el bloque, vaya a la pestaña Personalizar y haga clic en el punto de color o en otra opción de Fondo. Puede cambiar el color o añadir una imagen, un vídeo o una forma. Una vez que haya seleccionado una forma, aparecerán nuevos campos que le permitirán personalizarla.

Truco

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

screenshot: website-building-blocks-change-block-position
menu
Website ‣ Edit ‣ (building block)
shows
The toolbar of a selected building block with the move up / move down arrows used to change its position on the page.
highlight
The move arrows (red frame).
data
Demo website 'My Website' in the website editor.
module
website
notes
English UI, light theme, 1440px width.
Para cambiar el tamaño de un bloque, haga clic y arrastre los puntos situados alrededor de sus bordes para ajustarlo según sea necesario.

screenshot: website-building-blocks-adapt-block-size
menu
Website ‣ Edit ‣ (building block)
shows
A selected building block with its bottom resize handle being dragged to change the block height.
highlight
The resize handle (red frame).
data
Demo website 'My Website' in the website editor.
module
website
notes
English UI, light theme, 1440px width.

Ver también

Tema general

Diseño: tablas y columnas¶

Para la mayoría de los bloques de creación, puede elegir entre dos estilos de diseño: cuadrícula o columnas (cols). Para cambiar el estilo de diseño predeterminado, haga clic en el bloque, vaya a la pestaña Personalizar y configure el campo Diseño como Cuadrícula o Columnas.

Cuadrícula¶

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

screenshot: website-building-blocks-grid-layout

menu: Website ‣ Edit ‣ (building block)
shows: A building block switched to the Grid layout in the right sidebar, with an image being dragged onto a grid cell.
highlight: The Grid layout option in the sidebar (red frame).
data: Demo website 'My Website' in the website editor.
module: website
notes: English UI, light theme, 1440px width.

Columnas¶

Elegir el diseño Columnas le permite determinar el número de elementos por línea dentro del bloque. Para ello, seleccione el bloque que desea modificar, haga clic en el menú desplegable junto al campo Columnas y ajuste el número. Después podrá modificar la configuración de una columna específica mediante las opciones de la sección Columna de la pestaña Personalizar.

Nota

De forma predeterminada, en los dispositivos móviles, solo se muestra un elemento (columna) por línea para garantizar que el contenido siga siendo fácil de leer y de acceder en pantallas más pequeñas. Para ajustar el valor, haga clic en el icono (icono de móvil) en la parte superior del editor del sitio web y adapte el número de columnas. Las formas están ocultas de forma predeterminada en los dispositivos móviles.

Duplicar un bloque de creación¶

Para duplicar un bloque de creación, haga clic en el icono (duplicar) en la parte superior de la pestaña Personalizar. Una vez duplicado, el nuevo bloque aparece en la página debajo del original.

Guardar un bloque de creación personalizado¶

Puede guardar un bloque de creación personalizado para reutilizarlo en otro lugar. Para ello, selecciónelo, vaya a la pestaña Personalizar y haga clic en el icono (disquete). Haga clic en el botón Guardar y recargar en la ventana emergente para confirmar que desea guardar su bloque personalizado.

Para añadir un bloque de creación guardado a la página, vaya a la pestaña Bloques y arrastre y suelte el bloque Personalizado desde la sección Categorías. En la ventana emergente que se abre, haga clic en el bloque deseado dentro de la categoría Personalizado.

Truco

En la ventana emergente Insertar un bloque, haga clic en (editar) para cambiar el nombre del bloque personalizado o en (eliminar) para eliminarlo.

Crear un enlace de ancla¶

Los enlaces de ancla son hipervínculos que dirigen a los usuarios a una sección específica de una página. Para crear un enlace de ancla para un bloque, siga estos pasos:

Haga clic en Editar y seleccione el bloque al que desea enlazar.
Haga clic en (enlace) en la parte superior de la pestaña Personalizar.
Para editar el nombre de ancla predeterminado, haga clic en Editar en el mensaje emergente verde que se abre.
Reemplace el nombre del ancla y haga clic en Guardar y copiar.

Una vez que se haya guardado el ancla, puede enlazarla desde cualquier parte de su sitio web.