homefinance blog
¿Estás interesado en construir un sitio web increíble? Bueno, buenas noticias … ¡ahora es más fácil que nunca! No es necesario manejar cada página manualmente desde cero o contratar a un equipo de profesionales. Hoy en día, todo lo que necesita es un complemento llamado Elementor. Es uno de los creadores de páginas de WordPress más versátiles y accesibles del mercado. Y mejor, ¡es completamente gratis comenzar!
En esta publicación, abordaremos cómo usar el Elementor paso a paso y pasaremos por alto algunas de sus mejores características. Hasta el final, debe tener todo lo que necesita para crear un sitio web de WordPress que impresione, ¡en el menor tiempo!
contenido
Nociones introductorias con elementor
Explorando opciones de elemento
Elementor Free vs. Elementor Pro
Cómo usar el elementor del generador de páginas gratis
Cómo usar el builder de temas de elementor
Cómo construir plantillas con Elementor
Cómo crear ventanas emergentes en Elemoror
Cree un sitio web receptivo para dispositivos móviles con Elementor
¿Por qué deberías usar Elementor?
Ventajas y desventajas del uso de Elemenor Page Builder
Conclusión
Las nociones introductorias con elemento elemental son un generador de página popular que se adapta bien a temas fáciles de WordPress, como Astra. Este generador de páginas le permite controlar cada aspecto de la apariencia y la apariencia de las páginas y publicaciones de su sitio, con docenas de widgets agregando funcionalidad a través de una interfaz de tipo DRA-y DRA limpia.
Ahora, tenga en cuenta que el elemento en sí no es un tema de WordPress: es estrictamente un complemento. Esto es importante porque aún necesitará elegir un tema dedicado para administrar otros aspectos de su sitio Instalar elemento después de haber instalado WordPress y un tema elegido para su sitio, hay algunas rutas diferentes que puede seguir Para instalar el elemento del generador de páginas: Método 1: Sitio web del Elementor. Visite el sitio web de Elementor y obtenga la versión gratuita de Elementor. Se muestra un botón de descarga visiblemente en la parte superior de la página de inicio. Una vez que haya ingresado la dirección de correo electrónico, el navegador descargará automáticamente el archivo zip.
Luego, navegue por la sección de complementos desde la parte posterior de su sitio de WordPress, haga clic en “Agregar nuevo” y cargue el archivo .zip en su sitio a través del botón “Cargar el complemento” en la parte superior.
Una vez instalado, presione “Habilitar” y está listo para la operación. Método 2: WordPress Dashboard Iniciar sesión en la parte posterior de su sitio de WordPress y prepararse para instalar el complemento presionando el botón “Agregar nuevo” en la pestaña del complemento. Para encontrar un elemental, simplemente escriba la palabra “elemento” en la barra de búsqueda de arado.
El Elementor Page Builder debe aparecer como la primera opción de complemento para instalar.
Simplemente haga clic en “Instalación” y luego “active” una vez descargado. Independientemente del método que elija instalar Elementor, podrá encontrarlo en la lista de complementos instalados ”a partir de ahora, y también tendrá su propia entrada en el menú lateral. Desde esa área, podrá ajustar la configuración del complemento.
Sin embargo, a diferencia de muchos complementos, la mayor funcionalidad del elemento está ocurriendo en las páginas en sí. Esto significa que pasará la mayor parte del tiempo usando Elementary cuando cree o edite páginas y publicaciones., ¡Vamos a ver las opciones de alto nivel que tiene con Elementor! Una de las características más importantes de cualquier generador de páginas es la facilidad de uso. Debes poder saltar y convertir tu visión en realidad sin muchas búsquedas temblorosas y frenéticas en YouTube. Afortunadamente, Elementor es uno de los generadores de páginas más simples que he usado. Es un editor de front-end, lo que significa que puede ver exactamente cómo se verá la página mientras trabaja en ella.
Una vez que se acostumbra al flujo de trabajo de los widgets de dibujo en la página y cambia las propiedades en la barra lateral, se dará cuenta de que es lo más intuitivo posible. La mayoría de las opciones de personalización que encontrará en el elemento se basan en los widgets que vienen con el complemento. Esto le permite hacer cosas para verificar qué tipos de publicaciones funcionan el elemento, establecer la fuente y el espacio predeterminado, y ajustar la configuración de respuesta.
También hay un administrador de roles de función útil en Elementor, que le permite clasificar qué tipos de usuarios pueden tener acceso al editor (nota: esta es solo una característica de Elementor Pro).
¿Qué widgets están incluidos? En general, Elementor se basa en un editor de arrastrar y arrastrar que aloja secciones, columnas y widgets. El sistema se descompone de la siguiente manera: secciones contenedores para columnas y widgets.
Columnas-secciones que contienen widgets.
Widgets – elementos individuales en la página.
Estos widgets son categorías de contenido simples que le permiten personalizar su página web. En la versión gratuita de Elementor, tiene acceso a los elementos básicos. Aquí hay una lista rápida de algunos widgets básicos que a menudo usará:
Título
Imagen
Editor de texto
Video
Botón
divisor
ICONO
espaciador
Mapas de Google
Obtenga casi 30 elementos básicos que le brindan todo lo que necesita para crear una página web funcional.
Simplemente dibuje una instancia de un elemento en la página principal y lo personalice de acuerdo con sus necesidades. Sin embargo, afirmamos que la mayor parte de lo que puede hacer en Pro es posible en la versión gratuita: lleva más tiempo. Depende de usted si necesita los widgets premium que se encuentran en la versión Pro. Aquí hay una muestra rápida de docenas de widgets encontrados en Elementor Pro:
portafolio
Forma
Caja
La tabla de precios
Bloqueo
Llamada a la acción
Estos elementos profesionales harán que su sitio se vea más elegante y profesional y también están diseñados para apoyar los esfuerzos comerciales electrónicos, incluida la integración de profundidad con WooCommerce.
Finalmente, Elementor acepta widgets de tercera parte.¡Puede encontrar muchos suplementos de elementos de terceros que expandirán aún más sus widgets disponibles o incluso desarrollarán su propio widget con recursos de desarrollo de elementor!¿No estás seguro de que quieras agregar widgets adicionales?Aunque puede ser conveniente tener widgets para todo lo que desea hacer en su sitio web, no es absolutamente necesario.Todavía hay innumerables complementos de WordPress de terceros que funcionan bien en conjunto con Elemoror y su tema de WordPress. Elementor gratuito vs.Elementor Pro si desea un generador de página gratuito y sofisticado, que tiene más funciones que muchas opciones pagadas, ¡el elemento es una excelente opción!
Dicho esto, Elementor Pro agrega varias funciones deseables para acelerar su flujo de trabajo y darle aún más control sobre el aspecto y la funcionalidad de su sitio. Todos bienvenidos, pero ciertamente no necesita que creen un gran sitio web … gratis
<
Este es un instante general de las diferencias entre las dos versiones, pero puede obtener más información sobre El Elementor Free vs Pro. Elija una de las versiones pagas de Elementor Pro, debe tener en cuenta que las tres ¡Los planes ofrecen exactamente las mismas características! La única diferencia entre los planes Pro es cuántas licencias compra simultáneamente.
Con Advanced, obtenga Elementor Pro en 3 sitios web por $ 99 por año.
Con un experto, obtenga Elementor Pro en 25 sitios web por $ 199 por año.
Con Studio, obtenga Elementor Pro en 100 sitios web por $ 499 por año.
Con la agencia, obtienes Elementor Pro en 1,000 sitios por $ 999 por año.
¿Cuál es el adecuado para usted? Para individuos o equipos pequeños, el experto es definitivamente el mejor valor, siempre y cuando sea probable que administre más sitios web con Elemental Pro el próximo año. Puede elegir en cualquier momento para comenzar con esencial y actualizar a Advanced o Expert más tarde, si decide que le gusta el Elementor y desea más licencias. Desde el camino, ¿está listo para ver el Elementor en acción? Este generador de página funciona con tipos de publicaciones personalizadas y tiene muchas plantillas listas para elegir, pero para esta publicación, vea cómo nos vemos para comenzar desde el principio. Paso 1. Cree una publicación O una nueva página vaya al tablero de su sitio de WordPress y haga clic en “Agregar nuevo” en publicaciones o páginas. Para este tutorial, haremos una nueva publicación de blog. Para usar Elementor, debe hacer clic en el botón “Editar con Elementor”.
Paso 3. Dibuje elementos en la página principal Esta página estará originalmente vacía. Elija y dibuje elementos de la barra lateral elemental. Creemos un nuevo título para la página. Todo lo que tiene que hacer es hacer clic en el cuadro que escribe “Tit”, luego mantenga presionado el botón del mouse y tire del área del widget en la página (donde escribe “Dibuja el widget aquí”). Si no desea que este artículo ocupe todo el ancho de su ventaja, verá una opción para “Seleccione su estructura”. Vamos con tres columnas iguales.
Después de hacer clic en ese icono con las tres columnas, ahora vemos una nueva sección en la página con tres columnas, cada una con un botón más.
¿Y si queremos personalizar lo que vemos en esta sección? Usted adivinaste, tiramos de un widget allí. Dibujé un elemento de video en la columna central, que se carga previamente con una lista de reproducción de video elemental predeterminada.
Paso 4. Edite la configuración para cada sección o elemento que coloque en la página, tiene más opciones de personalización. Solo busque los seis puntos.
Si seleccionamos el título, por ejemplo, podemos cambiar su contenido, estilo o características avanzadas, como bordes y relleno, capacidad de respuesta, etc.Vi cómo se ve esta página en el editor, pero si echamos un vistazo a la vista previa de la página real, ¡veremos que es lo mismo!Es algo muy bueno.Significa que una vez que la página en la que está trabajando está en vivo, puede asegurarse de verse exactamente como al editarla.Esta es una de las características más importantes del elemento.
La conclusión es que no tiene que ser un experto para construir un sitio web con Elementor. Con muchas plantillas para elegir, nunca debe comenzar desde cero a menos que lo desee. Le recomendamos cálidamente que mire el tema Astra, tiene muchas plantillas elementales llamadas plantillas de inicio que puede usar. Hay un punto importante que queremos enfatizar aquí: ya sea que elija Elementor Free o El Elementor Pro, los tornillos del generador de tuercas y páginas son idénticos. Pro ofrece solo características más avanzadas a través de widgets premium para ayudarlo de inmediato con marketing, comercio electrónico, diseño e integración con otras herramientas comunes, como MailChimp y Adobe Typekit. Fue una gran decisión configurar el elemento de esta manera, porque no tiene que aprender nada una vez que esté listo para dar el salto de Elementor a El Elementor Pro. Cómo usar el buque de temas de Elementor, cuando Algo se vuelve más fácil de usar, tiene que renunciar a funciones útiles. Afortunadamente, Elementor es un caso especial que es fácil de usar e increíblemente versátil, debido a su gran generador. Disponible en la versión ElementR Pro, el generador de temas es un cambio de reproductor para cualquier persona familiarizada con las páginas, ya que le permite crear encabezados, sótanos personalizados y otro contenido dinámico para su sitio web. Incluso le permite anular aspectos de su tema de WordPress, por lo que puede mantener lo que funciona y simplemente hacer los cambios deseados.
¿Por qué necesitarías contenido dinámico? Bueno, a veces es posible que desee alojar una página de ventas que no tenga un encabezado y una barra lateral tradicional o es posible que desee guardar una publicación de blog personalizada que pueda usar cada vez que agregue una nueva publicación. Las posibilidades son infinitas. Construya un encabezado/sótano con primaria ¿Estás listo para construir un encabezado o un sótano personalizado con Elementator usando el generador de temas? ¡Así es como se hace! /A> Paso 2. Agregue una nueva plantilla o importe aquí. Cree una nueva plantilla para su encabezado.
Si ya ha visto un encabezado que le gustó, puede importarlo para usarlo como punto de partida. De lo contrario, haga clic en “Agregar nuevo”. Este aparecerá en un cuadro de diálogo que le permitirá elegir el tipo de plantilla, el encabezado en este caso, junto con el nombre de la plantilla.
(Nota: El Elementor Free incluye solo plantillas de secciones y páginas. La versión Pro incluye varias categorías de plantillas adicionales, incluidos widget global, encabezado, sótano y archivo).
Paso 3. Edite la nueva plantilla si este paso parece familiar, esto se debe a que es el mismo editor que solía hacer una página completa antes. Ahora, se aplica para hacer un encabezado personalizado. Puede pasar por el proceso para crear su apariencia con diferentes widgets e incluso imágenes específicas u otro contenido. Después de haber guardado el nuevo encabezado, se puede acceder fácilmente desde una nueva página.
Crear páginas de WooCommerce con elemental El proceso de crear un producto de WooCommerce personalizado es similar a cualquier otra página o sección que pueda crear. ¿Sientes un modelo aquí? Con WooCommerce Builder, Elementor acepta la capacidad de crear una plantilla para una sola página de producto. Una vez que cree una nueva plantilla, verá una biblioteca de plantillas llenas de bloques o páginas completas que puede usar para la página del producto WooCommerce. Tenga en cuenta que esta plantilla de WooCommerce tendrá una serie de widgets de productos dinámicos, incluido el título del producto, la imagen del producto y el precio del producto. Puede establecer los detalles de los productos de WooCommerce y usar Elementor para mostrar información actualizada sobre los productos front -end. ¡Es tan simple! Recuerde, Elementor no es un tema: use solo el generador de temas para anular ciertas funciones del tema. Para obtener el control total sobre su base, recomendamos usar Astra Pro y Elementor. ¡Astra te ofrece opciones construidas para encabezado y sótano, mega menús y muchos más! ¡Incluyendo opciones gratuitas y pagas. Por ejemplo, si crea un sitio web para un entrenador de acondicionamiento físico, podría usar el sitio inicial para Astra como una base sólida y personalizarlo desde allí.
¡Importar una plantilla de inicio Astra es fácil de hacer! Solo necesita instalar la versión gratuita o pagada del tema Astra, además de las plantillas de inicio gratuitas. Una vez que haya configurado ambos, puede conectarse al tablero de WordPress, navegar por las plantillas de inicio de Look> y seleccione el sitio web que desea importar. ¡Entonces podrá hacer cambios en el sitio de inicio directamente en el elemento! Para obtener más información, consulte este tutorial detallado para importar Astra. Elementor. Esto va aún más allá de Elementor Pro, ofreciendo widgets avanzados, como el interruptor de contenido, la ventana emergente modal, la cronología de contenido y el contenido. Para el máximo control y flexibilidad, definitivamente vale la pena verificar los complementos definitivos para el elemento.
ENCABEZAMIENTO
Sótano
Publicación única
El archivo del blog
Páginas de productos
Para este ejemplo, trabajamos con la plantilla de publicación/página.Esta es una plantilla guardada que puede usar para cualquier página nueva o publicación de blog, lo que le permite mantener la coherencia, incluso con más miembros del equipo.Aún mejor, está disponible para todos los usuarios Elementor, incluso con Elementor gratuito. Plantillas ”en el elemento del menú lateral.
Paso 2. Agregue una nueva plantilla o importe aquí Cree una nueva plantilla para su encabezado en el cuadro de diálogo, elija el tipo de plantilla de página y dé un nombre a la nueva plantilla. ¡Luego haga clic en “Crear plantilla” para comenzar! Es tan simple como crear nuevas secciones, cambiar columnas y extraer diferentes widgets en la página. Después de haber diseñado una página que le guste, puede guardarla como una plantilla para que sea accesible para cualquiera de sus otras páginas. ¿En el elemento? ¿Quizás para proporcionar un imán de plomo gratuito, hacer un anuncio, capturar clientes potenciales o algo más? Crear una ventana emergente en el elemento es bastante simple. Sin embargo, deberá actualizar a la versión Pro para crear ventanas emergentes. Tiene algunas características muy interesantes con la versión Pro, como ventanas emergentes de bienvenida, ventas de productos, ventanas emergentes con la intención de salir y muchas más, por lo que iremos más allá y crearemos una ventana emergente simple. Simplemente siga estos pasos para crear una ventana emergente que se activa al hacer clic en un botón. 1. Vaya al tablero> Plantillas> Popups> Agregar nuevo. 2. Nombra tu plantilla y luego haga clic en “Crear plantilla” .3. Puede elegir crear su propia plantilla o seleccionar una de la biblioteca de plantillas.
4. Haga clic en “Publicación” después de que haya terminado. Luego guarde y cierre. 5. Ahora, cree una nueva página en Elemoror. Y tire de un widget con un botón. 6. En términos, seleccione Enlace> Dinámica> Acción> PopUp .7. Navegue a PopUp> Abra PopUp> y seleccione la ventana emergente que acaba de crear. 8. Haga clic en “Publicación” cuando haya terminado y consulte la página en vivo. Haga clic en el botón para ver la ventana emergente. ¡Y tan simple es crear una ventana emergente usando Elementor! Active su punto de vista móvil de su sitio web. Como se indicó anteriormente, más del 50% del tráfico de su sitio proviene de dispositivos móviles. Hemos enumerado algunos pasos que puede asegurarse de que su sitio sea compatible con dispositivos móviles si usa el generador de páginas Elementor. Si prefiere ver cómo se hace, mire este video sobre la capacidad de respuesta elemental.
Elementor lo hace muy fácil cuando se trata de personalizar su sitio web para diferentes dispositivos. La regla general es que todas las funciones editables tienen una configuración específica para escritorio, móvil y tableta. La configuración más común incluye el tamaño del texto, el borde y el relleno. Por ejemplo, como se muestra en la imagen a continuación, busque el icono junto al “ancho”. Este es el caso con casi cualquier elemento que desee personalizar.
Haga clic en el dispositivo para el que desea realizar la personalización. Una vez seleccionado, continúe y juegue con la configuración de acuerdo con sus preferencias de forma predeterminada, las imágenes de fondo responden automáticamente. Tiene un control completo sobre la personalización adicional de las imágenes para que coincida con su dispositivo, incluso en la medida en que tenga diferentes imágenes para diferentes tamaños de pantalla. ¿Sabía que puede elegir mostrar u ocultar una sección dependiendo del dispositivo? Por ejemplo, si hay una fila de imágenes o texto que desea ocultar en dispositivos móviles, puede hacerlo con bastante facilidad. ¿Simplemente vaya a la Sección de Edición> Avanzada> Pestaña Responsiva? ¿Observa un conjunto de opciones en “Visibilidad”? Por defecto, la sección se establece en todos los dispositivos. Si desea ocultarlo, bueno, cambie el botón de acuerdo con su dispositivo. Aunque aún puede ver la sección mientras edita la página, no será visible en la parte delantera, una vez que publique la página. Para cambiar toda la visualización de la página web, todo lo que tiene que hacer es hacer clic en el icono del modo de respuesta en la parte inferior del tablero elemental.
Por defecto, notará la visualización móvil.
Para cambiar entre dispositivos, haga clic en el icono del dispositivo respectivo en la parte superior.Y para salir de la vista receptiva, haga clic en “X” en la esquina superior derecha.¿Qué tan fácil fue crear una visualización receptiva para dispositivos móviles?Fácil, ¿verdad?¿Por qué deberíamos usar primero primaria?
Tan experimentado como es, crear un sitio web puede ser un desafío. Desde obtener el punto de navegación hasta mantener la estética general del sitio web, lleva tiempo y esfuerzo. Si usted es un profesional independiente o diseñador de sitios web, sabrá que cada nuevo cliente viene con nuevos desafíos y requisitos específicos. De hecho, plataformas como WordPress facilitan mucho el proceso de desarrollar el sitio web. Dicho esto, siempre te queda por querer más. Afortunadamente, tienes creadores de páginas de arrastrar y soltar, como Elementary, que llevan todo el proceso de desarrollo web a un nivel completamente nuevo. Desde el uso de una gama de widgets y elementos para construir su página web hasta impresionantes bloques y plantillas, puede hacer mucho con el elemento. Permítanos profundizar por qué debe usar el complemento de constructor de páginas Elementor. Usando la función de deslizamiento y colocación, simplemente agregue un widget o elemento de su elección, personalice según lo desee y publique la página. Es lo más simple posible. No tiene que saber cómo codificar o tener conocimiento de programación. Con una vista previa de tiempo real, puede ver exactamente cómo se ve su página después de una actualización, en lugar de publicarla y luego debe restaurarla si no salió. 3. Activo fuerte y fuerte y impresionante
Con más de 90 widgets increíbles (también llamados bloques) y más de 300 plantillas de diseñador, puede confirmar su imaginación mientras crea sus páginas web, páginas de destino, ventanas emergentes y más. Desde los títulos hasta los botones, íconos para las redes sociales y las galerías y caruses, hay un widget para casi cualquier función que desee agregar en su sitio web. Ver que más del 50% del tráfico del sitio web proviene de dispositivos móviles, es imperativo Para obtener la visibilidad de su sitio web en su móvil. Con Elementor, puede obtener una vista previa y personalizar fácilmente páginas para escritorio, muebles y tabletas. Simplemente cambie la visualización y cambie cada elemento para que se vea perfecto en cualquier dispositivo. Desde los títulos, párrafos e incluso el texto del botón, defina su marca una vez y aplíquelas a cada elemento en su sitio 6. Plantillas prefabricadas con plantillas de inicio Astra, ni siquiera necesitaría una alternativa. Hay una plantilla preparada, sin importar el nicho en el que se encuentre. Si está buscando varias opciones, puede considerar la impresionante gama de plantillas con las que está orgullosa del elemento. Entonces, incluso si eres un principiante que comienza con el diseño de sitios web, Astra y Elementor te cubrieron. ¿Sabes, esos efectos de paralaje hacen que los textos se destaquen creando un efecto 3D o incluso un efecto de lotería?
Elementor te permite hacer esto con bastante facilidad. Estos están completamente de acuerdo con los estándares de seguridad de WordPress y eliminan cualquier contenido malicioso cuando sea necesario. Use la plataforma en su idioma favorito. 10. Integración perfecta con complementos de WordPress Si se trata de WooCommerce, LearnDash, Yoast SEO, MemberPress y muchos más, Elementor es compatible con los complementos populares de WordPress. </ 11. Corriente abierto Aunque esto requerirá un poco de codificación de usted, tiene acceso completo al código fuente elemental. Puede mejorar las habilidades de Elementer agregando sus propias funcionalidades personalizadas y personalizadas CSS. Ya sea que haya eliminado una sola línea de código o un bloque de código completo, una cancelación simple puede volver al lugar donde comenzó. Con el historiador de las revisiones elementales, todo el proceso de creación de la página se puede seguir fácilmente. Su sitio web continuará funcionando. Al igual que con ciertos creadores de páginas, no está bloqueado por códigos cortos cuando usa Elementor. 14. Comunidad activa
Con Elementor, no estás solo.Debido a la enorme popularidad del complemento elemental, hay una comunidad en aumento a la que puede conectarse.Aprenda constantemente y exponerse a nuevas herramientas, ideas de diseño y más.Sin mencionar que la comunidad está allí para apoyarlo si necesita ayuda, sugerencias e ideas para construir un sitio web maravilloso. Sin cargo.Aunque hay una versión profesional, como se mencionó anteriormente en el artículo, la versión gratuita debería funcionar bien.
Mientras las ventajas van más allá, enumeré las dos aquí para usted. Tr>
td> no opción de precio de vida
Conclusión UF, ¡cubrí mucha tierra con elemento en esta publicación! En cuanto a las conclusiones principales, espero que pueda ver por qué Elementor es un generador de página fantástico que elimina muchos supuestos del diseño web. Ofrece un equilibrio ideal entre la facilidad de uso y la funcionalidad profunda, lo que lo convierte en una de las páginas más accesibles disponibles para WordPress. También espero que recuerden darle a Astrei como un tema de WordPress para asociarse con Elementor.
Tags Cómo usar Elementor: una guía completa (2021)
