• Pagina inicial
  • Artigos
  • Tema
  • 6 maneiras de usar o recurso Arrastar e soltar de upload de arquivos do Divi para aumentar a produtividade

6 maneiras de usar o recurso Arrastar e soltar de upload de arquivos do Divi para aumentar a produtividade

Publicados: 2018-08-22

O recurso Arrastar e Soltar para Upload de Arquivos do Divi pode ser uma ferramenta maravilhosa para aumentar a produtividade como um web designer. Neste tutorial, vou guiá-lo por 6 maneiras de usar o recurso arrastar e soltar para melhorar o fluxo de trabalho de design Divi. Darei algumas dicas úteis, exemplos e trechos de código de bônus ao longo do caminho também. Na verdade, é sempre divertido arrastar e soltar arquivos apenas para ver o que acontece.

Vamos começar!

Uma breve visão geral do recurso Arrastar e soltar de upload de arquivos da Divi

O recurso Drag & Drop File Upload é uma maneira fácil de adicionar conteúdo à sua página ao usar o Divi Builder. Como o nome sugere, você pode arrastar e soltar arquivos em sua página para adicionar conteúdo sem o processo normal de configurar sua seção, linha e módulo de antemão. E o Divi colocará o conteúdo de maneira diferente dependendo do tipo de arquivo. Por exemplo, os arquivos txt serão adicionados aos módulos de texto, os arquivos html serão adicionados aos módulos de código e os arquivos css serão adicionados como CSS personalizado à sua página.

Tipos de arquivos suportados e seu comportamento de arrastar e soltar

Aqui está uma lista de todos os tipos de arquivo atualmente suportados pelo recurso Arrastar e Soltar. Isso pode ser útil quando se pensa em maneiras de aproveitar as vantagens do recurso em seu processo de design. Também adicionei uma breve descrição para ajudá-lo a entender o que acontecerá ao arrastar esses tipos de arquivo.

Arquivos de imagem

  • gif
  • JPEG
  • jpg
  • png

Ao inserir um único arquivo de imagem, Divi criará uma nova seção e linha de uma coluna e, em seguida, adicionará um módulo de imagem com sua imagem já carregada para o módulo.

Ao inserir vários arquivos de imagem de uma vez, Divi criará a mesma estrutura (nova seção e linha), mas adicionará suas imagens a um módulo de galeria.

Arquivos de Texto

  • TXT

Inserir um arquivo txt adicionará o texto a um novo módulo de texto dentro de uma nova seção e linha.

Arquivos de fonte

  • otf
  • ttf

Inserir um arquivo de fonte iniciará o pop-up modal de Upload de fonte com o nome da fonte e a fonte já carregadas. Tudo o que você precisa fazer é confirmar que deseja incluir todas as espessuras de fonte suportadas antes de clicar no botão de upload.

Arquivos de vídeo

  • m4v
  • mov
  • webm
  • wmv
  • mp4

Inserir um ou mais arquivos de vídeo adicionará cada vídeo a um novo módulo de vídeo dentro de uma nova seção e linha.

Arquivos de áudio

  • mp3
  • wav

Inserir um ou mais arquivos de áudio adicionará cada arquivo de áudio a um novo módulo de áudio dentro de uma nova seção e linha.

Arquivos da web

  • json
  • html
  • css

O arquivo json é para todos os layouts de página que você exportou. Arrastar o arquivo json carregará automaticamente o layout da página para a página.

Arrastar um arquivo html adicionará o html a um novo módulo de código dentro de uma nova seção e linha.

Arrastar um arquivo CSS adicionará automaticamente o código css ao CSS personalizado para sua página, que pode ser encontrado na guia avançada nas configurações da página.

No geral, o processo é intuitivo e tem grandes possibilidades de melhorar o fluxo de trabalho. Vejamos como você pode usar o recurso.

Nº 1: Arraste snippets CSS personalizados para sua página conforme necessário

A maioria de vocês, usuários de Divi, ama o Divi especificamente porque não precisa usar CSS personalizado. É o que torna Divi tão grande. No entanto, quando se trata de customização de temas do WordPress, CSS customizado (mesmo dentro do Divi) ainda é um ativo valioso.

Como qualquer bom desenvolvedor da web, você deve salvar seus trechos de CSS ao longo do caminho para que possa acessá-los facilmente para projetos futuros. Isso não apenas o tornará mais proficiente na construção de sites, mas também permitirá que você aproveite o recurso de arrastar e soltar do Divi.

Por exemplo, digamos que você tenha um snippet CSS para ocultar a barra do rodapé inferior em sua página Divi. Se você salvar esse trecho como um arquivo css com o título “Ocultar rodapé inferior”, poderá pegar esse arquivo e arrastá-lo para sua página para obter resultados instantâneos.

Divi organiza automaticamente seus snippets a cada gota

Com cada arquivo css que você arrasta para sua página, Divi extrairá o CSS e o adicionará à sua página. Você pode visualizar este css personalizado a qualquer momento na guia avançada de suas configurações de página.

Você também notará que o Divi organizará de forma inteligente seu trecho de css envolvendo-o com comentários. Se você não sabe, comentários são usados ​​dentro do código para identificar e / ou descrever facilmente certos blocos de código. Antes do seu snippet CSS, Divi insere um comentário com o texto “Begin” seguido do título do seu arquivo CSS, “Hide Bottom Footer”. Após o snippet, Divi insere outro comentário com o texto “End” seguido do título do arquivo.

Aqui está um exemplo de como um snippet ficaria nas configurações da página depois de arrastado para o arquivo CSS “Hide Bottom Footer”. 

/* BEGIN: Hide Bottom Footer */
#main-footer {
    display: none;
}
/* END: Hide Bottom Footer */

Para aqueles de vocês que não sabem como criar seu próprio css, você pode contar com os tutoriais úteis disponíveis na web que os fornecem para você. Isso é legal. Todos nós fazemos isso. Mas se você quiser tirar proveito do recurso de arrastar e soltar, pode começar a salvar esses trechos como arquivos individuais e nomeá-los de acordo. Dessa forma, cada fragmento é apenas arrastado e solto.

Dois exemplos de snippets CSS que você pode usar para a animação instantânea

Com CSS, as possibilidades são quase infinitas. Mas pensei em dar alguns exemplos de trechos de css que você pode salvar em sua biblioteca e que adicionarão animação ao seu site.

Salve o seguinte trecho css como um arquivo “.css” (nomeie algo como “Ícones de escala ao pairar”). 

.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);
}

Em seguida, salve este trecho a seguir como outro arquivo “.css” com o nome “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;
}

Depois de ter ambos os arquivos salvos em seu computador. Selecione os dois arquivos e arraste-os para a página. Claro, você pode arrastar apenas um, se quiser, mas pensei em mostrar que ele também funciona com vários arquivos. Isso fará com que todos os módulos do blurb tenham um efeito pop-up imediatamente, adicionando uma caixa de sombra ao passar o mouse. Isso também fará com que todos os ícones do blurb sejam redimensionados (aumentem) quando você passar o mouse sobre eles.

Coisas muito legais.

E você pode imaginar como será útil uma vez que você tenha um arsenal desses arquivos css à sua disposição.

# 2 Arraste e solte fontes personalizadas em sua página e substitua rapidamente as fontes atuais

Se você cria sites, está familiarizado com a necessidade de ter uma ampla seleção de fontes disponíveis. Divi tem centenas de fontes integradas ao Divi Builder, o que torna as coisas muito mais fáceis. E você sempre pode usar a opção de fazer upload de novas fontes de dentro do Divi Builder. Mas com a nova funcionalidade Arrastar e Soltar do Divi, adicionar novas fontes ao seu site é ridiculamente simples.

Digamos que você esteja usando um dos layouts predefinidos, mas gostaria de experimentar uma nova fonte que a Divi ainda não tem disponível. Veja como é fácil alterar a fonte:

Certifique-se de que o construtor visual esteja ativado e de que seu layout predefinido seja carregado. Em seguida, tudo o que você precisa fazer é arrastar o arquivo de fonte do seu computador para o construtor de página / visual dentro da janela do navegador. Em seguida, clique no botão de upload.

Arrastar e soltar com Localizar e substituir é uma combinação poderosa

Para dar um passo adiante, você pode usar o recurso Find & Replace do Divi para substituir a fonte usada nos cabeçalhos de layout predefinidos pela nova fonte que acabou de inserir.

Usando o layout da página inicial da agência de criação, abra o módulo de texto que contém o texto do cabeçalho na seção superior. Em seguida, clique com o botão direito na opção de fonte do título. No menu do botão direito, selecione Localizar e substituir.

No pop-up Localizar e substituir, selecione a nova fonte na opção “Substituir por” e clique no botão azul Substituir.

Agora todos os seus cabeçalhos têm a nova fonte em vigor!

# 3 Arraste e solte várias imagens para criar galerias de fotos instantâneas com títulos

A funcionalidade Arrastar e Soltar do Divi permite que você arraste imagens para o seu site com facilidade. Isso realmente é útil ao criar sites com muitas imagens. E como a maioria das pessoas mantém as imagens salvas em uma pasta no computador, é extremamente conveniente poder selecionar essas imagens e arrastá-las para sua página.

É assim que funciona ao arrastar e soltar em uma única imagem.

Quando você arrasta uma única imagem para o construtor visual, ele automaticamente faz o seguinte:
1. Crie uma nova seção regular com uma linha de uma coluna
2. Adicione um módulo de imagem à linha
3. Insira a imagem nesse módulo de imagem
4. Abra as configurações de imagem como uma conveniência para iniciar o processo de edição.

É assim que funciona ao arrastar várias imagens.

Quando você arrasta várias imagens para a página do construtor visual, o Divi faz automaticamente o seguinte:

1. Crie uma nova seção regular com uma linha de uma coluna
2. Adicione um Módulo de Galeria à linha
3. Insira as novas imagens no módulo Galeria
4. Abra as configurações do módulo Gallery para ajudar a iniciar o processo de edição.

Prepare suas imagens antes de arrastá-las para sua página

Para garantir que sua galeria de imagens esteja ótima, é útil realizar algumas otimizações com antecedência.

Tamanho da imagem
Em primeiro lugar, certifique-se de que todas as suas imagens são do mesmo tamanho. Eu sugeriria o uso de imagens com cerca de 1500 por 800 pixels. Isso fornece um bom tamanho para as imagens quando são implantadas em uma caixa de luz. Além disso, Divi usará uma versão menor da imagem para a miniatura na galeria. Já que estamos no assunto, pode ser útil revisar alguns tamanhos de imagens recomendados para os Módulos Divi. Depois disso, você pode reduzir o tamanho do arquivo um pouco mais arrastando-o para o TinyPNG ou usar o editor de fotos para salvá-lo para especificações da web.

Títulos de imagem
Por padrão, Divi exibirá o título de sua imagem sob cada miniatura em sua galeria. Então, faz desde (se você quiser que este título seja exibido), dar às suas imagens o título correto antes de arrastá-las.

# 4 Arraste os arquivos MP3 para a sua página com um arquivo CSS para iniciar o design

Para vocês, podcasters, isso definitivamente pode aumentar a produtividade. Como o recurso Drag & Drop do Divi oferece suporte aos formatos de arquivo mp3 e wav, você pode soltá-los facilmente no construtor para iniciar o processo de construção.

Quando você arrasta um único arquivo mp3 ou wav para a página, o Divi faz automaticamente o seguinte:

1. Crie uma nova seção regular com uma linha de uma coluna
2. Adicione um novo módulo de áudio com seu arquivo de áudio anexado
3. Abra o modal de configurações autio para iniciar o processo de edição.

Quando você arrasta vários arquivos mp3 ou wav para a página, o Divi faz a mesma coisa que faz quando arrasta um único arquivo de áudio, exceto que faria isso várias vezes. Portanto, se você arrastar 4 arquivos de áudio, o Divi criará 4 seções diferentes com uma linha de uma coluna contendo o módulo de áudio com o arquivo de áudio anexado. O modal de configuração de áudio também aparecerá para iniciar a edição do último módulo de áudio adicionado à página.

Arraste em um arquivo CSS para estilizar instantaneamente todos os módulos de áudio de uma vez

Se você está acostumado a usar CSS customizado para adicionar estilo adicional às suas páginas Divi, sugiro que salve esses trechos em um arquivo css para ser usado em construções futuras (embora eu tenha certeza de que você já sabia disso). Portanto, se você tiver um trecho css para estilizar os módulos de áudio de uma determinada maneira, salve esse css em um arquivo css separado. Em seguida, você pode simplesmente arrastar esse arquivo css para a página para estilizar instantaneamente todos os seus módulos de áudio.

O CSS que usei na ilustração acima é um exemplo rápido, mas se você quiser experimentá-lo, copie o seguinte 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;
}

Em seguida, cole-o em um editor de texto e salve-o com um formato de arquivo css (deve ter a extensão “.css”). Depois de salvá-lo em seu computador. Arraste-o para o construtor visual que contém suas sinopses de áudio.

# 5 Crie blocos de código reutilizáveis ​​que podem ser arrastados para sua página para implementação instantânea

O recurso Drag & Drop do Divi oferece suporte a arquivos CSS e HTML (desculpe, não são permitidos arquivos javascript). Embora, para aqueles que sabem o que estão fazendo, você possa adicionar scripts ao arquivo HTML que adicionarão essa funcionalidade javascript para você. Mas isso deixa a oportunidade de combinar esses arquivos para criar blocos de código úteis que você pode arrastar para uma página para obter resultados instantâneos.

Exemplo 1: arraste e solte os arquivos exportados da Code Pen para sua página

Se você é um fã de codepens, pode já estar preparado para alguma mágica útil de arrastar e soltar. Antes que você fique muito animado, devo avisá-lo que, para criar arquivos que afetarão instantaneamente seu site ao arrastá-los, você estará limitado a codepens que usam apenas uma combinação de html e css.

Veja como esse processo pode funcionar para você.

Vá para a página que apresenta o Codepen que você deseja exportar e clique no botão exportar na parte inferior direita da página.

Extraia os arquivos em seu computador e localize o arquivo html e o arquivo css. Use um editor de texto para visualizar seu arquivo html e retire todas as tags que você não precisa (doctype, html, cabeçalho, corpo) de forma que tudo o que resta é o html que você vê na caixa html do codepen . Em seguida, salve o arquivo.

Na verdade, para o arquivo HTML, pode ser melhor apenas copiar o HTML diretamente da caneta e criar seu próprio arquivo html.

Agora encontre o arquivo CSS (deve estar localizado dentro da pasta CSS). Certifique-se de usar o arquivo CSS e não o arquivo SCSS (este tipo de arquivo não é compatível com o recurso Arrastar e Soltar).

Agora arraste os dois arquivos para a página com seu construtor visual ativo.

Isso é o que acontece automaticamente:

1. Divi cria uma nova seção com uma linha de uma coluna.
2. Divi adicione um módulo de código à linha com seu html como conteúdo.
3. Divi adiciona o css personalizado ao bloco CSS personalizado das configurações da página.

Se você receber um erro, isso significa que você não tem o tipo de arquivo correto ou o conteúdo do arquivo tem um código que não é compatível. Por exemplo, se o arquivo html tiver as tags doctype e html, o arquivo não funcionará. Além disso, se o seu arquivo css tiver código SCSS, ele também pode disparar um erro.

É verdade que, inicialmente, esse não é o processo mais tranquilo. Você terá que organizar um pouco seu código e arquivos. Portanto, se você não está familiarizado com html e CSS, isso pode ser uma luta. Mas o resultado final pode ser muito valioso, pois você poderá estocar alguns blocos de código reutilizáveis ​​que bastam arrastar e soltar.

Devo também observar que você deve estar familiarizado com o licenciamento do Codepen antes de copiar o código que não é o seu.

Exemplo 2: arraste e solte instâncias isoladas de fonte impressionante em sua página

Se você está acostumado a usar o Font Awesome em seu site Divi, pode se beneficiar de alguns arquivos “prontos para arrastar” que permitirão inserir instâncias do Font Awesome em sua página. Na verdade, isso pode ser feito com um único arquivo HTML.

Veja como esse processo pode funcionar para você.

Pegue o script Font Awesome do site deles. Certifique-se de que é a versão SVG + JS. Em seguida, copie o script para a área de transferência.

Em seguida, crie um novo arquivo de texto e cole no código. No script, adicione o html e o código da fonte que deseja implantar em sua página.

Aqui está um exemplo de um código html "pronto para arrastar" com uma lista usando ícones incríveis de fontes: 

<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>

Certifique-se de salvar seu arquivo como um arquivo html. Em seguida, arraste-o para sua página com o construtor visual.

Divi irá adicionar automaticamente o html a um módulo de código para você e agora você tem uma lista incrível de fontes pronta para editar para sua página.

Provavelmente, você está desejando que a lista seja colocada em um módulo de texto para que possa usar as configurações de texto do conteúdo. Mas como isso não acontece automaticamente, você pode limitar seu arquivo html para incluir o script. E então cole seu html em um módulo de texto. Mas para aqueles de vocês que têm um arquivo css disponível para lidar com o design, é bom ser capaz de arrastá-lo com seu arquivo html.

# 6 Crie uma biblioteca de layouts de página Divi (arquivos json) em seu disco rígido para arrastar para suas páginas para um desenvolvimento mais rápido

Com o Divi, você pode salvar e exportar facilmente layouts de página inteiros que você criou. Existem dois grandes benefícios nessa funcionalidade. O primeiro benefício é poder salvar layouts de página dentro da Biblioteca Divi para ajudar a acelerar o processo de design ao construir um site. O segundo benefício é poder exportar layouts de página para seu próprio computador. Isso permite que você acumule uma coleção valiosa de layouts de página (arquivos json) para iniciar seu próximo projeto.

E o novo recurso Arrastar e Soltar permite que você arraste rapidamente os layouts salvos para o construtor visual para um desenvolvimento ainda mais rápido.

Veja como esse processo pode funcionar para você.

Digamos que você queira salvar apenas a seção de cabeçalho do layout da página de destino da agência de design (pode ser qualquer design de sua preferência, mas, neste exemplo, estou usando um layout predefinido). Depois de carregar o layout em sua página, exclua todas as seções do layout, exceto a seção de cabeçalho superior. Em seguida, você exportaria o layout para o seu disco rígido.

Para exportar um layout de página usando o construtor visual, abra o menu de configurações e clique no ícone de portabilidade. Em seguida, no pop-up de portabilidade, insira um nome (“Design Agency Header Layout”) e clique no botão Export Divi Builder Layout.

Isso salvará o layout em seu computador como um arquivo json.

Agora, se eu excluir a seção do cabeçalho na minha página para que ela fique vazia de quaisquer seções, posso adicionar facilmente esse cabeçalho de volta à minha página arrastando o arquivo json para a página.

Quando arrasto o arquivo json, o modal de portabilidade aparece automaticamente para me permitir escolher a opção de substituir o conteúdo existente ou criar um backup com antecedência. Como não preciso substituir nenhum conteúdo, tudo o que preciso fazer é clicar no botão importar e ele é carregado instantaneamente na página.

Isso pode não parecer tão impressionante, mas tem a possibilidade de realmente acelerar o processo de design. Se eu tivesse uma grande coleção de arquivos json com diferentes layouts de página (cada um com elementos específicos de que gostei). Posso usar esses arquivos como bloco de construção e arrastá-los para a página um por um. Apenas certifique-se de ser descritivo nos títulos fornecidos ao exportá-los.

Pensamentos finais

O recurso Arrastar e Soltar do Divi pode definitivamente ser uma ferramenta útil para impulsionar o fluxo de trabalho de seu web design. Existem algumas limitações que podem causar alguma frustração no início, mas espero que este artigo o ajude a entender como aproveitar esse recurso para criar uma biblioteca pessoal de arquivos arrastáveis ​​que aumentará sua produtividade em web design.

Eu adoraria ouvir suas próprias idéias nos comentários abaixo.

Saúde!