Elementor Pro plugin de maquetación visual para diseño web.

Instalando el maquetador visual Elementor Pro.

Lo primero que vamos a hacer es entrar en nuestro escritorio de WordPress.

1. En nuestro escritorio nos vamos a dirigir a plugins.
2. En plugins vamos a dar clic en añadir nuevo.
3. Vamos a escribir Elementor page builder en la barra espaciadora.
4. Damos clic en Instalar Ahora y después en Activar.
5. Listo tenemos Elementor instalado en WordPress.

Ya que tenemos instalado y activado nuestro plugin de Elementor, vamos a dar clic en ir a la version Pro para instalar Elementor Pro.

Nos va a dirigir a la página de Elementor para elegir el plan que queremos adquirir, o para descargar el plugin Pro de Elementor y activar nuestra licencia.

Precios de los planes de Elementor Pro.

Elige el plan que más te convenga para crear tu cuenta en Elementor y poder descargar el plugin.

1. Nos dirigimos una vez más a plugins y vamos a dar clic en añadir nuevo.
2. Para poder instalar el plugin Pro de Elementor, vamos a dar clic en la parte superior izquierda donde dice añadir plugin.
3. Vamos a dar clic en subir plugin.
4. Después clic en choose file para elegir el plugin y clic en abrir.
5. Ahora solo damos clic en instalar ahora y después en activar.

En el plugin de ELementor pro vamos a dar clic en Connect y Activate para poder activar nuestra licencia.

En la siguiente ventana solo damos clic en Activate y listo tenemos Elementor Pro instalado en nuestro WordPress para empezar a crear nuestras páginas.

Configuraciones de Elementor Pro.

Vamos a checar algunas de las configuraciones de Elementor pro para asegurarnos que lo tenemos configurados adecuadamente.

En configuraciones tenemos:

1. Ajustes
2. Custom Fonts
3. Custom Icons
4. Gestor de Perfiles
5. Herramientas
6. Información del sistema
7. Primeros Pasos
8. Obtener Ayuda
9. License

En Ajustes vamos a encontrar 4 opciones que son:

1. General
2. Estilo
3. Integraciones
4. Avanzado

Ajustes – General.

1. En el tipo de contenido vamos a seleccionar solo la opción de páginas, nunca uses un constructor visual para las entradas.
2. Si quieres que Elementor utilice los colores y fuentes que trae por defecto tu tema/plantilla marca las 2 casillas.
3. De lo contrario tu tema/plantilla utilizará los colores y fuentes de Elementor.
4. Recuerda siempre guardar cambios al hacer cualquier ajuste.

Ajustes – Estilo.

Yo te recomiendo dejarlo tal y como esta, puedes cambiar la fuente genérica predeterminada en caso de que no encuentres dentro de Elementor la de tu preferencia pero no creo que sea necesario.

Ajustes – Integraciones.

En integraciones vas a encontrar la opción de añadir recaptcha a tu sitio, si así lo deseas y también puedes integrar la API Key de tu proveedor de email marketing para la captación de suscriptores.

Ajustes – Avanzados.

En avanzados no es necesario que hagamos ningún cambio, con los ajustes que trae por defecto nos va bien.

Custom Fonts y Custom Icons.

Los vamos a dejar tal y como están.

Gestor de perfiles.

Si esta trabajando con alguien mas o recibiendo ayuda de algún compañero aquí puedes editar el permiso que esa persona va a tener para editar el contenido de Elementor.

Al igual que gestionar el roll que va a tener esa persona, desde (Editor, Author, contributor o subscriber).

Herramientas – General.

Esta opción la vamos a dejar tal y como esta.

Herramientas – Reemplazar URL.

Esta opción la vas a utilizar solo si pasaste de tener http a https para que todo se cargue en tu nueva dirección y solo das clic en reemplazar URL.

Herramienta – Control de Versiones.

Si en alguna de las actualizaciones de Elementor notas que algo no esta funcionando puedes regresar a la versión anterior en estas configuraciones, solo das clic en reinstalar versión x.

Herramienta – Modo de Mantenimiento.

Si estas empezando con la creación de tu sitio web o estas haciendo algunos cambios que te tomaran algún tiempo, aquí encontraras las opciones de Próximamente y Mantenimiento, para que las puedas usar mientras diseñas o configuras tu sitio web, solo tienes que crear una plantilla para ponerla de fondo.

Información del sistema.

Aquí encontraras toda la información de tu sitio web, pero hay una en especifica que nos interesa, que es donde dice copiar y pegar información, esta la utilizaremos en caso que tengamos algún problema con el plugin, que no este funcionando de la manera correcta u otra cosa, cuando te diriges a soporte esta es la información que ellos necesitaran para ayudarte a solucionar tus problemas.

Primeros pasos y obtener ayuda.

Vas a tener un video de bienvenida para que veas como funciona Elementor y también encontraras muchos tutoriales para hacerte la vida mas fácil al momento de aprender a usar Elementor.

Plantillas.

Como puedes ver debajo de Elementor tenemos lo que son las plantillas, esta es una de las herramientas potentes de Elementor ya que te da la opción de crear una plantilla una sola vez y puedes utilizar infinidad de veces lo que te va a ahorrar mucho tiempo.

Que podemos crear en plantillas :

1. Páginas – crear una página con una cierta estructura lo que te va a ahorrar mucho tiempo al crear una página nueva.
2. Section – puedes crear una sección para utilizarla en varias páginas sin necesidad de empezar de cero.
3. Popup – Quieres crear un lead magnet tipo popup Elementor te lo facilita con esta opción.
4. Header – Puedes crear un encabezado personalizado si no te gusta el que trae por defecto tu plantilla.
5. Footer – Igual puedes crear un pie de página personalizado si no te gusta el que trae tu plantilla por defecto.
6. Single – Para que tus entradas utilicen la misma estructura automáticamente.
7. Archive – Esta opción es para crear la estructura de tú página de entradas.

Como te puedes dar cuenta el propósito de esta opción que nos da Elementor es ahorrarnos tiempo en la creación de nuestras páginas.

Como funciona plantillas.

1. Te vas a plantillas y das clic en añadir nueva.
2. Vas a elegir el tipo de plantilla que quieres crear.
3. Le vas a poner un nombre a la plantilla.
4. Clic en crear plantilla.

En la siguiente ventana, en Bloques vas a encontrar las categorías que están disponibles para usar, al igual si lo que quieres es diseñar una página con una cierta estructura ya creada puedes elegir la opción que más te guste en páginas y en mis plantillas vas a encontrar todo lo que vas creando para poder utilizarlas en cualquier momento.

1. Vas a elegir la opción que más te guste para poder visualizarla.
2. Una vez que ya elegiste una opción vas a dar clic en insertar.
3. Después le vas a hacer los cambios necesarios editando lo que te gusta y lo que no.
4. Y por último te vas a ir a la opción donde dice publicar y ahí vas a encontrar la opción de guardar como plantilla.

Ahora vamos a ver como crear una página con Elementor, en este caso como vamos a usar Genesis Framework para crear nuestro sitio web, vamos a instalar primero un plugin para poder utilizar el ancho completo de la Página.

Instalar plugin Fullwidth Template.

Nos vamos a ir nuevamente a plugins y vamos a instalar el plugin Fullwidth Templates.

Este plugin nos permitirá trabajar el ancho completo de las páginas que vamos a crear con Elementor.

Ahora que tenemos todo listo nos vamos a ir a páginas en el escritorio de wordpress para empezar a diseñar las páginas que necesitaremos en nuestro sitio web.

1. En páginas vamos a dar clic en añadir nueva.
2. Le vamos a poner un nombre a nuestra página en añadir el título.
3. En plantilla por defecto vamos a elegir la opción de FW Fullwidth.
4. Clic en editar con Elementor para empezar con la creación de nuestra página.

Ahora vamos a ver algunas de las configuraciones dentro de Elementor Pro.

Lo que vamos a hacer es dar clic en el circulo que tiene el simbolo de + para que se desplieguen las secciones y vamos a elegir una dependiendo de las columnas que necesitemos, una vez que ya elegimos una sección, vamos a arrastrar y soltar el elemento que necesitemos de la izquierda dentro de la sección para editarlo y que nuestra página empiece a tomar forma.

Cada vez que insertamos un elemento dentro de la sección, este se convierte en columna, entonces ahora tenemos la opción de editar los ajustes de la sección, los ajustes de la columna y lo ajustes del elemento que acabas de insertar, aquí es importante que pongas atención para que no te confundas a la hora de editar los ajustes de elemento.

Ejemplo de como editar los ajustes.

En este ejemplo tenemos lo que es :

1. Sección
2. Columna
3. Encabezado

Para editar cada uno de estos ajustes tenemos lo que es:

1. Disposición – Sección, Columna y Encabezado.
2. Estilo – Sección, Columna y Encabezado.
3. Avanzado – Sección, Columna y Encabezado.

Tenemos las mismas opciones de editado para cada elemento por separado.

1. Solo es cuestión de que empieces a jugar un poco con los ajustes de cada elemento para darle la forma que más se acerque a lo que estás buscando.
2. Puedes agregar tantas funciones como quieras debajo de cada elemento añadido.
3. Al igual que puedes agregar las secciones y columnas que quieras.
4. Si das clic con el botón derecho en cada elemento tendrás más opciones de configuración.

1. Aquí tenemos otras configuraciones, solo tienes que hacer clic en cada opción y se desplegaran los ajustes de cada elemento para poder editarlos.
2. Aquí podemos editar los colores que queremos usar en nuestra plantilla.
3. También podemos configurar el tipo o tipos de letras que queremos usar en los encabezados y texto.
4. Algunos de estos ajustes ya los checamos al principio del post.
5. Tenemos en la parte de abajo la opción de ver como se mira nuestra página tanto en computadora como en tableta y celular por si tenemos algún cambio qué hacer.
6. En Elementor no tenemos la opción de regresar atrás, pero tenemos la opción de mirar el historial lo que hace la función de regresar atrás en la parte de abajo.