WordPress es un CMS muy popular en todo el mundo debido a su interfaz simple, temas altamente personalizables y una variedad infinita de plugins poderosa. Ha simplificado la creación, el desarrollo y la gestión de sitios web, incluso para los usuarios más aficionados.

Hoy, y gracias a WordPress, ya no es necesario tener conocimientos específicos para crear páginas web atractivas. Sin embargo, eres peut ser ya me topé con un sitio web que ofrece un diseño realmente increíble, y probablemente te hayas preguntado: ¿Cómo se hizo?

Desafortunadamente, si eres un principiante o aficionado, no puedes hacer mucho, incluso con WordPress, ya que para modificar tu tema, necesitas cierto grado de experiencia en HTML, CSS, PHP y varias otras habilidades dependiendo de la naturaleza de tu tema, pero también de tu proyecto u objetivo.

Sin embargo, incluso si es un codificador experimentado, ciertamente necesita una herramienta que le permita ahorrar tiempo y calidad en el resultado final.

Heureusement, le plugin WordPress « WPBakery Page Builder Anteriormente conocido como " Visual Composer » Proporciona una solución a este problema. Con este último, incluso la mayoría bloggers principiantes pueden crear páginas con un aspecto completamente único para su sitio web.

Con este complemento puedes crear:

  • Páginas de destino atractivas (página de inicio)
  • Desde páginas de ventas hasta aspecto profesional
  • Sitios de "exhibición" para su empresa
  • Módulos de páginas para su entrenamiento
  • poco

En mi opinión, es la mejor herramienta de formato (o diseño) en Internet. Especialmente para usuarios de WordPress.

En este tutorial, por lo tanto, le mostraré cómo darle un aspecto único a su sitio web (O blog) con el plugin Visual Composer.

Entonces…

Cómo instalar y configurar Complemento WPBakery Page Builder

WPBakery Page Builder es un plugin premium que puedes comprar Codecanyon : La mejor plataforma de ventas en los complementos de Internet.

BUENO. Una vez que haya comprado y descargado este complemento de diseño en WordPress, todo lo que tiene que hacer es instalarlo y activarlo.

Luego comenzaremos haciendo algunos ajustes básicos. Para hacer esto, navegue a la ubicación "Configuración >> Visual Composer » en el salpicadero.

Configuración general

ajustes generales del dial visualLa primera pestaña (ajustes generales), Permite cambiar:

  • El contenido en el que visual componer estará disponible. Usted puede verificar los artículos (post) y / o páginas (página)
  • Las diferentes reglas deaccès diferentes roles Con esta opción puedes determinar lo que cambia. Se mostrarán los diferentes roles disponibles. Deberá hacer clic en cada uno para verificar los elementos a los que (el papel) Tendrá acceso. Tiene la opción de prohibir el uso de " visual compositor ”a los usuarios de un rol específico.
    activar el editor en el constructor de páginas WPbakery
  • Habilitar o deshabilitar elementos sensible
  • Definir subconjuntos para las fuentes de Google

selección de roles de wpbakeryOpciones de diseño

En las opciones de diseño, tiene la posibilidad de modificar la apariencia visual predeterminada de los distintos elementos del " visual compositor ". Antes de usarlo, asegúrese de haber marcado la opción « Use opciones de diseño personalizado ».

configuración de CSS

Estas opciones te permitirán definir el color que se aplica a todos los elementos. 

  • Los " CSS personalizado »Le brinda la oportunidad de personalizar aún más cada elemento, solo los desarrolladores pueden saber qué es.
  • La pestaña « Licencia del producto »Le permite activar su plugin para recibir actualizaciones automáticas
  • La pestaña « códigos cortos bienes Se trata esencialmente de desarrolladores.

Bien, ahora vamos a crear una página web personalizada con Compositor visual.

Cómo crear una página personalizada con visual compositor

Para crear fácilmente páginas web personalizadas, puede elegir entre el editor del " back office ", Es decir, modifica el sitio desde su panel de WordPress, donde el de" oficina ".

redactor el front-end al editor-backend

Si está utilizando Gutenberg, verá un botón "Editor de página" en la barra de tareas superior.

editor visual editor de paneles gutenberg

La ventaja con el editor de Oficina de recepción es que puedes editar en vivo tus páginas y ver cómo aparecen los diferentes elementos en tu tema.

Con el editor de back office

Para acceder al editor del " back office », Te invito a hacer clic en« Editorial Back-Office ". Puede volver al editor visual de WordPress en cualquier momento haciendo clic en " El modo clásico ". Pero creo que no será necesario, por lo que este formato de página web del complemento está completo.

Una vez en el editor de back-office, puede elegir un diseño global que se aplicará a la página.

Las actualizaciones página varían según lo que planeas hacer con la página. Entonces puedes elegir « aterrizaje página » para crear una página de inicio, "Lista de servicios" para una página que muestra servicios, etc. Con experiencia incluso podrás crear apuestas en paginas diseñado a medida muy profesional.

Cualquiera que sea la elección de su configuración página, la presentación de los elementos es similar en todos estos últimos. Puedes agregar un nuevo elemento en cliquant sur "+" en la parte superior de la meta caja « Editor de visual », O agregue un modelo haciendo clic en el icono "Modelo".

En cada línea, puedes (de izquierda a derecha) :

  • Mover la línea
  • Administrar columnas en la fila
  • Añadir una nueva columna

interfaz del constructor de páginas wpbakeryHay otras opciones disponibles a la derecha del cuadro. Estas opciones te permiten (de izquierda a derecha) A:

  • reducir la línea
  • editar una fila
  • duplicar una fila
  • eliminar una fila

diseño de wpbackeryEn el medio de cada columna, puede agregar un elemento antes, editar una columna o eliminarlo.

sección de opciones wpbackerysección de opciones wpbackery

Recursos recomendados

Aquí hay algunas extensiones de compositor visual que recomendamos encarecidamente:

1 - Cómo administrar columnas

En la pestaña de administración de columnas, puede elegir la cantidad de columnas que desea agregar a la fila. Para comprender los diferentes modelos de columna, sepa que cada fracción corresponde al ancho que ocupará la columna. Por mucho que una plantilla tenga fracciones, muchas veces la página tendrá columnas.

Por supuesto, hay disponibles diferentes plantillas de columnas de 11, pero puede crear tantas como desee haciendo clic en el enlace "Personalizado" justo debajo de la lista de columnas.

Por ejemplo, para mostrar una sección de la página con columnas 2 de igual ancho, debe elegir (O añadir) "1 / 2 + 1 / 2". 

Las columnas se mostrarán en su blog y sus anchos se distribuirán proporcionalmente a las dimensiones del tema. Una columna puede contener tantos elementos como sea posible, por lo que no tiene límites en este nivel.

diseño de la sección wpbakery

Los diferentes elementos se pueden mover a cualquier columna.

cuadro de texto de wordpress wpbakery en movimientoAl pasar el cursor sobre cada elemento, podrá acceder a sus opciones, en particular el botón que permite:

  • movimiento elemento
  • modificador elemento
  • dupliquer elemento
  • supprimer elemento

Opciones-los-elementos

2 - Cómo agregar elementos

Tiene la opción de personalizar cada columna con los elementos propuestos por " Visual Compositor ". Para agregar un elemento, haga clic en el botón "+" en una columna específica o en el botón "+" plugin de menú principal.

agregar un elemento wpbakery
Cuando una columna está vacía (ne contiene sin contenido)ella tiene un botón "+" al interior.
 Para agregar un video, por ejemplo, haga clic en este botón y elija el elemento de video.

para añadir un vídeo

Al hacer clic en él, se abrirá una nueva ventana. En esta ventana, debe proporcionar el título, el enlace al video y una clase adicional (que no es obligatorio). Cuando haya terminado de ingresar la diversa información sobre su video, no olvide guardar sus cambios.

configuración de video wpbakerySu video estará disponible en el editor de back office. Guarde sus cambios una vez más. Ahora puede verlo simplemente haciendo clic "vista previa".

agregar video wpbakery wordpressEl proceso para agregar un elemento es el mismo para todos los demás, con algunas excepciones. La información a completar puede variar según los elementos. 

Al seleccionar el elemento de texto, por ejemplo, encontrará un editor visual clásico (el disponible al escribir artículos o páginas), sino también una opción que le permite agregar una animación durante la visualización del elemento. Por lo tanto, este último puede pasar de una posición a otra, dependiendo de su configuración.

configuración del bloque de textoLo mas interesante con esto plugin, es que podrás crear barras laterales si su tema no lo hace, por ejemplo. Para hacer esto, haga clic en el botón Agregar (" + »)y elija el elemento " Comentarios de WP Más reciente "," Facebook como " y por fin " Categorías Wp ".

Ahora cree esta plantilla de columna personalizada 1 / 3 + 2 / 3 »O cualquier otro y agregue el elemento barra lateral en la columna de la izquierda o en la de la derecha. No importa porque todo depende de qué tan ancha quieras darle a tu barra lateral creada bajo esta extensión de diseño que en Visual Composer.

configuración de la columna wpbakery

Verá una nueva columna vacía a la derecha, agregue un nuevo elemento de su elección (Te recomiendo que añadas un texto sencillo). Ahora guarde la página y vaya a la vista previa para ver el resultado de este ejercicio.

3 - Cómo guardar y reutilizar una plantilla de página

Es posible guardar la plantilla de su página y usarla más tarde. Me encanta esta opción porque le ahorra pasar horas intentando copiar una plantilla de una página. Aquí todo se hace con un clic. Sí, escuchaste bien, EN UN CLIC ... o en dos 🙂

Para guardar una plantilla, haga clic en el icono de plantillas. En la ventana que aparecerá, ingrese el nombre de su modelo en el " Guardar el diseño actual como una plantilla », Luego haga clic en« Guardar plantilla ".

Importante: Debe hacerlo en la página que desea guardar como plantilla y no en una página en blanco.

registrar un modelo de wpbakery

Es de la misma forma que encontrarás los diferentes modelos que guardaste, más abajo en la misma ventana en la sección "Cargar un modelo".

mis modelos wpbakeryTodo lo que tienes que hacer en este caso es crear una nueva página, luego, ir a las plantillas y elegir la que quieres darle a tu página.

Con el editor de front-office

El editor de la oficina principal tiene la ventaja de le permite editar su página en tiempo real. En otras palabras, le permite ver cómo se verán todos los cambios que realice en su sitio con Visual Composer. La ventaja de este enfoque es que no tiene que trabajar a ciegas como lo hace con el editor de páginas de back-office.

Puede cambiar de una opción a otra en cualquier momento (Back office Office o borde).

El editor de front-office no es tan diferente del editor de back-office, en que hay una barra utilisateur idénticas, pero también todas las opciones del editor de back office son las mismas que en el editor de front office.

barra de herramientas wpbakerySin embargo, se han agregado cinco botones nuevos, que incluyen:

  • Activación o desactivación de guías
  • El emulador, que te permite ver cómo se verá tu blog en diferentes dispositivos.
  • El botón de vuelta a la oficina de apoyo
  • El botón guardar cambios
  • El botón de salida visual compositor

opciones de wpbakeryCada elemento de una página se puede modificar, podrá ver las opciones disponibles colocando el cursor sobre cada elemento. El botón en forma "TOCAR", le permitirá mostrar más opciones para un elemento.

Opciones-los-elementos-de-la-oficina delante

Sus primeros pasos pueden ser difíciles, pero con la práctica logrará un pagina de inicio como este.  Si lo desea, antes de obtener el plugin, Usted puede probarlo gratis (inicio de sesión, el usuario: demo, contraseña: demo).

Esto es lo que pude lograr en 1 minuto en casa. Con la práctica, puede lograr resultados muy satisfactorios. Y si necesita ayuda para construir su sitio web de WordPress con este poderoso complemento, no dude en contacta con el equipo de BlogPasCherquien estará encantado de realizar sus proyectos.

Espero que este tutorial íntegramente en francés te ayude a dar tus primeros pasos con el plugin « Visual Composer ". Si tienes un problema, nosotros (o asistencia) Estaremos encantados de ayudarte. No lo olvide: una hermosa página web convierte a los clientes más curiosos.

Extensiones recomendadas

Aquí hay algunas extensiones de compositor visual que recomendamos encarecidamente:

Descubre más complementos en Codecanyon

Comparte este tutorial con los necesitados.