Tutorial: crear Páginas Web con Elementor en WordPress

Elementor es un maquetador visual que sustituye el código de programación con el soltar y arrastrar, lo que hace accesible a todo el mundo el diseño y desarrollo web.

tutorial elementor wordpress

Desde hace un tiempo, este tipo de plugins han supuesto una revolución en el desarrollo web. Elementor, en concreto, aporta una manera de trabajar sencilla, intuitiva y muy visual, que facilita el trabajo a todo el mundo.

Y es que, estos plugins no son solo para aficionados, muchos diseñadores lo utilizan en lugar de lenguajes como HTML y CSS, debido a los resultados conseguidos de una manera tan versátil como profesional.

Además, tiene muchísimas funcionalidades adicionales, como las relacionadas con WooCommerce, en la versión de pago o el seguimiento de tráfico de a web.

Si lo que estás buscando es crear una página bonita, profesional y hacerlo tú mismo, ¡estás en el sitio adecuado! Además, con la versión gratis, “Elementor Page Builder”, tendrás más que de sobra para conseguirlo.

Qué es Elementor y por qué utilizarlo

Elementor es, probablemente, uno de los más conocidos para la maquetación de páginas webs. Se trata del plugin de diseño más cómodo y fácil de usar, que cuenta con 5 millones de instalaciones activas.

Gracias a Elementor, tenemos todas las funcionalidades necesarias en un solo plugin, sin necesidad de saber código de programación HTML, CSS y PHP, y pudiendo sustituirlo por el “arrastrar y soltar”.

El editor propio de WordPress, Gutenberg (desde 2018) está bien para la edición, por ejemplo, de posts, pero se queda muy corto cuando queremos hacer un diseño más sofisticado. Elementor se integra en este editor y nos lleva a solo un clic a la página de edición.

Página principal del editor, donde vemos el enlace a Elementor.

Además, cuando estamos editando una página, podemos ver en la misma pantalla los cambios realizados al instante, lo que nos va a ahorrar muchísimo tiempo de edición.

Otra de las grandísimas ventajas de Elementor es que tiene plantillas ya prediseñadas y al alcance de todos. Se encuentran en la llamada “Biblioteca”, y que puedes descargarte y utilizar como quieras.

No es necesario utilizar toda la plantilla, puedes modificar las partes que consideres, o modificar la letra, el color o el tamaño y disposición de los elementos.

Aparte de las plantillas enteras, tienes a tu disposición bloques aislados, que podrás combinar entre ellos.  Es muy recomendable echarlas un vistazo, aunque sea como inspiración. ¡Son muy bonitas!

Catálogo de plantillas que pone a nuestra disposición la Biblioteca de Elementor.

El plugin permite que, después de diseñar tus propias plantillas, las guardes en tu biblioteca, cosa que resulta súper útil para crea tu página web. Podrás utilizarla donde y cuando quieras.

Elementor gratis vs Elementor de pago

Como en la mayoría de plugins de WordPress , existe una versión de pago y otra gratis que, dependiendo de tus objetivos y tu experiencia te puede compensar.

Aunque el plugin gratis, “Elementor Page Builder” resulta sorprendentemente completo. Tiene lo que necesitas para diseñar tu página web, aunque siempre dependerá de los objetivos.

Si vas cogiendo más experiencia y ves que necesitas ampliar funcionalidades, siempre puedes evolucionar al plugin de pago.

Descripción del plugin Elementor con enlace para su descarga o actualización.

Una de las mayores diferencias entre ambas versiones, es que la versión gratis se adapta al tema que estás utilizando. Es decir, el tema o plantilla que tengas en WordPress, marca la estructura y apariencia del sitio en cuestión. Y Elementor construye el cuerpo, el contenido.

Es cierto que las características de Elementor Page Builder lo hacen un plugin bastante bueno, en el que podemos, entre muchas otras cosas, guardar bloques enteros como plantillas y usarlos cuando queramos. Además, es muy visual e intuitivo, por lo que diseñar tu web será muy fácil (y divertido).

¿Te dedicas al diseño web pero no consigues hacerlo rentable?

Pues entonces descubre el curso gratuito que te hubiese cambiado la vida cuando empezaste como diseñador web freelance.

Haz clic en el botón de abajo para descubrir:

  • En qué estás fallando. ¿Por qué otros viven de esto y a ti te cuesta tanto?
  • Los secretos para adelantar a tu competencia por la derecha.
  • Cómo multiplicar por tres tus ingresos sin hacer más webs, ni subir precios.
  • 16 palabras y mensajes de venta que todo diseñador debería borrar de su web.
  • Cómo hacer páginas web de 400€ en menos de 4 horas.

Y estos son sólo 5 ejemplos de un total de 18 vídeos con más de 5 horas de grabación totalmente gratis (sí, gratis de verdad).

Pero como era de esperar, el plugin de pago “Elementor Pro” es más extenso que la versión gratuita.

Tiene más de 80 elementos o widgets y trabaja toda la web, sin plantilla previa, por lo que puedes diseñar tanto la cabecera como el pie de la página desde cero, es decir, anula y trabaja sobre el tema que tienes activado.

Para las tiendas virtuales de WooCommerce, como el control de ventas o Llamadas a la acción (CTAS ), por lo que, si tienes un negocio de venta online está bastante recomendado, con objetivo de monitorizar el tráfico del sitio de una forma fácil y sencilla. También cuenta con creador de popups y formularios.

Es cierto, que la mayoría de las funcionalidades añadidas que no son de diseño, se podrían sustituir por otros plugins gratuitos, pero con la versión Pro tienes todo en uno.

Como crear nuestra página con Elementor en WordPress

Lo primero que debemos hacer es instalarlo y activarlo. Si no recuerdas cómo, aquí te dejamos un post que habla sobre ello:

Una vez que esté instalado, si es la primera vez que lo usas, en el apartado que se ha creado “Elementor” aparecerá lo siguiente:

Si es tu primera vez con Elementor, haz clic en “Crea tu primera página”.

Si todavía no tienes una página creada, puedes hacer clic en “Crea tu primera página”, y el plugin te creará una de cero. Recuerda que la cabecera y el pie de página será el que tengas establecido.

Si ya tenías una página creada, ve a ella pinchando en el apartado “Páginas”. Selecciona la que quieras editar. En la parte superior de la pantalla, aparece “Editar con Elementor”. Como vimos antes, al hacer clic sobre el botón azul iremos a su página de edición.

Una vez dentro de la página de edición, veremos nuestra página a editar, con la cabecera y pie de página que tengamos en ese momento. A la izquierda tenemos el panel de ajustes, con el que insertamos los widgets y los retocamos.

Página de edición de nuestro sitio web con Elementor.

Por el momento, vamos a empezar comprendiendo cada uno de los elementos que podemos ir añadiendo, así como las plantillas que hay disponibles.

Plantillas y elementos de Elementor. Características de este plugin WordPress

Como ya hemos dicho en varias ocasiones, lo mejor de Elementor es lo fácil que resulta su interfaz, ya que podemos diseñar nuestra página “soltando y arrastrando” elementos.

Pero ¿qué se considera como elementos?

Cómo trabajar con secciones

Estos son las unidades básicas que van a formar nuestra web. Es decir, el título, una imagen o un icono. Los encontramos en el panel izquierdo y solo tenemos que arrastrar a una sección o columna.

En este ejemplo, hemos arrastrado un encabezado, un editor de texto y un botón. Hemos añadido relleno en la columna para que aparezca centrado.

En este ejemplo hemos añadido un Encabezado, un Editor de texto y un botón.

¿Y las secciones y columnas? Las secciones constituyen otra unidad básica, pero de estructura. Son las “cajas” donde van a ir los elementos. Pero dentro de las secciones, pueden ir una, dos o las columnas que queramos.

Cuando queramos añadir una sección, debemos ir a la plantilla y hacer clic en “+”. Nos pedirá que elijamos la disposición de la plantilla.

El catálogo de las diferentes estructuras que puede tener nuestra plantilla.

Dentro de cada sección, pueden ir las columnas que queramos. Incluso después de haber seleccionado un tipo de estructura al principio, podremos retocarlo cuando queramos.

Como ir a ajustes

Una vez que conocemos los elementos básicos y la estructura que puede tener, vamos a ver cómo podemos ajustar las medidas de esos elementos dentro de las secciones.

Cuando hacemos clic y dejamos seleccionado un elemento, una columna o toda la sección, vemos que el borde se pone de color azul y aparecen tres opciones en la parte de arriba. La del medio es la que nos abre los ajustes.

Cuando dejas seleccionado una sección, se remarca el borde en azul.

El panel de ajustes aparecerá en el margen izquierdo de la pantalla. Tenemos la disposición, donde modificamos las alineaciones de los elementos contenidos, el estilo, donde modificamos el color, tamaño, interlineado… todo lo relacionado con el estilo.

Finalmente tenemos las opciones avanzadas, con las que ajustaremos el relleno de las secciones y los márgenes.

Como trabajar con los elementos

Para ir añadiendo los elementos, solo tendremos que poner en práctica el “arrastrar y soltar”, llevándolo a una de las secciones.

En este ejemplo vemos, una sección, que contiene una columna y esta a su vez contiene un botón.

Ejemplo de un botón en medio de una sección.

Como trabajar con plantillas

Como dijimos antes, una de las grandísimas ventajas de usar Elementor es poder guardar nuestras plantillas y usarlas tantas veces como queramos.

Para acceder a las plantillas ya diseñadas por Elementor, debemos hacer clic en el icono que aparece en la página de edición, que es como una carpeta.

Página de edición de nuestro sitio web con Elementor.

Cuando es la primera vez que accedes, te pedirá que te registres para conectarte a la biblioteca de plantillas. Haz clic en “primeros pasos” y te llevará a una ventana de login. Es gratuito, rápido y muy fácil, solo introduce un correo electrónico y una contraseña.

Portada de la Biblioteca de Elementor.

Y ahora, ¡a diseñar!

Puedes insertar una plantilla y modificar todo lo que quieras; el tipo de letra, el tamaño, insertar más fotos o quitarlas; o simplemente usar los miles de plantillas como inspiración.

Hemos seleccionado una plantilla y la hemos importado a nuestra landing page.

Cuando selecciones una plantilla entera, se cargará automáticamente todos sus bloques. Puedes quedarte con los que quieras, o añadir entre medias los tuyos.

Para poder aprender esto con mayor profundidad, te dejamos este vídeo en el que se explica este proceso de una forma más completa:

Como estructurar el contenido de la página web y portada con Elementor

Se dice que una buena landing page convierte sola. Y es verdad.

Sea cual sea tu negocio, resulta imprescindible tener una página de bienvenida con gancho, y para ello, debemos tener una portada y una estructura brillante.

Lo primero que debe tener una página es el encabezado, con el título de nuestra página y yo  te recomiendo un fondo multimedia, ya que al cliente le va a resultar más llamativo.

Después, es muy recomendable describir de una forma sutil y sencilla los servicios que ofreces, seguido de algunos testimonios y el contacto. Los testimonios de clientes satisfechos siempre suponen un plus para tu negocio.

Todo esto podemos hacerlo de una forma muy fácil con Elementor, pudiendo ser cada apartado un bloque de la plantilla.

Para conseguir ese toque personal y creativo podemos configurar el título y texto con la fuente que nos guste más, así como el tamaño o el interlineado. Solo tienes que seleccionar el elemento que queremos cambiar, ir a estilo, y ahí se modifican ambos parámetros.

Ajuste de estilos de la sección.

Si te resulta difícil elegir la fuente de tus textos desde el editor, prueba con Google Fonts. Es una página de la plataforma en la que, como puedes ver en la foto, te muestra numerosos tipos de tipografías.

Así, de un vistazo rápido puedes escribir tu frase, elegir el tamaño e ir haciendo scroll para ver todos los tipos de fuentes. Aunque no todas las fuentes se encuentran en Elementor, sí lo están la inmensa mayoría.

Catálogo de fuentes de Google Fonts.

Otro punto básico es el orden y la disposición de los elementos. Es muy recomendable que ajustes los espacios de tu página, para que se lea desde cualquier dispositivo y no estén todos demasiado juntos. Ve a ajustes avanzados y establece los parámetros que consideres.

Ejemplo de ajustes avanzados, en el panel de la izquierda.

¿Te acuerdas de que antes aprendimos a guardar plantillas ? En el vídeo que te dejamos a continuación, puedes ver como implementamos plantillas ya creadas para los apartados de Servicios y Testimonios.

¿Qué es un diseño responsive y cómo hacerlo con Elementor?

Es un diseño que adapta los contenidos de una web a los tamaños de las pantallas de todos los dispositivos.

Este tipo de diseño es fundamental, ya que el tráfico viene tanto de teléfonos móviles como de ordenadores. Por lo que, si no tenemos bien configurada la vista para uno de los tipos del dispositivo, podremos perder muchos usuarios.

Si necesitas un hosting para tu web o tu blog, ¡actúa!

Aviso: estas ofertas son válidas ahora, pueden vencer en unos pocos días.

Como hemos estado diseñando con la versión gratis de Elementor, que trabaja junto con el tema de WordPress que tengamos, debemos ajustar tanto esta plantilla (que marca la estructura de la página), como el contenido en Elementor.

La primera adaptación la hacemos en el menú principal de WordPress, en “Personalizar”, y el segundo dentro de Elementor.

Como todo esto puede resultar un poco “lioso” si es la primera vez que lo haces, te recomiendo ver este vídeo, en el que se explica mucho más detalladamente y paso a paso:

¿Qué es una conexión segura SSL y como hacerla con Elementor?

La conexión segura SSL sirve para proteger la información que navega desde nuestro ordenador hasta el servidor, como las contraseñas de nuestros usuarios.

Se identifican porque su URL comienza por HTTPS  (y no por HTTP), y en muchos navegadores, también aparece un candadito.

En la barra del navegador aparece un candado tachado indicando una conexión insegura.

El principal problema de esto es que cuando un sitio web tiene un enlace HTTP, el navegador avisará al usuario de que no es un sitio seguro, por lo que podemos perder mucho tráfico al no resultar una web confiable.

Cuando hacemos la portada con Elementor es habitual que suceda si utilizamos imágenes o plantillas de la biblioteca, pero se puede arreglar con un sencillo paso que no te llevará más de 5 minutos, sustituyendo la URL. Puedes aprender a hacerlo siguiendo el vídeo que te dejamos a continuación.

Conclusión

Elementor Page Builder es uno de los mejores plugins para diseño, maquetación y desarrollo web, debido a su facilidad, pero con un alto nivel de profesionalidad.

Ha conseguido dejar atrás la necesidad de conocer código de programación para ser nosotros los creadores de nuestro sitio web.

Además, tenemos acceso a miles de plantillas que nos sirven de inspiración, e incluso podemos descargar para utilizarlas como queremos.

Su versión gratis es suficiente para casi todo el que quiera aplicarla a su negocio o blog personal, consiguiendo unos resultados profesionales.

Sin embargo, es necesario ajustar algunos parámetros un poco más técnicos antes de empezar, como la conexión segura SSL o aplicar el llamado “diseño responsive”. Con los vídeos que se han ido detallando no tendrás ningún problema, está todo explicado paso a paso y con ejemplos prácticos.

Acerca del autor: Lucía Berlanga

Soy colaboradora de este blog. Me he formado en el tratamiento de datos, desde su extracción, al análisis y visualización, y disfruto mucho con el desarrollo web.

He trabajado en diferentes sectores, pero desde hace un tiempo enfocada a diseño y desarrollo web, junto al marketing digital. Por eso, en este blog hablaremos mucho sobre tecnología y SEO, entre otras muchas cosas :)

Deja un comentario