Tener una página web de forma visual atractiva es imprescindible. En este tutorial aprenderás lo básico del diseño con WPBakery.
WordPressWordPress es el software de blogs líder en el mundo, y es concretamente fácil de utilizar y adaptable. Con WordPress, es factible crear con éxito sitios web con la ayuda de funciones ya predefinidas, sin mucho esfuerzo, y para proporcionar contenido como texto, imagen y vídeo. No se requiere conocimiento de HTML. WordPress además facilita la gestión y el mantenimiento de contenidos extensos. Al mismo tiempo de su fácil manejo, más destaca sobre la mayoría de los gestores de contenidos debido a que posibilita que los usuarios con pocos conocimientos de programaciónConcepto de Programación¿Qué es la Programación?La Programación es el procedimiento al que se recurre para crear algún tipo de aplicación o software, para materializar un concepto o proyecto que requiere de la utilización de un lenguaje informático para poder llevarse a cabo. Es algo que está absolutamente ligado a la figura del programador, y que cada vez está cobrando más relevancia dentro del mundo del marketing.Decimos que tanto esta figura más puedan tener su propia web.
Pero si hay un apartado 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.
Aunque hay que admitir que para aquellos usuarios que no tienen 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 extenso 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 a través de de maquetadores visuales era igual a decir Visual Composer.
No es casual que Visual Composer llegará a ser el pluginConcepto de Plugin¿Qué es un Plugin?Un Plugin es un fragmento o componente de código hecho para ampliar las funciones de un programa o de una herramienta. En el ámbito del marketing digital, especialmente dentro del marketing de contenidos, es algo que se utiliza con mucha frecuencia dentro de entornos como WordPress, puesto que sirven al momento de contar con añadidos que hagan mucho más cómoda y completa la experiencia de más 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 utilizando 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 revisaremos 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 (aunque 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 usar WPBakery Page Builder
Una vez arrancas el WPBakery Page Builder te das cuenta que parece cualquier otro maquetador visual. Dicho de otra forma, te encuentras con las típicas herramientas para diseño web.
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.
Pero no necesitas irte al Backend para diseñar tus páginas.
Diseñando en WPBakery desde el FrontendEl frontend de una web describe la parte que el visitante puede ver. Incluye todo el contenido que se muestra y que es visible para el público o los usuarios que han iniciado sesión. Diseño del frontend El frontend es muchas veces llamado GUI (Graphical User Interface) porque es la interfaz que los visitantes pueden ver y utilizar. El frontend se usa principalmente para mostrar varios tipos de contenido y más
Con este maquetador tienes tres posibilidades de diseño:
- Desde el frontend
- Desde el backend (como el editor de páginas de WordPress pero incorporando items de diseño del WPBPG)
- Y con la vista clásica (se accede a través de de backend).
En el frontend tienes dos posibilidades:
La primera, agregando un nuevo elemento (si buscas comenzar a diseñar tu página desde cero).
La segunda, (y la más recomendada si buscas ahorrar tiempo) usando templates.
En la sección de templates las posibilidades son infinitas.
Inserta el template que desees (preferiblemente en una página en blanco) y comienza a modificar los items.
Como modificar los items con WPB
Sí estás familiarizado con los maquetadores visuales te resultará fácil comenzar a diseñar usado WPBPB.
En caso sea tu primera vez con este tipo de herramientas te mostramos 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 opciones.
- Row Layout– Diseño de Fila:
- Column Settings – Configuración de Columna
Aunque hay opciones comunes a todos los items, opciones como:
- Drag to Move – Arrastrar para moverelemento
- Edit – Editar elemento
- Clone – Clonarelemento
- Delete – Quitar 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 usada para un call to actionUna campaña call to action (“llamada a la acción”) es una invitación dirigida al público objetivo con intención de provocar una reacción específica. Es decir, generar Conversión. Un call to action puede aparecer en forma de texto, de imagen, o como una combinación de ambas. El CTA es muchas veces un prerrequisito para que el usuario interactúe con el sitio. Definición Se considera un anuncio “call to action” (CTA) a más efectivo en alguna landing pageUna landing page, o página de aterrizaje, es una página que contiene información y se crea específicamente para una campaña publicitaria. Las landing pages son fundamentales para las campañas publicitarias en cualquier ámbito del Marketing Online como, por ejemplo, el E-Mail Marketing, el Display Marketing y el SEO. La característica principal de las landing pages es la presentación original del contenido y del diseño que logran que la campaña publicitaria más.
Lo primero será modificar el texto del headerConcepto de Header¿Qué es el Header?El Header, encabezado en español, es una definición que se usa en el terreno del diseño y la programación web para referirse a la parte de arriba de una página. Se trata del primer punto a ver por cualquier usuario que entra en un portal web, por lo que cuenta con una responsabilidad enorme y ha de contener la carga informativa esencial para mostrar la más.
Ubicamos el cursor sobre el texto a modificar.
Clicamos editar.
Se abrirán las opciones
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 enlaceConcepto de Dominio¿Qué es un Enlace?En Internet, un link, además conocido como enlace o hipervínculo, es cualquier texto o imagen que se encuentra en una página web y en la que el usuario puede pulsar o clicar para ser dirigido a otro contenido distinto. Es el principal medio de “desplazamiento” en la red, puesto que se encuentra presente en prácticamente cualquier portal que visites a día de hoy, inclusive en más.
Podemos elegir el estilo del botón.
Nosotros elegimos el estilo clásico.
En el menú es viable al mismo tiempo modificar: borde, colores, terminado, tamaño. Y el color.
Para la ocasión elegiremos un naranja. Clásico, obviamente. Guardamos los cambios y listo.
El proceso de diseño con WPBakery se puede resumir en
- Creas o modificas un elemento (en función de si trabajas desde cero o con platillas).
- Modificas el elemento atendiendo a tus necesidades.
- Guardas los cambios y disfrutas de tu diseño.
Evidentemente el diseño web es un asunto extenso. Y esto es apenas el comienzo. Si necesitas seguir aprendiendo puedes apuntarte al mejor curso online y en español de WordPress y conviértete en un experto.
