Si has pasado horas y horas rebanándote los sesos para recrear en tu web ese diseño tan de moda últimamente que haz ojeado en otras webs (sólo para inspiración, claro está 😉 ), pero no encuentras las herramientas en WordPress para hacerlo, te presento a: Elementor Page Builder.
Con este plugin podrás diseñar y personalizar tus páginas en WordPress saliéndote del diseño general de tu tema sin que tengas que escribir una sola línea de código.
No te pierdas este artículo, donde te muestro los fundamentos de este plugin. La imaginación será tu límite.
Contenido del post
¿Para qué quiero a Elementor Page Builder?
Es muy posible que te preguntes: ¿Para qué quiero yo hacer páginas personalizadas?, ¡Para eso no pasé horas seleccionando un tema en WordPress!, la respuesta es sencilla: aunque tengas un diseño general que se establece en el tema de WordPress, es casi seguro que quieras hacer páginas que se salgan de ese esquema.
Un ejemplo de esto es mi web. Todas las entradas de mi blog (donde estas ahora 
), son consistentes en el diseño, lo cual le da homogeneidad cuando lo lees, pero si te fijas en mi página principal, observarás que tiene un diseño muy distinto, donde los bloques y el uso del ancho de la pantalla predominan.
Esto se hace por múltiples razones, en mi caso porque quiero ofrecer mis servicios en la entrada de mi web y ese diseño en particular denominada Pagina de aterrizaje o por su palabra más común: Landing Page, favorece esa actividad. Se olvida de elementos distractores y se enfoca en lo que quiero ofrecer.
Igual pasa con la página Sobre mí.
Con este ultimo serian son tres diseños diferentes en un solo sitio web. Pueden existir cuantos quieras en tu estrategia de posicionamiento y ventas.
Para hacerlas sin este plugin necesitarías tener templates específicos, echar mano de código CSS, HTML, Javascript; por poner algunos poco ejemplos.
Para hacer más sencilla esta tarea se creó Elementor Page Builder. Es un plugin que cuenta con herramientas de diseño web para hacer las páginas personalizadas según tus deseos, y sin necesidad de una sola línea de código. ¡Ha!, se me olvidaba: es gratuito 😎 .
Por supuesto que no es el único Page Builder que existe en la actualidad. Por citar algunos de ellos: Page Builder by SiteOrigin, Thrive Content Builder, Beaver Builder, Live Composer.
Ventajas de Elementor
- Es gratuito: la versión básica que cuenta con la mayoría de las funcionalidades no te costara nada. Tiene una versión de pago que agrega opciones adicionales. Tú decides.
La mayoría de los mejores editores son de pago; por fin conseguí tener lo mejor sin tener que desembolsar nada.
- Rápido: su código en muy limpio, con lo que consigues tiempos de carga cortos en tus paginas personalizadas.
- Arrastras y sueltas: cuenta con una interfaz simple donde solo tomas los elementos que desees, los arrastras al editor y listo.
- Muchos widgets: los elementos fundamentales que se usan en el diseño web actual están presentes: botones, iconos, divisores, bloques, testimonios, vídeos, etc.
- Editor en tiempo real: sin necesidad de esperar para ver cómo vas avanzando en tus creaciones; todos los cambios los observas sobre la marcha.
- Multidiomas: está traducido a más de 10 idiomas. Por supuesto, está en español.
Ajuste de Elementor
Puedes descargar Elementor Page Builder desde este ➡ enlace e instarlo en Wordpres. También puedes hacerlo directamente en el backend desde el menú izquierdo: Plugins > Anadir nuevo, introduciendo “Elementor” desde el buscador de la herramienta.
No olvides activarlo al finalizar la instalación.
Para ajustar el plugin en sus opciones básicas vamos a: Elementor > Ajustes, en el menú izquierdo.
Encontrarás varias opciones disponibles, las cuales seleccionarás según tus necesidades.
Te recomiendo selecciones la casilla Páginas en los Tipos de entradas, ya que la opción Entradas corresponde a las páginas del blog, el cual por lo general es cronológico y cuyo diseño debe ser homogéneo.
Puedes restringir quien hace uso de este plugin, de acuerdo a los usuarios que tengas habilitados en tu WordPress en Roles excluidos.
Si vas a delimitar el ancho de la página en Elementor, coloca el valor en pixeles en el campo Ancho del contenido. Déjalo en blanco para que use todo el espacio disponible.
Este valor depende mucho de cómo este configurado el tema que uses en WordPress en cuanto al ancho de página. Es recomendable tener una plantilla full width como esta (si es que tu tema no cuenta con una) para cuando quieras un lienzo en blanco sobre el que trabajar.
Creando tus páginas personalizadas
El plugin trabaja directamente en el editor de WordPress. Basta con que crees una nueva página o entrada (de acuerdo a tus ajustes) y hagas clic al botón Editar con Elementor.
Esto nos llevará al editor de Elementor, donde encontraremos todas las herramientas para construir nuestras páginas.
Si deseas crear una página que ocupe todo el ancho de la pantalla, es necesario tener disponible en WordPress una plantilla full width, tal como te expliqué antes. Debes seleccionarla en la sección Atributos de página del editor de WordPress. Este se encuentra a la derecha. Guarda los cambios para que se aplique. Interfaz
Elementor cuenta con una interfaz bastante simple: los widgets de diseño a la izquierda junto con los ajustes, la vista de cambios en la página en tiempo real se ubica a la derecha.
- Widgets: aquí están ubicados los diferentes agregados de diseño con que cuenta el plugin, tanto los nativos de WordPress como de Elementor. En WordPress.org encontrarás adicionales, como este.
- Vista de página: muestra los cambios en tiempo real que realices al diseño web de acuerdo a los widgets que vallas colocando. Si haces clic al botón Agregar nueva sección tendrás acceso a definir las secciones que a su vez contienen columnas. Con Añadir plantilla, podrás escoger entre una variedad de páginas preconfiguradas.
- Ajustes globales: todo lo que afecta la configuración global de Elementor lo tienes disponible en este apartado: colores, fuentes, ajustes varios.
- Salir: tendrás una vista previa de cómo irá quedando tu diseño en el botón Ver Página, así como salir del plugin y volver al editor de WordPress con el botón Ir al escritorio.
- Modo adaptable: si quieres observar como quedaría la página en distintos dispositivos como el celular o tableta, en esta opción podrás hacerlo.
- Plantillas: otra manera de acceder a las plantillas preconfiguradas del Elementor, así como guardar el diseño actual en la biblioteca.
- Guardar: como su nombre lo dice, no pierdas tus cambios, guárdalos con este botón 😆 .
Arrastrar y soltar
Para comenzar a crear, solo arrastra desde el menú de widgets a la izquierda dentro de las secciones que hayas creado.
En la esquina superior derecha, tendrás la edición de cada widget, así como duplicarlo y quitarlo. Cuando lo edites, las opciones disponibles son visibles en la pantalla de la izquierda. Haz clic en cualquier espacio fuera de la sección para tener acceso nuevamente a todos los widgets.
Las secciones ocupan todo el espacio disponible por defecto, mientras que las columnas son las divisiones dentro de las secciones. Las secciones se apilan una debajo de la otra.
Puedes ajustar el tamaño de las columnas con el ratón. Es un proceso intuitivo y muy sencillo.
Ojea las opciones disponibles dentro de cada widget, así como las pestañas de Estilo y Avanzado para ajustes como el color, tipografía, bordes, márgenes, entre muchas otras. Las opciones de personalización son variadas.
Para finalizar
Elementor Page Builder es una de los plugin estrella de WordPress en la actualidad en el segmento de creadores de páginas. Les ha pasado por encima a antigüas vacas sagradas como el Page Builder by SiteOrigin 😀 . Se nota que está muy bien hecho y la dedicación que le han puesto sus creadores. No debería faltar en tu WordPress.
Bueno hasta aquí nos trajo la corriente, espero sea de ayuda este artículo y a comentar se ha dicho.
Fundador de VivaBlogger y cofundador de EVirtualplus. Soy un tecnomaniaco desde que estaba en pañales. Mi familia es el fundamento de mi vida. Sígueme en mis redes sociales.
Hola, he instalado el tema de wordpress, luego el me a aconsejado instalar el elementor, solo que cuando le doy a elementor comenzar y creo mi pagina el me crea una sub pagina con mi dominion/elementor#unnumero y pues me gustaría que la pagina que estoy creando en elementor quede como la pagina de inicio de mi sitio web, he buscando en wordpress pero no he encontrado como dejarla como pagina de inicio, agradezco tu respuesta, es para un trabajo de la universidad y me esta sacando canas
Hola Fernando.
Las pagina de inicio se define en WordPress: Ajustes > Lectura. Ahí marcas la opción: Una página estática (seleccionar abajo), y del menú descolgable que pone Portada, seleccionas las pagina que creaste con elementor.
Esta quedara como tu pagina de inicio.
No olvides guardar los cambios 😉
Saludos.
Hola, he diseñado una landing con elementor pero no consigo que se vea en la web. En el administrador de wordpress no me aparece como página ni como entrada. Dentro del pluging elementor sí puedo acceder y previsualizarla, pero no se me publica. Sabes por qué puede ser? Gracias
Hola Roberto.
Si no puedes verla en el administrador de wordpress como pagina o entrada, ¿Como puedes editarla?.
Lo que puedes ver desde elementor son las plantillas, ¿Es posible que estés creando plantillas en ves de entradas o paginas?
Saludos.
Buenas noches, gracias por la información.
Estoy teniendo inconvenientes con el uso de los roles de usuarios con el plugin. Solo me permite editar el contenido con el usuario administrador. Quiero que el usuario gestor de tienda también pueda editarlo. En la zona de restringir el acceso esta habilitado el gestor de tienda, pero aún asi no me permite.
Por que puede ser?
Gracias!!
Me alegra leerte Paula.
Los usuario que pueden editar en Elementor, se definen en: Elementor > Gestor de perfiles.
Haz intentado habilitando la edición con otro usuario que no sea gestor de tienda, para comprobar que el problema no se deba al plugin WooCommerce (el cual supongo usas).
Buenas,
te he escrito con un problemilla pero ya lo he solucionado. Por si a alguien le pasa lo mismo, el problema era que he accedido directamente a elementor, en vez de crear la página en wordpress y editar con elementor. Ahora he seguido tus pasos y ya está resuelto.
Muchas gracias y enhorabuena por tu post!!!
Vaya que me alegro por ti Carlos.
Un abrazo.
Hola, he diseñado una landing con elementor pero no consigo que se vea en la web. En el administrador de wordpress no me aparece como página ni como entrada. Dentro del pluging elementor sí puedo acceder y previsualizarla, pero no se me publica. Sabes por qué puede ser? Gracias
Hola, como se puede migrar de un servidor a otro un sitio web construido con elementor?
Debes migrarlo como harías con cualquier otra pagina web estática o con CMS. Te dejo mi guía de como hacerlo.
Saludos Adolfo.
Hola que tal, sabrás por que no funciona el ancho completo con la opción “elementor fullwidth standard”… por mas que aplico también las opciones de este tutorial tampoco me lo habilita.
Hola aaron.
Depende mucho del tipo de tema que uses.
Prueba con este otro plugin que tiene también tiene plantillas Fullwidth para elementor
Espero te ayude.
Hola! Muchas gracias, me ha servido de mucho. Ahora solo me queda una cuestión: quiero que mi web tenga una sección de blog y no consigo montarlo de una forma atractiva ya que no sé por qué no me aparece el atributo de página típico de “post page” en la página que he denominado “blog”. Entiendo que es por algo de Elementor no? Uso el tema Sydney.
Gracias!
Hola Nola.
No entendí claramente tu pregunta.
Pero si te puedo decir que Elementor no modifica por defecto las paginas de los post, estos usan el estilo que tu tema, que en tu caso es Sydney.
En el comentario que respondí a Carlos Cordoba antes puse un link para el plugin que agrega elementos para cambiar entradas.
Si me das mas detalles es posible pueda ayudarte de mejor manera.
Saludos.
Una pregunta, resulta que he realizado una página con elementor, despues de haber realizado muchos cambis y guardarlos, ahora intento cargarla con elementor y me dice que la página no existe, pero si la puedo abrir desde la web, es dicir no me deja entrar para modificarla. Como se puede solucionar eso?
Gracias
Hola Francisco.
Si esta publicada en tu WordPress, deberías encontrarla en Paginas y editarla desde ahí.
Intenta duplicar la pagina con el plugin Duplicate Post y prueba a editar la copia.
Si no funciona en la pagina de soporte del elementor, puedes plantear tu problema.
Espero esto te ayude.
Buenas Noches, gracias por tu articulo, ayudame en algo, después de tener el diseño hecho con ELEMENTOR, como se logra publicar la pagina en wordpress?? gracias por tu ayuda
Que tal Carlos.
Elementor sirve para crear sobre todo paginas estáticas, las cuales puedes enlazar con las entradas dentro de tu web, o mediante menus, como los que aparecen en la barra de navegación.
Para publicarlos simplemente, lo diseñas y le das a Publicar en WordPress, como cualquier página del blog.
Elementor necesita apoyarse en el tema que usa tu WordPress (al menos hasta la fecha) para el contenido dinámico.
Puedes crear elementos dinámicos con Elementor, pero necesitarías plugins como por ejemplo AnyWhere Elementor que en su versión de pago da muchas opciones adicionales para jugar con el diseño de tu web.
Saludos.
Hola! enhorabuena por tu post
¿Una pregunta.. se puede diseñar con elementor la página de resultados de búsqueda?
Hola Oscar. Con el plugin de pago AnyWhere Elementor pro se puede hacer.
Aquí te dejo una guía donde muestra como hacerlo.