Cómo crear un sitio de WordPress usando Elementor: Guía final

Un sitio web bellamente diseñado puede crear una gran primera impresión. Sin embargo, la construcción de un sitio superior no siempre es fácil, especialmente si no tiene experiencia previa en diseño o desarrollo.
Aquí es donde el constructor de sitios web de WordPress interviene aquí. Al optar por este complemento moderno, fácil de usar, puede crear un sitio web increíble sin escribir una sola línea de código. Esta publicación cubrirá todo lo que necesita saber sobre estas páginas de WordPress extremadamente populares. Luego le mostraremos cómo navegar en algunas de las tareas más esenciales de Elementor, como crear modelos, páginas e incluso plantillas personalizadas. ¡Vamos a empezar!
Una introducción a WordPress Elementor en los primeros días de Internet, la creación de un sitio web requiere un desarrollo web avanzado y habilidades de diseño o acceso a un equipo de especialistas. Esto significaba que construir un sitio web ha consumido tiempo, a menudo frustrante y potencialmente costoso. Gracias a las páginas modernas, ahora puede crear un sitio web de alto rendimiento, diseñado profesionalmente, sin habilidades especializadas. Una vez que su sitio se enciende y se ejecuta, puede agregar rápida y fácilmente contenido o cambiar el aspecto en cualquier momento, incluso si no es un codificador.
Hay varios creadores de páginas de WordPress, pero con más de cinco millones de instalaciones activas, el complemento elemental es uno de los más populares. Elementor le permite crear de todo, desde sitios web completos hasta páginas de destino individuales, a través de un editor intuitivo en y arrastrado.

Page Creator Elementor Con Elementor, puede controlar todos los aspectos del diseño de su sitio utilizando una sola plataforma. De esta manera, su sitio web puede reflejar perfectamente su marca. El editor intuitivo, sin el código de Elementor, es particularmente popular entre los propietarios de sitios web que no tienen experiencia en diseño y desarrollo. También es una excelente coincidencia para empresarios y pequeñas empresas con una idea para un negocio en línea, pero no necesariamente tienen fondos para contratar un equipo de diseño o desarrollo dedicado. Si usted es un profesional experimentado, hay muchas razones para. Use Elementor. El hecho de que tenga habilidades de codificación no significa que sea aconsejable crear siempre todo desde cero. Elementor tiene muchas funciones para ayudarlo a construir sitios web galardonados en menos tiempo. Esto incluye más de 90 widgets listos y plantillas web diseñadas profesionalmente.
La página principal del sitio elemental de esta manera, Elementor puede aumentar su productividad y ganancias. Estas funciones que ahorran tiempo pueden resultar particularmente rentables si construye regularmente sitios web de WordPress (es decir, para desarrolladores independientes y agentes de WordPress).

Un sitio web bellamente diseñado puede crear una gran primera impresión. Aquí es donde interviene el generador de página de WordPress Elementor. Obtenga más información en esta guía, haga clic para enviar un Tweet Elementor vs Elementor Pro El Elementor es un software “freemium”. Puede descargar el complemento elemental básico de forma gratuita o comprar una licencia Elementor Pro.
Las opciones de precios para Elementor para el complemento gratuito de WordPress vienen con todo lo que necesita para crear páginas de ventas atractivas, listas de productos, sitios web de negocios y más. Incluye más de 40 widgets, 100 plantillas y más de 300 bloques. Los bloques son plantillas de secciones previas a las piezas que puede mezclar y combinar para crear modelos únicos. El elementor bloquea bibliotecia si desea una funcionalidad más avanzada, puede comprar Elementor Pro. Esto desbloquea algunos widgets adicionales, junto con el creador de tareas de Elementor.

Elementor Theme Builder Usando temas de temas, puede editar casi todos los elementos del sitio, incluidos el encabezado y el sótano. También puede crear publicaciones personalizadas y diseño de página de archivo. Si desarrolla una tienda en línea, Elementor Pro también incluye un constructor de WooCommerce. Puede usar esto para personalizar el contenido de WooCommerce de su sitio, incluida la página del producto, el archivo del producto y la página de compra. También tendrá acceso a widgets explícitamente diseñados para estimular las conversiones, como la canasta de adición personalizada, ventas adicionales y relativamente con productos.

Elementor WooCommerce Builder Elementor Pro también viene con un constructor emergente y un formulador de formularios. Aunque hay complementos separados que pueden ayudarlo a crear formularios emergentes y ventanas, optando por el elemento, puede minimizar la cantidad de complementos que deberá instalar y mantener. El uso de demasiados complementos puede hacer que su sitio sea más vulnerable a los piratas informáticos. Incluso puede afectar el rendimiento de su sitio. Por lo tanto, es la mejor práctica para minimizar el número que ha instalado. Además, debido a que diseña todos los elementos de su sitio utilizando la misma plataforma, debería encontrar más fácil obtener un aspecto consistente. Elementor Pro incluye el acceso a más de 60 kits para sitios web profesionales. Estos son paquetes de plantillas, páginas, ventanas emergentes y otros componentes que pueden ayudarlo a crear un sitio web completo. Si compra una licencia experta o de expertos más grandes, también tendrá acceso a 20 kits de expertos en sitios. Además, cada licencia profesional incluye asistencia premium. Por lo general, recibirá respuestas del equipo de asistencia especializada de Elementor en un día. Sin embargo, si opta por El Elementor Pro Studio o una versión más alta, se actualizará al soporte VIP. Esto le permite participar en chats en vivo con Elementor VIP Assistance Team. También recibirá respuestas prioritarias para sus boletos, que generalmente llegan en menos de 30 minutos.

Si usted es una agencia, desarrollador o diseñador, puede estar interesado en un perfil de red de expertos. Allí, puede presentar su trabajo y llamar la atención de los clientes potenciales.

La red de expertos primarios Si está interesado en anunciar a través de la red de expertos, también puede estar interesado en el elemento de expertos, de estudio o agencia Elementor Pro. Estas licencias le dan el derecho de crear un perfil en este mercado popular. Los planes Elementor Pro varían de $ 49 a $ 999 por año. La compañía también ofrece una garantía de reembolso de dinero de 30 días, por lo que puede probarlo antes de comprar. Como es elemental porque es un complemento de WordPress, la instalación es rápida y fácil. Puede descargar el complemento gratuito directamente desde el tablero de WordPress. Para descargar la versión gratuita, explore los complementos> Agregar nuevo. En el campo de búsqueda, escriba elemental. Cuando aparezca el complemento, haga clic en Instalar ahora. Cuando se le solicite, haga clic en Activación. El complemento agregará una opción de elemento a su barra lateral de WordPress.
¡Elementor en el tablero de WordPress ahora está listo para comenzar a usar Elementor! Para comenzar, haga clic en la opción Elementor en la barra lateral.
Alternativamente, puede descargar el complemento elemental directamente desde el almacén de WordPress. Luego inicie sesión en el tablero de WordPress y explore los complementos> Agregar nuevo> complemento. Luego puede hacer clic en Elija el archivo y seleccione el archivo elemental .zip que acaba de descargar. Cómo conectar Elementor Pro a WordPress Hay dos formas de conectar Elementor Pro con WordPress. Si aún no ha comprado una licencia de Elementor Pro, deberá acceder al sitio web oficial y seleccionar. Luego puede seguir las instrucciones en la pantalla para crear una cuenta elemental. Cuando se le solicite, ingrese alguna información sobre el tipo de sitio web que desea crear. Venga una cuenta elemental y luego, elija el plan que desea comprar. Debido a que Elementor requiere un sitio activo de WordPress, deberá ingresar a su sitio. Suponiendo que tenga un sitio activo de WordPress, el siguiente paso es hacer clic en Instalar Elementor. Se redirigirá automáticamente a la página de plagin de complemento Elementor si actualmente ha iniciado sesión en su sitio cuando se le solicite, haga clic en Instalación ahora> Activación. Elementor luego agregará el complemento para el generador de páginas a su sitio alternativo, si ya ha comprado una licencia de Elementor Pro, vaya al sitio web oficial e inicie sesión utilizando los detalles recibidos en el correo electrónico de confirmación. En su cuenta de Elementer, seleccione suscripciones en el menú a la izquierda. Entonces puede hacer clic en Descargar zip.

Descargue Zip luego, inicie sesión en WordPress Dashboard y explore arados> Agregar nuevo. Luego puede cargar el archivo Elementor Pro .zip que acaba de descargar. Después de instalar y activar Elementor Pro, WordPress debe pedirle que ingrese la clave de licencia. Alternativamente, puede explorar Elementor> Licencia> Iniciar sesión y activación. WordPress debe verificar automáticamente su licencia si actualmente está conectado a su cuenta de Elementor. Si no, ingrese el nombre de usuario y la contraseña Elementor cuando se le pide que active su licencia. Uso de Elementor: 4 tareas esenciales para dominar con elemento, puede diseñar sitios web únicos sin habilidades especiales de diseño o desarrollo. Sin embargo, le ayuda a familiarizarse con artículos fundamentales antes de construir un sitio web completo. Aquí hay una rápida introducción al flujo de trabajo elemental, considerando esto. 1. Inicie El Elementor Page Builder para crear una nueva página o publicar en el generador de páginas, navegar por páginas/publicaciones> Agregar nuevo. Puede iniciar el Elementor Publisher haciendo clic en Editar con Elementor. Editar con la opción Elemental en el editor alternativo, puede tener una página existente que podría beneficiarse de un cambio. Simplemente explore la página en cuestión y ábrala para editar en este escenario. Luego puede hacer clic en el botón Editar con Elementor.
El editor elemental está abierto en el lado izquierdo de la pantalla, verá la barra lateral elemental. Aquí encontrará todos los elementos que puede agregar a sus modelos, como botones y títulos. La barra lateral elemental también contiene una sección de widgets globales. Si tiene la intención de reutilizar el mismo widget en varios modelos, le recomendamos guardarlo como un widget global. Esto hace que el artículo personalizado sea fácilmente accesible en cualquier momento. También ofrece una ubicación central donde puede editar su widget una vez para hacer cambios universales. Elementor replicará estos cambios a todo el sitio web. A la derecha está la tela de vista previa en vivo, donde puede crear su diseño. Elementor se actualizará automáticamente para mostrar sus cambios de tiempo real a medida que realiza sus cambios. 2. Agregue secciones, columnas y widgets El editor elemental ofrece acceso a tres bloques principales: secciones, columnas y widgets. Ya hemos llegado a los widgets preparados, así que veamos cómo puede agregarlos a sus diseños. Por lo general, comenzará creando una sección, haciendo clic en el icono + en el lienzo principal. Elementor le pedirá que seleccione su estructura. Acadea una sección en elemento Las opciones de estructura consisten en una o más columnas. Finalmente, colocará su widget en estas columnas. Desempeñan un papel importante en la creación de modelos más organizados.

Seleccione la estructura de su columna Después de tomar la decisión, Elementor agregará esta sección a su apariencia para mover esta sección a una nueva ubicación, haga clic y luego tome el mango azul punteado.Para editar una sección, simplemente haga clic en el control de este mango azul punteado.Esto iniciará un menú contextual, donde puede hacer cambios simples, como copiar o eliminar la sección seleccionada. Agregue varias secciones en cualquier momento para asumir que desea realizar ediciones más complejas, presione el control de control en el mango azul y seleccione la edición de la sección .La barra lateral elemental ahora se actualizará para mostrar todos los cambios adicionales que puede hacer en esta sección.
Hay ediciones adicionales disponibles, más complejas, también puede agregar widgets a esta sección. En la barra lateral elemental, busque el widget que desea usar y tire del lienzo principal. Mientras extrae el widget, Elementor resaltará todas las diferentes secciones y columnas en las que puede colocar este elemento. Cuando esté listo, simplemente libera el mouse. Elementor ahora agregará este widget a la sección elegida por usted 3. Edite la configuración de su sitio. Puede usar Elementor para editar la configuración del nivel del sitio. Esto incluye cambiar los colores de fuente predeterminados y HTML. También puede cambiar los bordes y las sombras que WordPress agrega a los elementos, como las imágenes de su sitio ajustando estas configuraciones a nivel de sitio, puede garantizar un aspecto y sensación consistentes en todo su sitio de WordPress. Este proceso también es significativamente más rápido y más fácil que aplicar estos cambios, página por página. Para ver la configuración disponible del sitio, haga clic en el menú de hamburguesas en la barra lateral Elementor. Configure la configuración del sitio ahora puede explorar sus opciones y realizar los cambios necesarios. Cuando esté listo para publicar la nueva configuración del Sitio, haga clic en el botón Actualizar en la parte inferior de la barra lateral del Elementor.

Regístrese para el boletín

¿Quieres saber cómo aumentar nuestro tráfico por más del 1000%? ¡Únase a las más de 20,000 personas que reciben nuestro boletín semanal con los consejos de WordPress!

Suscríbase ahora

4. Verifique el historial de las reseñas mientras edita sus diseños, Elementor registra silenciosamente sus cambios.Puede eliminar fácilmente sus ediciones, lo que puede salvar su vida si se da cuenta de que ha cometido un error.El diario histórico de Elementor también te da la libertad de experimentar.Puede probar varios cambios y luego eliminarlos rápidamente.Al alentarlo a experimentar, Elementor puede mejorar la calidad de sus diseños finitos.Para ver el diario elemental, haga clic en el icono histórico en la parte inferior de la barra lateral.La pestaña de acciones registra cada cambio que realiza en el elemento.Esto puede ser cualquier cosa, desde crear una nueva sección hasta editar el texto existente:

Al ver el Elementor Journal cada vez que presiona Salva, Elementor registra la versión actual de su página como una nueva revisión. Puede ver todas estas instantáneas en la pestaña Revisión. Si desea volver a un rescate anterior, simplemente busque en la lista de revisiones y haga clic en él. Cómo construir una página en Elemoror (2 métodos) Ahora que está familiarizado con el flujo de trabajo esencial, para ver cómo puede usar este conocimiento para crear nuevas páginas. En primer lugar, abordaremos la creación de una página estándar de WordPress utilizando el complemento elemental gratuito. Luego veremos cómo puede 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á en diferentes sitios. Estos incluyen títulos, texto del cuerpo y contenido de medios, como imágenes. Veamos cómo puede crear una página que incluya estos componentes críticos. Para comenzar, cree una nueva página navegando por las páginas> Agregar nuevo> Editar con Elementor. Luego agregue una sección a su diseño haciendo clic en el icono +. Comenzaremos con nuestro título, por lo que querremos optar por un aspecto de una sola columna. Corte una nueva página elemental en la barra lateral elemental, busque el widget del título. Ahora, tire y coloque este widget en la nueva sección. Luego puede escribir el texto del título en la barra lateral elemental y usar diferentes configuraciones para atacar su título.

Estilí el título del título, haga clic en el icono + para agregar una segunda sección. Incorporaremos una imagen y luego daremos un texto de soporte, por lo que ahora optaremos por una sección de múltiples columnas. Luego puede agregar y estilizar el texto con la configuración de la barra lateral. Cuando esté satisfecho con su texto, busque el widget de la imagen. Una vez más, use arrastrar y soltar para agregar este widget a su sección.

Tire y coloque un widget de texto en la barra lateral, haga clic en la miniatura de vista previa. Ahora puede usar la biblioteca de medios de WordPress para cargar una nueva imagen o para elegir un gráfico previamente cargado. Para ver su diseño en acción, haga clic en el icono del ojo en la parte inferior de la barra lateral elemental. Esto muestra una vista previa de su página.

Vista previa de su página de Elementor Cuando esté satisfecho con su diseño, haga clic en el botón Publicar. Tenga en cuenta que si su página ya está en vivo, este botón le pedirá que actualice. 2. Cómo crear una página de productos de WooCommerce Si conduce una tienda WooCommerce, puede usar Elementor Pro para crear una página de producto personalizada. Esto podría implicar cambiar la página de acciones de WooCommerce para reflejar mejor la marca de su sitio como una alternativa, puede intentar optimizar su página para generar más conversiones. Para crear una página de producto de WooCommerce personalizada, seleccione plantillas del tablero de WordPress. Luego haga clic en el botón NUEVO ADD. En la siguiente ventana, abra el primer menú de caída y seleccione un producto único. ¡Kinsta es la solución de alojamiento diseñada para ahorrarle tiempo! Revise nuestras características

WooCommerce configurado para un solo producto, le da a la nueva plantilla un nombre descriptivo y haga clic en Crear plantilla. Esto lanzará la biblioteca de primaria con todos los modelos de productos disponibles.
Modelos de productos únicos disponibles en WooCommerce para echar un vistazo más de cerca a una plantilla, coloque el cursor sobre él y luego haga clic en el icono de Wolf cuando aparezca. Si desea aplicar este diseño en su tienda, haga clic en Insertar.
Coloque el cursor sobre la plantilla para ver más de cerca las plantillas elementales tengan una amplia gama de componentes listos hechos. Para editar cualquiera de estos elementos, haga clic en ellos. La barra lateral elemental se actualizará para mostrar todas las configuraciones de ese artículo. Los componentes listos de Elementor Pro ofrecen una gama de woCommerce widgets que puede agregar a sus diseños para ver lo que está disponible, desplácese a las secciones WooCommerce o producto desde el producto del barra lateral elemental.

WooCommerce Widgets disponibles en la barra lateral Estas secciones incluyen widgets con características avanzadas avanzadas, como migas de pan, carrito y pago de WooCommerce. Para agregar estos elementos al diseño, simplemente tírelos al lienzo elemental y suelte. Luego puede tirar el widget en la sección donde desea mostrar este contenido.
Tire y coloque los widgets de WooCommerce Cuando esté satisfecho con su diseño, haga clic en Publicación. Luego puede seleccionar Agregar condición y especificar las áreas donde desea usar este diseño. Por ejemplo, puede aplicar esta plantilla a una determinada categoría de producto o usarla en su tienda. Cómo encontrar e instalar plantillas prefabricadas de elemento Elementávelo Las plantillas de elemento son páginas y bloques previamente que simplifican el proceso de creación del sitio web. Las páginas son aspectos de contenido completo, mientras que los bloques son secciones que contienen widgets prebuilt. Algunos ejemplos populares de bloques incluyen encabezados, sótanos, revisiones y testimonios y preguntas frecuentes (FAQ).

Elementor Library El complemento elemental gratuito viene con más de 100 plantillas de página completa y más de 300 bloques.Si actualiza a Elementor Pro, tendrá acceso a algunas opciones adicionales.Haga clic en el icono Agregar plantilla para aplicar una plantilla a su diseño actual.Este botón debe aparecer como parte de cada bloque de sección y está representado por una carpeta blanca.Esto iniciará la biblioteca Elementer. Agregue una plantilla desde la biblioteca Elementor aquí encontrará todas las plantillas de bloque y la página que puede aplicar a su página.

Coloque el cursor sobre la plantilla para verlo cerca cuando encuentre una plantilla que desee usar, haga clic en Insertar.Si no ha iniciado sesión previamente en la biblioteca Element Blass, la ventana emergente le pedirá que complete ese paso.

Inicie sesión en la biblioteca de plantillas después de hacer esta conexión, Elementor ingresará la plantilla de usted. Ahora puede personalizarla. Por ejemplo, puede agregar más widgets o eliminar cualquier contenido sustituyente. Cómo construir plantillas con elemento elemental viene con una amplia selección de plantillas preparadas. Sin embargo, a veces puede tener un cierto aspecto en mente. En este escenario, podría preferir diseñar sus plantillas. Crear diseño puede garantizar su coherencia en todo el sitio. Incluso puede usar plantillas para acelerar el diseño y el desarrollo si es una agencia de WordPress. Por ejemplo, puede crear una biblioteca de plantillas que incluya todo el contenido y la configuración que generalmente aplica a los sitios de sus clientes. Luego puede usar estas plantillas como punto de partida para todos los proyectos futuros. Para comenzar, seleccione plantillas del tablero de WordPress. Luego, haga clic en Agregar nuevo. Agregue una nueva plantilla a la ventana emergente posterior, abra el primer menú desplegable y elija el tipo de plantilla que desea crear. Sus opciones son la página, sección o página de destino.

Elija el tipo de plantilla luego, le dé a este diseño un nombre descriptivo y haga clic en Crear plantilla. Esto lanzará el generador de páginas estándar. Ahora puede crear su plantilla de la misma manera que crearía una página normal. Simplemente agregue secciones, columnas y widgets hasta que esté satisfecho con su apariencia para guardar este diseño como plantilla, haga clic en la flecha que aparece junto al botón Actualización/publicación. Luego puede seleccionar rescate como plantilla.

Guarde este diseño que este diseño ahora se guardará en la biblioteca Elementer. Puede acceder a ella iniciando la biblioteca y seleccionando la pestaña de mis plantillas. Dé su plantilla en la biblioteca en la pestaña “Mis plantillas”. Alternativamente, puede acceder a sus plantillas personalizadas navegando en las plantillas> plantillas guardadas en el tablero de WordPress. También puede abrir cualquiera de sus modelos y hacer los cambios necesarios. Los consejos y trucos para comenzar con Elementor Elementor puede ayudarlo a diseñar y construir rápidamente un sitio web de WordPress en el cuadro. Sin embargo, algunos trucos que ahorran tiempo pueden aumentar aún más su productividad. A veces puede construir una sección que desee reutilizar en la misma página. En lugar de recrear manualmente esta sección, puede crear una copia. Simplemente haga clic para seleccionar la sección en cuestión, luego controle el mango puntuado que aparece. Luego seleccione la duplicación. Esto crea una sección duplicada directamente debajo del original. Alternativamente, a veces es posible que desee reutilizar la misma sección en varias páginas o incluso en diferentes sitios web. Puede guardar cualquier sección como plantilla de bloque. Esto agrega su diseño a la biblioteca elemental para que siempre esté a la mano. Para convertir un bloque en una plantilla reutilizable, controle el clic en su icono punteado. Luego seleccione la salvación como plantilla.

Transformando un bloque en una plantilla reutilizable Puede editar cualquier widget seleccionándolo en el lienzo y luego utilizando los controles de la barra lateral Elementer. Sin embargo, navegar por diferentes widgets puede volverse incómodo cuando tienes muchos otros widgets. Esto es especialmente cierto para los widgets superpuestos o cuando ha agregado muchos artículos a un espacio pequeño. El Navegador Elemental ofrece una lista de visualizar todos los widgets de su página, organizados en las secciones y columnas apropiadas. Puede navegar fácilmente por su widget seleccionándolo en este “panel de árboles”. La barra lateral elemental se actualizará para mostrar todas las opciones para el widget seleccionado actualmente. La pantalla para el teclado de widget seleccionado será el mejor ahorro de tiempo, y Elementor viene con varias teclas rápidamente incorporadas. ¿Presione CMD/CTRL +? en el teclado para ver estos atajos.