Divi y su función de carga de archivos de arrastrar y soltar pueden ser una herramienta maravillosa para aumentar la productividad como diseñador web. En este tutorial, lo guiaré a través de 6 formas en que puede usar la función de arrastrar y soltar para mejorar su flujo de trabajo de diseño Divi. También le daré algunos consejos útiles, ejemplos y fragmentos de código de bonificación en el camino. En todo caso, siempre es divertido arrastrar y soltar archivos solo para ver qué sucede.
¡Empecemos!
La función de carga de archivos de arrastrar y soltar es una manera fácil de agregar contenido a su página cuando usa Divi Builder. Como sugiere el nombre, puede arrastrar y soltar archivos en su página para agregar contenido sin el proceso normal de configurar su sección, fila y módulo de antemano. Y Divi colocará el contenido de manera diferente según el tipo de archivo. Por ejemplo, los archivos txt se agregarán a los módulos de texto, los archivos html se agregarán a los módulos de código y los archivos css se agregarán como CSS personalizado a su página.
Tipos de archivos admitidos y su comportamiento de arrastrar y soltar
Aquí hay una lista de todos los tipos de archivos compatibles actualmente con la función Arrastrar y soltar. Esto puede resultar útil al pensar en formas en las que puede aprovechar la característica en su proceso de diseño. También agregué una breve descripción para ayudarlo a comprender lo que sucederá al arrastrar estos tipos de archivos.
Archivos de imagen
- gif
- jpeg
- jpg
- png
Al colocar un solo archivo de imagen, Divi creará una nueva sección y una fila de una columna y luego agregará un módulo de imagen con su imagen ya cargada en el módulo.
Al colocar varios archivos de imagen a la vez, Divi creará la misma estructura (nueva sección y fila) pero agregará sus imágenes a un módulo de galería.
Archivos de texto
- TXT
Al colocar un archivo txt, se agregará el texto a un nuevo módulo de texto dentro de una nueva sección y fila.
Archivos de fuentes
- fuera de
- ttf
Al colocar un archivo de fuente, se iniciará el modal emergente Carga de fuente con su nombre de fuente y la fuente ya cargada. Todo lo que necesita hacer es confirmar que desea incluir todos los pesos de fuente admitidos antes de hacer clic en el botón de carga.
Archivos de video
- m4v
- mover
- webm
- wmv
- mp4
Al colocar uno o más archivos de video, se agregará cada video a un nuevo módulo de video dentro de una nueva sección y fila.
Archivos de sonido
- mp3
- onda
Al colocar uno o más archivos de audio, se agregará cada archivo de audio a un nuevo módulo de audio dentro de una nueva sección y fila.
Archivos web
- json
- html
- CSS
El archivo json es para cualquier diseño de página que haya exportado. Al arrastrar el archivo json, se cargará automáticamente el diseño de página en la página.
Arrastrar un archivo html agregará el html a un nuevo módulo de código dentro de una nueva sección y fila.
Arrastrar un archivo CSS agregará automáticamente el código css al CSS personalizado para su página, que se puede encontrar en la pestaña avanzada en la configuración de su página.
En general, el proceso es intuitivo y tiene grandes posibilidades para mejorar el flujo de trabajo. Veamos algunas de las formas en que puede usar la función.
#1 Arrastre fragmentos de CSS personalizados a su página según sea necesario
La mayoría de los usuarios de Divi aman Divi específicamente porque no tienen que usar CSS personalizado. Es lo que hace que Divi sea tan genial. Sin embargo, cuando se trata de la personalización del tema de WordPress , el CSS personalizado (incluso dentro de Divi) sigue siendo un activo valioso.
Como cualquier buen desarrollador web, debe guardar sus fragmentos de CSS en el camino para que pueda acceder a ellos fácilmente para proyectos futuros. Esto no solo lo hará más competente en la creación de sitios web, sino que también le permitirá aprovechar la función de arrastrar y soltar de Divi.
Por ejemplo, supongamos que tiene un fragmento de CSS para ocultar la barra de pie de página inferior en su página Divi. Si guarda ese fragmento como un archivo css con el título «Ocultar pie de página inferior», puede tomar ese archivo y arrastrarlo a su página para obtener resultados instantáneos.
Divi organiza automáticamente sus fragmentos con cada gota
Con cada archivo css que arrastre a su página, Divi extraerá el CSS y lo agregará a su página. Puede ver este css personalizado en cualquier momento en la pestaña avanzada de la configuración de su página.
También notará que Divi organizará de manera inteligente su fragmento css envolviéndolo con comentarios. Si no lo sabe, los comentarios se usan dentro del código para identificar y/o describir fácilmente ciertos bloques de código. Antes de su fragmento de CSS, Divi inserta un comentario con el texto «Comenzar» seguido del título de su archivo CSS, «Ocultar pie de página inferior». Después del fragmento, Divi inserta otro comentario con el texto «Fin» seguido del título del archivo.
Aquí hay un ejemplo de cómo se vería un fragmento en la configuración de la página después de arrastrar el archivo CSS «Ocultar pie de página inferior».
|
01
02
03
04
05
|
/* BEGIN: Hide Bottom Footer */#main-footer { display: none;}/* END: Hide Bottom Footer */ |
Para aquellos de ustedes que no saben cómo crear su propio css, pueden confiar en esos tutoriales útiles que hay en la web que se los proporcionan. Eso es genial. todos lo hacemos Pero si desea aprovechar la función de arrastrar y soltar, es posible que desee comenzar a guardar esos fragmentos como archivos individuales y nombrarlos en consecuencia. De esa manera, cada fragmento es solo un arrastrar y soltar.
Dos ejemplos de fragmentos de CSS que puede usar para la animación Hover
Con CSS, las posibilidades son casi infinitas. Pero pensé en darle un par de ejemplos de fragmentos de css que puede guardar en su biblioteca que agregarán animación a su sitio.
Guarde el siguiente fragmento de css como un archivo «.css» (nómbrelo algo así como «Iconos de escala al pasar el mouse»).
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
.et-pb-icon { -webkit-transition: all .2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}.et-pb-icon:hover {-moz-transform: scale(1.2);-webkit-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);} |
Luego guarde este siguiente fragmento como otro archivo «.css» con el nombre «Blurb Shadow on Hover».
|
01
02
03
04
05
06
07
08
|
.et_pb_blurb:hover { -moz-box-shadow: 0px 0px 20px #ccc; -webkit-box-shadow: 0px 0px 20px #ccc; box-shadow: 0px 0px 20px #ccc; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s;} |
Una vez que tenga ambos archivos guardados en su computadora. Seleccione ambos archivos y arrástrelos a la página. Por supuesto, puede arrastrar solo uno si lo desea, pero pensé en mostrarle que también funciona con varios archivos. Esto hará que todos los módulos publicitarios tengan un efecto emergente inmediatamente al agregar una sombra de cuadro al pasar el mouse. También hará que todos los íconos publicitarios se escalen (se hagan más grandes) cuando pases el mouse sobre ellos.
Cosas bastante geniales.
Y puede imaginar lo útil que será una vez que tenga un arsenal de estos archivos css a su disposición.
#2 Arrastra y suelta fuentes personalizadas a tu página y reemplaza rápidamente las fuentes actuales
Si crea sitios web, está familiarizado con la necesidad de tener una amplia selección de fuentes disponibles. Divi tiene cientos de fuentes integradas en Divi Builder, lo que facilita mucho las cosas. Y siempre puede usar la opción para cargar nuevas fuentes desde Divi Builder. Pero con la nueva funcionalidad de arrastrar y soltar de Divi, agregar nuevas fuentes a su sitio es ridículamente simple.
Supongamos que está utilizando uno de los diseños prefabricados pero le gustaría probar una nueva fuente que Divi aún no tiene disponible. Esto es lo fácil que es cambiar la fuente:
Asegúrese de que el generador visual esté activado y de que haya cargado su diseño prefabricado. Luego, todo lo que tiene que hacer es arrastrar su archivo de fuente desde su computadora a la página/constructor visual dentro de la ventana del navegador. Luego haga clic en el botón cargar.
Arrastrar y soltar con Buscar y reemplazar es un poderoso combo
Para ir un paso más allá, puede usar la función Buscar y reemplazar de Divi para reemplazar la fuente utilizada en los encabezados de diseño prefabricados con la nueva fuente que acaba de colocar.
Con el diseño de la página de destino de la agencia creativa, abra el módulo de texto que contiene el texto del encabezado en la sección superior. Luego haga clic derecho en la opción de fuente de título. En el menú contextual, seleccione Buscar y reemplazar.
En la ventana emergente Buscar y reemplazar, seleccione su nueva fuente en la opción «Reemplazar con» y haga clic en el botón azul Reemplazar.
¡Ahora todos sus encabezados tienen la nueva fuente en su lugar!
#3 Arrastra y suelta varias imágenes para crear galerías de fotos instantáneas con títulos
La funcionalidad de arrastrar y soltar de Divi le permite arrastrar imágenes a su sitio con facilidad. Esto realmente es útil cuando se crean sitios web con muchas imágenes. Y dado que la mayoría de las personas guardan imágenes guardadas en una carpeta en su computadora, es extremadamente conveniente poder seleccionar esas imágenes y arrastrarlas a su página.
Así es como funciona al arrastrar y soltar en una sola imagen.
Cuando arrastra una sola imagen al generador visual, automáticamente hará lo siguiente:
1. Creará una nueva sección regular con una fila de una columna
2. Agregará un módulo de imagen a la fila
3. Insertará la imagen en ese módulo de imagen
4 Abra la configuración de la imagen para su conveniencia para comenzar el proceso de edición.
Así es como funciona cuando se arrastran varias imágenes.
Cuando arrastra varias imágenes a su página de creación visual, Divi automáticamente hará lo siguiente:
1. Cree una nueva sección regular con una fila de una columna
2. Agregue un módulo de galería a la fila
3. Inserte las nuevas imágenes en el módulo de galería
4. Abra la configuración del módulo de galería para ayudar a iniciar el proceso de edición.
Prepare sus imágenes antes de arrastrarlas a su página
Para asegurarse de que su galería de imágenes se vea bien, es útil realizar algunas optimizaciones de antemano.
Tamaño de la imagen
En primer lugar, asegúrese de que todas las imágenes tengan el mismo tamaño. Sugeriría usar imágenes de alrededor de 1500px por 800px. Esto proporciona un buen tamaño para las imágenes cuando se implementan en una caja de luz. Además, Divi utilizará una versión más pequeña de la imagen para la miniatura en la galería. Mientras estamos en el tema, podría ser útil revisar algunos tamaños de imágenes recomendados para los módulos Divi . Después de eso, puede reducir un poco más el tamaño del archivo arrastrándolo a TinyPNG o usar su editor de fotos para guardarlo según las especificaciones web.
Títulos de imágenes
De forma predeterminada, Divi mostrará el título de su imagen debajo de cada miniatura en su galería. Entonces, desde entonces (si desea que se muestre este título), le dé a sus imágenes el título correcto antes de arrastrarlas.
#4 Arrastre archivos MP3 a su página con un archivo CSS para impulsar el diseño
Para los podcasters, esto definitivamente podría aumentar la productividad. Dado que la función Arrastrar y soltar de Divi es compatible con los formatos de archivo mp3 y wav, puede colocarlos fácilmente en el generador para iniciar el proceso de construcción.
Cuando arrastras un solo archivo mp3 o wav a la página, Divi automáticamente hará lo siguiente:
1. Cree una nueva sección regular con una fila de una columna
2. Agregue un nuevo módulo de audio con su archivo de audio adjunto
3. Abra el modal de configuración de audio para comenzar el proceso de edición.
Cuando arrastra varios archivos mp3 o wav a la página, Divi hará lo mismo que cuando arrastra un solo archivo de audio, excepto que lo hará varias veces. Entonces, si arrastra 4 archivos de audio, Divi creará 4 secciones diferentes con una fila de una columna que contiene el módulo de audio con el archivo de audio adjunto. El modal de configuración de audio también aparecerá para comenzar a editar el último módulo de audio agregado a la página.
Arrastre un archivo CSS para diseñar instantáneamente todos los módulos de audio a la vez
Si está acostumbrado a usar CSS personalizado para agregar estilo adicional a sus páginas Divi, le sugiero que guarde esos fragmentos en un archivo css para usar en futuras compilaciones (aunque estoy seguro de que ya lo sabía). Entonces, si tiene un fragmento de css para diseñar módulos de audio de cierta manera, guarde ese css en un archivo css separado. Luego, puede simplemente arrastrar ese archivo css a la página para diseñar instantáneamente todos sus módulos de audio.
El CSS que utilicé en la ilustración anterior es un ejemplo rápido, pero si quieres probarlo, copia el siguiente CSS personalizado:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
.et_pb_audio_module_content h2 {position: absolute; top: -40px; background: #c5310d; padding: 0.6em; left: 50px;}.et_audio_module_meta { position: absolute; bottom: -45px; right: 30px; background: #c5310d; padding: 1em !important;}.et_pb_audio_module {background: #888 !important;}.et_audio_container .mejs-playpause-button button:before, .et_audio_container .mejs-volume-button button:before { color: #c5310d;}.mejs-time-handle-content { border: 4px solid #c5310d; height: 14px; left: -7px; top: -6px; width: 14px; background: #c5310d;}.et_audio_container .mejs-controls .mejs-time-rail .mejs-time-total{background: #222;} |
Luego péguelo en un editor de texto y guárdelo con un formato de archivo css (debe tener la extensión “.css”). Una vez que lo guardes en tu computadora. Arrástrelo al generador visual que contiene sus notas publicitarias de audio.
#5 Cree bloques de código reutilizables que se puedan arrastrar a su página para una implementación instantánea
La función de arrastrar y soltar de Divi admite archivos CSS y HTML (lo sentimos, no se permiten archivos javascript). Aunque para aquellos que saben lo que están haciendo, es posible que pueda agregar scripts en el archivo HTML que agregará esa funcionalidad de JavaScript para usted. Pero esto deja la oportunidad de combinar estos archivos para crear bloques de código útiles que puede arrastrar a una página para obtener resultados instantáneos.
Ejemplo 1: Arrastre y suelte los archivos Code Pen exportados a su página
Si eres un fanático de los codepens, es posible que ya estés preparado para algo de magia útil de arrastrar y soltar. Antes de que se emocione demasiado, debo advertirle que para crear archivos que afectarán instantáneamente su sitio al arrastrarlos, estará limitado a codepens que usen una combinación de html y css solamente.
Así es como este proceso puede funcionar para usted.
Vaya a la página que presenta el Codepen que desea exportar y haga clic en el botón exportar en la parte inferior derecha de la página.
Extrae los archivos en tu computadora y localiza el archivo html y el archivo css. Use un editor de texto para ver su archivo html y elimine todas las etiquetas que no necesita (tipo de documento, html, encabezado, cuerpo) para que todo lo que quede sea el html que ve en el cuadro html del codepen . Luego guarde el archivo.
De hecho, para el archivo HTML, es mejor copiar el HTML directamente desde el lápiz y crear su propio archivo html.
Ahora busque el archivo CSS (debe estar ubicado dentro de la carpeta CSS). Asegúrese de utilizar el archivo CSS y no el archivo SCSS (este tipo de archivo no es compatible con la función de arrastrar y soltar).
Ahora arrastre ambos archivos a la página con su generador visual activo.
Esto es lo que sucede automáticamente:
1. Divi crea una nueva sección con una fila de una columna.
2. Divi agrega un módulo de código a la fila con tu html como contenido.
3. Divi agrega el CSS personalizado al bloque CSS personalizado de la configuración de su página.
Si recibe un error, eso significa que no tiene el tipo de archivo correcto o que el contenido del archivo tiene un código que no es compatible. Por ejemplo, si el archivo html tiene las etiquetas doctype y html, el archivo no funcionará. Además, si su archivo css tiene código SCSS, también puede generar un error.
Por supuesto, este no es el proceso más sencillo inicialmente. Tendrás que organizar un poco tu código y tus archivos. Entonces, si no está familiarizado con html y CSS, esto puede ser una lucha. Pero el resultado final podría resultar muy valioso en el sentido de que podrá abastecerse de algunos bloques de código reutilizables que solo se pueden arrastrar y soltar.
También debo señalar que debe estar familiarizado con las licencias de Codepen antes de copiar un código que no es suyo.
Ejemplo 2: arrastre y suelte instancias aisladas de Font Awesome en su página
Si está acostumbrado a usar Font Awesome en su sitio Divi, puede beneficiarse de tener a mano algunos archivos «listos para arrastrar» que le permitirán insertar instancias de Font Awesome en su página. En realidad, esto se puede hacer con un solo archivo HTML.
Así es como este proceso puede funcionar para usted.
Obtenga el script Font Awesome de su sitio web . Asegúrate de que sea la versión SVG + JS. Luego copie el script en su portapapeles.
Luego crea un nuevo archivo de texto y pega el código. Debajo del script, agregue el html y el código de fuente que desea implementar en su página.
Aquí hay un ejemplo de un código html «listo para arrastrar» con una lista que usa íconos impresionantes de fuentes:
|
01
02
03
04
05
06
07
08
09
10
11
|
<script defer src="https://use.fontawesome.com/releases/v5.2.0/js/all.js" integrity="sha384-4oV5EgaV02iISL2ban6c/RmotsABqE4yZxZLcYMAdG7FAPsyHYAPpywE9PJo+Khy" crossorigin="anonymous"></script><h2>Header</h2><ul class="fa-ul" style="list-style:none; font-size: 18px"><li><i style="color: Tomato; " class="fa-li fas fa-address-book"></i>Your content goes here. </li><li><i style="color: Dodgerblue; " class="fa-li fas fa-address-book"></i>Your content goes here. </li><li><i style="color: Mediumslateblue; " class="fa-li fas fa-address-book"></i>Your content goes here. </li><li><i style="color: Tomato; " class="fa-li fas fa-address-book"></i>Your content goes here. </li><li><i style="color: Dodgerblue; " class="fa-li fas fa-address-book"></i>Your content goes here. </li><li><i style="color: Mediumslateblue; " class="fa-li fas fa-address-book"></i>Your content goes here. </li></ul> |
Asegúrese de guardar su archivo como un archivo html. Luego arrástrelo a su página con el generador visual.
Divi agregará automáticamente el html a un módulo de código para usted y ahora tiene una lista impresionante de fuentes lista para editar en su página.
Probablemente esté deseando que la lista se coloque en un módulo de texto para que pueda usar la configuración de texto del contenido. Pero dado que esto no sucede automáticamente, es posible que desee limitar su archivo html para incluir el script. Y luego pegue su html en un módulo de texto. Pero para aquellos de ustedes que tienen un archivo css a mano para manejar el diseño, es bueno poder arrastrarlo con su archivo html.
# 6 Cree una biblioteca de diseños de página Divi (archivos json) en su disco duro para arrastrar a sus páginas para un desarrollo más rápido
Con Divi, puede guardar y exportar fácilmente diseños de página completos que haya diseñado. Hay dos beneficios realmente grandes para esta funcionalidad. El primer beneficio es tener la capacidad de guardar diseños de página dentro de la Biblioteca Divi para ayudar a acelerar el proceso de diseño al crear un sitio web. El segundo beneficio es tener la capacidad de exportar diseños de página a su propia computadora. Esto le permite acumular una valiosa colección de diseños de página (archivos json) para iniciar su próximo proyecto.
Y la nueva función Arrastrar y soltar le permite arrastrar rápidamente esos diseños guardados al generador visual para un desarrollo aún más rápido.
Así es como este proceso podría funcionar para usted.
Supongamos que desea guardar solo la sección de encabezado del diseño de la página de destino de la agencia de diseño (este podría ser cualquier diseño que desee, pero para este ejemplo, estoy usando un diseño prefabricado). Una vez que cargue el diseño en su página, elimine todas las secciones del diseño excepto la sección del encabezado superior. Luego exportaría el diseño a su disco duro.
Para exportar un diseño de página con el generador visual, abra el menú de configuración y haga clic en el icono de portabilidad. Luego, en la ventana emergente de portabilidad, ingrese un nombre («Diseño de encabezado de agencia de diseño») y haga clic en el botón Exportar diseño de Divi Builder.
Esto guardará el diseño en su computadora como un archivo json.
Ahora, si elimino la sección del encabezado en mi página para que mi página ahora esté vacía de cualquier sección, puedo agregar fácilmente ese encabezado a mi página arrastrando el archivo json a la página.
Cuando arrastro el archivo json, el modal de portabilidad aparece automáticamente para permitirme elegir la opción de reemplazar el contenido existente o crear una copia de seguridad de antemano. Como no necesito reemplazar ningún contenido, todo lo que tengo que hacer es hacer clic en el botón de importación y se carga instantáneamente en la página.
Esto puede no parecer tan impresionante, pero tiene la posibilidad de acelerar realmente el proceso de diseño. Si tuviera una gran colección de archivos json con diferentes diseños de página (cada uno con elementos específicos que me gustaran). Luego puedo usar esos archivos como bloques de construcción y arrastrarlos a la página uno por uno. Solo asegúrese de ser descriptivo en los títulos que les da al exportarlos.
Pensamientos finales
La función de arrastrar y soltar de Divi definitivamente puede ser una herramienta útil para impulsar su flujo de trabajo de diseño web. Existen algunas limitaciones que pueden causar cierta frustración al principio, pero esperamos que este artículo lo ayude a comprender cómo capitalizar esta función para crear una biblioteca personal de archivos arrastrables que aumentará su productividad en el diseño web.
Me encantaría escuchar sus propias ideas en los comentarios a continuación.
¡Salud!