Basic concepts
What the Web builder is
The Web builder (Constructor web) is a block-based visual editor inside Content (CMS) › Pages. It lets you build a page with sections, columns, headings, images, buttons, accordions or widgets by dragging them onto a canvas, and see straight away how it looks on desktop, tablet and mobile.
ImportantThe «Contenido en la web» selector decides what is shownEach page has two places for its content: the Contenido (Content) field of the page form editor and the Constructor web. At the top of the page form, the Contenido en la web (Content on the website) selector sets which one the website uses: Editor (the Contenido field, the default option) or Constructor web (Web builder). If you choose Constructor web and a language has nothing saved in the builder yet, that language shows its Contenido field.
| Contenido en la web | What each language shows |
|---|---|
| Editor | The Contenido field, even if the builder has content saved. |
| Constructor web | That language's builder content. If that language has nothing saved in the builder, the Contenido field. |
One selector for the whole pageThe selector applies to all the languages of the page and is saved with the page form's Guardar (Save) button. Nothing is lost when you change it: the Contenido field and the builder keep what they have, and you can switch back whenever you want. The rest of the page data (title, permalink, SEO, image, menu and visibility) is still edited in the page form, as explained in the Page management manual.
Screens shown in SpanishThe recreations show the builder as it appears with the admin panel in Spanish. Each step gives the English meaning of the labels, for example Guardar (Save).
[widget_ofertas data-tags=12 data-template=4columnas data-limit=8]
Shortcodes also work inside the builderYou can insert offers, tours, search boxes or maps with a Widget element containing the shortcode, like the one in the example. You generate them with the green button, just as in the page editor (see "Edit texts and widgets").
Common procedure
The 5 steps to lay out a page
Open the pageIn Content (CMS) › Pages, click the page's pencil or create one with Nueva página (New page).
Enter the builderClick the blue Constructor web button and choose the language at the top left.
Add and placeDrag elements from the Añadir (Add) panel onto the canvas.
Edit and styleDouble-click to type; select an element to change its look in Estilos (Styles).
Publish and checkClick Guardar (Save), go back to the form, choose Constructor web in Contenido en la web, save the form and check the result with Ver página (View page).
Find your module
What do you want to do?
Choose and openDecide which content is shownContenido en la web selector and Constructor web button.
The builder screenGet to know each areaLanguages, buttons, panels and canvas.
Add elementsBuild sections and columnsContainers, headings, images, buttons…
Edit texts and widgetsType and add shortcodesDouble-click and green button.
Change the lookTypography, size, coloursThe element's Estilos panel.
Organise, duplicate and deleteMove and repeat blocksNavigator and right-click menu.
LanguagesLay out each languageSwitch language and copy to others.
SavePublish or go back to the editorSave, view the page and change the selector.
Module
Choose the content and open the builder
What it is for
Deciding whether the website shows the editor or the builder, and moving from the form to the visual editor.
When to use it
When you want to lay out a page with several sections, columns or visual blocks.
Creación / Edición de páginaVolver al listado
Versiones 12 3Contenido en la web EditorConstructor web 1Constructor web 2
EspañolInglésPortugués
Escapadas de otoño
Step by step
- In Contenido en la web (Content on the website), choose Constructor web (Web builder) for the website to show the builder layout, or Editor for it to show the Contenido field. The change applies when you click Guardar (Save) in the form.
- Click the blue Constructor web button at the top right to lay out the page. The form is replaced by the builder on the same screen. You can lay out with the selector on Editor and change it when the layout is ready.
- Versiones (Versions) keeps a copy of the page every time you save it, including the builder content: use it to compare or restore an earlier version.
If you cannot see the selector or the Constructor web buttonThe builder is enabled per portal. If your page form does not show the Contenido en la web selector or the button, ask your usual Pipeline Software support channel.
Module
The builder screen
What it is for
Knowing what each area does before you start laying out.
When to use it
The first time you enter the builder.
ESENPT1
Volver a la edición de la páginaCopiar a otros idiomasGuardarVer página2
Añadir 3
ElementosLayouts
Buscar elementos
Estructura
ContenedorContenedor de ColumnasTabla
Tipografía
TítuloPárrafoEnlace de texto
Arrastra componentes aquí 4
EstilosAtributosInteracciones
Selecciona un componenteSelecciona un componente para poder editar sus estilos 6
Step by step
- Languages: each tab (ES, EN, PT…) has its own layout (see "Languages").
- Buttons: Volver a la edición de la página (Back to page editing) returns to the form; Copiar a otros idiomas (Copy to other languages) duplicates the current language's layout; Guardar (Save) saves; Ver página (View page) opens the page on the website.
- Rail and left panel: the + icon shows the Añadir (Add) panel with the elements and the lines icon shows the Navegador (Navigator) with the page tree.
- Canvas: this is where you drag and place the elements. Above it, the arrows undo and redo, and the path (Body › …) shows where the selected element is.
- Devices: the desktop, tablet, landscape mobile and mobile icons change the canvas width (for example, 1440px on desktop and 390px on mobile) so you can check how it adapts.
- Right panel: when you select an element it shows its name and its Estilos (Styles) controls (see "Change the look").
Module
Add elements
What it is for
Building the page structure: sections, columns and their content.
When to use it
When starting an empty page or adding a new section to an existing one.
Añadir
ElementosLayouts
Buscar elementos 1
Estructura 2
ContenedorContenedor de ColumnasTabla
Tipografía
TítuloPárrafoEnlace de texto
Básico
ListaEnlace BloqueBotón
Multimedia
ImagenVídeoIconoSlider
Especial
AcordeónTabsWidgetBloque De Código
Contenedor de Columnas · columna 1 · columna 2 · columna 3 3
EstilosAtributosInteracciones
Selecciona un componenteSelecciona un componente para poder editar sus estilos
Step by step
- Type in Buscar elementos (Search elements) to find one by name, or browse the groups.
- Start with the structure: drag a Contenedor (Container, a section) or a Contenedor de Columnas (Column container, a row with several columns) onto the canvas.
- Drop the content elements into each column (Título, Párrafo, Imagen, Botón… — Heading, Paragraph, Image, Button). The blue line on the canvas shows where it will go when you drop it.
| Group | Elements | What for |
|---|---|---|
| Estructura (Structure) | Contenedor, Contenedor de Columnas, Tabla | Sections, rows with columns and data tables. |
| Tipografía (Typography) | Título, Párrafo, Enlace de texto | Headings, paragraphs and text links. |
| Básico (Basic) | Lista, Enlace Bloque, Botón | Lists, whole blocks with a link and calls to action. |
| Multimedia | Imagen, Vídeo, Icono, Slider | Photos, videos, icons and image carousels. |
| Especial (Special) | Acordeón, Tabs, Widget, Bloque De Código | Accordions, tabs, dynamic content shortcodes and your own HTML. |
Accordions, tabs and sliders work on the websiteOn the canvas they are shown open so you can edit them; on the public website they open, switch and slide as you would expect.
Module
Edit texts and widgets
What it is for
Typing the texts of the elements and adding offers, tours or search boxes that update themselves.
When to use it
After placing each element on the canvas.
Añadir
ElementosLayouts
Especial
AcordeónTabsWidget
Escapadas de otoño 1 · [widget_ofertas data-tags=12 data-template=4columnas data-limit=8] 2
EstilosAtributosInteracciones
Selecciona un componenteSelecciona un componente para poder editar sus estilos
Generación de Contenido Dinámico×
OFERTAS 3Con esta opcíon generaremos códigos (shortcodes) para insertar en el contenido de la página que visualizarán cajas de ofertas en la página.
CIRCUITOSCon esta opcíon generaremos códigos (shortcodes) para insertar en el contenido de la página que visualizarán cajas de circuitos en la página.
Step by step
- Double-click a Título, Párrafo, Enlace de texto or Botón (Heading, Paragraph, Text link or Button) to type inside it. Press Esc or click outside to finish.
- For offers, tours, search boxes or maps, drag a Widget and, with a double-click, paste its shortcode inside.
- To get the shortcode, click the green button in the bottom right corner: it opens the Generación de Contenido Dinámico (Dynamic content generation) window. Choose the module, configure it, click Generar (Generate) and copy the result.
[widget_ofertas data-tags=12 data-template=4columnas data-limit=8]
Each dynamic content module, explainedThe options for offers, tours, destinations, search boxes, maps and the other modules are in the Dynamic content manual. The Bloque De Código (Code block) is also edited with a double-click, in a window where you paste HTML.
Module
Change the look
What it is for
Adjusting the typography, size, margins, background and borders of each element.
When to use it
When an element needs another colour, another size or more space around it.
Normal wb-title-1
Título 2
400 · Normal
40 PX
#1F2418
IzquierdaCentroDerecha
760 PX
56px auto
0
Step by step
- Click the element on the canvas. The right panel shows its name and, in Selector, the state (Normal) and the class that will be changed.
- In Tipografía (Typography), choose the Tipo (Type, for example Título 2 or Párrafo), the Fuente (Font), the Grosor (Weight) and the Tamaño (Size).
- Adjust the text's Color, Alineación (Alignment) and Decoración (Decoration).
- In Tamaño (Size) and Espaciado (Spacing), limit the width, the height, the outer margin and the inner padding; in Fondo, Borde and Efectos (Background, Border and Effects), add a background colour or image, rounded borders, opacity or shadows.
| Panel section | What it controls |
|---|---|
| Selector | State and class of the element to which the styles are applied. |
| Tipografía (Typography) | Text type, font, weight, size, line height, colour, alignment and decoration. |
| Tamaño (Size) | Width and height, with their minimums and maximums, and overflow. |
| Espaciado (Spacing) | Outer margin and inner padding on each side. |
| Posición (Position) | How the element is placed in relation to the others (Estática, static, by default). |
| Fondo (Background) | Background colour, images and gradients. |
| Borde (Border) | Border style, width, colour and radius. |
| Efectos (Effects) | Blending, opacity, outline and shadows. |
AttentionCheck the result on mobileA large fixed size can look fine on desktop and overflow on mobile. Switch the canvas to Mobile with the device icons before saving.
Module
Organise, duplicate and delete
What it is for
Finding any element in the page tree, repeating blocks and removing what is not needed.
When to use it
When the page has many sections or you want to repeat a card, a column or a whole section.
Navegador 1
wb-body
· wb-flex-container-1
· · wb-title-12
· · wb-grid-container-1
· · · wb-grid-column-1
· · · · wb-paragraph-1
BorrarSupr
DuplicarCtrl+D 3
CortarCtrl+X
CopiarCtrl+C
PegarCtrl+V
EstilosAtributosInteracciones
Selecciona un componenteSelecciona un componente para poder editar sus estilos
Step by step
- Click the lines icon on the left rail to open the Navegador (Navigator): it shows all the elements of the page as a tree.
- Click an element in the tree to select it on the canvas, even if it is inside another one or hard to reach with the mouse.
- Right-click the element and choose Duplicar, Cortar, Copiar, Pegar or Borrar (Duplicate, Cut, Copy, Paste or Delete), or use their keyboard shortcuts.
| Action | Shortcut | What it does |
|---|---|---|
| Borrar (Delete) | Supr / Del | Removes the selected element and everything it contains. |
| Duplicar (Duplicate) | Ctrl+D | Creates a copy of the element with all its content. |
| Cortar / Copiar (Cut / Copy) | Ctrl+X / Ctrl+C | Keeps the element so you can paste it somewhere else. |
| Pegar (Paste) | Ctrl+V | Pastes what you cut or copied. |
| Undo / Redo | Arrows on the canvas bar | Reverts or repeats the last change. |
Moving an elementDrag it on the canvas to its new position; the blue line shows where it will go. To take it to a distant section, you can also cut and paste it.
Module
Languages
What it is for
Laying out the page in each language of the website without starting from scratch in each one.
When to use it
When the page is ready in the main language and you want to translate it.
ESENPT1
Copiar a otros idiomas 3
www.mi-agencia.com dice
¿Guardar los cambios del idioma actual antes de cambiar? Si no guardas, se perderán.
AceptarCancelar2
Step by step
- Click the tab of the language you want to lay out (ES, EN, PT…).
- If you have made changes, the browser asks "¿Guardar los cambios del idioma actual antes de cambiar? Si no guardas, se perderán." (Save the current language's changes before switching? If you do not save, they will be lost). Click OK (Aceptar) to save them before switching, or Cancel (Cancelar) to switch language and discard them.
- To avoid starting from scratch, finish one language and click Copiar a otros idiomas (Copy to other languages). Confirm the question "¿Copiar el contenido del idioma actual a todos los demás idiomas? Se sobrescribirá su contenido actual." (Copy the current language's content to all the other languages? Their current content will be overwritten) and then translate the texts of each language.
AttentionCopiar a otros idiomas overwrites their layoutsWhatever the other languages had in the builder is replaced. If you had already translated any of them, those texts are lost.
Module
Save and go back to the editor
What it is for
Saving the layout, publishing it with the selector or showing the Contenido field again.
When to use it
At the end of each work session in the builder.
ESENPT
Volver a la edición de la página 3Copiar a otros idiomasGuardar 1Ver página 2
Step by step
- Click Guardar (Save) to save the layout of the language you have open.
- Click Ver página (View page) to open the page on the website and check the result.
- Click Volver a la edición de la página (Back to page editing) to return to the form. Check that Contenido en la web is set to Constructor web and click Guardar in the form: the selector is saved, and so is whatever you changed in the builder.
Showing the Contenido field againIn the page form, choose Editor in Contenido en la web and click Guardar. The website shows the Contenido field again in every language. The builder layout is kept, in case you want to use it again.
Typical errorI laid out the page with the builder and the website does not changeThe Contenido en la web selector is still on Editor, the default option. Choose Constructor web and click Guardar in the form.
Criteria
Good practice
Lay out before publishing
Leave the selector on Editor while you prepare the layout and switch to Constructor web when every language is ready.
Structure first
Place containers and columns before the texts: it is then easier to move whole sections.
One full language, then copy
Finish the main language, copy it to the others and translate: you avoid laying out several times.
Check on every device
Go through desktop, tablet and mobile before saving and open the page with Ver página.
Before publishing
- Contenido en la web is set to Constructor web and the form is saved.
- Every language has a builder layout, or its Contenido field filled in as a fallback.
- The texts are translated in each builder language.
- The widgets show the expected content on the website.
- The page looks right on desktop, tablet and mobile.
- You have clicked Guardar in each language you changed.
Support
Troubleshooting
The website does not show what I laid out.Check in the form that Contenido en la web is set to Constructor web and that you saved the form.
I change the Contenido field and the website stays the same.The page has Constructor web selected. Make the change in the builder or choose Editor and save the form.
One language shows the editor content and the others the builder content.That language has nothing saved in the builder. Enter the builder in that language, lay it out (or use Copiar a otros idiomas) and save.
I lost my changes when switching language.Cancel was clicked in the question about saving the current language's changes. Click OK next time, or Guardar before switching.
One language shows another language's text.Copiar a otros idiomas was used and the texts were not translated. Enter that language, change the texts with a double-click and save.
The widget shows the shortcode instead of the offers.Check that the shortcode is complete and has no errors; generate it again with the green button and paste it into the Widget.
I need to restore an earlier version.Go back to the page form and open Versiones: it also keeps the builder content.
Still not working?Contact your usual Pipeline Software support channel and give the page (its ID), the language and a screenshot.