homefinance blog
La división de la carga de archivos de arrastre y caída de Diva puede ser una herramienta maravillosa para aumentar la productividad como diseñador web. En este tutorial, presentaré 6 formas en que puede usar la función de arrastrar y soltar para mejorar su flujo de diseño de la división. Le daré algunos consejos útiles, ejemplos y fragmentos de código de bonificación en el camino. Si hay algo, siempre es divertido extraer y sujetar archivos solo para ver qué sucede. ¡Vamos a empezar! Una breve presentación general de la función de carga de los archivos Dra Dra Dra y DRO Arrastre y suelta la carga de archivos es una manera fácil de agregar contenido a su página cuando se usa Div Builder. Como su nombre indica, también puede dibujar archivos en su página para agregar contenido sin el proceso de configuración normal de configuración, fila y módulo. Y Diva colocará el contenido diferente según el tipo de archivo. Por ejemplo, se agregarán archivos TXT 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 una página CSS personalizada.
Los tipos de archivos aceptados y su comportamiento de arrastrar y soltar aquí hay una lista de todos los tipos de archivos aceptados actualmente por la función de arrastrar y soltar. Esto puede ser útil al pensar en cómo puede aprovechar la función en el proceso de diseño. También agregamos una breve descripción para ayudarlo a comprender lo que sucederá al dibujar este tipo de archivos. Archivos de imagen
gif
jpeg
jpg
Png
Al ingresar un solo archivo de imagen, Diva creará una nueva sección y una fila con una columna y luego agregará un módulo de imagen con su imagen ya cargada en el módulo. Cuando ingrese múltiples archivos de imagen simultáneamente, la diva 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
Ingresar un archivo txt agregará el texto a un nuevo módulo de texto en una nueva sección y fila. Archivos de fuente
.Otf
TTF
Si ingresa un archivo de fuente, se iniciará el modo emergente de fuente con el nombre de fuente y la fuente ya cargada. Todo lo que tiene que hacer es confirmar que desea incluir todos los pesos de fuentes aceptados antes de hacer clic en el botón de carga. Archivos de video
m4v
color de malva
Webm
WMV
mp4
La introducción de uno o más archivos de video agregará cada video a un nuevo módulo de video en una nueva sección y fila. Archivos de sonido
mp3
Wav
Si ingresa uno o más archivos de audio, cada archivo de audio se agregará a un nuevo módulo de audio en una nueva sección y fila. Archivos web
Json
Html
CSS
El archivo JSON es para cualquier aspecto de página que haya exportado. Presentar el archivo JSON cargará automáticamente el aspecto de la página a la página. Presentar un archivo HTML agregará HTML a un nuevo módulo de código en una nueva sección y fila. Presentar un archivo CSS agregará automáticamente el código CSS a su CSS personalizado para su página, que se puede encontrar en la pestaña avanzada desde la configuración de su página.
En general, el proceso es intuitivo y tiene algunas posibilidades excelentes para mejorar el flujo de trabajo. Pasemos a algunas de las formas en que puede usar esta función. # 1 Dibuje fragmentos CSS personalizados en su página, ya que la mayoría de los usuarios de DIV son necesarios, me encanta la división porque no tiene que usar CSS personalizado. Es lo que hace que la diva sea tan grande. Sin embargo, cuando se trata de personalizar el tema de WordPress, CSS personalizado (incluso dentro del DIV) sigue siendo un activo valioso. Como cualquier buen desarrollador web, debe guardar sus fragmentos CSS en todo momento, para que pueda acceder fácilmente a ellos para futuros proyectos. Esto no solo lo hará más competente en la creación de sitios web, sino que también le permitirá aprovechar el arrastre y soltar una div. Por ejemplo, suponga que tiene un fragmento CSS para ocultar la barra del sótano desde la parte inferior de su Página Div. Si guarda el fragmento como un archivo CSS con el título “Ocultar el sótano del sótano”, puede tomar ese archivo y sacarlo en su página para obtener resultados instantáneos.
Div Div organiza automáticamente sus fragmentos con cada caída con cada archivo CSS que dibuje en su página, Div extraerá CSS y lo agregará a su página. Puede ver este CSS personalizado en la configuración de la página avanzada. También notará que el Divin organizará inteligentemente el fragmento CSS, envolviéndolo con comentarios. Si no sabe, los comentarios se usan en el código para identificar y / o describir fácilmente ciertos bloques de código. Antes de su fragmento CSS, Divin ingresa a un comentario con el texto “Inicio” seguido del título de su archivo CSS, “Oculta el sótano del sótano”. Después del fragmento, la División presenta otro comentario con el texto “Fin” seguido del título del archivo. / * Comienza: esconde el pie de página inferior */
#Footer principal {
Pantalla: ninguno;
}
/ * Fin: ocultar el pie de página inferior */
Para aquellos de ustedes que no saben cómo crear sus propios CSS, pueden confiar en esos tutoriales útiles en la web que le brindan esto. Esto es genial. Todos lo hacemos. Pero si desea aprovechar la función de arrastrar y soltar, es posible que desee comenzar a guardar estos fragmentos como archivos individuales y nombrarlos en consecuencia. De esta manera, cada fragmento es solo un querido y caída.
Dos ejemplos de fragmentos CSS que puede usar para la animación con el mouse CSS, las posibilidades son casi ilimitadas. Pero pensé que le daría algunos ejemplos de fragmentos CSS que puede guardar en su biblioteca, lo que agregará la animación en su sitio Guardar el siguiente fragmento CSS como un archivo “.css” (nombre como “iconos de escala en el flotador”) . .et-pb-icon {-webkit-transition: todos .2s facilitados;
-Moz-Transition: todos los 0.2s aliviados;
-Ms-Transition: todos los 0.2s facilitados;
-O-transición: todos los 0.2s facilitados;
Transición: todos los 0.2s aliviados;
}
.et-pb-icon: hover {
-Transform: Scales (1.2);
-Webkit-transform: Scales (1.2);
-o-transform: escalas (1.2);
Transformar: escalas (1.2);
}
Luego guarde el siguiente fragmento como otro archivo “.css” con el nombre “Sombra de blurb 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-transición: todos 0.5s;
-Moz-Transition: todos 0.5s;
Transición: todos 0.5s;
}
Una vez que tenga ambos archivos guardados en su computadora. Seleccione ambos archivos y tírelos en la página. Por supuesto, solo puede extraer uno si lo desea, pero pensé en mostrarle que funciona con más archivos. Esto hará que todos los módulos de propaganda tengan un efecto emergente al agregar una sombra de caja en el flotador. También hará que todos los íconos de propaganda cambiaran el tamaño (se vuelven más grandes) cuando los revise.
Cosas bastante geniales. Y puede imaginar lo útil que será una vez que tenga un arsenal de archivo CSS. # 2 Tire y arregle las fuentes personalizadas en su página y reemplace rápidamente las fuentes actuales Si crea sitios web, está familiarizado con una amplia gama de fuentes. Div tiene cientos de fuentes incorporadas en la división del constructor, lo que hace que las cosas sean mucho más fáciles. Y siempre puede usar la opción de cargar nuevas fuentes de Divi Builder. Pero con la nueva funcionalidad de arrastrar y soltar un DIV, la adición de nuevas fuentes a su sitio es ridícula. Usemos uno de los aspectos prefabricados, pero desea probar una nueva fuente que DIV aún no tiene disponible. Así es lo fácil que es cambiar la fuente: asegúrese de que el Visual Builder esté activado y su aspecto prefabricado esté cargado. Entonces, todo lo que tiene que hacer es extraer el archivo de fuente de su computadora en la página Visual / constructor de la ventana del navegador. Luego haga clic en el botón Cargar.
Deslice y se sujetan con Find and Reemplazar es una combinación fuerte para llevar un paso más allá, puede usar la función que puede encontrar y reemplazar la división para reemplazar la fuente utilizada en los títulos de aspecto prefabricado con la nueva fuente que acaba de presentar. Usando la página de la página de la página Agencia creativa, abra el módulo de texto que contiene el texto del encabezado en la sección superior. Luego, haga clic en la opción Fuente de título. En el menú de clic derecho, seleccione Buscar y reemplazar.
En la ventana emergente se encuentra y reemplaza, selecciona su nueva fuente en la opción “Reemplazar con” y haga clic en el botón Azul.
¡Ahora todos sus encabezados tienen la nueva fuente instalada! # 3 Tire y sujeten más imágenes para crear galerías de fotos instantáneas con títulos La funcionalidad de la división y la caída le permite extraer fácilmente las imágenes en su sitio. Esto es muy útil cuando se crea sitios web con muchas imágenes. Y dado que la mayoría de las personas mantienen las imágenes guardadas en un archivo de computadora, es extremadamente conveniente seleccionar esas imágenes y ponerlas en su página. Así es como trabaja y sujeta una sola imagen. Al extraer una sola imagen en el Visual Builder, automáticamente hará lo siguiente: 1. Cree una nueva sección habitual con una fila de una columna 2. Agregue un módulo de imagen en una fila 3. Ingrese la imagen en esa imagen 4. Abrir La configuración de la imagen para comenzar el proceso de edición. Así es como funciona cuando dibuja más imágenes. Al extraer varias imágenes en su página de Visual Builder, DIV hará automáticamente lo siguiente: 1. Cree una nueva sección habitual con una fila de una columna 2. Agregue un módulo de la galería en una fila 3. Ingrese las nuevas imágenes en la Galería 4. Abra la configuración del módulo de la galería para ayudar a restaurar el proceso de edición.
Prepare sus imágenes antes de atraerlas en su página para asegurarse de que la galería de imágenes se vea genial, le ayuda a realizar algunas optimizaciones de antemano. Tamaño de imagen primero, asegúrese de que sus imágenes tengan el mismo tamaño. Sugeriría usar imágenes que tengan alrededor de 1500 PX con 800 PX. Ofrece un tamaño hermoso para imágenes cuando se implementa en una caja de la caja de luz. Además, Diva utilizará una versión más pequeña de la imagen en miniatura en la galería. Si bien nos referimos a este tema, puede ser útil examinar algunas imágenes recomendadas para los módulos Divi. Después de eso, puede reducir un poco más el tamaño del archivo tirando de TinyPng o utilizando el editor de fotos para guardarlo para especificaciones web. Títulos de imagen Por defecto, DIV mostrará el título de su imagen en cada miniatura en su galería. Entonces, si desea mostrar este título, le dé a las imágenes un título correcto antes de sacarlas. # 4 Extrae archivos MP3 en su página con un archivo CSS para iniciar el proyecto para usted, los podcaters allí, esto definitivamente podría aumentar la productividad. Debido a que la función de arrastrar y arrastre de Drag & Drop acepta formatos de archivo MP3 y WAV, puede dejarlos fácilmente en el constructor para iniciar el proceso de construcción.
Al extraer un solo archivo mp3 o wav en la página, DIV hará automáticamente lo siguiente: 1. Cree una nueva sección habitual con una fila de una columna 2. Agregue un nuevo módulo de audio con el archivo de audio adjunto 3. Abra la configuración automática A un proceso de edición comienza. Al extraer múltiples archivos MP3 o WAV en la página, Diva hará lo mismo cuando dibuje un solo archivo de audio, excepto que lo haría varias veces. Entonces, si dibuja 4 archivos de audio, Diva creará 4 secciones diferentes con una fila de una columna que contiene el módulo de audio con el archivo de audio adjunto. El modo de configuración de audio también parecerá que comenzará a editar el último modo de audio agregado a la página. Trate en un archivo CSS para estilizar instantáneamente todos los módulos de audio simultáneamente si está acostumbrado a usar CSS personalizado para agregar un estilo adicional a sus páginas, I, I I, I I, I I, I. Sugiera que guarde esos fragmentos en un archivo CSS para que se use para futuras versiones (aunque estoy seguro de que ya lo sabe). Entonces, si tiene un fragmento CSS para estilizar los módulos de audio de cierta manera, guarde ese CSS en un archivo CSS separado. Luego, simplemente puede extraer el archivo CSS a la página para estilizar instantáneamente todos sus módulos de audio.
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;
Arriba: -40px;
Antecedentes: #C5310D;
Relleno: 0.6em;
Izquierda: 50px;}
.et_audio_module_meta {
Posición: Absoluto;
Abajo: -45px;
Derecho: 30px;
Antecedentes: #C5310D;
Relleno: 1em! IMPORTANTE;
}
.et_pb_audio_module {
Antecedentes: #888! IMPORTANTE;
}
.et_audio_container .mejs-playpause-button botón: antes, .et_audio_container .mejs-volume-button button: antes {color: #c5310d;
}
.Mejs-tiempo-Handle-cuenta {
Borde: 4px sólido #C5310D;
Altura: 14px;
Izquierda: -7px;
Arriba: -6px;
Ancho: 14px;
Antecedentes: #C5310D;
}
.et_audio_container .Mejs-Controls .Mejs-Time-Rail .Mejs-ToTal
{
Antecedentes: #222;
}
Luego péguelo a 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. Tíralo en el Visual Builder que contenga sonidos de audio. # 5 Cree bloques de código reutilizables que se puedan dibujar en su función de arrastre de implementación instantánea de implementación de la función de arrastrar y soltar acepta archivos CSS y HTML (lo siento, sin archivos JavaScript). Aunque para aquellos que saben lo que hacen, es posible que pueda agregar scripts al archivo HTML que agregará la función JavaScript para usted, pero esto deja la oportunidad de combinar estos archivos para crear bloques de código útiles que puede extraer una página para obtener resultados instantáneos . Ejemplo 1: Deslice y fije los archivos de código de Pen exportados a su página. Si es fanático de CodePens, es posible que ya esté configurado para una magia útil de arrastrar y soltar. Antes de excitar demasiado, tengo que advertirle que para crear archivos que afectarán instantáneamente su sitio cuando lo extraiga, se limitará a códigos que usan solo una combinación de HTML y CSS. Así es como este proceso puede funcionar para usted. Vaya a la página que muestra CODEPEN que desea exportar y haga clic en el botón Exportar en la parte inferior derecha de la página.
Extraiga 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, Header, Body) para que solo el HTML vea en el cuadro HTML en CodePen. Luego guarde el archivo. De hecho, para el archivo HTML es mejor copiar el código HTML directamente desde el bolígrafo y crear su propio archivo HTML.
Ahora encuentre el archivo CSS (debe ubicarse en la carpeta CSS). Asegúrese de usar el archivo CSS y no el archivo SCSS (este tipo de archivo no es aceptado por la función de arrastrar y soltar). Ahora extraiga ambos archivos en la página con usted, el creador visual activo. Esto es lo que sucede automáticamente: 1. Divin crea una nueva sección con una fila con una columna. 2. Divida Agregar un módulo de código por fila con su HTML como contenido. 3. Divida CSS personalizado en la configuración de su página CSS CSS.
Si se produce un error, significa que no tiene el tipo de archivo correcto o el contenido del archivo tiene un código que no se acepta. Por ejemplo, si el archivo HTML tiene etiquetas DOCTYPE y HTML, el archivo no funcionará. Además, si su archivo CSS tiene código SCSS, también puede activar un error. Por supuesto, este no es el mejor proceso inicial. Deberá organizar un poco de código y archivos un poco. Entonces, si no está familiarizado con HTML y CSS, esto puede ser una pelea. Pero el resultado final podría resultar muy valioso por el hecho de que podrá suministrar algunos bloques de código reutilizables que solo están a distancia. También debo tener en cuenta que debe estar familiarizado con las licencias de CodePen antes de copiar un código que no es su segundo: deslizamiento y arreglar instancias aisladas de la maravillosa fuente. Si está acostumbrado a usar Font Awesome en su DIV, puede beneficiarse de algunos ” Arrase de arrastre “listos” que le permitirán insertar instancias impresionantes de fuentes en su página. Esto en realidad se puede hacer con un solo archivo HTML. Así es como este proceso puede funcionar para usted. Atrapa el guión impresionante de la fuente en su sitio web. Asegúrese de que sea la versión SVG + JS. Luego copie el script al portapapeles.
Luego cree un nuevo archivo de texto y péguelo en el código. En el script, agregue HTML y el código de fuente que desea implementar en su página. Aquí hay un ejemplo de un código HTML “Dray” con una lista que utiliza maravillosos iconos de fuente:
Tu contenido va aquí.
Tu contenido va aquí.
Tu contenido va aquí.
Tu contenido va aquí.
Tu contenido va aquí.
Tu contenido va aquí.
Asegúrese de guardar el archivo como un archivo HTML. Luego, póngalo en su página con Visual Builder.
Divi agregará automáticamente HTML a un módulo de código para usted y ahora tiene una excelente lista de fuentes listas para editar para su página.
Probablemente desee que la lista se ingrese en un módulo de texto para que pueda usar la configuración de texto. Pero debido a que esto no sucede automáticamente, le recomendamos que limite el 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 en cuestión para administrar el diseño, es bueno poder sacar esto con su archivo HTML. ” Hay dos ventajas realmente grandes para esta funcionalidad. La primera ventaja es la capacidad de guardar las páginas en la biblioteca de la Divica para ayudar a acelerar el proceso de diseño al construir un sitio web. La segunda ventaja es la posibilidad de exportar los aspectos de la página en su propia computadora. Esto le permite acumular una valiosa colección de problemas de página (archivos JSON) para comenzar el próximo proyecto. Y la nueva función de arrastrar y soltar le permite extraer rápidamente esos modelos guardados en el Visual Builder para un desarrollo aún más rápido. Así es como este proceso podría funcionar para usted. Suponga que desea guardar solo la sección de encabezado de la página de diseño para la agencia de diseño (este podría ser cualquier diseño que desee, pero para este ejemplo, uso un aspecto prefabricado). Después de cargar el aspecto en su página, elimine cada sección del aspecto, excepto la sección del encabezado superior. Luego exportaría el aspecto en el disco duro.
Para exportar una apariencia de página utilizando el generador visual, abra el menú Configuración y haga clic en el icono de portabilidad.Luego, en la ventana de portabilidad emergente, ingrese un nombre (“Diseño del encabezado de la agencia de diseño”) y haga clic en el botón Exportar Divi Diseño Exportar. Esto guardará su apariencia 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, extrayendo el archivo JSON en la página.Cuando extrajo el archivo JSON, el método de portabilidad aparece automáticamente para permitirme elegir la opción para reemplazar el contenido existente o crear una copia de copia de seguridad.Debido a que no tengo que 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.
