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.
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.
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.
Si necesitas más información: Configura reCAPTCHA en Elementor, fácilmente.
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.
Para la optimización de velocidad de carga de tu sito web (WPO), lo más recomendable es deshabilitar las Google Fonts, ya que realizan múltiples peticiones HTTPS cada vez que utilizas una fuente, lo cual ralentiza la carga de tu sito web.
Si optamos por deshabilitarlas, deberás descargar las fuentes que quieras utilizar en tu web y añadirlas a Elemento Pro. De esta manera, las fuentes estarán alojadas en tu servidor.
Características - Experimentos en cursos
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.
- Contenedor Grid: Crea diseños más adaptables con retículas. Proporciona una mayor flexibilidad en el manejo del espacio y la alineación de los elementos.
No está lo suficientemente desarrollada, no la utilizo. Con los contenedores Flexbox se puede realizar cualquier diseño.
Si quieres trabajar con Grid, tienes que tener activar antes el contenedor Flexbox. - Barra superior del editor: Nuevo diseño de la barra del editor desde el que se puede acceder a muchas de las funciones y que además facilita su uso.
- Página de destino: Permite la creación y optimización de landing pages específicas dentro de Elementor, con herramientas especializadas para potenciar la conversión.
- Elementos anidados: Habilita la inserción de widgets dentro de otros, lo que permite una estructura de página más compleja y con mayor profundidad.
- Carga diferida de imágenes de fondo: Optimiza el rendimiento de la web, mejora la velocidad de carga, retrasando la carga de imágenes de fondo hasta que sean necesarias en la pantalla del usuario.
- Condiciones de visualización: Permite configurar la visibilidad de ciertos widgets basándose en condiciones específicas como roles de usuario o estado de sesión.
- Menú: Facilita la creación y personalización de menús de navegación con opciones avanzadas de diseño y funcionalidad.
- Filtro de taxonomía: Mejora las opciones de filtrado en tu sitio web, permitiendo a los usuarios refinar las búsquedas por categorías, etiquetas o taxonomías personalizadas.
Características estables
- Carga de recursos mejorada: Esta característica experimental ofrece la opción de cargar menos código de forma predetermina, optimizando la carga de scripts (JS) para acelerar la velocidad de las páginas y mejorar la experiencia del usuario.
- Carga de CSS mejorada: Reduce la cantidad CSS que se carga en la página por defecto, asegurando que solo se incluya lo necesario para la vista actual, lo cual aumenta la eficiencia y rapidez de la web.
- Fuentes de iconos integradas: Muestra los iconos como SVG integrados, evitando de esta manera la carga de las bibliotecas Font-Awsome y eicons.
- Puntos de ruptura personalizados adicionales: Permite crear puntos de ruptura personalizados más allá de los estándares (desktop, tablet y móvil) para una mejor adaptación a los distintos dispositivos y resoluciones.
- Contenedor Flexbox: Utiliza la tecnología Flexbox CSS en contenedores para un diseño más fluido y adaptable de las estructuras de las páginas.
Sustituye a los antiguos contendores llamados «columnas» (desaparecidos del editor, pero funcionando en algunas webs), que se pueden convertir a Flexbox sin ningún problema. - Actualizar la librería Swiper: Asegura que la biblioteca de deslizamiento para sliders esté actualizada, ofreciendo una mejor compatibilidad y rendimiento.
- Por defecto, el nuevo constructor de temas: Establece el nuevo maquetador de plantillas como herramienta por defecto. Puedes salir y volver fácilmente al maquetador antiguo.
- Cabecera y pie de página del tema Hello: Facilita la edición de la cabecera y el pie de página dentro del tema Hello de Elementor, haciendo más accesible la personalización.
Siempre que trabajemos con Elementor utilizaremos el tema Hello y si es posible, generaremos un tema hijo para Hello. - Carga optimizada de Gutenberg: Mejora la integración con el editor de bloques de WordPress (Gutenberg), optimizando la carga de sus recursos para no afectar el rendimiento.
- Construir con IA: Incorpora herramientas de inteligencia artificial para asistir en el diseño web, ofreciendo sugerencias y automatización en el proceso creativo.
Te deja realizar solo un número determinado de creaciones, luego te dice que estás utilizando una licencia limitada y te pide que actualices. - Optimizar la carga de imágenes: Utiliza
fetchpriority="high"para priorizar la carga de las imágenes yloading="lazy"se utiliza con las imágenes que se sitúan por debajo de la parte superior de la página (above the flod), para mejorar las puntuaciones de rendimiento (LCP) de la página web.
La parte de la página que el usuario ve cuando esta se carga, se llama above the flod. «Lazy» se encarga de que las imágenes que están por debajo, solo se carguen cuando sean necesarias, no antes. - Notas: Permite añadir notas y comentarios internos en los diseños y páginas para mejorar la colaboración y el flujo de trabajo entre el equipo.
- Envíos de formularios: Ofrece una administración mejorada de los envíos de formularios, facilitando el seguimiento y la gestión de las respuestas recibidas.s
Como puedes ver, tengo activado todos excepto: Cabeceras y pie de páginas del tema Hello, Contruir con IA y Notas.
Si tienes algún problema después de haber activado/desactivado las características, puedes volver a la configuración que trae por defecto Elementor, haciendo clic en el botón que se encuentra en la parte superior: Volver a los valores por defecto.
Puedes realizar tu blog, tu tienda online o tu web personal con el editor de WordPress (Gutenberg) o con cualquier Page Builders (consturctor).
La única diferencia sustancial es que los maquetadores visuales o constructores, te ahorran tiempo y facilitan la creación de páginas webs con sus plantillas, Widgets y kits webs.
Si te ha servido este artículo sobre Elementor y estás pensando en comprarlo, puedes hacerlo a través de mi enlace de afiliado. Gracias por considerarlo.
¿Necesitas ayuda profesional con tu WordPress?» Escríbeme y buscamos la mejor opción para ti. [ Enviar consulta ]
