Page Builder - Plugin de WordPress para la construcción de páginas

Page Builder by SiteOrigin, plugin de Wordpress para la maquetación de páginas y entradas.

Existen multitud de plugins de WordPress para la maquetación de páginas; pero hoy hablaremos de Page Builder by SiteOrigin. A través de este plugin (gratuito) añadiremos un nuevo editor a WordPress además del editor Visual y HTML, tanto para páginas como para entradas.

Con este nuevo editor, podemos añadir filas y columnas, consiguiendo maquetaciones más elaboradas o complejas, así como algunos widgets que vienen por defecto para añadir textos, imágenes, botones, etc... A continuación, veremos algunas de las opciones disponibles.

Para cambiar al editor de Page Builder tan solo tenemos que pinchar sobre la pestaña "Page Builder".

A continuación, añadimos una nueva fila, e indicamos el número de columnas que deseamos.

Podemos indicar el ancho en porcentaje para cada una de las columnas haciendo click en el valor puesto por defecto.

En la parte lateral derecha podremos modificar los estilos para la fila o para cada una de las columnas de forma individual pinchando en cada una de ellas.

• Atributos:
  • Id de fila
  • Clase fila
  • Estilos CSS
  • Estilos CSS en móvil
• Estructura:
  • Margen inferior
  • Separación
  • Relleno
  • Estructura de la fila
  • Comportamiento de cierre
  • Orden de cierre
  • Alineación vertical de la celda
• Diseño móvil:
  • Margen inferior para el móvil
  • Márgenes de las celdas en móviles
  • Relleno en móvil
• Diseño:
  • Color de fondo
  • Imagen de fondo
  • Visualización de la imagen de fondo
  • Color del borde

Si lo que queremos es cambiar el estilo para una de las columnas o celdas, al pinchar dos veces, aparecerán en el lateral derecho las opciones para dicha celda. (Algunas varían con respecto a los estilos de fila).

• Atributos:
  • Id de celda
  • Clase celda
  • Estilos CSS
  • Estilos CSS en móvil
• Estructura:
  • Relleno
  • Alineación vertical de la celda
• Diseño móvil:
  • Relleno en móvil
• Diseño:
  • Color de fondo
  • Imagen de fondo
  • Visualización de la imagen de fondo
  • Color del borde
  • Color de fuente
  • Color de los enlaces

Una vez modificados los estilos, los guardamos haciendo click en "Hecho". Si deseamos volver a editar los estilos basta con hacer click en el icono de llave y seleccionar en el desplegable "Editar". También podremos "Duplicar la fila" o "Eliminarla". A través del icono con las flechas, podremos reordenar las filas.

Para añadir contenidos, hacemos click en "Añadir Widget". Se mostrarán todos los widgets disponibles:

• Todos los Widgets
• Widgets de Bundle
• Widgets para Page Builder
• Widgets de WordPress
• Jetack
• Widgets recomendados

Esto puede variar en función de otros plugins que podamos tener instalados, como por ejemplo Jetpack.

Nos centraremos en Widgets de Bundle y para Page Builder, que son los que vienen por defecto con el plugin.

• Widgets de Bundle:
  • Botón de SiteOrigin
  • Características de SiteOrigin
  • Carrusel SiteOrigin
  • Editor SiteOrigin
  • Imagen de SiteOrigin
  • SiteOrigin Carrusel de entradas
  • SiteOrigin GoogleMaps

• Widgets para PageBuilder
  • Bucle de entradas
  • Constructor de estructura
  • Contenido de la entrada

Además, si hacemos click con el botón derecho del ratón dentro de una fila, se nos mostrará un menú desplegable donde podremos entre todas las opciones, copiar una fila para posteriormente pegarla en otra página distinta, algo muy útil si queremos duplicar contenidos entre páginas.

A continuación, podéis ver un vídeo donde se explica el funcionamiento de este plugin.

Y vosotros, ¿usáis algún plugin para la maquetación de vuestros contenidos?