Como implementar um modo escuro em seu site Divi
Publicados: 2020-05-21O modo escuro continua a crescer em popularidade como uma opção conveniente para os usuários experimentarem a web com menos pressão sobre os olhos. Sejamos realistas, todos tendemos a gastar mais tempo olhando para as telas do que provavelmente deveríamos, então qualquer conforto adicional para a experiência do usuário (como o modo escuro) pode ser muito útil. Sistemas operacionais, programas e navegadores geralmente incluem recursos integrados de modo escuro, mas alguns desenvolvedores estão levando isso a outro nível, incluindo uma experiência de modo escuro personalizado para seus sites. A ideia é ter mais controle sobre a aparência de seu site no modo escuro, sem comprometer a marca e / ou o design.
Neste tutorial, vamos mostrar como criar um alternador de modo escuro personalizado no Divi a partir do zero, sem um plug-in. Com esta funcionalidade de alternância do modo escuro, você terá controle sobre o design do modo escuro e terá uma melhor experiência do usuário sob medida para sua marca.
Vamos começar!
Espiada
Aqui está uma rápida olhada no design que construiremos neste tutorial.
Aqui está o botão de alternância do modo escuro personalizado que iremos construir.
E aqui está o antes e o depois do modo escuro aplicado a um de nossos layouts predefinidos.
E aqui está o botão de alternância do modo escuro adicionado a um cabeçalho global. Observe como o modo claro / escuro permanece enquanto você navega no site.
Baixe o Layout GRATUITAMENTE
Para colocar suas mãos nos designs deste tutorial, primeiro você precisa fazer o download usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.
Download de graça
Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.
Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!
Para importar o layout da seção para sua biblioteca Divi, navegue até a biblioteca Divi.
Clique no botão Importar.
No pop-up de portabilidade, selecione a aba de importação e escolha o arquivo de download do seu computador.
Em seguida, clique no botão importar.
Feito isso, o layout da seção estará disponível no Divi Builder.
Vamos para o tutorial, vamos?
O que você precisa para começar
Para começar, você precisará fazer o seguinte:
- Se ainda não o fez, instale e ative o Divi Theme.
- Crie uma nova página no WordPress e use o Divi Builder para editar a página no front end (construtor visual).
- Escolha a opção “Build From Scratch”.
Depois disso, você terá uma tela em branco para começar a desenhar no Divi.
Parte 1: Construindo a Alternância do Modo Escuro
Nesta primeira parte do tutorial, vamos construir um alternador de modo escuro com uma página em Divi. Depois de criar o alternador com o código, você poderá salvá-lo na Biblioteca Divi e adicioná-lo a qualquer lugar do seu site.
Para começar, adicione uma linha de uma coluna à seção padrão enquanto constrói com Divi no front end a partir do zero.
Adicionar Blurb
Para construir o alternador personalizado, vamos projetar um módulo de blurb com um pouco de CSS personalizado.
Adicione um novo módulo blurb à linha.
Contente
Retire o conteúdo simulado padrão para o título e o corpo. Em seguida, adicione o ícone quadrado no lugar da imagem.
Projeto
Vá para as configurações de design e atualize o seguinte:
- Cor do ícone: # 666666
- Alinhamento de imagem / ícone: esquerda
- Tamanho da fonte do ícone: 22px
- Largura: 50px
- Alinhamento do Módulo: centro
- Altura: 25px
- Margem: 0px inferior
- Cantos arredondados: 4px
- Largura da borda: 2px
- Cor da borda: # 666666
CSS customizado
Depois que o design estiver pronto, vá para a guia avançada. No CSS personalizado, adicione o seguinte CSS personalizado ao elemento principal para garantir que o estouro não seja oculto pelo estilo dos cantos arredondados.
overflow: visible !important;
Em seguida, adicione o seguinte CSS personalizado ao elemento Depois:
content: "light"; position: absolute; left: -35px; top:0px;
Isso adiciona um rótulo ao módulo de sinopse que mudaremos de "claro" para "escuro" com o clique.
Design do corpo do texto
Como o texto no pseudoelemento posterior herda os estilos do corpo do texto, podemos adicionar os estilos do corpo do texto usando as opções Divi da seguinte maneira:
- Fonte do corpo: Roboto
- Cor do corpo do texto: # 666666
- Tamanho do corpo do texto: 13px
- Espaçamento entre letras do corpo: 1px
Adicionar código personalizado com um módulo de código
Para adicionar o código necessário (CSS / JQuery) para fazer com que o alternador do modo escuro funcione sua mágica, usaremos um módulo de código.
Crie um novo módulo de código no módulo blurb na mesma coluna.
Em seguida, cole o seguinte código na caixa de código:
<style>
/**
* Dark Mode Toggle Styles
*/
.et-dark-mode {
transition: all .5s;
}
.et-dark-toggle {
cursor: pointer;
transition: all .5s;
}
body.et-dark-mode .et-dark-toggle {
border-color: #666666;
}
body.et-dark-mode .et-dark-toggle:after {
content:"dark";
color: #666666;
left: 54px;
}
body.et-dark-mode .et-dark-toggle .et_pb_blurb_content {
text-align:right;
}
body.et-dark-mode .et-dark-toggle .et-pb-icon {
color: #666666;
}
/**
* Body Dark Mode Style
*/
body.et-dark-mode {
background-color: #23282d !important;
}
/**
* Divi Element Dark Mode Styles
*
* Here you can add styling for each Divi Element that has the class "et-dark-mode-capable".
*/
/* Section with dark mode */
.et_pb_section.et-dark-mode-capable.et-dark-mode {
background-color: #23282d !important;
background-blend-mode: overlay;
transition: opacity .5s ease-in-out;
color: #dddddd !important;
}
/* Row with dark mode */
.et_pb_row.et-dark-mode-capable.et-dark-mode {
background-color: #23282d !important;
color: #dddddd !important;
}
/* Column with dark mode */
.et_pb_column.et-dark-mode-capable.et-dark-mode {
background-color: #23282d !important;
color: #dddddd !important;
}
/* Module with dark mode */
.et_pb_module.et-dark-mode-capable.et-dark-mode {
background-color: transparent !important;
color: #dddddd !important;
}
/* Text Headings with dark mode */
.et_pb_module.et-dark-mode-capable.et-dark-mode.et_pb_module_header,
.et_pb_module.et-dark-mode-capable.et-dark-mode h1,
.et_pb_module.et-dark-mode-capable.et-dark-mode h2,
.et_pb_module.et-dark-mode-capable.et-dark-mode h3,
.et_pb_module.et-dark-mode-capable.et-dark-mode h4,
.et_pb_module.et-dark-mode-capable.et-dark-mode h5,
.et_pb_module.et-dark-mode-capable.et-dark-mode h6 {
color: #dddddd !important;
}
</style>
<script>
function storageAvailable(type) {
try {
var storage = window[type],
x = '__storage_test__';
storage.setItem(x, x);
storage.removeItem(x);
return true;
}
catch(e) {
return e instanceof DOMException && (
// everything except Firefox
e.code === 22 ||
// Firefox
e.code === 1014 ||
// test name field too, because code might not be present
// everything except Firefox
e.name === 'QuotaExceededError' ||
// Firefox
e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
// acknowledge QuotaExceededError only if there's something already stored
storage.length !== 0;
}
}
jQuery(document).ready(function($) {
var storageAvailable = window.storageAvailable('sessionStorage');
$(".et-dark-toggle").click(function() {
$(".et-dark-mode-capable,body").toggleClass("et-dark-mode");
if ( storageAvailable ) {
$("body").hasClass("et-dark-mode") ?
sessionStorage.setItem('etDarkModeEnabled','1'):
sessionStorage.removeItem('etDarkModeEnabled');
}
});
if (storageAvailable) {
'1' == sessionStorage.getItem('etDarkModeEnabled') ?
$(".et-dark-mode-capable,body").addClass("et-dark-mode"):
$(".et-dark-mode-capable,body").removeClass("et-dark-mode");
}
});
</script>
Adicionando as classes CSS personalizadas
O código personalizado requer que você tenha uma classe CSS personalizada adicionada ao módulo ou alternador blurb. Isso permitirá que a sinopse acione a alternância do modo escuro e a funcionalidade ao clicar.
Classe de Módulo Blurb
Abra as configurações do módulo blurb e adicione uma classe CSS personalizada da seguinte maneira:
- Classe CSS: et-dark-toggle
Classe capaz de modo escuro
Também precisamos adicionar uma classe CSS personalizada a cada elemento Divi que desejamos ter a capacidade de modo escuro. Assim que o elemento tiver a classe CSS, esse elemento herdará o CSS personalizado de “modo escuro” no código que adicionamos depois que o modo escuro for ativado. Este método nos dá mais controle sobre nosso design de modo escuro, pois alguns elementos podem não exigir nenhum estilo de modo escuro.
Para começar, podemos adicionar o modo escuro à seção que contém nosso seletor de modo escuro.
Abra as configurações da seção e adicione a seguinte classe CSS:
- Classe CSS: compatível com o modo et-dark
Parte 2: Adicionando Funcionalidade do Modo Escuro a uma Página Divi
Agora que temos o código e as classes CSS no lugar, estamos prontos para aplicar a funcionalidade e design do modo escuro a uma página inteira no Divi. Para fazer isso, usaremos nosso layout predefinido da página de destino do aplicativo móvel.
Para incluir o layout, abra o menu de configurações na parte inferior do construtor visual e clique no ícone Incluir Novo Layout.
Em seguida, selecione o layout da página inicial do aplicativo móvel na guia de layouts predefinidos.
Certifique-se de que a opção “Substituir conteúdo existente” NÃO esteja selecionada. Você não deseja apagar a seção com a alternância do modo escuro.
Uma vez que o estilo do modo escuro só se aplicará a elementos com a classe CSS “capaz de modo et-escuro”, podemos escolher adicionar à página de algumas maneiras diferentes.
- Podemos adicionar a classe CSS a cada elemento da página individualmente.
- Poderíamos estender a classe CSS para elementos em toda a página (isso seria mais rápido do que fazer cada um manualmente). Por exemplo, poderíamos abrir as configurações de seção da seção superior e estender a classe CSS dessa seção a todas as seções da página.
- Podemos adicionar a classe CSS aos padrões globais do elemento. Isso aplicará a classe CSS a todos os elementos de todo o site, adicionando o recurso de modo escuro em todo o site. Por exemplo, poderíamos abrir as configurações da seção e clicar no ícone padrão global para editar os Padrões da seção global. Em seguida, podemos adicionar a classe CSS e salvá-la como uma classe CSS para todas as seções do site.
Adicionando a classe CSS aos elementos da página
Para este exemplo, vamos atualizar os elementos da página adicionando a classe CSS aos padrões globais para as seções e módulos de texto. E também faremos alguns acréscimos aos outros elementos da página conforme avançamos.
Todas as Seções
Para adicionar a classe CSS a todas as seções, abra as configurações da seção superior que contém o alternador de modo escuro. Em seguida, edite os padrões globais para a seção e adicione a seguinte classe CSS aos Padrões globais da seção:
- Classe CSS: compatível com o modo et-dark
Todas as seções especiais
Adicione a classe CSS aos padrões globais da seção de especialidade também.
Módulos de Texto
Em seguida, abra as configurações de um dos módulos de texto na página e adicione a mesma classe CSS aos Padrões globais de texto.
Blurbs
Em seguida, abra as configurações de uma das sinopses no layout da página e adicione a classe CSS aos padrões globais do Blurb.
Colunas de depoimentos
Mais abaixo no layout da página, há alguns depoimentos, cada um dentro de uma coluna com um fundo branco personalizado. Para substituir os estilos de coluna no modo escuro, adicione a classe CSS a uma das colunas e estenda-a para as outras colunas da linha.
NOTA: Não é uma boa ideia adicionar a classe CSS aos padrões globais da coluna porque isso quebrará alguns dos elementos de design (ou seja, não é uma boa ideia dar a todas as colunas um fundo escuro quando na maioria das vezes os fundos das colunas são transparentes).
Para testar o resultado, vá para a página ativa e clique no botão de alternância do modo escuro na parte superior da página.
Aqui está a aparência da página no modo claro.
E aqui está a aparência da página no modo escuro.
Parte 3: Adicionando o Modo Escuro Alternar para um Cabeçalho Global
Se você deseja estender a funcionalidade do modo escuro para todo o site, seria uma boa ideia adicionar a alternância do modo escuro para seu Divi Global Header. Dessa forma, ele estará disponível para os usuários em todo o site em um local conveniente.
Salvando o modo escuro e o código na biblioteca Divi
Mas antes de fazer isso, precisamos salvar a alternância do modo escuro e o código na Biblioteca Divi. Isso tornará mais fácil adicionar outras áreas do nosso site, incluindo o cabeçalho global.
Volte para o layout que construímos com Divi implantado no front end. Em seguida, abra o menu do módulo blurb usado para construir a alternância do modo escuro e selecione salvar na biblioteca. Dê um nome ao layout e salve-o na biblioteca.
Em seguida, salve o módulo de código na biblioteca Divi também.
Importando um modelo de cabeçalho global pré-fabricado
Se você ainda não tem um cabeçalho global, precisará criar o seu próprio ou usar um de nossos pacotes de construtor de temas predefinidos.
Para este tutorial, usaremos o cabeçalho global incluído no quinto pacote de construção de tema. Para adicionar o cabeçalho global usando o criador de tema, você precisará baixar o pacote do criador de tema e, em seguida, usar as opções de portabilidade para importar o arquivo JSON chamado “divi-theme-builder-pack-5-default-website-template.json” .
Uma vez que o modelo foi carregado, clique para editar o Cabeçalho Global.
Em seguida, adicione a alternância de modo escuro da biblioteca para a coluna 1 na segunda linha do cabeçalho.
No módulo de alternância / sinopse do modo escuro, adicione o módulo de código que você salvou na biblioteca diretamente sob o botão de alternância do modo escuro.
Como temos a classe CSS “et-dark-mode-capaz” como padrão para todas as seções, as seções dentro do cabeçalho também a terão por padrão. Para desabilitar isso, basta atribuir a ele uma classe CSS de substituição.
Resultados finais
Aqui estão os resultados finais de nossa página de alternância do modo escuro.
E aqui está o botão de alternância do modo escuro no cabeçalho. O modo selecionado (escuro ou claro) permanecerá enquanto você navega para outras páginas do site.
Ajustando os estilos de modo escuro CSS personalizado
Se quiser ajustar o estilo do modo escuro dos elementos toggle ou Divi, você precisará fazer isso dentro do código dentro do módulo de código.
O código atualmente tem apenas um estilo de modo escuro básico aplicado a cada um dos elementos uma vez no modo escuro. Consiste em uma cor de fundo escura e uma cor de texto clara.
Pensamentos finais
Equipar seu site Divi com um alternador de modo escuro personalizado pode ser uma ótima maneira de impulsionar a experiência do usuário e criar um design totalmente novo que agrada e acalma os olhos. Esperançosamente, será útil para você.
Estou ansioso para ouvir de você nos comentários.
Saúde!