Un sitio web bellamente diseñado puede crear una gran primera impresión. Sin embargo, construir un sitio de primera categoría no siempre es fácil, especialmente si no tienes experiencia previa en diseño o desarrollo.
Ahí es donde entra en juego el constructor de sitios web de WordPress Elementor. Si optas por este plugin moderno y fácil de usar, podrás crear un sitio web impresionante sin escribir una sola línea de código.
Este artículo cubrirá todo lo que necesitas saber sobre este popular constructor de páginas de WordPress. A continuación, te mostraremos cómo navegar por algunas de las tareas más esenciales de Elementor, como la creación de diseños, páginas e incluso plantillas personalizadas. ¡Empecemos!
Una introducción a WordPress Elementor
En los primeros días de Internet, la creación de un sitio web requería conocimientos avanzados de desarrollo y diseño web, o el acceso a un equipo de especialistas. Esto significaba que la creación de un sitio web requería mucho tiempo, a menudo era frustrante y potencialmente caro.
Gracias a los modernos creadores de páginas, ahora puedes crear un sitio web de diseño profesional y alto rendimiento sin necesidad de conocimientos especializados. Una vez que tu sitio está en marcha, puedes añadir contenido o cambiar el diseño en cualquier momento de forma rápida y sencilla, incluso si no eres un programador.
Hay varios constructores de páginas de WordPress, pero con más de cinco millones de instalaciones activas, el plugin Element or es uno de los más populares. Elementor te permite crear desde sitios web completos hasta páginas de destino individuales mediante un intuitivo editor de arrastrar y soltar.
Con Elementor, puedes controlar todos los aspectos del diseño de tu sitio web mediante una única plataforma. Así, tu sitio web puede reflejar perfectamente tu marca.
El editor intuitivo y sin código de Elementor es especialmente popular entre los propietarios de sitios web que no tienen experiencia en diseño y desarrollo. También es ideal para los emprendedores y las pequeñas empresas que tienen una idea para una empresa en línea, pero que no tienen necesariamente los fondos para contratar a un equipo de diseño o desarrollo dedicado.
Incluso si eres un profesional con experiencia, hay muchas razones para usar Elementor. El hecho de que tengas conocimientos de codificación no significa que sea conveniente crear siempre todo desde cero.
Elementor tiene un montón de funciones que te ayudarán a crear sitios web galardonados en menos tiempo. Esto incluye más de 90 widgets listos para usar y plantillas web diseñadas por profesionales.
De este modo, Elementor puede aumentar tu productividad y tus beneficios. Estas funciones de ahorro de tiempo pueden resultar especialmente lucrativas si construyes regularmente sitios web de WordPress (es decir, para desarrolladores autónomos y agencias de WordPress).
Elementor Free vs Elementor Pro
Elementor es un software «freemium». Puedes descargar el núcleo del plugin de Elementor de forma gratuita o comprar una licencia de Elementor Pro.
El plugin gratuito de WordPress viene con todo lo que necesitas para crear páginas de ventas visualmente atractivas, listados de productos, sitios web de empresas y mucho más. Incluye más de 40 widgets, 100 plantillas y más de 300 bloques. Los bloques son plantillas de secciones prediseñadas que puedes mezclar y combinar para crear diseños únicos.
Si quieres una funcionalidad más avanzada, puedes comprar Elementor Pro. Esto desbloquea algunos widgets adicionales, junto con el Constructor de Temas de Elementor.
Utilizando el Constructor de Temas, puedes editar casi todos los elementos del sitio, incluyendo la cabecera y el pie de página. También puedes crear diseños personalizados de posts y páginas de archivo.
Si estás desarrollando una tienda online, Elementor Pro también incluye un WooCommerce Builder. Puedes utilizarlo para personalizar el contenido de WooCommerce de tu sitio, incluyendo la página de productos, el archivo de productos y la página de pago. También obtendrás acceso a widgets diseñados explícitamente para impulsar las conversiones, como los de Añadir al carrito personalizado, las subventas y los productos relacionados.
Elementor Pro también viene con un Constructor de Popups y un Constructor de Formularios. Aunque hay plugins independientes que pueden ayudarte a crear formularios y ventanas emergentes, si optas por Elementor, podrás minimizar el número de plugins que tendrás que instalar y mantener.
Utilizar demasiados plugins puede hacer que tu sitio sea más vulnerable a los hackers. Incluso puede afectar al rendimiento de tu sitio web. Así que es una buena práctica minimizar el número que tienes instalado. Además, dado que estás diseñando todos los elementos de tu sitio utilizando la misma plataforma, debería resultarte más fácil conseguir un aspecto y una sensación coherentes.
Las licencias de Elementor Pro incluyen el acceso a más de 60 kits de sitios web profesionales. Se trata de paquetes de plantillas, páginas, ventanas emergentes y otros componentes que pueden ayudarte a crear un sitio web completo. Si adquieres una licencia Experto o superior, también tendrás acceso a 20 kits de sitios web expertos.
Además, todas las licencias Pro incluyen soporte técnico premium. Normalmente, recibirás respuestas del equipo de soporte especializado de Elementor en un día. Sin embargo, si optas por Elementor Pro Studio o superior, pasarás a tener soporte VIP. Esto te permite participar en chats en directo con el equipo de soporte VIP de Elementor. También recibirás respuestas prioritarias a tus tickets, que suelen llegar en menos de 30 minutos.
Si eres una agencia, un desarrollador o un diseñador, puede que te interese tener un perfil en la Red de Expertos. Allí podrás mostrar tu trabajo y llamar la atención de clientes potenciales.
Si estás interesado en anunciarte a través de la Red de Expertos, también te pueden interesar las licencias de Experto, Estudio o Agencia de Elementor Pro. Estas licencias te permiten crear un perfil en este popular mercado.
Los planes de Elementor Pro oscilan entre 49 y 999 dólares al año. La empresa también ofrece una garantía de devolución del dinero de 30 días, para que puedas probarlo antes de comprarlo.
Cómo instalar Elementor
Como es un plugin de WordPress, instalar Elementor es rápido y fácil. Puedes descargar el plugin gratuito directamente desde tu panel de control de WordPress.
Para descargar la versión gratuita, ve a Plugins > Añadir nuevo. En el campo de búsqueda, escribe Elementor. Cuando aparezca el plugin, haz clic en Instalar ahora.
Cuando se te pida, haz clic en Activar. El plugin añadirá una opción de Elementor a tu barra lateral de WordPress.
¡Ya estás listo para empezar a usar Elementor! Para empezar, simplemente haz clic en la opción de Elementor en la barra lateral.
También puedes descargar el plugin de Elementor directamente desde el repositorio de WordPress. A continuación, entra en tu panel de control de WordPress y ve a Plugins > Añadir nuevo > Subir plugin. A continuación, haz clic en Elegir archivo y selecciona el archivo .zip de Elementor que acabas de descargar.
Cómo conectar Elementor Pro a WordPress
Hay dos formas de conectar Elementor Pro a WordPress. Si aún no has comprado una licencia de Elementor Pro, tendrás que dirigirte al sitio web oficial y seleccionar Empezar.
A continuación, puedes seguir las instrucciones que aparecen en pantalla para crear una cuenta de Elementor. Cuando se te pida, introduce alguna información sobre el tipo de sitio web que quieres hacer.
A continuación, elige el plan que quieres comprar. Como Elementor requiere un sitio web de WordPress activo, tendrás que introducir el dominio de tu sitio. A continuación, Elementor realizará una comprobación para verificar que tu sitio utiliza la plataforma WordPress.
Suponiendo que tienes un sitio web de WordPress activo, el siguiente paso es hacer clic en Instalar Elementor. Se te redirigirá automáticamente a la página del plugin de Elementor si has iniciado sesión en tu sitio.
Cuando se te pida, haz clic en Instalar ahora > Activar. Elementor añadirá el plugin de construcción de páginas a tu sitio.
Como alternativa, si ya has comprado una licencia de Elementor Pro, dirígete al sitio web oficial e inicia sesión con los datos que has recibido en tu correo electrónico de confirmación.
En tu cuenta de Elementor, selecciona Suscripciones en el menú de la izquierda. A continuación, puedes hacer clic en Descargar Zip.
A continuación, entra en tu panel de control de WordPress y ve a Plugins > Añadir nuevo. Entonces podrás subir el archivo . zip de Elementor Pro que acabas de descargar.
Tras instalar y activar Elementor Pro, WordPress debería pedirte que introduzcas tu clave de licencia. También puedes ir a Elementor > Licencia > Conectar y activar.
WordPress debería verificar tu licencia automáticamente si has iniciado sesión en tu cuenta de Elementor. Si no lo estás, introduce tu nombre de usuario y contraseña de Elementor cuando se te pida que actives tu licencia.
Uso de Elementor: 4 tareas esenciales que debes dominar
Con Elementor, puedes diseñar sitios web únicos sin necesidad de tener conocimientos especiales de diseño o desarrollo. Sin embargo, ayuda a familiarizarse con los fundamentos antes de construir un sitio web completo. Aquí tienes una rápida introducción al flujo de trabajo de Elementor con eso en mente.
1. Iniciar el constructor de páginas de Elementor
Para diseñar una nueva página o post en el constructor de páginas de Elementor, navega a Páginas/Posts > Añadir nuevo. Puedes lanzar el editor de Elementor haciendo clic en Editar con Elementor.
También es posible que tengas una página existente a la que le vendría bien un cambio de imagen. Simplemente navega hasta la página en cuestión y ábrela para editarla en este escenario. A continuación, puedes hacer clic en el botón Editar con Elementor.
En la parte izquierda de la pantalla, verás la barra lateral de Elementor. Aquí es donde encontrarás todos los elementos que puedes añadir a tus diseños, como botones y encabezados.
La barra lateral de Elementor también contiene una sección de Widgets Globales. Si piensas reutilizar el mismo widget en varios diseños, puedes guardarlo como Widget Global. Esto hace que tu elemento personalizado sea fácilmente accesible en cualquier momento. También proporciona una ubicación central donde puedes editar tu widget una vez para hacer cambios universales. Elementor replicará entonces estos cambios en todo tu sitio web.
A la derecha está el lienzo de vista previa en vivo, donde puedes crear tu diseño. Elementor se actualizará automáticamente para mostrar tus cambios en tiempo real mientras realizas tus ediciones.
2. Añadir secciones, columnas y widgets
El editor de Elementor proporciona acceso a tres bloques de construcción principales: Secciones, Columnas y Widgets. Ya hemos hablado de los widgets de Elementor, así que vamos a ver cómo puedes añadirlos a tus diseños.
Normalmente, empezarás creando una Sección, haciendo clic en el icono + dentro del lienzo principal. Elementor te pedirá entonces que selecciones tu estructura.
Las opciones de estructura consisten en una o más columnas. Eventualmente, colocarás tu widget dentro de estas Columnas. Estas juegan un papel importante en la creación de diseños más organizados.
Después de tomar tu decisión, Elementor añadirá esta Sección a tu diseño. Para mover esta Sección a una nueva ubicación, dale un clic y luego agarra el asa azul punteada que aparece.
Para editar una Sección, simplemente haz Control-clic en este asa azul punteada. Se abrirá un menú contextual en el que podrás realizar cambios sencillos, como copiar o eliminar la Sección seleccionada.
Supongamos que quieres hacer ediciones más complejas, haz Control-clic en el asa azul y selecciona Editar Sección. La barra lateral de Elementor se actualizará para mostrar todos los cambios adicionales que puedes hacer en esta Sección.
También puedes añadir widgets a esta Sección. En la barra lateral de Elementor, busca el widget que quieras utilizar y arrástralo al lienzo principal.
Mientras arrastras el widget, Elementor resaltará todas las diferentes Secciones y Columnas donde puedes soltar este elemento. Cuando estés listo, simplemente suelta el ratón. Elementor añadirá ahora este widget a la Sección que hayas elegido.
3. Editar la configuración de tu sitio
Puedes utilizar Elementor para editar la configuración de todo tu sitio. Esto incluye cambiar la fuente y los colores HTML por defecto. También puedes modificar los bordes y las sombras que WordPress añade a elementos como las imágenes de tu sitio.
Ajustando estas configuraciones a nivel de sitio, puedes asegurar un aspecto y sensación consistentes en todo tu sitio web de WordPress. Este proceso también es mucho más rápido y sencillo que aplicar estos cambios página por página. Para ver los ajustes disponibles del sitio, haz clic en el menú hamburguesa de la barra lateral de Elementor.
Ahora puedes explorar tus opciones y hacer los cambios necesarios. Cuando estés listo para publicar la nueva configuración de tu sitio, haz clic en el botón Actualizar situado en la parte inferior de la barra lateral de Elementor.
4. Comprueba tu historial de revisiones
Mientras editas tus diseños, Elementor está registrando silenciosamente tus cambios. Puedes volver a revisar fácilmente tus ediciones, lo que puede ser un salvavidas si te das cuenta de que has cometido un error.
El registro del historial de Elementor también te da la libertad de experimentar. Puedes probar varios cambios y luego eliminarlos rápidamente. Al animarte a experimentar, Elementor puede mejorar la calidad de tus diseños acabados.
Para ver el registro de Elementor, haz clic en el icono de Historial en la parte inferior de la barra lateral. La pestaña Acciones registra cada uno de los cambios que realizas en Elementor. Puede ser cualquier cosa, desde la creación de una nueva Sección hasta la edición de un texto existente:
Cada vez que pulsas Guardar, Elementor registra la versión actual de tu página como una nueva revisión. Puedes ver todas estas instantáneas en la pestaña Revisiones. Si quieres volver a un guardado anterior, simplemente búscalo en la lista de Revisiones y haz clic en él.
Cómo construir una página en Elementor (2 métodos)
Ahora que estás familiarizado con el flujo de trabajo esencial de Elementor, vamos a ver cómo puedes utilizar estos conocimientos para diseñar algunas páginas nuevas. En primer lugar, cubriremos la creación de una página estándar de WordPress utilizando el plugin gratuito de Elementor. Luego veremos cómo puedes desarrollar una página de producto de alta conversión utilizando WooCommerce y Elementor Pro.
1. Cómo crear una página estándar de WordPress
Cada página web es diferente. Sin embargo, hay algunos elementos comunes que encontrarás en varios sitios. Esto incluye los encabezados, el cuerpo del texto y los medios como las imágenes. Veamos cómo puedes crear una página con estos componentes fundamentales.
Para empezar, crea una nueva página accediendo a Páginas > Añadir nueva > Editar con Elementor. A continuación, añade una Sección a tu diseño haciendo clic en el icono +. Vamos a empezar con nuestra cabecera, por lo que querremos optar por un diseño de una sola columna.
En la barra lateral de Elementor, busca el widget Encabezado. Ahora, arrastra y suelta este widget en tu nueva Sección. A continuación, puedes escribir el texto de tu encabezado en la barra lateral de Elementor y utilizar varios ajustes para dar estilo a tu título.
A continuación, haz clic en el icono + para añadir una segunda Sección. Vamos a incrustar una imagen y luego proporcionar un texto de apoyo, así que ahora optaremos por un diseño de varias columnas.
A continuación, arrastra el widget Editor de texto de la barra lateral de Elementor y suéltalo en esta nueva Sección. A continuación, puedes añadir y dar estilo a tu texto utilizando la configuración de la barra lateral.
Cuando estés satisfecho con tu texto, busca el widget de Imagen. Una vez más, utiliza la función de arrastrar y soltar para añadir este widget a tu Sección.
En la barra lateral, haz clic en la miniatura de la vista previa. Ahora puedes utilizar la biblioteca multimedia de WordPress para subir una nueva imagen o elegir un gráfico previamente subido.
Para ver tu diseño en acción, haz clic en el icono del ojo en la parte inferior de la barra lateral de Elementor. Esto muestra una vista previa del diseño de tu página en una nueva pestaña.
Cuando estés satisfecho con tu diseño, haz clic en el botón Publicar. Ten en cuenta que si tu página ya está activa, este botón te pedirá que la actualices.
2. Cómo crear una página de producto de WooCommerce
Si tienes una tienda de WooCommerce, puedes utilizar Elementor Pro para crear una página de producto personalizada. Esto puede implicar la modificación de la página de WooCommerce estándar para reflejar mejor la marca de tu sitio. También puedes intentar optimizar tu página para conseguir más conversiones.
Para diseñar una página de producto de WooCommerce personalizada, selecciona Plantillas en el panel de control de WordPress. A continuación, haz clic en el botón Añadir nuevo. En la siguiente ventana, abre el primer menú desplegable y selecciona Producto único.
Dale a tu nueva plantilla un nombre descriptivo y haz clic en Crear Plantilla. Esto lanzará la biblioteca de Elementor con todos los diseños disponibles de Producto Único.
Para ver de cerca una plantilla, pasa el ratón por encima de ella y haz clic en el icono de la lupa cuando aparezca. Si quieres aplicar este diseño a tu tienda, haz clic en Insertar.
Las plantillas de Elementor cuentan con una serie de componentes ya preparados. Para editar cualquiera de estos elementos, simplemente haz clic sobre ellos. La barra lateral de Elementor se actualizará para mostrar todos los ajustes de ese elemento en particular.
Elementor Pro ofrece una serie de widgets de WooCommerce que puedes añadir a tus diseños. Para ver lo que hay disponible, desplázate a las secciones WooCommerce o Producto en la barra lateral de Elementor.
Estas secciones incluyen widgets con funcionalidades avanzadas incorporadas, como las migas de pan de WooCommerce, el carrito y el pago. Para añadir estos elementos a tu diseño, simplemente arrástralos al lienzo de Elementor y suéltalos. A continuación, puedes soltar el widget en la sección en la que quieras mostrar este contenido.
Cuando estés contento con tu diseño, haz clic en Publicar. A continuación, puedes seleccionar Añadir condición y especificar las áreas en las que quieres utilizar este diseño. Por ejemplo, puedes aplicar esta plantilla a una categoría de productos específica o utilizarla en toda tu tienda.
Cómo encontrar e instalar plantillas de Elementor prediseñadas
Las plantillas de Elementor son páginas y bloques prediseñados que simplifican el proceso de creación del sitio web. Las páginas son diseños de contenido completo, mientras que los bloques son secciones que contienen widgets preconstruidos. Algunos ejemplos populares de Bloques incluyen cabeceras, pies de página, reseñas y testimonios, y preguntas frecuentes (FAQs).
El plugin gratuito de Elementor viene con más de 100 plantillas de página completa y más de 300 bloques. Si te actualizas a Elementor Pro, tendrás acceso a algunas opciones adicionales.
Haz clic en el icono Añadir plantilla para aplicar una plantilla a tu diseño actual. Este botón debería aparecer como parte de cada bloque de Sección y está representado por una carpeta blanca. Esto iniciará la Biblioteca de Elementor.
Aquí encontrarás todas las plantillas de bloques y páginas que puedes aplicar a tu página. Puedes previsualizar cualquier plantilla pasando por encima de ella y haciendo clic en su icono de lupa.
Cuando encuentres una plantilla que quieras utilizar, haz clic en Insertar. Si no te has conectado previamente a la biblioteca de plantillas de Elementor, la ventana emergente te pedirá que completes ese paso.
Tras realizar esta conexión, Elementor insertará la plantilla que hayas elegido. Ahora puedes personalizarla. Por ejemplo, puedes añadir más widgets o eliminar cualquier contenido del marcador de posición.
Cómo crear plantillas con Elementor
Elementor viene con una amplia selección de plantillas ya hechas. Sin embargo, a veces puedes tener un aspecto particular en mente. En ese caso, puede que prefieras diseñar tus plantillas.
La creación de tus diseños puede garantizar la coherencia en todo tu sitio. Incluso puedes utilizar las plantillas para acelerar el diseño y el desarrollo si eres una agencia de WordPress. Por ejemplo, puedes crear una biblioteca de plantillas que incluya todo el contenido y la configuración que sueles aplicar a los sitios de tus clientes. Luego puedes utilizar estas plantillas como punto de partida para todos los proyectos futuros.
Para empezar, selecciona Plantillas en el panel de control de WordPress. A continuación, haz clic en Añadir nueva.
En la siguiente ventana emergente, abre el primer menú desplegable y elige el tipo de plantilla que quieres crear. Tus opciones son Página, Sección o Página de Aterrizaje.
A continuación, dale a este diseño un nombre descriptivo y haz clic en Crear plantilla. Esto lanzará el constructor de páginas estándar de Elementor. Ahora puedes construir tu plantilla de la misma manera que crearías una página normal. Simplemente añade Secciones, Columnas y widgets hasta que estés contento con tu diseño.
Para guardar este diseño como plantilla, haz clic en la flecha que aparece junto al botón Actualizar/Publicar. A continuación, puedes seleccionar Guardar como plantilla.
Este diseño se guardará ahora en la biblioteca de Elementor. Puedes acceder a él iniciando la biblioteca y seleccionando la pestaña Mis plantillas.
También puedes acceder a tus plantillas personalizadas navegando a Plantillas > Plantillas guardadas en el panel de control de WordPress. También puedes abrir cualquiera de tus diseños y hacer los cambios necesarios.
Consejos y trucos para empezar con Elementor
Elementor puede ayudarte a diseñar y construir rápidamente un sitio web de WordPress desde el principio. Sin embargo, algunos trucos para ahorrar tiempo pueden aumentar aún más tu productividad.
A veces, puedes construir una Sección que quieras reutilizar dentro de la misma página. En lugar de recrear esta Sección manualmente, puedes crear una copia. Sólo tienes que hacer clic para seleccionar la Sección en cuestión y, a continuación, hacer Control-clic en el asa punteada que aparece.
A continuación, selecciona Duplicar. Esto crea un duplicado de la Sección directamente debajo de la original.
Por otra parte, a veces puedes querer reutilizar la misma Sección en varias páginas, o incluso en diferentes sitios web. Puedes guardar cualquier Sección como una plantilla de Bloque. Esto añade su diseño a la biblioteca de Elementor, para que esté siempre al alcance de la mano.
Para convertir un Bloque en una plantilla reutilizable, haz Control-clic en su icono punteado. Luego selecciona Guardar como plantilla.
Puedes editar cualquier widget seleccionándolo en tu lienzo y utilizando los controles de la barra lateral de Elementor. Sin embargo, navegar entre diferentes widgets puede resultar incómodo cuando tienes muchos otros widgets. Esto es especialmente cierto en el caso de los widgets superpuestos o cuando has añadido muchos elementos en un espacio reducido.
El Navegador de Elementor proporciona una vista de lista de todos los widgets de tu página, organizados en sus correspondientes Secciones y Columnas. Puedes navegar fácilmente entre tus widgets seleccionándolos en este «panel de árbol» La barra lateral de Elementor se actualizará para mostrar todas las opciones del widget actualmente seleccionado.
Los atajos de teclado son lo último en ahorro de tiempo, y Elementor viene con varias teclas de acceso rápido incorporadas. Pulsa Cmd/Ctrl + ? en tu teclado para ver estos atajos.
Esto lanza una ventana que contiene todas las teclas de acceso rápido disponibles. Puedes potenciar tu diseño y desarrollo web si te familiarizas con algunos o todos estos atajos.
Resumen
Crear un sitio de WordPress no siempre es fácil, especialmente si no eres un diseñador o desarrollador web experimentado. Afortunadamente, el constructor de páginas Elementor puede eliminar el dolor y la complejidad de la construcción de tu sitio.
Independientemente de si optas por el plugin gratuito o el premium, puedes utilizar Elementor para diseñar y construir cualquier tipo de entrada o página que necesites. Este constructor también viene con una selección de plantillas ya hechas. También puedes crear tus plantillas y reutilizarlas en varias páginas o en varios sitios web.
¿Tienes alguna pregunta sobre cómo utilizar el plugin Elementor de WordPress? ¡Háznoslo saber en la sección de comentarios más abajo!
Deja una respuesta