Como criar designs de cantos flutuantes para conteúdo na Divi
Publicados: 2019-04-11Criar designs de cantos flutuantes é uma maneira simples e fácil de adicionar um pouco de estilo criativo aos Módulos Divi que você talvez não pensasse que seria possível sem um código personalizado. Boas notícias! Com Divi, você pode usar divisores e sinopses para estilizar os quatro cantos do seu módulo usando as opções integradas do Divi. E pode ser muito divertido experimentar as diferentes possibilidades.
Neste tutorial, vou mostrar como criar designs de cantos flutuantes para seu conteúdo no Divi. Depois de ter os elementos no lugar, você pode estilizar esses cantos com incontáveis formas, ícones e cores!
Vamos começar!
Espiada
Aqui está uma prévia dos designs de cantos flutuantes possíveis neste tutorial.
Baixe o Layout de exemplos de design de borda flutuante GRATUITAMENTE
Para colocar suas mãos no layout de designs de borda flutuante, 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.
Agora vamos ao tutorial, vamos?
Começando
A única coisa que você precisa para este tutorial é Divi. Estaremos construindo esses exemplos do zero no front end do Divi Builder.
Para começar, crie uma nova página e dê um título a ela. Clique para usar o Divi Builder no front-end e escolha a opção “Build from Scratch”.
Agora você está pronto para ir!
Criação do modelo de layout de design de canto flutuante
Como haverá inúmeras possibilidades de design com este design, faz sentido criar o layout básico (ou modelo) a partir do qual trabalhar.
Para este modelo, vamos adicionar quatro divisórias a cada canto de um módulo de texto. Depois que o layout estiver pronto, você poderá explorar novas maneiras de personalizar esses divisores para designs exclusivos.
Primeiro, crie uma nova seção regular com uma linha de uma coluna.
Antes de adicionar o módulo de texto, atualize as configurações de linha da seguinte maneira:
Largura personalizada: 640 px
Preenchimento personalizado: 0 px superior, 0 px inferior
Em seguida, adicione um módulo de texto à linha e atualize o seguinte:
Tamanho do texto do texto: 20px
Altura da linha de texto: 1.8em
Margem personalizada: -25px superior, -25px inferior, 25px à esquerda, 25px à direita
Preenchimento personalizado (desktop): 10% superior, 10% inferior, 10% esquerdo, 10% direito
Preenchimento personalizado (telefone): 20% superior, 20% inferior
Largura da borda: 4px
Cor da borda: #eeeeee
A margem e o preenchimento personalizados ajudarão a alinhar nossos módulos divisores que adicionaremos em breve. Como as divisórias terão altura e largura de 50px, as margens superior e inferior de -25px puxarão essas divisórias até a metade do módulo de texto para um belo design simétrico (você verá).
Adicionando os dois divisores de canto flutuantes superiores
Com o módulo de texto instalado, podemos começar a adicionar os dois designs de canto flutuante superiores usando módulos divisores.
Crie um novo módulo divisor e arraste-o para o topo do módulo de texto.
Em seguida, atualize as configurações do divisor da seguinte forma:
Mostrar divisor: NÃO
Cor de fundo: # 7cda24 (ou qualquer cor que você quiser)
Altura: 50px
Largura: 50px
A altura e largura de 50px nos dão o quadrado perfeito que podemos usar para nossa borda flutuante.
Agora, adicione uma sombra de caixa ao divisor para criar o efeito flutuante 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: 0 px
Força de propagação da sombra da caixa: 20px
Cor da sombra: #ffffff
Para garantir que o módulo divisor permaneça acima do módulo de texto (e não fique escondido atrás dele), precisamos adicionar um snippet de CSS ao elemento principal da seguinte maneira:
CSS do elemento principal:
position: relative
Em seguida, atualize o Índice Z para 1.
Em seguida, duplique o módulo divisor e atualize as configurações do divisor duplicado da seguinte forma:
Alinhamento do Módulo: direito
Margem personalizada: -50px superior
Isso alinha o divisor à direita e puxa-o para cima na altura exata do módulo divisor acima dele. Isso cria o posicionamento exato do canto que estamos procurando.
Adicionando os divisores de canto inferiores
Para adicionar os dois divisores de canto inferior, implemente o modo de visualização de wireframe e copie os divisores esquerdo e direito que você acabou de criar e cole-os abaixo do módulo de texto (certificando-se de que o divisor esquerdo permaneça empilhado em cima do divisor direito como mostrado na imagem abaixo).
É isso! Vamos verificar o design final de nosso layout básico.
Explorando Novos Projetos de Cantos Flutuantes
Com este modelo no lugar, podemos explorar alguns designs diferentes que são possíveis. Você pode salvar esta seção inteira na biblioteca Divi para que possa mantê-la como um modelo no futuro. Mas, por enquanto, vamos apenas duplicar a seção e explorar um novo design.
Formas de diamante com fundos gradientes
Com uma duplicata do nosso modelo no lugar, use o recurso multiselect para selecionar todos os quatro módulos divisores. Em seguida, clique no ícone de engrenagem de configurações em um dos divisores selecionados para implantar o modal de configurações de elemento. Pode ser útil usar o modo de clique para esta etapa.
Nas configurações do elemento, atualize o seguinte:
Cor esquerda do fundo gradiente: # 7cda24
Cor certa do fundo gradiente: # edf000
Direção do gradiente: 45 graus
Em seguida, use as opções de transformação para girar o divisor em forma de diamante.
Transformar, girar, eixo Z: 45deg
Aqui está o design final.
Divisores Inclinados
Você também pode usar a opção transform skew para inclinar as divisórias para um design ainda mais exclusivo. Você pode adicionar um design de inclinação separado para cada divisor ou usar multisseleção para atualizar a inclinação de transformação para todos os quatro ao mesmo tempo em -37 graus nos eixos X e Y.
Aqui está como seria.
Desenhos de fundo escuro
Você pode até experimentar adicionar uma cor de fundo escura ao módulo de texto para um design de canto flutuante exclusivo. Aqui está um exemplo do módulo de texto com uma cor de fundo de # 002130 usando o sem uma rotação de transformação ou inclinação.
Cantos Arredondados
Para colocar alguns cantos arredondados no desenho, você pode simplesmente adicionar cantos arredondados à linha da seguinte forma:
Cantos arredondados: 20px
Cantos Flutuantes Circulares
Para transformar esses cantos quadrados em círculos, você pode adicionar o seguinte snippet de CSS personalizado ao elemento principal de cada divisor:
border-radius: 50%;
Como os divisores têm 50 x 50 pixels, isso criará um desenho de círculo perfeito.
Como você pode ver, existem várias maneiras diferentes de ajustar esses elementos para inúmeros novos designs de canto.
Agora, vamos explorar o uso de ícones blurb para cantos flutuantes em vez de módulos divisores.
Criação de cantos flutuantes com ícones do Blurb
Adicionar ícones do Blurb a cada canto do módulo de texto pode fornecer designs ainda mais exclusivos. Você pode usar o mesmo modelo de layout que construímos no início do tutorial. A única diferença será usar módulos de blurb em vez de módulos divisores para os quatro cantos.
Vá em frente e obtenha uma duplicata do modelo de layout de seção implantado.
Em seguida, exclua os módulos divisores acima e abaixo do módulo de texto.
Adicionando os dois cantos do ícone do blurb
Como vamos usar o módulo blurb para exibir um único ícone, precisamos ter certeza e obter o tamanho e o espaçamento corretos.
Adicione um módulo de sinopse acima do módulo de texto e retire o título e o corpo do texto. Em seguida, clique para usar um ícone em vez de uma imagem e selecione o ícone do círculo do Facebook.
Em seguida, atualize as seguintes configurações de blurb (essas configurações são muito semelhantes às configurações que adicionamos ao módulo divisor no primeiro exemplo):
Cor de fundo: #ffffff
Tamanho da fonte do ícone: 50px
Largura: 50px
Margem personalizada: 0px inferior
Cantos arredondados: 50%
Sombra da caixa: veja a imagem
Posição vertical da sombra da caixa: 0 px
Força do desfoque de sombra da caixa: 0 px
Força de propagação da sombra da caixa: 20px
Cor da sombra: #ffffff
CSS do elemento principal:
position: relative;
CSS da imagem do Blurb:
margin-bottom: 0px
Índice Z: 1
Em seguida, duplique o módulo de sinopse para criar outro logo abaixo da sinopse atual e atualize o seguinte:
Alinhamento do módulo: direito
Margem personalizada: -50px superior
Em seguida, copie os dois módulos principais de sinopse e cole-os sob o módulo de texto (certificando-se de que a sinopse da esquerda permaneça empilhada acima da sinopse da direita).
Em seguida, você pode atualizar os ícones de cada sinopse para o que quiser.
Aqui está o design final.
Explore mais designs com os cantos flutuantes do ícone do Blurb
Com esta configuração, você pode explorar muitos designs exclusivos. Você pode alterar os ícones, usar combinações de cores diferentes e até mesmo dimensioná-los ou girá-los com opções de transformação.
Aqui está um exemplo do design usando uma cor de fundo escura para o módulo de texto e cores de ícone diferentes.
Funciona em layouts de colunas múltiplas
Contanto que você mantenha os elementos juntos, você pode adicionar esses layouts de canto flutuantes em várias colunas.
Empacotando
A criação de designs de cantos flutuantes para o seu conteúdo no Divi realmente mostra o poder do Divi builder. Com todas as opções integradas disponíveis, você pode criar inúmeras variações de design a partir de um modelo de layout básico. Espero que isso o inspire a se divertir explorando seus próprios designs.
Estou ansioso para ouvir de você nos comentários.
Saúde!