Elementor – Tutorial 2019 del Constructor de Páginas de moda

Elementor – Tutorial 2019 del Constructor de Páginas de moda
5 (100%) 2 votes

El diseño de un sitio web con un aspecto profesional no se dio a todo el mundo, especialmente todos teníamos la impresión de que era absolutamente necesario ser un profesional en la codificación y diseño web.

Hoy en día, vemos nuevas herramientas que están surgiendo para el ecosistema de WordPress, para proporcionar una solución cada vez más simple para diseñar un sitio web y esto al alcance de los más principiantes.

En cuanto al diseño de layouts en WordPress, ya tuvimos que presentar el plugin Visual Composer que es sin duda una de las mejores herramientas en el diseño de layout.

Cabe señalar, sin embargo, que esta solución no es adecuada para todos. Esta es la razón por la que en este tutorial te presentaremos más el plugin de WordPress Elementor que es un plugin gratuito de WordPress (gratuito, pero extensible bajo suscripción).

No importa si acabas de empezar a construir tu blog o si eres un veterano – siempre es una buena idea aprender sobre las nuevas herramientas que podrían hacer el proceso más fácil, rápido e interesante.

Hay un gran conjunto de estos instrumentos en mi caja de herramientas, pero esta vez me gustaría contarles cómo usar Elementor Theme Builder.

Si estás usando WordPress para tu blog debes haber notado que personalizarlo a través del clásico panel de control administrativo no es muy conveniente, y aunque el nuevo editor de Gutenberg es genial, todavía hay muchas cosas que otros creadores de páginas pueden hacer que Gutenberg no ha hecho todavía (pero más sobre eso más adelante).

¿Qué es Elementor Page Builder?

Aquí tengo que empezar por definir qué es un creador de páginas. ¿Has jugado alguna vez con LEGO? Estoy seguro de que al menos has oído hablar de él. ¿Quién no lo ha hecho? 🙂

Un constructor de páginas es como una caja de piezas de LEGO que puedes usar para crear cualquier tipo de página.

Cuando usas el clásico dashboard de WordPress no puedes ver el resultado mientras estás trabajando, necesitas hacer clic en el botón “Preview” para ver cómo se ve la página. Los creadores de páginas fueron creados para superar eso – te dan la oportunidad de ver los cambios tal y como los haces.

Toda la manipulación de la apariencia del artículo se realiza con elementos de arrastrar y soltar. Para decirlo de forma sencilla, construye la página o el post a partir de elementos y luego personalízalos para crear una página de gran apariencia.

Hay muchos constructores de páginas diferentes ahora: BeaverBuilder, Novi Builder, y como se mencionó, incluso WordPress ahora tiene su propio constructor nativo llamado Gutenberg. Puedes decir: “Oye, si WordPress ya tiene un creador de páginas, ¿por qué instalar otra cosa?”. Esa es una pregunta justa, y aquí está mi respuesta un tanto tendenciosa…

Me encanta usar Elementor, ¡y eso es todo!

Lo usé antes de que el equipo de WordPress lanzara Gutenberg y prefiero seguir usando el constructor de páginas Elementor en la mayoría de mis sitios. Hay docenas de complementos útiles para ello en el mercado Elementor y su instalación realmente expande las opciones disponibles. Usted, por supuesto, puede probar otros constructores, pero como yo, personalmente, soy un fan de Elementor, lo usaré como un ejemplo de las ventajas de los constructores de páginas.

Por qué me encanta Elementor sobre otros creadores de páginas

Sí, me acostumbré a Elementor, pero no es la única razón por la que me gusta. Tiene un montón de profesionales:

  • Es gratis: Hay una versión de pago de Elementor Pro y tiene sus ventajas, pero el plugin principal es completamente gratuito. Puede descargarlo, instalarlo y usarlo sin necesidad de otros complementos y sigue teniendo una gran funcionalidad. Especialmente importante para los principiantes que no tienen un gran presupuesto!
  • Fácil de usar: La interfaz es simple, es fácil de entender cómo utilizar los widgets, la interfaz es muy fácil de usar.
  • Bien documentado: Los principiantes siempre cometen errores, es normal y si tienes algún problema puedes encontrar la solución en las instrucciones.
  • Es un plugin, no un tema: Algunos creadores de páginas son en sí mismos un tema que usted puede pensar que es una ventaja en algunos aspectos
  • Tiene un montón de tutoriales: Hay docenas de tutoriales en vídeo sobre cómo usar Elementor. Casi todos los widgets tienen un artículo de “cómo hacerlo”. Por ejemplo, aquí hay un vídeo que describe el proceso de instalación de plantillas de Elementor:

Estas son las ventajas para los principiantes, los desarrolladores web experimentados saben que hay otros profesionales en Elementor. Si estás interesado – echa un vistazo a este artículo, hay un montón de comentarios de diferentes personas allí.

Dónde conseguir Elementor para WordPress

Estamos considerando seriamente conseguir que usted vea el potencial del plugin, y la solución gratuita le ayudará a empezar sin tener que pagar un centavo. Esta solución gratuita está disponible en WordPress.org. Al ser un plugin de WordPress, se instala como cualquier otro plugin.desde el tablero de instrumentos;

Si el plugin logra satisfacerte completamente, puedes obtener la licencia completa con todas las características de la versión premium de Elementor en su página oficial.

Características principales de Elementor

Antes de comenzar el tutorial con una presentación del plugin, primero presentaremos las características principales del plugin (versión gratuita y versión completa).

Versión Gratuita Versión Completa (Premium)
Múltiple Columnas Menú de navegación, artículo
Módulos de texto, Títulos Módulo WooCommerce (productos, categorías)
Video, Imagen, Carrusel, Galerías, Módulos de Nube de Sonido Integración con Facebook (página, botón, comentarios)
Módulo de compartición Tabla de precios
Módulo HTML Portafolio, Formulario
Módulo para el widget de WordPress Módulo de investigación

Tenga en cuenta que esta es una lista no exhaustiva de las diferentes características que ofrece el plugin. Encontrará más detalles en explorando su sitio web.

Primeros pasos en Elementor

No cubriremos todo el proceso de instalación aquí. Como se trata de un plugin de WordPress, el procedimiento de instalación ya ha sido explicado en un tutorial anterior. Sin embargo, después de la instalación, se le llevará a la página principal del plugin.

Cree su sitio web fácilmente con Elementor

Con 1.000.000 de usuarios, Elementor es la mejor herramienta de WordPress para crear hermosos sitios web fácilmente. Encuentra los mejores plugins y temas de WordPress creados con Elementor.
Si tienes esta página en tu pantalla, entonces has instalado correctamente el plugin Elementor. Actualmente estamos utilizando la versión completa para este tutorial, pero a priori la interfaz no debe ser demasiado diferente de la versión gratuita.

Antes de pasar a la interfaz de edición, le invitaré a registrar su licencia. Esto sólo es válido para aquellos que han optado por la versión completa. Si dispone de la versión gratuita, puede acceder a la siguiente sección. Para registrar su licencia, usted notará una notificación en WordPress que le pedirá que registre su licencia.

Simplemente haga clic en él para acceder a la página de registro y haga clic en Activar.

Normalmente necesitará su página de confirmación si su licencia es válida.

Si no llegas a esta página, te invito a que te pongas en contacto con los desarrolladores del plugin para tener más información asistencia sobre el problema.

Cómo usar Elementor

Elementor trabaja en páginas y artículos en WordPress. Tanto si utiliza la interfaz clásica como la nueva interfaz de Gutenberg, verá un botón que le pedirá que utilice el constructor de Elementor.

En la práctica, no siempre necesitará modificar sus elementos utilizando Elementor. Así que os invito a usar el plugin sólo en las páginas. Haciendo clic en el botón le llevará a la interfaz de diseño de Elementor que le da un aspecto de déjà vu (para aquellos que usan el Personalizador de WordPress).

Así que tienes a la izquierda los diferentes controles que ofrece el plugin y a la derecha, tienes una vista previa en vivo de tus cambios. En este tutorial, usamos el tema Veintiséis de WordPress.

Secciones Elementor

Las secciones Elementor son grupos de bloques de características que ofrece Elementor. El número de secciones depende de si se está utilizando la versión completa y de si se está utilizando WooCommerce Yoast SEO u otros plugins compatibles.

Dependiendo de estas condiciones, tendrá más o menos secciones en su interfaz. Ya que usamos la versión completa con el plugin WooCommerce habilitado, así es como se ve nuestra interfaz.

Cómo colocar un bloque Elementor

Una vez que desarrollas una sección, encontrarás los bloques Elementor, los diferentes bloques Elementor se colocan mediante”Arrastrar y Soltar” (Arrastrar y soltar) en el área resaltada con líneas discontinuas.

Cómo elegir un diseño en Elementor

Antes de añadir un bloque a Elementor, debe pensar en elegir un diseño haciendo clic en el botón”+” en la sección resaltada.

Dependiendo de sus necesidades, usted elegirá el diseño que mejor se adapte a sus necesidades. Una vez que haya seleccionado un diseño, tendrá una representación de esa sección en la misma área resaltada. Esta sección mostrará el mismo número de columnas correspondientes a su elección. En mi caso, elegí una columna con 3 columnas.

Los diferentes bloques con un signo”+” en su interior son las áreas que pueden aceptar bloques Elementor. Si se añade un bloque Elementor sin seleccionar primero una estructura, se seleccionará por defecto la estructura de columnas única.

Las secciones de Elementor se pueden reordenar entre ellas, siguiendo el mismo principio de”arrastrar y soltar”. También puede borrar una sección si ya no desea utilizarla.

He aquí un ejemplo de una sección que contiene 2 bloques, a saber, el bloque de título y el bloque de texto.

Cómo utilizar otras herramientas de diseño

Una vez que haya terminado su diseño, una de las cosas que querrá hacer es guardar su trabajo. Encontrará esta opción en la parte inferior de la sección que muestra las diferentes secciones de Elementor.

Puede elegir entre grabación directa (Publicar), guardar como borrador o como plantilla. Exploraremos estos puntos más adelante.

Durante el diseño, también puede previsualizar los cambios sin la interfaz adicional de Elementor. Todo lo que tienes que hacer es hacer clic en el icono del ojo.

A veces, durante el diseño, se produce un error (una acción no intencionada). En este caso, Elementor te ofrece una historia, que te permite navegar a través de todas tus acciones.

Esto le permitirá regresar fácilmente.

La opción”Navegador”, que se encuentra justo antes del botón del historial, permite modificar más las diferentes secciones en relación con el navegador utilizado por los visitantes. Esta opción le da acceso a la modificación avanzada de estructuras de sección (ancho de columna). Aquí hay que hacer los cambios con mucho cuidado.

El botón”Configuración” permite modificar ciertas opciones específicas de la página, como el título, la imagen de la página principal o el estado, entre otras.

Eso es todo por este tutorial, exploraremos más acerca de Elementor en nuestro próximo tutorial. Siéntase libre de echar un vistazo a la sitio web oficial que ofrece ejemplos mucho más exitosos.