Crea TU BLOG desde CERO con WordPress y Elementor

Este entrenamiento esta enfocado para entrenadores, autónomos y marketing. Comienza el retoblogger y crea tu blog desde cero con WordPress y Elementor.

Recursos:

• Eye dropper cuentagotas.
• Imágenes gratis de alta resolución.
• Herramienta de diseño online canva.com.
• Imágenes sin marca, pexels.com.
• Verificar disponibilidad del dominio
• Namecheckr , puedes ver si el nombre de dominio esta disponible y en otras redes sociales.
• Imágenes gratis.
• Curso gratis de Google Analytics, te ayudara en tu aprendizaje.

Dominios web presentados en el curso:

• http://tublogdesdecero.com ❌
• http://cursodemarcapersonal.com/ ❌
• http://retoblogger.com/ ❌
• http://escuela30.com/ ❌
• http://modamaternal.com/ ❌ (ejemplo).
• https://vanesajackson.com ✅

 

1. BASES PARA INICIAR EL BLOG. CREA TU BLOG DESDE CERO

Como instalar WordPress con 1 clic

• Ir a tu Cpanel del hosting
• Luego ir a Aplicaciones Web y elegir WordPress
• Seleccionar nueva instalación.
• Selecciona tu dominio y crea tu usuario mas contraseña.
• Clic en instalar.

Configuracion de ajustes generales de WordPress

• Para ingresar debes hacerlo siempre por https://midominio.com/wp-login.php
• En ajustes – generales, rellena los campos por ejemplo el nombre de la marca, descripción.
• Ajustes – Enlaces permanentes, seleccionar nombre de la entrada, guardar cambios.
• Eliminar las entradas y paginas que vienen por defecto.

Instalación de Plugins Esenciales para tu blog

Para agregar un plugin o complemento, debes ir donde dice plugin y añadir nuevo. Busca por el nombre y das clic en instalar ahora y luego activar.

Lista de plugins para tu blog de marca personal:

1. Maintenance por fruitfulcode. Ajustes:

• Titulo de la pagina: «Tu Marca Personal«.
• Cabecera: Modo mantenimiento activado.
• Descripción: «La pagina estará disponible pronto«.
• Guardar cambios.

2. Yoast SEO, este plugin te ayudara a optimizar tus post para Google.

Paso 1, en características activar «páginas de ajustes avanzados». Y guardar cambios.

Paso 2, ir a títulos y metas, usa el separador de titulo «|«.

Paso 3, tipos de contenido.

• Entradas
• Plantilla de título, «%%title%% %%sep%% %%sitename%%«, indica el titulo de la entrada, el separador y el nombre del sitio web.
• Plantilla de la meta descripción: Conoce lo mejor de %%title%%.
• Plantilla para paginas, «%%title%% %%sep%% %%sitename%%«.
• Guardar cambios.

Paso 4, social. Ahí pones todos tus enlaces a tus redes sociales esto ayuda en el posicionamiento.

Paso 5, mapas de sitio xml. Activar los mapas xml y guardar cambios.

Paso 6, avanzado. Enlaces permanentes, quitar category de la url y guardar.

3. Grow Social por mediavine. Este plugin te ayudara a colocar botones de redes sociales para compartir tu post.

• En sus ajustes puedes elegir como se va mostrar, de forma horizontal o vertical.
• Una vez activado la forma horizontal, te vas a sus configuraciones (ruedita) y seleccionas las redes sociales donde quieres que se compartan tus contenidos.
• Puedes editar las formas e iconos, por ultimo clic en guardar cambios.

4. Table of Contents Plus por Michael Tran. Este plugin te crea una tabla de contenidos en base a los títulos y subtítulos de tu post.

• Para ir a sus configuraciones debes ir a Ajustes – TOC+.
• Insertar en post y desactivar en paginas porque no llevan mucho contenido.
• En presentación elegir el blanco y clic en Actualizar ajustes.

5. Wordfence Security, este plugin protege nuestra web de cualquier intento de hackeo.

6. Smush Image, te ayuda en la compresión de tus imágenes. Igualmente si ya tienes imágenes subidas, te vas en sus ajustes y clic en Bulk Smush Now.

7. Simple Google Analytics Tracking por Dustyn Doyle. En ajustes – google analytics, te mostrara un cuadro en blanco «Tracking ID» en donde deberás pegar el ID de tu analytics.

8. Wp Show Post – Añadir nuevo + Configuracion

1. Entradas
   nombre: Home
   Post type: post
   Taxonomía: en blanco o sino elegir una categoria, para solo muestre articulos de esa seccion.
   Entradas por pagina: 3
2. Columnas
   columnas: 3
   Grosor de las columnas: 2em
3. Imagenes
   marcar Imágenes
   alineación de la imagen: centro
   ubicación de la imagen: sobre el titulo
4. Contenido
   tipo de contenido: ninguno o sino extracto para mostrar una parte del texto.
   marcar Incluir titulo
   Texto leer más: vacío o sino usar un llamado de acción (leer mas o seguir leyendo) que aparecerá debajo del titulo.
5. Meta
   dejar todo en blanco sin marcar ninguna opcion.
6. Más ajustes
   son parámetros mas avanzados que no es necesario.
7. Publicar
   copiar el shortcode: [wp_show_posts id=»483″]

Opción Blog

1. Entradas
   nombre: Blog
   tipo de contenido: post
   Taxonomía: en blanco tal cual.
   Entradas por pagina: 10
   ✅ Paginación
2. Columnas
   columnas: 1
   Grosor de las columnas: 2em
3. Imagenes
   ✅ Imágenes
   alineación de la imagen: centro
   ubicación de la imagen: sobre el titulo
4. Contenido
   tipo de contenido: extracto.
   longitud del extracto: 40.
   ✅ Incluir titulo
   Texto leer más: «Leer Más».
5. Meta
   ✅ Incluir autor
   ubicación del autor: debajo del titulo.
   ✅ Incluir fecha
   ubicación de la fecha: debajo del titulo.
6. Publicar
   copiar el shortcode: [wp_show_posts id=»484″]

Instalación del tema Generate Press

En wordpress hay miles de temas que puedes usar.

¿Por qué usar Generate Press para tu Blog?

1. Es fácil de personalizar
2. Precio accesible con licencia para sitios ilimitados
3. Soporte técnico destacado
4. Mucha documentación en el sitio web de GP.
5. Compatibilidad con los mejores plugins de WordPress.
6. Código limpio y optima velocidad de carga.

Instalación de Generate Press

• En apariencia, temas clic en añadir nuevo
• Inicia la búsqueda de generate press, clic en instalar y activar.
• Para activar las opciones avanzadas necesitaras tener una licencia premium en la web de generatepress.
• Al comprar tendrás derecho a un archivo que es un plugin y lo subes en tu web.
• Una vez activado puedes activar todos los complementos y lista ya tendrás activado las opciones premium.

2. CREACIÓN DE IDENTIDAD VISUAL PARA TU BLOG

Cómo elegir una paleta de Colores

Gama de Colores

• Color 1: #7CFEF0
• Color 2: #1dc4d3
• Color 3: #0081af
• Color 4: #061a40
• Color 5: #041516

Paginas web para elegir tu paleta de colores:

1. Coolors, puedes generar paletas de colores de manera aleatoria o explorar colores de otros usuarios. Y puedes generar colores a partir de una imagen, para hacer este paso dale clic en Generate y luego en el icono de la cámara, subes tu imagen y se generara una paleta de colores, también lo puedes personalizar.
2. Color Hexa, lo que me gusta de esta web es que puedes crear un degrade a partir de un color base. Puedes ver el degrade en Shades and Tints #000000.
3. Design Seeds, te muestra colores  a partir de imágenes de paisajes que sirve para inspirarte.
4. Color Hunt, te muestra igual paletas de colores pero no te da los códigos RGB.
5. Adobe Colors, similar a coolors.co

Ejemplo de paleta para el blog.

Paleta de colores en PowerPoint

a) Primera forma:

1. Primero elige una paleta de coolors.co luego usa la herramienta de recortes de Windows solo la parte visible de los colores. Copia el recorte y pega en una hoja de powerpoint.
2. Segundo hacemos clic en el bloque «Formato de forma», relleno – relleno solido y cuentagotas, por ultimo clic en el color a clonar.

b) Segundo forma:

1. Otra forma de clonar los colores es usando los RGB que te da la web coolors.co y copia los números. Esos códigos lo vas a copiar en Formatos de forma, relleno – relleno solido y color (elegir más colores).
2. Mi recomendación es hacerlo de la manera correcta copiando los códigos RGB.

Cómo crear un logo para el blog en 10 minutos

Pasos para definir tu logo:

 

1. Define el estilo de tu logo.
2. Elegir colores y tipografías de acuerdo a tu tipo de negocio.
3. Crea un logo que sea legible y no uses más de dos tipografías.
4. Crea versiones de un logo que funcione de forma vertical y horizontal.
5. No abuses de los colores. No uses fotos en el logo.
6. Crea versiones del logo para que luzca bien en fondos oscuros y fondos claros.

Tipografías recomendadas:

• Serif, apropiada para textos largos. Tipografías: Book Antigua, courier, times new roman, Garamond, Palatino.
• San Serif, apropiada para carteles y títulos. Tipografías: Arial, Bauhaus, Tahoma, Verdana y Roboto.
• Script, apropiada para títulos y firmas. Tipografías: Brush, Pacifico, Satisfy, Merienda y Sweet Pea.
• Moderna, apropiada para apartar originalidad. Tipografías: Futura, Product Sans, Poiret One, Caviar Dreams y Bebas Neue.
• Decorativa, apropiada para aportar personalidad. Tipografías: Magneto, Fuente Manerismo, Lost in wild y Rosewood.

Generador de logos:

• Shopify, la plataforma es interactiva al crear el logo.
• Logo Makr. El tamaño recomendado del logo es de 300×100 o 300x150px en powerpoint. Elige un logo y agrega un texto.

Flaticon

• Descarga iconos de flaticon.com, tiene un enorme repositorio de iconos.
• Se recomienda buscar con palabras en ingles.
• Al elegir el icono puedes elegir el formato png, escoger el color y descargar en 512px.

Creando silueta con PowerPoint

• En inicio y formas, elige forma libre.
• Clic derecho y enviar al fondo.
• Contorno de forma , sin contorno.
• Relleno de forma, color celeste o uno suave.

PowerPoint guardar Imagen sin fondo

• Selecciona todos los elementos.
• Hacer clic derecho y guardar como imagen.
• Elegir el tipo png y guardar.

Cómo elegir las tipografías de tu Blog

1. La idea es tener 3 tipos de tipografías para tu blog:

1. Cuerpo.
2. Contenido.
3. Decorativa.

2. Descargar Tipografías de Google

• Para trabajar con tipografías a tu gusto, ver las fuentes de Google.
• Puedes elegir por tipo de familia, elegir la tipografía que te guste dando clic en el «+» y luego clic en la flecha de abajo que es descargar.
• Una vez descargado, lo abres y haces doble clic en el archivo ttf «Roboto-Light.ttf » e instalar.

Cómo diseñar imágenes atractivas para tu blog

En esta sección aprenderás como crear imágenes atractivas para tu blog y redes sociales.

Diseñando en Canva

1. El tamaño ideal para la imagen de tu blog es de 700×500, también te sirve para difundir en las redes sociales.
2. Sube tus imágenes y arrastra a tu área de trabajo, recuerda que para agrandar la imagen, debes arrastrar desde las esquinas.
3. Agrega un elemento cuadrado y deja suficiente espacio en las esquinas porque en las redes sociales se cortan sin embargo si el texto esta en el centro, este se mantiene. Transparencia de 61px.
4. Tipografía titulo, league gothic 87px , color 3 o Cooper Hewitt Heavy.
5. Subtitulo montserrat 21px, color negro.
6. Tipografía para CTA Arimo 16px,  poner el nombre de tu blog o usuario de tu red social 12px.
7. Agrega elementos de líneas para separar el titulo del post y el CTA.
8. Por ultimo descargar en JPG porque son mas livianas. y para redes sociales en PNG.

3. CONFIGURACIÓN GENERAL DEL DISENO DE TU BLOG

Personalización del tema generatepress en WordPress

Para ingresar a personalizar cualquier tema: Da clic en Apariencia y después Personalizar.

Configuracion del logotipo e Icono

1. Identidad del sitio

• marcar, Ocultar título del sitio.
• marcar, Ocultar descripción corta.
• clic en Elegir logo
  subir archivos, selecciona archivos.
  Elegir y recortar imagen (adaptar ancho completo).
  Tamaño del logo 245x54px.
• Icono del sitio
  clic en Selecciona imagen
  subir archivos, selecciona archivos.
  Elegir y recortar imagen (adaptar).
  Tamaño del icono cuadrado 40×40 o 512×512.

Nota: Tamaño ideal del logo no más de 250x de ancho y no más de 100px de alto.

2.Diseño

a) Cabecera

• Alineación de la cabecera, aquí puedes centrar el logo, izquierda o derecha.
• Relleno de la cabecera usa 15 – 40 – 15 – 40.

b) Pie de Pagina

• Ancho del pie de página, contenido.
• Ancho interior del pie de página, contenido.
• Widgets del pie de página, 1.
• Copyright: %current_year% %copy% Tu Marca Personal.

c) Barras laterales (Configuracion de barra lateral del Post).

• Relleno del Widget 40,20,40,20.
• Ancho de la Barra lateral Derecha: 30%.

Personalizar tipografías y colores

3. Colores

• a) Cuerpo, fondo: #ffffff blanco.
• b) Cabecera, fondo: #efefef gris. O usar una de tu paletas de color 2 pero como el color es oscuro y logo también, no combina bien, por eso se usa un color de fondo claro como el gris.

c) Contenido

• Esto es para cambiar el color de los enlaces.
• Enlace: #232323
• Enlace al pasar el ratón: #f1c40f

4. Tipografía

a) Cuerpo

• Familia tipográfica, Open Sans.
• Peso de la fuente, normal.
• Tamaño de la fuente, 18px.

b) Navegación Primaria

• Familia tipográfica, Open Sans.

c) Widget

• Familia tipográfica, Inherit,
• Peso de la fuente, normal.
• Tamaño de la fuente, 24px.
• Tamaño de fuente del contenido, 18px.

d) Encabezado

• Encabezado 2 (H2)
• Familia tipográfica: lato
• Peso de la fuente: 600.
• Transformación del texto: Ninguna.

5. Widgets.

• Barra lateral derecha
• Buscar
• Imagen, el tamaño ideal es de 330 de ancho por el que quieras de alto. (388×593).
• Video

4. CREACIÓN DE CONTENIDOS

¿Cómo usar las categorías de forma adecuada?

Las categorías ayudan al visitante a encontrar su contenido de forma sencilla y rápida, además, debe ser su guía de lectura, todo el contenido publicado dentro de tu blog se debe encajar dentro de alguna categoría.

Lo importante es que junto a la creación de tu línea de contenidos (también llamado línea editorial) encajen al menos 5 categorías principales.

Si el contenido que deseas escribir no encaja en ninguna categoría, analiza si realmente sigues la línea editorial de tu blog.

Es importante que tus artículos sigan una línea lógica, no intentes hablar sobre asuntos que no tienen relación con tu negocio y Marca Personal, sigue siempre tu línea editorial, eso es bueno para tus lectores sepan qué esperar de ti y también para tu posicionamiento en Google, ya que entiende cuáles son los asuntos que el usuario busca dentro de tu blog y así puede percibir cuánto es tu Blog útil para la Comunidad.

Cómo crear una entrada o post

Antes de crear una entrada es importante que tengas en claro las categorías y crearlas.

Categorías:

1. Marca Personal
2. Diseño
3. Productividad.
4. Ejemplo de una descripción de categoría:
   Aprende cómo sacar provecho de todo el potencial que tienen las Redes Sociales para impulsar tu Negocio Online.

ENTRADA O POST

• Agregar nueva entrada
• Crea un titulo llamativo y atractivo.
• Las cabeceras usa el color 4.
• Sube imágenes debajo de las cabeceras (1720x800px), usa el tamaño medio 300×140, centrado. Leyenda: Creación de blogs.
• Inserta si es posible videos.
• Respeta la jerarquía de títulos h1 titulo, h2 subtitulo, h3 subtitulo interno.
• Elegir una categoría referente al post.
• Poner unas 3 etiquetas.
• Agregar una imagen destacada.
• Publicar.

Cómo gestionar usuarios o autores para tu blog

Plugin necesarios:

A. Basic User Avatars por Jared Atchison, sirve para subir tu imagen de autor.

B. Simple author box por Tiguan:

• Sube tu imagen de autor. (500×398).
• Personaliza como quieres que se vea al publico.
• Appearance
• Estilo de la imagen del avatar del autor: Circulo.
• Typography
• Author name font family, Ubuntu.
• Author description font family, Open Sans.
• Guardar cambios.

Como crear nuevos usuarios

• Añadir nuevo y llena todos los datos.
• Perfiles tipos. Revisar los tipos y permisos.
• Al crear el usuario se le enviara al correo los accesos.
• Una vez creado el usuario edita de nuevo y sube una foto en donde dice upload avatar.
• Actualizar usuario.

5. CREACIÓN DE SECCIONES Y PÁGINAS

Actualización de comandos Elementor Page Builder

Mi primera pagina con Elementor

• Crear una pagina nueva en WordPress
• nombre: «Trucos de Elementos Page Builder»
• Plantilla «elementor canva» y guardar en borrador (no publicar).
• Luego editar con elementor.

Introducción al Plugin Elementor

Elementor builder la mejor herramienta para WordPress.

¿Que es elementor?

Es un plugin de WordPress que funciona como editor visual para agregar elementos y editarlos o diagramarlos en una pagina de forma sencilla e intuitiva.

¿Para que sirve elementor?

Con elementor se pueden crear y editar elementos dentro de cualquier sección de una pagina web creada con WordPress. Ya sea una pagina estática con información básica o una landing page que requiere de formularios y elementos dinámicos.

¿Que tipo de elementos maneja elementor?

Con elementor se pueden agregar y editar casi cualquier tipo de elementos, tales como:

• columnas
• filas
• títulos
• textos
• imágenes
• botones
• separadores
• testimonios
• videos
• iconos
• mapas
• espacios
• y muchos mas…

¿Por que usar elementor?

1. Fácil de usar.
2. Gratis.
3. Muy rápido y ligero.
4. Compatible con cualquier tema de WordPress.
5. No necesitas saber código.
6. Cuenta con una librería de diseños precargados.

Como usar elementor + Generate press

1. Añadir pagina nueva.
2. Agregar el titulo a la pagina.
3. Marcar en la barra lateral derecha y publicar pagina:
4. Barras laterales:
   Contenido (sin barras laterales).
5. Desactivar elementos:
   Contenido del titulo.
6. Contenedor del maquetador de paginas:
   Contenido.
7. Luego podrás editar con Elementor.

26 Como crear la portada o pagina de inicio 1

Editar con Elementor

Como crear la portada o pagina de inicio 2da parte

Esta sección esta compuesto por un texto de bienvenida y los últimos artículos del blog.

Como crear la portada o pagina de inicio 3ra Parte

En esta sección hablara un poco de ti y una llamado a la acción. Otra sección en donde puedas poner tus mejores servicios o habilidades. Y en la ultima sección donde podrás poner un testimonio de algún cliente o compañero de trabajo.

Verificando Adaptabilidad

• revisar en tableta
• revisar en móvil
• para acomodar el texto en el móvil, dale en editar sección principal. (solo lo haces en donde se vea distorsionado el texto).
  avanzado relleno: 10 10 10 10

Como crear la pagina «Servicios»

 

Como crear la pagina «Blog»

Tips: Guarda una sección como plantilla. Clic derecho en la sección y guardar como plantilla y colocar un nombre.

Sección Blog

Importar la plantilla guardada de la sección servicios y solo cambiar el nombre servicios por «Blog».

Sección 2 columnas

1. Avanzado
   relleno: 50 – 0 – 50 – 0.
2. columna 1
   SHORTCODE
   pegar la lista que creaste con wp shot post «blog».
3. columna 2
   BARRA LATERAL
   selecciona una barra lateral: barra lateral derecha.

Como crear una página «Contacto» + formulario

• Crea una nueva pagina «Contacto«.
• Antes de publicar desactiva estos elementos de tu theme generatepress.
• Titulo del contenido.
• Contenido sin barras laterales.
• Contenido.
• Publicar.
• clic Editar con Elementor.

Importar plantilla guardada

1. Añadir plantilla
2. Mis plantillas «titulo»
3. Insertar tu plantilla que haz guardado anteriormente.

Contact Form 7

• Asunto: «NUEVO CONTACTO DESDE BLOG«
• Cuerpo: TELÉFONO: / [tel-643] (arriba del cuerpo del mensaje: your message)
• shortcode: [contact-form-7 id=»147″ title=»Formulario de contacto 1″]

Cómo configurar el Menú Principal y su estilo

Crear menú

1. nombre: «PRINCIPAL«
2. Donde se vera: menú principal.
3. Crear menú.
4. Estructura de menú: Inicio, Sobre MI, Servicios, Blog y Contacto.
5. Guardar menú.

Personalizar Estilo al Menú

Diseño – Navegación principal.
Ubicación de la navegación: Flotar a la derecha.
Despegable de navegación: Clic – Flecha.
Dirección del despegable: Izquierda.
Búsqueda de navegación: Activado.
Altura del ítem del menú: 48px.
Publicar.

Colores – Navegación principal
color de fondo: gris #efefef – Al pasar cursor #e2e2e2 – Activo #e2e2e2.
color de texto: #444444 – Al pasar cursor #f1c40f – Activo #f1c40f.
Publicar.

Tipografía – Navegación principal
familia: Lato.
tamaño 14px.
transformación: mayúscula.
publicar.

Cómo crear navegación interna de una página «One Page»

• Crear nueva página: «Curso de Marketing de Contenidos«.
• Plantilla: Elementor canvas.
• clic Solo Guardar.
• Luego Editar con Elementor.
• Añadir plantilla (Homepage – Study – page).
• Contexto: Cuando la persona haga clic en un botón, este es dirige a una sección.
• Edita la sección donde quieres que valla después del clic, en avanzado ID de CSS coloca un identificador «1234«.
• Edita el enlace del botón con el ID CSS en este caso es #1234.
• Publicar.

Elemento Pro Nav Menú, juega con este elemento y crea tu propio menú colocando diferentes secciones con ID.

Cómo dejar Fija una sección de Navegación con Elementor

1. Crear nueva pagina: «Prueba Sticky«.
2. Plantilla: Elementor canvas y guardar.
3. Editar con Elementor.
4. Edita la sección en avanzado
   Funciona con Elementor Pro
5. Efector de movimiento – Fijar (Sticky) – Arriba.
6. Fijar en: Escritorio (tableta y movil).
7. Publicar

Cómo destacar opciones del menú de navegación

• Entra a ajustes de tu menú dentro del administrador de WordPress
• Y elige un ítem de tu menú a destacar.
  Primer Paso Agregar una Clase CSS
  En opciones de pantalla agrega que se muestre Clases CSS.
• Edita ahora el item blog añadiendo un código en Clases CSS.
• Guardar Menu
  Segundo Paso
• Personalizar Tema
• CSS adicional (aquí pega el código para destacar menú y línea divisora que separa al header y el contenido)
• Pega aquí tu código y publicar.

Como personalizar el pie de página con Elementor

• Ir a biblioteca de elementor
• Añadir nueva pagina «Footer«
• Plantilla: Titulo del contenido – Contenido sin barras laterales – Contenido.
• Publicar y Editar con elementor.

1. Insertar Secciones de Elementor en WordPress con Plugin AnyWhere Elementor

1. Ir a AE Tempales – Add new
2. Añadir nueva pagina «Footer«
3. Plantilla: Titulo del contenido – Contenido sin barras laterales – Contenido.
4. Publicar y Editar con elementor.
5. Añadir Plantilla – Inserta tu plantilla footer que haz creado mas arriba.
6. Actualizar y Salir al escritorio.
7. Copia el shortcode [INSERT_ELEMENTOR id=»202″].

2. Personalizar Tema

a. Widgets

• Widget 1 del pie de pagina.
• Añadir un bloque.
• Html Personalizado y ahí pegas el shortcode.

b. Diseño – Pie de página

• Ancho del pie de página: completo.
• Ancho interior del pie de página: completo.
• Relleno del área de widgets de pie de página: 0 – 0 – 0 – 0.
• Relleno del pie de página: 20 – 20 – 20 – 20.
• Publicar

6. MARKETING + VISITAS PARA TU BLOG

Cómo mostrar tus Tweets en tu Blog.

Ir a https://publish.twitter.com/
Coloca tu nombre de usario twitter y avanzar.
Elige Embedded Timeline
Edita las opciones (height 500 Light enlace color naranja) y Copy Code.
Ve a la administracion de WordPress y personalizar widgets.
Agrega Texto arbitrario y pegas el codigo en html, guardar.

Cómo mostrar tu cuenta de Instagram en tu Blog.

1. Plugin Smash Balloon Social Photo Feed anteriormente Instagram Feed.
2. Ingresa a los ajustes del plugin y ingresar tus datos de acceso Instagram.
3. Copia el token y ID en los cuadros blancos.
4. En «Display Your Feed«, copia el shortcode.
5. Añadir un widget de texto en HTML dentro de tu WordPress
6. Publicar y Guardar.

Instagram: Cómo añadir varios enlaces hacia tu Blog.

• Crear pagina «IG»
• Plantilla: Elementor canvas, publicar.
• Editar con elementor.

Formulario para captar suscriptores (email marketing)

1. Registrate en mailerlite.
   a. Suscriptores
2. Crea un grupo con el nombre nombre: «Barra lateral blog«.
   b. Formularios
3. clic en Crear un Formulario Incrustado.
4. Nombre de la webform: «Barra lateral Blog». Guardar y Continuar.
5. Seleccionar destinarios: Elige el grupo donde se iran los correos. Ejemplo: «Barra lateral blog».
6. Embed Form o Subscribe buttons (a mi no me sale, pero si te sale elige embed form).
   titulo: «¿Quieres recibir las últimas actualizaciones del Blog?«.
   texto: «Únete a mas de 1000 suscriptores«.
   Botón: «¡Suscribirme ahora!»
   Mensaje de gracias: «Gracias por suscribirte.«
7. Diseño
   Widht: 350px. (En horizontal es 700px o 400px esto se usa para paginas home y usa el código HTML).
   Color formulario: #2980B9
   Color titulo y texto: Blanco.
   Color botón: #F39C12, tamaño 21px. Familia Verdana.
8. Agregar un campo para nombre, posición arriba del botón.
9. NEXT
10. Copia el código JavaScript y pega en la barra lateral del widget de Texto Html WordPress.

7. CLASES BONUS Y ACTUALIZACIONES

Cómo crear un Menú Moderno con Elementor

Elementor – Plantilla

• Añadir nueva
• a. Tipo: Cabecera
• b. Nombre: «Tope de página».
• c. clic en Crear plantilla

Formulario de Suscripción con Elementor Pro Integreado con Mailchimp

Plugin Fixed Widget and Sticky Elements for WordPress. Sirve para fijar una publicacion en la barra lateral.

Elementor – Plantillas

• Añadir nueva.
• Tipo: Sección.
• Nombre: Banner lateral suscripción.
• Crear Plantilla

API KEYS MAILCHIMP

• Ir a ajustes de perfil.
• Extras – Api keys.
• Create apy keys y copiar la api para llevarlo al formulario de elementor.

WIDGETS

• Arrastra el widget Biblioteca de Elementor
• Escoge tu plantilla.
• Widget Fijo
• actualizar.

Plantilla Lista para crea una Landing Page

• Crea una nueva pagina «Nuevo Curso o nombre de tu servicio«.
• Plantilla: Elementor canvas.
• Publicar.
• Editar con elementor.
  *Importando Json elementor
• añadir plantillas – mis plantillas.
• clic en Insertar.

IMPORTAR JSON

• Elementor – Plantillas
• Importar plantillas.
• Selecciona el Json, luego clic en Importar Ahora.

ELEMENTO FORMULARIO

• 1. Form Fields
• Campos: Nombre y Email.
• id nombre y email: column width 33%
• Etiquetas: ocultar.
  2. Submit button
• column width 33%.
  3. Actions After Submit
• add action: Email, Mailchimp, opcional Redirect.

ELEMENTO ESPACIADOR
espacio: 21.

 

 

 

 

.