Cómo utilizar SiteOrigin Page Builder con WordPress

Al igual que otros creadores de páginas de WordPress, SiteOrigin está aquí para ayudarlo a construir un sitio web poderoso y receptivo con algo de CSS y cero conocimientos de codificación. Hay algunos temas de su extremo que puede usar (tanto gratuitos como premium), así como complementos gratuitos y de creación de páginas Pro.

Probé la versión Pro de SiteOrigin y construí una página de destino. Viene con la funcionalidad de arrastrar y soltar y funciona con cualquier tema y puede usar todos los widgets gratuitos, profesionales y de WordPress al mismo tiempo. Leamos este artículo para saber más sobre la instalación y configuración de SiteOrigin con WordPress.

¿Por qué elegir SiteOrigin Page Builder?

La construcción del sitio comienza desde la barra de herramientas en el Editor de WordPress, con la que todos estamos familiarizados, tanto Classic como Gutenberg. Genera una pequeña cantidad de código de salida y no está inflado, pero cada línea del código de salida está optimizada tanto como sea posible para un constructor de una página.

Tiene una vista previa en vivo de cada cambio que ha realizado, ya que no tiene un generador de interfaz.

También puede consultar fácilmente el historial y volver a un diseño anterior si no está satisfecho con lo que hizo. Además, utiliza filas y widgets como de costumbre, como otros creadores de páginas.

Características de SiteOrigin Page Builder

La versión gratuita de SiteOrigin viene con opciones de "widgets" bastante limitadas, pero con la versión Pro, tiene un montón de widgets complementarios útiles para construir su sitio con facilidad.

Generador de tipos de publicaciones personalizadas

Una de las características más populares y útiles de SiteOrigin es Custom Post Type Builder con diseños de Page Builder reutilizables y plantillas de WooCommerce. Es un poco diferente de otras herramientas y daré una explicación un poco más profunda sobre cómo usarlo.

Hay pasos importantes a seguir para que pueda crear una plantilla de tipo de publicación personalizada en SiteOrigin.

Paso 1

Debería agregar un nuevo tipo de publicación personalizada, crear el diseño del tipo de publicación utilizando Page Builder y elegir la configuración de visualización del tipo de publicación.

Desde su Panel de WordPress, vaya a Herramientas → Tipos de publicaciones y haga clic en el botón Agregar nuevo, asígnele el nombre Portafolio, por ejemplo. Ahora, haga clic en la pestaña Creador de páginas junto a las pestañas Texto y Visual, use los botones Agregar widget y Agregar fila del Creador de páginas para crear el diseño de tipo de publicación personalizado de su cartera.

Tenga en cuenta que cualquier contenido que agregue a la plantilla se mostrará en cada publicación de cartera que se publique en el futuro. Por lo tanto, es muy útil si desea mostrar un bloque específico de contenido en cada una de estas páginas, como Llamado a la acción, Suscribirse a nuestro boletín, Acerca de mí, Testimonios, etc.

Paso 2

Necesita saber cómo agregar contenido a un tipo de publicación personalizada que ha creado.

Una vez que haya creado la cartera de tipos de publicación personalizada, podrá ver el elemento de la cartera en la barra lateral izquierda de su panel de WordPress. Haga clic en él y luego haga clic en Agregar nuevo.

Cuando le asigne un nombre a su elemento de Portafolio, le permitirá agregarle contenido. Recuerde, solo puede editar los widgets que no forman parte de la plantilla global y esos widgets se marcarán con léame un texto. Y por último, pero no menos importante, cómo agregar esas publicaciones a un carrusel de publicaciones o un widget de bucle de publicaciones.

Widget de bucle de publicación

SiteOrigin incluye el widget de bucle de publicación, pero se basa en plantillas de bucle dentro del tema activo.

Para insertar el widget de bucle de publicación, simplemente agregue una fila en una página o publicación donde desea que se muestre, seleccione el diseño de blog o cuadrícula y listo. A continuación, deberá elegir qué widget se mostrará haciendo clic en el botón Crear consulta de publicación.

En el último paso, haga clic en su Tipo de publicación personalizada en el menú desplegable Tipo de publicación en la parte superior del widget del generador de consultas.

Si desea hacerlo en el carrusel de publicaciones, la única diferencia es elegir el widget de carrusel de publicaciones en lugar de Post Loop, el resto del procedimiento es el mismo.

Creador de plantillas de WooCommerce

Las plantillas de WooCommerce permiten crear hermosas páginas específicas de WooCommerce y una apariencia visual de un solo producto. La interfaz de WooCommerce Template Builder se divide en siete pestañas:

1. Producto
2. Archivo de producto
3. Tienda
4. Carro
5. Carro vacio
6. Verificar
7. Mi cuenta

Para WooCommerce, todos los elementos individuales reales que necesita para construir el producto único se distribuyen como un widget, lo que le permite crear productos fácilmente. Puede crear un diseño y usar widgets de WooCommerce como precio, SKU, Agregar al carrito, Descripción corta / larga, Imagen del producto, Título, etc.

También hay un widget muy útil para la venta adicional de un producto, que le brinda la libertad de usar la funcionalidad de venta adicional de WooCommerce. Sin embargo, tenga en cuenta que el diseño de estos widgets y las páginas de WooCommerce lo establece el CSS de su tema y se puede editar mediante CSS.

Otros widgets son comunes como mapas, acordeones, CTA, pestañas, widgets sociales, carruseles, etc.

Con la suscripción Pro, no solo obtiene Pro Page Builder, sino también acceso a todas las funciones Pro, Temas Premium, CSS y widgets.

Precios y planes de SiteOrigin Page Builder

SiteOrigin ofrece dos modelos de precios. La primera y más útil es una suscripción anual, que viene en 3 paquetes.

• Individual para un sitio al precio de $ 29
• Negocios para hasta 5 sitios al precio de $ 49
• Desarrollador para sitios ilimitados al precio de $ 99

Además, hay una licencia de un año en la que tiene todo lo mismo, excepto que no es la suscripción, sino un año de actualizaciones y soporte.

• Individual para un sitio al precio de $ 38
• Negocios para hasta 5 sitios al precio de $ 64
• Desarrollador para sitios ilimitados al precio de $ 128

Requisitos de sistema / alojamiento de SiteOrigin

Aunque es un poco difícil encontrar los requisitos del sistema de SiteOrigin. De algunos foros de soporte y comentarios en línea, parece que PHP 7.4 con al menos 512 MB de memoria PHP funcionará. Sin embargo, he usado VultrHF con 2GB de memoria PHP para propósitos de prueba.

Por supuesto, necesitaría la última versión de WordPress y todos los demás complementos actualizados.

Instalar y configurar SiteOrigin Page Builder

Cuando se trata de instalación y configuración, SiteOrigin ofrece algo interesante que la mayoría de los creadores de páginas no ofrecen.

Como para todo en WordPress, debe instalar SiteOrigin gratuito directamente desde el Repositorio y, luego, cargar la versión Pro descargada de su cuenta de SiteOrigin. Una vez que haya terminado con la instalación, siga los pasos e instale / active los complementos recomendados.

Una vez que haya instalado correctamente el paquete de complementos, debe activar la licencia y los widgets que necesita. En cuanto a la licencia, debe activarse de inmediato y para los widgets, puede activarlos ahora o más tarde cuando los necesite.

Lo bueno de SiteOrigin es que no tiene que activar widgets que no necesita y, al hacerlo, puede ahorrar algunos recursos y tener funcionales solo las opciones que necesita. Los azules están activos y los grises son widgets inactivos.

Cuando haya terminado, puede comenzar a construir su sitio utilizando el creador de páginas SiteOrigin. Vaya a Páginas → Agregar nuevo y, al hacer clic en la flecha desplegable, se le ofrecerá Agregar nueva página con SiteOrigin Page Builder y Block Editor → seleccione SiteOrigin Page Builder.

Personalmente, no soy el mayor fanático de los creadores de páginas de back-end en la era de los creadores de front-end. Sin embargo, significa que consumirá menos recursos y es más liviano para su servidor. No tan hambrientos como constructores en general.

Así es como se ve realmente el creador de páginas en el modo de edición en vivo, que es el más útil. El editor de back-end es bastante difícil y requiere mucho tiempo, ya que debe tocar la vista previa cada vez para ver los cambios que ha realizado.

Cuando haga clic en la página Editar, terminará dentro del editor de back-end, desde allí simplemente haga clic en Editor en vivo en la barra de herramientas y terminará en él.

En el lado izquierdo, tiene una barra lateral similar a la del Personalizador, desde la cual está construyendo el sitio y en el lado derecho volverá a cargar la vista para mostrar los cambios después de realizar cualquier cambio.

No admite ningún tipo de arrastrar y soltar directamente en el sitio, pero todo debe hacerse a través del personalizador de la barra lateral izquierda.

En la esquina superior izquierda, verá la barra de herramientas con 4 elementos. De izquierda a derecha harían lo siguiente.

Gear Icon abrirá los widgets disponibles que puede insertar en las filas que ha creado. Puede ver los widgets de WordPress y los de SiteOrigin en el mismo lugar. Sin embargo, también puede seleccionar en el lado izquierdo para ver solo WordPress o solo SiteOrigin.

El siguiente ícono es una hamburguesa, que agregará una nueva fila y ese es el momento en el que está eligiendo el diseño de la fila. No se preocupe si necesita cambiar el diseño, puede hacerlo en cualquier momento más adelante.

Después de hacer clic en el icono Diseño, en realidad se abriría la opción para importar / exportar el diseño existente. Lo que he notado es que SiteOrigin carece de más diseños y diseños más modernos. Además, desde esta herramienta, puede clonar páginas existentes que ya ha creado o reflejar secciones / bloques.

El último ícono es Historial, el lugar donde puedes revertir lo que hiciste si no te gustan los resultados o simplemente si cometiste un error.

Rendimiento de SiteOrigin Page Builder en Cloudways

Como era de esperar, SiteOrigin funciona bastante bien, ya que no tiene mucha hinchazón en el código y es bastante simple, lo cual es al mismo tiempo el beneficio y el inconveniente. Debemos mencionar que no hicimos ninguna optimización de imagen.

- Resultados de SiteOrigin en GTMetrix

- Resultados de SiteOrigin en Pingdom Tools

- Resultados de SiteOrigin en WebPageTest

Reseñas de usuarios de SiteOrigin Page Builder

Y lo que siempre es una de las cosas que debe verificar antes de instalar cualquier complemento son las revisiones y calificaciones en el repositorio de complementos de WordPress.org. Para SiteOrigin, hay 922 calificaciones de 5 estrellas hasta ahora y las críticas recientes son increíbles.

Resumen

Si necesita una herramienta liviana para crear un sitio web simple o una página de destino, SiteOrigin podría ser la opción perfecta para usted. La desventaja es que no ofrece un generador de encabezados y pies de página, por lo que necesita algún tema que permita editar el encabezado y el pie de página de su sitio.

La curva de aprendizaje es empinada y necesita algo de experiencia previa con WordPress y una comprensión de los widgets y elementos. La falta de un editor front-end también es un factor limitante para los novatos y definitivamente requiere algunos conocimientos y habilidades de CSS para que el resultado final se vea increíble. Sin embargo, por otro lado, como desarrollador, la mayoría de las funciones son bastante convenientes, aunque no son muy intuitivas para los principiantes.

El ecosistema alrededor de SiteOrigin no es tan grande como para otros creadores de páginas, pero debemos tener en cuenta que tiene 1 millón de instalaciones activas para la versión gratuita y 900.000 para el paquete de widgets, y algunos de los autores de complementos externos tienen más de 30.000. instalaciones activas.