Cómo crear una página de destino con Elementor y PowerPack

WordPress ha hecho que sea fácil para todos construir su presencia en línea, ya sea un blog o un sitio web comercial o un ERP complejo. Los temas y complementos de WordPress facilitan incluso a los usuarios la creación de sus sitios web sin tener que preocuparse por contratar a un experto. Los complementos de Page Builder han jugado un papel vital en la transformación de la forma en que se construyen los sitios web con WordPress. Elementor es uno de esos complementos de creación de páginas populares.

Si eres diseñador web y quieres dar vida a tus diseños sin tener que preocuparte por el código, puedes usar Elementor. Pero, ¿y si eres un desarrollador? Bueno, si usted es un desarrollador, también puede usar Elementor debido a su funcionalidad amigable para el desarrollador y su API fácil de extender.

En esta publicación, obtendrá más información sobre Elementor y cómo puede usarlo con los complementos de Elementor para crear sitios web, páginas de destino, ventanas emergentes, rápidamente.

¿Qué es Elementor?

Elementor es un complemento popular de Page Builder para WordPress. Elementor proporciona bloques de contenido listos para usar llamados Widgets junto con elementos estructurales básicos como secciones y columnas.

Puede arrastrar y soltar estos widgets en cualquier página de su sitio web de WordPress y crear un diseño personalizado según sus necesidades.

Elementor Pro viene con más de 60 widgets y un montón de plantillas prediseñadas que puede utilizar para diseñar cualquier página.

Características de Elementor

Elementor viene con un montón de características y funcionalidades que pueden hacer que el desarrollo de su sitio web sea más cómodo y rápido. Veamos todas las características impresionantes de Elementor que hacen que valga la pena tenerlo.

Rápido y fácil de usar

Elementor está optimizado para el rendimiento. Incluso si es un usuario novato, le resultará muy fácil de usar y navegar sin esfuerzo en Elementor. Nunca sentirá que Elementor lo arrastra hacia atrás en su proceso de diseño y solo hará que las cosas sean rápidas y fáciles para usted.

Si bien Elementor es increíblemente rápido, puede obtener más de Elementor cuando usa el alojamiento Cloudways Elementor. CW tiene que ver con el rendimiento y proporciona un gran control sobre el funcionamiento de su servidor. Cuando se trata de seguridad, Cloudways ofrece servidores realmente confiables y seguros regidos por sus prácticas de seguridad proactivas para mantener sus servidores seguros y protegidos. La cantidad de funciones que vienen con Cloudways es algo difícil de encontrar en la industria actual.

Plantillas de página prediseñadas

Con Elementor, obtienes un montón de plantillas prediseñadas que puedes usar para crear una página web con un solo clic. Hay plantillas para casi todas las categorías de páginas web, como la página de destino, la página de información, etc. y pueden hacer que el proceso de diseño del sitio web sea mucho más rápido.

Si no puede encontrar una buena plantilla en Elementor Library, puede consultar las plantillas de Elementor de terceros. Con una comunidad próspera de diseñadores y desarrolladores, llevar Elementor al siguiente nivel es fácil.

Cargado con widgets

Ambas versiones, gratuita y Pro, Elementor viene con widgets cargados de funciones. Desde widgets de contenido simple como encabezados, editor de texto, botones hasta widgets avanzados como cuadrícula de publicaciones, formulario de inicio de sesión, WooCommerce, uso compartido en redes sociales, obtiene muchas funciones con Elementor.

Si desea tener más poder cuando se trata de widgets, puede probar los complementos de Elementor de terceros. Recomendamos ir con PowerPack para Elementor. Es un complemento líder para Elementor y construido por el mismo equipo detrás del popular complemento PowerPack Beaver Builder.

Generador de elementos emergentes de Elementor

El generador de ventanas emergentes es una de las últimas incorporaciones al generador de Elementor. La función de creación de ventanas emergentes elimina la necesidad de utilizar un complemento de creación de ventanas emergentes de terceros en su sitio web. Puede utilizar Elementor para diseñar ventanas emergentes impresionantes con funciones y reglas de segmentación avanzadas.

Puede crear formularios de inicio de sesión, tapetes de pantalla completa, ventanas emergentes de descuento y otras cosas con la función de creación de ventanas emergentes.

Configuración global

Cuando crea un sitio web, es importante tener una configuración de color, tipografía, etc. consistentes. Puede personalizar los colores, las fuentes e incluso el selector de color por adelantado para facilitar su proceso de diseño con la configuración global en Elementor.

Cree elementos temáticos como encabezado, pie de página, archivos, etc.

Con Elementor, su diseño no se limita solo al área de contenido de una página . Puede crear un encabezado, pie de página, barra lateral y casi todas las partes del sitio web personalizados sin tener que preocuparse por escribir código. Todos estos se pueden crear fácilmente utilizando la funcionalidad Theme Builder en Elementor Pro.

Contenido dinámico

Con la funcionalidad de contenido dinámico en Elementor Pro, puede mostrar datos / contenido dinámico de campos personalizados de WordPress, ACF, conjunto de herramientas, pods, MetaBox o cualquier otro complemento de campos personalizados. Puede utilizar los datos de los campos personalizados y mostrarlos con los widgets de Elementor en cualquier parte de su sitio. Puede obtener más información sobre el contenido dinámico aquí.

Versión Lite y Pro

Si bien Elementor tiene mucho que ofrecer, no es necesario que los usuarios tengan que pagar una gran cantidad para acceder a él. De hecho, Elementor tiene dos versiones, Lite y Pro. Puede acceder a muchas funciones de Elementor en la propia versión lite. Ambas versiones tienen sus propias características que ofrecer. Aquí hay una comparación detallada de Elementor Lite y Pro que puede ayudarlo a tomar una decisión.

PowerPack para Elementor

Elementor definitivamente es el paquete completo. La única herramienta que necesita para comenzar a diseñar páginas web con un ángulo de aprendizaje mínimo.

Puede haber ocasiones en las que se sienta un poco restringido al usar Elementor. Para esto, los complementos de terceros bien codificados como el complemento PowerPack Elementor vienen al rescate. Este complemento es uno de los mejores en su categoría y ofrece widgets excelentes e impresionantes con un montón de opciones de personalización para los usuarios.

Actualmente, hay más de 50 widgets en la versión Pro de PowerPack, y el equipo sigue agregando nuevos widgets, lo que la convierte en una excelente opción entre los complementos de Elementor.

PowerPack está creado por un equipo de desarrolladores y diseñadores expertos de WordPress pensando en el rendimiento. El complemento está bien codificado y se actualiza regularmente para que sea compatible con las últimas versiones de Elementor y WordPress.

Veamos cómo puede usar el complemento Elementor y PowerPack juntos para crear páginas web fantásticas.

Crear una página de destino

En este tutorial, aprenderá cómo puede crear una página de destino rápida con el complemento Elementor y PowerPack Elementor. Es fácil comenzar con Elementor , todo gracias a la interfaz fácil de usar.

Asegúrese de tener tanto Elementor como PowerPack instalados en su sitio. Puede obtener las versiones gratuitas en los siguientes enlaces:

1. Elementor
2. PowerPack Lite para Elementor

Creando una página con Elementor

Inicie sesión en su Panel de administración de WordPress y haga clic en la opción Agregar nuevo en Páginas . Ahora asigne un título / nombre a su página y haga clic en el botón Editar con Elementor .

En este tutorial, estamos creando una página de destino para una pizzería, por lo que nombraremos nuestra página en consecuencia. Así es como debería verse nuestro resultado final:

Empecemos por la primera sección . Antes de hacer esto, cambie el diseño a Elementor Canvas haciendo clic en el pequeño icono de configuración en la esquina inferior izquierda del editor.

Paso 1: Sección de héroe

La sección de héroe se compone de una imagen de fondo, dos widgets de títulos y un botón de llamada a la acción.

Primero, haga clic en el ícono más y agregue una estructura de columna única de las opciones. Ahora vaya a la configuración de la sección y habilite la opción de sección estirada y configure el relleno inferior y superior en 250 desde la pestaña avanzada.

Ahora, puede seleccionar la imagen deseada para el fondo desde la pestaña de estilo> tipo de fondo> Clásico y elegir la imagen en la pantalla multimedia.

Tenemos el fondo listo. Ahora agreguemos los títulos y el botón a nuestra sección de héroes.

Arrastre y suelte el widget de encabezado doble en la página y cambie el texto respectivamente. Ahora, asegúrese de dividir el primer encabezado y el segundo en consecuencia para enfatizar más el precio como lo hemos hecho en la imagen a continuación. Modifique la tipografía de ambas partes del encabezado.

Hay muchas otras modificaciones que puedes hacer para hacer que tu título de héroe sea la forma que quieras.

Una vez que haya realizado los cambios, arrastre y suelte otro widget de Encabezado debajo del encabezado dual y cambie la configuración de texto y tipografía según sea necesario, aquí he cambiado el tamaño del texto a 90 , la fuente a Elsie y el peso de la fuente a 600 .

Ahora agregaremos el botón CTA .

Arrastre y suelte el widget de botón de Elementor en la sección justo debajo del widget de encabezado. Ahora comenzaremos a modificar la configuración del botón.

Estos son los cambios que hice en el botón:

• Se cambió el texto a ¡ Ordene ahora!
• Alineado al centro del botón.
• Se agregó el enlace de CTA
• Se cambió la tipografía a Elise; 24; 600 para fuente, tamaño y peso respectivamente.
• Se cambió el color de fondo a rojo ( # ff0000 ) y el color de fuente a blanco ( # ff0000 ).
• Se agregó relleno 18, 40, 18, 40 para arriba, derecha, abajo, izquierda respectivamente.

Después de realizar los cambios, así es como se ve la sección de héroes.

Paso 2: la sección Acerca de

Ahora trabajaremos en la sección Acerca de. Continúe y agregue una estructura de dos columnas a la página haciendo clic en el icono "+".

Ahora nuestro objetivo es crear un diseño similar a este, por lo que agregaremos un widget de encabezado, un widget de editor de texto y el widget de testimonios en la columna de la izquierda. En la columna de la derecha, agregaremos un widget de encabezado, un widget de texto y un widget de botón.

Simplemente comience a arrastrar y soltar los widgets en la sección y modifíquelos para que se parezcan a los de la imagen proporcionada arriba. Agrega el título y cambia la tipografía por el mismo.

Así es como se verá:

Ahora agregue el editor de texto debajo del título en la columna izquierda y cambie la tipografía a la misma que se muestra a continuación.

Ahora agregaremos el widget Testimonial Carousel debajo del widget del editor de texto. Agregue los "Artículos" o Testimonios para mostrarlos en su sitio web. También puede utilizar el widget Testimonios de PowerPack, que ofrece mucho más poder de personalización.

Una vez que haya terminado de realizar los cambios, la columna izquierda de la sección Acerca de debería verse así.

Ahora, para la columna de la derecha , agregue el fondo para agregar un poco de contraste a la sección.

Ahora cree un duplicado del encabezado que hicimos en la columna de la izquierda y arrástrelo y suéltelo en la columna de la derecha. Haga lo mismo con el Editor de texto, ya que esto le evitará redundancias innecesarias y también le ahorrará tiempo. Ahora para el botón, simplemente duplique el botón de la sección Héroe y arrástrelo y muévalo a la columna derecha de la sección Acerca de.

Alinee verticalmente la columna derecha con el medio desde la columna de edición> diseño> alineación vertical y ya tiene lista la sección Acerca de.

Este es el resultado final de la sección Acerca de:

Paso 3: sección de CTA "Sepa más"

Agregaremos otra sección hablando de Pizzeria. Esta sección será similar a la que creamos antes, pero la estructura será un poco diferente.

Entonces, queremos que nuestro resultado final se vea así:

¿Notaste algo similar aquí?

¡Sí! El encabezado, el editor de texto son similares al que ya hemos creado anteriormente. Entonces, en lugar de rediseñar todos los widgets, simplemente los duplicaremos y los arrastraremos a su lugar.

¡Vamos a hacerlo!

Primero, agregue una nueva estructura de dos columnas y vaya a la configuración de la sección y agregue la imagen de fondo de la ventana multimedia y agregue un relleno superior de 100 para que el panel se vea más espacioso. Además, habilite la opción Estirar sección desde la configuración.

Ahora vaya a la sección anterior y duplique el encabezado, el editor de texto y el widget de botón . Simplemente puede hacer esto haciendo clic derecho en el widget y seleccionando la opción de duplicar . Una vez duplicados, arrastre y suelte los widgets duplicados en sus nuevas posiciones.

Así es como se ve la sección:

Ahora, para la columna de la derecha, arrastre y suelte el widget de imagen y seleccione la imagen de la galería de medios. Ajuste la imagen en términos de tamaño de imagen, etc. y una vez que haya terminado, así es como se ve la sección.

Paso 4: la sección Contacto / Pedido

Esta es la sección de CTA que ayudará al usuario a realizar el pedido. Ahora bien, ¿qué debería incluir toda esta sección? Veamos qué queremos hacer aquí.

Necesitamos crear dos widgets de editor de texto y encabezado, un formulario de contacto y el widget de menú de lista de precios de PowerPack.

En primer lugar, sabemos que debemos mantener el mismo diseño y apariencia del encabezado y del editor de texto. Puede continuar y duplicarlos de la sección anterior y colocarlos aquí. Ahora cambia el texto allí con el que quieras.

Puede usar el widget Formularios en Elementor Pro para crear un formulario de contacto con un simple proceso de arrastrar y soltar. Una vez hecho esto, el formulario de contacto aparecerá en la página. Ahora puede realizar una mayor personalización de los formularios. Estos son los cambios que hice:

• Se agregaron campos de formulario y se cambió el tamaño del campo.
• Se modificó el texto, el tamaño y la alineación del botón.
• Se agregó el correo electrónico como la acción del botón enviar y se agregaron los detalles del correo electrónico.
• Ajustó los espacios entre columnas y rehizo la tipografía y los colores del texto y los campos.
• Otros cambios necesarios para que el formulario de contacto se vea más atractivo .

Si usa cualquier complemento de formulario de contacto como Gravity Forms, WPForms, Ninja Forms, etc., entonces puede usar el widget de modelador de formularios de PowerPack para diseñar el formulario con Elementor.

Ahora, en la columna de la derecha, agregaremos la lista de precios de los productos. Para esto, usaremos el widget Price Menu de PowerPack. Simplemente arrástrelo y suéltelo, agregue los detalles y cambie el diseño y el diseño por el mismo. Así es como se vería toda la sección:

¡Participa en el sorteo ahora!

Sorteo de PowerPack organizado por Cloudways

¡Dale cuerda!

Después de realizar todos los cambios, así es como se vería todo nuestro diseño.

Ahora también puede hacer un diseño atractivo para usted con Elementor y PowerPack para Elementor. Si bien Elementor ofrece muchas características, PowerPack lo amplía aún más con widgets creativos y orientados a la funcionalidad. Con más de 50 widgets de gran utilidad en su kit de herramientas, puede crear sitios web más rápido.

Elementor y PowerPack pueden ahorrarle tiempo, esfuerzo y ayudarlo a ampliar su negocio de diseño web. No solo esto, ambos productos están respaldados por un increíble equipo de expertos en WordPress para que tengas total tranquilidad.