
Todos pasamos por lo mismo, eres nuevo en WordPress y necesitas crear tu página web pero entiendes tan poco que no sabes por dónde empezar ¿verdad?, te presento a Elementor Page Builder, la herramienta para crear tu página web tan solo arrastrando y soltando. En este post te explicare como usar Elementor para editar tu plantilla de tu tema en WordPress.
¿Qué es Elementor?
Elementor es un editor de bloques, que te permite modificar el HTML, CSS y Javascript sin necesidad de tener ningún conocimiento de programación.
Consiste en una galería de widgets que puedes ir arrastrando y soltando en tu pagina web para después editarlos como tu quieras.
¿Cómo instalar Elementor?
Su versión gratuita se puede instalar desde el mismo WordPress, solo nos vamos a la pestaña de Plugins > Añadir Nuevo. Luego buscamos “Elementor” y aparecerá el plugin, lo instalamos y activamos.

Su versión gratuita trae algunas limitaciones, entre ellas menos widgets para usar. Dependiendo de lo que necesites editar o agregar en tu pagina tendrás que pagar una licencia.

¿Cómo editar tu tema con Elementor Page Builder?
Antes que nada asegúrate que tu tema sea compatible, muchas veces sucede que elegimos un tema que no funciona con nuestro maquetador. Ve a la página del tema e investiga un poco sobre con que editores es compatible tu tema.
Los temas mas usados con Elementor son Astra y Generate Press. De todos modos te dejo aquí un post donde puedes ver 18 Mejores temas para elementor
Como usar Elementor para comenzar a editar
Una vez instalado Elementor ya debería aparecernos una opción en las páginas de nuestro tema “Editar con Elementor”.
Aquí en donde nos enviara a la interfaz de Elementor, en la barra de la izquierda tendremos los widgets y a la derecha la pagina web.

Elementor es cómo manejar una bicicleta, puede parecerte complicado al principio pero luego le vas agarrando el truco. Es muy intuitivo solo das click en lo que quieras editar y en la barra lateral aparecerán las opciones a editar. Arriba de todo siempre hay tres opciones:
- Contenido: Es todo el contenido del widget, aquí es donde se encuentra la mayor parte de lo editable; como texto y enlaces. Hablando de forma técnica aquí se editaría el HTML.
- Estilo: Aquí se edita como se verá el contenido, colores, alineación, bordes. Básicamente el CSS.
- Avanzado: Aquí te darán otras opciones más complejas, entre ellas unas relacionadas con código, pero también puedes editar animaciones, el margen y relleno de tu widget.
Como usar las columnas en Elementor para alinear los widgets
Al entrar en elementor es posible que te pase como a mí la primera vez que use elementor, ¡no puedes encontrar donde colocar tus widgets uno al lado de otro!
Tranquilo, aquí estoy yo para enseñarte de mis errores, para hacer esto colocamos columnas en esta parte:

Damos click en ese botón y nos aparecerá esta interfaz:

Aquí elegimos en cuantas columnas queremos que se dividan nuestro bloque, yo quiero que sea en dos partes iguales. Es una forma rápida de hacerlo, también podemos editar los valores de forma manual de esta manera:

Como usar Elementor para adaptar tu diseño a diferentes dispositivos (responsive)
Luego de que colocamos nuestros widgets, viene el tema del responsive. Esto se trata de como hacer que un tema de wordpress se vea bien en teléfono y tableta, no solo en usuarios de ordenador. Con esta opción al fondo del sidebar tenemos esta opción en la que por defecto se muestra un monitor:

Click en ella y aparecerá el menú donde podemos probar como se verá en los diferentes dispositivos.

Así es como se adapta el diseño en Elementor, pero aquí tengo un problema que puede pasarte en algunos casos de User Experience: como pueden ver el texto que le puse al widget aparece de primero y el icono de segundo, pero no quiero que sea así, lo necesito al revés primero el icono y luego el texto. ¿Pero cómo lo hacemos sin afectar al tamaño de ordenador?, ¡muy simple! porque Elementor nos da tan solo un interruptor para resolverlo. Primero damos click en la caja para editarla:

Luego en el sidebar nos vamos a la pestaña de “Avanzado” y damos click en “Adaptabilidad” en las primeras opciones hay dos interruptores: “Invertir columnas en tableta”, “Invertir columnas en móvil”, activamos la de dispositivos móviles ya que en mi caso quiero mantener el diseño original en tablet. Luego ya podemos ver que en móvil se invierte:
Como usar las plantillas para los bloques re-utilizables en Elementor
Esto es algo que muchos novatos pasan por alto, y es muy importante porque a futuro esto nos va a ahorrar muchísimo trabajo, y no exagero. Lo que te podría tomar 15 minutos lo puedes ahorrar a tan solo 3, y puede aumentar más el tiempo dependiendo de lo grande que sea tu web.
Las plantillas nos sirven como ayuda, imagina tienes un lápiz mágico que puede dibujar y borrar en miles de hojas la mismo tiempo. Eso es básicamente nuestra plantilla, podemos colocar un texto en toda la web y desde la plantilla podemos cambiarle el color, su redacción en un solo lugar sin tener que editarlos uno por uno.
La primera vez que creé una web pase horas arreglando lo que pude solucionar en 5 minutos, no te miento. Y todo por que desconocía de la función de las plantillas.
Para que lo entiendas mejor te pondré un ejemplo:
Tengo un anuncio de un nuevo post que saqué, y lo quiero colocar por toda la web. Ahora aquí te estarás preguntando cómo hacerlo, hay dos maneras: La que funciona pero es problemática a futuro, y la segunda que es la correcta. Así de simple.
La primera es que te menciono es copiar el widget y pegarlo en las partes que queremos que se muestre, el problema con esto es que si lo quieres editar vas a tener que editar todos los anuncios que pegaste por toda tu web.
¿Ya estas comenzando a ver el problema? Así sea porque te falto un acento en un palabra, o quieres cambiar el color de tu widget. Vas a tener que repetir todo el proceso en todos los luegares que los pegaste.
Ahora probemos con la segunda opción, quiero colocar el anuncio del post pero pruebo a usar las plantillas. Pero te explicare el procedimiento:
Creamos la plantilla y la configuro como “Sección” y coloco el nombre de “Anuncio de Post”.
Nos cargará elementor, notaras que es como una página cualquiera, aquí colocare mi widget del anuncio y lo publicaré.

Ya tenemos nuestra plantilla configurada, ahora llega el momento de colocarla en los lugares en los que queremos que se muestre ¿cómo lo hacemos?, en el sidebar de elementor buscaremos un widget que se llama “Template” o “Plantilla”. Lo colocamos y lo editamos.
Nos saldrán estas opciones bastantes simples a comparación de los demás widgets, solo tenemos que dar click en el select y escribir en el buscador el nombre de la plantilla, que en mi caso es Anuncio de Post.
Verás que automáticamente se coloca, pero no te deja editarla, te obliga a irte a otra página de elementor para editar la plantilla. Repite el proceso en todos los lugares que quieres que se vea tu plantilla con el widget Template.

Yo tengo mi plantilla en dos lugares distintos de la web, en la página de inicio y la pagina del blog. Ahora haré un cambio en mi plantilla, Cambiare el color de fondo gris a uno azul.
Como pueden ver solo actualicé la plantilla y automáticamente me actualizó en las dos páginas. Pero esto no vale solo para eso.
Imagínate que quieres cambiar este anuncio, ya no quieres promocionar ese post y en cambio, quieres colocar un bonito anuncio hacia tu servicio de diseño web. Para esto solo nos vamos a nuestra plantilla de nuevo y la modificamos, automaticamente se cambiara en toda tu web de nuevo.
Pero usar los bloques re-utilizables depende de tí, porque eres tú el que decide que vas a colocar en tu paágina, trata de identificar cuando debes hacer uso de las plantillas para que te ahorres un montón de problemas.
Bueno llego la hora, ya te di todos los consejos que hubiera querido que alguien me diera cuando comencé a usar Elementor. Con esto ya eres capaz de editar tu plantilla y agregar pequeñas cosas a ella. ¡Así que ponte a ello!
Agradezco mucho que hayas llegado hasta aquí, ¿qué tal si compartes este post en tus redes? Quién sabe, quizás a través de ti alguien encuentra la solución a su problema.