7 técnicas para criar sites ousados ​​e coloridos com Divi

Usar um estilo de design arrojado e colorido para seu site é uma ótima maneira de fazer seu site se destacar. Isso o ajudará a trazer uma vibração positiva para o seu site e, embora não se encaixe em nenhum tipo de site, definitivamente se encaixa em muitos deles.

Neste post, mostraremos 7 técnicas diferentes do Divi sobre como criar um design ousado e colorido na web usando apenas as opções integradas do Divi. Primeiro, vamos percorrer as diferentes técnicas e depois vamos recriar um exemplo que corresponda à descrição.

Este é o último post da série de postagens em que lidamos com 4 estilos diferentes de sites e como alcançá-los usando Divi:

1. Limpo e abstrato
2. Mínimo
3. Plano
4. Negrito e colorido

Vamos lá!

Inscreva-se no nosso canal no Youtube

1. 'Transforme' Linhas em Seções Com Colunas

A primeira técnica que você pode usar para criar um design da Web ousado e colorido é transformar linhas em seções. Ao remover todo o preenchimento padrão entre uma seção e uma linha, você não deixará nenhuma diferença aparente entre os dois. Isso, em combinação com a remoção da largura da calha, permite que você tenha duas colunas que são pressionadas uma contra a outra.

2. Gradientes + texturas de fundo

Usar planos de fundo gradientes em seu site pode fornecer resultados impressionantes. Mas o que ajuda a potencializar essas cores, ainda mais, é combiná-las com um plano de fundo texturizado. Para manter o equilíbrio, use esta combinação para apenas uma coluna. Mantenha a segunda coluna limpa e leve para um toque moderno.

3. Cores gradientes semitransparentes + Divisores de seção embaixo

Depois de transformar uma linha em uma seção, você também pode adicionar divisores de seção ao plano de fundo da coluna. Para garantir que os divisores sejam exibidos, sem sobrepor o conteúdo, use cores gradientes ligeiramente transparentes para sua coluna.

4. Sobreposição de coluna horizontal de módulos

Você costuma ver os sites que usam sobreposição vertical. A sobreposição horizontal, por outro lado, é usada com menos frequência, embora possa trazer resultados absolutamente impressionantes. Para obter esse tipo de resultado, é importante saber que os elementos da coluna da direita têm uma vantagem hierárquica em relação aos elementos da coluna da esquerda. Você não pode obter o mesmo resultado se colocar seus elementos na coluna da esquerda.

5. Divida a cópia para alinhamento perfeito

Não há nada mais satisfatório do que ter um alinhamento perfeito. É um dos princípios básicos de design que distinguem um bom design do mau design. Para garantir que esse alinhamento seja perfeito ao sobrepor duas colunas, tente dividir sua cópia em diferentes Módulos de Texto. Isso permitirá que você crie um alinhamento perfeito fazendo com que a margem esquerda negativa corresponda a essa palavra ou frase em particular.

6. Combine cores de texto preto e semitransparente

Para adicionar o aspecto de negrito ao seu site, use um tamanho de fonte grande para a cópia que você está compartilhando, juntamente com um Peso da Fonte de Texto ultra-negrito. E para equilibrar a ousadia, você pode alternar entre o uso de uma cor de texto preta e uma semitransparente. Isso o ajudará a criar profundidade e variação suficientes em seu site.

7. Evite a sombra da caixa na parte superior ou inferior para unir as seções

Você pode facilmente unir duas seções em sua página brincando com as opções de sombra da caixa. Em primeiro lugar, use uma sombra de caixa muito sutil. Isso significa usar força de desfoque suficiente, força de propagação negativa e uma cor de sombra de caixa muito leve. Depois de criar sua sombra de caixa sutil, brinque com a posição vertical. Para a primeira seção da página, certifique-se de mover a posição vertical até que a sombra da caixa não apareça na parte inferior da seção. O mesmo se aplica à última seção, mas em vez disso, certifique-se de que não apareça no topo.

Antevisão

Agora que passamos por todas as diferentes técnicas, é hora de colocar as coisas em prática. Vamos recriar o seguinte design:

Vamos começar a criar: Adicionar seção padrão # 1

Configurações da seção

Divisor superior

Adicione uma nova página com uma seção padrão e abra as configurações da seção imediatamente. A primeira coisa de que precisaremos é um divisor superior:

• Estilo do divisor: Encontrar na lista
• Cor do divisor: rgba (0,0,0,0.13)
• Altura do divisor: 900px
• Divider Flip: Vertical
• Disposição do divisor: abaixo do conteúdo da seção

Divisória Inferior

Continue adicionando um divisor de fundo semelhante também.

• Estilo do divisor: Encontrar na lista
• Cor do divisor: rgba (0,0,0,0.13)
• Altura do divisor: 900px
• Disposição do divisor: abaixo do conteúdo da seção

Espaçamento

Em seguida, dê à seção alguma margem e remova o preenchimento padrão.

• Margem superior e inferior: 50px
• Margem esquerda e direita: 50px
• Preenchimento superior e inferior: 0 px
• Preenchimento esquerdo e direito: 0 px

Cantos arredondados

Em seguida, abra as configurações de Borda e adicione alguns cantos arredondados.

• Superior esquerdo: 20 px
• Superior direito: 20px

Sombra da caixa

Estamos usando uma sombra de caixa sutil no topo de nossa seção, fazendo os seguintes ajustes:

• Posição vertical da sombra da caixa: -23 px
• Força do desfoque de sombra da caixa: 37 px
• Força de propagação da sombra da caixa: -29px
• Cor da sombra: rgba (0,0,0,0.22)
• Posição da sombra da caixa: sombra externa

Adicionar nova linha

Estrutura da Coluna

Não que tenhamos terminado de modificar as configurações da seção, podemos continuar adicionando uma linha com duas colunas.

Fundo Gradiente da Coluna 1

Sem adicionar nenhum módulo ainda, vamos abrir as configurações de linha. A primeira coisa que precisamos fazer é adicionar um fundo gradiente à nossa primeira coluna.

• Cor 1: rgba (255,191,0,0,76)
• Cor 2: rgba (153,0,255,0,87)

Imagem de fundo da textura da coluna 1

Vamos combinar este fundo gradiente com um fundo texturizado. A imagem que estou usando faz parte do Meetup Layout Pack da Divi. Salve a imagem a seguir em sua área de trabalho clicando com o botão direito e salvando-a (é um arquivo png com texturas brancas, você não conseguirá ver sua aparência até abri-la em seu computador e / ou usá-la em seu site ):

Depois de fazer upload da imagem para sua Biblioteca de mídia, certifique-se de selecionar 'ajustar' como o Tamanho da imagem de fundo da coluna 1 também.

Cor de fundo da coluna 2

Em seguida, dê à sua segunda coluna a cor de fundo '# F7F7F7'.

Dimensionamento

Vamos 'transformar' nossa linha em uma seção, fazendo-a ocupar toda a largura da seção.

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize a altura das colunas: Sim

Espaçamento

Além de fazer com que a linha ocupe toda a largura da seção, também precisaremos remover o preenchimento superior e inferior de nossa seção.

• Preenchimento superior e inferior: 0 px

Adicionar Módulo Divisor à Coluna 1

Ocultar divisor

Vamos começar a adicionar os módulos! A primeira coisa de que precisaremos é um Módulo divisor na primeira coluna. Estamos usando este módulo apenas para criar o espaço de que precisamos na primeira coluna. Na verdade, não queremos que apareça. Depois de adicionar o módulo, certifique-se de desabilitar a opção 'Mostrar divisor'.

Espaçamento

Vá para as configurações de Espaçamento a seguir e adicione o seguinte preenchimento personalizado ao divisor:

• Preenchimento superior: 200 px (desktop e tablet), 150 px (telefone)
• Preenchimento inferior: 200 px (desktop e tablet), 150 px (telefone)

Adicionar Módulo de Texto # 1 à Coluna 2

Adicionar cópia

Podemos agora passar para a segunda coluna. Aqui, vamos eliminar nossos três módulos de texto diferentes e fazê-los sobrepor as duas colunas. Se você quiser que um módulo sobreponha duas ou mais colunas, você sempre precisará colocá-lo na coluna que está à direita. É assim que funciona a estrutura hierárquica. Adicione seu primeiro Módulo de Texto e adicione algumas cópias.

Configurações de texto

Abra as configurações de texto a seguir e aplique as seguintes alterações:

• Peso da fonte do texto: ultra negrito
• Estilo da fonte do texto: maiúsculas
• Cor do texto: # 000000
• Tamanho do texto: 250 px (desktop), 200 px (tablet), 100 px (telefone)
• Altura da linha de texto: 0,75em

Espaçamento

Também precisaremos de alguma margem. A margem esquerda negativa que estamos usando corresponde à cópia que escolhemos. Se você quiser fazer isso funcionar com outro texto também, precisará brincar com esse valor. Altere-o até ver o início de um caractere se alinhar com a transição das colunas.

• Margem superior: 200 px (desktop), -250 px (tablet), -120 px (telefone)
• Margem esquerda: -279px (desktop), 5% (tablet e telefone)

Clonar Módulo de Texto Duas Vezes

Clone # 1

Mudar o Texto

Criamos nosso primeiro Módulo de Texto e, para economizar tempo, iremos cloná-lo duas vezes e fazer algumas alterações. A primeira coisa que você precisa mudar no segundo Módulo de Texto é a cópia.

Alterar espaçamento

A cópia que estamos usando aqui é diferente, então isso significa que precisaremos alterar a margem esquerda. Observe como também estamos usando números decimais para fazer o Módulo de Texto se alinhar perfeitamente. Livre-se da margem superior também.

• Margem esquerda: -360,7 px (desktop), 5% (tablet e telefone)

Clone # 2

Mudar o Texto

Altere também a cópia do seu terceiro Módulo de Texto.

Mudar a cor do texto

E para que o design se destaque ainda mais, vamos mudar a cor do texto deste módulo para 'rgba (0,0,0,0.19)'.

Alterar espaçamento

Estamos removendo a margem superior para este módulo e adicionando alguma margem inferior em seu lugar. A margem esquerda negativa também é diferente.

• Margem inferior: 200px
• Margem esquerda: -410 px (desktop), 5% (tablet e telefone)

Adicionar seção padrão # 2

Configurações da seção

Espaçamento

Terminamos a primeira seção, é hora de passar para a próxima! Depois de adicionar uma nova seção padrão, abra as configurações de Espaçamento e faça as seguintes alterações:

• Margem superior e inferior: 50px
• Margem esquerda e direita: 50px
• Preenchimento superior e inferior: 0 px
• Preenchimento esquerdo e direito: 0 px

Cantos arredondados

Continue adicionando alguns cantos arredondados inferiores:

• Inferior esquerdo: 20px
• Inferior direito: 20px

Sombra da caixa

Adicione também uma sombra de caixa na parte inferior da seção.

• Posição vertical da sombra da caixa: 47 px
• Força do desfoque de sombra da caixa: 37 px
• Força de propagação da sombra da caixa: -29px
• Cor da sombra: rgba (0,0,0,0.22)
• Posição da sombra da caixa: sombra externa

Adicionar nova linha

Estrutura da Coluna

Em seguida, adicione uma linha com três colunas à sua nova seção.

Dimensionamento

Estamos 'transformando' esta linha em uma seção também:

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Equalize a altura das colunas: Sim

Espaçamento

E removeremos o preenchimento padrão superior e inferior.

• Preenchimento superior e inferior: 0 px

Adicione o Módulo Blurb # 1 à Coluna 1

Escolha o ícone

No total, vamos precisar de três módulos do Blurb. Um para cada coluna. Começaremos adicionando um na primeira coluna e, depois de terminar, iremos cloná-lo e colocá-lo nas colunas restantes. Isso nos ajudará a economizar tempo. Depois de adicionar o conteúdo ao seu Módulo Blurb, selecione um ícone de sua escolha nas configurações de Imagem e Ícone.

Fundo Gradiente

Faremos com que pareça que o ícone está se sobrepondo à parte superior do Módulo do Blurb usando um fundo gradiente para ele:

• Cor 1: rgba (255,255,255,0)
• Cor 2: # A21DF9
• Posição inicial: 20%
• Posição final: 20%

Imagem de fundo de textura

Estamos combinando o fundo gradiente com o mesmo fundo texturizado que usamos na seção anterior.

Configurações de ícone

Altere as configurações do ícone a seguir:

• Cor do ícone: # 000000
• Use o tamanho da fonte do ícone: Sim
• Tamanho da fonte do ícone: 85 px

Configurações de texto

Continue modificando a configuração do texto.

• Orientação do Texto: Centro
• Cor do Texto: Claro

Configurações de texto do título

Em seguida, usaremos as seguintes configurações para definir o estilo do título de nossa sinopse:

• Peso da fonte do título: Ultra negrito
• Estilo da fonte do texto: maiúsculas
• Tamanho do texto do título: 46px

Configurações do corpo do texto

E as seguintes configurações para o corpo do texto:

• Peso da fonte do corpo: leve
• Tamanho do corpo do texto: 18 px

Espaçamento

Por último, mas não menos importante, vamos dar ao nosso Módulo Blurb algum espaço para respirar adicionando preenchimento personalizado:

• Enchimento superior: 50 px
• Preenchimento inferior: 100px
• Preenchimento esquerdo e direito: 50 px

Clone o módulo do Blurb duas vezes e coloque nas colunas restantes

Clone # 1

Alterar ícone

Quando terminar de modificar o Módulo do Blurb, clone-o duas vezes. Depois de fazer isso, coloque as duplicatas nas colunas restantes. Em seguida, abra o Módulo Blurb em sua segunda coluna e altere o ícone que está sendo usado.

Alterar fundo gradiente

Continue alterando a segunda cor de fundo gradiente para '# D47A9A'.

Clone # 2

Alterar ícone

Faça a mesma coisa para o Módulo Blurb na última coluna.

Alterar fundo gradiente

Para este módulo, estamos usando '# F3BF3E' como a segunda cor de fundo gradiente.

Antevisão

Se você seguiu cada uma das etapas acima, deve ter alcançado o seguinte resultado em diferentes tamanhos de tela:

Pensamentos finais

Neste post, mostramos como criar sites ousados ​​e coloridos usando apenas as opções integradas do Divi. Primeiro, examinamos algumas técnicas Divi que você pode usar e, depois, recriamos um exemplo de correspondência do zero. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!