Como diseñador no programador, probablemente el plugin más importante que usarás es el constructor de páginas Elementor.
Te mostraré cómo instalar y configurar Elementor para que esté listo y configurado correctamente en tu sitio de inicio.
Verás cómo instalar rápidamente la versión gratuita, a través del repositorio de WordPress, directamente desde tu panel de control de WordPress.
Y también verás cómo instalar la versión Pro de pago, que requiere un método diferente de instalación, cargando un archivo zip.
Por cierto, la versión Pro de pago de Elementor no se requiere para lo que vas a ver, por lo que si no tienes la versión Pro, no importa.
Cómo instalar y configurar Elementor de manera correcta
Te mostraré algunas configuraciones esenciales de Elementor que debes realizar. Estas son absolutamente cruciales: si no las configuras correctamente, te resultará mucho más difícil diseñar tus sitios de WordPress y tener diseños consistentes. Hazlo bien, y obtendrás los mejores resultados y las menores molestias en el futuro.
Instalación de Elementor
Primero, instalaremos la versión gratuita de Elementor desde el repositorio de WordPress. Como probablemente sabrás, el repositorio de WordPress es una biblioteca de plugins de WordPress gratuitos, a los que los desarrolladores de complementos pueden enviar sus plugins. WordPress tiene un proceso de control de calidad que en su mayoría funciona bastante bien.
Puedes descargar tus plugins desde aquí y luego instalarlos, pero la forma más sencilla es instalarlos directamente a través de tu panel de control de WordPress. Así que vamos a Plugins > Añadir Nuevo.
Busca elementor aquí
Haz clic en instalar. Espera un poco y después actívalo. Eso es todo en cuanto a la versión gratuita. Puedes seguir este mismo proceso para cualquier plugin gratuito en el repositorio de plugins de WordPress.
Y luego, si has comprado el plugin de pago de Elementor Pro, instálalo como un complemento adicional, así como la versión gratuita.
Visita el sitio de Elementor en elementor.com e inicia sesión en tu cuenta.
Luego haz clic en “Descargar plugin”.
Una vez descargado, otra vez en Plugins, Añadir nuevo otra vez. Subir Plugin. Sube el archivo zip que descargaste de tu cuenta de Elementor. Lo instalas y activas.
En este punto, podrás añadir tu clave de licencia para obtener soporte y recibir las actualizaciones automáticas del plugin. Eso está en tu cuenta de Elementor.
En WordPress, baja a Elementor> Licencia. Y ponlo en esta caja.
Como sabrás, si tienes una licencia de Elementor de un solo sitio web, entonces sólo podrás agregar este sitio, o si has comprado el plan de 3 licencias, entonces podrás instalar 3 sitios web como máximo.
Ya lo tienes instalado.
Ahora veamos las 2 configuraciones que son esenciales que hagas. Vayamos a Elementor> Ajustes.
Ajustes de Elementor
Deshabilitar colores y fuentes globales
La primera es marcar ambas casillas para deshabilitar los colores globales y las fuentes globales.
¿Por qué marcamos estas 2 casillas?
Como sabes, establecemos nuestros estilos globales para el sitio en el tema, dentro del Personalizador. Estos estilos afectan a todo el sitio, por lo que decimos que son estilos globales: el encabezado, el pie de página, las publicaciones de tu blog, etc…
Si dejamos estas 2 casillas sin marcar, entonces Elementor también carga su propio conjunto de fuentes y colores globales.
Hay 3 grandes problemas si eso sucede:
- Tu sitio tiene un montón de código que no necesita. No nos gustan los sitios lentos.
- Debes configurar todos los ajustes de tipografía y color en 2 lugares: los estilos del Personalizador Y de Elementor, (aquí en la configuración de Elementor), lo que duplica tu esfuerzo. No nos gusta perder el tiempo.
- Es mucho más difícil saber de dónde vienen las reglas de estilo. No sabes si una fuente o un color en particular proviene de Elementor o de tu tema.
Si tus estilos principales están todos en el tema, (es decir, en el Personalizador), y has desactivado Elementor o no lo has cargado, entonces sólo tienes un lugar desde dónde administrar. Y Elementor, simplemente “heredará” los estilos globales de tu tema. Por lo tanto, si agregas un encabezado H1 en Elementor, tomará, de forma predeterminada, los estilos para el H1 que configuraste en el Personalizador de tu tema.
Esto no significa que no puedas anular estas configuraciones globales de forma individual dentro de Elementor. Claro que puedes. Si quieres, puedes seguir haciendo ajustes de estilo personalizados en elementos individuales, hasta volverte loco. Pero esta configuración asegura que tus valores predeterminados de marca global básicos estén en 1 lugar. En mi opinión, es la forma correcta de hacerlo.
Establece el Ancho del contenido de la misma manera que tu tema
Ve a la pestaña Estilo. Y ancho de contenido.
Esto le dice a Elementor de qué tamaño quieres que sea el contenido creado por Elementor.
Es de 1140 píxeles por defecto, pero puedes configurarlo como quieras. Lo que tenga sentido para el diseño particular de cada sitio web. No hay un número mágico ni nada.
Lo importante es que también configures el mismo ancho de contenido en la configuración del personalizador de tu tema. Es probable que tu tema lo llame “Ancho del contenedor”, pero es lo mismo. Es el ancho máximo del contenido de tu página actual.
En el Personalizador de GeneratePress, es la configuración de Ancho del contenedor aquí.
Y en Astra, está aquí.
Por ejemplo, si quieres dejar la configuración predeterminada del ancho del contenedor de 1200 píxeles de Astra en su lugar, también debes establecer el Ancho de contenido de Elementor en 1200.
Esto es solo para que tu principal área de contenido del contenedor, (sin importar si se muestra con la plantilla de tu tema o en un diseño personalizado de Elementor), siempre tenga el mismo ancho. Tenerlos diferentes hace diseños muy inconsistentes y las cosas se ven muy raras en general.
