Cómo construir una página de destino gratuita con WordPress y Beaver Builder

Esta es una contribución al Ponet Sahalot. Si desea crear su propio sitio web, una página de destino es un buen lugar para comenzar. Y con WordPress, tienes un puñado de posibilidades. Enumeré algunos de ellos hace algún tiempo (aquí). Pero desde entonces, he visto mucho desarrollo en el campo de los complementos para los constructores y la construcción de sitios web sin código en general. Así que exploremos algunos de estos hoy. Lo que está a punto de leer es un tutorial práctico sobre cómo construir una maravillosa página de destino con Beaver Builder + nuestro propio tema Hestia + algo llamado Beaver Builder Powerpack Add-on, todos los cuales son productos gratuitos (usamos “Lite”).

La mejor parte, como muchos dirían, es que no tiene que tener conocimiento de codificación para continuar con él. Aquí está Punet Sahalot que explica todo el proceso: cómo construir una página de destino gratuita con WordPress y Beaver Builder construyendo una página de destino o incluso construir un sitio web completo no es tan difícil hoy. Beaver Builder, por ejemplo, es una herramienta muy poderosa cuando se trata de esto. Esta herramienta de deslizamiento y colocación es fácil de usar e incluso un principiante puede usarla para crear una página de destino completa en unos minutos.
Sin embargo, aunque Beaver Builder tiene ciertas características excelentes, muchas de ellas están limitadas en la versión simple. Entonces, para compensar esto, utilizaremos un complemento adicional: Beaver Builder Powerpack Add -on. Esta herramienta aumenta los poderes de Beaver Builder al agregar más módulos y plantillas de página. Además, cómo construiremos una página de WordPress de WordPress en este artículo mediante el uso del tema de Hestia. Es un tema bien diseñado y ofrece una buena personalización en todas partes, pero especialmente en las áreas de encabezado y navegación del sitio, algo que será bastante útil más adelante.
Al final de este artículo:

Tendrás una buena comprensión de Beaver Builder,
Sabrá cómo usarlo con el tema de Hestia, así como cualquier otro tema que pueda tener,
Podrá crear una página de destino súper atractiva,
Descubrirá nuevas herramientas potentes, como Beaver Builder Powerpack Add-On.
Cómo crear una página de destino gratuita con #wordpress y @BeaverBuilder
Haga clic en Tweet
Ahora, para este tutorial sobre cómo construir una página de destino de WordPress, usaré las versiones simplificadas (gratuitas) de los tres productos (Hestia, Beaver Builder y Beaver Builder Powerpack Add-On).
Subir
Lo que construimos exactamente antes de comenzar, para asegurarnos de que estamos en la misma página y aclarar lo que crearemos con la ayuda de Beaver Builder. Nuestro objetivo principal aquí es hacer un sitio web que se vea tan similar como wpbeaveraddons.com- La página inicial del complemento Beaver Builder Powerpack, del que pertenezco. Creo que el diseño es universal y tiene suficientes elementos individuales para educarnos sobre cómo usar Beaver Builder de manera eficiente. Por supuesto, el diseño que construimos es universal, por lo que puede usarlo para cualquier tipo de producto o servicio.
Puede cambiar fácilmente la página si lo desea, y la mejor parte es que puede hacerlo sin llegar a una sola línea de código.
Subir

Las herramientas que necesita y dónde encontrarlas para lograr esta página de destino, usaremos:
Autor de Hestia (I): Temoisle
96% Evaluaciones 3,085.688 Descargas Versión 3.0.20
Más información
Hestia.3.0.20.zip Tema de vista previa Última actualización: 14 de diciembre de 2021
96% Evaluaciones 3,085.688 Descargas Versión 3.0.20
Página de tema de WordPress.org
Mapa
WordPress Page Builder – Beaver Builder (I): Beaver Builder Team
Evaluaciones del 96% más de 200.000+ WP 4.6+ las instalaciones requieren
Más información
Beaver-Builder-Lite-Vversion.2.5.1.1.zip Versión actual: 2.5.1.1 Última actualización: 24 de enero de 2022
Evaluaciones del 96% más de 200.000+ WP 4.6+ las instalaciones requieren
Página de complemento de WordPress.org
WordPress Page Builder – Beaver Builder
Powerpack Lite para Beaver Builder Autor (i): complementos de Beaver
Evaluaciones 100% más 10,000 instalaciones WP 4.6+ requiere
Más información
Powerpack-addon-for-beaver-builder.zip versión actual: 1.2.9.3 Última actualización: 10 de enero de 2022100% WP 4.6+ Instalaciones requiere
Página de complemento de WordPress.org
Powerpack Lite para Beaver Builder
Probablemente podríamos crear una página de destino más rica con las versiones Pro de los tres productos anteriores. Sin embargo, quiero que comprenda el poder que tienen estas herramientas antes de que se vea obligado a gastar dinero, por lo que pensé que el uso de versiones gratuitas sería el mejor movimiento aquí.
Subir
Comprender Beaver Builder Antes de crear la página, primero para comprender algunos elementos básicos. Así es como Beaver Builder organiza el contenido de la página:
a) Las filas de las filas construyen la apariencia de la página. Puede dividir cada fila en columnas y luego agregar diferentes elementos (módulos) a esas columnas. Cómo agregar y cambiar una fila:
Paso 1: haga clic en el botón Agregar contenido y luego en el botón Turn -look.
Paso 2: Tire y coloque el giro en la página.
Paso 3: Una vez que haya hecho esto, haga clic en el icono de llave pequeña en la esquina. Esto le permitirá editar la configuración de la fila, como ancho, altura, capacidad de respuesta, antecedentes, etc.
b) Los módulos de módulos son los elementos básicos de la página en sí. Son los elementos que dibuja y coloca en la página. Pueden ser cualquier cosa, que van desde títulos, texto, imágenes, diapositivas, temporizador y más.
Cómo agregar y modificar un módulo:
Paso 1: haga clic en el botón Agregar contenido y luego en la opción Módulo.
Paso 2: Tire y coloque un módulo en la página.
Paso 3: Después de haber hecho esto, se mostrará la configuración del módulo. Esto le permitirá editar la configuración de un módulo en particular. La ventana Configuración varía de la forma al camino. Esto resume los elementos básicos del modo de trabajo con Beaver Builder. Simple, ¿verdad?
Subir
preparar
Debido a que construiremos una página de destino con WordPress y Beaver Builder y también asumiremos que es la primera vez que use esta última, para aprender a lanzar Beaver Builder con un ancho completamente activado.
Para hacer esto, primero haga clic en Agregar una nueva página desde el tablero:
Ahora, entregue un nombre a su página y, en los atributos de la página, seleccione el ancho completo del generador de página como plantilla. Luego haga clic en el botón Builder de página para activar Beaver:
La razón por la que usamos la plantilla de ancho completo del constructor de páginas es que el ancho completo suele ser el mejor tipo de apariencia para una página de destino estándar. Las barras laterales tienden a distraer al usuario del contenido principal y no queremos que esto suceda en nuestra página de destino.
Subir
¡Vamos a empezar! Aquí, le mostraré cómo construir una página completa de WordPress de WordPress, paso a paso, usando Beaver Builder con PowerPack. Si prefiere comenzar con una página de destino prepociada, puede obtener una con las versiones de Pro Ara Beaver Builder. Esto puede ahorrarle algo de tiempo. Para obtener aún más plantillas de página, también puede comprar Beaver Builder Powerpack Add-on Pro. Hay más de 250 plantillas. Consulte la lista completa si está interesado.

Subir

Paso 1: La sección de héroes en primer lugar, necesitaremos una sola fila de columna en la parte superior de la página.
Cambié mi apariencia a todo el ancho (haremos esto para todas las líneas).
Ahora para el fondo; Cambie la opción de fondo de ninguno para graduar y seleccione sus colores. Haga clic en Guardar para guardar sus cambios:
A continuación, necesitamos un título. Para hacer esto, agregue un módulo de encabezado inteligente de los módulos PowerPack. Continúe e ingrese el título y el subtítulo en los campos respectivos. Cambie la tipografía de acuerdo con su deseo cuando haya terminado, haga clic en Guardar:
Ahora, necesitaremos botones. Vamos a superar el módulo de doble button. Continúa y agrégalos. Mientras lo hace, cambie la etiqueta en los botones y luego agregue el icono deseado después del texto. Haz esto para ambos botones. Ahora, vaya a la pestaña de estilo y cambie el color de fondo, el color del cursor y el color del borde de ambos botones.
Establecí diferentes colores para los botones, para que el primer botón atraiga más atención. Puede ir a la pestaña Tipografía y cambiar las fuentes si lo desea. Cada sección de héroes altos necesita una imagen, para esto, agregue el módulo de imagen y seleccione una imagen de la galería. Ajuste los bordes para que la parte inferior de las imágenes se pueda colocar perfectamente sobre la apariencia de la fila. Cuando haya terminado, haga clic en Guardar:

Este es el resultado: nuestra sección de héroes principales:

Usted también puede estar interesado en:

Los mejores constructores de sitios web arrastran y caen: para principiantes y profesionales por igual

Compare WordPress Comentarios: Descres vs Comentarios de Facebook vs Spot.im vs PostmaticPest 20 de la mesa de billar angular del mejor administrador de 2022

Subir

Paso 2: La sección de características para la sección de características, utilizaremos el módulo de cuadro de información. Pero antes de que podamos hacer esto, primero debemos crear la apariencia de la fila. Agregar una matriz de apariencia de 3 × 4 líneas Seleccione la apariencia con 3 filas de columnas y dibuje y colóquela debajo de la sección Héroe. Cambie el ancho a ancho completo como lo hicimos antes y haga clic en Guardar. En este momento, tienes una matriz 3 × 1. Para hacer una matriz 3 × 4, haga clic en el icono de copia (ubicado en el lado izquierdo del icono de clave) tres veces. Esto copiará el giro con las mismas propiedades y creará una matriz 3 × 4. Como esto:

Ahora agregue el módulo de cuadro de información a cada columna. Cuando aparezcan la configuración, déle al cuadro un título y una descripción apropiados. Además, si encuentra que desea un icono en la parte superior del título, simplemente puede seleccionar un icono en la lista. Opcionalmente, acceda a la pestaña de impresión y cambie el color del texto del título. Cuando haya terminado de hacer cambios, haga clic en el botón de rescate:
Simplemente repita estos pasos para todas las demás columnas y cambie los detalles en consecuencia. Así es como se verá la sección de características una vez completada:
Subir
Paso 3: La sección de revisión para la sección de revisión, agregue otra fila mediante el mismo método y haga que esta fila completa el ancho. Agregue un módulo de imagen en una fila y seleccione la imagen deseada. Haga clic en la opción de corte y seleccione la opción Circle de la lista. Alinear la imagen en el centro y cambiarla al tamaño de la miniatura. Una vez completado, haga clic en Guardar: ahora para su revisión:
Agregue un módulo de editor de texto en la imagen,
Agregue la imagen con estrellas de revisión,

Agrega el comentario,

Alinea todo al centro.

Cuando haya terminado, haga clic en el botón de rescate:
Luego agregue dos columnas en el editor de texto.

En la primera columna, agregue un editor de texto y algún texto sobre/de sus clientes allí.
En la segunda columna, agregue un módulo fotográfico e incluya los logotipos de los clientes más famosos. Cambiar el tamaño de las columnas en consecuencia:
Este es el resultado final: la sección de revisión del cliente:
Subir
Paso 4: La sección de plantilla Esta es más o menos lo mismo que la sección Heroi que trabajé anteriormente. Incluye un título inteligente, botones duales y una imagen en la parte inferior. El fondo de la fila también se establece en el gradiente, así como el anterior. Entonces, para facilitar las cosas, podemos hacer una copia de la sección Hero y luego simplemente cambiar el texto, la imagen y las propiedades del botón. Aquí está su resultado final:
Subir

Paso 5: La sección de preguntas frecuentes para comenzar agregando otro aspecto de línea y cambiando el ancho al ancho completo. Agregue un módulo de encabezado inteligente a la parte superior de la fila y cambie el título y el subtítulo de acuerdo con:
Para preguntas frecuentes, el módulo de acordeón habría sido el mejor, pero dado que no tenemos esto en la versión simple, trataremos con el módulo de cuadro de información. Tire y coloque dos columnas debajo del título y hágalo con un ancho completo. Copiéelo varias veces haciendo clic en el botón Copiar. Agregue un cuadro de información a la columna e ingrese una pregunta + respuesta para un elemento individual de preguntas frecuentes en el cuadro Descripción: Cambie la alineación de la izquierda y tenga un cuadro de pregunta frecuente perfecto. Repita los pasos para todas las columnas. Aquí esta el resultado final:
Subir

Paso 6: El panel de acción para la acción para la sección final insta a la acción, comience ingresando otras dos columnas y establece un ancho completo. En la primera columna, agregue un módulo de encabezado inteligente e ingrese el texto. Haga los cambios necesarios en la impresión y, cuando haya terminado, haga clic en Guardar:

Agregue otro módulo de botones dobles y cambie el estilo de título y botón de acuerdo con su deseo. Haga clic en el botón de rescate:
Luego agregue un módulo fotográfico a la columna derecha. En el menú Configuración, seleccione la imagen y cambie el margen y los valores de llenado, para que se ajuste perfectamente. Después de que haya terminado, haga clic en Guardar:

Aquí está el resultado: nuestro bloqueo de bloque a la acción:
Subir

Paso final: cambiando la imagen del encabezado y el menú en Hestia En este momento, solo hay una tarea que hacer y esta es la personalización del encabezado predeterminado en Hestia. Para hacer esto, siga estos pasos:

Abra el tema personalizado y vaya a la sección de identidad del sitio.

Haga clic en el botón Seleccionar logotipo. Elija cualquier imagen que crea que se ajustará y cortará en consecuencia, si es necesario. Acceda a la sección Menús y seleccione el menú que desee ver en el encabezado.
Y … ¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡ ¡Felicidades, acaba de crear una página de destino completamente funcional para su sitio de WordPress sin llegar a una sola línea de código! Nuevamente, nuestra página de destino final se ve así:

¿Pero tu página de destino? ¡Distribuya el diseño que construyó en los comentarios a continuación! Espero que te haya gustado este tutorial sobre cómo construir una página de destino de WordPress y que hayas aprendido algo de él.

Cómo construir una página de destino con #wordpress y @Beaverbuber gratis

Haga clic en Tweet

¡Prima! Si desea reproducir la página de destino que hemos construido aquí en su sitio, ¡tenemos una excelente descarga para usted! Es una exportación XML completa de la página de destino. Todo lo que tienes que hacer es importarlo a través de Beaver Builder.
Sobre el autor: Ponet Sahalot es el fundador de Powerpack Beaver Addons y el CEO de IdeaBox Creations. Le gusta trabajar con WordPress, construir complementos y interesantes sitios web de WordPress con su equipo.
Apariencia y presentación de Karol K.