Orbis Portal · Contenido (CMS)
Versión 2026.10

Constructor web: maqueta las páginas de tu web arrastrando bloques

Guía para los administradores del portal que montan páginas con secciones, columnas, imágenes y widgets sin escribir código, desde el módulo de páginas.

Conceptos básicos

Qué es el Constructor web

El Constructor web es un editor visual por bloques que está dentro de Contenido (CMS) › Paginas. Te permite montar una página con secciones, columnas, títulos, imágenes, botones, acordeones o widgets arrastrándolos a un lienzo, y ver al momento cómo queda en ordenador, tablet y móvil.

ImportanteEl selector «Contenido en la web» decide qué se muestraCada página tiene dos sitios para su contenido: el campo Contenido del editor de la ficha y el Constructor web. En la parte superior de la ficha, el selector Contenido en la web indica cuál usa la web: Editor (el campo Contenido, la opción por defecto) o Constructor web. Si eliges Constructor web y un idioma todavía no tiene nada guardado en el constructor, ese idioma muestra el campo Contenido.
Contenido en la webLo que se ve en cada idioma
EditorEl campo Contenido, aunque el constructor tenga contenido guardado.
Constructor webEl contenido del constructor de ese idioma. Si ese idioma no tiene nada guardado en el constructor, el campo Contenido.
Un selector para toda la páginaEl selector vale para todos los idiomas de la página y se guarda con el botón Guardar de la ficha. Nada se pierde al cambiarlo: el campo Contenido y el constructor conservan lo que tengan, y puedes volver a la otra opción cuando quieras. El resto de datos de la página (título, permalink, SEO, imagen, menú y visibilidad) se siguen editando en la ficha, como explica el manual de Gestión de páginas.
[widget_ofertas data-tags=12 data-template=4columnas data-limit=8]
Los shortcodes también funcionan dentro del constructorPuedes insertar ofertas, circuitos, buscadores o mapas con un elemento Widget que contenga el shortcode, como el del ejemplo. Los generas con el botón verde, igual que en el editor de la página (ver «Editar textos y widgets»).
Procedimiento común

Los 5 pasos para maquetar una página

Abre la páginaEn Contenido (CMS) › Paginas, pulsa el lápiz de la página o crea una con Nueva página.
Entra en el constructorPulsa el botón azul Constructor web y elige el idioma arriba a la izquierda.
Añade y colocaArrastra elementos del panel Añadir al lienzo.
Edita y da estiloDoble clic para escribir; selecciona un elemento para cambiar su aspecto en Estilos.
Publica y revisaPulsa Guardar, vuelve a la ficha, elige Constructor web en Contenido en la web, guarda la ficha y comprueba el resultado con Ver página.
Encuentra tu módulo

¿Qué quieres hacer?

No hay ningún módulo con ese término. Prueba con otra palabra.

Módulo

Elegir el contenido y abrir el constructor

Para qué sirve

Decidir si la web muestra el editor o el constructor, y pasar de la ficha al editor visual.

Cuándo usarlo

Cuando quieras maquetar una página con varias secciones, columnas o bloques visuales.

Tarea: elegir qué contenido muestra la web y entrar en el Constructor web. Recreación de la pantalla con datos de ejemplo.

Paso a paso

  1. En Contenido en la web, elige Constructor web para que la web muestre la maquetación del constructor, o Editor para que muestre el campo Contenido. El cambio se aplica al pulsar Guardar en la ficha.
  2. Pulsa el botón azul Constructor web, arriba a la derecha, para maquetar. La ficha se sustituye por el constructor en la misma pantalla. Puedes maquetar con el selector en Editor y cambiarlo cuando la maquetación esté lista.
  3. Versiones guarda una copia de la página cada vez que la guardas, también del contenido del constructor: úsalo para comparar o recuperar una versión anterior.
Si no ves el selector ni el botón Constructor webEl constructor se activa por portal. Si tu ficha de página no muestra el selector Contenido en la web ni el botón, pídelo a tu canal de soporte habitual de Pipeline Software.
Módulo

La pantalla del constructor

Para qué sirve

Saber qué hace cada zona antes de empezar a maquetar.

Cuándo usarlo

La primera vez que entras en el constructor.

Tarea: reconocer las zonas del Constructor web. Vista reducida: el panel Añadir incluye también los grupos Básico, Multimedia y Especial. Recreación de la pantalla.

Paso a paso

  1. Idiomas: cada pestaña (ES, EN, PT…) tiene su propia maquetación (ver «Idiomas»).
  2. Botones: Volver a la edición de la página regresa a la ficha; Copiar a otros idiomas duplica la maquetación del idioma actual; Guardar guarda; Ver página abre la página en la web.
  3. Carril y panel izquierdo: el icono + muestra el panel Añadir con los elementos y el icono de líneas, el Navegador con el árbol de la página.
  4. Lienzo: aquí arrastras y colocas los elementos. Encima, las flechas deshacen y rehacen, y la ruta (Body › …) indica dónde está el elemento seleccionado.
  5. Dispositivos: los iconos de escritorio, tablet, móvil horizontal y móvil cambian el ancho del lienzo (por ejemplo, 1440px en escritorio y 390px en móvil) para revisar cómo se adapta.
  6. Panel derecho: al seleccionar un elemento muestra su nombre y sus controles de Estilos (ver «Cambiar el aspecto»).
Módulo

Añadir elementos

Para qué sirve

Construir la estructura de la página: secciones, columnas y su contenido.

Cuándo usarlo

Al empezar una página vacía o al añadir una sección nueva a una existente.

Tarea: añadir una sección de tres columnas a la página. Recreación de la pantalla.

Paso a paso

  1. Escribe en Buscar elementos para encontrar uno por su nombre, o recorre los grupos.
  2. Empieza por la estructura: arrastra un Contenedor (una sección) o un Contenedor de Columnas (una fila con varias columnas) al lienzo.
  3. Suelta dentro de cada columna los elementos de contenido (Título, Párrafo, Imagen, Botón…). La línea azul del lienzo indica dónde quedará al soltar.
GrupoElementosPara qué
EstructuraContenedor, Contenedor de Columnas, TablaSecciones, filas con columnas y tablas de datos.
TipografíaTítulo, Párrafo, Enlace de textoTextos de la página.
BásicoLista, Enlace Bloque, BotónListas, bloques enteros con enlace y llamadas a la acción.
MultimediaImagen, Vídeo, Icono, SliderFotos, vídeos, iconos y carruseles de imágenes.
EspecialAcordeón, Tabs, Widget, Bloque De CódigoDesplegables, pestañas, shortcodes de contenido dinámico y HTML propio.
Los acordeones, las pestañas y los sliders funcionan en la webEn el lienzo se ven abiertos para que puedas editarlos; en la web pública se abren, cambian y pasan solos como esperas.
Módulo

Editar textos y widgets

Para qué sirve

Escribir los textos de los elementos y poner ofertas, circuitos o buscadores que se actualizan solos.

Cuándo usarlo

Después de colocar cada elemento en el lienzo.

Tarea: escribir un título y añadir un bloque de ofertas con un widget. Vista reducida de la ventana de contenido dinámico. Recreación de la pantalla con datos de ejemplo.

Paso a paso

  1. Haz doble clic en un Título, Párrafo, Enlace de texto o Botón para escribir dentro. Pulsa Esc o haz clic fuera para terminar.
  2. Para ofertas, circuitos, buscadores o mapas, arrastra un Widget y, con doble clic, pega dentro su shortcode.
  3. Para obtener el shortcode, pulsa el botón verde de la esquina inferior derecha: abre la ventana Generación de Contenido Dinámico. Elige el módulo, configúralo, pulsa Generar y copia el resultado.
[widget_ofertas data-tags=12 data-template=4columnas data-limit=8]
Cada módulo de contenido dinámico, explicadoLas opciones de ofertas, circuitos, destinos, buscadores, mapas y demás módulos están en el manual de Contenido dinámico. El Bloque De Código se edita también con doble clic, en una ventana para pegar HTML.
Módulo

Cambiar el aspecto

Para qué sirve

Ajustar la tipografía, el tamaño, los márgenes, el fondo y los bordes de cada elemento.

Cuándo usarlo

Cuando un elemento necesita otro color, otro tamaño o más aire alrededor.

Tarea: dar formato a un título. Vista reducida del panel Estilos, que incluye también Posición, Fondo, Borde y Efectos. Recreación aproximada del panel con datos de ejemplo.

Paso a paso

  1. Haz clic en el elemento del lienzo. El panel derecho muestra su nombre y, en Selector, el estado (Normal) y la clase que se va a modificar.
  2. En Tipografía, elige el Tipo (por ejemplo, Título 2 o Párrafo), la Fuente, el Grosor y el Tamaño.
  3. Ajusta el Color, la Alineación y la Decoración del texto.
  4. En Tamaño y Espaciado, limita el ancho, la altura, el margen exterior y el relleno interior; en Fondo, Borde y Efectos, añade color o imagen de fondo, bordes redondeados, opacidad o sombras.
Sección del panelQué controla
SelectorEstado y clase del elemento a los que se aplican los estilos.
TipografíaTipo de texto, fuente, grosor, tamaño, altura de línea, color, alineación y decoración.
TamañoAnchura y altura, con sus mínimos y máximos, y el desbordamiento (Overflow).
EspaciadoMargen exterior y relleno interior de cada lado.
PosiciónCómo se coloca el elemento respecto a los demás (Estática por defecto).
FondoColor, imágenes y degradados de fondo.
BordeEstilo, ancho, color y radio de los bordes.
EfectosFusión, opacidad, contorno y sombras.
AtenciónRevisa el resultado en móvilUn tamaño fijo grande puede verse bien en escritorio y desbordarse en el móvil. Cambia el lienzo a Mobile con los iconos de dispositivo antes de guardar.
Módulo

Organizar, duplicar y borrar

Para qué sirve

Encontrar cualquier elemento en el árbol de la página, repetir bloques y quitar lo que sobra.

Cuándo usarlo

Cuando la página tiene muchas secciones o quieres repetir una tarjeta, una columna o una sección entera.

Tarea: localizar un elemento en el Navegador y duplicarlo. Recreación de la pantalla con datos de ejemplo.

Paso a paso

  1. Pulsa el icono de líneas del carril izquierdo para abrir el Navegador: muestra todos los elementos de la página en forma de árbol.
  2. Haz clic en un elemento del árbol para seleccionarlo en el lienzo, aunque esté dentro de otro o sea difícil de alcanzar con el ratón.
  3. Con el botón derecho sobre el elemento, elige Duplicar, Cortar, Copiar, Pegar o Borrar, o usa sus atajos de teclado.
AcciónAtajoQué hace
BorrarSuprQuita el elemento seleccionado y todo lo que contiene.
DuplicarCtrl+DCrea una copia del elemento con todo su contenido.
Cortar / CopiarCtrl+X / Ctrl+CGuarda el elemento para pegarlo en otro sitio.
PegarCtrl+VPega lo cortado o copiado.
Deshacer / RehacerFlechas de la barra del lienzoAnula o repite el último cambio.
Mover un elementoArrástralo en el lienzo hasta su nueva posición; la línea azul indica dónde quedará. Para llevarlo a otra sección lejana, también puedes cortarlo y pegarlo.
Módulo

Idiomas

Para qué sirve

Maquetar la página en cada idioma de la web sin empezar de cero en cada uno.

Cuándo usarlo

Cuando la página ya está lista en el idioma principal y quieres traducirla.

Tarea: cambiar de idioma sin perder los cambios. El nombre del dominio de la ventana depende de tu portal. Recreación de la pantalla.

Paso a paso

  1. Pulsa la pestaña del idioma que quieres maquetar (ES, EN, PT…).
  2. Si has hecho cambios, el navegador pregunta si quieres guardarlos. Pulsa Aceptar para guardarlos antes de cambiar, o Cancelar para cambiar de idioma descartándolos.
  3. Para no empezar de cero, maqueta un idioma completo y pulsa Copiar a otros idiomas. Confirma la pregunta «¿Copiar el contenido del idioma actual a todos los demás idiomas? Se sobrescribirá su contenido actual.» y traduce después los textos de cada idioma.
AtenciónCopiar a otros idiomas sobrescribe sus maquetacionesSe sustituye lo que tuvieran los demás idiomas en el constructor. Si ya habías traducido alguno, sus textos se pierden.
Módulo

Guardar y volver al editor

Para qué sirve

Guardar la maquetación, publicarla con el selector o volver a mostrar el campo Contenido.

Cuándo usarlo

Al terminar cada sesión de trabajo en el constructor.

Tarea: guardar la maquetación y revisarla en la web. Recreación de la pantalla.

Paso a paso

  1. Pulsa Guardar para guardar la maquetación del idioma que tienes abierto.
  2. Pulsa Ver página para abrir la página en la web y comprobar el resultado.
  3. Pulsa Volver a la edición de la página para regresar a la ficha. Comprueba que Contenido en la web está en Constructor web y pulsa Guardar en la ficha: se guarda el selector y también lo que hayas cambiado en el constructor.
Volver a mostrar el campo ContenidoEn la ficha de la página, elige Editor en Contenido en la web y pulsa Guardar. La web vuelve a mostrar el campo Contenido en todos los idiomas. La maquetación del constructor se conserva, por si quieres volver a usarla.
Error típicoHe maquetado con el constructor y la web no cambiaEl selector Contenido en la web sigue en Editor, que es la opción por defecto. Elige Constructor web y pulsa Guardar en la ficha.
Criterio

Buenas prácticas

Maqueta antes de publicar

Deja el selector en Editor mientras preparas la maquetación y cambia a Constructor web cuando todos los idiomas estén listos.

Primero la estructura

Coloca contenedores y columnas antes que los textos: luego es más fácil mover secciones enteras.

Un idioma completo, luego copiar

Termina el idioma principal, cópialo a los demás y traduce: evitas maquetar varias veces.

Revisa en cada dispositivo

Pasa por escritorio, tablet y móvil antes de guardar y abre la página con Ver página.

Antes de publicar
  • Contenido en la web está en Constructor web y la ficha está guardada.
  • Todos los idiomas tienen maquetación en el constructor, o el campo Contenido rellenado como respaldo.
  • Los textos están traducidos en cada idioma del constructor.
  • Los widgets muestran el contenido esperado en la web.
  • La página se ve bien en escritorio, tablet y móvil.
  • Has pulsado Guardar en cada idioma modificado.
Soporte

Problemas frecuentes

La web no muestra lo que he maquetado.Revisa en la ficha que Contenido en la web está en Constructor web y que has guardado la ficha.
Cambio el campo Contenido y la web sigue igual.La página tiene elegido Constructor web. Haz el cambio en el constructor o elige Editor y guarda la ficha.
Un idioma muestra el contenido del editor y los demás el del constructor.Ese idioma no tiene nada guardado en el constructor. Entra en el constructor en ese idioma, maquétalo (o usa Copiar a otros idiomas) y guarda.
He perdido los cambios al cambiar de idioma.En la pregunta «¿Guardar los cambios del idioma actual antes de cambiar?» se pulsó Cancelar. Pulsa Aceptar la próxima vez, o Guardar antes de cambiar.
Un idioma muestra el texto de otro.Se usó Copiar a otros idiomas y no se tradujeron los textos. Entra en ese idioma, cambia los textos con doble clic y guarda.
El widget muestra el shortcode en vez de las ofertas.Revisa que el shortcode esté completo y sin errores; genéralo de nuevo con el botón verde y pégalo en el Widget.
Necesito recuperar una versión anterior.Vuelve a la ficha de la página y abre Versiones: guarda también el contenido del constructor.
¿Sigue sin funcionar?Contacta con tu canal de soporte habitual de Pipeline Software e indica la página (su ID), el idioma y una captura de pantalla.