6 formas en las que puede utilizar la función de carga de archivos de Divi para arrastrar y soltar para aumentar la productividad

Publicado: 2018-08-22

La función de carga de archivos de arrastrar y soltar de Divi puede 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 te daré algunos consejos útiles, ejemplos y fragmentos de código de bonificación a lo largo del camino. En todo caso, siempre es divertido arrastrar y soltar archivos solo para ver qué sucede.

¡Empecemos!

Una breve descripción de la función de carga de archivos de arrastrar y soltar de Divi

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

A continuación, se muestra una lista de todos los tipos de archivos admitidos actualmente por la función Arrastrar y soltar. Esto puede resultar útil a la hora de pensar en formas en las que puede aprovechar la función 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

Colocar un archivo txt agregará el texto a un nuevo módulo de texto dentro de una nueva sección y fila.

Archivos de fuentes

Al colocar un archivo de fuente, se iniciará el modo emergente de carga de fuente con el nombre de la fuente y la fuente ya cargados. 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
mov
webm
wmv
mp4

Al colocar uno o más archivos de video, cada video se agregará a un nuevo módulo de video dentro de una nueva sección y fila.

Archivos de sonido

Al colocar uno o más archivos de audio, cada archivo de audio se agregará 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.

Al arrastrar un archivo CSS, se 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 de mejorar el flujo de trabajo. Veamos algunas de las formas en que puede usar la función.

# 1 Arrastre fragmentos CSS personalizados a su página según sea necesario

La mayoría de los usuarios de Divi aman a Divi específicamente porque no tienen que usar CSS personalizado. Es lo que hace a Divi tan grandioso. Sin embargo, cuando se trata de la personalización del tema de WordPress, CSS personalizado (incluso dentro de Divi) sigue siendo un activo valioso.

Como cualquier buen desarrollador web, debería guardar sus fragmentos de CSS a lo largo del camino para poder acceder fácilmente a ellos 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á inteligentemente su fragmento css envolviéndolo con comentarios. Si no lo sabe, los comentarios se utilizan 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.

A continuación, se muestra 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".

/* 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 los útiles tutoriales que se encuentran en la web y 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 está a solo arrastrar y soltar.

Dos ejemplos de fragmentos de CSS que puede utilizar para la animación de desplazamiento

Con CSS, las posibilidades son casi infinitas. Pero pensé en darte un par de ejemplos de fragmentos de CSS que puedes guardar en tu biblioteca y que agregarán animación a tu sitio.

Guarde el siguiente fragmento de CSS como un archivo ".css" (asígnele el nombre "Iconos de escala al pasar el mouse").

.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 el siguiente fragmento como otro archivo ".css" con el nombre "Blurb Shadow on Hover".

.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é que le mostraría que también funciona con varios archivos. Esto hará que todos los módulos de propaganda tengan un efecto emergente al agregar una sombra de cuadro al pasar el mouse. También hará que todos los íconos de propaganda se escalen (se agranden) cuando coloque el cursor sobre ellos.

Cosas bastante interesantes.

Y puede imaginar lo útil que será una vez que tenga un arsenal de estos archivos css a su disposición.

# 2 Arrastre y suelte fuentes personalizadas a su página y reemplace 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. Así de fácil es cambiar la fuente:

Asegúrese de que el constructor visual esté activado y de que haya cargado su diseño prediseñado. Luego, todo lo que tiene que hacer es arrastrar su archivo de fuente desde su computadora al generador de páginas / visual dentro de la ventana del navegador. Luego haga clic en el botón de carga.

Arrastrar y soltar con Buscar y reemplazar es una combinación poderosa

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 encabezado. En el menú del botón derecho, 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 es realmente útil cuando se crean sitios web con muchas imágenes. Y dado que la mayoría de las personas guardan las 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 constructor visual, automáticamente hará lo siguiente:
1. Cree una nueva sección regular con una fila de una columna.
2. Agrega un módulo de imagen a la fila.
3. Inserta la imagen en ese módulo de imagen.
4. Abra la configuración de la imagen para su comodidad para iniciar el proceso de edición.

Así es como funciona al arrastrar 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. Agrega un módulo de galería a la fila.
3. Inserta las nuevas imágenes en el módulo Galería.
4. Abra la configuración del Módulo de galería para ayudar a impulsar 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 sus imágenes sean del mismo tamaño. Sugeriría usar imágenes de alrededor de 1500 px por 800 px. Esto proporciona un buen tamaño para las imágenes cuando se implementan en una caja de luz. Además, Divi usará 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 el tamaño del archivo un poco más arrastrándolo a TinyPNG o use su editor de fotos para guardarlo para 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. Por lo tanto, hace que desde (si desea que se muestre este título), para dar a sus imágenes el título correcto antes de arrastrarlas.

# 4 Arrastre archivos MP3 a su página con un archivo CSS para iniciar el diseño

Para los podcasters, esto definitivamente podría impulsar la productividad. Dado que la función Drag & Drop de Divi admite formatos de archivo mp3 y wav, puede colocarlos fácilmente en el constructor para iniciar el proceso de construcción.

Cuando arrastra 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. Agrega un nuevo módulo de audio con tu archivo de audio adjunto.
3. Abra el modal de configuración automática para comenzar el proceso de edición.

Cuando arrastra varios archivos mp3 o wav a la página, Divi hará lo mismo que hace al arrastrar un solo archivo de audio, excepto que lo haría 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 usarlo 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, guárdelo 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 desea probarlo, copie el siguiente CSS personalizado:

.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 guarde en su computadora. Arrástrelo al constructor visual que contiene sus anuncios publicitarios de audio.

# 5 Cree bloques de código reutilizables que se pueden arrastrar a su página para una implementación instantánea

La función Drag & Drop de Divi admite archivos CSS y HTML (lo siento, 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án 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 archivos de lápiz de código exportados a su página

Si eres fanático de los codepens, es posible que ya estés configurado para una práctica magia de arrastrar y soltar. Antes de que se emocione demasiado, debo advertirle que para crear archivos que afectarán instantáneamente a su sitio cuando los arrastre, estará limitado a codepens que usan 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.

Extraiga los archivos en su computadora y localice 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 (doctype, 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 que simplemente copie el HTML directamente desde el lápiz y cree 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 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 agregue un módulo de código a la fila con su html como contenido.
3. Divi agrega el CSS personalizado al bloque CSS personalizado de 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 al principio. Tendrás que organizar un poco tu código y archivos. Entonces, si no está familiarizado con html y CSS, esto puede ser una lucha. Pero el resultado final podría resultar muy valioso, ya que podrá abastecerse de algunos bloques de código reutilizables que están a solo 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 sea el 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.

Coge el script Font Awesome de su sitio web. Asegúrese de que sea la versión SVG + JS. Luego copie el script en su portapapeles.

Luego cree un nuevo archivo de texto y pegue el código. Debajo del script, agregue el código html y 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 increíbles de fuentes:

<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 constructor visual.

Divi agregará automáticamente el html a un módulo de código para usted y ahora tiene una lista increíble de fuentes lista para editar para 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áginas 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 grandes beneficios de 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 de 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 constructor 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 para 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 Importar y se carga instantáneamente en la página.

Puede que esto no parezca 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 gustaron). 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 Drag & Drop 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 es de esperar 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!