Publicar con Page Builder

SiteOrigin Page Builder es un plugin que nos va a facilitar la creación de páginas o entradas a través de un editor dinámico que permite añadir la información en widget organizados en filas y columnas de modo que la presentación de contenidos puede resultar más atractiva. Además, incluye plantillas (Diseño preinstalado) que nos facilitarán la maquetación de contenidos en una página o entrada.

Para crear una página o entrada con SiteOrigin Page Builder, desde el Escritorio pulsamos sobre Entradas o Páginas, A continuación, abrimos el desplegable de la flechita que hay junto a "Añadir una nueva página" o "Añadir una nueva entrada", y seleccionamos "SiteOrigin Page Builder". En nuestro ejemplo, vamos a crear una página con este editor.

Pulsamos en Páginas, desplegamos las opciones de Añadir una nueva página y seleccionamos SiteOrigen Page Builder.

Se nos abrirá un editor dinámico con las siguientes funcionalidades: "Añadir widget", "Añadir fila", "Diseños", "Historial" y "Editor en vivo".

Nueva página con PageBuilder.

Widget

Los widget son elementos que nos ayudan a publicar los contenidos de manera visual y atractiva.

Para incorporarlo pulsamos sobre "Añadir widget" (1) o "Widget" (2).Pulsamos sobre Añadir widget.

De todos los widget disponibles, seleccionamos el de nuestro interés. En nuestro caso vamos a seleccionar "Botón de SiteOrigen".

Widgets.

Se nos abrirá un formulario que nos permite configurar el botón según nuestro gusto e interés. Para finalizar, pulsamos en "Hecho".

Cada widget tiene su propios campos de configuración. En todos los casos, una vez los hayamos completado, pulsaremos sobre "Hecho".

Opciones del widget botón.

Vemos cómo el widget queda incorporado en una fila.

Widget botón incorporado.

Editar

Podemos modificar la configuración del widget posicionándonos encima del mismo con el ratón y pulsando sobre "Editar". Al hacerlo accederemos al formulario del widget y podremos cambiar los datos.Editar widget.

Duplicar

En ocasiones puede interesarnos reutilizar un widget. En este caso, podemos duplicarlo y posteriormente modificar la configuración de acuerdo a nuestros intereses. Para duplicar un widget, nos posicionaremos encima con el ratón y pulsaremos sobre "Duplicar".Duplicar widget.

Vemos cómo el widget, en este caso "Botón de SiteOrigen", queda duplicado.Widget duplicado.

Eliminar

Podemos eliminar cualquier widget posicionándonos encima del mismo con el ratón y pulsando sobre "Eliminar".Pulsamos sobre "eliminar" para borrar el widget.

Fila

SiteOrigin Page Builder inserta los elementos en filas para distribuir los elementos en la página. Podemos crear las filas antes de insertar los elementos (widget). En todo caso, siempre podremos mover elementos de una fila a otra.

Añadimos una fila pulsando en "Añadir fila"(1) o "Fila" (2).

Añadir fila.

Ahora definimos las características de la fila incorporando los siguientes datos:

  1. "Nombre de la fila": por defecto, siempre aparecerá "Nueva fila" que podemos modificar. Esto puede resultar interesante a la hora de editar la página, ya que si nuestra página se compone de varias filas, al proporcionarle un nombre personalizado, podremos localizar más fácilmente la fila de nuestro interés. En nuestro caso la hemos denominado Enlaces de interés.
  2. "Número de columnas": incorporamos el número de columnas que queremos que contenga la fila. En nuestro ejemplo hemos indicado 3.
  3. "Vista previa": desde aquí podemos ver la distribución de las columnas.
  4. "Ajustar columnas": por defecto, el ancho de las columnas será el mismo. Para modificarlo, posicionamos el cursor del ratón sobre los "tres puntos verticales" y pulsando el botón izquierdo y sin soltar, movemos el ratón para modificar el ancho. Veremos cómo el porcentaje de cada columna se modifica. Soltamos el botón izquierdo del ratón cuando el tamaño sea el adecuado.
  5. "Estilos de fila": desde este apartado podremos establecer, entre otras características, el espacio que queremos que haya después de la fila, el espacio entre las columnas, alineación, diseño móvil, etc.
  6. "Insertar": una vez incorporados todos los datos pulsamos sobre "Insertar".

Configuración de la fila.

La fila queda insertada. Si seleccionamos una columna (1), se nos mostrará de otro color. Si entonces añadimos un widget (2), se colocará en ese lugar.

Añadir Widget a columna.

En este caso, hemos añadido el widget "Nube de etiquetas", con este resultado:Widget Nube de etiquetas incorporado en una columna.

Podemos mover elementos libremente de una fila a otra y de una columna a otra, arrastrándolos con el ratón (clicamos sobre el elemento con el botón izquierdo del ratón y, manteniéndolo pulsado, movemos el ratón hacia la nueva ubicación).

Arrastrar elementos.

Al soltar el botón izquierdo del ratón, el elemento se colocará en el lugar sobre el que esté posicionado en ese momento.Elemento reubicado.

Editar

En cualquier momento podremos cambiar la configuración de una fila. Para ello pulsamos en el icono "llave inglesa" y seleccionamos la opción "Editar fila".Pulsamos sobre Editar fila.

Realizamos los cambios de nuestro interés. En este caso, vamos a cambiar el nombre y el número de columnas: cambiaremos de tres a una.

Cambiamos la composición de la fila y pulsamos sobre Hecho.

El cambio queda aplicado.Modificación fila aplicado.

Eliminar

Podemos eliminar las filas que no nos interesen. Para ello pulsamos en el icono "llave inglesa" y seleccionamos la opción "Eliminar fila".

Al eliminar la fila desaparecerán todos los elementos (widget) que estuvieran ubicados en la misma.

Pulsamos sobre el icono "herramientas" y seleccionamos "Eliminar fila".

Aparece el mensaje "¿Estás seguro?" y pulsamos sobre el mismo para confirmar el borrado.

Confirmamos la eliminación de la fila,

Duplicar

Puede ocurrir que en la elaboración de nuestra página queramos incluir varias filas con los mismos widget pero con diferente configuración. En este caso, para facilitar la labor, podemos duplicar la fila y, a continuación, acceder a la configuración de los widget para personalizar su configuración.

Para ello pulsamos en el icono "llave inglesa" y seleccionamos la opción "Duplicar fila".

Pulsamos sobre Duplicar fila.

La fila queda duplicada.

Ejemplo de fila duplicada.

Mover

Si hemos añadido varias filas y queremos modificar su distribución, podemos moverlas de posición pulsando con el botón izquierdo del ratón sobre el icono de la "doble flecha" y, sin soltar, desplazar la fila al lugar que queramos.

Mover fila.

Diseños preinstalados

Son plantillas que nos van a facilitar la creación de páginas. Estos diseños están compuestos por filas y widget preconfigurados y nos pueden facilitar bastante la maquetación de los contenidos.

Para añadir un diseño a nuestra página, pulsamos sobre "Diseños" (1) o "Diseño preinstalado" (2).

Diseño preinstalado.

Para previsualizar un diseño, nos situamos con el ratón sobre él y pulsamos en "Preview". Se abre una nueva pestaña del navegador donde podremos ver en detalle este diseño. 

Previsualizar los temas.

Para añadir un diseño, clicamos sobre él (1) y pulsamos  en "Insertar" (2). A continuación, elegimos dónde queremos ubicarlo: "Insertar después", "Insertar antes" o "Reemplazar el actual".

Debemos tener en cuenta que, si seleccionamos la opción "Reemplazar el actual", los elementos creados anteriormente (filas y/o widget) se eliminarán de la página junto con todos los contenidos. 

Insertar diseño preinstalado

Después de pulsar en "Insertar", podremos empezar a modificar el diseño y los contenidos:

  1. "Llave inglesa" (1): al pulsar en ella podremos acceder a todas las propiedades de la fila.
  2. Al situarnos sobre cualquiera de los elementos podremos acceder a las opciones de configuración de los widget.

Diseño insetado.

Historial

Muestra el histórico de todos los cambios que vamos realizando mientras editamos la página, permitiendo volver a cualquiera de las versiones anteriores.

Para acceder, pulsamos sobre "Historial".Ver historial.

Si queremos volver a una versión anterior a la actual, pulsamos en ella (1) para previsualizar la página y sobre "Restaurar versión" si es de nuestro interés.

Podremos previsualizar las versiones anteriores antes de restaurar la que nos interesa.

Restaurar versión.

Editor en vivo

Esta opción resulta interesante si queremos previsualizar en directo los cambios que estamos realizando en la página antes de publicarla. 

Accedemos a esta opción pulsando sobre "Editor en vivo"

Acceso al editor en vivo.

Accederemos a una pantalla dividida en dos áreas: área de trabajo, con todos los elementos (botones de control (1), filas y widget  (2)), y área de previsualización (3). Opciones del editor en vivo.

Podremos editar los elementos desde dos sitios:

  • desde el área de trabajo, situando el cursor del ratón sobre el elemento que queremos modificar;
  • desde el área de previsualización, pulsando con el botón izquierdo del ratón sobre el elemento visual concreto que queramos modificar.

En ambos casos, habrá que pulsar sobre "Hecho" para guardar los cambios realizados.

Para publicar la página, pulsaremos sobre "Actualizar" o "Cerrar" y "Publicar".

Editar lo creado con otro editor

En WordPress de EducaMadrid coexisten varios editores para crear páginas y entradas. Es posible que en una página creada con el editor de bloques (Gutenberg) nos gustaría añadir elementos de SiteOrigin Page Builder.

En este ejemplo vemos que la página Documentos del centro está creada con SiteOrigin Page Builder, pero la página Horarios, no.

Páginas creadas de distintas formas.

Podemos añadir en la página Horarios elementos de SiteOrigin Page Builder: Widget de SiteOrigin y Diseño de SiteOrigen.

Widget de SiteOrigin

Para añadir un elemento de SiteOrigin a nuestra página creada con editor de bloques, pulsamos en "Editar" y  "Añadir un bloque(+) " (1). Buscamos "Widget de SiteOrigin" (2) en la biblioteca de recursos y clicamos sobre él.

Localizamos el bloque Widget de SiteOrigin .

Una vez insertado, veremos un listado con todos los Widgets de SiteOrigen disponibles. Seleccionaremos el de nuestro interés y lo configuraremos.

Seleccionamos el widget de nuestro interés.

Diseño de SiteOrigin

También podemos añadir una plantilla de página con todos los elementos preconfigurados en filas y columnas seleccionando en la biblioteca de recursos el bloque "Diseño de SiteOrigin".

Al editar la publicación pulsamos sobre "Añadir un bloque"(+) " (1) localizamos el bloque "Diseño de SiteOrigin" y clicamos sobre él.

Añadir bloque Diseño de SiteOrigen.

Eliminar un bloque de SiteOrigin

Para eliminar un bloque completo, pulsamos en los tres puntos (1) de la cabecera y seleccionamos "Delete".

Eliminar bloque Diseño SiteOrigen.