Instalaci贸n y configuraci贸n de Elementor

En la lecci贸n anterior,聽editores de contenido, hemos visto algunos de los editores de contenido聽para WordPress聽m谩s populares.

Para el desarrollo de este聽curso de WordPress, vamos a trabajar con聽Elementor聽ya que es muy f谩cil de usar y es 100% compatible con聽Astra, el tema que utilizaremos tambi茅n en el desarrollo de este curso.

脥ndice del contenido
    Add a header to begin generating the table of contents

    1. Instalando Elementor

    Elementor聽es un plugin que se instala desde el repositorio de plugins de WordPress y聽se integra con "casi" cualquier tema WordPress.

    Para instalar el plugin:

    1. Dir铆gete al apartado聽Plugins >> A帽adir nuevo.
    2. En el campo de b煤squeda escribe Elementor.
    3. Haz clic en聽Instalar ahora聽y seguidamente en聽Activar.

    Una vez activo el plugin, nos encontraremos con una p谩gina de bienvenida聽con un v铆deo introductorio, para que comencemos a trabajar en nuestro sitio web.

    P谩gina de bienvenida de Elementor
    P谩gina de bienvenida de Elementor

    Anuncio publicitario

    2. Configuraci贸n de Elementor

    Al instalar Elementor聽se crea un elemento de men煤 llamado聽Elementor, en el聽men煤 principal de WordPress,聽con una serie de apartados donde se puede configurar el plugin.

    Vamos a ver solo los apartados en los que necesitamos hacer cambios. El resto se pueden dejar como est谩n.

    2.1 Ajustes: General

    Dir铆gete al apartado Elementor >> Ajustes y, en la pesta帽a General, ver谩s las siguientes opciones:

    Elementor es un plugin tan potente que podr铆amos dise帽ar un sitio web, con este plugin, sin necesidad de instalar un tema.

    Sin embargo, como es obligatorio tener un tema activo en WordPress, vamos a aprovechar el potencial tanto del tema (en este caso Astra) como de Elementor para conseguir excelentes resultados.

    Astra incluye su propia librer铆a de fuentes y opciones de colores por lo que no ser谩 necesario utilizar estas opciones del plugin. Marca las casillas para desactivar estas opciones y haz clic en Guardar cambios.

    Ajustes de Elementor: General
    Ajustes de Elementor: General

    2.2 Ajustes: Estilo

    Indica el valor del Ancho del contenido y haz clic en Guardar cambios.

    Ajustes de Elementor: Estilo
    Ajustes de Elementor: Estilo

    3. Panel de edici贸n de Elementor

    Una vez instalado y configurado聽Elementor, podemos comenzar a editar nuestras p谩ginas y entradas.

    Lectura recomendada...

    En la lecci贸n del curso de Elementor, panel de edici贸n de Elementor, puedes encontrar informaci贸n actualizada sobre todas las opciones de edici贸n de este editor de contenidos.

    4. Plantillas con Elementor

    Otra de las grandes bondades que ofrece Elementor es que se pueden dise帽ar plantillas para luego importarlas en nuestro sitio web. La finalidad de crear plantillas en Elementor es la de ahorrar tiempo y mantener un dise帽o estandar.

    Los tipos de plantillas que podemos crear con Elementor son:

    Para que entiendas el uso de las "P谩ginas" en Elementor, veamos un ejemplo:

    Imag铆nate que vamos a crear el sitio web de un Gimnasio. En nuestro sitio web vamos a聽ofrecer 4 servicios: Spinning, CrossFit, Pesas y Pilates.

    Cada uno de estos servicios tendr谩 su propia p谩gina individual con el mismo formato聽(imagen principal, t铆tulo, texto, iconos y formulario de contacto) y solo se diferencian en la imagen principal, el t铆tulo y el texto. El resto de elementos (iconos y formulario de contacto) ser谩n los mismos para todos.

    Lo que tenemos que hacer es crear una plantilla en Elementor del tipo "P谩gina", una sola vez, y la importamos en cada uno de los servicios. Luego modificamos solamente lo que nos interesa (imagen principal, el t铆tulo y el texto) en cada servicio.

    De esta forma no tenemos que repetir el trabajo 4 veces聽y nos ahorramos tiempo que siempre se traduce en dinero.

    Para crear una plantilla en Elementor, dir铆gete al apartado Plantillas >> A帽adir nueva.

    Crear una plantilla con Elementor
    Crear una plantilla con Elementor

    Se abrir谩 una ventana donde tendr谩s que seleccionar el tipo de plantilla, P谩gina o Secci贸n, escribir el nombre de la plantilla y crearla. Luego, en el apartado Plantillas >> Plantillas guardadas, puedes ver el listado de plantillas que hayas creado.

    Listado de plantillas en Elementor
    Listado de plantillas en Elementor

    5. Insertar plantillas en Elementor

    Una vez hayas creado una plantilla, lo siguiente ser谩 insertarla en una p谩gina o entrada.

    Dir铆gete al apartado P谩ginas. Ver谩s el listado de p谩ginas existentes en WordPress pero algo diferentes que al principio.

    Editar una p谩gina o entrada con Elementor
    Editar una p谩gina o entrada con Elementor

    Cuando editas una p谩gina o entrada por primera vez con Elementor (como lo hicimos en el punto 3), Elementor a帽ade un aviso y un enlace directo a cada p谩gina o entrada que ser谩 visible en el listado de p谩ginas o entradas.

    Como puedes apreciar en la imagen anterior, se ha a帽adido el mensaje Elementor en el t铆tulo de la p谩gina y el enlace Editar con Elementor en el men煤 de la p谩gina.

    De esta manera puedes editar la p谩gina directamente con Elementor sin tener que entrar primero en la p谩gina.

    Haz clic en el enlace Editar con Elementor. Una vez dentro, accede a la biblioteca de Elementor haciendo clic en el icono聽聽ubicado en el recuadro聽Arrastra aqu铆 el widget del 谩rea de contenido.

    En la ventana BIBLIOTECA, haz clic en la pesta帽a Mis plantillas. Ver谩s un listado de las plantillas creadas.

    Insertar plantillas en una p谩gina o entrada con Elementor
    Insertar plantillas en una p谩gina o entrada con Elementor

    Haz clic en Insertar para insertar la plantilla en la p谩gina o entrada.

    En la lecci贸n del curso de Elementor, plantillas con Elementor, podr谩s encontrar informaci贸n m谩s detallada para crearlas e insertarlas en las p谩ginas y entradas.

    6. Versi贸n PRO de Elementor

    Como habr谩s podido apreciar en los puntos anteriores, Elementor es el editor de contenidos perfecto para dise帽ar sitios web con WordPress. Es 100% compatible con Astra y ofrece una interfaz agradable de trabajo.

    Aunque la versi贸n Lite de Elementor (gratis) ofrece widgets suficientes para crear sitios web "sencillos", desde mi punto de vista, el plugin carece de algunas funciones que solo se podr铆an conseguir con la versi贸n PRO.

    Esto no quiere decir que el plugin no funcione bien. Ten en cuenta que, al ser un plugin FREEMIUM, ofrece una versi贸n Lite para que lo probemos y podamos adquirir la versi贸n PRO si cumple nuestras expectativas.

    Te voy a contar una an茅cdota que me pas贸 con聽Elementor:

    En el sitio web de un cliente (muy exigente por cierto)聽ten铆a instalados 21 plugins聽que necesitaba para poder hacer todo lo que mi cliente me ped铆a y el sitio web estaba cargando muy lento.

    Aunque es una cantidad razonable de plugins, despu茅s de conocer Elementor, me di cuenta que聽pod铆a prescindir de 9 de ellos聽ya que Elementor聽(versi贸n PRO)聽era capaz de realizar el mismo trabajo聽de todos estos plugins聽y hasta mucho mejor.

    Simplemente le plante茅聽a mi cliente聽la opci贸n de聽hacer un redise帽o de su sitio web con Elementor y, la mejora del dise帽o, funcionalidad y velocidad de carga fu茅 brutal adem谩s de reducir el tiempo de trabajo.

    Los plugins que eliminamos al instalar Elementor PRO fueron:

    • Contact Form 7.
    • Contact Form 7 Extension For Mailchimp.
    • Popup Maker.
    • Slider Revolution.
    • Social Warfare.
    • Templatera.
    • Ultimate Addons for WPBakery Page Builder.
    • Who Stole the Text Justify Button.
    • WPBakery Page Builder.

    Elementor PRO fue capaz de hacer y mejorar todo el trabajo que hac铆an estos plugins incluyendo la opci贸n de聽integrar Mailchimp en los formularios de contacto y suscripci贸n.

    Adem谩s de esto,聽la versi贸n PRO de Elementor聽ofrece m谩s funciones para el desarrollo de sitios web profesionales:

    • +30 widgets adicionales.
    • Contenido din谩mico en los widgets.
    • Posibilidad de a帽adir c贸digo CSS por p谩gina o en cada widget.
    • M谩s plantillas (bloques y p谩ginas) profesionales en la biblioteca.
    • Un maquetador de temas para dise帽ar cabeceras, pie de p谩ginas, archivos y apartados de WooCommerce personalizados.
    • Creador de ilimitados popups en el sitio web.
    • Creaci贸n de un shortcode 煤nico al crear plantillas.

    Y muchas funciones m谩s que nos permitir谩n construir un sitio web realmente profesional ahorr谩ndonos tiempo y dinero.

    Aunque para el desarrollo de este curso vamos a utilizar la versi贸n Lite (gratuita), vale la pena invertir en la versi贸n PRO ya que todo son ventajas: tienes la opci贸n de realizar dise帽os m谩s profesionales, mejora la velocidad de carga de tu sitio web al no tener que instalar tantos plugins, entre otras.

    Elementor Page Builder

    Uno de los mejores editores de contenido que puedes instalar para crear un proyecto profesional con WordPress, es聽Elementor. Ofrece una versi贸n gratuita, que puedes instalar desde WordPress y, una de pago, con excelentes opciones de dise帽o.

    Es r谩pido, fiable y poderoso. Se adapta perfectamente a "casi" cualquier tema y posee una estructura perfecta para el desarrollo de sitios web profesionales.

    7. Widgets adicionales para Elementor

    Elementor PRO ofrece una completa variedad de widgets y funciones m谩s que suficientes para dise帽ar sitios web profesionales por lo que no har铆a falta instalar m谩s plugins en tu sitio web.

    Sin embargo, muchos usuarios no tienen la posibilidad econ贸mica de comprar la versi贸n PRO del plugin, lo cual es una pena.聽Si eres uno de estos usuarios, no te desanimes.

    Aunque Elementor es el plugin oficial (el sitio web oficial es聽elementor.com), existen otras empresas que desarrollan plugins para Elementor. Estos plugins suelen ser FREEMIUM o PREMIUM y, muchos de los widgets que ofrecen en la versi贸n Lite (gratis), no se encuentran en la versi贸n Lite de Elementor y funcionan como complemento del plugin.

    Muchos de estos plugins se pueden encontrar en el respositorio de plugins de WordPress.

    Anuncio publicitario

    8. Conclusi贸n

    Ha sido tan excitante crear esta lecci贸n que no sabr铆a como concluirla. Sonar谩 repetitivo decir otra vez que Elementor es un potente editor de contenidos con el que se puede desarrollar infinidad de sitios web con una apariencia profesional.

    Con esta lecci贸n hemos聽completado el equipo perfecto聽para desarrollar nuestro sitio web:聽Astra聽+聽Elementor. A partir de ahora, solo tienes que dar rienda suelta a tu imaginaci贸n para construir un fant谩stico sitio web.

    驴Te ha gustado?

    Te estar铆a muy agradecido si pudieras valorar esta entrada y compartirla en tus redes sociales. De esta manera me animas a continuar trabajando en este proyecto y ayudas a otras personas que desean aprender.

    (25 votos, promedio: 4.8 de 5)

    Share on facebook
    Facebook
    Share on twitter
    Twitter
    Share on whatsapp
    WhatsApp
    Share on telegram
    Telegram
    Share on email
    Email

    驴Me invitas un caf茅?

    Todo el contenido que puedes encontrar en este sitio web es gratis y siempre lo ser谩 pero, mantenerlo, requiere de muchos caf茅s y muuuuchas horas . Si te gusta mi trabajo y te est谩 ayudando, considera invitarme un caf茅 para apoyarme y apoyar este proyecto. 隆Te invito un caf茅!.

    Suscr铆bete y aprende WordPress desde cero

    No me gusta el SPAM y se que a ti tampoco. S贸lo recibir谩s informaci贸n 煤til sobre WordPress.

    Al enviar, confirmas que has le铆do y aceptas la pol铆tica de privacidad. Conoce nuestro compromiso con tu privacidad.

    Comparte tu experiencia

    Deja un comentario si tienes alguna duda o cu茅ntanos c贸mo ha sido tu experiencia.

    guest
    20 Comentarios
    Inline Feedbacks
    Ver todos los comentarios
    German

    Hola Gian: excelente tu curso! Ahora, me he topado con un inconveniente que a煤n no logro resolver. La cuesti贸n es que import茅, desde otra p谩gina web que he creado hace un tiempo, una plantilla de Elementor para utilizar en las entradas de mi nueva pagina, Ahora bien, una vez que modifico la entrada con esta plantilla y guardo los cambios, al ver como quedo el trabajo, los cambios no aparecen y en su lugar me aparece una entrada con las caracter铆sticas del tema que tengo instalado (Hello) con algunas peque帽as modificaciones hechas con Elementor. Ten茅s idea de donde puede estar mi error?

    Gian Oliveira

    Hola German, muchas gracias por tu comentario. He de suponer que has exportado una plantilla del tipo "Single" con variables din谩micas para aplicar en las entradas. Si es as铆, al exportar la plantilla de origen, solo se exporta la estructura pero no los estilos (colores, tipograf铆as). Si actualmente tienes instalado el tema Hello, la nueva entrada adoptar谩 los estilos que tengas creados pero no los de la plantilla. En caso contrario, podr铆as indicarme qu茅 tipo de plantilla has exportado de origen? Este suele ser uno de los problemas m谩s frecuentes que se suelen encontrar ya que existen varias plantillas pero cada una tiene una funci贸n diferente. Saludos!

    German

    Hola Gian: la plantilla es una plantilla creada por mi con elementor para las Entradas del blog, Pero no solo no me toma los estilos de las plantillas como bien dec铆s (colores, tipograf铆as, etc.) sino que tampoco me guarda las modificaciones hechas en cada entrada sin usar plantilla alguna. Predomina el estilo del tema. No se si me explico. Desde ya muchas gracias, por tu respuesta!

    German

    Hola Gian buen d铆a! Te escribo para comentarte que ya descubr铆 cu谩l es el problema por el cual no pod铆a hacer modificaciones a mis entradas ni a mis p谩ginas correctamente usando Elementor (ni importando una plantilla desde otra web, ni haciendo las modificaciones ah铆 mismo). El problema es el archivo .htaccess que coloqu茅 en la ruta wp-content/uploads/. Solucionarlo me cost贸 empezar desde cero y reiniciar completamente mi cuenta de hosting! pero FINALMENTE LO LOGR脡!! jajaja. En cuanto cree ese archivo el problema surgi贸. Muchas gracias por tu incre铆ble Post es de gran ayuda para aficionados como yo y me entretiene horrores!! jaja

    Gian Oliveira

    Hola German, me alegra saber que lo hayas podido resolver aunque haya costado un poco. Much铆simas gracias por tus palabras y por haberte tomado la molestia de compartir la soluci贸n en los comentarios. Continuar茅 creando m谩s contenido para que te ayude con el desarrollo de tu sitio web con Elementor. Un abrazo!

    Omar

    Hola empec茅 a trabajar con elementor Pero cuando vi a usar las plantillas no encontr茅 ninguna... Qu茅 debo hacer para tener acceso a ellas?

    Gian Oliveira

    Hola Omar, si accedes a las plantillas desde el apartado Plantillas, no vas a encontrar ninguna ya que desde ese apartado solo se listan las que hayas creado. A las plantillas predise帽adas por Elementor, se accede desde cada p谩gina o entrada o incluso cuando vayas a crear una plantilla nueva. Saludos!

    JAVIER

    Buenas,
    estoy utilizando Elementor de esta forma: creo M贸dulos a base de plantillas (canvas), luego creo las p谩ginas que no son m谩s que los m贸dulos importados. El problema es que cuando voy y modifico una plantilla/m贸dulo, las p谩ginas no se actualizan con la informaci贸n de los m贸dulos importados y tengo que entrar a cada p谩gina y re-importar los m贸dulos. Qu茅 estoy haciendo mal? Es decir, quisiera que se actualicen las p谩ginas con la nueva informaci贸n. Muchas gracias y un saludo

    Gian Oliveira

    Hola Javier, muchas gracias por escribir. En primer lugar, no utilices el t茅rmino "m贸dulo" porque se presta a confusi贸n. No es un t茅rmino que exista en Elementor. En Elementor hay varios tipos de plantillas y, seg煤n lo que me indicas, has creado una plantilla del tipo "P谩gina". Estas plantillas suelen ser 煤tiles cuando tienes varias p谩ginas con una distribuci贸n muy similar (misma cantidad de secciones, columnas...). Cuando las importas, lo que es 煤til es la distribuci贸n pero, el contenido (colores, textos, im谩genes), es independiente de la plantilla. Si modificas el contenido de la plantilla, no se modificar谩 el contenido de la p谩gina ya que esta plantilla no funciona as铆. Lo que tu quieres hacer, puedes hacerlo con plantillas del tipo "Secci贸n". En este caso, creas varias plantillas tipo secci贸n con el contenido que se repetir谩 en todas las p谩ginas. Luego importas las secciones en cada p谩gina y, si modificas la secci贸n desde el apartado Plantillas, se actualizar谩 la informaci贸n en cada p谩gina autom谩ticamente. Espero poder haberte ayudado. Un saludo!

    JAVIER

    Excelente, voy a probarlo! uno que es novato...
    Muchas gracias

    Elsy

    Hola, tengo elementor e instal茅 uno de los sitios que trae astra predise帽ados, pero no me funcionan los efectos de entrada en ning煤n elemento que quiera colocarselo.. 驴Alguna idea?

    Gian Oliveira

    Hola Elsy, no entiendo muy bien tu pregunta. 驴A qu茅 te refieres con los efectos de entrada? 驴Es algo de Elementor o de Astra? Si pudieras ser un poco m谩s espec铆fica con tu pregunta es posible que te pueda ayudar. Saludos!

    Elsy

    Efectos de movimiento de elementor, por ejemplo : fade in, fade out.. Etc.. No me funcionan 馃檨

    Gian Oliveira

    Hola Elsy, a mi me pas贸 lo mismo. El problema se encuentra en el sistema operativo. Yo uso Windows 8 y se encontraban las animaciones desactivadas. En Google puedes buscar algo como "activar animaciones en Windows (o MAC)" y vas a encontrar muchos tutoriales y v铆deos. No pongo enlaces ya que, dependiendo del SO que est茅s utilizando, ser谩 diferente pero seguro que con eso podr谩s ver las animaciones de Elementor. Un saludo!

    Elsy

    Gian muchisimas gracias, si era eso... tenia en mi windows 10 las animaciones desactivadas. Que bueno contar con gente dispuesta a ayudar como lo hiciste tu. Bendiciones.

    Gian Oliveira

    Que bueno que lo hayas podido resolver. Ha sido todo un placer. Saludos!

    Catherine

    Hola, tengo una duda, si ya compre el elementor pro, puedo hacer la cancelaci贸n de este?

    Gian Oliveira

    Hola Catherine, si tienes una licencia de Elementor PRO tienes un tesoro en tus manos. No se cu谩les son las razones para que quieras devolverla pero pi茅nsatelo bien ya que tienes una herramienta muy poderosa para el desarrollo de sitios web. Estoy comenzando a crear un curso de Elementor donde voy a exprimir este plugin al 100%, tanto la versi贸n gratuita como la PRO que quiz谩 te pueda ayudar. 驴Qu茅 puedes solicitar la devoluci贸n del importe? Por supuesto que s铆. Te ofrecen 30 d铆as para solicitar la devoluci贸n pero yo que tu me lo pensar铆a. Un saludo!

    jorge

    yo tmb quiero cancelarlo y no veo donde encontrar esas opcion, eso ya deja mucho de que desear

    Gian Oliveira

    Hola Jorge, 驴por qu茅 quieres hacerlo? Supongo que tendr谩s que enviar un ticket al soporte de Elementor y solicitar la cancelaci贸n. Saludos!

    20
    0
    驴Dejas un comentario? Gracias!x
    ()
    x
    Search
    Generic filters

    Tratamiento de datos personales

    • Responsable: MARIA ANTONIETA BEAUTY CONCEPT, S.L.
    • Finalidad: Suscribirte a la lista de correos electr贸nicos.
    • Derechos: Podr谩s ejercer tus derechos de acceso, rectificaci贸n, limitaci贸n y suprimir los datos en legal@cursowordpress.com, as铆 como el derecho a presentar una reclamaci贸n ante una autoridad de control.
    • Destinatarios: Los datos no se ceder谩n a terceros salvo en los casos en que exista una obligaci贸n legal.
    • Informaci贸n adicional: En mi聽pol铆tica de privacidad encontrar谩s informaci贸n adicional sobre la recopilaci贸n y el uso de su informaci贸n personal incluida informaci贸n sobre acceso, conservaci贸n, rectificaci贸n, eliminaci贸n, seguridad y otros temas.

    Tratamiento de datos personales

    • Responsable: MARIA ANTONIETA BEAUTY CONCEPT, S.L.
    • Finalidad: Moderar y responder comentarios de usuarios.
    • Derechos: Podr谩s ejercer tus derechos de acceso, rectificaci贸n, limitaci贸n y suprimir los datos en legal@cursowordpress.com, as铆 como el derecho a presentar una reclamaci贸n ante una autoridad de control.
    • Destinatarios: Los datos no se ceder谩n a terceros salvo en los casos en que exista una obligaci贸n legal.
    • Informaci贸n adicional: En mi聽pol铆tica de privacidad encontrar谩s informaci贸n adicional sobre la recopilaci贸n y el uso de su informaci贸n personal incluida informaci贸n sobre acceso, conservaci贸n, rectificaci贸n, eliminaci贸n, seguridad y otros temas.