Curso de Divi Pixel

1. Introducción

Divi Pixel es un plugin creado para Divi que permite agregar 7 configuraciones avanzadas y 19 módulos personalizados que ampliarán increíblemente la funcionalidad de su sitio web. Con Divi Pixel, puede personalizar su sitio web Divi como nunca antes usando Divi creando fácilmente una experiencia de usuario inolvidable.

Divi Pixel funciona principalmente de 3 forma distintas:

  • Configuración.- Incluye una interfaz de usuario propia en la que puede habilitar y deshabilitar todas las opciones de complementos disponibles.
  • Personalizador de temas de Divi.- Divi Pixel agrega pestañas personalizadas a su Personalizador de temas de Divi en el que puede configurar todas las configuraciones personalizadas disponibles que vienen con el complemento. Todas las opciones están bien agrupadas e intuitivas.
  • Módulos personalziados.- Divi Pixel viene con 19 módulos personalizados que mejorarán significativamente su sitio web Divi. Cada módulo está bien pensado y le ofrece opciones de personalización prácticamente ilimitadas.

2. Configuración del plugin

Una vez instalado Divi Pixel podremos acceder a la configuración del tema, pare ellos en la parte de administrativa de WordPress vamos al menú de Divi y seleccionamos la opción Divi Pixel.

Desde aquí podremos configurar las características principales del plugin agrupadas en pestañas:

  • General.- Permite activar opciones como: personalizar la página de login, la scrollbar del navegador, el soporte de archivos SVG, personalizar el botón de ir arriba, activar un preloader, etc.
  • Blog.- Permite personalizar algunas opciones del blog como: seleccionar una disposición de elementos para la página de blog, desactivar la sidebar y la linea que la divide del contenido principal, agregar navegación a las entradas y mostrara entradas relacionadas.
  • Social Media.- Permite personalizar los botones de redes sociales y definir los enlaces a los perfiles
  • Mobile.- Permite establecer un breakpoint para el menu movil y configurar este ultimo de forma completa.
  • Modules.- Permite activar o desactivar módulos en el constructor visual de Divi
  • Layout injector.- Una de las opciones más interesantes, permite agregar plantillas de Divi guardadas en la biblioteca en posiciones específicas de la web de forma similar a como funcionaban los hooks pero sin usar código
  • Settings.– Permite configurará la licencia, agregar apis para vincular con aplicaciones externas como Facebook y finalmente exportar o importar toda la configuración del plugin en un archivo json

3. Personalizador de temas

Una vez establecidos algunos ajustes en la configuración de plugin debemos ir al personalizador de temas para cambiar la apariencia de dichos elementos. Por ejemplo si activas la opción de personalizar la página de Login en la configuración del Divi Pixel después deberás ir al personalizador del tema para poder hacerlo cambiando colores, dando formato a textos, agregando imágenes, etc.

4. Módulos

Divi pixel también cuenta con varios módulos personalizados que se agregan al constructor de Divi podrás reconocerlos porque tienen un fondo gris y su nombre comienza con la palabra Pixel.

Los módulos disponibles son:

  • Before After Slider.-  Es ideal para mostrar el trabajo en progreso o los resultados generales. Ya sea que sea un diseñador gráfico que quiera mostrar sus habilidades de edición, o que sea un fotógrafo o maquillador, simplemente agregue dos imágenes para que esto funcione. Los usuarios podrán mover un control deslizante para comparar fácilmente las imágenes de antes y después.
  • Blog Slider.- Es una manera perfecta de mostrar sus publicaciones de blog en forma deslizante, puede personalizar una serie de columnas que se mostrarán para equipos de escritorio, tabletas y móviles. El módulo ofrece muchas opciones de personalización, podemos seleccionar qué elementos en el cuadro de publicación del blog se mostrarán y cuáles no, agregar una animación de desplazamiento para la imagen de la publicación del blog, personalizar la navegación, la cinta de fecha, leer más botones, todos los textos y más.
  • Breadcrumbs.- Permite agregar migas de pan al sitio con esto no solo mejorará la navegación general del sitio y la experiencia del usuario, sino que también es bueno para el SEO. Este módulo le permite incluir fácilmente la navegación de Migas de pan en cualquier página y personalizarlo para que se ajuste al estilo de su sitio web y a la marca de su empresa.
  • Button Grid.- Permite agregar tantos botones como desee en una dirección de fila o columna. Cada botón se puede personalizar de forma independiente en la pestaña Diseño. Pero eso no es todo. También puede modificar los botones y el texto sin formato. Lo que normalmente implicaría CSS muy complicado ahora es muy simple.
  • Caroussel.- Permite crear fácilmente hermosas secciones de carrusel en Divi. Puedes usar los elementos predeterminados, como iconos, texto de título, descripciones y botones, o puede seleccionar elementos de la biblioteca divi para que se muestren en el módulo de carrusel. Esto crea posibilidades prácticamente ilimitadas.
  • Countdown.- Permite crear temporizadores de cuenta regresiva sea muy fácil. Ofrece 3 tipos de fechas y 3 estilos únicos para elegir, que se pueden personalizar aún más según lo desee. Otra característica útil es la configuración de eventos, en la que puede elegir qué acción se tomará una vez que finalice el módulo de cuenta regresiva. Puede continuar, detener el reloj, reenviar a una URL, detener y ejecutar un JavaScript, o detener y reemplazar el temporizador con código HTML.
  • Counter.- Permite mostrar contadores de una manera más efectiva y atractiva. Este módulo le permite contar fácilmente números, fechas e incluso publicaciones. Puede agregar texto de prefijo y postfijo, así como formatear los números para mostrar un valor decimal. Cada elemento de Pixel Counter se puede personalizar en la pestaña Diseño. Una de las opciones únicas en este módulo es el Estilo de escala, que le permite agregar una escala a sus contadores circulares.
  • Fancy Text.- Permite crear encabezados animados usando textos que cambian con una bonita animación. Puede tomar cualquier texto y rotarlo con diferentes frases para que pueda crear títulos atractivos para su sitio Divi. El módulo permite agregar tantos textos como desee y diseñarlos independientemente. También puede seleccionar animaciones IN y OUT para ver cómo entran y salen los textos.
  • FlipBox.- Permite crear desenfoques interactivos con un toque. Revelar contenido adicional en la parte posterior del módulo al pasar el mouse. Puede agregar un icono y / o imagen, texto de título, descripciones y un botón en ambos lados de forma independiente. ¡Este módulo es ideal para servicios, eventos, productos y más!
  • Floating mages.- Es un módulo avanzado que agregará algo de movimiento a su sitio web. Le permite agregar múltiples imágenes con animaciones, y cada imagen tiene su propia configuración de posición y animación. Este módulo es responsivo y se ve muy bien en todos los dispositivos.
  • Hover Box.- Muestra dinámicamente su contenido con una presentación llamativa. Puede agregar elementos predeterminados y de desplazamiento en la configuración del módulo, por lo que la tarjeta mostrará contenido diferente al pasar el mouse. Puede agregar imágenes / iconos, títulos, descripciones y botones para los estados predeterminados y de desplazamiento, y mostrar el contenido de desplazamiento con una animación suave. El módulo viene con 6 animaciones, por lo que puede estar seguro de que habrá un estilo que satisfará sus necesidades.
  • Image Accordion.- Ayudará a mostrar las galerías de imágenes con contenido de una manera agradable e interactiva. Puede agregar ícono, título, descripción y botón a cada imagen agregada y revelar ese contenido al pasar el mouse o después de hacer clic en la imagen. El módulo permite agregar superposición de imágenes para el estado predeterminado y al pasar el mouse, lo que lo hace, aún más, fácil de usar. Es una gran adición a cualquier sitio web que utilice imágenes, por lo que, en lugar de mostrar imágenes estáticas, podemos mostrarlas en una bonita sección de estilo acordeón.
  • Image Hotsopt.- permite crear fácilmente una imagen interactiva. Puede seleccionar una imagen de fondo y colocar varios puntos de acceso en ella, de modo que al pasar el mouse, aparece un cuadro de información sobre herramientas con detalles adicionales. Puede usar elementos predeterminados para el cuadro de información sobre herramientas o elementos de Divi Library. Las características predeterminadas del elemento incluyen imagen / icono, título, descripción y botón, y cada uno de estos elementos es totalmente personalizable.
  • Mansonry Gallery.- Permite crear galerías increíbles, sus potentes opciones facilitan la creación de hermosas galerías de mosaicos con efectos de caja de luz. Sus configuraciones de diseño avanzadas le permiten diseñar completamente este módulo a su gusto y cambiar los tamaños de las miniaturas para una carga súper rápida.
  • Price List.- Ayuda a mostrar fácilmente listas de precios en los sitios web Divi. Este módulo es una gran adición para restaurantes, cafeterías y sitios web de bistros (y muchos más) ya que se puede usar para mostrar cualquier elemento donde se requiera una vista de lista. Puede agregar una imagen, título, precio y descripción del artículo. Cada elemento se puede personalizar completamente para adaptarse a la marca, el esquema de color y el estilo de su empresa.
  • Start Rating.- Este módulo es muy flexible y permite agregar y personalizar calificaciones de estrellas en cualquier página. Viene con una gran cantidad de configuraciones útiles, como una escala de calificación de estrellas, para que pueda definir su propia escala, ya sea 3, 5, 10 o más. También le permite agregar valores decimales, cambiar el Tipo de pantalla (Bloque / En línea) y mostrar el número de clasificación. Todos estos elementos se pueden personalizar fácilmente en la pestaña Diseño.
  • Testimonial.- Permite mostrar testimonios de clientes, se integra con las páginas de Facebook y Google. También puede agregar testimonios manualmente y mostrar testimonios de WooCommerce. Este módulo es altamente personalizable y le permite diseñar los testimonios que se muestran en su sitio de una manera muy accesible e intuitiva.
  • Tilt Image.- Es otro módulo que te ayudará a mostrar contenido en su sitio web de una manera más interactiva y atractiva. Este módulo ofrece un efecto de inclinación al pasar el mouse, incluido un efecto de contenido 3D que hace que el módulo realmente se destaque. En la configuración del módulo, puede agregar una imagen o icono, texto de título, texto de descripción y un botón. Cada uno de estos elementos se puede habilitar o deshabilitar
  • Typing Text.- Permite agregar animaciones de texto de tipo maquina de escribir en tu sitio web. Puedes agregar texto animado, así como texto de prefijo y sufijo no animado, y cada uno de ellos se puede personalizar fácilmente en la pestaña Diseño.
descuento elementor pro

Cómo ganar dinero con tu web