Cómo hacer que un cliente compre un producto, servicio o curso online

Cómo hacer que un cliente compre un producto, servicio o curso online

No hay nada que ayude a aumentar más las ventas que a cada usuario le hables de lo que necesita escuchar.

Es decir, el contenido personalizado y segmentado según las necesidades.

Pues para hacer eso debes usar en tu web el CONTENIDO CONDICIONAL. Con unos pequeños trucos podrás aumentar las ventas de tu web fácilmente.

Es decir, que en función de cómo haya interactuado en tu web, le mostrarás un contenido u otro.

Por ejemplo: Si el cliente ha agregado un producto al carrito pero no ha comprado, tu web debería mostrarle contenidos para ayudarle a solucionar las dudas o problemas que han paralizado esa compra.

Si tu web no muestra un contenido diferente a los que han agregado productos al carrito y no han comprado, tienes un problema. Estás perdiendo mucho dinero cadadía que pasa.

Hoy te voy a explicar cómo hacer esto con el Tema Divi de WordPress porque es el tema más instalado de WordPress del Mundo y porque con Divi es tremendamente fácil hacerlo.

No se trata que que aprendas a utilizar el CONTENIDO CONDICIONAL de Divi. Se trata de que aprendas a utilizar el contenido condicional, uses la herramienta que uses, pero de manera INTELIGENTE, para multiplicar así, las ventas de tu web.

Cómo utilizar el Contenido Condicional con el Tema Divi

Lo primero es saber dónde se puede aplicar este CONTENIDO CONDICIONAL que nos va a ayudar a aumentar las ventas.

En Divi, simplemente tienes que ir a la pestaña Avanzado de cualquier módulo, fila o sección y pulsar en CONDITIONS. 

Aquí, puede agregar nuevas condiciones que controlarán la visibilidad de un elemento. 

Si se cumplen las condiciones que definas, el elemento (módulo, fila o sección) se mostrará a tus potenciales clientes. Si no se cumple la condición, permanecerá oculto. 

Puedes agregar varias condiciones para crear conjuntos de reglas avanzadas, y puedes elegir mostrar el elemento en función de si se cumplen todas o una de sus condiciones. ¡Una auténtica pasada, vamos!

Ejemplos de contenidos condicionales para multiplicar ventas


Estos son solo algunos ejemplos que te pueden inspirar, pero las posibilidades son tan geniales y brutales que el límite está en tu imaginación.

Ejemplo 1: Ofertas según la Fecha y hora

Puedes usar las opciones de condición de Divi para mostrar elementos basados ​​en fecha y hora, e incluso crear programas de contenido recurrentes. 

Por ejemplo una pizzería que quiera hacer una oferta del tipo “viernes locos” con una promoción de “compre una pizza y obtenga una gratis”

Para promover la venta, crean un popup llamativo que solo se muestre los viernes.

Con el Contenido Condicional de Divi pueden configurarlo y olvidarse porque se va a mostrar todos los viernes de forma automatizada, y así aumentar las ventas los viernes.

>> VER EL EJEMPLO Y EL TUTORIAL

Ejemplo 2: Ocultar suscripción a los que ya se han suscrito

No tiene demasiado sentido que todas las webs muestren secciones de inicio de sesión a usuarios que ya están logueados. Les estamos mostrando contenido que no les interesa.

Con Divi puedes crear una sección inteligente que desaparece si los usuarios ya están logueados. 

Solo se mostrará a los usuarios desconectados. ¡Ahí es donde entran las opciones condicionales de Divi!

Puedes usar el tipo de condición «Estado de inicio de sesión» y elegir mostrar este elemento solo cuando el visitante está desconectado. También puedes usar las opciones de condición para ocultar el contenido completo del artículo. 

>> VER EL EJEMPLO Y EL TUTORIAL

Contenido del carrito en WooCommerce: Repescar ventas

Las opciones de condición de Divi también funciona para WooCommerce. 

Puedes incentivar las conversiones ofreciendo un código de cupón a los clientes que han abandonado su carrito mientras aún está lleno de productos.

Crea una ventana emergente flotante para promover un código de cupón y usa las opciones de posición de Divi para fijar la sección en la parte inferior del navegador. 

Mola eh, además solo quiero que aparezca esta ventana emergente cuando alguien abandone su carrito. ¡Ahí es donde entran las opciones de condición de Divi!

Puedes agregar la condición «Contenido del carrito» y configurarla para que se muestre solo cuando existan productos en el carrito de un cliente. 

También quiero asegurarme de que no mostramos este código de cupón de inmediato, sino que solo se lo mostramos a los clientes que han abandonado su carrito durante el proceso de pago. Puedo usar la condición «Visita a la página» y solo mostrar esta ventana emergente a los clientes que hayan visitado la página de pago de WooCommerce.

Ahora, cuando alguien agregue productos a su carrito, vaya a pagar, pero se enfríe antes de pagar, la próxima vez que visite el sitio web verá este código de cupón de 20% de descuento.

>> VER EL EJEMPLO Y EL TUTORIAL

Todas las condiciones son combinables


Divi viene con multitud de opciones de condiciones para elegir. Además, cada condición contiene diferentes subopciones que amplían el alcance de la condición para diferentes escenarios. Estas condiciones también se pueden combinar para crear conjuntos de reglas de visibilidad avanzados.

Estatus de usuario

Las condiciones de estado de usos le permiten adaptar tu sitio web a sus visitantes en función de si han iniciado sesión o no y el rol de usuario de WordPress asignado a su cuenta.

  • Estado de inicio de sesión : oculta o muestra elementos en función de si los visitantes actuales están conectados o desconectados.
  • Función de usuario : oculta o muestra elementos según la función de un usuario. Por ejemplo, muestre contenido pago a clientes específicos o contenido privado a ciertos suscriptores.

Interacción

Las condiciones de interacción le permiten adaptar el contenido a sus visitantes en función de cómo o cuándo interactúan con su sitio web.

  • Fecha y hora : ocultea o muestra elementos según la fecha y la hora. Mostrar contenido durante un bloque de tiempo finito. Por ejemplo, muestra la información del evento para un próximo evento o muestra un banner promocional solo cuando haya una venta activa.
  • Página / Visita posterior : oculta y muestra elementos a los usuarios que han visitado o no páginas específicas de tu web. Reorienta a los visitantes en su propio sitio web con contenido único basado en la forma en que interactúan con su sitio web.
  • Compra de productos : oculta o muestra elementos a los usuarios que hayan comprado o no productos específicos en tu tienda WooCommerce.
  • Contenido del carrito : oculta o muestra elementos en función de si un usuario tiene artículos en su carrito de WooCommerce o no. Para todos los productos o productos específicos de su tienda.
  • Número de vistas : oculta o muestra un elemento según la cantidad de veces que lo haya visto un visitante. Crea contenido por tiempo limitado que caduque después de una cierta cantidad de tiempo en función de la participación de los visitantes.

Dispositivo

Las condiciones del dispositivo te permiten adaptar tu web en función del software que utilizan para navegar por su sitio web.

  • Navegador : oculta o muestra elementos a los usuarios según el tipo de navegador que estén utilizando. Adapte su diseño a un navegador específico para manejar las formas únicas en que ciertos navegadores manejan CSS, u ofrecer contenido que es específico para ciertos navegadores (como extensiones de navegador).
  • Sistema operativo : oculta o muestra elementos a los usuarios según el sistema operativo que estén utilizando. Por ejemplo, puedes crear enlaces de descarga a su software que proporcionen al usuario el archivo de instalación correcto.
  • Cookie : oculta o muestra elementos basados ​​en la existencia o los valores de ciertas cookies almacenadas en el navegador del visitante. Esto le brinda mucha libertad para personalizar páginas para usuarios específicos en función de cómo han interactuado con su sitio web y sus complementos.

Publicar información

Las condiciones de la información de la publicación te permiten mostrar elementos basados ​​en la metainformación de la publicación, como su categoría, etiqueta, autor y tipo. Estas condiciones se pueden combinar con las asignaciones de plantillas de Theme Builder, lo que le brinda dos capas de condiciones y la capacidad de crear diseños más dinámicos.

  • Tipo de publicación : oculta o muestra elementos en publicaciones de un tipo específico.
  • Categoría de publicación : oculta o muestra elementos en publicaciones dentro de categorías específicas.
  • Etiqueta de publicación : oculta o muestra elementos en publicaciones con etiquetas específicas.
  • Autor : oculta o muestra elementos en publicaciones escritas por autores específicos.

Ubicación del sitio web

Las condiciones de ubicación del sitio web te permiten mostrar elementos basados ​​en el lugar donde existe la página en tu web. Estas condiciones se pueden combinar con las asignaciones de plantillas de Theme Builder, lo que brinda dos capas de condiciones y la capacidad de crear diseños más dinámicos.

  • Página de etiquetas : oculta o muestra elementos en páginas de etiquetas específicas.
  • Página de categoría : oculta o muestra elementos en páginas de categoría específicas.
  • Archivo de fecha : oculta o muestra elementos en páginas de archivos de fecha específicas.
  • Resultados de búsqueda : oculta o muestra elementos en las páginas de resultados de búsqueda según los términos que busca el visitante.
  • Tipos de publicaciones : oculta o muestra elementos en tipos de publicaciones específicos.
  • Publicaciones / Páginas : oculta o muestra elementos en publicaciones o páginas específicas que seleccione de una lista.
¿Qué puntuación le das?
[Total: 3 Media: 5]
Cómo crear una página web profesional gratis paso a paso (con WordPress)

Cómo crear una página web profesional gratis paso a paso (con WordPress)

¿Quieres crear una página web profesional gratis? Estás en el lugar adecuado. Hoy, en pocos minutos vas a aprender a crearla paso a paso.

Te adelanto lo que vas a necesitar y verás como puedes tener todo GRATIS (salvo el dominio pero es justo lo más barato):

  1. Necesitas un hosting para alojar la web: Yo te recomiendo sin duda PROFESIONALHOSTING, por su calidad, velocidad, seguridad y soporte.

Además con este cupón: FORMACIÓN podrás tener el hosting 100% gratis durante 3 meses. Es el ideal para probar. Y si quieres hacer una web para futuro usa este otro cupón: AMIGOPH y tendrás un descuento del 75%

  1. Necesitas comprar un dominio: Esto es fundamental si quieres tener un dominio propio y no es nada recomendable usar dominios gratis. Pero tienes dominios como los .online que están desde 2,5 euros al año. Es decir, casi gratis.
  1. Necesitar un Programa para Crear Webs: El programa Nº1 del mundo es WordPress y si usas la versión WordPress.org (y no WordPress.com) es GRATIS. Solo tienes que instalarlo en tu Hosting tal y como explico en el vídeo de más abajo.
  1. Necesitas un Tema de WordPress: Yo recomiendo 2, uno se llama ASTRA y es gratis, Y el otro se llama Divi y cuesta 199 dólares pero en mis cursos puedes descargarlo gratis.
  1. Necesitas un maquetador: Esto es importantísimo para diseñar las páginas de la web de forma sencilla. Te recomiendo 2: Gutenberg que es gratis y viene con WordPress sin que tengas que instalar nada y Divi, que en caso de que hayas instalado el Tema Divi, ya no tienes que instalar nada porque viene con el maquetador integrado.

En el caso de usar Gutenberg te recomiendo instalar el plugin gratuito Starter Templates para poder usar plantillas con diseños ya creados y que te ahorren muchas horas de trabajo.

Y recuerda que tienes mi curso de WordPress gratis, así que no tienes excusa.

En este vídeo te lo explico todo con más detalle:

¿Qué puntuación le das?
[Total: 1 Media: 5]
Tema Divi: La Guía Definitiva de la mejor plantilla WordPress

Tema Divi: La Guía Definitiva de la mejor plantilla WordPress

¿Por qué el Tema Divi de Elegant Themes es tan bueno?

La respuesta la encontramos en su sencillez y su flexibilidad. Estas son dos de las grandes palabras que resumen el éxito de Divi. A diferencia de otros temas de WordPress en los que necesitarás saber CSS o PHP si quieres hacer que tu web sea distinta y única, con Divi podrás hacer webs espectaculares sin tocar una línea de código.

Existan otros temas muy buenos en WordPress pero para los que no somos programadores tienen la desventaja de que si no sabes código tendrás que usar una plantilla y cuando navegues por internet verás otras cientos de webs muy similares a la tuya. Las de toda esa gente que usa la misma plantilla. Con Divi no te pasará eso porque podrás diseñar muy a medida y podrás hacer miles de personalizaciones de forma sencilla. Tu página web se parecerá a lo que tu quieras que se parezca, a donde te lleve la imaginación, no a la plantilla que has elegido.

¡Que no te engañen! Divi es el Tema Más Instalado de WordPress en el mundo ¡¡¡Por delante incluso de los gratuitos!!!



¿Para quién es recomendable usar el tema Divi de Elegant Themes?

Divi es especialmente recomendable para personas que vayan a querer montar su negocio y necesitan tener una web bien posicionada y que a su vez genere confianza en todos los que la visiten porque de imagen de calidad.

Altamente recomendable para:

  1. Personas sin conocimientos de diseño web
  2. Personas que quieran hacer una web corporativa, tienda online, academia online, etc.
  3. Negocios locales que quieran crear su web facilmente
  4. Personas que quieran una web de mucha calidad en poco tiempo
  5. Personas que quieran poder autogestionar su web
  6. Diseñadores web que quieran dar calidad a sus clientes sin perder tiempo

En mi caso, yo desde que conocí Divi no uso otros temas. Divi tiene todo lo que necesito y puedo hacer diseños espectaculares que dejan fascinados a mis clientes sin necesidad de aprender programación. Aquí podéis ver algunas de mis más de 200 webs diseñadas.

Por tanto, si eres freelance o tienes una pyme o quieres montar una tienda online o eres diseñador gráfico y web y no eres programador Divi es tu solución.

Hay muchos programadores que también usan Divi por su potencia, pero ellos además podrían usar otros temas o plantillas de WordPress que requieren conocimientos más técnicos.

divi vs genesis

¿Cómo hacer una Web con Divi desde cero?

Si tienes unos minutos, desconecta el móvil y hoy vete a dormir sabiendo como se diseña una web desde cero con Divi. Aquí te dejo el vídeo que han visto ya muchos miles de personas, a disfrutarlo:


¿Dónde comprar y descargar Divi? Lo que debes saber sobre la Licencia de Divi

Aquí te explico todo lo que necesitas saber antes de comprar el Tema Divi de WordPress


¿Cómo multiplicar tus ingresos gracias a Divi?

Divi te puede ayudar a ganar más dinero con tu página web ya que te va a permitir crear landings o páginas de venta que te permitan ganar más dinero en menos tiempo.

Aquí lo explico paso a paso:


¿Es rápida la velocidad de carga de Divi?

La respuesta es Sí y en este artículo de mi blog puedes ver decenas de webs que cargan en menos de 2 segundos con Divi.

Desgraciadamente hay muchos blogs por ahí que dicen lo contrario y me da cierta pena leer algunas cosas porque algunas al no ser muy precisas acaban desinformando a la gente.

La velocidad de carga es algo que valora mucho Google y por eso los temas deben ser ágiles. Pues bien, hay comparativas por internet que comparan Divi con otros temas pero no son del todo justos porque comparan temas en los que luego necesitarás instalar plugins si no te quieres tirar de los pelos tratando de diseñar páginas bonitas.

Es decir, comparan un tema “vacío” con Divi que trae su propio “maquetador visual de páginas” que por cierto es una maravilla. Y luego, en esos temas cuando instalas todos esos plugins que van a necesitar porque esas funcionalidades no vienen incluidas como en el tema Divi de Elegant Themes, te encuentras que ya no hay diferencias.

Bueno, como decía, te lo voy a demostrar en este vídeo y lo que te demostraré es lo siguiente:

  1. El Tema Divi es rápido y le gusta a Google.
  2. Es tan rápido como otros temas famosos por su velocidad como Genesis
  3. Verás muchas páginas en 1º página de Google con Divi
  4. Aprenderás cómo optimizar Divi al máximo

¿Divi theme es fácil de posicionar en Google?

La respuesta es Sí y también te lo voy a demostrar.

Aquí pasa como con todo, resulta más fácil para los que más conocimientos tenemos de posicionamiento en Google. Pero Gonzalo… ¿y si no tengo conocimientos? Si no tienes conocimientos te va a costar posicionar uses el tema Divi o uses el que uses.

Si diseñas bien la web puedes llegar a posicionarla en Google «sin hacer nada»

Aquí te muestro muchas de las páginas que he posicionado en las primeras posiciones de Google con Divi theme de ELegant Themes:

¿Puedo usar Divi en otros temas de WordPress?

La respuesta vuelve a ser Sí y también te lo voy a demostrar.

Hace ya mucho tiempo, allá por 2015, en Elegant Themes sacaron el plugin de Divi. Esto significa que si usas el Tema Divi en tu página de WordPress y dentro de unos años o cuando sea quieres cambiarte a otro tema podrás hacerlo sin problema importando el plugin al nuevo tema, sea cual sea, e importando en cuestión de segundos todos los diseños que hayas hecho en tus páginas con Divi.

Veo miles de personas desinformadas con esto y me da mucha pena.Hay videos en internet con miles de visitas de gente muy buena, muy crack, muy preparada, pero con videos desactualizados que hacen creer a la gente que si usan Divi y quieren cambiar de tema perderán todo. Sé que esa desinformación no es con mala intención pero posiblemente mucha de esa gente haya usado temas más complicados y se hayan tirado de los pelos por no haber tomado la decisión que más les favorecía desde un principio.

Aquí os dejo otro vídeo, esta vez de Elegant Themes, donde explican las ventajas de que además del Tema Divi exista el Plugin de Divi:

¿Dónde encuentro descuentos, cursos, recursos…?

El Tema Divi de Elegant Themes es un tema Premium y de pago. Ahora bien, yo es la mejor compra que he hecho en mi vida casi, ya que parte de mis ingresos se deben a que puedo hacer diseños web espectaculares y ahorro muchísimo tiempo con lo que no solo acaban contentos sino que además puedo coger más clientes que antes ya que tardo mucho menos.

Aquí te dejo muchos enlaces interesantes bien para que puedas comprar Divi directamente a Elegant Themes y dispongas además de todos sus plugins, temas y de su soporte (en inglés).

Y enlaces para que puedas hacer mis Cursos de Divi en los que además te podrás descargar la plantilla Divi sin pagos adicionales y para poder usar en cualquier proyecto de por vida.Con mi Curso de Divi tienes incluido el tema Divi de forma indefinida, es decir, de por vida

Y con mi Pack de Todos los Cursos además mi código de Licencia en tu web. Entra aquí para verlo.

El mayor descuento en Divi: 20% descuento

Aprovecha ahora el 20% de descuento y además de Divi tendrás todos los temas, plugins, actualizaciones y soporte de Elegant Themes. Recuerda que a ese precio hay que añadir los impuestos de tu país.

Aquí es donde compro yo cositas para las webs que hago y por poco dinero consigo efectos, imágenes y plugins espectaculares que me salvan la vida y enamoran a mis clientes 😉

Mis Recursos Gratis para Divi

En esta página de mi web encontrarás cantidad de diseños y efectos para importar en segundos en tu web

Elegant MarketPlace

Este es el lugar donde encontrarás todos los plugins, plantillas, diseños y millones de cosas más para dar más potencia y versatilidad a Divi ¡una pasada!

¿Qué puntuación le das?
[Total: 0 Media: 0]
Tutorial plugin QuadMenu Mega Menu con Divi

Tutorial plugin QuadMenu Mega Menu con Divi

En este tutorial, veremos cómo crear un mega menú espectacular en Divi. Para eso, utilizaremos uno de los mejores plugins de mega menú disponibles en el mercado actualmente: QuadMenu.

Se trata de un complemento ideal para crear cabeceras interactivas y se integra armoniosamente con Divi, al igual que con todas las plantillas más populares.

QuadMenu es un plugin que ofrece innumerables opciones de diseño y personalización, es extremadamente flexible y con un rendimiento insuperable. 

Para empezar, veamos el mega menú terminado antes de pasar a explicar como lo hemos hecho:

1_  Activar QuadMenu Premium

Algunos de los elementos que usaremos -carrusel y pestañas- están disponibles solo para la versión Premium, así que tendremos que descargar el archivo .zip donde hayamos comprado la licencia, instalarlo y activarlo junto a la versión gratuita de QuadMenu.

Ambos plugins son necesarios para acceder a las características Premium, el de gratis y el de pago.

1.1_ Integración con Divi

La integración del menú provisto por QuadMenu con Divi es automática. Esto significa que basta con encender el boton de “integración” para que todo funcione. 

En el panel de control de QuadMenu, seleccionamos la localización de menú de Divi “Menú principal” y encendemos el plugin.

El tema del menú es donde haremos todas las ediciones del menú. 

Seleccionamos “Customizer” para controlar nuestro menú desde el personalizador de Divi, de esta forma podemos ver los cambios en tiempo real mientras vamos construyendo nuestro mega menu.

Pasaremos por alto la personalización del menú, colores y demás elementos de diseño que se encuentran en Apariencia >> Personalizar>> Cabecera y Navegación. Utiliza las  múltiples opciones disponibles para darle un toque único a tu menú 

2_  Opciones Generales: Añadir Iconos e Insignias (etiquetas) y mucho más.

Insertamos la insignia “premium” a las pestañas y el icono al elemento “home” accediendo a estos elementos desde la página de editor de menú, haciendo click en el boton azul. 

En la pestaña “icono” seleccionamos alguno de los iconos disponibles, mientras que en la pestaña “general” podremos ingresar la insignia.

También tenemos otras opciones que están presentes en todos los tipos de elementos, como el subtítulo, posición del desplegable o añadir enlace.

3_ Agregando contenido a las columnas.

Los desplegables de QuadMenu funcionan en base al sistema grid de BootsTrap. De esta forma podemos mostrar nuestro contenido en columnas y elegir el número y la disposición de las mismas. 

Como ejemplo, veamos el desplegable de “mega” en nuestro menú.

Como podemos observar, tenemos 4 columnas con distinto tipo de contenido cada una. Para lograr esto, en el backend hemos seleccionado la opción de cuatro columnas, antes de insertar nuestro contenido.

La imagen refleja la configuración de la pestaña “mega” de nuestro menú. Como vemos, el contenido se organiza de la misma manera que los widget de la barra lateral, o cualquier otra área de widgets posible. Cada columna funciona de esta misma manera, mostrandose en orden descendente.

En el ejemplo, hemos insertado un widget para cada enlace, uno para cada post, para las páginas y el calendario de WordPress en la última columna.

Pero también es posible utilizar cualquier otro tipo de widget aquí, los widgets disponibles aparecerán en la lista de widgets, en la página de edición del menú.

De esta forma podemos generar contenido dinámico dentro de nuestro menú. Como por ejemplo últimos posts publicados, ultimos comentarios, productos mas vendidos, mas populares, paginas o taxonomías actualizadas.

4_ Añadiendo widgets a las columnas

Para añadir cualquier widget a una columna, hacemos click en el signo mas (+) en la columna a la cual queremos añadir un widget.

La lista de widgets de QuadMenu se mostrará para que podamos seleccionar uno o varios.

Finalizamos la acción dándole click al boton de “añadir a columna”  o “add to column”.

5_ Creación del Mega Menú

Añadimos un elemento “mega” a nuestro menú y abrimos el editor de elemento con el boton azul. Ahora vemos algunas otras pestañas que están ausentes en otros elementos, fondo, ancho y columnas.

En la sección de columnas es donde pondremos nuestro contenido en forma de widgets. Ya hemos visto antes cómo añadir columnas predefinidas, en nuestro mega menú usamos cuatro columnas de igual ancho.

En la sección “fondo” es posible poner una imagen de fondo al desplegable. 

En la sección “ancho”, encontramos tres opciones: ancho completo, encajonado o personalizable. En caso de elegir el ancho personalizable es necesario especificar el ancho sobre un total de doce columnas para cada tamaño de pantalla.

Si bien esto puede sonar algo difícil de entender, es fácil ir probando con distintas combinaciones hasta encontrar el ancho deseado.

6_ Crear el elemento TAB

Como vemos en nuestro menú de ejemplo, la pestaña TABS despliega el contenido agrupado a su vez en otras pestañas, como si fueran sub niveles del elemento padre.

Cada pestaña dentro de nuestro desplegable funciona como un elemento mega, en el que podemos organizar el contenido en columnas y mostrarlo mediante el uso de widgets.

Para añadir una nueva pestaña, vamos a la sección “pestañas” y damos click al signo mas (+). Hacia la derecha, encontramos los botones para borrar o editar cada pestaña

7_ Crear elemento carrusel

De la misma manera que creamos nuestros desplegables anteriormente, crearemos cada una de las pantallas o paneles de nuestro carrusel.

Además de todas las que vimos antes, el carrusel de QuadMenu tiene otras opciones que hacen a su funcionamiento.

Entre las opciones que se encuentran en la sección “carrusel” podemos ajustar la velocidad de animación y ponerlo en reproducción automática, mientras que en la sección “paneles” vamos a construir cada uno de nuestros paneles de la misma forma que lo hicimos con el contenido del elemento TABS. 

Creamos un nuevo panel dando click al signo mas (+) y añadimos nuestro contenido para cada panel en las columnas que hayamos dispuesto previamente.

¿Qué puntuación le das?
[Total: 1 Media: 5]
Haz scrolls animados espectaculares con Divi

Haz scrolls animados espectaculares con Divi

A partir de hoy vs a poder hacer efectos alucinantes cuándo tus potenciales clientes hagan scroll en tu página. O lo que es lo mismo, naveguen hacia abajo o hacia arriba en cualquiera de las páginas de tu web.

IMPORTANTE: Si quieres descargar esta y futuras versiones de Divi gratis y aprender Divi con mi ayuda apúntate hoy mismo a mi Curso de Divi

¿Quieres ver lo que es posible? Echa un vistazo a esta demostración para inspirarte:

VER LA DEMOSTRACIÓN DE EFECTOS DE DESPLAZAMIENTO

¿Qué son los efectos de desplazamiento o scroll?


Los efectos de desplazamiento son animaciones personalizables que reaccionan a sus visitantes a medida que se desplazan hacia arriba y hacia abajo en la página. 

Suena complicado, ¡pero Divi lo hace súper fácil!

Cualquier elemento puede ser animado usando una combinación de escala, rotación, movimiento horizontal y vertical, opacidad y efectos de desenfoque.

¡Crea animaciones simples que agreguen profundidad y sofisticación sútil, o combina efectos y anima múltiples elementos para crear espectaculares explosiones de actividad que sorprenderán a tus visitantes!

Seis efectos de scroll de Divi


Divi viene con seis efectos de desplazamiento diferentes, cada uno de los cuales se puede personalizar individualmente. También puedes combinar cualquiera de los efectos para crear animaciones más complejas.

Efecto scroll de Divi: Movimiento vertical

El efecto de movimiento vertical permite que cualquier elemento se mueva hacia arriba y hacia abajo de la página en función de la velocidad y la dirección que se desplaza un visitante. 

¡El resultado es un efecto de paralaje! Ahora se puede usar cualquier cosa para crear efectos de paralaje con Divi. Incluso puedes combinar el movimiento vertical con imágenes de fondo de paralaje para crear diseños realmente impresionantes.

Efecto scroll de Divi: Movimiento horizontal

El efecto de movimiento horizontal es como el efecto de movimiento vertical, excepto que permite que los elementos se muevan hacia la izquierda y hacia la derecha a través de la pantalla en función de la dirección y la velocidad que se desplaza un visitante. 

¡Incluso puedes combinar el movimiento vertical y horizontal, dándole un control completo sobre el movimiento de cualquier elemento!

Efecto scroll de Divi: Difuminar (blur)

El efecto de desenfoque añade elementos basados ​​en la velocidad y dirección que se desplaza un visitante. 

Dado que Divi permite controlar el valor de desenfoque inicial, medio y final, puede enfocar los elementos justo cuando están frente a los ojos del visitante. Es una excelente manera de llamar la atención sobre piezas importantes de información.

Efecto scroll de Divi: Desvanecerse (fade)

El efecto de desvanecimiento con elementos de desvanecimiento de entrada y salida basados ​​en la velocidad y la dirección que se desplaza un visitante. 

La combinación de desvanecimiento, desenfoque y escala puede crear algunas animaciones realmente sofisticadas.

Efecto scroll de Divi: Escala

El efecto de escala aumentará o disminuirá el tamaño de cualquier elemento en función de la velocidad y la dirección que se desplaza un visitante. 

Si deseas llamar la atención sobre un elemento en particular, como una llamada a la acción, puedes configurar el efecto de escala para aumentar el tamaño del elemento a medida que se acerca al centro de la ventana gráfica. 

Efecto scroll de Divi: Rotación

El efecto de rotación con rotar un elemento en cualquier dirección en función de la velocidad y la dirección que se desplaza un visitante. 

La rotación sutil realmente puede dar vida a las escenas. ¡Solo un poco de rotación cuando se combina con el movimiento horizontal puede verse genial! 

Una nueva interfaz intuitiva ¡Más fácil de lo que parece!

¡La verdadera belleza de los efectos de desplazamiento de Divi es lo fáciles que son de usar! 

Con un solo clic, puedes agregar o combinar cualquiera de los seis efectos de desplazamiento de Divi.


Un clic y eso es todo!

Para agregar un efecto de desplazamiento, simplemente ve al nuevo grupo de opciones de Efectos de desplazamiento dentro de la pestaña Avanzado de cualquier módulo, fila, columna o sección. 

Se pueden habilitar múltiples efectos a la vez y los efectos se combinarán en una sola animación suave que se transita maravillosamente a medida que se desplaza.

¿Quieres control total sobre el scroll? ¡También lo tienes!

Una vez que habilitas un efecto de desplazamiento, tienes control total. Al controlar los valores inicial, medio y final, controlas lo que hace la animación. 

Una vez que se establecen los valores, Divi se encarga del resto y hará la transición del elemento a medida que se mueve a través de la ventana del navegador, creando así una animación.

  • Valor inicial: el estado de animación inicial que se utiliza cuando el elemento ingresa en la parte inferior de la ventana del navegador.
  • Valor medio: el estado de animación del medio al que se hará la transición a medida que el elemento se mueva hacia el centro de la ventana gráfica.
  • Valor final: el estado final de la animación que se produce cuando el elemento sale de la ventana del navegador en la parte superior de la pantalla.

Por ejemplo, un efecto de opacidad con un valor inicial de 0 (invisible), un valor medio de 100 (totalmente visible) y un valor final de 0 (invisible), pasará de un estado invisible a medida que ingresa a la ventana gráfica hasta que se convierte en 100% visible en el medio de la ventana gráfica, y luego se desvanecerá a un estado invisible cuando salga de la ventana gráfica.

Ajustar la línea de tiempo de animación

No solo puedes ajustar los valores de la animación, sino que también puede ajustar la línea de tiempo de la animación.

La interfaz de usuario de la línea de tiempo representa la altura de la ventana gráfica del navegador. 

Cada fotograma clave de animación se puede activar en una posición diferente dentro de la ventana gráfica. 

Esto permite controlar cuándo comienza la animación, cuándo termina y el momento del valor de la animación central en función de dónde existe el elemento animado dentro del eje y de la ventana de visualización del navegador.

  • Posición de fotograma clave inicial : controla cuándo comienza la animación. Si desea retrasar la animación, arrastre la posición del cuadro clave inicial hacia adentro.
  • Posición media del fotograma clave : controla el punto en el que la animación alcanza su valor medio de animación. No tiene que estar exactamente en el medio de la línea de tiempo de la animación. Puede mover el fotograma clave del medio a cualquier posición dentro de la ventana gráfica.
  • Posición final del fotograma clave : este control cuando finaliza la animación. Si desea que la animación finalice antes de que el elemento abandone la ventana gráfica del navegador, puede arrastrar la posición final del fotograma clave hacia adentro.

Agregar estados estáticos a cualquier animación

También puede agregar pausas a sus animaciones aumentando la duración de su valor de efecto medio estático. Para crear una duración de animación estática, haga clic en las dos flechas al pasar el mouse sobre el fotograma clave central. Luego puede extender el fotograma clave central arrastrando sus bordes en cualquier dirección. Durante este punto de la animación, el elemento permanecerá estático. Una vez que finaliza la duración estática, la animación continuará la transición hacia su valor final.

¿Qué puntuación le das?
[Total: 1 Media: 5]
Divi 4.1: Usa Divi dentro de Gutenberg

Divi 4.1: Usa Divi dentro de Gutenberg

Hoy en Elegant Themes han sacado una de esas novedades de Divi que nos dan subidón!

Desde hoy, con Divi 4.1 podrás usar Divi dentro del editor de bloques de WordPress: Gutenberg.

Esto significa que no necesitas decidir entre Divi o Gutenberg cuándo vayas a crearun post o una entrada en tu blog, sino que puede mezclar y combinar los dos para crear artículos cojonud… en tu web 😉

¿Quién soy y cómo te puedo ayudar?

Por si es la primera vez que legas a mi blog, me presento. Mi nombre es Gonzalo de la Campa y me dedico a ayudar a emprendedores a generar ingresos en Internet. En esta web tienes cursos a los que ya se han apuntado más de 2.000 alumnos.

>> Aquí tienes mi curso de Divi actualizado a la última versión y conmigo de soporte para ayudarte.

Además tienes recursos gratis en el menú y cantidad de tutoriales en mi Canal de YouTube al que te recomiendo que te suscribas.

¿Qué es Gutenberg?

Gutenberg es el nombre en clave para el editor basado en bloques que se introdujo recientemente en WordPress 5.0. 

Este nuevo editor reemplazó al editor clásico basado en TinyMCE que ha sido un elemento básico de WordPress durante muchos años. 

El año pasado presentaron el soporte inicial para Gutenberg, que permitió a los usuarios de Divi alternar entre Gutenberg y Divi Builder al crear páginas. Hoy van un paso más allá al permitir que los usuarios de Divi combinen módulos Divi y bloques Gutenberg en la misma página.

Uniendo a dos constructores

Divi es el tema de WordPress más instalado del mundo y tiene muchas ventajas significativas sobre Gutenberg. Muchos usuarios de Divi nunca usan Gutenberg . 

Dicho esto, Gutenberg no debería ser visto como el competidor de Divi. ¡Ambos constructores pueden trabajar juntos! 

El bloque de diseño Divi

Utiliza el Divi Builder en cualquier lugar dentro de Gutenberg

El bloque Divi Layout es un bloque Gutenberg que funciona como una versión mini del Divi Builder. 

Puedes usarlo en cualquier lugar dentro de una página construida con Gutenberg para agregar módulos Divi o crear diseños Divi. 

Cuando agregas un Bloque de diseño Divi, puedes usarlo para cargar un diseño predefinido o un elemento de biblioteca que hayas guardado previamente. 

Una vez que se agrega un diseño Divi a la página, puedes modificarlo utilizando la interfaz Divi Builder y hacer maravillas.

Usando el bloque de diseño Divi

Cuando agregues bloques en Gutenberg, verás que hay un nuevo bloque Divi Layout disponible en la lista. 

Este bloque se puede agregar en cualquier lugar de tu página y dentro de él puedes construir lo que quieras con Divi Builder. 

Puedes usarlo para construir diseños complejos grandes o puedes agregarlo para agregar módulos individuales que no existen en la biblioteca de bloques de Gutenber.

Esto es una pasada. Es como tener todos los módulos de Divi en Gutenberg.

Esto permite que los dos constructores se usen a la vez. Ya no debes elegir entre usar Divi o Gutenberg. ¡Puedes usarlos a ambos!

Carga diseños de la biblioteca o crea nuevos diseños desde cero

Una vez que agregasun bloque Divi Layout a la página, puedes elegir cargar un diseño prefabricado o crear un diseño completamente nuevo desde cero. 

Si eliges cargar un diseño de la biblioteca, lo verás con la ventana emergente Divi Library y podrás usar los cientos de diseños de Elegant Themes o los que tú hayas guardado. 

Si eliges crear un nuevo diseño, Divi Builder se abrirá en una ventana emergente modal donde podrás usar Visual Builder y todas sus funciones para crear su diseño. 

Una vez que haya terminado de editar su diseño, aparecerá en Gutenberg.

Usa el bloque de Divi tantas veces como quieras en una entrada con Gutenberg

Puedes agregar tantos bloques Divi Layout como desees a tu página. 

Esto te permite mezclar y combinar Divi Modules con Gutenberg Blocks para crear casi cualquier cosa. 

El bloque Divi Layout admite todas las funciones básicas del bloque. 

Puedes crear bloques Divi Layout reutilizables y los bloques actuales se pueden mover, editar, duplicar y eliminar fácilmente.

Edición en vivo sin ventanas emergentes o actualizaciones del navegador

El bloque Divi Layout va más allá de cargar diseños estáticos desde la biblioteca. 

Todos los bloques de diseño de Divi son diseños independientes que se pueden construir y modificar de forma independiente, sin tener que acceder a la Biblioteca Divi. 

La edición de bloques Divi Layout se realiza sobre la marcha utilizando una superposición de Visual Builder. Puedes utilizar todo el poder del Visual Builder sin tener que navegar lejos de Gutenberg o actualizar la página.

¿Qué puntuación le das?
[Total: 3 Media: 3]

Dime dónde te envío la clase

de Lanzamientos Automatizados

Responsable de los datos: Gonzalo de la Campa Marinas
Responsable: Gonzalo de la Campa | Finalidad: Enviarte información. 

Legitimación: Consentimiento | Destinatarios: Mailchimp y ProfesionalHosting  Duración: hasta que te des de baja. | Derechos e información adicional: Puedes ver todos los detalles en la política de privacidad

Dime dónde te envío el vídeo

(pon tu mejor email porfa)

Responsable de los datos: Gonzalo de la Campa Marinas
Finalidad: Enviarte información. | Legitimación: Consentimiento

Destinatarios: Mailchimp y ProfesionalHosting | Duración: hasta que te des de baja.

Derechos e información adicional: Puedes ver todos los detalles en la política de privacidad

Dime dónde te envío

tus regalos

Responsable de los datos: Gonzalo de la Campa Marinas
Responsable: Gonzalo de la Campa | Finalidad: Enviarte información. 

Legitimación: Consentimiento | Destinatarios: Mailchimp y ProfesionalHosting  Duración: hasta que te des de baja. | Derechos e información adicional: Puedes ver todos los detalles en la política de privacidad

Abrir chat
1
1. ¿Quieres apuntarte a algún curso? Soy Gonzalo, cuéntame y te ayudo encantado.

2. Si eres ya alumno y tienes dudas de soporte debes escribirme a soporte@cursowordpress-online.com

3. Si no eres alumno y necesitas soporte no podré responderte salvo que contrates soporte en la web o te apuntes a alguno de mis 9 cursos con soporte.
Ir al contenido