Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Elementor: La guía que esperabas del mejor theme de WordPress que existe ahora mismo

Si quieres verlo directamente el site y así comentar, pásate por Elementor: La guía que esperabas del mejor Theme de WordPress que existe ahora mismo

Si existe un theme de WordPress del que sólo haya escuchado halagos es, sin duda, Elementor.

En los últimos años, ha venido a revolucionar el concepto de theme a todos los niveles, desde el diseño hasta la usabilidad web o el SEO, y lo está haciendo realmente bien.

4 millones de instalaciones activas lo contemplan, y sigue subiendo como la espuma.

Por eso he querido hacer esta guía, para que veas absolutamente todo lo que te ofrece este theme paso por paso.

Y te aseguro que no ha sido nada fácil.

Primero te voy a contar qué es Elementor y qué características tiene.

Luego pasaré a hablarte sobre cómo se usa y, por último, veremos todas las herramientas de diseño (más de 60).

Vas a flipar.

Por qué Elementor es el mejor theme de WordPress que existe ahora

Te decía en el título que Elementor es el mejor theme de WordPress que existe ahora mismo, y con los cientos de miles de themes que hay en el mercado, no es nada fácil.

Por ello quiero darte los 5 puntos que le hacen el mejor.

Y tranquilo, que voy a ser breve:

1. Con Elementor puedes tener el SEO perfecto

Empecé a hacer SEO en el lejanísimo año 2008, así que sé de lo que hablo.

Con Elementor puedes tener unos diseños muy bonitos, una usabilidad perfecta y, además, el SEO perfecto.

Normalmente los themes de WordPress tipo Pagebuilders (en otras palabras, los themes que te permiten hacer el diseño que dé la real gana) lo hacían por meter mucho código basura, y el SEO no era bueno.

Pero, con Elementor, no ocurre.

Sólo mete el código que necesita y, además, Google lo entiende perfectamente.

Un puntazo.

2. Es un theme rápido. Muy rápido.

Vale pero… ¿qué es muy rápido?

Mira, te voy a enseñar lo que tarda en cargar una página de este blog con más de 20.000 palabras y varias imágenes:

elementor-velocidad

Sí.

Más de 20.000 palabras y un porrón de imágenes en menos de 2 segundos (la página esta, por si quieres entrar a cotillear).

Y sin tocar nada de código, es para flipar.

3. Tiene más de 4 millones de instalaciones activas

No sé si es el theme más descargado de WordPress en la actualidad, pero Elementor se le acerca.

Podría decirte que Elementor lo está usando todo el mundo y no me equivocaría del todo.

Funciona tan bien que se ha ganado un hueco para ser la base en la que trabajan las agencias de desarrollo web de medio mundo.

4. Tiene una versión gratuita que puedes probar

No te voy a engañar:

La versión gratuita de Elementor comparada con la de pago sólo sirve para que veas su potencial y nada más, pero siempre se agradece tener parte del producto gratis, ¿no crees?

5. Y, además, está traducido al castellano

Otra de las cosas que no suelen gustar es que los themes estén en inglés pero, en este caso, Elementor está traducido al castellano.

Esto hace que sea mucho más sencillo moverla, añadir elementos de diseño y que sea todo algo más familiar.

¿Cómo se usa Elementor?

Elementor es muy completo, y eso suele dar alguna confusión al principio.

Por eso, quiero contarte las dos partes diferentes que tiene, para que no te hagas un lío.

Pagebuilder, lo que sería el inicio de Elementor

De lo primero que te voy a hablar es de la parte sencilla, que sería el Pagebuilder o «Constructor de Páginas».

El concepto es sencillo:

Con Elementor puedes modificar el diseño de una página o post de WordPress y ponerlo como te dé la real gana.

No voy a entrar en detalle acerca de los elementos de diseño, que de eso hablaremos largo y tendido más adelante, pero sí te voy a contar cómo puedes llegar a él.

Una vez creas un post o página nuevo:

elementor-nueva-entrada

Y se te abrirá el Constructor de Páginas de Elementor.

Sería algo parecido a esto (fíjate que he puesto numeritos):

Te cuento qué es cada cosa:

El área que está en el Punto 1 es donde vas a arrastrar los elementos de diseño, y te va a mostrar como quedaría el post o la página específica que estás creando.

Para añadir elementos de diseño, basta con arrastrar y soltar (el Drag&Drop de toda la vida).

Es fácil, muy fácil.

En la columna que señala el Punto 2 tienes todos los elementos de diseño disponibles para añadir a tu página o post.

En total, si tienes la versión Pro, hay más de 60.

Vamos, que tienes opciones de sobra para hacer cosas bonitas.

Theme Builder, el constructor de themes de Elementor

El Pagebuilder de Elementor sirve para hacer páginas o post.

Pero, y si quieres que el theme sea Elementor al 100%, ¿cómo haces?

Para eso tienes que crear varias apariencias/secciones, por ejemplo:

  • El menú y la cabecera
  • El footer o pie de página.
  • La página de resultados de búsqueda.
  • La página de archivos del blog.
  • La página de posts de autor.
  • Y muchas otras.

Justo eso es lo que te deja crear el Theme Builder de Elementor.

Para llegar a esta parte, tienes que ir aquí, fíjate:

elementor-theme-builder-sidebar

Y, una vez estás aquí en la barra lateral de administración, le das a «Theme Builder» (la tercera opción de la derecha), y te saldrá algo así:

theme-builder-elementor-home

Como ves, en el caso de mi blog tengo un total de 6 «plantillas» distintas dentro de mi blog:

  • Archivos: Serían las páginas como archivos de autor, fechas, resultados de búsqueda, etc. Todas ellas con el mismo diseño.
  • Página estándar: Sería un esqueleto para una página típica, sin tocar nada.
  • Footer: Así es como se muestra el pie de página en todas las URLs del blog.
  • Header Principal: El menú y la cabecera (logo, buscador, etc), sale en todo el sitio.
  • Post estándar: El diseño normal de un post normal antes de tocar nada.
  • Post de blog: Aquí estoy trabajando en un diseño especial para post de blog, pero todavía no lo tengo asignado.

Si entras en cada una de ellas, lo que te va a salir el el Pagebuilder de antes, para que añadas o quites los distintos elementos de diseño.

Así de sencillo.

¿Necesito el Page Builder y el Theme Builder?

Realmente no.

Mucha gente lo que hace es que instala un Generate Press como esqueleto (lo que sería el Theme Builder) y, sobre ese, utiliza los elementos de diseño de Elementor.

Los resultados son muy buenos.

Otros ya empezamos a usar el Theme Builder de Elementor como la plantilla base y, sobre ella, construimos.

La parte buena de hacerlo así es que ahorras Generate Press (50$ su versión premium) y, además, te queda todo más integradito.

Mi consejo es que uses todo sobre Elementor, a día de hoy, es más que suficiente.

¿Merece la pena Elementor de pago, o me sirve el gratis?

Aquí voy a ser muy claro:

Elementor es el mejor theme de WordPress de largo, y su licencia para un dominio es de 49$/año, que serían unos 45€/año.

No es dinero, para nada.

Te va a ahorrar cientos de horas, vas a tener un resultado súper profesional, 100% versátil y, además, vas a cumplir todos los estándares de SEO que quiere Google.

Por esto te recomiendo encarecidamente que, si quieres instalar Elementor para probar, bien.

Pero, si vas a usarlo para un proyecto, compres el de pago.

IR A VER MÁS
IR A VER MÁS

Herramientas de diseño de Elementor: Lo que mola de verdad

Nos vamos a meter a ver todos los elementos de diseño que te permite poner Elementor, y quiero hacerlo con todo detalle.

Te los voy a dividir entre los que están disponibles en la edición gratis (10), los pro (24), los generales (20), y luego otros que sirven para las páginas de archivos.

En total van a ser 68.

A mayores, te voy a contar cositas acerca de addons de pago.

Vamos, que la cosa va para largo.

Mi idea es mostrarte, para cada elemento de diseño:

  • Como queda en real, que para eso uso Elementor.
  • Un pantallazo de la configuración
  • Si existe vídeo, también te lo pondré.

La pantalla de configuración es estándar sería algo parecido a esto:

En ella puedes cambiar muchas cosas, entre ellas:

  • La alineación.
  • El color del texto.
  • La tipografía,
  • Las columnas.
  • El espaciado.
  • Los bordes.
  • Separadores.
  • Un largo etc.

Va cambiando según el elemento de diseño pero es algo análogo para todos.

Elementos de diseño de Elementor básicos

Vamos con los 10 elementos de diseño que trae la versión gratis de Elementor.

elementor-basico

Sección interior: Haciendo columnas

Lo que Elementor llama «Sección Interior» no es ni más ni menos que poner una sección dentro de otra.

Esto se traduce en hacer columnas donde puedes meter más elementos de diseño dentro.

Se ve mejor con un gif, fíjate:

seccion-interior-elementor

Y sí, puedes hacer columnas dentro de columnas, y así tienes secciones de 4.

Fantástico, ¿verdad?

Encabezado: Los H's clásicos de SEO

El segundo elemento de los básicos son los encabezados, que no dejan de ser lo mismo que se usa en WordPress normal.

La parte que te da Elementor era que, como te decía al inicio de esta parte, te deja personalizarlos con color, pesos, puedes poner la tipografía más grande, etc.

Verse en real se ven así:

Esto es un encabezado verde de prueba en H5

Y, dentro de Elementor, así:

elementor-encabezado

Puedes ponerle:

  • El texto del título.
  • Si quieres un enlace a la URL que tú quieras.
  • Elegir el tamaño.
  • La etiqueta HTML (es decir el H1-H6).
  • La alineación a izquierda, derecha o centrado.

Vamos, no tendrás queja.

Imagen: Sí, las imágenes normales

Sí, estos primeros módulos son los sencillos.

Ahora toca que te muestre cómo quedan las imágenes, pero lo voy a hacer directamente con la imagen sobre la configuración de este elemento de diseño, así matamos dos pájaros de un tiro.

elementor-imagen

Puedes elegir:

  • La imagen que quieres mostrar.
  • El tamaño.
  • La alineación.
  • Si quieres que salga algo en la leyenda y cómo.
  • Si quieres poner un enlace.

Editor de texto: otro de toda la vida

Como vas a meter módulos distintos al texto normal, tienes un módulo de texto con todas las opciones que trae WordPress.

En real queda como esto mismo que estás leyendo, que está creado con el editor de texto, y la pantalla de configuración sería esta:

editor-de-texto-elementor

No te voy a dar mucho la coña porque es el editor de WordPress como tú lo tengas.

Ni más, ni menos.

Vídeo: Sí, para añadir vídeos a tus páginas o post

El módulo de vídeo tiene muchas cosas interesantes, porque es mucho más que incrustar un vídeo de YouTube.

Un ejemplo real sería este:

La parte guay está en las opciones, fíjate:

video-elementor

Puedes elegir:

  • Si el vídeo es de YouTube, Video, DailyMotion o alojado en tu servidor.
  • Cuando quieres que empiece y termine el vídeo.
  • Si quieres que comience solo.
  • Si quieres silenciarlo.
  • Si quieres ponerlo en bucle.
  • Si quieres que se vean los controles o no (play, parar, etc.).
  •  Si quieres que el vídeo sea privado o no.
  • Si quieres que los vídeos sugeridos que salgan después sean sólo del canal o de todas partes.
  • Si quieres superposición de imagen o no.

Botón: Añadir botones en Elementor

Otra funcionalidad muy interesante de Elementor en su versión básica es que te permite poner botones cómo y dónde quieras.

Para que lo veas en vivo.

Si pinchas, te vas a la home.

EJEMPLO DE BOTÓN

Molón, ¿verdad?

Pues así se configura:

boton-elementor

Cosas que puedes elegir:

  • En «Tipo» tienes 4 opciones predefinidas de botón.
  • Puedes poner el texto que quieras al botón.
  • En enlace, lo mismo, el enlace que quieras.
  • Puedes elegir alineado a la izquierda, derecha o centro.
  • Puedes elegir el tamaño del botón (el del ejemplo es el «largo»).
  • Puedes elegir un icono entre cientos de ellos.
  • Puedes elegir si poner el icono antes, después arriba o abajo del texto.
  • Puedes elegir el espaciado.
  • E incluso un ID.

Separador: Mucho más útil de lo que piensas

La función de separador de Elementor la uso un montón, es muy útil para separar en post tipo listas, y queda muy cuqui.

Te la enseño en real:

Y su configuración:

separador-elementor

Puedes elegir:

  • Decenas de estilos, desde línea normal hasta tribales.
  • Cómo lo quieres de ancho.
  • Dónde lo quieres alinear.
  • Si quieres que haya un icono o un texto también puedes.

Espaciador entre secciones

El espaciador en sí no lo vas a ver porque por su propia naturaleza es invisible.

Sí, sirve para dar un espacio en blanco entre dos secciones, por ejemplo, justo abajo de estas líneas he puesto un separador con un ancho de 75 píxeles.

Y en la configuración puedes elegir cuánto espacio quieres meter.

Ni más, ni menos.

espaciador-elementor

Google Maps directamente en tu página

Ya casi



This post first appeared on Blog WordPress Y Posicionamiento Web Para Humanos, please read the originial post: here

Share the post

Elementor: La guía que esperabas del mejor theme de WordPress que existe ahora mismo

×

Subscribe to Blog Wordpress Y Posicionamiento Web Para Humanos

Get updates delivered right to your inbox!

Thank you for your subscription

×