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.
Se nos abrirá un editor dinámico con las siguientes funcionalidades: "Añadir widget", "Añadir fila", "Diseños", "Historial" y "Editor en vivo".
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).
De todos los widget disponibles, seleccionamos el de nuestro interés. En nuestro caso vamos a seleccionar "Botón de SiteOrigen".
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".
Vemos cómo el widget queda incorporado en una fila.
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.
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".
Vemos cómo el widget, en este caso "Botón de SiteOrigen", queda duplicado.
Eliminar
Podemos eliminar cualquier widget posicionándonos encima del mismo con el ratón y pulsando sobre "Eliminar".
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).
Ahora definimos las características de la fila incorporando los siguientes datos:
- "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.
- "Número de columnas": incorporamos el número de columnas que queremos que contenga la fila. En nuestro ejemplo hemos indicado 3.
- "Vista previa": desde aquí podemos ver la distribución de las columnas.
- "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.
- "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.
- "Insertar": una vez incorporados todos los datos pulsamos sobre "Insertar".
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.
En este caso, hemos añadido el widget "Nube de etiquetas", con este resultado:
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).
Al soltar el botón izquierdo del ratón, el elemento se colocará en el lugar sobre el que esté posicionado en ese momento.
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".
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.
El cambio queda 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.
Aparece el mensaje "¿Estás seguro?" y pulsamos sobre el mismo para confirmar el borrado.
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".
La fila queda 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.
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).
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.
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.
Después de pulsar en "Insertar", podremos empezar a modificar el diseño y los contenidos:
- "Llave inglesa" (1): al pulsar en ella podremos acceder a todas las propiedades de la fila.
- Al situarnos sobre cualquiera de los elementos podremos acceder a las opciones de configuración de los widget.
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".
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.
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"
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). 
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.
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.
Una vez insertado, veremos un listado con todos los Widgets de SiteOrigen disponibles. Seleccionaremos el de nuestro interés y lo configuraremos.
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.
Eliminar un bloque de SiteOrigin
Para eliminar un bloque completo, pulsamos en los tres puntos (1) de la cabecera y seleccionamos "Delete".
