Wordpress

Introducción al diseño con WPBakery

Por 05/12/2020enero 10th, 2021Comentarios no habilitados

Tener una página web visualmente atractiva es imprescindible. En este tutorial aprenderás lo básico del diseño con WPBakery.

WordPress destaca sobre la mayoría de los gestores de contenidos porque permite que los usuarios con pocos conocimientos de programación puedan tener su propia web.

Pero si hay un capítulo donde WordPress no es tan abierto es en el de las personalizaciones. Y no se mal entienda que WordPress es súper sencillo y abierto.

Aún cuando hay que admitir que para aquellos usuarios que no disponen los mínimos conocimientos de programación y diseño web. Sería una tarea difícil modificar a fondo el aspecto de algún theme o plantilla. Sin la ayuda de ninguna herramienta.

Ahí es donde entran en acción los plugins del tipo page builders o maquetadores visuales. De los que te hemos hablado in inmenso en: los mejores maquetadores visuales para WordPress.

Entre los maquetadores visuales más usados como: Beaver Builder, SiteOrigin Page Builder y Elementor era Visual Composer el más popular de todos.

Al punto que hace algunos años decir diseño web mediante de maquetadores visuales era igual a decir Visual Composer.

No es casual que Visual Composer llegará a ser el plugin de WordPress más descargado de todo codecanyon.

Ahora ese Visual Composer de otrora se ha transformado en WPBakery Page Builder.

¿Qué es WPBakery?

WPBakery Page Builder es, como su nombre lo indica, un  constructor de sitios del tipo maquetador visual.

Y a la fecha tiene  358.384 descargas. Lo que quiere decir que casi trescientos sesenta webmasters le confían las labores de diseño a este plugin. Sus realizadores dicen orgullosos que más de dos millones de sitios webs de WordPress han sido diseñados usando WPBakery Page Builder. Cantidad no despreciable.

El punto es que a la fecha existe poco (o más bien ningún) tutorial de WPBakery Page Builder en español.

Aquí en CursoWpress.com en esta entrega repasaremos alguna los principios básicos del diseño con WPBakery Page Builder así como algunas características del plugin.

Características de WPBakery Page Builder

Lo que nos gusta de WPBakery Page Builder

  • Liviano (aún cuando hemos probado maquetadores visuales más ligeros)
  • Viene listo para diseñar (no necesitas configurarlo) es el tipo instala, activa y diseña.
  • Incluye docenas de páginas prediseñadas con utilidades interesantes como: Call to actions, galerías, cajas de mensajes, etc.
  • El logo (todo hay que decirlo).

Cómo utilizar WPBakery Page Builder

Una vez arrancas el WPBakery Page Builder te percatas que parece cualquier otro maquetador visual. Es decir, te encuentras con las típicas herramientas para diseño web.

Quizás te interesa >>>  Los mejores complementos de revisión para WordPress

Lo que salta a la vista –y es algo que los desarrolladores de este plugin presumen con orgullo- es la opción de:

Backend Editor.

Backend

Pero no necesitas irte al Backend para diseñar tus páginas.

Diseñando en WPBakery desde el Frontend

Con este maquetador tienes tres oportunidades de diseño:

  1. Desde el frontend
  2. Desde el backend (como el editor de páginas de WordPress pero incorporando items de diseño del WPBPG)
  3. Y con la vista clásica (se accede mediante de backend).

En el frontend tienes dos oportunidades:

La primera, agregando un nuevo elemento (si deseas empezar a diseñar tu página desde cero).

La segunda, (y la más recomendada si deseas ahorrar tiempo) utilizando templates.

En la sección de templates las oportunidades son infinitas.

templates

Inserta el template que quieras (preferiblemente en una página en blanco) y empieza a modificar los items.

Como modificar los items con WPB

Sí estás familiarizado con los maquetadores visuales te resultará fácil empezar a diseñar usado WPBPB.

En caso sea tu primera vez con este tipo de herramientas te explicamos los principios básicos de su funcionamiento.

Para modificar un elemento debes ubicar el cursor sobre el mismo.

Al hacer esto aparecerán una serie de alternativas.

Como modificar los elementos con WPB

  1. Row Layout– Diseño de Fila:
  2. Column Settings – Configuración de Columna

Aún cuando hay opciones comunes a todos los items, opciones como:

  1. Drag to Move – Arrastrar para moverelemento
  2. Edit – Editar elemento
  3. Clone – Clonarelemento
  4. Delete – Borrar elemento

Una vez que sabemos esto fácilmente podemos modificar (o crear desde cero cualquier elemento). Los principios de diseño se aplican a todo.

Nosotros modificaremos esta sección, que bien puede ser utilizada para un call to action efectivo en alguna landing page.

antes

Lo primero será modificar el texto del header.

Ubicamos el cursor sobre el texto a modificar.

texto

Clicamos editar.

Se abrirán las alternativas

Modificamos el texto. Nosotros colocaremos:

CursoWpress.com

Guardamos los cambios.

Repetimos la operación con el siguiente elemento de texto. Guardamos los cambios.

Para modificar el botón clicamos editar botón.

Se desplegaran las opciones correspondientes a ese elemento.

Agregamos un texto. Y un link.

Podemos seleccionar el estilo del botón.

Nosotros elegimos el estilo clásico.

En el menú es factible además modificar: borde, colores, finalizado, tamaño. Y el color.

naranja

Para la ocasión elegiremos un naranja. Clásico, evidentemente. Guardamos los cambios y listo.

El procedimiento de diseño con WPBakery se puede resumir en

  1. Creas o modificas un elemento (en función de si trabajas desde cero o con platillas).
  2. Modificas el elemento atendiendo a tus necesidades.
  3. Guardas los cambios y disfrutas de tu diseño.

Por lo visto el diseño web es un asunto inmenso. Y esto es apenas el comienzo. Si deseas seguir aprendiendo puedes apuntarte al mejor curso online y en español de WordPress y conviértete en un experto.

error: Atención: Contenido protegido.