Nuevos patrones máscaras y gradientes de fondo en Divi

Fondo degradado animado Divi

Para que el color de fondo aparezca en tu sitio, el diseño anidado de Divi debe estar habilitado. Para ello, basta con ir a Apariencia > Personalizar > Ajustes generales > Ajustes de diseño > Activar NestingLayout

Si necesitas extraer un color de una página web, te aconsejo que utilices una herramienta indispensable: un cuentagotas que recogerá por ti los códigos de color de las páginas web que visites. No pasa un día sin que lo utilice…

Antes de ponerte manos a la obra y utilizar el código CSS que te propondré a continuación, debes hacer una lista de las páginas de tu sitio que serán objeto de un cambio de color de fondo. Esto te permitirá obtener valores específicos para tu sitio: el identificador de tus páginas. Puede tratarse de la página de contacto, la página de servicios, la página “Acerca de”, etc.

Si no utiliza las opciones hover disponibles en Divi, ¡se lo está perdiendo! He aquí un ejemplo de cómo utilizarlos que usted puede encontrar útil. En este tutorial y vídeo, te muestro cómo cambiar una imagen al pasar el ratón por encima.

¿Has pensado en personalizar la página de error 404 de tu sitio? ¿No? Pues deberías: no sólo es fácil de hacer, sino que además podría reducir tu tasa de rebote. La idea es mantener en su sitio al usuario que pasa por él. Descubra el tutorial paso a paso + vídeo.

¿Cómo se añade una máscara de degradado?

Haga clic en el botón Editar máscara de la capa. Seleccione la opción Máscara de degradado en el menú desplegable. Haz clic y arrastra para crear un degradado lineal. Haz clic en el botón Visibilidad de la barra de herramientas superior para facilitar la visualización del degradado.

  Actualizaciones automáticas de WordPress … pero automáticas del todo

¿Cómo añado un degradado a una imagen de fondo en CSS?

Gradientes lineales CSS

Para crear un degradado lineal debe definir al menos dos paradas de color. Los topes de color son los colores entre los que desea que se produzcan transiciones suaves. También puede establecer un punto de inicio y una dirección (o un ángulo) junto con el efecto de degradado.

Máscara de fondo personalizada Divi

Una de las peculiaridades de Div es la configuración de la imagen de fondo de la sección. Proporcionan un montón de opciones para la imagen de fondo, excepto cuando el efecto de paralaje está activado, momento en el que los ajustes no están disponibles.

No puedo hacer que los ajustes aparezcan en Divi, pero puedo proporcionarte las clases CSS para cada uno. Recuerde, el Constructor Divi es simplemente tomar estas mismas propiedades CSS y hacerlos disponibles en un contexto constructor, por lo que nada de esto es nuevo o innovador – sólo estamos llenando de nuevo en las lagunas.

Cuando tienes una imagen de fondo, no querrás cubrirla completamente con un color, así que te mostraré usando una superposición negra semitransparente. Siéntete libre de ajustar esto a cualquier otro color, pero esto funcionará la mayoría de las veces.

Esta es una actualización opcional del color de fondo, pero si está utilizando gradientes en otras secciones de su sitio, es posible que desee utilizar uno en sus secciones de paralaje. De nuevo, siéntete libre de ajustar esto a cualquier otro color. Puede utilizar esta herramienta generador de degradado aquí para hacer eso.

  El padre de Wordpress

Nuevo degradado

En caso de que te hayas perdido el anuncio, hemos lanzado recientemente nuestro noveno plugin Divi, el plugin Divi Tabs Maker. ¡Me sorprendió la respuesta de todos ustedes, y me motivó a hacer el plugin aún mejor!

En mi esfuerzo por hacer de este plugin el 100% claramente obvio mejor y más valioso plugin de pestañas nunca, hemos sido una lluvia de ideas características avanzadas para los últimos 2 años. En realidad teníamos la versión 1.0 terminada hace casi 2 años, pero la dejamos sin lanzar debido a que nos centramos en nuevas características para los plugins existentes. Esto se debe a nuestro compromiso de seguir añadiendo más valor a los productos que ya posee. Durante ese tiempo, siempre estábamos añadiendo nuevas ideas de características a la lista de desarrollo, pero no llegaron a la versión 1.0. En el último mes hemos esprintado y nos hemos dado cuenta de que sería una tontería llamarla 1.1. Básicamente hemos duplicado las características y el valor, por lo que vamos con 2.0. Así que aquí está, Divi Tabs Maker versión 2.0, un mes después de 1.0 fue puesto en libertad. ¿Qué tan loco es esto?

Después de lanzar la versión 1.0 me di cuenta de que la función de Condiciones Divi no era compatible con nuestras pestañas. No estoy hablando del módulo, estoy hablando de cada pestaña individual dentro del módulo. Ahora puedes usar Condiciones para mostrar u ocultar pestañas individuales y su contenido. Esto funciona muy bien cuando se utiliza contenido dinámico en una plantilla Theme Builder, página de producto WooCommerce, tipo de entrada personalizada, etc.

Divi cambiar gradiente de color

7 Oct 2022¡Hey Creadores Divi! Gracias por unirse a nosotros para la próxima entrega de nuestra iniciativa semanal de diseño Divi donde cada semana, regalamos nuevos regalos. Esta vez estamos construyendo sobre el Divi Conferencia Layout Pack con una nueva plantilla de…

  ¿Wordpress ha vuelto al theme por defecto?

4 Oct 2022El formulario de contacto es un elemento importante para incluir en su sitio web si desea capturar correos electrónicos y convertir a sus visitantes en clientes. El módulo Divi Contact Form puede personalizarse fácilmente para crear atractivos y cautivadores formularios de contacto para todo tipo de…

Los tipos de degradado son parte del nuevo Divi Gradient Builder. Los nuevos tipos de degradado de Divi te dan la posibilidad de añadir diferentes formas y colores a tus fondos. En este post, compararemos estos tipos de degradado y te mostraremos cómo usarlos para crear fondos únicos.

Cada uno de los tipos muestra el degradado de forma diferente. Se utilizan para dar forma al degradado y mostrarlo como un patrón de color lineal, en un círculo, una elipse o un cono. Los veremos en detalle en nuestros ejemplos.