Guía completa de Odoo Website Builder: diseñar, publicar y optimizar

El Creador de sitios web de Odoo transforma su ERP en una plataforma web completa. A diferencia de los creadores de sitios web independientes que requieren integraciones separadas para comercio electrónico, formularios CRM y registros de eventos, el creador de Odoo trabaja directamente con los datos de su negocio. Las páginas de productos se extraen de su inventario. Los formularios de contacto alimentan su CRM. Las páginas de eventos se conectan a su módulo de gestión de eventos. Esta guía cubre todos los aspectos de la creación, administración y optimización de sitios web con Odoo.

Conclusiones clave

• Odoo Website Builder utiliza un editor basado en bloques de arrastrar y soltar con más de 150 bloques de contenido prediseñados
• Los temas proporcionan una base de diseño inicial que se puede personalizar en todos los niveles, incluidos colores, fuentes, espaciado y diseño.
• Las herramientas de SEO están integradas en el editor de páginas con administración de metaetiquetas en tiempo real, control de estructura de URL y generación de mapas del sitio.
• La integración del comercio electrónico es nativa y extrae datos de productos, precios e inventario directamente desde su base de datos Odoo.
• El motor del blog admite la publicación de varios autores con categorías, etiquetas y estructuras de URL compatibles con SEO

Comenzando con el sitio web de Odoo

Habilitación del módulo de sitio web

Instale el módulo de sitio web desde Aplicaciones > Sitio web. Tras la primera instalación, Odoo presenta un asistente de configuración:

1. Elija un tema: seleccione entre temas gratuitos y premium que determinan el lenguaje de diseño general.
2. Configurar información de la empresa: el nombre, el logotipo y los datos de contacto de la empresa completan el encabezado y el pie de página automáticamente
3. Seleccionar funciones: habilite o deshabilite blogs, comercio electrónico, foros, eventos y otras funciones del sitio web.
4. Establecer dominio: configure su nombre de dominio personalizado para uso en producción

Después de la configuración, navegue hasta Sitio web > Panel de control para acceder al centro de administración del sitio web que muestra páginas, análisis de tráfico y métricas de comercio electrónico.

El editor de páginas

El editor de arrastrar y soltar se activa cuando haces clic en Editar en cualquier página. La interfaz del editor consta de:

Panel de bloques (barra lateral izquierda): busque y arrastre bloques de contenido a la página. Los bloques están organizados por categoría: encabezados, características, texto, imágenes, testimonios, precios, llamados a la acción y pies de página.

Panel de propiedades (barra lateral derecha): configure las propiedades del elemento seleccionado, incluidos el espaciado, los colores, las animaciones, las condiciones de visibilidad y el comportamiento de respuesta.

Edición en línea: haga clic en cualquier texto para editarlo directamente en la página. Las herramientas de formato de texto aparecen en una barra de herramientas flotante.

Herramientas de diseño: controles de cuadrícula y columnas para una gestión precisa del diseño. Cada sección admite recuentos de columnas configurables (1-6) con proporciones de ancho personalizadas.

Diseño y contenido de la página

Bloques de contenido

Odoo 19 incluye más de 150 bloques de contenido organizados en estas categorías:

Contenido dinámico

Los bloques de contenido dinámico extraen datos de su base de datos Odoo:

• Exhibición de productos: muestra productos de su catálogo con precios y disponibilidad en tiempo real
• Publicaciones de blog: muestra entradas de blog recientes o destacadas con extractos e imágenes.
• Eventos: enumera los próximos eventos con botones de registro
• Ofertas de trabajo: muestra puestos vacantes desde el módulo de contratación
• Testimonios de clientes: extraídos de una base de datos de testimonios administrada

Los bloques dinámicos se actualizan automáticamente cuando cambian los datos subyacentes. Agregar una nueva publicación de blog se refleja inmediatamente en las páginas que usan el bloque de blog.

HTML/CSS personalizado

Para una personalización avanzada más allá del editor visual, Odoo proporciona:

• Bloque HTML: inserta HTML personalizado en cualquier lugar de una página
• CSS personalizado: agregue CSS específico de la página o para todo el sitio en Sitio web > Configuración > Ajustes > CSS personalizado
• JavaScript personalizado: agregue scripts de seguimiento, widgets o elementos interactivos

Acceda al editor de código seleccionando un bloque y haciendo clic en el interruptor de vista de código. El código personalizado persiste a través de los cambios de tema, aunque las actualizaciones del tema pueden requerir ajustes de CSS.

Personalización del tema

Configuración del tema

Personaliza el tema activo en Sitio web > Configuración > Tema:

Colores: define los colores primarios, secundarios, de acento y de fondo. El tema aplica estos colores de manera consistente en todos los bloques y elementos de la interfaz de usuario. Odoo genera una paleta de colores completa a partir de sus selecciones, incluidos estados de desplazamiento, colores de texto y colores de borde.

Tipografía: elija familias de fuentes para los títulos y el cuerpo del texto de Google Fonts o cargue fuentes personalizadas. Establezca tamaños de base, alturas de línea y espaciado entre letras.

Diseño: configure el ancho del contenido, el espaciado de las secciones, el radio del borde y los estilos de sombra que se aplican globalmente.

Botones: diseñe botones primarios y secundarios con colores personalizados, radio de borde, relleno y efectos de desplazamiento.

Diseño responsivo

Cada bloque en Odoo responde de forma predeterminada. El editor proporciona tres modos de vista previa:

• Escritorio: vista de ancho completo para pantallas superiores a 1200 px
• Tableta: Vista media para pantallas 768-1199px
• Móvil: vista estrecha para pantallas de menos de 768 px

Los elementos se pueden ocultar en puntos de interrupción específicos usando la palanca de visibilidad en el panel de propiedades. Los diseños de columnas se apilan automáticamente verticalmente en dispositivos móviles a menos que se anulen.

Configuración SEO

SEO a nivel de página

Cada página tiene controles de SEO accesibles a través de la pestaña Promocionar en el editor de páginas:

• Metatítulo: la etiqueta de título que se muestra en los resultados de búsqueda (se recomienda entre 50 y 60 caracteres)
• Meta descripción: la descripción que se muestra en los resultados de búsqueda (se recomienda entre 150 y 160 caracteres)
• URL slug: la ruta URL de la página (generada automáticamente a partir del título, editable)
• URL canónica: especifique la versión canónica para páginas con múltiples URL
• Indexación: alterna si la página debe aparecer en los índices de los motores de búsqueda.

SEO técnico

Odoo maneja varios requisitos técnicos de SEO automáticamente:

• Sitemap.xml: Generado automáticamente en /sitemap.xml con todas las páginas indexadas
• Robots.txt: el archivo robots.txt predeterminado permite todos los rastreadores; personalizar en Sitio web > Configuración > SEO
• Datos estructurados: las páginas de productos incluyen el marcado de esquema JSON-LD automáticamente
• URL limpias: estructura de URL compatible con SEO con slugs configurables
• Redirecciones 301: Configure las redirecciones en Sitio web > Configuración > Redirecciones
• Etiquetas Hreflang: generadas automáticamente para sitios web en varios idiomas

Optimización de imagen

Odoo 19 optimiza las imágenes automáticamente:

• Conversión WebP: las imágenes cargadas se muestran como WebP en los navegadores compatibles.
• Imágenes adaptables: el atributo srcset ofrece imágenes del tamaño adecuado por dispositivo
• Carga diferida: las imágenes de la mitad inferior de la página se cargan al desplazarse
• Texto alternativo: el panel de propiedades de la imagen incluye campos de texto alternativo para accesibilidad y SEO.

Integración de comercio electrónico

Páginas de productos

Las páginas de productos en el sitio web de Odoo extraen datos directamente de su catálogo de productos. Características clave:

• Variantes de producto: selectores de color, tamaño y otras variantes con imágenes y precios específicos de cada variante
• Visualización de inventario: estado del stock en tiempo real (en stock, bajo stock, agotado)
• Precios dinámicos: actualización de precios según listas de precios, promociones y grupos de clientes.
• Comparación de productos: comparación en paralelo de hasta cuatro productos
• Reseñas y calificaciones: sistema de reseñas de clientes con moderación

Carrito de compras y pago

El flujo de pago se integra con los módulos de ventas, contabilidad y envío de Odoo:

1. Carro: complemento al carrito con tecnología Ajax y menú desplegable de minicarro
2. Envío: cálculo de la tarifa de envío en tiempo real desde los transportistas configurados
3. Pago: Múltiples proveedores de pago (Stripe, PayPal, Authorize.net, transferencia bancaria)
4. Confirmación de pedido: Creación automática de pedido en el módulo de Ventas
5. Factura: Generación automática de facturas en el módulo de Contabilidad

Gestión de catálogos

Administre su catálogo en línea en Sitio web > Comercio electrónico > Productos:

• Publicado/no publicado: Controla qué productos aparecen en el sitio web
• Categorías: organiza productos en categorías jerárquicas para la navegación
• Atributos y filtros: habilite el filtrado por facetas por atributos del producto
• Opciones de clasificación: configure la clasificación predeterminada (precio, nombre, más reciente, más vendido)
• Plantillas de productos: diseño de control y visualización de información por categoría de producto

Gestión de blogs

Creación de publicaciones de blog

El motor de blog en Sitio web > Blog admite la publicación de varios autores:

1. Cree una nueva publicación desde la página de índice del blog o el backend.
2. Escriba contenido usando el mismo editor de arrastrar y soltar que las páginas normales.
3. Establecer metadatos: autor, categoría, etiquetas, fecha de publicación
4. Vista previa y publicación

Blog SEO

Las publicaciones del blog incluyen controles SEO adicionales:

• Marcado de autor: marcado de persona de Schema.org para páginas de autor
• Esquema del artículo: datos estructurados de BlogPosting con fecha de publicación, fecha de modificación y autor
• Etiquetas de Open Graph: metadatos para compartir en redes sociales para Facebook, Twitter y LinkedIn
• Control de extracto: define el extracto que se muestra en los resultados de búsqueda y en las redes sociales.

Estrategia de contenido

El blog de Odoo admite flujos de trabajo de marketing de contenidos:

• Estado borrador/publicado: escriba y revise las publicaciones antes de publicarlas.
• Publicación programada: establece fechas de publicación futuras
• Categorías y etiquetas: organiza el contenido para la navegación y el SEO
• Publicaciones relacionadas: sugiere automáticamente contenido relacionado según etiquetas y categorías

Sitios web en varios idiomas

Configuración de idioma

Configure los idiomas del sitio web en Sitio web > Configuración > Idiomas:

1. Instale los idiomas deseados de la lista de idiomas
2. Habilite los idiomas para la interfaz del sitio web.
3. Establecer el idioma predeterminado
4. Configurar la estrategia de URL (subdirectorio /fr/ o subdominio fr.example.com)

Flujo de trabajo de traducción

Traduzca el contenido del sitio web a través del editor frontend:

1. Cambie al idioma de destino usando el selector de idioma
2. Haga clic en Traducir para ingresar al modo de traducción.
3. Los bloques de texto traducibles se resaltan en amarillo.
4. Haga clic en cada bloque e ingrese la traducción.
5. Guarde las traducciones por página

El backend proporciona una función de exportación/importación de traducción para flujos de trabajo de traducción masiva en Configuración > Traducciones.

Optimización del rendimiento

Optimizaciones integradas

Odoo 19 incluye varias características de rendimiento:

• Compatibilidad con CDN: configure una CDN en Sitio web > Configuración > Ajustes para la entrega de activos estáticos
• Minimización de activos: CSS y JavaScript se minimizan automáticamente en producción.
• Almacenamiento en caché de página: almacenamiento en caché de página completa para visitantes anónimos
• Optimización de consultas de bases de datos: las páginas del sitio web generan consultas optimizadas a través del ORM

Mejores prácticas de rendimiento

• Optimice las imágenes antes de cargarlas (menos de 200 KB para la mayoría de las imágenes de contenido)
• Limitar JavaScript personalizado a la funcionalidad esencial
• Utilice los bloques integrados de Odoo en lugar de HTML personalizado cuando sea posible
• Habilitar CDN para sitios con tráfico internacional
• Supervise los tiempos de carga de la página a través de Sitio web > Informes > Análisis

Servicios del sitio web ECOSIRE

Crear un sitio web eficaz dentro de Odoo requiere tanto experiencia en diseño como conocimiento de ERP. Los servicios de personalización de Odoo de ECOSIRE incluyen desarrollo de temas personalizados, creación de bloques y optimización del comercio electrónico. Nuestro equipo de implementación se encarga de la configuración completa del sitio web, desde el diseño hasta el lanzamiento, garantizando que su sitio web se integre perfectamente con sus operaciones comerciales.

Lectura relacionada

• Guía de SEO para sitios web y comercio electrónico de Odoo
• Odoo comercio electrónico para moda y prendas de vestir
• Venta multicanal con Odoo
• Gestión de devoluciones de Odoo para comercio electrónico
• Guía de integración de Odoo Shopify

¿Puedo usar un dominio personalizado con el creador de sitios web de Odoo?

Sí. Configure su dominio personalizado en Sitio web > Configuración > Ajustes. Apunte los registros DNS de su dominio a su servidor Odoo (un registro para autohospedado, CNAME para Odoo.sh). Los certificados SSL se manejan automáticamente en Odoo.sh o se pueden configurar manualmente para implementaciones autohospedadas.

¿El creador de sitios web de Odoo admite membresías o contenido privado?

Odoo admite contenido privado a través del sistema de acceso al Portal. Las páginas se pueden restringir a usuarios que hayan iniciado sesión y se pueden mostrar bloques de contenido específicos de forma condicional según los grupos de usuarios. Para una funcionalidad completa del sitio de membresía (acceso pago, contenido por niveles), el desarrollo personalizado o los módulos comunitarios amplían la funcionalidad básica.

¿Cómo se compara el rendimiento del sitio web de Odoo con el de creadores independientes como WordPress?

Los sitios web de Odoo se cargan de manera comparable a los sitios de WordPress con una complejidad de contenido similar. La ventaja es que Odoo ofrece datos comerciales dinámicos (productos, inventario, precios) sin llamadas API externas, ya que todo se encuentra en la misma base de datos. Para sitios con mucho contenido, la configuración de CDN y la optimización de imágenes son esenciales para lograr tiempos de carga competitivos.