Um guia útil para projetar elementos circulares em Divi
Publicados: 2019-05-01De vez em quando, o design de um site exige alguns elementos circulares. É uma ótima maneira de romper a monotonia dos designs de caixa padrão em uma página da web. Criar elementos circulares pode parecer simples (e realmente é!), Mas se você não estiver familiarizado com algumas regras básicas, poderá se deparar com alguns obstáculos desnecessários que podem ser bastante frustrantes.
Por exemplo, às vezes é difícil fazer com que o conteúdo se alinhe e se encaixe dentro de um elemento em forma de círculo com o espaçamento correto. Ou você pode achar difícil fazer o círculo responsivo para dispositivos móveis. Por esta razão, alguns recorreram ao uso de um fundo de imagem circular para o conteúdo. Mas se você não quiser usar um fundo de imagem personalizado, sua próxima melhor aposta é usar CSS. A boa notícia é que Divi elimina a necessidade de criar seu próprio CSS personalizado para fazer elementos circulares, tornando o processo muito mais fácil. Então, se você sempre quis dar a um elemento a forma de um círculo no Divi, este é o post para você.
Neste tutorial, vou orientá-lo nos princípios básicos de como criar elementos circulares no Divi (incluindo seções, linhas e módulos). Em seguida, mostrarei como é fácil implementar essas técnicas em um layout predefinido.
Confira!
Espiada
Baixe o layout de elementos circulares de exemplo GRATUITAMENTE
Para colocar suas mãos sobre os elementos circulares de exemplo projetados neste 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 para sua página, simplesmente extraia o arquivo zip e arraste o arquivo json para o Divi Builder.
Vamos para o tutorial, vamos?
O que você precisa para começar
Para começar, crie uma nova página no Divi. Em seguida, dê a você um título para a página e implante o construtor Divi no front end. Selecione a opção “construir do zero”.
Também iremos adicionar um layout predefinido à nossa página um pouco mais tarde, mas por agora podemos começar a construir do zero.
Agora você está pronto para ir!
As três etapas básicas para a criação de um elemento circular
Na verdade, existem três etapas simples para criar um elemento circular. Para ilustrar essas etapas, vou aplicá-las a um Módulo de Chamada para Ação usando o Divi Builder.
Etapa 1: dimensionar o elemento com valores iguais de altura e largura
A primeira etapa é definir a altura e a largura com o mesmo valor igual. Basicamente, queremos fazer do elemento um quadrado perfeito antes de torná-lo um círculo perfeito. Neste exemplo, vamos dar ao módulo de call to action uma altura e largura de 10vw.
Etapa 2: adicionar raio de borda de 50% para todos os quatro cantos
A segunda etapa é definir o raio da borda do elemento (ou módulo) para 50% em todos os quatro cantos. No Divi, você pode alterar o raio da borda de um elemento na opção chamada “Cantos arredondados”.
Etapa 3: Alinhe o conteúdo dentro do elemento circular
A terceira etapa é alinhar o conteúdo do elemento circular. Podemos fazer isso ajustando o preenchimento do elemento. (Além disso, abordo uma maneira de usar o flex para centralizar verticalmente o conteúdo posteriormente nesta postagem)
Neste exemplo, podemos adicionar o seguinte preenchimento para aproximar nosso conteúdo do centro do elemento circular:
Preenchimento personalizado: 18vw superior, 3vw esquerdo, 3vw direito
Obviamente, ainda há ajustes que precisam ser feitos para garantir que o texto / conteúdo se encaixe no elemento circular no celular, mas isso cobre a configuração básica.
Você pode notar que usei a unidade de comprimento vw para dimensionar e espaçar meu elemento circular. Isso é útil para criar um design responsivo mais consistente. Eu vou explicar.
Usando unidades de comprimento relativo para tornar os elementos circulares responsivos
Usando a unidade de comprimento VW para altura e largura
De todas as unidades de comprimento relativo, a unidade de comprimento vw é uma das minhas favoritas para design responsivo. Como a unidade de comprimento vw é relativa à largura da janela do navegador (não ao elemento pai), você pode obter um design consistente que se ajusta suavemente ao tamanho da janela do navegador.
Vamos dar uma olhada em como nosso exemplo de módulo de call to action circular fica quando eu reduzo a largura do navegador.
Usando a unidade de comprimento VW para conteúdo de elemento circular
Usar a unidade de comprimento vw para tamanho de elemento circular e conteúdo é uma boa combinação para design responsivo. Basicamente, isso permite que o conteúdo (como texto ou imagens) se ajuste perfeitamente ao tamanho do elemento do círculo para um design consistente em todos os navegadores. No entanto, você precisa ter cuidado ao usar a unidade de comprimento vw para o corpo do texto, pois o texto pode se tornar muito pequeno no celular. Eu gosto de usar a unidade de comprimento vw para cabeçalhos e então ajustar o tamanho do corpo do texto com pixels conforme necessário.
Além disso, se você planeja manter o design do elemento circular na tela do telefone, precisará reduzir o conteúdo ao mínimo e ajustar o tamanho do elemento circular para obter o máximo de espaço.
Usando nosso exemplo atual, você pode atribuir ao texto do título um valor de comprimento vw e redimensionar o módulo no celular da seguinte maneira:
Tamanho do texto do título: 4vw
Largura (telefone): 70vw
Altura (telefone: 70vw
Como você pode ver, todo o conteúdo agora se encaixa perfeitamente no elemento circular na tela do telefone.
E quanto aos pixels?
Se você quiser usar unidades de comprimento absoluto (como pixels) para dimensionar seu círculo, está perfeitamente bem. Você só precisa certificar-se e fazer os ajustes de tamanho necessários em cada ponto de interrupção para a tela do tablet e telefone, a fim de garantir que o elemento circular se encaixe na janela do navegador. Em alguns casos, usar pixels pode ser mais fácil para obter o tamanho certo (ou mais exato) em telas de tablets e telefones.
Por exemplo, vamos pegar o mesmo módulo de call to action e usar pixels (em vez de vw) para dimensionar e espaçar nosso módulo.
Você pode atualizar a altura, largura e preenchimento da seguinte forma:
Largura: 500px
Altura: 500px
Preenchimento personalizado: 200 px superior, 20 px à esquerda, 20 px à direita
Esse design será semelhante na área de trabalho, mas o problema surge sempre que você visualiza o elemento circular na tela do telefone. Como o elemento circular é dimensionado usando pixels (uma unidade de comprimento absoluto), o elemento circular se estenderá para fora do contêiner e do navegador na tela do telefone.
É por isso que é importante ajustar os valores de pixel de largura e preenchimento em monitores móveis. Por exemplo, pode ser necessário alterar a largura e a altura para 300 px.
Por que a unidade% length não funciona bem para dimensionar elementos circulares
Se você deseja uma solução mais ágil para elementos circulares, pode pensar que usar porcentagens é a resposta. No entanto, ao dimensionar elementos em uma página da web, a unidade de comprimento percentual para altura não funciona da mesma maneira que a unidade de comprimento percentual para largura. Isso ocorre porque a altura padrão dos elementos geralmente é deixada para o padrão (altura: automático). Então, por exemplo, se você está tentando definir dar 100% de altura para um Módulo Divi, o módulo não se ajustará porque os contêineres pai (coluna, linha, seção, etc ...) todos têm um valor indefinido para altura. O navegador basicamente não está tentando definir o módulo para 100% de nada (o que não é possível). Este não é o caso da largura. A largura padrão de qualquer elemento de bloco (ou div) é 100%. Portanto, todas as seções, linhas e módulos têm essa largura padrão de 100%, a menos que sejam alterados pelas configurações. É por isso que a unidade% length não é a melhor opção para usar ao tentar construir um elemento circular responsivo. O elemento circular precisa ter a mesma altura e largura em todos os tamanhos de navegador, por isso é difícil fazer isso usando uma unidade de comprimento de porcentagem para a altura. No entanto, existem maneiras de fazer com que 100% da altura e da largura funcionem com mais CSS personalizado aplicado aos elementos pais. Mas para fazer elementos circulares em Divi, você pode achar a unidade de comprimento vw mais fácil de trabalhar.
Alinhando o conteúdo em um elemento circular
Se você deseja alinhar o conteúdo dentro de um elemento circular, você realmente tem duas opções que eu consideraria simples ao usar Divi. Você pode usar preenchimento para alinhar o conteúdo, o que lhe dá mais controle sobre onde deseja que o conteúdo seja exibido dentro do elemento círculo. Ou você pode usar a propriedade flex (com preenchimento) para garantir que o conteúdo seja exibido diretamente no centro do círculo.
Alinhando o conteúdo do elemento circular com preenchimento
Para alinhar o conteúdo dentro de um elemento de círculo usando preenchimento, sugiro usar uma unidade de comprimento relativo (como% ou vw) para que o preenchimento aumente ou diminua com o tamanho do contêiner ou a largura do navegador. Você não deseja usar unidades de comprimento absoluto para preenchimento dentro de um elemento circular que é dimensionado usando unidades relativas. O resultado seria inconsistente e o design quebraria no celular. Por exemplo, se você tivesse um elemento circular com altura de 10vw e largura de 10vw. Esse elemento diminuiria de tamanho à medida que o navegador diminuísse de largura. Se você adicionou preenchimento de 100 px à parte superior do elemento, os 100 px permanecerão sempre que você ajustar a largura do navegador e quebrar o design. No entanto, se você adicionou um preenchimento de 3vw, esse preenchimento se ajustaria bem ao elemento.
É por isso que sugeri o uso de preenchimento vw em nosso exemplo de módulo de call to action.
Alinhando o conteúdo do elemento circular com a propriedade Flex
Se você não quiser se preocupar tanto em colocar o preenchimento superior e inferior no lugar para ter certeza de que o conteúdo está centralizado verticalmente, você pode usar a propriedade flex. Ao adicionar alguns fragmentos de css ao pai (elemento circular), você pode garantir que todo o conteúdo permaneça centralizado verticalmente. Em seguida, você pode usar alinhamento, preenchimento ou margem para garantir que o conteúdo permaneça centralizado horizontalmente.
Aqui está o que quero dizer.
Usando nosso exemplo, abra as configurações do módulo de chamada para ação.
Em seguida, defina o preenchimento superior e inferior como 0 px.
Em seguida, vá para a guia avançada e adicione o seguinte snippet de CSS ao elemento principal:
display:flex; align-items: center;
Para este módulo em particular, há algum preenchimento extra sob a descrição da promoção que irá confundir o alinhamento um pouco. Portanto, você pode se livrar disso adicionando o seguinte CSS à descrição da promoção:
padding-bottom: 0px
Confira esta postagem sobre como alinhar o conteúdo verticalmente para obter mais informações.
Colocando em prática: adicionando elementos circulares a um layout pré-fabricado
Agora que você tem um melhor entendimento sobre como criar elementos circulares no Divi, vamos ver como isso pode funcionar em um design de layout real. Para este exemplo, vou usar a página de destino do fazendeiro da Divi do pacote de layout do fazendeiro.
Carregue o layout da página de destino do fazendeiro em sua página
Para começar, primeiro vamos adicionar o Layout da página de destino do fazendeiro à página. Para fazer isso, abra o menu de configurações e a parte inferior do Divi Builder e clique no botão carregar da biblioteca. No pop-up de carregamento da biblioteca, encontre o Farmer Layout Pack e selecione-o. Em seguida, clique para usar a página inicial do fazendeiro.
Isso carregará o layout da página.
Fazendo um cabeçalho de seção circular
Para o primeiro exemplo, vamos converter a seção do cabeçalho superior do layout em um elemento circular. Para fazer isso, usaremos nossas três regras básicas:
1: Elemento de tamanho com valores iguais de altura e largura
2: Adicionar raio de borda de 50% para todos os quatro cantos
3: Alinhe o conteúdo dentro do elemento circular
Abra as configurações da seção e atualize o seguinte:
Largura: 70vw (desktop), 70vw (tablet), 80vw (telefone)
Largura máxima: 1080px
Alinhamento da seção: centro
Altura: 70vw (desktop), 70vw (tablet), 80vw (telefone)
Altura máxima: 1080px
Observe que adicionei valores adicionais de altura e largura para tablet e telefone, além de adicionar uma altura e largura máximas também. O importante é certificar-se de que todos os valores de altura e largura são iguais.
Agora precisamos adicionar nosso raio de borda de 50% em todos os quatro cantos.
Cantos arredondados: 50% (todos os quatro cantos)
Como esta é uma seção, o conteúdo inclui uma linha de duas colunas com vários módulos. Com tanto conteúdo, precisamos fazer alguns ajustes de tamanho nos módulos para garantir que o conteúdo se encaixe na seção.
Primeiro, abra as configurações do módulo de texto superior na coluna 1 que contém o título da seção. Em seguida, atualize o tamanho do texto do título da seguinte forma:
Cabeçalho Tamanho do texto: 4vw
Em seguida, diminua a quantidade de texto do corpo no módulo de texto diretamente abaixo do módulo de texto que contém o cabeçalho.
Agora podemos alinhar o conteúdo ajustando o espaçamento da linha. Abra as configurações de linha e atualize o seguinte:
Margem personalizada: 10vw superior (desktop), 5vw (tablet), 0vw (telefone)
Preenchimento personalizado: 3vw à esquerda, 3vw à direita
Para tornar a forma do círculo mais perceptível, podemos adicionar um divisor de seção superior e mover a posição da imagem de fundo para o canto superior esquerdo.
Agora vamos verificar o resultado.
Fazendo Módulos Blurb Circulares
Agora vamos tentar fazer algumas sinopses circulares neste layout. Para este exemplo, vamos usar os quatro módulos de blurb na seção intitulada “Nossos produtos”. Depois de encontrá-lo, abra as configurações do módulo blurb no topo da coluna 2.
Em seguida, atualize o tamanho do módulo da seguinte forma:
Largura da imagem: 7vw
Largura: 50vw (desktop), 80vw (telefone)
Largura máxima: 400px
Alinhamento do Módulo: centro
Altura: 50vw (desktop), 80vw (telefone)
Altura máxima: 400px
Em seguida, adicione o raio da borda ou cantos arredondados:
Cantos arredondados: 50%
Depois disso, vamos atualizar o design e o espaçamento do conteúdo da seguinte maneira:
Posicionamento de imagem / ícone: topo
Tamanho do texto do título: 2vw (desktop), 20px (tablet)
Orientação do texto: centro
Preenchimento personalizado: 0vw superior, 0vw inferior, 4vw esquerdo, 4vw direito
Por fim, vamos alinhar verticalmente o conteúdo usando a propriedade flex adicionando o seguinte CSS personalizado ao elemento principal:
display: flex; align-items: center;
Estenda o estilo circular a todos os Blurbs na seção
Isso cuida do design circular do nosso primeiro módulo. Agora, tudo o que precisamos fazer é estender as configurações de design do módulo de sinopses às três sinopses restantes na seção. Para fazer isso, clique com o botão direito no módulo do blurb que acabamos de criar e selecione “Estender estilos do Blurb”. No pop-up Estender estilos, selecione para estender o estilo por toda a seção.
Resultado final
Agora vamos conferir o resultado final.
Pensamentos finais
Espero que você tenha aprendido algumas dicas úteis sobre como criar elementos circulares no Divi. Compreendendo as três etapas básicas e como usar unidades de comprimento de maneira adequada para dimensionar e espaçar seu elemento, você pode criar o design circular que está procurando com bastante facilidade. E pode ser muito divertido incorporar alguns elementos circulares em um layout Divi existente ou pré-fabricado. Sinta-se à vontade para explorar a criação de módulos circulares, linhas ou até mesmo seções inteiras!
Estou ansioso para ouvir de você nos comentários.
Saúde!