Cómo crear transiciones de sección de forma irregular con Divi

Una de las mejores formas de impulsar el diseño de su sitio web es mediante el uso de diferentes transiciones de sección. En una publicación anterior, le mostramos cómo puede hacerlo usando solo las opciones integradas de Divi. Sin embargo, si está buscando crear algo un poco más avanzado o personalizado, también puede crear transiciones de sección de forma irregular. Debido a su complejidad, la mejor manera de abordar esto es utilizando imágenes con un borde transparente.

En esta publicación, le mostraremos cómo puede hacerlo. No solo le mostraremos qué hacer dentro de Divi Builder, sino que también le mostraremos cómo puede crear estos bordes transparentes en imágenes con unos pocos pasos usando Photoshop.

Resultado de ejemplo

Echemos un vistazo a una muestra de diseño con impresionantes transiciones de sección de forma irregular:

Como puede notar, puede usar estos bordes transparentes en todo su sitio y en diferentes secciones. Es importante recordar que, dependiendo de qué tan grande sea su borde transparente, debería tener suficiente espacio dentro de las secciones para adaptarse al contenido diferente que está tratando de compartir. También creará un buen equilibrio entre las distintas secciones.

Cómo crear transiciones de sección de forma irregular con Divi

Suscríbete a nuestro canal de Youtube

Crea bordes transparentes con Photoshop

Puede lograr formas tan originales como desee con Photoshop. También puede optar por una alternativa gratuita llamada GimpShop. Sin embargo, para este tutorial usaremos Photoshop.

Abrir Photoshop

Comience abriendo Photoshop en su computadora.

Abrir imagen

Una vez que haya hecho eso, abra la imagen en la que le gustaría trabajar.

Haga doble clic en la imagen y cree una capa

Una vez que su imagen esté cargada en Photoshop, haga doble clic en la capa de la imagen y cree una nueva capa para ella (Capa 0).

Agregar otra capa

Para agregar el borde transparente, también necesitará otra capa, así que continúe y agréguela haciendo clic en el ícono que marcamos en la pantalla de impresión a continuación. Una vez que cree la capa (Capa 1), asegúrese de que esté colocada sobre la capa que contiene su imagen.

Seleccionar pincel y tamaño

Mientras tiene la Capa 1 activada, siga adelante y haga clic en el icono del pincel.

Una vez que lo haga, puede ajustar el tamaño y el patrón que se está utilizando para el pincel según sus preferencias. Hay toneladas de pinceles de Photoshop gratuitos en Internet, por lo que, según el tipo de sitio web que esté creando, elija uno adecuado. Además, asegúrese de que la opacidad esté configurada al 100%.

Comience a usar el pincel en los bordes

Una vez que tenga su pincel en su lugar, comience a usarlo en el lado que desea que sea transparente. Asegúrate de cubrir todo el borde con tu pincel para que luego se vuelva transparente.

CTRL (Windows) o Comando (Mac) + Seleccionar nueva capa

Una vez hecho esto, puede presionar CTRL (para Windows) o Comando (para Mac) en su teclado y hacer clic en la Capa 1 al mismo tiempo. Verás que Photoshop seleccionará todo lo que hayas agregado a esa capa, que es, en este caso, el borde con forma.

Hacer invisible la capa nueva

A continuación, haga invisible la Capa 1 quitando el ojo como se indica en la pantalla de impresión a continuación.

Seleccionar imagen y eliminar nueva capa

Luego, haga clic en la capa que contiene su imagen y presione el botón Eliminar en su teclado. Una vez que hagas eso, verás que el borde se volverá transparente.

Seleccione la herramienta Marco rectangular y haga clic en la imagen

Haga clic en la herramienta Marco rectangular y presione en algún lugar al azar en la imagen.

Guardar imagen como PNG

Por último, deberá guardar la imagen como PNG para poder usarla en su sitio web.

Agregar fondos a Divi

Una vez que crea las diferentes imágenes que desea usar dentro de su sitio web Divi (utilizando la técnica de Photoshop anterior), el resto es sencillo. Las imágenes que ha creado sirven como fondo de una sección en particular. Solo le mostraremos cómo construir la sección de héroe de nuestro ejemplo, ya que el mismo método se aplica también a las diferentes secciones.

Agregar nueva sección estándar

Agregue una nueva página, cambie a Visual Builder y agregue una nueva sección estándar a esa página.

Cargar imagen de fondo

Una vez que haya colocado todos los módulos que desea que aparezcan en la sección de héroe, puede continuar y agregar la imagen que creó en la parte anterior de esta publicación.

Agregar color de fondo

Una vez hecho esto, puede decidir qué color aparecerá en la parte transparente de su imagen. En este ejemplo, usamos '#dddddd' como color de fondo. Inmediatamente puede ver que el color aparecerá justo dentro de la parte transparente de la imagen.

Asegúrese de que haya suficiente relleno

Dependiendo de la cantidad de módulos y el tamaño de su borde transparente que haya usado en su sección de héroe, es posible que deba agregar un relleno personalizado. Juegue con los diferentes valores de relleno de sección y vea cuál le da el mejor resultado.

Agregar el mismo color de fondo a la siguiente sección

Para asegurarse de que las diferentes secciones se combinen bien entre sí, use el mismo color de fondo que usó en su sección de héroe dentro de su próxima sección también. Eso no significa necesariamente que tenga que usar un color de fondo de un solo color para su próxima sección, puede usar un fondo degradado y siempre que los colores de ambas secciones se mezclen maravillosamente.

Ejemplo

Como se mencionó anteriormente, puede crear tantos bordes de imagen como desee y usarlos de manera creativa en todo su sitio web. Para darle una idea, hemos creado la siguiente vista previa de ejemplo:

Pensamientos finales

En esta publicación, le mostramos cómo puede utilizar fácilmente las transiciones de sección de forma irregular. Al utilizar este método, básicamente puede crear cualquier tipo de transición de sección que desee. Además de mostrarte cómo crear estas formas irregulares con unos pocos pasos en Photoshop, también te mostramos cómo puedes hacer que funcione dentro de Divi Builder. Si tiene alguna pregunta o sugerencia; ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!

¡Asegúrese de suscribirse a nuestro boletín informativo por correo electrónico y al canal de YouTube para que nunca se pierda un gran anuncio, un consejo útil o un obsequio de Divi!