skip to Main Content

Cómo crear una página de aterrizaje con Divi Builder y Hestia

Hay muchos constructores de páginas en el mercado hoy en día que pueden ser usados para diseñar páginas de aterrizaje sin el uso de código. En este artículo, le mostraremos uno de estos métodos – cómo usar el Divi Builder y el tema Hestia para crear una página de destino efectiva.

En resumen, Divi Builder es la edición plugin del marco y tema principal de Divi. Como en, si no quieres el tema completo de Divi, descarga el Divi Builder y mantén tu tema actual.

Lo bueno de Divi Builder es que se puede utilizar con cualquier tema, lo que le da una nueva capa de construcción de páginas visuales para hacer la edición y el diseño aún más fácil. Puedes encontrar más información sobre Divi Builder aquí.

Para este tutorial, vamos a utilizar el tema GRATUITO de Hestia WordPress que puedes descargar aquí. Hestia es nuestro tema de WordPress de diseño de material libre número 1 que está lleno de características que le permiten construir el sitio que desea. Este tema ofrece muchas opciones personalizables y es SEO friendly y construido para la velocidad.Cómo crear una página de destino con Divi Builder y Hestia #WordPress tema

Bien, así es como se construye una página de aterrizaje con Divi Builder y Hestia.

1. Instalar Divi Builder

Divi Builder se instala como cualquier otro plugin de WordPress. Para empezar, completa tu compra de la membresía de Temas Elegantes y descarga el archivo ZIP de Divi Builder.

Luego, ve a Plugins → Agregar nuevo → Subir y localizar el archivo ZIP de tu carpeta de descargas o donde sea que hayas guardado el archivo ZIP. Una vez instalado, necesitarás activarlo.

A continuación, se te pedirá que valides tu suscripción, así que introduce tu nombre de usuario y la clave de la API para ser miembro de Elegant Themes.

2. Diseña tu página de aterrizaje con Divi Builder

El diseño en Divi puede hacerse ya sea construyendo un nuevo diseño desde cero o importando un diseño ya hecho.

Construir tu página de aterrizaje desde cero es seguramente una perspectiva interesante, y una que te da más libertad, pero también es más difícil. Así que hasta que te familiarices con Divi Builder y aprendas a usar la interfaz, lo mejor es seguir con los diseños preconstruidos.

Pero antes de entrar en eso, asegúrese de seleccionar la plantilla de la página, Page Builder Full Width (ver abajo). Esto permitirá que aparezcan los ajustes de Hestia, encabezado, menú y pie de página, pero tendrá un control total sobre el diseño de la página.

(Si quisieras construir una página de aterrizaje con Divi Builder pero sin navegación u otros elementos, elegirías Page Builder Blank template en ese caso).

Vale, para empezar a añadir un diseño prehecho, crea una nueva página o selecciona una existente y haz clic en Use Divi Builder .

Entonces verá aparecer una disposición de módulos de bloque en blanco.

Elijamos la opción Load Layout .

Cuando se selecciona esta opción, verá aparecer la siguiente cuadrícula de diseño:

Elijamos el primero titulado Restaurante , por ejemplo, pero cualquiera de los dos funcionará.

Cuando elija un paquete de diseño, se le mostrarán los diferentes diseños disponibles.

Como estamos construyendo una página de aterrizaje con Divi Builder, elegiremos la que se llama «página de aterrizaje».

Haga clic en el botón verde Use This Layout .

Verás entonces que el diseño aparece en la interfaz de Divi Builder.

Para ver la página, haz clic con el botón derecho del ratón en la vista previa de los cambios .

Verán que la página de aterrizaje se ha llenado con todas las imágenes, animaciones y texto del paquete de diseño que elegimos.

3. Cambiar el contenido del texto

Para reemplazar cualquier contenido de texto, simplemente haga clic en el módulo o edite usando el constructor visual. Para acceder al constructor visual, selecciona el botón morado enable visual builder en la parte superior de la página.

Otra gran cosa del constructor, es que puede ajustar el contenido para diferentes dispositivos.

Cuando estés en el constructor visual, selecciona el icono de la imagen del dispositivo en la esquina inferior izquierda para ver cómo se renderiza el contenido en cada dispositivo. Selecciona el teléfono y luego elige los ajustes para cada módulo. A continuación, puedes ajustar el tamaño del texto para el escritorio, la tableta y el smartphone a tu gusto.

4. Cambie el tamaño de sus imágenes

Siempre asegúrese de optimizar sus imágenes antes de usarlas en su página de destino. Hay un número de herramientas que puede usar para hacer esto. Incluso hemos tenido un post separado comparando las más eficientes.

Asegúrate de que sólo subes el tamaño de la imagen que se necesita, también. Por ejemplo, una imagen de un héroe de ancho y alto completo normalmente necesitaría tener un ancho de 1920px por 1280px, pero no necesita ser, digamos, 4000px.

Conclusión

Esencialmente, eso es todo cuando se trata de usar diseños prehechos de Divi al construir tu página de aterrizaje con Divi Builder y Hestia.

Al final del día, todo esto se reduce a ajustar lo que ya está en la plantilla, y hacerla tuya.

A medida que vayas adquiriendo confianza con Divi Builder, podrás empezar a construir nuevos diseños desde cero para obtener un aspecto completamente personalizado.

Si quieres usar Divi Builder, necesitarás un plan de membresía de Temas Elegantes. Los planes comienzan en $89 por año o $249 por una licencia de por vida.

Cómo crear una página de aterrizaje con Divi Builder y Hestia #WordPress theme

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Pin It on Pinterest

Share This
Back To Top