Como criar caixas de conteúdo estilizado no Divi para dicas, informações, avisos e muito mais (download GRATUITO)
Publicados: 2021-06-20Caixas de conteúdo estilizadas para coisas como dicas, avisos e outras informações importantes são recursos úteis para qualquer site ou blog. Eles são uma maneira eficaz e conveniente de apresentar conteúdo importante com um design consistente que os usuários irão apreciar. Por exemplo, você pode precisar de um design de caixa de conteúdo para destacar uma dica importante em um tutorial ou para alertar os usuários sobre um problema potencial.
Neste tutorial, vamos mostrar como construir 3 designs de caixa de conteúdo no Divi. Esses designs de caixa de conteúdo podem ser facilmente ajustados com novos ícones, esquemas de cores e / ou conteúdo para atender a qualquer necessidade. Assim que mostrarmos como projetar as caixas, mostraremos como você pode usar as predefinições globais do Divi para facilitar a implantação de uma nova caixa de conteúdo pré-projetada com apenas alguns cliques. Nenhum plugin é necessário!
Vamos começar!
Espiada
Hoje, vamos construir esses três designs de caixa de conteúdo principal no Divi.
Com esses três designs de caixa de conteúdo principal, você poderá fazer personalizações fáceis (como ícone, cor e texto) para criar designs de caixa de conteúdo infinitos para qualquer ocasião.
Aqui estão 36 exemplos que incluímos em nosso download GRATUITO abaixo.
Baixe o Layout GRATUITAMENTE
Para colocar suas mãos em todos os 36 designs de caixa de conteúdo, primeiro você precisa fazer o download do layout 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.
Criando os designs da caixa de conteúdo na Divi
Antes de começarmos a projetar nossas caixas de conteúdo, vamos adicionar uma nova linha de uma coluna à seção padrão do Divi Builder.
Design da caixa de conteúdo nº 1
Para criar a primeira caixa de conteúdo, adicione um módulo de sinopse à coluna.
Na guia de conteúdo, atualize o seguinte:
- Ícone de uso: SIM
- Ícone: veja a captura de tela
- Cor de fundo: #ffffff
- Cor do gradiente de fundo à esquerda: # 00529b
- Cor certa do gradiente de fundo: # bde5f8
- Direção do gradiente: 90 graus
- Posição inicial: 3em
- Posição final: 0%
Na guia de design, atualize o estilo do ícone da seguinte maneira:
- Cor do ícone: #ffffff
- Alinhamento de imagem / ícone: esquerda
- Use o tamanho da fonte do ícone: SIM
- Tamanho da fonte do ícone: 2em
Em seguida, atualize os estilos de texto da seguinte maneira:
- Cor do texto do título: # 00529b
- Tamanho do texto do título: 1,5em
- Altura da linha do título: 2em
- Cor do corpo do texto: # bde5f8
- Tamanho do corpo do texto: 1em
- Altura da linha corporal: 2em
Assim que os estilos de texto estiverem no lugar, atualize o tamanho e o preenchimento da seguinte forma:
- Largura do conteúdo: 100%
- Largura máxima: 700 px
- Alinhamento do Módulo: Centro
- Preenchimento: 2em superior, 2em inferior, 5em esquerdo, 2em direito
Em seguida, adicione uma sombra de caixa sutil à sinopse da seguinte maneira:
- Sombra da caixa: veja a imagem
- Posição vertical da sombra da caixa: 0 px
- Força do desfoque de sombra da caixa: 88 px
- Força de propagação da sombra da caixa: -10px
- Cor da sombra: rgba (0,0,0,0.17)
Na guia avançada, daremos ao ícone de sinopse um estilo personalizado para que ele tenha uma forma de círculo com cores de fundo e borda que correspondam à cor gradiente de fundo esquerdo usada anteriormente. Também vamos posicionar o ícone com uma posição absoluta para que possamos colocá-lo exatamente onde quisermos, sem ocupar nenhum espaço real no documento.
Para adicionar o estilo personalizado, cole o seguinte código CSS na caixa Blurb Image CSS:
position:absolute; margin-bottom: 0px; border: 0.5em solid #00529b !important; border-radius:50%; background: #00529b; transform: translateX(-3.75em);
NOTA: Ao alterar o esquema de cores da caixa de conteúdo (ou módulo do blurb), também precisaremos atualizar as cores que estão sendo usadas no CSS da imagem do Blurb para a borda e o fundo do ícone.
Vamos conferir o resultado final.
Design da caixa de conteúdo nº 2
Para criar nosso segundo design de caixa de conteúdo, duplique o módulo anterior da blurb para iniciar o design para que possamos fazer algumas modificações.
Para este design, centralizaremos verticalmente o ícone no lado esquerdo da sinopse usando a propriedade grid CSS.
Na guia de design, substitua o CSS da imagem do Blurb pelo seguinte:
margin-bottom: 0px;
Em seguida, adicione o seguinte CSS à caixa de CSS de conteúdo do Blurb:
display: grid; align-items: center; justify-content: center; grid-template-columns: 5em auto; grid-gap: 2em;
A largura da coluna esquerda na grade (aquela que contém o ícone) é definida como 5em , e a coluna direita contendo o título e o corpo do texto é definida como automática . Precisamos combinar a largura da cor do gradiente esquerdo com a coluna da grade de largura 5em segurando o ícone. Para fazer isso, atualize o seguinte:
- Posição inicial: 5em
Na guia de design, atualize o alinhamento e o tamanho do ícone:
- Alinhamento de imagem / ícone: centro
- Tamanho da fonte do ícone: 3em
Agora não precisamos do preenchimento esquerdo, então retire-o.
Agora tudo deve estar bem alinhado. Confira o resultado final.
Design da caixa de conteúdo nº 3
Para criar o terceiro design da caixa de conteúdo, duplique o segundo módulo de blurb (caixa de conteúdo) que acabamos de terminar.
Assim que a segunda sinopse for duplicada, abra as configurações da sinopse duplicada.
Na guia Design, altere a cor do ícone:
- Cor do ícone: rgba (255,255,255,0.3)
Em seguida, vamos adicionar texto de rótulo vertical sobre o ícone, adicionando CSS personalizado ao pseudoelemento anterior (o que basicamente permite que você anexe design e / ou conteúdo adicional antes do elemento do módulo blurb).
Para adicionar o rótulo, cole o seguinte CSS na caixa Antes do CSS:
content: 'key tip'; bottom:50%; font-size: 1em; line-height: 1em; letter-spacing: 0.4em; position:absolute; transform: rotatez(-90deg) translateX(-50%) translateY(3em) !important; transform-origin: bottom left; color: #fff; font-family: inherit; font-weight: bold; text-transform: uppercase; z-index:1;
Também giraremos o ícone para coincidir com o texto vertical girado. Para fazer isso, adicione o seguinte CSS à caixa CSS da imagem do Blurb:
margin-bottom: 0px; transform: rotateZ(-90deg);
Aqui está o resultado final.
Atualizando o Design
Atualize o tamanho dos elementos da caixa de conteúdo alterando o tamanho do corpo do texto
Cada uma das caixas de conteúdo é construído utilizando principalmente a unidade de comprimento em (EM é em relação ao tamanho da fonte corpo raiz do elemento). Por causa disso, as caixas de conteúdo serão dimensionadas em tamanho perfeitamente ao ajustar o tamanho do corpo do texto nas configurações de design integradas do Divi.
Atualizar cores CSS personalizadas
Para o design de caixa de conteúdo nº 1, adicionamos um plano de fundo personalizado e uma cor de borda ao ícone com CSS personalizado. Certifique-se de atualizar as cores usadas para a propriedade de borda e plano de fundo para corresponder ao esquema de cores de seu próprio design.
Atualizando o texto do rótulo
Para o projeto caixa de conteúdo # 3, nós adicionamos uma etiqueta com CSS personalizado no antes pseudo elemento. Para atualizar o texto, basta alterar o valor da propriedade de conteúdo na caixa Antes do CSS.
Tornando as caixas de conteúdo reutilizáveis na Divi
Salve o Módulo na Biblioteca Divi
Existem duas maneiras principais de tornar os módulos reutilizáveis no Divi. A primeira maneira é salvar o módulo (ou qualquer elemento) na Biblioteca Divi.
Depois que o elemento é salvo na biblioteca, você pode encontrá-lo na biblioteca Divi ao adicionar um novo elemento a uma página.
Use predefinições globais
A segunda maneira principal de tornar um módulo reutilizável no Divi é criar uma predefinição global para esse módulo. Depois de salvar o design de um módulo como uma predefinição global, você pode adicionar facilmente essa predefinição global a qualquer outra instância do mesmo módulo.
Nesse caso, podemos abrir as configurações de cada uma de nossas caixas de conteúdo (ou módulos de blurb) e criar uma nova predefinição global para cada uma. Para fazer isso, abra as configurações do Módulo Blurb e clique na opção predefinida na parte superior. Em seguida, transforme as configurações do módulo em uma nova predefinição de estilos personalizados.
Nomeie a nova predefinição como quiser e salve-a.
Repita essas etapas para cada predefinição de módulo blurb que deseja criar.
Para criar mais caixas de conteúdo no futuro, basta adicionar um novo módulo blurb e selecionar o ícone que deseja usar. Em seguida, ative qualquer uma das predefinições carregadas clicando na lista suspensa de predefinições no topo e selecionando uma predefinição de sua escolha.
Resultados finais
Aqui está uma olhada final nos três designs de caixa de conteúdo principais que construímos.
E aqui estão 36 designs que você poderá fazer com algumas personalizações fáceis que incluímos em nosso download GRATUITO acima.
Pensamentos finais
As caixas de conteúdo estilizadas que criamos podem ser um recurso de design útil para qualquer site ou blog. Você pode tirar proveito das opções de design poderosas no Divi para ajustar as caixas de conteúdo para caber em qualquer design. Além disso, com a capacidade de salvá-los e enviá-los para a biblioteca Divi e / ou criar predefinições globais, você poderá implantar essas caixas de conteúdo sempre que quiser com apenas alguns cliques. Esperançosamente, eles serão úteis.
Estou ansioso para ouvir de você nos comentários.
Saúde!