Usar la función de arrastrar y soltar para subir archivos en Divi

Con la función de subir archivos mediante arrastrar y soltar de Divi, los usuarios pueden soltar archivos de imagen, documentos de texto, archivos web y más.

Con la función de subir archivos mediante arrastrar y soltar de Divi, los usuarios pueden soltar directamente archivos de imagen, documentos de texto, archivos web y más en cualquier página de Divi. Vamos a profundizar en cómo usar este sistema y repasar algunas buenas prácticas para maximizar tu experiencia con Divi.

Resumen de la función de subir archivos arrastrando y soltando en Divi

Crear páginas web es fácil usando la función de arrastrar y soltar de Divi.

Puedes subir archivos de forma individual o agregar varios archivos a la vez. Una vez que el archivo se suelta dentro del constructor, se convierte instantáneamente en módulos.

Esto ahorra mucho tiempo y es una experiencia revolucionaria para quienes buscan construir sitios web de manera más eficiente.

Esto es lo que sucede cuando arrastras y sueltas un archivo en el Divi Builder mientras editas tu página:

• Divi crea una nueva sección regular con una fila de una columna al final del diseño de tu página.

• Divi crea un nuevo módulo y lo llena con el contenido de tu archivo según el tipo de archivo.

• Divi añade el nuevo módulo dentro de la fila de una columna de la sección creada al final de la página.

• Para mayor comodidad, el modal de configuración del módulo aparecerá automáticamente para que puedas empezar a personalizar el diseño de tu contenido.
  

​

Tipos de archivos compatibles con la función de subir archivos arrastrando y soltando

La función de arrastrar y soltar soporta los tipos de archivos que los desarrolladores usan para agregar contenido y diseño a sus páginas.

Aquí tienes la lista de todos los tipos de archivos que actualmente soporta la función de arrastrar y soltar y que puedes usar:

• Archivos de imagen (jpg, png, tif, gif)

• Archivos de texto (txt)

• Archivos de video (m4v, mov, webm, wmv, mp4)

• Archivos de audio (mp3, wav)

• Archivos web (JSON, html, css)

• Archivos de fuentes (otf, ttf)

Ahora que entendemos más sobre la función de arrastrar y soltar, exploremos cómo funciona esta función conveniente para cada tipo de archivo.

Funcionalidad de arrastrar y soltar para cada tipo de archivo

Subida de archivos de imagen

La funcionalidad de arrastrar y soltar de Divi agiliza el proceso de diseño al añadir nuevas imágenes a tu página usando el Divi Builder.

Cuando usas la función de arrastrar y soltar para imágenes, hay cuatro formatos de imagen compatibles:

• jpg

• png

• tif

• gif

Funcionalidad de arrastrar y soltar para imagen individual

Si quieres añadir una sola imagen desde tu computadora a tu página web usando el Divi Builder, arrastra la imagen desde tu computadora hasta la pantalla del navegador con el Divi Builder abierto.

Divi subirá automáticamente la imagen a tu galería de medios e insertará la imagen en un Módulo de Imagen listo para que lo uses.

Para mayor comodidad, el modal de configuración del módulo de Imagen se abrirá automáticamente para que puedas cambiar tu nueva imagen.

Funcionalidad de arrastrar y soltar para múltiples imágenes

Si quieres añadir varias imágenes desde tu computadora a tu página con Divi Builder, selecciona todas las imágenes que quieras usar y arrástralas al Divi Builder.

Divi subirá automáticamente todas las imágenes, las convertirá en un módulo de Galería y creará una nueva sección mostrando tu nueva galería de imágenes.

Puedes renombrar tus archivos antes de arrastrarlos a la página para que muestren títulos personalizados.

Subida de archivos de texto

Los archivos de texto (.txt) se importan fácilmente en Divi. Para añadir un archivo .txt, arrástralo al Visual Builder. Divi añadirá el contenido del archivo en un módulo de Texto dentro de una nueva sección.

Subida de archivos web: Añadir layouts Divi, código HTML o CSS

La función de subir archivos arrastrando y soltando puede importar varios tipos de archivos web. Para archivos web, los formatos soportados son:

• .json

• .css

• .html

Subida de archivos JSON: Importar layouts Divi fácilmente

La extensión .json se usa para arrastrar layouts completos de página o secciones a cualquier página Divi.

Al arrastrar un archivo .json, el contenido se carga automáticamente en la página. Puedes sobrescribir el contenido de una página existente o empezar desde cero con una página en blanco.

Subidas de Archivos CSS: Añade Estilos CSS Personalizados Rápidamente a las Páginas con Arrastrar y Soltar

Arrastrar archivos CSS al Visual Builder añade CSS personalizado a tu página.

Una vez importado, se inserta en la sección de CSS personalizado dentro de la configuración de la página. Es importante notar que al agregar CSS personalizado, debes asegurarte de añadir una clase al módulo o elemento al que deseas aplicar el CSS.

El nombre que le des al archivo CSS se usará para comentar el bloque de CSS, lo cual es una función genial.

Divi organiza el código CSS con cada carga

Cuando arrastras fragmentos de CSS a tu página, se agregan automáticamente al CSS de la página.

Puedes verlo en cualquier momento desde Configuración de la Página → pestaña Avanzado.

Divi organizará tu fragmento de CSS envolviéndolo con comentarios. Los comentarios se usan dentro del código CSS para identificar o describir los bloques de código.

Divi añade el comentario antes de que empiece tu código. Por ejemplo, si tu página tiene un fragmento de CSS para un módulo de audio, cuando lo arrastras al builder, se aplica a tu página y añade automáticamente un comentario de inicio y fin al CSS.

Subidas de Archivos HTML: Añade Código HTML Personalizado a una Página con Arrastrar y Soltar

Los usuarios de Divi pueden arrastrar y soltar archivos HTML directamente en sus páginas. El código HTML se añade dentro de un módulo de código en una nueva sección. Añadir archivos HTML a tu página puede ser útil para incorporar nuevos elementos de diseño web.

Subidas de Archivos de Fuente: Añade Fuentes Personalizadas a Divi con Arrastrar y Soltar

Importar nuevas fuentes personalizadas a tu sitio Divi es fácil gracias a la función de arrastrar y soltar archivos.

Al editar una página, puedes arrastrar el archivo de la fuente desde tu computadora hacia el Divi Builder. Hay dos tipos de archivos de fuentes soportados en este sistema de carga por arrastrar y soltar:

1. .otf
2. .ttf

Arrastra el archivo de fuente a tu página con el Divi Builder activo para importar la fuente. Divi abrirá el modal de subida de fuente con el nombre de la fuente ya presente. Asegúrate de confirmar los pesos de la fuente antes de hacer clic en el botón de subir.

Subidas de Archivos de Video: Añade Videos a Tu Página con Arrastrar y Soltar
Usando la función de arrastrar y soltar para archivos de video, puedes añadir videos fácilmente a tus páginas utilizando el Divi Builder. La función soporta los siguientes formatos de archivo de video:

1. .mp4
   
2. .webm
   
3. .mov
   
4. .wmv
   
5. .m4v
   

Al soltar cualquiera de estos tipos de archivo de video en el constructor, se crea un nuevo módulo de Video en una nueva sección.

En segundos, tu video se agrega a la página y está listo para que lo diseñes usando el Divi Builder. Si arrastras múltiples archivos de video al mismo tiempo, se creará un módulo y una sección nueva para cada uno.

Subidas de Archivos de Audio: Convierte Archivos de Audio en Módulos de Audio con Arrastrar y Soltar

Agregar nuevos archivos de audio a tu página está a solo un arrastre y soltar de distancia con esta función. Actualmente, se soportan los siguientes formatos de archivo de audio:

1. .mp3
   
2. .wav
   

Cuando arrastras y sueltas un archivo de audio en el constructor, el archivo se convierte automáticamente en un nuevo Módulo de Audio en una nueva sección al final de la página.

Con una sola acción, tendrás tu nuevo archivo de audio incrustado en un reproductor de audio personalizable, que se puede diseñar completamente con las opciones de diseño integradas de Divi.

Puedes soltar uno o más archivos de audio al mismo tiempo.

Casos de Uso Ejemplares

Hay varias formas de beneficiarte de la función de subir archivos con arrastrar y soltar de Divi. Ya sea que quieras subir múltiples imágenes a la vez o combinar fragmentos de código para ahorrar tiempo, tiene muchos usos.

Arrastra y Suelta Múltiples Imágenes para Crear Galerías de Fotos con Títulos

La funcionalidad de arrastrar y soltar de Divi te permite arrastrar imágenes fácilmente a tu sitio. Esto es muy útil cuando construyes sitios web con muchas imágenes.

Y dado que la mayoría de las personas guardan imágenes en una carpeta en su computadora, es extremadamente conveniente seleccionar esas imágenes y arrastrarlas a tu página.

Combina Archivos y Fragmentos de CSS en Una Sola Acción

Si deseas hacer cambios de diseño en secciones de tu página o ampliar la funcionalidad de un módulo de Divi, puedes arrastrar y soltar tipos de archivo compatibles junto con archivos CSS para cargarlos todos de una vez.

Esta es una excelente manera de potenciar las increíbles capacidades de Divi con diseños y funcionalidades personalizadas. Esto permite a los desarrolladores agregar cualquier tipo de archivo compatible y combinaciones de CSS a Divi en una sola acción. Puede ser una forma fantástica de agregar galerías de imágenes personalizadas en cuadrícula, videos HTML avanzados, audio y más.

Consulta nuestro blog para ver algunos de nuestros increíbles tutoriales de CSS para agregar funciones a los módulos de Divi.

• CSS Básico Que Todo Usuario de WordPress Debe Conocer

• Cómo Diseñar Fondos de Texto con CSS en Divi Usando background-clip

• Cómo Crear un Diseño CSS Grid para Módulos de Divi

• Explorando Cómo Crear y Animar Formas CSS en Divi

• Cómo Crear Controles Personalizados de Video HTML5 para un Video en Divi

• Popular Articles

• Guía de Negocio para Resellers y Partners

  En esta Guía de Negocio vamos a analizar los 8 puntos más importantes a tener en cuenta si te estás planteando lanzar tu Propio Negocio de Apps: ¿Cuánto puedes ganar con un Negocio de Apps? Demo de Scoreapps: Cómo crear Apps y Monetizarlas ¿Qué ...

• Ver una Demo de Scoreapps para Resellers

  En este vídeo te explicamos el modelo de negocio, los tipos de Apps que puedes crear y las distintas herramientas que incluye Scoreapps en su Plan de Resellers: Y en este otro vídeo te enseñamos cómo funciona el software por dentro:

• Proporciona acceso a tus Aplicaciones

  Con el Plan Reseller o Plan Partner puedes otorgar fácilmente a tus clientes o colaboradores acceso a tus aplicaciones. Accede a tu Panel de Apps, y después accede a cualquier Aplicación: Una vez dentro del constructor de Apps, ve a Mi Cuenta - ...

• Cómo Crear una App de Tienda

  El comercio electrónico desde dispositivos móviles se disparó desde comienzos de 2020 debido a la Pandemia del Covid19 y sigue creciendo a tasas del 45% anual. Hoy en día, contar con una App de Tienda resulta imprescindible para cualquier negocio de ...

• Cómo diseñar la pantalla de inicio o portada de una App

  En el video que te mostramos a continuación te explicamos cómo diseñar la pantalla de inicio de una App:

• Related Articles

• Uso de las Opciones de Sombra de Caja en Divi

  Las opciones de sombra de caja en Divi te permiten darle a cualquier elemento de la página la ilusión de profundidad. Las sombras proyectadas son una forma creativa de dar vida a los elementos de diseño de tu sitio web. Pueden resaltar elementos e ...

• Cómo usar los formatos de publicaciones de blog en Divi

  Divi incluye soporte para formatos de publicación de video, audio, enlaces y citas. Personalizar el diseño de las publicaciones del blog es una excelente manera de hacer que tu contenido y página web se destaquen. La forma recomendada de hacerlo ...

• Uso de las Opciones de Tamaño en Divi

  Las Opciones de Tamaño de Divi facilitan el ajuste del tamaño de secciones, filas, columnas y módulos en Divi. Las Opciones de Tamaño de Divi hacen que ajustar el tamaño de secciones, filas, columnas y módulos sea sencillo. El tamaño es una parte ...

• Cómo usar el Editor de Imágenes de Divi IA

  Aprende a usar el Editor de Imágenes de Divi IA para crear y editar fácilmente imágenes impresionantes directamente dentro del Constructor de Divi. <br> Cómo usar el Editor de Imágenes de Divi IA Este artículo te guiará paso a ...

• Cómo usar la generación completa de sitios con Divi AI

  Aprende a crear un nuevo sitio web usando Divi Quick Sites y Divi AI. Divi Quick Sites puede generar un nuevo sitio web usando Divi AI o sitios prediseñados Divi Starter. Quick Sites configurará todo tu sitio, incluyendo páginas personalizadas, ...