Guía para crear tu web en WordPress con Elementor

Con WordPress puedes gestionar el contenido de los sitios web con mucha facilidad. Pero no se trata solo de administrar contenido, si además quieres definir cómo se verá ese contenido, puedes usar un complemento como Elementor. En esta guía te vamos a explicar en qué consiste, sus ventajas y desventajas, así como el proceso para poder usarlo en tus proyectos.

¿Qué es Elementor y cómo funciona en WordPress?

Elementor es lo que conocemos por un Builder, es decir, un constructor de páginas. ermite diseñar páginas en WordPress de manera cómoda y sin la necesidad de disponer de conocimientos de desarrollo en lenguajes como HTML, CSS o PHP. En lugar de eso, Elementor funciona mediante un intuitivo sistema de arrastrar y soltar (drag & drop), lo que permite alterar los layouts de la página y cambiar el aspecto de manera fina y visual, con acabados profesionales.

Para poder usar Elementor simplemente lo añadimos como plugin a WordPress y una vez instalado, tendremos toda una serie de herramientas adicionales que nos permitirán editar el aspecto de páginas, entradas y otras secciones del sitio.

Elementor Free vs. Elementor Pro

Si vas a la página de Elementor verás que se ofrece en varias versiones, incluso tienen planes de hosting en su propia página. De todos modos, para usar Elementor en realidad no necesitas pagar para nada, ya que puedes instalarlo directamente desde el administrador de WordPress, como veremos más adelante.

Ahora bien, para aclararnos dentro de las cantidad de servicios que ellos ofrecen, verás que el plugin de WordPress lo tienes en dos versiones:

• Elementor Free, que es la versión gratuita del plugin, con funciones básicas ideales para usuarios que deseen realizar pequeños ajustes en el diseño de su web. Las características de esta versión las podemos encontrar en la página del plugin Elementor en el catálogo de WordPress.
• Elementor Pro: que es la versión de pago del plugin que nos ofrece funcionalidades más avanzadas de edición y que nos permiten llegar a cambiar elementos extra de la web y el acceso a plantillas premium. En la propia página de Elementor verás que tienen incluso varios planes de pago, que requieren desembolsar una cuota al mes por su uso.

La versión gratuita es suficiente para sacarle bastante partido a Elementor, en usos sencillos o más ocasionales. La versión de pago está más orientada a profesionales que quieren usar Elementor para construir los sitios web de sus clientes, o bien empresas que tengan un sitio web y quieran controlar más aspectos de su WordPress sin tener que contratar un profesional.

Ventajas de usar Elementor en WordPress

Algunas de las ventajas que obtendremos al usar Elementor son las siguientes:

Personalización visual sin necesidad de código

Elementor permite modificar el diseño de una web basada en WordPress de forma visual, es decir, en vista diseño. No requiere tener conocimientos de HTML, CSS o PHP, ya que todo se realiza a golpe de clic.

Gran variedad de plantillas prediseñadas

Además ofrece cientos de plantillas prediseñadas, que ya están listas para usar, por lo que no tendrás que invertir en un diseño profesional para tu sitio. Además, al ser plantillas basadas en Elementor puedes adaptarlas al look & feel que desees para tu web.

Compatibilidad con la mayoría de plugins de WordPress

Gracias a lo extendido que está Elementor lo puedes usar en combinación con otros plugins de WordPress. La mayoría son compatibles, por lo que no deberías tener problemas en este área.

Diseño responsive para móviles y tablets

Todas las plantillas prediseñadas vienen adaptadas para verse en ordenadores y dispositivos móviles, tanto tablets como teléfonos. Además, al editar un diseño puedes ajustarlo para distintos dispositivos, lo que nos asegura una experiencia de usuario buena en cualquier medio.

Interfaz intuitiva con funciones de arrastrar y soltar

Aunque sus funcionalidades de edición son bastante avanzadas, su uso resulta sencillo e intuitivo. Solo tienes que arrastrar elementos a tu web, ya sean textos, imágenes o bloques predefinidos y soltarlos donde quieras que aparezcan, adaptando luego sus configuraciones por medio de formularios visuales.

Desventajas de Elementor

Es justo también mencionar las desventajas que podemos encontrar en el uso de Elementor, sobre todo una: usarlo es fantástico y te puede ahorrar mucho tiempo y la necesidad de adquirir conocimientos técnicos, sin embargo, una vez comiences a usarlo verás que tu web se encuentra para siempre ligada con este builder. Esto quiere decir que, si decides dejar de usar Elementor, perderás todas las personalizaciones de diseño que tiene tu página y tendrás que empezar a diseñarla de nuevo.

Además, otra desventaja es que puede hacer que tu web sea un poco más lenta en comparación a otras páginas similares donde no se está usando Elementor.

Pasos previos antes de crear tu web con WordPress y Elementor

Los pasos previos para usar Elementor son los mismos que tendrías si piensas usar WordPress. Vamos a mencionarlos para que nadie se pierda con este inicio.

Elegir un dominio y servicio de hosting

Lo primero que debes saber es que uses o no Elementor puedes hacerlo en cualquier servicio de hosting. Puedes incluso usar el hosting gratuito para WordPress que ofrecemos en Piensa Solutions, así como los planes de hosting profesionales que también encuentras entre nuestra oferta, si no te importa invertir un poco de dinero para mejorar el rendimiento y las funcionalidades del servicio.

Instalar WordPress correctamente

Una vez tengas tu hosting necesitas instalar primero WordPress. En Piensa Solutions esta parte no tiene mayor problema, ya que nuestros hostings para WordPress incluyen ya la instalación de base, sin que tengas que realizar nada en especial.

Configurar ajustes básicos del sitio

Antes de instalar Elementor puedes configurar aspectos básicos del proyecto, como el título del sitio web, la zona horaria, el estilo de los enlaces permanentes y la instalación de otros plugins que sean necesarios.

Crear una página web paso a paso en WordPress con Elementor

Ahora que ya hemos visto cómo puedes tener fácilmente tu sitio web con WordPress ya instalado, podemos comenzar a diseñar con Elementor. El proceso es bastante sencillo, como vamos a ver en los siguientes puntos.

1. Instalar Elementor desde el panel de WordPress

Desde la página de administración del sitio WordPress, entra en el apartado de «Plugins > Añadir nuevo» y busca por «Elementor».  Debería aparecer entre las primeras opciones. Nada más tienes que instalarlo y activarlo después.

Al instalar el plugin se te redirigirá a la página de Elementor, donde podrás hacer inicio de sesión con tu cuenta, si es que la tienes. Esto es útil si dispones algún plan de pago de Elementor, para que tu plugin instalado se asocie a él y puedas usar las funcionalidades premium. Puedes saltar este paso si no deseas crear una cuenta.

2. Elegir una plantilla o iniciar un diseño en blanco

Seguidamente nos indican que debemos continuar por añadir un tema básico. Esto es útil porque los temas deben tener soporte para Elementor, de modo que puedas tener activas sus opciones de personalización.

Nos ofrecen de entrada un tema sencillo que es un buen punto de partida para comenzar, sobre todo si no tenemos conocimientos previos de Elementor y deseamos aprender a trabajar con este builder sin demasiadas distracciones.

Es una buena idea instalarlo, aunque también puedes hacer este paso después o elegir otros temas, entre los que encuentras alternativas gratis o de pago.

Luego el asistente nos ofrecerá aumentar nuestro nivel a premium para disponer de funcionalidades adicionales, si es que no lo tenemos ya. Este paso lo podemos saltar tranquilamente pues no lo necesitaremos para esta guía.

Por último se mostrará una pantalla de accesos rápidos donde podrías analizar otras plantillas o ir directamente al editor del sitio.

3. Añadir secciones y widgets al diseño

Si en la pantalla anterior pulsamos el recuadro para editar un nuevo canvas con el editor Elementor aparecemos en la herramienta de edición de diseños, donde podremos realizar páginas o personalizar las entradas de manera visual.

Dentro del editor podemos arrastrar y soltar widgets (elementos visuales como textos, imágenes, vídeos, etc.) dentro del lienzo y componer nuestros diseños.

4. Personalizar textos, imágenes y botones

Cuando arrastres un widget al lienzo podrás personalizarlo en el propio editor, cambiando directamente elementos como su texto. Además, en la parte de la izquierda puedes editar cada elemento fácilmente en un listado de propiedades que se encuentran clasificadas en pestañas, como puedes ver en la siguiente imagen.

5. Configurar el diseño para dispositivos móviles

Puedes editar la web tal como se vería en un ordenador de escritorio pero además en la parte de arriba tienes unos controles que te permiten modificar el lienzo para hacerlo más pequeño, tal como se vería en móviles o tablets. Así puedes editar también tu web viendo el aspecto que tendría en otras pantallas.

Además, en el panel de propiedades de los widgets, en la pestaña de «Avanzado» podemos encontrar toda una serie de propiedades adicionales para cada uno de los elementos insertados en la página. Incluso verás un control que te permite seleccionar el target de cada estilo, ya sea para ordenadores de escritorio o dispositivos móviles.

En la siguiente imagen puedes ver el selector para escoger el dispositivo al cual quieres aplicar los estilos del margen.

6. Crear cabecera, pie de página y páginas internas

Puedes diseñar cada una de las secciones de tu sitio, como páginas o entradas. Para acceder al editor de Elementor encontrarás un enlace en la página de edición de aquella sección que estás administrando.

Además, si has contratado el plugin de pago Elementor Pro, podrás  diseñar también elementos como cabeceras, pies de página y otras plantillas

7. Publicar la página y verificar el resultado final

Una vez hayas terminado puedes publicar los cambios con el botón de «Publicar» situado en la parte de arriba. Entonces puedes acceder al sitio web, en la página que estabas editando, para comprobar cómo ha quedado.

Consejos de diseño y buenas prácticas con Elementor

Con los pasos descritos en el anterior bloque de esta guía tienes suficiente para experimentar con Elementor y comprobar la facilidad con la cual puedes crear los diseños de tus páginas web. Ahora vamos a ver algunos consejos útiles para que los resultados que consigas sean más atractivos y optimizados

Optimización de velocidad de carga

Uno de los factores más importantes para tener páginas con buena experiencia de usuario y que posicionen bien en los buscadores es buscar siempre la optimización de la carga. Esto es importante en cualquier tipo de sitio web y los consejos que podemos darte son los mismos que aplican a sitios WordPress o sitios tradicionales creados con cualquier tipo de herramienta.

Para consultar más sobre este punto te recomendamos nuestro post dedicado a la optimización de sitios web (WPO).

Uso estratégico del color y la tipografía

Aunque trabajar con Elementor nos ofrece libertad para poder escoger colores y tipografías sin límite en nuestros sitios web, lo ideal es trabajar de una manera ordenada y consistente. Esto quiere decir que debes establecer un patrón que repitas a lo largo de todo el sitio web, de manera que consigas unos resultados homogéneos y con una personalidad adecuada a tu negocio.

Además, en términos de uso de color, te recomendamos siempre asegurarte de que los colores ofrezcan un contraste adecuado que facilite la legibilidad de los textos.

Cómo mantener la coherencia visual en todo el sitio

Como hemos dicho antes, la coherencia visual es fundamental para ofrecer un aspecto profesional en nuestros sitios. Además de mantener unas decisiones siempre acorde con planteamientos previos te recomendamos utilizar plantillas que ofrecen estilos globales, de modo que tus elementos como botones, formularios, enlaces, etc. tengan siempre un diseño consistente

Plugins complementarios recomendados para Elementor

Para acabar esta guía de Elementor vamos a hablar un poco de Plugins, aunque en realidad no debes preocuparte demasiado por el hecho de usar o no usar el builder  Es por ello que cualquiera de estos plugins imprescindibles para WordPress podrás usarlos sin problema con Elementor.

Solo por nombrar aquí algunos, vamos a destacar unas categorías útiles:

Plugins para formularios de contacto

• WPForms
• Contact Form 7

Además el propio Elementor Pro también incluye su propio widget de formularios.

Plugins para SEO

Aquí sin duda el líder es Yoast SEO, que es muy completo para todo lo que respecta a SEO. Además puedes usar otras alternativas como SEOPress.

Plugins para integración con redes sociales

En este área hay cientos de plugins que pueden venirte bien y, como decimos, funcionarán casi con absoluta certeza dentro de Elementor. Algunos ejemplos son:

• Smash Balloon Social Photo Feed
• Social Warfare

Además, Elementor Pro también incluye herramientas diversas para integración con redes sociales.