Constructor de Páginas Elementor

Constructor de Páginas Elementor
5 (100%) 1 vote

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).

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.