Los editores visuales nos ayudan de forma sencilla a crear páginas webs con un aspecto profesional en pocos clics permitiéndonos añadir columnas, sliders, imágenes de fondo con efectos espectaculares, títulos atractivos, iconos,  formularios de contacto, botones con llamadas a la acción, etc…  ¿Pero cual se adapta mejor a nuestras necesidades? Veremos la comparativa entre los editores más habituales como; DIVI, Visual Composer y Forge Vs Page Builder by SiteOrigin. De este último analizaremos sus características, propiedades y bondades.

¿Es Page Builder by SiteOrigin el mejor editor visual gratuito para maquetar tu web?

A día de hoy puedo asegurar que no existe ningún editor visual de maquetación para webs gratuito que pueda superar al de SiteOrigin. En el mercado existen otros editores entre los que se encuentra DIVI, Visual Composer o Forge que son de muy buena calidad pero de pago. Así que Page Builder by SiteOrigin se convierte en la mejor alternativa si estás buscando un editor visual de maquetación gratuito.

Si hablas con cualquier desarrollador web te dirá que huyas de estos editores, ya que relentizan el tiempo de carga de la web llenándola de mucho código basura innecesario.  Pero claro, para una persona que trabaja 8 horas al día y que es un profesional de WordPress es normal que nos de este consejo. Todo esto es cierto, pero en los días que corren, son muchas las personas que no se pueden permitir a un programador/desarrollador web o que simplemente les apetece diseñar su propia web y que no disponen de los conocimientos de HTML y CSS suficientes como para maquetar una web de forma profesional. 

Aquí es donde aparecen estos Editores de Maquetación Visual, que permiten de forma muy sencilla convertir una web con una plantilla normal en una con un aspecto que nada debería envidiar a una desarrollada por un profesional.

OK. Ya conozco los riesgos y ventajas de los editores visuales y me he decidido a usar uno. ¿Cual es el Mejor editor visual?

Yo sólo te puedo hablar de lo que conozco y de lo que he podido usar, investigar y escuchar recomendaciones sobre estos editores. Recopilando toda esta información y desde mi punto de vista, Page Builder by SiteOrigin  se lleva mis elogios. Principalmente porque es gratuito y no tiene nada que envidiar a los más nombrados del mercado que son de pago como; DIVI, Visual Composer y Forge. Ahora os mostraré una tabla comparativa que te ayudará a decidirte cual usar.

Tabla comparativa entre Page Builder, DIVI, Visual composer y Forge

  Page Builder SO DIVI Visual Composer Forge
Precio Gratis $34/$170 $89/anual
$249/Vitalicio
$59/$199
Plugins ✔️ ✔️ ✔️ ✔️
Theme ✔️
Backend ✔️ ✔️ ✔️
Frontend ✔️ ✔️ ✔️ ✔️
Drag & Drop ✔️ ✔️ ✔️ ✔️
Plantillas ✔️ ✔️ ✔️
Deshacer cambios ✔️ ✔️ ✔️
Soporte Foros 1 año 1 año 1 año
Añadir widgets ✔️ ✔️

¿Qué es un editor visual?

Es una extensión que se añade a WordPress para ayudarnos con la maquetación, diseño y creación de las páginas de una web y así darle un aspecto profesional sin necesidad de usar código.

Muchas veces queremos que el aspecto de nuestras página de inicio o alguna página especial interna tenga un diseño atractivo y necesitamos añadir columnas, imágenes de fondo, mapas de Google, iconos, botones, widgets, etc… Aquí es donde los editores visuales nos ayudan a “componer” las páginas añadiendo, copiando y arrastrando una serie de módulos de un sitio a otro con unos simples clics. 

 

¿Qué es Page Builder by SiteOrigin?

Es un editor visual con una interfaz intuitiva y muy similar a la de WordPress que se caracteriza por su facilidad de uso y potencia para crear a través de sus módulos diseños personalizados en páginas webs.

Entre sus características tenemos:

  • Es muy Ligero comparado con otros editores visuales
  • Presenta muy poco lock-in
  • Funciona con cualquier tema de WordPress
  • No requiere código para su uso
  • Edición en directo
  • Historial de Cambios
  • Añade plantillas predeterminadas y permite importar y exportar plantillas personalizadas
  • Permite añadir cualquier tipo de widgets instalados en wordpress y darle estilos propios e incluso introducir CSS personalizado.
  • Es GRATIS

¿Qué necesitamos para usar Page Builder by SiteOrigin?

plugin-page-builder-site-origin-y-widget-bundle

Para poder sacar el máximo partido de este plugin, lo primero que debemos hacer es instalar el plugin oficial y un paquete que ofrece los mejores y más comunes widgets para el diseño de las páginas. 

Plugins oficiales:

Si necesitamos widgets y efectos más avanzados podemos adquirir el paquete de Addons Premium que complementarán la experiencia. Este paquete tiene un precio de $29.

Existen otras extensiones que no son oficiales de page builder pero que añaden más widgets por si los que nos da por defectose nos quedan pequeños.

Antes de conocer cómo funciona este plugin me gustaría demostrar a través de pagespeed de Google que la instalación de Page Builder + widgets bundle apenas resiente el rendimiento de nuestra web.

comparativa-pagespedd-de-siteorigin-page-builder-widgets-bundle

 

Configuraciones y nociones básicas de uso

Una vez instalado los 2 plugins ya podemos empezar a usar este editor visual pero antes hay que saber que cada uno de ellos presentan unas opciones de configuración que debemos conocer y adaptar a nuestro gusto y necesidades.

Configuraciones de Page Builder  by SiteOrigin

Las encontramos en Ajustes–> Page Builder  Cada proyecto en particular requiere de una configuración personalizada en este apartado. 

Configuración de SiteOrigin Widgets Bundle

Aquí, lo único que podemos hacer es activar y desactivar los widgets que vamos a utilizar. es importante tener en cuenta que cuantos más tengamos esto afectará al rendimiento de la web, así que activa sólo los que vayas a utilizar. Plugins–>SiteOrigin Widgets

Ahora vamos con las nociones básicas de funcionamiento del plugin.

Si accedemos a una página o entrada de nuestro wordpress, veremos en nuestra caja de edición de texto que tenemos una nueva pestaña Page Builder.

pestaña-de-page-builder-en-editor-de-texto-de-wordpress.

Si pulsamos en ella, nos aparecerá una serie de botones que son las opciones necesarias para empezar a componer nuestra página personalizada.

pantalla-de-visualizacion-de-las-opciones-de-page-builder-by-siteorigin

¿Por dónde empiezo?

Antes de empezar a diseñar conozcamos un poco como es la estructura del plugin.

Estructura-de-construccion-de-page-builder-site-by-syteorigin

Como podemos apreciar la estructura contiene una sección la cual está compuesta por todos los elementos que van a maquetar la página web; una fila que esta dividida por un número de columnas a elegir y en donde dentro de cada una de estas podemos poner el número de widgets que necesitemos para la composición de esta.

Ahora bien, para empezar a componer, lo habitual es añadir una fila y dividirla por el número de columnas  que necesitemos. Pero antes te invito a que le eches un vistazo a las plantillas predeterminadas que incorpora el plugin pulsando en prebuilt layout. Te darán muchas ideas y muy buenas de diseños ya realizados por el equipo de SiteOrigin.

plantillas-predefinidas-de-page-builder-siteorigin

plantillas de page builder by siteoring

 

Tienen una vista previa de estas y lo único que tienes que hacer es seleccionar la que más te guste y pulsar en el botón insertar. 

Ya que estamos en esta sección debes saber que desde aquí puedes exportar tus diseños e importarlo. Este paso es muy útil cuando creas una plantilla de página y la necesitas usar en otras.

Si has decidido crear desde cero tu propia plantilla entonces por dónde debes empezar es pulsando en el botón agregar fila o row 

agregar-filas-en-page-builder-siteorigin

Nos aparecerá una pantalla en la cual seleccionamos el número de columnas que queremos asignar a esa sección. Ten en cuenta que podemos modificar el porcentaje de estas a nuestro antojo. Algo que no suele pasar con los demás editores visuales y algo muy útil para la extrema personalización.

Propiedades-de-las-filas-y-columnas-de-page-builder-siteorigin

Unas opciones muy importantes para la correcta personalización de estas filas con columnas esta en la zona de Estilos de fila la cual se divide en; Atributos, Estructura y Diseño. Propiedades esenciales a la hora de asignar atributos como estilos y clases de CSS, márgenes, rellenos y anchura o asignar un color o imagen de fondo. Vale la pena entrar y dar un vistazo, seguro que lo utilizaras más de una vez. Esta misma estructura la encontraras en los bloques de widgets que insertes en cada columna. 

Una vez tenemos nuestra fila con el número de columnas y configuración deseada, pulsamos en insertar y ya estamos listos para introducir los widgets que necesitemos para el diseño de nuestra página.

Ahora sólo queda que uses tu imaginación para elaborar páginas increíbles y que empieces a trabajar con los widgets. Seguramente más adelante iré explicando o mejor, haré un curso en donde veremos a fondo los widgets para saber lo que pueden hacer y cómo funcionan.

¿Te he ayudado a solucionar tu problema?

¿Te gustaría ayudarme a seguir con mi trabajo?
Si pulsas en el anuncio que verás abajo, aunque no te interese,estás aportando con aproximadamente 0,05€ que me pagará Google. A ti no te costará nada realizar ese pequeño clic. Parece poco pero me ayuda mucho a poder seguir escribiendo artículos de buena calidad y a pagar mis cosillas…

¡¡¡Muchas Gracias!!!

Déjenos su comentario