25 recursos “ocultos” do Divi para aumentar a produtividade e o design

Com todos os poderosos recursos Divi que foram lançados ao longo dos anos, é seguro dizer que alguns deles podem ter sido esquecidos (ou ignorados). Aqueles de nós que usam o Divi diariamente podem ocasionalmente ficar presos em nossos caminhos do Divi e precisam de um pequeno lembrete dos novos recursos disponíveis. E aqueles que são novos no Divi podem precisar de alguém para lançar alguma luz sobre esses recursos “escondidos” no site simples. Independentemente de você ser um Divi Master ou Youngling, nunca é demais dar uma boa olhada em TODOS os recursos disponíveis no Divi. Você pode apenas aprender algo novo!

Para este post, vou destacar 25 recursos Divi que têm como objetivo aumentar a produtividade e o design, mas que podem ter escapado à atenção de muitos usuários. Eu entendo que nem todos esses recursos serão novos para você (alguns deles existem desde o início do Divi), mas tenho certeza que alguns irão surpreendê-lo.

Aproveitar!

25 recursos “ocultos” do Divi para aumentar a produtividade e o design

Inscreva-se no nosso canal no Youtube

# 1 Barra de pesquisa Opções de pesquisa

Ok, este não é realmente tão “escondido”, mas suspeito que alguns de vocês não têm o hábito de usar esse recurso. Entendo. Velhos hábitos são difíceis de morrer, mas definitivamente vale a pena incorporar essa barra de pesquisa ao seu fluxo de trabalho. Se você precisar adicionar preenchimento personalizado ao seu módulo, não se contente em clicar na guia de design, rolar para baixo, abrir o botão de alternância de tamanho e, em seguida, adicionar sua margem personalizada. Basta digitar “margem” na barra de opções de pesquisa e pronto! Quer ter certeza de que todas as suas fontes correspondem a um determinado módulo? Basta digitar a palavra “fonte” na barra de opções de pesquisa e atualizar a fonte do corpo, a fonte do cabeçalho e a fonte do botão, tudo em uma pequena lista.

Dica: você não precisa clicar em uma guia específica antes de pesquisar. Os resultados da pesquisa irão puxar de todas as opções de todas as três guias, não importa onde você esteja nas configurações de texto.

A barra de pesquisa também pode ser encontrada ao adicionar um novo módulo. Basta começar a digitar o nome do módulo que você deseja e seu módulo aparecerá no topo da lista sem ter que rolar para localizá-lo.

# 2 Coloque o gradiente acima da imagem de fundo

Este é um ótimo recurso que melhora o processo de design. Adicionar sobreposições de gradiente às imagens é uma necessidade em web design e esse recurso torna mais fácil adicionar essas sobreposições dentro do Divi Builder. Basta adicionar uma imagem de plano de fundo ao seu módulo e, em seguida, adicionar uma combinação de cores de plano de fundo gradiente. Nas opções de fundo gradiente, selecione “colocar gradiente acima da imagem de fundo”. Apenas certifique-se de ter uma certa quantidade de opacidade com as cores do gradiente para que você possa ver a imagem atrás do gradiente. E com o Visual Builder, você pode ajustar facilmente seu gradiente para a opacidade e cor perfeitas para sua imagem de fundo.

# 3 Alterne suas duas cores de fundo gradiente: Existe um botão para isso.

Este não é um grande recurso, mas eu queria mencioná-lo porque eu não conseguiria dormir à noite sabendo que alguns de vocês ainda trocam esses códigos de cores manualmente. Obter o fundo gradiente certo pode ser desafiador às vezes, então é bom ter opções como esta.

Para alternar suas cores, simplesmente passe o mouse sobre o seletor de cores e clique no ícone “cor alternativa” (não tenho certeza do termo oficial). É o próximo também o ícone de exclusão.

# 4 Atalhos de teclado

Estes são fáceis de perder e muitas vezes esquecidos. Mas eles irão acelerar seu fluxo de trabalho se você se comprometer a usá-los. O tempo que você economiza usando as teclas de atalho pode ser considerável, em comparação com o tempo que você gasta NÃO usando. Quero dizer, há uma razão pela qual aprendemos a digitar em vez de nos contentarmos com a caligrafia (embora eu goste de caligrafia). E o mesmo acontece com a construção de sites.

Você pode encontrar uma lista de seus atalhos de teclado no modal Divi Builder Helper. Basta digitar o ponto de interrogação (shift +?) No teclado a partir do Visual Builder e clicar na guia de teclas de atalho.

Sim, os vídeos de documentação de ajuda podem ser acessados ​​da mesma maneira. Não vamos nos esquecer disso.

Aqui está uma lista de todas as teclas de atalho disponíveis. Eu destaquei aqueles com os quais sugiro começar (eu pessoalmente uso esses o tempo todo):

# 5 Visualização de estrutura de arame

Menciono este porque preenche o vazio de ter que ir para a construção de back-end enquanto você está projetando com o construtor visual. Portanto, para todos vocês, construtores de back-end, die hards, você pode considerar dar o salto para o construtor visual.

E não se esqueça da tecla de atalho para abrir e fechar a visualização do wireframe: shift + w

Para obter uma visão ainda mais ampla de seu layout dentro do wireview, você pode selecionar o ícone de seta de alternância em cada uma de suas seções ou linhas para recolher a seção inteira.

# 6 Edição Inline

Existem alguns lugares onde a edição embutida pode ser feita. Quando você está usando o Visual Builder e deseja editar o texto em um determinado módulo, não precisa clicar para editar as configurações do módulo para alterar o conteúdo. Clique simplesmente no texto e o editor embutido será implementado, permitindo que você edite o texto.

Ao usar a visualização wireframe no Visual Builder, você também pode editar os rótulos embutidos. Quer mudar o nome de um rótulo de seção? Você não precisa fazer isso no modal de configurações de linha ou nas opções de clique com o botão direito. Basta clicar no rótulo e editá-lo ali mesmo.

Dica: Sair do editor embutido pode ser confuso, mas não precisa ser. Basta pressionar a tecla esc e você está fora.

# 7 Teste de divisão do Visual Builder usando as opções do botão direito

Sempre fico surpreso com a facilidade de usar o recurso de teste de divisão no Visual Builder. Não vou entrar em detalhes aqui porque você pode ler a versão completa do recurso. Mas, aqui está a essência de como isso funciona. Clique com o botão direito na seção, linha ou módulo que deseja testar e selecione teste de divisão no menu do botão direito. Em seguida, selecione o objetivo do teste (entrada do formulário de contato, clique no botão, etc ...). Divi criará automaticamente outra versão (dividir) o elemento que você está testando para que você possa criar uma nova versão. Quando testei esse recurso pela primeira vez, não entendi como ver as duas versões do meu teste de divisão no construtor visual, então abri a visualização wireframe para ver as duas. Mas isso não é necessário. Depois de ativar uma meta de teste de divisão, você notará que aparecem setas no menu de configurações que permitem que você deslize pelas diferentes versões de seu teste de divisão.

Nº 8 Configurações personalizáveis ​​do construtor

Se você ainda não explorou as configurações do construtor, não é tarde demais. Existem algumas configurações úteis aqui que podem melhorar sua interação diária com o Visual Builder.

Aqui estão três que quero destacar.

Posição Modal Padrão

Não sei sobre você, mas tenho uma certa preferência em como gosto de pop-up de meus Modais ao fazer edições no meu monitor grande (é a posição fixa da barra lateral esquerda, caso você esteja se perguntando). Mas há momentos em que preciso quebrar a tradição e mudar a posição modal (geralmente quando estou editando em uma tela menor como o meu laptop). Então eu defino minha posição padrão como barra lateral esquerda fixa. Dessa forma, eu não sou sugado para trabalhar com uma posição modal com a qual não me sinto confortável antes de perceber a necessidade de colocá-la de volta do jeito que eu gosto.

Configurações do grupo em chaves fechadas

Por padrão, o Divi agrupará suas opções de configuração em alternadores. Isso significa que você terá que clicar para abri-los e ver as opções de cada um. Você pode desativar esse recurso para que suas configurações não sejam mais agrupadas em alternadores, permitindo que você role pelas configurações sem precisar clicar para ver mais.

Modo de interação padrão do construtor

Como muitos dos recursos listados neste artigo, este é definitivamente uma preferência pessoal. Mas posso ver os benefícios de cada um. O modo de interação de foco padrão destaca e implementa o menu de configurações para qualquer seção, linha ou módulo ao passar o mouse.

O modo de clique também pode ser útil. Às vezes, pode não estar claro qual módulo você está editando ou passando o mouse, especialmente se o módulo estiver fechado e / ou tiver margens personalizadas. O modo de clique elimina totalmente as suposições, destacando e delineando o conteúdo do módulo ao passar o mouse antes de clicar para editar o módulo.

O modo Grade irá destacar e mostrar o menu de configurações para todas as seções, linhas e módulos de uma vez. Embora eu pessoalmente não use esse modo como padrão, vejo o valor de usar o modo de grade sempre que estou movendo / reorganizando elementos em minha página.

# 9 Opções de design de links, listas e blockquote com o módulo de texto

Não se esqueça da nova interface com guias para gerenciar estilos de texto personalizados no Módulo de Texto do Divi. Essas guias permitem que você personalize o design de seus links, listas (não ordenadas e ordenadas) e aspas em bloco. Fazer essas alterações usando CSS pode ser uma chatice. Além disso, você pode querer mudar as coisas de módulo para módulo. Essas opções permitem que você faça isso facilmente.

Aqui estão duas das minhas opções favoritas que você pode ter esquecido.

Opções de estilo de lista

Nas guias Unordered e Ordered Lists, você pode facilmente alterar o tipo de estilo da lista ou se livrar de todos juntos.

Você também pode alterar a margem de recuo dos itens da lista e a posição do estilo.

Opções de estilo de blockquote

Na guia Blockquote, você pode alterar o peso da borda e a cor do elemento de design que diferencia o blockquote.

# 10 Opções de design para todos os 6 níveis de cabeçalho

Na mesma nota do item 9 acima, a nova interface com guias também existe para níveis de cabeçalho de texto. Isso significa que se você tiver um módulo com vários cabeçalhos (h1, h2, h3, etc.), poderá dar a cada um desses cabeçalhos um estilo único nas configurações de design do módulo. Na guia Design, alterne para abrir a seção Título do título ou Texto do cabeçalho e selecione a guia que controla o tipo de cabeçalho que deseja personalizar.

Dica: você saberá quais níveis de cabeçalho foram personalizados pelo rótulo azul na guia. Se o rótulo permanecer cinza, as configurações padrão estão ativas para esse nível de cabeçalho.

# 11 Carregar fontes personalizadas com módulos Divi

Quem sabe? Talvez esse botão Upload tenha permanecido oculto no site normal para alguns de vocês. Em caso afirmativo, você definitivamente deve tirar proveito desse recurso conveniente. Não apenas você pode carregar facilmente fontes personalizadas em vários tipos de arquivo (eot, woff2, woff, ttf, otf), o Divi irá armazenar essas fontes personalizadas para você, de modo que fiquem disponíveis para todos os módulos em seu site.

Tudo o que você precisa fazer é selecionar a alteração da fonte de um elemento de texto e clicar no botão Upload.

Um modo de upload de fonte aparecerá, permitindo nomear e adicionar seu arquivo de fonte.

Depois que seu arquivo for selecionado, clique no botão de upload. Em seguida, você poderá acessar essas fontes personalizadas da mesma lista de fontes incluída no Divi Builder.

# 12 Remover espaço abaixo da imagem

Este recurso já existe há algum tempo, mas há uma chance de você não tê-lo percebido ou de não entender seu significado.

Esta opção afeta apenas as imagens quando elas são o último módulo em uma coluna. Quando ativado, a distância entre a parte inferior da imagem e a seção seguinte é removida, permitindo que a imagem contorne a parte superior da próxima seção da página.

Uma maneira de aproveitar as vantagens desse recurso é posicionar as imagens do cabeçalho de forma que elas fiquem na borda da seção abaixo.

# 13 Adicionar unidades diferentes para entradas diferentes

Por padrão, quando você insere um número para certas entradas nas configurações do Divi Builder, o Divi o trata como uma unidade de pixel. Mas você não está limitado a inserir unidades de pixel para essas opções de entrada. Você também pode inserir outras unidades, incluindo%, em, vh e vw.

Por exemplo, as porcentagens funcionam muito bem para dispositivos móveis. Se você definir uma margem superior em 5% (em vez de algo como 100 px) no computador, a margem será dimensionada proporcionalmente para 5% do tamanho da seção no celular (em vez de herdar uma grande lacuna de 100 px, que seria muito espaço no telemóvel). Essa é uma boa técnica para manter uma seção acima da dobra em diferentes tamanhos de navegadores.

Você pode até usar combinações de unidades. Você pode querer manter sua altura fixa definindo as margens superior e inferior para um determinado número de pixels e, em seguida, defina as margens esquerda e direita para uma determinada porcentagem.

Tudo o que você precisa fazer é digitar o sufixo da unidade com o seu número ao preencher as diferentes entradas.

# 14 Estados da História

Os estados do histórico são como uma máquina do tempo para suas edições no Divi builder. Em vez de usar as opções de desfazer e refazer de clique com o botão direito ou teclas de atalho, você pode visualizar convenientemente a lista de suas edições clicando no link Histórico de edição no menu de configurações.

O que é legal sobre esse recurso é que ele lista o registro de data e hora e uma pequena descrição para cada edição na lista de estados do histórico.

Além disso, se selecionar um estado de histórico para voltar a um estado anterior, você sempre pode revisitar a lista para ir para a última edição que você fez. Basicamente, permite que você volte e avance em suas edições anteriores enquanto vê essas alterações em tempo real com o Visual Builder.

Lembre-se de que esses estados de histórico são salvos como uma coleção de Backbone / objeto Javascript e não são salvos em seu banco de dados e não irão inchar seu banco de dados. Por causa disso, se você sair do construtor ao editar a página, não poderá reviver os estados de histórico que fez anteriormente. Portanto, certifique-se de manter o prédio aberto até que finalize seu projeto. Os estados de histórico começam quando você carrega a página / construtor.

Nº 15 Opção de largura de medianiz personalizada (ótimo para layouts de grade)

A largura da medianiz corresponde à quantidade de espaço horizontal (margem) entre as colunas em cada linha.

Os valores opcionais para a largura da medianiz variam de 1 a 4.

1 representa a margem zero entre as colunas.
2 representa uma margem direita de 3% entre as colunas.
3 representa uma margem direita de 5,5% entre as colunas.
4 representa uma margem direita de 8% entre as colunas.

Isso definitivamente é útil para projetar layouts de grade. Os layouts de grade podem ser criados manualmente usando estruturas e módulos de coluna, mas você também pode atribuir layouts de grade automaticamente em certos módulos, como o módulo de portfólio e o módulo de blog.

Por exemplo, digamos que você deseja criar um layout de grade de largura total para exibir imagens sem nenhum espaçamento entre elas. Você pode criar uma nova linha com três colunas, adicionar imagens às suas colunas, tornar a largura total da linha e, em seguida, dar a ela uma largura de medianiz personalizada de 1.

# 16 Opções de clique com o botão direito

Localização do recurso : Basta clicar com o botão direito em qualquer seção do Divi Builder.

Embora eu não esteja examinando todas as opções de clique com o botão direito aqui, gostaria de apontar algumas opções que só são acessíveis ao clicar com o botão direito e que são simplesmente muito convenientes para serem ignoradas.

Trancar

Como administrador, você sozinho tem a capacidade de bloquear certos itens. Esta é uma maneira conveniente de evitar que seus editores alterem o conteúdo que você deseja inalterado. Também o protege de alterar acidentalmente uma seção importante.

Recolher e renomear

Gosto de usar essas duas opções combinadas à medida que construo páginas da web mais longas. Não sei sobre você, mas estou realmente cansado de rolar para cima e para baixo para encontrar as seções que preciso editar. É por isso que eu uso a opção de recolhimento do botão direito para condensar grandes seções da minha página da web que foram concluídas. Depois de recolhida, uso a opção de clique com o botão direito para renomear a seção para um rótulo de administrador reconhecível.

# 17 Desativar links do menu suspenso de nível superior

Localização do recurso : Divi → Opções de tema → Navegação → Configurações gerais

Para ser claro, os links do menu suspenso da camada superior são os principais links pai que permanecem visíveis no menu de navegação. Os links da sub camada são aqueles que aparecem depois que você passa o mouse sobre o link pai da camada superior.

Ao desativar os links do menu suspenso da camada superior, os links pais da camada superior não são mais clicáveis. Em vez disso, eles podem servir como marcadores não clicáveis ​​que rotulam e organizam seus sublinks.

Por exemplo, digamos que você esteja construindo um site para uma empresa que oferece três serviços principais e cada um desses serviços precisa de sua própria página. Uma configuração normal seria ter um link de nível superior denominado “serviços” com os três tipos de serviços como itens de submenu. Em vez de ter que lidar com um link para uma página de serviço geral, você pode desativar o link de “serviços” da camada superior e simplesmente usá-lo como um rótulo organizacional.

Nº 18 Método alternativo de rolar para âncora

Localização do recurso : Divi → Opções de tema → Navegação → Configurações gerais

Se você já tentou um link direto para um ID CSS usando um link de âncora de uma página externa, deve ter notado que o local de descanso final da página não é totalmente correto. Às vezes, é muito baixo para que parte do conteúdo seja cortado na parte superior.

Aqui está a aparência da minha tela depois de vincular ao meu ID CSS de uma página externa. Você não pode ver, mas o título da seção foi cortado.

Ativar o método alternativo de rolagem para âncora corrige esse problema. Além de colocar o usuário no lugar correto, a parte superior da página carrega primeiro, antes de rolar para o ID CSS. Acho isso útil para usuários que podem ficar confusos e não perceber inicialmente que estão visualizando uma seção da página.

# 19 Ocultar logotipo no celular

Localização do recurso : Divi → Personalizador de tema → Estilos móveis → Menu móvel

Se você precisar ocultar seu logotipo no celular, a Divi torna isso muito fácil. Mas é uma daquelas opções fáceis de ignorar. Economize tempo e não se preocupe em mexer com CSS adicional.

# 20 Menu principal e animação suspensa do menu secundário

Localização do recurso do menu principal : Divi → Personalizador de tema → Cabeçalho e navegação → Menu principal BAr Menu suspenso Animação

Localização do recurso do menu secundário : Divi → Personalizador de tema → Cabeçalho e navegação → Barra do menu secundário -> Animação do menu suspenso

Você não precisa se contentar com a animação de esmaecimento padrão para seus menus suspensos. A seção Animação do menu suspenso inclui quatro opções:

1. Fade (o padrão)

2. Expanda

3. Slide

4. Virar

Às vezes, microinterações como essa podem realmente fazer seu menu se destacar.

# 21 Editar (ou desabilitar) os créditos do rodapé

Localização do recurso : Divi → Personalizador de tema → Rodapé → Barra inferior → Desativar créditos do rodapé / Editar créditos do rodapé

Se você já usa o Divi há algum tempo, pode ter se acostumado a editar a barra inferior de seu rodapé editando o arquivo footer.php em seu tema filho. Isso não é mais necessário.

Você pode desabilitar facilmente a barra inferior completamente ou você pode inserir seus próprios créditos de rodapé inserindo texto ou html dentro da caixa de texto.

Nº 22: Alterando a paleta de cores padrão do Divi

Localização do recurso : Divi → Opções de tema → Guia Geral → Paleta padrão de selecionadores de cores

Faça uma pausa para copiar e colar códigos de cores hexadecimais.

A paleta padrão dos seletores de cores é a paleta de cores que será usada em todo o Divi Builder.

Se você conhece o tema de cores do seu site, basta atualizar as cores padrão para incluir as cores necessárias para o seu design. Essa opção pode economizar muito tempo a longo prazo, pois essas cores estarão acessíveis a você em todos os módulos ao construir e editar seu site.

# 23 Configurações da página da Divi

Localização : ícone de engrenagem no menu Configurações na parte inferior do Visual Builder.

Desde o Divi 2.7, as configurações do Divi Builder permitem definir as configurações padrão (e substituir as configurações do tema) para a página específica em que você está trabalhando no Divi Builder. Essa capacidade de definir configurações específicas da página é uma economia de tempo extremamente conveniente para a construção de páginas de destino ou outras páginas que precisam de um design específico que se desvia da norma.

Você pode definir uma paleta de cores para sua página, que substituirá a paleta padrão em suas Opções de Tema.

Você também pode adicionar CSS customizado específico da página. Como o CSS só será carregado na página específica, você não precisará se preocupar em direcionar IDs de postagem específicos ou acessar o arquivo style.css do tema filho.

Um recurso exclusivo das configurações do Divi Builder é a capacidade de habilitar o sistema de teste de divisão do Divi Leads para sua página. Essa ferramenta poderosa é simplesmente valiosa demais para ser ignorada. Se você ainda não usou, siga meu conselho e comece seu primeiro teste hoje!

Nº 24 Escolha quais informações meta exibir nas postagens do blog

Embora esse recurso Divi exista desde o início do Divi, pode facilmente ser esquecido. Cada uma das postagens do seu blog tem certas meta informações que aparecem sob o título da postagem (autor, categoria, data, comentários). Mas, dependendo de como você está usando o seu blog, você pode não querer que essas informações extras se distraiam com o conteúdo que você está fornecendo. Divi torna mais fácil personalizar essas informações para você.

Alterar Meta Info para Layout de Postagem Única

Localização : Divi → Opções de tema → Layout (guia) → Layout de postagem única

Você pode clicar facilmente para desabilitar ou habilitar cada uma das quatro informações meta para todas as suas postagens de blog, clicando em cada uma delas. As meta informações desativadas serão exibidas como desaparecidas.

Alterar meta informações para trechos de postagem na página do blog

Localização: Divi → Opções de tema → Layout (guia) → Configurações gerais

Para alterar a meta informação exibida nos trechos de postagem da sua página de blog, basta clicar em cada um dos quatro meta itens que deseja exibir ou ocultar.

Se você estiver usando o Módulo Divi Blog para sua página de blog, as configurações acima não funcionarão. Você precisará alterar as meta informações que deseja exibir nas Configurações gerais do módulo de blog.

# 25 O Módulo de Código

O Módulo de Código é um dos melhores recursos ocultos do Divi. Ele oferece a capacidade de adicionar html à sua página sem restrições. O módulo também permite adicionar elementos html a certas páginas sem afetar outras páginas. Os recursos do Módulo de Código são infinitos, mas aqui estão algumas maneiras de usá-lo:

• Importe arquivos css externos como Animate.css apenas para a página que você precisa de animação.
• Adicione blocos de código javascript ou bibliotecas que você apenas aplicou à sua página.
• Integre plug-ins de terceiros, como o controle deslizante de revolução.
• Você pode usar o Fullwidth Code Module para incorporar um Typeform para questionários mais interativos, formulários de contato, etc ...
• Adicionar um menu de ação flutuante
• Crie um anúncio na barra superior deslizante.
• Adicione um botão de ação flutuante.

No Fechamento

Ao aprender algo pela primeira vez, às vezes pode parecer como beber de um hidrante, e há coisas que sem dúvida você não percebeu e precisa revisar. Meu objetivo com este post foi revisar alguns dos recursos do Divi que eu acho que são fáceis de perder e muito úteis para ignorar.

Você tem algum recurso que acha que deveria estar na lista? Por favor, compartilhe, tenho certeza de que todos nos beneficiaremos.

Aguardo seus comentários.