Baixe 5 estilos de fundo vibrantes para suas postagens de blog Divi
Publicados: 2018-10-25Estamos aqui com outro download Divi grátis! Desta vez, estamos dando a você uma amostra de 5 estilos de fundo vibrantes diferentes que você pode usar para postagens de blog em seu site. Você pode combinar facilmente esses estilos de plano de fundo no mesmo site para dar uma aparência diferente às várias postagens de blog que você publicar. Além de oferecer a você todos esses estilos de fundo vibrantes gratuitamente, também vamos orientá-lo na criação do modelo de postagem de blog que pode ser reutilizado em qualquer postagem de blog que você criar e publicar em seu site.
Vamos lá!
Antevisão
Vamos começar observando os 5 resultados diferentes e a exibição em diferentes tamanhos de tela.
Baixe os estilos de fundo vibrantes GRATUITAMENTE
Para colocar suas mãos nos estilos de fundo vibrantes, primeiro você precisará baixá-los 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!
Paletas de cores
Para cada um dos estilos de fundo, você pode encontrar uma paleta de cores abaixo. Faremos referência ao número da cor ao longo do tutorial, então escolha o estilo de fundo e a paleta que deseja criar e siga a partir daí.
Paleta # 1
- Cor # 1: # 886DFC
- Cor # 2: # 7C56BD
- Cor # 3: # 372C66
Paleta # 2
- Cor # 1: # 42bcb2
- Cor # 2: # 9CFEF0
- Cor # 3: # a8baf7
Paleta # 3
- Cor # 1: # 96b2ff
- Cor # 2: # d999ff
- Cor # 3: # 357ff4
Paleta # 4
- Cor # 1: # B981FF
- Cor # 2: # 24EEFA
- Cor # 3: # be7bf2
Paleta # 5
- Cor # 1: # e02b20
- Cor # 2: # f6ff56
- Cor # 3: # db241e
Criar nova postagem
Adicionar detalhes e habilitar Divi Builder
Vamos começar do começo! Adicione uma nova página ao seu site WordPress, adicione o título da página, carregue uma imagem em destaque e habilite o Divi Builder.
Configurações da página Divi
Antes de mudar para o Visual Builder, faça algumas alterações na caixa Configurações da página Divi no canto superior direito da página em que você está. Isso garantirá que você esteja trabalhando inteiramente com o Divi para criar o layout da postagem do blog. Se você planeja reutilizar o modelo em seu site, deverá se lembrar de modificar essas configurações sempre que criar uma nova postagem no blog.
- Layout da página: largura total
- Título da postagem: Ocultar
Mudar para o Visual Builder
Agora você pode alternar para o Visual Builder.
Depois de fazer isso, três opções aparecerão na tela. Clique no botão azul para começar a construir do zero.
Criar design de postagem no blog
Adicionar Seção # 1
Imagem de fundo
Vamos começar a criar o modelo! Comece com uma seção vazia no topo. Abra as configurações da seção, vá para as configurações de fundo e carregue um estilo de fundo de sua escolha. Você pode encontrar todas as 5 variações acessando a pasta baixada> Hero .
- Tamanho da imagem de fundo: capa
- Posição da imagem de fundo: Centro superior
Espaçamento
Para permitir que a imagem de fundo apareça completamente, brinque com o preenchimento superior da seção.
- Preenchimento superior: 660 px
Adicionar Seção # 2
Espaçamento
Logo abaixo da seção que você acabou de adicionar, vá em frente e adicione outra. Abra as configurações, vá para as configurações de espaçamento e remova todo o preenchimento padrão personalizado.
- Preenchimento superior: 0 px
- Preenchimento inferior: 0 px
Adicionar nova linha
Estrutura da Coluna
Continue adicionando uma nova linha à seção usando a seguinte estrutura de coluna:
Espaçamento
Remova todo o preenchimento padrão na parte inferior da seção a seguir.
- Preenchimento inferior: 0 px
Adicionar Módulo de Título de Postagem
Elementos
É hora de começar a adicionar módulos! Nesta linha, precisaremos apenas de um Módulo de Título de Postagem. Depois de adicionar um, escolha os elementos que deseja exibir.
Configurações de texto do título
Em seguida, vá para as configurações de texto do título e faça algumas alterações.
- Fonte do Título: Abril Fatface
- Alinhamento do Texto do Título: Centro
- Tamanho do texto do título: 73 px (desktop), 50 px (tablet), 40 px (telefone)
Configurações de meta texto
As configurações de meta texto também precisam ser modificadas.
- Meta Alinhamento de Texto: Centro
- Meta Cor do Texto: Cor # 1 (Encontre na Paleta)
- Tamanho do metatexto: 18 px
- Altura da linha meta: 3em
Adicionar Seção # 3
Imagem de fundo
A última seção desta página conterá o conteúdo da postagem do blog e o CTA. Comece enviando o estilo de plano de fundo de sua escolha. Você pode encontrar as variações acessando a pasta baixada> Corpo . Depois de carregar a imagem de plano de fundo, faça algumas alterações nas configurações de plano de fundo.
- Tamanho da imagem de fundo: tamanho real
- Posição da imagem de fundo: Centro superior
- Repetição da imagem de fundo: espaço
Espaçamento
Remova todo o preenchimento superior padrão desta seção para eliminar todos os espaços em branco entre esta seção e a anterior.
- Preenchimento superior: 0 px
Adicionar linha # 1
Estrutura da Coluna
Continue adicionando uma nova linha à seção usando a seguinte estrutura de coluna:
Cor de fundo
Adicione uma cor de fundo ligeiramente transparente à próxima linha.
- Cor de fundo: rgba (255,255,255,0,86)
Espaçamento
Remova o preenchimento personalizado padrão aqui também.
- Preenchimento superior: 0 px
- Preenchimento inferior: 0 px
Adicionar Módulo de Texto
Adicionar conteúdo
Prossiga adicionando um Módulo de Texto à linha que você adicionou. Aqui, você pode adicionar todo o conteúdo da postagem do blog que desejar e usar os diferentes estilos de texto para obter o resultado desejado. Na tela de impressão abaixo, estamos usando títulos e parágrafos.
Configurações de texto
Vá para as configurações de texto e faça algumas alterações.
- Tamanho do texto: 21 px (desktop), 18 px (tablet), 15 px (telefone)
- Altura da linha de texto: 2em
Configurações de título
As configurações de texto do título também precisam ser modificadas.
- Fonte do cabeçalho: Abril Fatface
- Tamanho do texto do título: 46 px (desktop), 40 px (tablet), 30 px (telefone)
- Altura da linha de direção: 1,5em
Espaçamento
Adicione alguns valores de preenchimento personalizados a seguir.
- Enchimento superior: 80px
- Preenchimento inferior: 80 px
- Preenchimento esquerdo: 80 px (desktop), 40 px (tablet), 30 px (telefone)
- Preenchimento direito: 80 px (desktop), 40 px (tablet), 30 px (telefone)
Sombra da caixa
Para finalizar, adicione uma sombra de caixa sutil ao Módulo de Texto. Isso trará alguma profundidade ao modelo de postagem do blog.
- Força do desfoque de sombra da caixa: 80 px
- Força de propagação da sombra da caixa: -14px
Adicionar linha # 2
Estrutura da Coluna
Continue adicionando uma nova linha logo abaixo da anterior usando uma coluna.
Espaçamento
Remova também todo o preenchimento personalizado padrão desta linha.
- Preenchimento superior: 0 px
- Preenchimento inferior: 0 px
Adicionar Módulo de Aceitação de Email
Adicionar conteúdo
Em seguida, adicione seu CTA. Estamos usando um Módulo de aceitação de e-mail. Depois de adicioná-lo, modifique o conteúdo.
Campos
Estamos usando apenas o endereço de e-mail neste módulo, então vá em frente e desative o nome e o sobrenome nas configurações dos campos.
Fundo Gradiente
Continue adicionando um fundo gradiente ao Módulo de aceitação de e-mail.
- Cor 1: Cor # 2 (Encontre na Paleta)
- Cor 2: Cor # 3 (Encontre na Paleta)
- Direção do gradiente: 144 graus
Layout
Em seguida, altere o layout do módulo.
- Layout: corpo na parte superior, formulário na parte inferior
Configurações de texto
Altere também as configurações de texto.
- Orientação do Texto: Centro
- Cor do Texto: Claro
Configurações de texto do título
Em seguida, abra as configurações de texto do título e faça algumas alterações.
- Fonte do Título: Abril Fatface
- Tamanho do texto do título: 54 px (desktop), 40 px (tablet), 35 px (telefone)
Configurações de botão
Modifique a aparência do botão também.
- Largura da borda do botão: 0 px
- Raio da borda do botão: 0 px
- Estilo da fonte: sublinhado
- Estilo de sublinhado: duplo
Espaçamento
Por último, use diferentes valores de preenchimento personalizado nas configurações de espaçamento do Módulo de Opção de Email.
- Enchimento superior: 100px
- Preenchimento inferior: 100px
- Preenchimento esquerdo: 300 px (desktop), 50 px (tablet e telefone)
- Preenchimento direito: 300 px (desktop), 50 px (tablet e telefone)
Salvar layout na biblioteca Divi para reutilização
A única coisa que resta a fazer é salvar o layout na Biblioteca Divi. Dessa forma, você também pode reutilizá-lo em outras páginas! Você também pode acessar as postagens do blog como páginas existentes ao criar uma nova página.
Antevisão
Agora que passamos por todas as etapas, vamos dar uma olhada final no resultado que criamos.
Pensamentos finais
Neste post, compartilhamos com você alguns estilos de fundo impressionantes e vibrantes que você pode baixar gratuitamente. Além disso, também orientamos você na criação do modelo de postagem do blog desde o início. Sinta-se à vontade para usar esses estilos de fundo para os modelos de postagem de blog que você mesmo criar. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!