Una de las mejores maneras de mejorar 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 forma 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 dentro de diferentes secciones. Es importante recordar que, según el tamaño del borde transparente, debe quedar suficiente espacio dentro de las secciones para adaptarse a los diferentes contenidos que intenta 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
Crear bordes transparentes con Photoshop
Puede lograr formas tan originales como desee con Photoshop. También puedes 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 hayas hecho eso, abre la imagen en la que te gustaría trabajar.
Haga doble clic en la imagen y cree una capa
Una vez que su imagen se cargue 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 encima de la capa que contiene su imagen.
Seleccionar pincel y tamaño
Mientras tiene activada la Capa 1, continúe y haga clic en el icono del pincel.
Una vez que lo haga, puede ajustar el tamaño y el patrón que se utiliza para el pincel según sus preferencias. Hay toneladas de pinceles de Photoshop gratuitos en Internet, así que dependiendo del tipo de sitio web que estés creando, elige 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 todo se vuelva transparente después.
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 nueva capa
A continuación, haga que la Capa 1 sea invisible 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 (usando 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 principal de nuestro ejemplo, ya que el mismo método también se aplica 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.
Subir imagen de fondo
Una vez que haya colocado todos los módulos que desea que aparezcan en la sección principal, puede continuar y agregar la imagen que creó en la parte anterior de esta publicación.
Agregar color de fondo
Una vez que haya hecho eso, puede decidir qué color aparecerá en la parte transparente de su imagen. En este ejemplo, hemos usado ‘#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 siempre que los colores de ambas secciones se combinen 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 usar este método, básicamente puede crear cualquier tipo de transición de sección que desee. Además de mostrarle cómo crear estas formas irregulares con unos pocos pasos en Photoshop, también le mostramos cómo puede hacer que funcione dentro de Divi Builder. Si tiene alguna pregunta o sugerencia; ¡Asegúrate de dejar un comentario en la sección de comentarios a continuación!
¡Asegúrate de suscribirte a nuestro boletín de correo electrónico y canal de YouTube para que nunca te pierdas un gran anuncio, un consejo útil o un obsequio de Divi!