ELEMENTOR PRO

TIENES ELEMENTOR PRO

INCLUIDO EN LA ACADEMIA DURANTE UN AÑO, SIEMPRE QUE SEAS ALUMN@

Para mi elementor, elementor pro y evanto elements son 3 herramientas que nos ayudan mucho en las tareas de crear una web. Es uno de los regalos que más ilusión me hace.

LECCIÓN 1

DESCARGAR Y ACTIVAR LA LICENCIA DE ELEMENTOR

ELEMENTOR PRO.

INSTALACIÓN.

  • Descargamos el plugin 
  • https://elementor.com/pro/
  • Clic en Acceso.
    • Usuario: agenciamarketingamor@gmail.com
    • Contraseña: Amor2020
  • Descargar en el botón que hay arriba a la derecha al lado de la foto de perfil, mira la imagen.
elementor pro
  1. Vamos a Plugins en wordpress.
  2. Añadir nuevo plugin.
  3. Arriba subir nuevo plugin
  4. Arrastrar el plugin de elementor o buscar dentro de nuestro ordenador, posiblemente en descargas,
  5. Activar plugin.
  6. Poner la licencia.  ep-Hm0BKFCyScW3tfHydkcD1611690391TYuGJIT5gjd0
  7. Si te pide un correo y contraseña son las que acabamos de poner:
    1. Usuario: agenciamarketingamor@gmail.com
    2. Contraseña: Amor2020

LECCIÓN 2

RENOVAR LA LICENCIA DE ELEMENTOR PRO.

 

Para renovar la licencia:

  • Haz clic en la parte derecha de wordpress en Elementor.
  • Clic en Licencia.
  • Desactiva la antigua.
  • Pon la nueva 
  • ep-Hm0BKFCyScW3tfHydkcD1611690391TYuGJIT5gjd0
  • Si te pide un correo:
    • agenciamarketingamor@gmail.com
    • Contraseña: Amor2020
  • Verifica que ya pone estado ACTIVADO.
  • y listo!

LECCIÓN 3

SECCIONES

Lo primero que vamos a ver dentro de elementor son las secciones, bloques o widget.

Una vez entramos en elementor vemos que en la pantalla principal aparece un + y una carpet.

En el + podemos elegir una sección de varios bloques para definir tu estructura.

Podemos divir la pantalla en uno o varios bloques.

En el vídeo siguiente vamos a ver cómo se edita cada sección o bloque.

Yo le llamo los 6 puntitos o el librito.

ESTE VÍDEO OS VA A ACLARAR MUCHAS COSAS DE CÓMO FUNCIONA ELEMENTOR.

LECCIÓN 4

COLORES DE MARCA Y TIPOGRAFÍA

En elementor hay varias formas para poner los colores de nuestra web.

1.- A nivel general.

  • Paso 1, ve a las 3 rayitas de arriba a la izquierda y clic.
  • Paso 2 Selecciona Ajustes del Sitio.
  • Paso 3 Cambia los colores y tipografías y Guardar.
pasos elementor pro ajustes colores

2.- Cuando estamos editando una frase.

  • Selecciona la sección del Texto o Título.
  • Vamos a Estilo y modificamos la Tipografía.
  • Dentro de tipografía está la fuente, tamaño, color…
estilo tipografia elementor por

Como tener siempre tus colores a mano.

Cuando cojas un color para una tipografía puedes darle clic al + y seleccionarlo para cuando lo quieras usar.

Te lo muestro en la foto.

elementor pro colores guardados

Seleccionar color de una imagen.

Como verás también tenemos la herramienta para seleccionar un color de una parte de la web como puede ser una imagen.

Si la imagen es externa a tu web te recomiendo usar la extensión de google chrome de Palette creator.

Te muestro a continuación cómo hacer esto:

elementor pro seleccionar color de una imagen o parte de la web.

LECCIÓN 5

FUENTES PERSONALIZADAS

 

FUENTES PERSONALIZADAS.

En primer lugar debes elegir el Editor de Texto de los 9 puntitos.

Escribe le texto que quieras mostrar.

En este momento para texto de un parrafo se lleva mucho la función Capitalizar que la encontrarás bajo el cuadro de texto.

También puedes elegir escribir párrafos en dos columnas desde el mismo bloque.

O seleccionar el espacio entre ambos textos.

 

EJEMPLO 1 CAPITALIZAR Y TEXTOS EN 2 O MÁS BLOQUES

En este momento para texto de un parrafo se lleva mucho la función Capitalizar

  • Capitalizar, está bajo el cuadro de texto y da sensación de noticia o periódico por ejemplo.
  • También puedes elegir escribir párrafos en dos columnas desde el mismo bloque.
  • O seleccionar el espacio entre ambos textos.
  • Cada vez que hacemos clic en enter y pasamos a la línea siguiente el texto se coloca en otra columna.

EJEMPLO 1

QUE PODEMOS 

HACER.

CAMBIAR EL COLOR Y TIPOGRAFÍA.

Todos los efectos avanzados podemos elegir que sólo se vea en pc, movíl, tablet o en los 3.

Esta opción la tienes en el bloque de texto arriba en la sección de Estilo.

Aquí puedes:

  • Alinear izquierda, derecha o centro.
  • Cambiar el color.
  • Cambiar la tipografía.
    • Familia de tipo de letra.
    • Tamaño de Letra.
    • Peso, se refiere a más negrita y menos negrita.
    •  Transformación, a Mayúsculas, Minúsculas, Primera letra en Mayúscula.
    • Estilo que tenemos normal, negrita o cursiva ( Aunque esto yo lo hago en la parte primera de contenido.
    • Decoración: Línea superior, tachado o subrayado.
    • Altura de la línea. Se refiere al espacio entre líneas del texto.
    • Espacio entre letras.
  • Poner sombra al texto.
    •  Color de Sombra.
    • Desplazado Vertical.
    • Desplazado Horizontal.

CARGAR FUENTES PERSONALIZADAS.

Primero buscamos la fuente que queremos, tenemos estas páginas.

  1. Una vez la hemos descargado normalmente viene en archivo . Zip o . Rar. lo descomprimimos.
  2. Luego vamos a Escritorio de elementor,  custon form.
  3. Clic en añadir nueva.
  4. Subir en el formato que se nos ha descargado en la página de descarga de fuente.
  5. Pon un nombre, yo suelo poner delante mia para saber que esta la he subido yo.
  6. Recuerda cuando cargues la línea de actualizar la página para que guarde los efectos.

Ejemplo

ejemplo

Ejemplo

Ejemplo

ejemplo

Ejemplo

EFECTOS DE MOVIMIENTO.

Esta opción la podemos usar mucho para dar vida a la web.

La tenemos en el texto, imagen, vídeo o cualquier sección que queremos aplicar el efecto movimiento en la zona de AVANZADO + EFECTO MOVIMIENTO.

También podemos elegir la velocidad del efecto, lento, rápido o normal, e incluso poner nosotros los milisegundos y personalizarlo.

En el ejemplo 1 también he usado el efecto del mouse.

EJEMPLO 1

EJEMPLO 2

EJEMPLO 3

PLUGIN WPKOI.

Con este plugin podemos hacer muchas cosas en los textos.

Una vez instalado si queremos ir a las funciones tenemos que hacer clic en AVANZADO.

Abajo, casi al final hacemos clic en wpkoi.

Podemos hacer:

Girar o Rotar.

Por ejemplo poner la letra boca abajo o poner el texto inclinado.

TEXTO GIRADO AL REVÉS

EJEMPLO TEXTO INCLINADO

TENEMOS FONDO Y BORDE.

Si hacemos clic en estos efectos, cambia todo lo que incluye el cuadro azul que se selecciona cuando hacemos clic en el lapiz de la esquina de arriba del texto.

SECCIÓN BORDE.
Podemos elegir varios tipos de borde.
El color del borde.
El tamaño del borde.
El radio del borde.
Y sobra del bloque.

FONDO

BORDE

BORDE

BORDE

BORDE

BORDE

TEXT PATH

LECCIÓN 6

ENLACES.

Tenemos varias formas de poner enlaces.

Los enlaces del menú se ponen fuera de elementor en Apariencia >> Menú.

Tenemos varios tipos de enlaces dentro de una pagina o entrada de elementor:

  1. En un botón. Crea un borón y en la zona de enlace borra el #  y pega el enlace hacia donde quieras que vaya el usuario tras hacer clic.
  2. En una imagen Sube una imagen y justo debajo de la imagen haz clic en enlace y Url Personalizada, pega aquí el enlace.
  3. En un icono´. Tanto en icono como en listado de iconos podemos poner enlace.
  4. En una palabra. Señala la palabra y selecciona la cadenita o el infinito de enlace, haz clic en buscar páginas dentro de la web o pega el enlace.
  5. En un formulario. Este enlace tiene una función, que puede ser enviar o registrar en un autorrespondedor. En este caso no hay que pegar ningún enlace en el botón. En algunos casos te pregunta qué quieres que haga despúes de registrarte. Y aquí si se puede pegar la página que quieras.
En todos los casos puedes poner que se abra en otra ventana y en algunos casos añadir no follow.

LECCIÓN 7

BOTONES DEGRADADOS

 

 

 

Una opción nueva es la de botón con fondo degradado.

En estilo ya podemos seleccionar degradado.

Puede ser en circular o lineal.

Y es totalmente configurable.

Os comparto imagen y ejemplo:

SI SABES EL QUÉ EL CÓMO ES MÁS FÁCIL

LECCIÓN 8

FONDOS, BORDES Y SOMRAS

 

 

 

En todas las secciones podemos poner Fondos, Bordes y Sobras.

Fondo.-

Haz clic en la sección que quieres poner el fondo.

Recuerda de la primera lección que tenemos:

  • Los 6 puntos de arriba de la sección. En las secciones lo encontrarás en Estilo >> Fondo. Puedes poner Color, imagen, degradado o video. Y más abajo en capa de fondo puedes poner una capa encima. Por ejemplo para que se lea mejor una frase una capa de fondo más clarita.
  • El librito de una sección interna dentro de la principal. En estilo puedes poner color, imagen o degradado, normal o al pasar el ratón.
  • O el lápiz que selecciona un elemento.. ( Solo color o degradado ) Está en avanzado Fondo. Puedes ponerlo normal o al pasar el ratón por encima.

Bordes y sobras.-

En todas mis webs veis que pongo bordes, por ejemplo en esta sección.

Para ello haz clic en la sección que quieres delimitar con un borde o sombra, haz clic en estilo y en borde.

Hay borde:

  1. Sólido.
  2. Dobre.
  3. Punteado.
  4. Linea
  5. Ranura.

También puedes elegir, el color, tamaño o radio (redondeado).

En el caso de texto está en el lapiz de arriba a la derecha >> avanzado >> borde.

LECCIÓN 9

EFECTOS DE MOVIMIENTO.

 

 

 

En todas las secciones podemos poner EFECTOS DE MOVIMIENTO.

Para ello selecciona la sección que quieras aplicar movimiento.

Ve a avanzado  y efectos de movimiento.

Te muestro algunos ejemplos.

  • Scrolling Effects, es para cuando bajamos o subimos se produzca el momiento. 
  • Mouse Effect. Es para cuando se mueva el ratón se produzca el movimiento.
  • Sticky. El  Sticky o adhesivo permite tener visible en toda la página esta sección que hayamos creado con este efecto.
  • Animación de entrada.

Si quieres saber más sobre estos efectos te dejo el vídeo original de elementor pro https://youtu.be/5waeDUJpAMo

elementor pro movimiento sroll
mujer astronauta
monopatin mujer
mujer astronauta
mujer astronauta

LECCIÓN 10

INSPIRACIÓN, VÍDEOS Y ELEMENTOS EN 3D.

 

 

 

Podemos poner una sección con varias capas.

Pasos:

Crear un nuevo bloque.

Hacer clic en 6 puntitos.

En estilo subir un vídeo de youtube con el fondo que quieras, playa, ciudad, universo….

DESCUBRE EL MARAVILLOSO MUNDO DEL MARKETING DIGITAL Y LLEVA TU PROYECTO A OTRO NIVEL.

LECCIÓN 11

CONTENÍDO DINÁMICO

Elementor Pro tienen una funcionalidad que es muy interesante y casi nadie conoce.

Nos viene muy bien para automatizar ya que nos evita tener que buscar cosas que ya están definidas.

Se trata de las ETIQUETAS DINÁMICAS, que tienen todos los elementos.

Tanto imágenes, botones, vídeos o textos arriba tienes la parte de Html y al lado un icono que pone etiquetas dinámicas.

Para enseñaros como funciona vamos a ver varios ejemplos.

Dentro del icono cuando hacemos click vamos a encontrar:

  • Publicar campo personalizado.
  • Publicar fecha y hora
  • Extracto posterior.
  • Id Mensaje.
  • Términos de publicación.
  • Título de entrada.
  • Descripción del archivo.
  • Meta-descripción del archivo
  • Título del archivo.
  • Título de la página
  • Título del sitio.
  • Fecha del sitio.
  • Lema o slogan del sitio.
  • Parámetro del sitio.
  • Código corto.
  • Información de usuario.
  • Información de las imágenes
  • Información del autor, meta, ….
  • Número de comentarios.
  • Woocommerce , precio, ranking, info….
Es muy importante saber que una vez que ponemos un elemento dinámico no podemos hacer casi nada, no podemos modificar el texto.
 
Si le damos al lápiz del principio podemos poner algunos ajustes como mostrar u ocultar texto o modificar texto, en algunos casos ponemos poner otras cosas.
 
Y todos tienen una parte de Avanzado. Con antes, después y volver.
 
Pero lo mejor es ver ejemplos.

EJEMPLO 1.

Vamos a coger una sección de 2 columnas tal y como os muestro en la siguiente imagen.

En casi todas las opciones incluido el color vamos a encontrar el icono de contenido dinámico.

contenido dinámico elementor pro

En la primera columna vamos a poner por ejemplo un texto y en la segunda columna una foto, vale cualquier cosa, vídeo, botón….

 

Ejemplo 2.

También con elementor pro puedes hacer plantillas totalmente dinámicas con widget de elementor dinámico que encontrarás en toda la sección de INDIVIDUAL.

WIDGET CONTENIDO DINÁMICO

Leave a Comment

Por ejemplo en la parte de precios sólo podemos poner el footer, pero tambien lo podemos usar.

Enter your title

Enter your description
$ 39
99
Monthly
  • List Item #1
  • List Item #2
  • List Item #3
Popular

Ejemplo poner las últimas entradas sin tener que volver aquí a ponerlas, que las ponga por defecto.

ÚLTIMAS ENTRADAS

 

CÓMO VENDER ONLINE PASO A PASO CON GUÍA Y VÍDEO

CÓMO VENDER ONLINE

CÓMO VENDER ONLINE, Guía paso a paso para vender cualquier producto con marketing de atracción, neuro ventas y neuromarketing

Read More »
CONSULTORÍA ESTRATÉGICA

CONSULTORÍA ESTRATÉGICA

CONSULTORÍA ESTRATÉGICA, Lista de consejos que debes saber si quieres hacer crecer tu negocio de forma exponencial por un coach estratégico

Read More »