O guia definitivo para o personalizador de temas Divi

O Divi Theme Customizer é uma ferramenta poderosa e conveniente para fazer personalizações no Divi Theme. Como o Visual Builder, o Divi Theme Customizer permite personalizações visuais de front-end e alterações de design que eliminam o jogo de adivinhação do processo de personalização. Se usada com eficiência, essa ferramenta pode economizar muito tempo e ser um grande impulso para projetos futuros.

A postagem de hoje tem o objetivo de ajudá-lo a entender melhor como o Theme Customizer funciona para que você possa usá-lo para aumentar a produtividade em projetos futuros. Abordo quase todas as opções disponíveis no Theme Customizer, com ênfase nas opções que são específicas do Divi. De certa forma, este post serve como uma peça de documentação que oferece algumas explicações detalhadas e dicas de design ao longo do caminho. Também mostrarei como exportar as configurações do Customizer para usar em seu próximo projeto.

Temos muito a cobrir, então vamos começar do início.

Desenvolvido com WordPress em mente

O tema Customizer foi introduzido no WordPress 3.4. Esse recurso conveniente permite que os usuários do WordPress visualizem as alterações feitas em seus temas em tempo real e, em seguida, salvem essas alterações com um clique. O que costumava levar várias janelas e incontáveis ​​atualizações, agora pode ser feito rapidamente em uma janela do navegador.

Aqui está um exemplo das opções do Theme Customizer no tema TwentySeventeen:

Como você pode ver, muitos dos recursos do WordPress que costumavam residir em páginas diferentes no back-end do WordPress (Identidade do site, menus, widgets, etc ...) agora podem ser acessados ​​neste personalizador de front-end em um só lugar.

Por outro lado, o Divi Theme Customizer foi construído como uma versão aprimorada deste Theme Customizer com todos os tipos de opções específicas do Divi. Para os usuários, isso torna o processo de personalização do Divi muito mais fácil. E o fato de que você pode realmente ver as personalizações durante a edição (simultaneamente) torna esta uma ferramenta de design conveniente.

O Divi Theme Customizer ainda tem muitas das opções padrão do WordPress Customizer, mas também tem muito mais.

Como você pode ver, há muito mais configurações que foram adicionadas ao Divi Theme Customizer. Agora vamos começar a explorá-los com mais profundidade.

Configurações Gerais

Quando você começa a personalizar seu tema, acho que é melhor começar pelo topo com as Configurações Gerais e ir descendo.

Identidade do Site

Esta seção não é exclusiva da Divi. Este é um lugar conveniente para alterar o título e o slogan do seu site. Você também pode inserir um ícone de site que é usado para navegadores e aplicativos, diferente do ícone de favicon que você pode adicionar em Divi Theme Options.

Configurações de Layout

As configurações de layout permitem que você ajuste a estrutura do seu tema determinando quanto espaço existe entre as seções e linhas e qual será a largura máxima da sua seção de conteúdo principal.

ATIVAR LAYOUT EM CAIXA

Aqui você pode transformar seu site em um layout de caixa que enquadra o conteúdo do seu site e expõe um plano de fundo que pode ser personalizado.

LARGURA DO CONTEÚDO DO SITE

É aqui que você pode definir a largura máxima de sua seção de conteúdo. Como seu conteúdo está em um layout responsivo, ele se ajustará a tamanhos menores, mas não se expandirá além da largura máxima definida aqui.

O padrão é 1080px. Esta é uma boa largura para a maioria dos laptops e desktops padrão.

LARGURA DA CALHA DO SITE

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.

USE A LARGURA DA BARRA LATERAL PERSONALIZADA

Isso define a largura padrão da barra lateral para o seu tema. Isso se aplica a todas as páginas do seu tema que possuem uma barra lateral e não foram criadas com o Divi Builder.

SEÇÃO E ALTURA DA LINHA

Essas opções ajustam a quantidade de espaçamento vertical (preenchimento superior e inferior) para cada seção e linha.

Por padrão, o preenchimento da seção é de 50 px na parte superior e inferior . Para a linha, o preenchimento padrão é 30 px na parte superior e inferior . No entanto, ao alterar a seção ou o preenchimento da linha usando o Personalizador, o valor do preenchimento se transforma em uma porcentagem que corresponde ao número no disco de opções no personalizador de tema.

Por exemplo, “0” representa 0% do preenchimento superior e inferior, “1” representa 1% do preenchimento superior e inferior, “2” representa 2% e assim por diante. A porcentagem de preenchimento é baseada na largura do contêiner (a seção ou linha). Portanto, se a largura real da seção é 1080px e você definiu a altura da seção para 1, isso significa que você terá ...

1080px x 0,01 = 10,8px

… 10.8 px de preenchimento na parte superior e inferior.

As opções variam de 0 a 10, portanto, você pode ter até 10% de preenchimento.

TEMA ACCENT COLOR

Antes de começar a alterar as cores de seus outros elementos, você deve alterar isso primeiro . Depois de alterá-lo, salve e publique suas configurações e atualize sua página. Agora, a cor de destaque do tema atualizada deve ter preenchido outros elementos automaticamente.

Atualizar a cor de destaque do tema também atualizará o seguinte:

• Cor do Link do Corpo
• Cor do cabeçalho do widget
• Cor do marcador do widget
• Cor flutuante dos ícones sociais do rodapé
• Cor padrão para ícones
• Cor do link ativo do menu do rodapé
• Cor de fundo do menu secundário
• Slide In e cor de fundo do estilo do cabeçalho em tela cheia
• Ícone de menu de hambúrguer para a cor do menu móvel
• Cor do link ativo do menu principal
• Cor da linha do menu suspenso
• Cor de fundo do menu secundário
• Cor de fundo do menu suspenso secundário
• Cor de fundo do menu secundário
• Cor do link do menu principal ativo
• Cor do link ativo do menu do rodapé

Tipografia

Este é um dos aspectos mais importantes do seu site, que tende a ser negligenciado pelos usuários e desenvolvedores. Não cometa o erro de ignorar essas opções. Acertar esses detalhes pode fazer uma grande diferença. Dedicar um tempo para definir a tipografia padrão para o seu tema também pode economizar tempo a longo prazo, porque você não terá que fazer personalizações no nível do módulo.

TAMANHO DO TEXTO DO CORPO

Isso altera o texto do corpo padrão do seu tema. O tamanho padrão é 14 px.

Dica de design: parece que 14px é um pouco pequeno demais para um tamanho de corpo de texto padrão. Você realmente não deve usar menos de 16 px para o tamanho da fonte do corpo de nível básico. Aqueles de nós com quase 40 anos de idade ou mais vão agradecer. Mesmo a maioria dos navegadores usa 16px como seu tamanho de fonte de nível básico padrão.

ALTURA DA LINHA CORPORAL

A altura da linha de cada linha individual de texto.

Dica de projeto : a altura da linha é medida no valor de comprimento “em”. O padrão da Divi é 1.7em para o corpo do texto. Este valor em é melhor do que um valor de pixel (px) porque é baseado no tamanho da fonte atual do elemento e, portanto, é dimensionado com o valor sequencial pai (ou em nosso caso, o tamanho da fonte atual). O valor “1.7em” basicamente representa 1,7 vezes o tamanho da fonte atual. Portanto, se o tamanho da fonte atual for 16 px, a altura da linha será 27,2 px. Isso dá a você 5,6 pixels de espaço extra na parte superior e 5,6 pixels na parte inferior. Este parece ser um bom início (espaço entre as linhas da cópia) para facilitar a leitura.

TAMANHO DO TEXTO DO CABEÇALHO

Divi permite que você defina o tamanho do texto do cabeçalho h1 padrão aqui. Isso afeta os elementos do Divi, como os títulos do Módulo do cabeçalho Fullwidth. Se você quiser ajustar o tamanho dos outros níveis de cabeçalho (h2, h3, etc ...), sugiro adicioná-los em CSS adicional (isso será abordado posteriormente no post).

Dica de design: na maioria dos casos, você terá apenas um cabeçalho por página, portanto, faça valer a pena. Pense nisso como o título da capa de um livro. É a primeira coisa que uma pessoa nota. E, ao contrário do slogan popular, as pessoas ainda julgam os livros pelas capas, principalmente neste caso.

O valor padrão para o tamanho do texto do cabeçalho é 30px. Este é um bom tamanho seguro para começar. Especialmente porque alguns títulos exigem uma cópia mais longa. No entanto, eu tendo a gravitar para um tamanho de cabeçalho maior para acomodar o tamanho crescente dos monitores. Além disso, a maioria dos clientes precisa de sites com títulos simples e curtos, como “Sobre nós” e “Fale conosco”, que fica melhor com tamanhos de fonte maiores. Eu gosto de definir meus cabeçalhos h1 para pelo menos 48 px .

ESPAÇO DA LETRA DE CABEÇALHO

O espaçamento entre letras ajusta o espaço horizontal entre as letras. O valor do espaçamento entre letras do cabeçalho afeta todos os níveis de cabeçalho (h1, h2, h3, h4, h5, h6), aspas em bloco e os títulos dos slides.

Dica de design: É uma boa técnica de design diminuir o espaçamento entre letras para textos maiores e aumentar o espaçamento entre letras para textos menores . Quando se trata de cabeçalhos, o texto maior com uma espessura de fonte maior (negrito) pode parecer melhor com um espaçamento de letra menor de -1 px.

No entanto, se você colocar o mesmo cabeçalho em maiúsculas, poderá descobrir que aumentar o espaçamento entre letras para 1-2px ficará melhor.

HEADER LINE HEIGHT

Assim como para o valor de espaçamento entre letras, o valor da altura da linha do cabeçalho afeta todos os níveis do cabeçalho (h1, h2, h3, h4, h5, h6), aspas em bloco e os títulos dos slides. Por causa do tamanho da fonte maior, 1em é a configuração padrão. Acho que uma altura de linha em algum lugar entre 1em e 1,3em parece boa, especialmente quando o cabeçalho chega a duas linhas ou mais.

HEADER FONT STYLE

Use essas opções para alterar o estilo da fonte de seus cabeçalhos.

HEADER AND BODY FONT

A fonte padrão no Divi é Open Sans , mas o Divi Theme Customizer tem quase uma centena de fontes para você escolher! Aproveite as vantagens dessas fontes integradas e teste quais funcionam melhor para o seu tema.

Dica de design: para obter inspiração para pares de fontes, você pode verificar fontpair.co, que ajuda a emparelhar Google Fonts. O Divi não oferece suporte a todas essas fontes fora da caixa, mas você pode pesquisar aquelas que o Divi oferece suporte para ver os pares que funcionam bem juntos.

COR DO LINK DO CORPO

A cor do link do corpo é herdada pela cor de destaque do tema. Mas você sempre pode alterá-lo aqui.

Dica de design: Se desejar, você pode adicionar um atributo de sublinhado para todos os links do seu corpo usando CSS adicional (consulte o final da postagem).

COR DO TEXTO DO CORPO

Aqui você pode alterar a cor do corpo do texto. Blogs populares como o New York Times e a Smashing Magazine usam # 333333 para a cor do corpo do texto. Em minha opinião, isso tende a ser melhor lido em um fundo branco.

COR DO TEXTO DO CABEÇALHO

Aqui você pode alterar a cor dos seus cabeçalhos. Se você estiver usando um tom de preto, eu ficaria um pouco mais escuro do que o corpo do texto para torná-lo um pouco mais destacado. Algo como # 121212 funcionaria.

Fundo

Esta opção define o plano de fundo do seu tema. Para o Tema Divi, esta opção realmente se aplica apenas ao layout da caixa . A cor de fundo padrão é branco (#ffffff) a menos que você altere aqui. Você também pode adicionar uma imagem de fundo, se desejar.

Isso é tudo para as configurações de layout. Depois de ter o layout no lugar, você pode começar a olhar para elementos mais específicos.

Cabeçalho e navegação

O cabeçalho e o menu de navegação são provavelmente o elemento mais importante do seu tema. Esta seção tem várias opções para criar quase qualquer tipo de cabeçalho que você quiser.

Formato de cabeçalho

Estilo de cabeçalho

Os quatro estilos de cabeçalho podem dar ao seu site uma aparência totalmente nova com apenas um clique. Esses estilos incluem Centralizado, Logotipo centralizado em linha, Deslizante e Tela inteira.

Você também pode adicionar navegação vertical ao seu site, que pode ser um recurso exclusivo. E você pode optar por ocultar a navegação até rolar. Isso seria útil para um site de página única que deseja destacar mais conteúdo acima da dobra sem a distração da barra de navegação.

Barra de Menu Principal

Sua barra de menu principal é o menu principal dentro do cabeçalho do seu site. Você pode personalizar completamente a aparência do seu menu principal.

Dica de design: Você realmente precisa saber quais serão os links do seu menu antes de começar a aperfeiçoá-lo com o Divi Theme Customizer. Não se esqueça de que você vai estilizar um menu responsivo, então reserve um tempo para garantir que o menu tenha uma ótima aparência em todos os tamanhos de tela. Você pode fazer isso clicando nos ícones do dispositivo na parte inferior do personalizador ou simplesmente ajustando o tamanho do seu navegador. Se você estiver interessado, pode descobrir como consertar sua navegação responsiva aqui.

Faça a largura total

Isso estende o menu por toda a largura da janela do navegador.

Ocultar imagem do logotipo

Se desejar, aqui você pode ocultar completamente a imagem do logotipo do seu menu.

Altura do Menu

Aqui você pode alterar a altura do menu para o que quiser. No entanto, tome cuidado para não deixar a altura do menu muito grande, pois você pode estar desperdiçando um espaço valioso em um menu em vez do conteúdo da página inicial.

Altura máxima do logotipo

Aqui você pode aumentar ou diminuir a porcentagem de largura máxima de seu logotipo para torná-lo maior ou menor.

Tamanho do texto, espaçamento entre letras, fonte, estilo da fonte, cor do texto, cor do link ativo

Essas opções permitem que você personalize os links do menu da maneira que desejar.

Cor de fundo

Isso permite que você altere a cor de fundo do seu menu principal.

Dica de design: Se você usar as cores semitransparentes (ou completamente transparentes) para o seu cabeçalho, o Divi irá sobrepor automaticamente o cabeçalho na seção abaixo, aparentemente sem problemas. Isso cria um efeito muito legal. Por exemplo, este é um estilo de cabeçalho centralizado com um fundo transparente e um cabeçalho de largura total diretamente abaixo dele. Observe como Divi ajusta automaticamente a imagem de plano de fundo para caber bem atrás do cabeçalho:

Configurações do menu suspenso

Seu menu suspenso não precisa herdar o estilo do menu principal. Aqui você pode criar um design exclusivo para o seu menu suspenso. Você pode até adicionar animação personalizada ao exibir o menu suspenso.

Barra de Menu Secundária

Aqui você pode personalizar sua barra de menu secundária usando as opções fornecidas.

Quando ativada, a barra de menu secundária fica acima da barra de menu principal, na parte superior do navegador. Ele pode conter elementos adicionais, incluindo um endereço de e-mail, links de mídia social e um menu secundário.

Por padrão, o menu secundário permanecerá oculto, a menos que você entre em um menu secundário ou adicione elementos na seção Elementos do cabeçalho. Pode ser necessário salvar e atualizar o personalizador de tema para ver o menu.

Configurações de navegação fixas

Navegação fixa refere-se ao estado do menu sendo "fixo" ou preso na parte superior da janela do navegador quando o usuário rola a página para baixo. Por padrão, a altura da navegação fixa diminui para fornecer uma janela de visualização maior para exibir o conteúdo do site.

Dica de design: você também pode definir a cor de fundo fixa do menu principal para uma cor semitransparente para revelar parte do conteúdo por trás dela. Isso o torna ainda menos intrusivo, mas ainda acessível.

Elementos de Cabeçalho

Os elementos do cabeçalho são elementos adicionais que você pode adicionar ao seu cabeçalho. Esses elementos incluem ícones sociais, um ícone de pesquisa, um número de telefone e um e-mail. Além do ícone de pesquisa, todos esses elementos serão exibidos no menu secundário.

Ícones Sociais

Por padrão, Divi exibe ícones para Facebook, Twitter, Google+ e RSS. Você pode editar esses perfis nas Opções de tema do Divi.

Rodapé

Por padrão, a seção de rodapé fica oculta, a menos que seja preenchida por conteúdo. Além disso, o rodapé não deve ser confundido com a Barra Inferior, que é exibida na parte inferior do site por padrão e inclui os créditos do rodapé e os ícones sociais.

Layout

Aqui você pode escolher entre 5 layouts para sua seção de rodapé.

Você também pode definir uma cor de fundo do rodapé, que é definida como # 222222 por padrão.

Dica de design: esta seção será exibida em todas as páginas do seu site (a menos que você escolha um modelo de página em branco). Portanto, faz sentido tornar a cor mais neutra para que corresponda a todas as páginas do seu site.

Widgets

Se você adicionou widgets às suas Seções de rodapé, pode definir o estilo desses widgets aqui.

Os widgets não são exclusivos da Divi. Eles são integrados ao wordpress e podem ser encontrados no painel do wordpress em Aparência> Widgets . Lá você pode ver quatro áreas de rodapé onde você pode adicionar widgets. Todos os widgets que você adicionar a essas seções serão exibidos na área do rodapé.

No entanto, você também pode acessar as áreas de widget sem nunca ter que sair do personalizador de tema (uma das minhas coisas favoritas sobre ele).

Elementos de rodapé

Aqui você pode escolher mostrar seus ícones sociais na barra inferior, assim como no menu secundário.

Menu de Rodapé

Se você tiver um menu de rodapé, pode estilizá-lo aqui.

Barra Inferior

A barra inferior fica na parte inferior do seu site e exibe seus créditos de rodapé e ícones sociais por padrão. Aqui você pode personalizar o estilo desses elementos, incluindo a alteração do tamanho e da cor da fonte do ícone social.

Editar Créditos de Rodapé

Você também pode substituir os créditos padrão do rodapé por qualquer html que desejar dentro desta caixa.

Botões

Esta seção controla o que você deseja que sejam os estilos de botão padrão.

Estilo de Botões

Aqui você pode personalizar o estilo dos botões para o seu tema. Não vou entrar em muitos detalhes sobre cada opção aqui. Você pode consultar nossa documentação sobre o módulo de botão para obter mais informações sobre como estilizar botões.

Cor do texto

Se você notar, por padrão, a cor do botão é herdada pela Cor de destaque do tema definida nas Configurações gerais. Isso é apenas para módulos que têm seu texto definido como “escuro”. E os botões ficam brancos quando o texto do módulo é definido como “claro”. Mas, assim que você definir uma cor de texto personalizada para os botões, essa cor será definida para as versões de texto claro e escuro em um determinado módulo.

Dica de design: deixe a cor de destaque do tema definir a cor do texto dos botões para que você possa manter a capacidade de adicionar versões claras e escuras de seu botão nos módulos.

Estilo de flutuação dos botões

É aqui que você pode personalizar o estilo do estado de foco dos botões.

É importante que os usuários entendam que o que eles estão prestes a clicar é na verdade um botão. Adicionar um efeito de foco solidifica isso nas mentes e os incentiva a interagir. Por padrão, o Divi adiciona um fundo claro e anima um ícone de seta à direita. Mas, você pode alterá-lo para o que quiser.

Dica de design: Mudar o fundo para uma cor mais escura ou mais clara não é tão importante quanto certificar-se de que o botão muda de alguma forma. Você também pode aumentar o espaçamento entre letras ou ajustar o raio da borda para dar ao botão um efeito exclusivo ao pairar.

Blog

Publicar

Esta seção muda o estilo do conteúdo do cabeçalho da postagem em uma única postagem. Isso não altera a aparência dos trechos do seu blog na página ou módulo do blog. Às vezes, os cabeçalhos da postagem do seu blog precisarão ser diferentes dos cabeçalhos do restante do site. É aqui que você faria esses ajustes.

Se você optar por usar o Módulo de cabeçalho de postagem, essas opções não serão eficazes.

Estilos móveis

Eu amo essa seção. Aqui você pode ajustar a aparência do seu site em dispositivos móveis e ver os resultados em tempo real.

Estilos de tablet e telefone

Você pode selecionar Tablet ou Telefone e a janela à direita do Customizador se ajustará automaticamente para mostrar a aparência da página no dispositivo. Assim como fizemos em Configurações Gerais em Layout, você pode ajustar a Altura da Seção, Altura da Linha, Tamanho do Corpo do Texto e Tamanho do Texto do Cabeçalho.

Dica de design nº 1: uma personalização que gosto de fazer para layouts de telefone é definir a altura da linha como “0”. Isso cria um melhor fluxo de conteúdo ao rolar em um telefone, pois elimina o espaçamento entre as linhas.

Dica de design nº 2: encontre uma escala de fonte que funcione para o seu site. Aqui está um bom que eu gosto de seguir para meus cabeçalhos:

Desktop: 48px

Tablet: 40px

Telefone: 32px

Menu móvel

Não se esqueça disso ou você pode perder a criação de um cabeçalho totalmente exclusivo para o menu do seu celular. Você pode ocultar o logotipo apenas em dispositivos móveis e alterar as cores do fundo e do texto.

Esquema de cores

Isso pode ser conveniente para uma solução rápida. Mas eu não aconselharia usar os esquemas de cores se você planeja alterar algumas dessas cores mais tarde no personalizador de tema. Depois de definidas, essas cores não podem ser substituídas no Customizador porque o CSS gerado contém a regra! Important.

Em minha opinião, é melhor deixar essa configuração como padrão.

Menus e widgets

Você não precisa mais editar cegamente seus menus ou widgets no painel do wordpress. Agora você pode adicionar e personalizar esses itens e vê-los ganhar vida em sua página em tempo real. Eu amo a conveniência!

Página inicial estática

Por padrão, o WordPress exibe sua postagem mais recente na página inicial (página inicial). Você pode alterar para qualquer página estática que desejar nesta seção. E você também pode designar sua página de posts (ou página de blog).

Eu não sabia disso até escrever este post, mas você pode realmente implantar uma nova página de dentro do Customizador de Tema para servir como sua Página Inicial ou Página de Blog sem nunca ter que sair do Customizador.

CSS Adicional

A seção CSS adicional oferece uma grande oportunidade de dar os toques finais na configuração do seu tema. Quaisquer mudanças de estilo que o Divi Theme Customizer não pode controlar, você pode fazer aqui com algum CSS personalizado. Como o Customizer permite que você veja as mudanças CSS em tempo real, você pode fazer os ajustes necessários em seu tema muito mais facilmente do que ir e voltar em uma folha de estilo externa.

Exemplos adicionais de CSS

Exemplo # 1: ajustar o tamanho de todos os cabeçalhos

Um bom exemplo de CSS adicional seria o estilo de suas tags de cabeçalho restantes. Divi permite que você personalize a configuração de sua fonte de título, mas isso é apenas para seus cabeçalhos h1. Você pode usar a caixa CSS adicional para inserir o restante das personalizações de tags de cabeçalho (h2, h3, h4, etc ...). Gosto de usar a seguinte escala: 16, 18, 21, 24, 36, 48.

h2 {
	font-size: 36px;
}

h3 {
	font-size: 24px;
}

h4 {
	font-size: 21px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

Exemplo # 2: coincidir o preenchimento do parágrafo inferior com a altura da linha do corpo

Se você definir a altura da linha do texto do corpo para 1,7em, você também pode querer definir o mesmo valor para o seu preenchimento inferior entre os parágrafos, a fim de manter uma grade de linha de base consistente e um ritmo vertical. Em outras palavras, a distância entre os parágrafos é igual à altura da linha. Para fazer isso, você simplesmente adicionaria o seguinte:

p { padding-bottom: 1.7em}

Como o valor de comprimento em é baseado no tamanho da fonte pai, se você alterou o tamanho da fonte base para outra coisa no personalizador de tema, o valor 1.7em se ajustará de acordo.

Exemplo # 3: Adicionar Atributo de Sublinhado a Seus Links

Adicione o atributo sublinhado aos links do corpo.

a {
    text-decoration: underline;
}

Exportando e importando as configurações do Divi Customizer para o seu próximo projeto

O Divi Theme Customizers tem uma opção de portabilidade que permite aos usuários exportar ou importar as configurações do Customizer. Isso apresenta uma grande oportunidade para os desenvolvedores fazerem uma espécie de modelo de configuração do personalizador para usar em seus projetos futuros.

Em primeiro lugar, sugiro que você reserve um tempo para descobrir quais personalizações você tende a fazer ao construir um site. Depois de identificar essas configurações, você pode inserir essas personalizações no Divi Theme Customizer e, em seguida, exportar essas configurações para que você tenha uma vantagem inicial em seus próximos projetos. Por que continuar fazendo as mesmas coisas indefinidamente quando você já pode ter feito? Além disso, isso ajudará a garantir que você não ignore nenhuma personalização importante.

Para exportar suas configurações, clique no ícone de portabilidade na parte superior do Divi Theme Customizer.

Dê a você um nome para o arquivo de exportação e clique no botão “Export Divi Customizer Settings”

Agora você pode usar este arquivo .json no futuro clicando no mesmo ícone de portabilidade no Divi Theme Customizer e selecionando Import em vez de exportar. Então, tudo que você precisa fazer é carregar o arquivo .json e clicar em “Import Divi Customizer Settings”.

E é isso.

O que as configurações do Divi Customizer incluem?

As configurações do personalizador incluem basicamente tudo nas primeiras 7 seções.

1. Configurações Gerais
2. Cabeçalho e navegação
3. Rodapé
4. Botões
5. Blog
6. Estilos móveis
7. Esquema de cores

As últimas 4 seções são específicas para WordPress e não serão transferidas para outras instalações Divi. Essas seções incluem:

1. Menus
2. Widgets
3. Página inicial estática
4. CSS Adicional

É importante observar que o CSS Adicional não é transferido. Você pode estar contando com essas configurações para aumentar a economia de tempo em sua próxima construção. Se for esse o caso, sugiro criar um tema filho com esse CSS para que você possa adicioná-lo com as configurações do personalizador em seu próximo projeto.

Como os estilos do Divi Customizer são armazenados

Para o Divi Customizer (junto com Divi Options e Divi Builder), o Divi oferece recursos CSS estáticos que podem ser armazenados em cache pelos navegadores para diminuir o tempo de carregamento da página. Isso significa que os estilos não são impressos na página, mas armazenados em um arquivo CSS estático separado. Sempre que você salva as configurações do personalizador, o arquivo CSS estático é atualizado. Isso inclui qualquer CSS adicional que você também tenha adicionado.

Reflexões finais

O Divi Theme Customizer vem com algumas opções bastante poderosas e o processo de personalização é conveniente e agradável de trabalhar. E obter uma compreensão mais profunda do que essas opções podem fazer certamente melhorará a maneira como você constrói sites com Divi. Se ainda não o fez, reserve um tempo para explorar quais seriam suas configurações de linha de base ideais para um projeto, conecte-as ao Customizador e crie um arquivo de exportação. Você ficará surpreso com o impulso (e confiança) que isso lhe dará ao iniciar um novo projeto.

Estou ansioso para ouvir de você nos comentários.

Saúde!