Los maquetadores o constructores son plugin (pequeños programas que añaden funcionalidades a WordPress) que permiten crear páginas web de una forma rápida y sencilla, ahorrándote tiempo y facilitándote el diseño.
Elementor Pro es uno de los más utilizados.
Instalación de Elementor Pro
Lo primero que hay que hacer es instalar la versión gratuita de Elementor, con la que podemos trabajar perfectamente, aunque faltan algunos Widgets (funciones) muy interesantes, que nos facilitarán la creación de las páginas web.
1º Instalar Elementor
En WordPress, vamos a Plugins > Añadir nuevo y en Palabra clave ponemos Elementor y hacemos clic Instalar ahora y después en Activar.
Ya tenemos instalada la versión libre de Elementor.
2º Instalar Elementor Pro
Ahora, si quieres instalar Elementor Pro deberás dirigirte a la
Elementor Pro y elegir el plan que mejor se ajuste a tu presupuesto.
Una vez adquirida la licencia, nos dirigimos a nuestra cuenta en la página de Elementor que hemos creado al comprar el plan, vamos a Suscripciones > Download.zip y descargamos el archivo (elementor-pro-version.zip).
Volvemos a WordPress > Plugins > Agregar plugin y subimos nuestro archivo elementor-pro-version.zip.
Por último, solo nos queda activar y conectar la licencia con nuestra cuenta de Elementor desde WordPress > Elementor > License > Activate License > Connect & Activate.
Ya tenemos instalado Elementor Pro con todas sus funcionalidades.
Configuración Elementor Pro
Ajustes - General
- Tipo de contenido:
Elegimos donde vamos a maquetar con Elementor.
Lo recomendable es solo marcar las páginas.
Las entradas las diseñaremos por medio de plantillas. - Desactivar los colores por defecto:
Seleccionamos si queremos usar los colores de nuestro tema o dejar que Elementor los controle. - Desactivar las fuentes por defecto:
Mismo procedimiento que el apartado anterior pero con las fuentes.
Ajustes - Integración
Estas opciones nos permiten conectar Elementor con APIs de terceros.
Deberás rellenar los datos de los servicios que vas a necesitar.
A continuación, los más utilizados:
reCAPTCHA:
Servicio de Google que está diseñado para diferenciar a los humanos de los ordenadores (tráfico generado por bots) y que protegen tu sitio web de spam y el abuso.
reCAPTCHA v3:
Última versión de servicio de Google antispam.
Tiene un Umbral de puntuación entre 0 y 1.
Por defecto, su umbral será de 0,5 lo que significa que todo visitante con una puntuación inferior, deberá demostrar que es humano.
Para generar las dos claves que necesitas, tienes que ir a https://www.google.com/recaptcha/about, hacer clic en v3 Admin Console (parte superior) y Registrar un nuevo sitio web.
Una vez realizado todo el proceso, tendrás que copiar las dos claves generadas a Elmentor > Ajustes > Integración > reCAPTCHA V3.
Ajustes - Avanzado
Método de impresión de CSS:
Aquí puedes elegir si el código CSS va a ir integrado en cada página o como una hoja de estilo independiente.
Dejar seleccionado archivo externo.
- Cambio de método de carga del editor:
Solo activar para diagnosticar problemas con la configuración del servidor. - Permitir la subida de archivos sin filtrar:
Al activar esta casilla podremos subir archivos tipo SVG y JSON, lo cual será un riesgo potencial de seguridad.
Solo activar cuando sea estrictamente necesario. - Carga de Google Fonts:
Elegimos como Elementor carga Google Fonts a través de la propiedad de CSS, font-display.
Font-display determina cómo se muestra una fuente en función de si está descargada y lista para usar.Predeterminado: la visualización de las fuentes la define el navegador.
Bloqueo: Oculta el texto hasta que la fuente haya sido cargada completamente.
Intercambiar: Usa una fuente alternativa hasta que la fuente se haya cargado completamente.
Alternativa: Oculta el texto durante un periodo mínimo e intentará cargar la fuente en un periodo corto. De no ser así, usará una fuente alternativa.
Opcional: Oculta el texto durante un periodo mínimo y utilizará la fuente alternativa si no está cargada completamente la fuente hasta que cargue. - Cargar compatibilidad con Font Awesome 4:
Es una versión antigua y sin mantenimiento.
La dejamos desactivada.
Ajustes - Experimentos
Estas opciones están en su mayoría en fase de prueba, por lo que pueden no dar el resultado esperado, fallar o ser eliminadas completamente.
En las últimas versiones de Elementor Pro, las «columnas» han dado paso a los Contenedores Flexblox.
Ahora, crearás la estructura de tu página web a partir de contenedores flexbox, lo que te permitirá más flexibilidad a la hora de diseñar las páginas.
Además, podrás convertir las antiguas secciones y columnas al nuevo contenedor flexbox.
Activa esta nueva característica o perderás todas sus nuevas funcionalidades.
Otra opción interesante, a mi modo de ver, es punto de ruptura personalizados adicionales, que permite añadir 3 puntos más de ruptura, hasta un total de 6, para poder adaptar mejor tus diseños a los diferentes dispositivos.
Por defecto, Elementor viene configurado con tres dispositivos: desktop, tablet y móvil, pudiendo añadir también el tamaño grande de estos dispositivos, como se ve en la imagen.
Resumen
Puedes realizar tu blog, tu tienda online y tu web personal con el editor de WordPress (Gutenberg) o con cualquier Page Builders.
La única diferencia sustancial es que los maquetadores visuales te ahorran tiempo y facilitan la creación de páginas webs con sus plantillas, Widgets y kits webs.
