Guia completa de los bloques de construccion de sitios web

Guia completa de los bloques de construccion de sitios web

Los bloques de construccion son la base del Website Builder de Odoo. Estos modulos de contenido prediseñados y personalizables le permiten construir paginas web profesionales sin escribir codigo. Con mas de 60 bloques diferentes disponibles, puede crear practicamente cualquier tipo de pagina web.

Comprender las categorias de bloques

Los bloques de construccion estan organizados en cuatro categorias principales, cada una con un proposito especifico:

Agregar bloques de construccion a su pagina

1. Entrar en modo de edicion: Navegue a su pagina y haga clic en el boton Edit en la barra de herramientas superior
2. Abrir el panel de bloques: Haga clic en la pestana Blocks en la barra lateral izquierda para ver todos los bloques disponibles
3. Explorar las categorias: Desplacese por las secciones de Estructura, Funcionalidades, Contenido dinamico o Contenido interno
4. Arrastrar y soltar: Haga clic y arrastre cualquier bloque a su pagina. Un indicador azul muestra donde se colocara
5. Seleccionar plantillas: Para los bloques de categoria, aparece una ventana emergente que le permite elegir entre varias plantillas prediseñadas
6. Personalizar: Haga clic en el bloque para acceder a las opciones de personalizacion en el panel derecho

Bloques de estructura en detalle

Los bloques de estructura forman el esqueleto de su pagina. Estos son los mas utilizados:

Bloques de Banner / Portada

• Banners de pantalla completa con imagenes o videos de fondo
• Efectos parallax que crean profundidad al desplazarse
• Superposiciones de degradado para la legibilidad del texto
• Botones de llamada a la accion mostrados de manera prominente

Diseños de columnas

• Diseños de 2, 3, 4 o 6 columnas con anchos flexibles
• Columnas asimetricas (por ej. distribucion 1/3 + 2/3)
• Comportamiento adaptable - las columnas se apilan en moviles
• Controles de espaciado para el espacio entre columnas

Secciones de contenido

• Bloques de texto con encabezados y parrafos
• Combinaciones de imagen + texto
• Secciones de citas para testimonios
• Secciones de acordeon para preguntas frecuentes

Bloques de contenido dinamico

Estos potentes bloques se conectan a su backend de Odoo o a servicios externos:

Bloque de Formulario

Cree formularios que recopilen informacion de los visitantes y creen automaticamente registros en su base de datos.

• Opciones de accion: Enviar correo electronico, Crear cliente potencial, Crear oportunidad, Crear ticket, Suscribirse al boletin
• Tipos de campos: Texto, Correo electronico, Telefono, Lista desplegable, Casilla de verificacion, Fecha, Carga de archivos
• Validacion: Campos obligatorios, validacion de formato de correo electronico, patrones personalizados
• Acciones de exito: Mostrar mensaje, redirigir a una pagina, mostrar ventana emergente
• Proteccion anti-spam: Integracion reCAPTCHA incorporada

Bloque de Productos (comercio electronico)

Muestre los productos de su tienda con diferentes diseños:

• Modos de visualizacion: Mas recientes, Mas vendidos, Destacados, Por categoria
• Opciones de diseño: Cuadricula (2-6 columnas), Carrusel, Vista de lista
• Informacion del producto: Mostrar/ocultar precios, calificaciones, botones de agregar al carrito
• Filtrado: Por categoria, rango de precios, atributos

Bloque de Codigo de integracion

Integre contenido de terceros de manera fluida:

• Videos: Integraciones de YouTube, Vimeo, Wistia
• Mapas: Google Maps, OpenStreetMap
• Redes sociales: Publicaciones de Instagram, feeds de Twitter, widgets de Facebook
• Otros: Calendly, TypeForm, iframes personalizados

Bloque de Articulos de blog

• Muestre automaticamente los articulos de blog recientes
• Filtre por categoria o etiqueta
• Elija diseño de cuadricula o lista
• Controle la cantidad de articulos mostrados

Personalizar los fondos de los bloques

Cada bloque admite una amplia personalizacion del fondo:

Controles de diseño y espaciado

Sistema de cuadricula

El Website Builder utiliza un sistema de cuadricula de 12 columnas basado en Bootstrap:

• Arrastre los bordes de las columnas para redimensionarlas (las columnas se ajustan a la cuadricula)
• Utilice los controles de desplazamiento para agregar espacio antes de las columnas
• Establezca diferentes anchos de columna para escritorio, tableta y movil

Relleno y margenes

• Relleno vertical: Utilice los controladores en la parte superior/inferior de los bloques para ajustar
• Valores de relleno: Incrementos de 8px (0, 8, 16, 24, 32... hasta 256px)
• Preselecciones rapidas: Pequeño, Mediano, Grande, Extra grande

Gestionar los bloques de construccion

Mover bloques

• Arrastre los bloques usando el controlador de movimiento (aparece al pasar el cursor)
• Los bloques pueden moverse dentro de las secciones o entre secciones
• Utilice las flechas del teclado para un posicionamiento preciso

Duplicar bloques

• Haga clic en el bloque y seleccione Duplicate en la barra de herramientas
• La copia aparece directamente debajo del original
• Todo el contenido y estilo se conservan

Guardar bloques personalizados

Cree plantillas de bloques reutilizables:

1. Personalice un bloque exactamente como lo desea
2. Haga clic en el bloque para seleccionarlo
3. Haga clic en Save en la barra de herramientas del bloque
4. Nombre su bloque personalizado
5. Encuentrelo mas tarde en la seccion Custom del panel de bloques

Eliminar bloques

• Seleccione el bloque y presione Delete o haga clic en el icono de la papelera
• Utilice Ctrl+Z para deshacer si es necesario

Crear enlaces de anclaje

Habilite el desplazamiento suave hacia secciones especificas:

1. Seleccione el bloque de destino (donde desea desplazarse)
2. En las opciones del bloque, busque Anchor
3. Ingrese un nombre de anclaje unico (por ej. « contact-section »)
4. Cree un enlace o boton con la URL #contact-section
5. Al hacer clic en el enlace, se desplaza suavemente hasta esa seccion

Buenas practicas

Atajos de teclado