Como Criar um Módulo Divi Fluido Responsivo

Para simplificar ainda mais o processo de implementação de design responsivo consistente para um módulo Divi, podemos aplicar as práticas de web design fluido. Ao contrário dos métodos mais tradicionais de design responsivo, o design da web Fluid não quebra ou pula abruptamente para um tamanho / estilo diferente em pontos de interrupção diferentes. Ele incorpora unidades de comprimento responsivas em relação à largura da janela de visualização para que o design se ajuste (ou escala) com fluidez, mantendo o design consistente em todos os dispositivos.

Neste tutorial, mostraremos como criar um módulo Divi fluido. Usando práticas de design fluido semelhantes para criar tipografia fluida e / ou botões fluidos, vamos criar um módulo Divi fluido que será escalonado perfeitamente com a janela de visualização do navegador. Como descobriremos, a combinação secreta é adicionar um tamanho de fonte do corpo raiz com uma unidade de comprimento relativo (ou fluido)) ao módulo e, em seguida, incorporar a unidade de comprimento em (que é relativo ao tamanho da fonte do corpo raiz) em todo o módulo configurações quando necessário.

Vamos começar!

Espiada

Aqui está uma rápida olhada no design que construiremos neste tutorial.

E aqui está um código que demonstra a funcionalidade desse módulo de fluido.

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.

Baixe os arquivos

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.

DOWNLOAD

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:

1. Se ainda não o fez, instale e ative o Divi Theme.
2. Crie uma nova página no WordPress e use o Divi Builder para editar a página no front end (construtor visual).
3. Escolha a opção “Build From Scratch”.

Depois disso, você terá uma tela em branco para começar a desenhar no Divi.

Como Criar um Módulo Divi Fluido Responsivo

A fila

Para começar, crie uma nova linha de uma coluna dentro da seção regular padrão.

Abra as configurações de linha e atualize o seguinte:

• Usar largura de calha personalizada: SIM
• Largura da calha: 1
• Largura: auto
• Largura máxima: 100%
• Preenchimento: 5vw superior, 5vw inferior

Projetando um Módulo de Chamada à Ação de Fluido

Embora as mesmas técnicas de design de fluido possam ser adicionadas a praticamente qualquer módulo Divi, vamos para um dos módulos de chamada para ação do Divi para este tutorial.

Adicione um novo módulo de apelo à ação dentro da coluna / linha.

Configurações de conteúdo

Nas configurações de conteúdo, adicione um URL de link de botão simulado e atualize a cor de fundo da seguinte maneira:

• URL do link do botão: #
• Cor de fundo: # 5e6472

Adicionando um tamanho de fonte de raiz fluida ao módulo

Ao projetar um módulo de fluido, precisamos adicionar um tamanho de fonte de raiz fluida ao módulo. Depois de adicionado ao módulo, esse tamanho de fonte raiz será incorporado dinamicamente em todo o resto das configurações de design do módulo usando a unidade de comprimento em.

Para adicionar o tamanho da fonte da raiz fluida ao módulo, vá para a guia avançada e adicione o seguinte CSS personalizado ao elemento principal:

font-size: clamp(16px, 2vw, 24px);

Para este tamanho de fonte, estamos usando a função CSS Clamp () para definir um tamanho de fonte mínimo, um tamanho de fonte fluido (quando necessário) e um tamanho de fonte máximo.

Substituindo quaisquer elementos com espaçamento padrão com valores de unidade de comprimento em

Embora não seja absolutamente necessário, para obter um verdadeiro design fluido para o módulo, precisamos substituir qualquer espaçamento padrão (nos bastidores) que o módulo está usando atualmente com um valor de unidade de comprimento em para essa propriedade. Você pode identificá-los inspecionando seu elemento usando ferramentas de desenvolvimento de navegadores. Nesse caso, o módulo de apelo à ação tem um preenchimento inferior na descrição da promoção e no elemento do título da promoção. Como a propriedade bottom padding está usando uma unidade de comprimento de pixel (px), precisamos substituir cada uma por uma unidade de comprimento em que irá incorporar o tamanho da fonte do corpo raiz que acabamos de adicionar ao elemento principal.

Atualizando o projeto com unidades de comprimento em

Agora que nosso tamanho de fonte de raiz fluida para o módulo está definido, tudo o que precisamos fazer é atualizar o design do módulo usando unidades de comprimento em. Como a unidade de comprimento em é relativa ao tamanho da fonte raiz, qualquer design que use a unidade de comprimento em herdará a fluidez do tamanho da fonte e a escala com o tamanho da fonte, quando necessário.

Texto de corpo

O tamanho da fonte raiz personalizado que adicionamos anteriormente foi criado propositalmente com o corpo do texto em mente. Portanto, podemos atribuir ao corpo do texto um valor de 1em, que herda o valor exato do tamanho da fonte raiz. Também podemos adicionar a altura da linha do corpo. Para fazer isso, atualize o seguinte:

• Tamanho do corpo do texto: 1em
• Altura da linha corporal: 1,8em

Texto do Título

Para o elemento de texto do título do módulo, podemos atribuir um tamanho maior usando a unidade de comprimento em. Atualize o seguinte:

• Tamanho do texto do título: 1,7em
• Altura da linha do título: 1,3em

Para lhe dar uma ideia de qual será o tamanho do texto do título, simplesmente multiplicamos o valor do comprimento em pelo valor da fonte raiz. Lembre-se de que o tamanho da fonte raiz está usando clamp () para estabelecer um tamanho de fonte mínimo (16px), fluido (2vw) e máximo (24px). Portanto, o tamanho mínimo do texto do título será 1,7 vezes 16 px, o que é próximo a 27,2 px. O tamanho da fonte fluida será 1,7 vezes 2vw (2% da largura da janela de visualização). E o tamanho máximo da fonte será 1,7 vezes 24px, que é próximo a 69,36px.

Design do botão

O terceiro elemento do módulo é o botão. Podemos atualizar as configurações de design do botão usando os valores da unidade de comprimento em para incorporar também o design do fluido.
Atualize as seguintes configurações de botão:

• Tamanho do texto do botão: 1,3em
• Largura da borda do botão: 0,12em
• Raio da borda do botão: 1,5em
• Espaçamento entre letras dos botões: 0,1em
• Preenchimento do botão: 0,1em superior, 0,1em inferior, 2em à esquerda, 2em à direita

Tamanho e espaçamento

Para garantir que o módulo tenha um tamanho e espaçamento de fluido, precisamos usar unidades de comprimento em para esses valores também.

Atualize as seguintes configurações de dimensionamento e espaçamento:

• Largura máxima: 40em
• Altura mínima: 0vw
• Margem: 0,5em superior, 0,5em inferior, esquerda automática, direita automática
• Preenchimento: 2,5em superior, 2,5em inferior, 2em à esquerda, 2em à direita

O resultado

Agora vamos ver o resultado do nosso módulo fluido ao ajustar a largura do navegador em uma página ao vivo.

Adicionando vários módulos de fluido em uma linha com CSS Grid

A fim de adicionar vários módulos de fluido adjacentes a uma linha, precisamos nos certificar de que nosso design de módulo de fluido não seja limitado ou interrompido por quaisquer larguras de contêiner pai. Em outras palavras, queremos que o contêiner pai de nossos módulos (a coluna) seja definido como automático para que seja dimensionado com o tamanho do módulo. Podemos fazer isso usando CSS Grid no nível da coluna para definir cada um dos módulos em uma grade com cada coluna tendo uma largura automática.

Ajuste o tamanho e espaçamento do módulo

Antes de criarmos o CSS Grid para os módulos, precisamos ajustar a largura máxima e a margem do nosso módulo para um tamanho mais adequado para um layout de duas colunas com dois módulos.

Abra as configurações do módulo e atualize o seguinte:

• Alinhamento de Texto: Esquerda
• Largura máxima: 24em
• Margem: 0,5em à esquerda, 0,5em à direita

Módulo Duplicado

Agora duplique o módulo para criar outro na mesma coluna.

Adicionar CSS Grid à coluna

Agora podemos adicionar o CSS personalizado à coluna para criar a grade CSS para os módulos.

Na guia avançada, adicione o seguinte CSS ao elemento principal na visualização da área de trabalho:

display:grid;
grid-template-columns: auto auto;
justify-content:center;

Em seguida, adicione o seguinte CSS ao elemento principal na visualização do telefone:

display:grid;
grid-template-columns: auto;
justify-content:center;

Isso definirá os dois módulos em uma grade de duas colunas (cada um com uma largura automática) na área de trabalho. Em seguida, no telefone, os módulos retornarão a uma grade de uma coluna (largura automática).

O resultado

Agora verifique o resultado.

Resultados finais

Assim que os módulos de fluido estiverem completos, você pode atualizar os estilos dos módulos usando as configurações de design integradas para fornecer fontes, cores, etc.

Aqui está uma olhada no resultado final usando uma fonte, cor de fonte, cor de botão e cor de fundo diferentes.

Pensamentos finais

Como vimos neste tutorial, incorporar design fluido em um Módulo Divi pode ser uma maneira conveniente de garantir que o módulo tenha uma aparência bonita e consistente em todos os tamanhos de navegador, sem o incômodo de atualizar o design em pontos de interrupção específicos.

Não se esqueça de verificar nossos outros artigos sobre design fluido, incluindo nosso guia para criar tipografia fluida e botões Divi fluidos.

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

Saúde!