() translation by (you can also view the original English article)
Escribir código HTML, CSS y PHP para construir o personalizar un sitio de WordPress puede llevar mucho tiempo, incluso para un desarrollador web experimentado. Probablemente es por eso que gran parte de la comunidad de WordPress ha pasado a usar plugins de construcción de páginas en su lugar.
El Constructor de Páginas de WPBakery (antes llamado Visual Composer) es el plugin de construcción de páginas de WordPress más flexible y rico en características que puedes tener en tus manos en el 2020. Es compatible con casi todos los temas modernos de WordPress, y no necesitas conocimientos de programación para poder usarlo. De hecho, mientras lo uses, ¡ni siquiera tendrás que teclear ningún código corto!
Con los elaborados pero intuitivos editores que ofrece WPBakery Page Builder en el front-end y el back-end, la creación de páginas para tu sitio de WordPress a menudo no implica más que unos pocos clics y operaciones de arrastrar y soltar. En este tutorial de Visual Composer, te mostraré cómo agregar el WPBakery Page Builder a tu instancia de WordPress y te presentaré todas sus importantes características.
Requisitos previos
Para poder seguir este tutorial de WPBakery Page Builder, necesitarás:
Además, para entender mejor cómo usar Visual Composer y por qué deberías usar WPBakery Page Builder en lugar de todos los otros plugins de construcción de páginas disponibles hoy en día, te sugiero que leas el siguiente artículo:
1. Instalar WPBakery Page Builder
WPBakery Page Builder es un plugin de WordPress de primera calidad. Está disponible en CodeCanyon, así que entra a tu cuenta de Envato y compra una licencia para él. Todavía es conocido por su antiguo nombre: Visual Composer.
Después de comprarlo, podrás descargar un archivo ZIP que contiene varios archivos relacionados con el plugin.
Extrae el archivo ZIP y busca un archivo llamado js_compositor.zip. Este es un archivo de plugin, que debes subir a tu servidor de WordPress. Así que entra en tu panel de administración de WordPress y ve a Plugins > Añadir nuevo. Luego haz clic en el botón Subir Plugin y selecciona js_composer.zip.
Presiona el botón Instalar ahora para iniciar la instalación.
Una vez que la instalación se haya completado, presiona el botón Activar Plugin. Tan pronto como lo hagas, serás llevado a la pantalla de bienvenida de WPBakery Page Builder.
2.Configurar el plugin
Aprender a usar WPBakery Page Builder es fácil. El plugin es extremadamente personalizable, ofreciendo docenas de opciones de configuración que puedes ajustar a tus requerimientos. Presiona el botón Configuración en la pantalla de bienvenida para echarles un vistazo.
El plugin tiene una configuración por defecto bien pensada que es lo suficientemente buena para la mayoría de los casos de uso. Por ejemplo, en la pestaña de Ajustes Generales, puedes ver que admite un diseño responsivo de forma predeterminada.
El plugin también intenta aplicar varias optimizaciones para asegurar que las páginas que crees con él tengan tiempos de carga mínimos. Por ejemplo, solo utiliza el subconjunto de scripts Latin de las fuentes de Google por defecto. Para admitir otros scripts, solo tienes que cambiar la opción Google fonts subsets.
En la pestaña Administrador de roles, puede que notes que este plugin solo está disponible para las páginas de tu sitio de WordPress. Si quieres que también esté disponible para tus publicaciones, selecciona Personalizar en la lista Tipos de posts y habilita la opción Post.
Después de hacer los cambios, desplázate hacia abajo y haz clic en el botón Guardar cambios.
Por último, si deseas personalizar la apariencia de los elementos de contenido de WPBakery Page Builder's, cambia a la pestaña Opciones de diseño y marca el campo Usar diseño personalizado. Una vez que lo hagas, podrás cambiar los colores, márgenes y anchos predeterminados que utiliza el plugin.
3.Uso del editor desde el Back-end
Este es un paso clave en este tutorial de Compositor Visual. El Constructor de Páginas de WPBakery viene con dos poderosos editores: un editor de back-end y un editor de front-end. Ambos son accesibles solo dentro de una página o un post. Por lo tanto, por ahora, te sugiero que crees una nueva página yendo a Páginas > Añadir Nueva.
En la interfaz de creación de páginas, podrás elegir qué editor quieres usar. Empieza haciendo clic en el botón "Backend Editor" para abrir el editor del back-end.
Usando este editor, puedes añadir fácilmente una variedad de elementos de uso común a la página. El Constructor de Páginas de WPBakery ofrece elementos simples como bloques de texto, imágenes y separadores. También ofrece otros más avanzados como los botones de "Me gusta" de Facebook, Google Maps, gráficos y carruseles animados.
Para facilitar el acceso, los elementos se dividen en cuatro categorías diferentes: contenido, social, estructura y widgets de WordPress.
Como su nombre indica, los elementos de contenido son elementos que normalmente se utilizarían para crear el contenido de una página o un post. Del mismo modo, los elementos sociales son aquellos que facilitan a los usuarios compartir tu página en las plataformas sociales. Los elementos estructurales, por otro lado, son para usuarios más avanzados, que se sienten cómodos escribiendo código. Permiten añadir directamente HTML y JavaScript en bruto a tu página.
Para añadir un elemento, todo lo que necesitas hacer es presionar el botón de Añadir Elemento y seleccionar el elemento deseado.
Alternativamente, puedes presionar el botón Agregar bloque de texto para agregar directamente algún texto a la página.
Ten en cuenta que si no estás satisfecho con el aspecto predeterminado de un elemento, siempre puedes modificar sus estilos cambiando a la ficha Opciones de diseño.
Después de añadir algunos elementos, puede que notes que cada elemento tiene una barra de herramientas asociada a él, que contiene algunos botones. Estos botones muestran iconos intuitivos y permiten realizar operaciones importantes como arrastrar y soltar el elemento para cambiar su ubicación, duplicarlo, borrarlo o editar su contenido.
4. Uso del editor front-end de WYSIWYG
El editor back-end es ideal para páginas largas y complejas que contienen muchos elementos. Mientras lo usas, debes presionar el botón de vista previa cuando quieras ver cómo se verá tu página cuando se publique.
Si decides usar el editor de front-end WYSIWYG, podrás trabajar con la apariencia final de tu página desde el principio. Siempre puedes cambiar sin problemas de un editor a otro, así que desplázate hacia arriba y pulsa el botón editor del Frontend para abrir el nuevo editor.
En este editor, verás las barras de herramientas asociadas a un elemento solo cuando pases el cursor por encima del elemento. Estas barras de herramientas y la funcionalidad que ofrecen son muy similares a las que ofrece el editor de fondo.
Además, el editor de front-end permite ver cómo se ve la página en varios tamaños de pantalla. También te permite continuar editando la página en cualquier tamaño de pantalla que prefieras
5.Uso de plantillas
Otro aspecto importante para aprender a usar WPBakery Page Builder es el uso de plantillas. WPBakery Page Builder te permite convertir cualquier página o post que crees con ella en una plantilla. Al utilizar esta función, puedes minimizar la cantidad de trabajo repetitivo que haces mientras creas páginas para tu sitio de WordPress.
Para guardar el diseño actual de tu página como una plantilla, abre el diálogo de Plantillas, dale un nombre a la plantilla y presiona el botón Guardar Plantilla.
No estás limitado a trabajar con tus propias plantillas. Este plugin viene con una gran biblioteca de plantillas, que se actualiza regularmente. Para abrir la biblioteca, cambia a la pestaña Biblioteca de plantillas y pulsa el botón Acceder a la biblioteca.
La biblioteca, como puedes ver, contiene una amplia variedad de plantillas de diseño de primera calidad. Todas ellas están disponibles para ti de forma gratuita. Sin embargo, debes activar tu licencia de WPBakery Page Builder antes de poder usarlas.
A grandes rasgos, las plantillas pueden dividirse en dos categorías: plantillas para páginas enteras y plantillas para partes individuales e independientes de una página. Por ejemplo, la plantilla de la página "About Page" te ayuda a crear una página completa "sobre nosotros". Pero la plantilla de la sección héroe solo crea una sección héroe para ti.
Los mejores complementos y extensiones de WordPress para WPBakery Page Builder en CodeCanyon para el 2020
Espero que hayas disfrutado del tutorial de WPBakery Page Builder que compartí contigo. Ahora ya sabes cómo usar WPBakery Page Builder. A continuación, déjame decirte dónde conseguir los mejores complementos profesionales de WPBakery para WordPress, para que puedas crear un sitio web increíble en una fracción del tiempo.
Explora cientos de los mejores complementos de WordPress jamás creados disponibles en CodeCanyon de Envato Market. Con un pago único y barato, puedes comprar uno de estos plugins, extensiones y add-ons de WordPress de alta calidad.
Mientras que WPBakery es un completo constructor de páginas, los complementos y extensiones con muchas características te permitirán agregar una amplia variedad de características a tu sitio web, como por ejemplo:
- elementos únicos
- características extra para WooCommerce
- cajas de contenido
- y mucho más
Sabes cómo usar Visual Composer. Pero estas características y funcionalidades adicionales son imprescindibles para tu sitio web de WordPress, así que ¡asegúrate de revisar nuestra selección a continuación!
5 complementos principales del constructor de páginas de WPBakery
Aquí están algunos de los mejores complementos y extensiones de WPBakery disponibles en CodeCanyon para el 2020.
1. Últimos complementos para el constructor de páginas de WPBakery
Este es nuestro complemento más vendido para el Constructor de Páginas de WPBakery. Con más de 60.000 ventas, la gente lo adora por sus fantásticas características:
- diseño de respuesta completa
- elementos únicos y flexibles
- código limpio
- Más de 9 demostraciones de página completa
- fondos de paralaje y de video
- Animaciones CSS3
- tutoriales de vídeo
- el mejor servicio de atención al cliente
2. Composium-WP Extensiones del Constructor de Páginas de Bakery Addon
Composium es otro complemento de las extensiones de WPBakery más vendidas. Incluye más de 150 elementos premium para el Constructor de Páginas de WPBakery e impresionantes características como:
- diseño de respuesta completa
- icono del administrador de fuentes
- Administrador de fuentes de Google
- constructor de plantillas y widgets
- sistema modular
- Integración de WooCommerce
- código limpio y eficiente
- soporte rápido
3. Massive Addons para WPBakery Page Builder
Massive Addons es compatible con el 99% de los temas de WordPress que soportan Visual Composer 4.7+. Y este popular complemento de WPBakery acaba de lanzar una actualización con muchos elementos interesantes:
- contenedores preestablecidos
- 35 plantillas de páginas + 17 nuevas plantillas
- Soporte de WooCommerce
- instalación de la plantilla con un solo clic
- Más de 1.700 preajustes predefinidos
4. WooCommerce Page Builder
Este complemento de WPBakery fue creado para ayudarte a personalizar tu sitio web de WooCommerce. Con este complemento, podrás crear cualquier diseño para una página de WooCommerce fácilmente, sin necesidad de tener conocimientos de codificación. Es un increíble plugin de WPBakery porque es:
- fácil de instalar
- fácil de usar
- compatible con cualquier tema
- apoya los shortcodes de WooCommerce
5. WPBakery Page Builder Clipboard
El portapapeles del Constructor de Páginas WPBakery te permite copiar/cortar y pegar elementos de contenido individuales o una pila de elementos de contenido a través de las páginas, sin salir nunca del back-end del Constructor de Páginas WPBakery.
Otra gran característica es que puedes transferir portapapeles entre sitios y dominios usando la función de exportación/importación. También puedes crear plantillas de portapapeles para ahorrar mucho tiempo.
Conclusión
En este tutorial de WPBakery Page Builder, aprendiste a descargar, instalar y configurar WPBakery Page Builder. También viste lo fácil que es crear páginas y posts para tu sitio de WordPress con él. Para aprender más sobre cómo usar Visual Composer, consulta su documentación.
Al crear el plugin Visual Composer, uno de los primeros constructores de páginas de arrastrar y soltar para WordPress, el equipo de WPBakery cambió significativamente la forma en que la gente usa WordPress. A finales de 2017, cambiaron el nombre de su plugin WPBakery Page Builder. Hoy, tiene más de 350.000 usuarios y potencia más de 2 millones de sitios web.
El plugin también tiene un rico ecosistema construido a su alrededor. Debido a que es fácilmente extensible, hay numerosos complementos de terceros disponibles para él.
Si eres una persona que utiliza WordPress regularmente, CodeCanyon tiene muchos más plugins de WordPress que pueden cambiar fundamentalmente la forma en que desarrollas y administras tus sitios de WordPress. Aprende sobre los más importantes aquí:
