Categorías

WPBakery Page Builder vs. Elementor – Creación de secciones de héroes (paso a paso)

Los creadores de páginas de arrastrar y soltar son herramientas poderosas que dieron la oportunidad a los usuarios habituales de WordPress de crear páginas y diseños, similar a lo que solo los diseñadores web experimentados pudieron hacer hace una década. El proceso de diseño web se está volviendo más fácil de usar cada año y WordPress es la mejor plataforma para usuarios no expertos en tecnología.

""
Lo que encontrarás en este artículo:
  • Por qué es necesario tener un plugin de creación de páginas
  • La diferencia entre las interfaces de plugins
  • El proceso real de diseñar una sección con un creador de páginas
  • Los elementos disponibles para ambos plugins
[/caja] [toc] La web está cambiando rápidamente y los webmasters quieren un entorno flexible para cambiar sus sitios web con una fase similar. Tener un sitio web ya no es un trabajo de "configurarlo y olvidarlo", otro canal de contacto solo para completar la información en su tarjeta de visita. Hoy en día, la mayoría de los temas en el mercado vienen con algún tipo de creador de páginas visuales. Esto está dando a los propietarios la oportunidad de administrar fácilmente el aspecto de sus sitios web y actualizar las cosas rápidamente cuando sea necesario, sin contratar a un profesional.
""

¿Por qué necesitas un creador de páginas?

Echemos un vistazo a uno de los temas más populares en el mercado: los temas de Genesis Framework. Genesis Framework es valorado por su código limpio, velocidad, seguridad y facilidad de uso de SEO. Los temas son elegantes, limpios y completamente inflexibles. Si echas un vistazo a cualquier tema secundario de Genesis Framework, verás los mismos problemas con todos los temas: ¡están predefinidos! Por ejemplo, puedes amar el Essence Pro cuando veas por primera vez la demostración del tema. Digamos que decides que este es tu tema y lo compras. Lo que probablemente descubrirá más adelante es, excepto la complicada configuración para que se parezca a la demostración, es que no tiene absolutamente ningún control sobre sus diseños. ¡Te dan algunos widgets y eso es todo! Para Genesis Framework, incluso las tareas simples como agregar una búsqueda a su encabezado o cambiar los colores de su sitio se hacen tan complicadas y frustrantes incluso para los usuarios experimentados. Si desea presentar una nueva sección en su página de inicio, para enumerar nuevos servicios o cualquier otra cosa, se quedará atascado. Y esa es la realidad con la mayoría de los temas predefinidos "listos para la sección". [/caja]

""

WPBakery Page Builder

$46

Más información [/caja]

""

Elementor Pro

$49

Más información [/caja]

Elementor tiene una versión GRATUITA. Puedes crear la sección de héroes y algunos diseños más básicos, pero no tendrás acceso a los widgets y elementos premium. Ahora vamos a entrar en ello. Haré una de las secciones más utilizadas que casi todos los sitios web o páginas de destino tienen: la sección de héroes, con Elementary y WPBakery Page Builder.

Sección de héroes con WPBakery Page Builder

Esto es lo que sus visitantes ven primero, por lo que es mejor captar su atención con mensajes y diseño claros.

¿Cómo crear una sección de héroes con WPBakery Page Builder?

  • Asegúrese de haber deshabilitado las barras laterales y, preferiblemente, elija un diseño de ancho completo si tiene la opción en la configuración de su página / tema.
  • Cambie a "Editor de backend" (esto habilitará el creador de páginas en lugar del editor de texto clásico) y luego haga clic en el botón "Agregar elemento". Elija "Fila".

Nota: También puede usar el editor frontend de WPBakery Page Builder, pero me resulta más fácil trabajar en el backend. Agregar primero una fila vacía

  1. El diseño de columnas de fila
  2. Configuración de filas: desde aquí establece el fondo, el ancho, la configuración de los márgenes y los rellenos y más.
  3. Este es el estilo de la columna
  4. Desde aquí añades tus elementos (contenido)

La sección de héroes necesita una imagen de fondo. Dirígete a la configuración de la fila (2). En la pestaña 'General', establezca el estiramiento de la fila en 'Estirar fila', esto hará que su fila sea de ancho completo. Luego vaya a la pestaña 'Opciones de diseño'. Aquí puede elegir su imagen de héroe y establecer los rellenos de fila, esto es necesario para obtener suficiente espacio alrededor de sus elementos. En el menú desplegable, debajo de la miniatura, establezca la opción en'Cubrir'. Nota: Puedes jugar con los acolchados para obtener la altura deseada de tu fila. Elijo porcentajes, pero puedes usar valores px, em o rem. Haga clic en Guardar cambios. Configuración de fondo en WPBakery Page Builder

Nota:Más tarde, cuando agregué los encabezados, cambié el relleno superior al 10%.

[alerta-nota] Las opciones de fondo predeterminadas de WPBakery Page Builder son muy limitadas. Puede agregar superposiciones, efectos de paralaje, degradados y más con cualquiera de estos complementos adicionales. [/alert-note] Lo que debe obtener es una buena sección de ancho completo lista para algunos elementos adicionales.

Agregar texto y botón de llamada a la acción

WPBakery Page Builder viene con su propio elemento custom heading. Para este ejemplo, usaremos dos elementos de encabezado personalizados, el segundo desempeñará el papel de un subtítulo. Elija la fuente, el tamaño, el color y la alineación que desee en la pantalla de configuración del elemento. Clone el elemento para el subtítulo y simplemente cambie el texto y el tamaño a uno más pequeño. Haz clic en el pequeño signo más debajo de tu elemento para agregar una CTA. Seleccione el elemento 'Botón' y seleccione su configuración preferida (tamaño, color, url, etc.). Recuerde agregar un poco de relleno para darle a su CTA espacio para respirar: vaya a la pestaña 'Opciones de diseño' de su botón y agregue un acolchado superior de 15px. … y listo! Nuestra sección de héroes está lista para obtener algunos clics.

Sección Hero con Elementor Pro

Probemos el mismo ejemplo, pero esta vez usando Elementor Pro. La principal diferencia es que Elementor es solo un creador de páginas frontend, en el momento en que haga clic en el botón 'Editar con Elementor' será redirigido desde su backend. Ambos creadores de páginas tienen una interfaz y un enfoque de diseño muy diferentes. Lo primero es lo primero, desea deshacerse de cualquier barra lateral que pueda tener y ocultar el título de la página. Luego haga clic en el ícono púrpura más para agregar una nueva sección. Antes de agregar la imagen y el encabezado, hay algo de trabajo por hacer en la configuración de la fila. Al pasar el cursor sobre la sección, aparecen tres pequeños iconos en la esquina superior izquierda. Haga clic en el medio (los 6 puntos) y el panel de configuración aparecerá en el lado izquierdo. Para obtener una buena sección de ancho completo, active la opción Estirar sección y, en el menú desplegable Ancho de contenido, elija Ancho completo. En la pestaña Estilo, puede establecer el color de la fuente, la alineación y más. Vuelve a pasar el cursor y aparecerá otro pequeño icono en la esquina superior izquierda, que es donde colocaremos nuestra imagen y estableceremos los rellenos. Ten en cuenta que el fondo no aparecerá hasta que agregues que eres un elemento. Haga clic en el icono más y arrastre el widget Encabezado a su sección. Luego, nuevamente, arrastre otro encabezado para el subtítulo y finalmente arrastre un botón debajo de los dos. Haz clic en actualizar y tu sección de héroes estará lista. Aquí está el resultado final.

¿Elementor o WP Bakery Page Builder?

Si desea un creador de páginas de arrastrar y soltar front-end, Elementor es la mejor opción. También tiene una versión gratuita, que podría ser totalmente suficiente para algunos usuarios. También es más intuitivo y más fácil de acostumbrar. Si quieres ser creativo, creo que WP Bakery es el que deberías obtener. Combinado con algunos de los complementos premium en el mercado, se convierte en una herramienta poderosa para crear casi cualquier cosa.

Disclosure: Some of the links on the page may contain a ref code (affiliate links), that tells the other side that we have sent you. If you liked what we suggest and you make a purchase, we may receive a commission.