Como criar 3 impressionantes designs de fonte monoespaçada em Divi
Publicados: 2019-09-02Fontes monoespaçadas são um recurso maravilhoso para o design da web. Eles são especialmente úteis para criar designs que tenham uma bela simetria e equilíbrio. Uma fonte monoespaçada é composta de letras e caracteres com a mesma largura (ou espaço horizontal). Como tal, eles fornecem uma estrutura consistente e elegante para a exibição de texto. As fontes monoespaçadas são amplamente utilizadas na codificação por esse motivo.
Neste tutorial, vamos criar três designs de fontes monoespaçadas impressionantes em Divi. Veremos como personalizar corretamente os módulos de texto para posicionar e projetar fontes monoespaçadas de algumas maneiras bastante exclusivas e muito mais.
Vamos começar.
Espiada
Aqui está uma rápida olhada nos designs que construiremos neste tutorial.
Design de fonte monoespaçada nº 1: estilo do logotipo
Comece a construir o design # 1
Projeto de fonte monoespaçada nº 2: blocos de letras grandes
Comece a construir o projeto # 2
Projeto de fonte monoespaçada nº 3: quebra-cabeça de palavras cruzadas
Comece a construir o projeto # 3
Baixe o layout de designs de fonte monoespaçada 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.
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!
Inscreva-se no nosso canal no Youtube
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, você precisará fazer o seguinte:
- Se ainda não o fez, instale e ative o Divi Theme instalado (ou o Divi Builder Plugin se não estiver usando o Divi Theme).
- Crie uma nova página no WordPress e use o Divi Builder para editar a página no front end (construtor visual).
- Faça upload de algumas imagens simuladas para a biblioteca de mídia para serem usadas no tutorial. Estaremos usando um logotipo de imagem de 200px por 200px do pacote de layout HVAC e duas imagens de fundo (pelo menos 1920px de largura) tiradas do Cake Maker Layout Pack e do Home Improvement Layout Pack.
Depois disso, você terá uma tela em branco para começar a desenhar no Divi.
Design de fonte monoespaçada nº 1: estilo do logotipo
Vamos começar com um design de fonte monoespaçada simples que destaca o equilíbrio simétrico das letras. Como as letras são espaçadas uniformemente, as fontes monoespaçadas são ótimas para gráficos e logotipos. Aqui está um exemplo rápido de como você pode incorporar a fonte monoespaçada com um ícone de imagem simples para criar um gráfico agradável.
Primeiro, crie uma seção regular com uma linha de uma coluna.
Antes de adicionarmos o módulo de texto, vamos adicionar um plano de fundo à seção. O plano de fundo consistirá em uma imagem de ícone centralizado com um plano de fundo cinza escuro. A imagem do ícone que usaremos foi tirada do Pacote de Layout HVAC. Certifique-se de que o ícone da imagem tenha cerca de 200 px por 200 px, pois usaremos o tamanho real como imagem de fundo.
Abra as configurações da seção e atualize o seguinte:
- Cor de fundo: # 121212
- Imagem de fundo: [inserir ícone de imagem de 200 x 200 pixels]
- Tamanho da imagem de fundo: tamanho real
- Posição da imagem de fundo: centro
Adicione o Módulo de Texto
Assim que a seção estiver concluída, adicione um módulo de texto à linha de uma coluna.
É aqui que adicionamos o texto com uma fonte monoespaçada. O aspecto conveniente das letras monoespaçadas é que, como cada letra tem a mesma largura, você pode facilmente centralizar a letra do meio do texto na página. Isso facilitará o alinhamento com o ícone da imagem de fundo que adicionamos à seção.
Abra as configurações do módulo de texto e atualize o conteúdo do corpo com a palavra “elegante”. Na verdade, você pode usar praticamente qualquer palavra que tenha um número ímpar de letras, de modo que tenhamos uma letra central para sobrepor o ícone da imagem de fundo de maneira adequada.
Adicionando o Design de Fonte Monoespaçada
Divi tem cerca de 12 fontes monoespaçadas diferentes incluídas no Divi builder que podemos escolher. Para vê-los, podemos clicar para selecionar uma fonte de texto e inserir “mono” na barra de pesquisa. Isso mostrará a lista de fontes monoespaçadas disponíveis.
Em seguida, atualize as configurações de design da seguinte forma:
- Fonte do texto: Droid Sans Mono
- Tamanho do texto do texto: 5vw
- Espaçamento entre letras do texto: 1,3em
- Altura da linha de texto: 1em
Esta combinação da unidade de comprimento vw para o tamanho do texto e a unidade de comprimento em para o espaçamento entre letras e altura da linha garantirá que o texto responda perfeitamente a todos os tamanhos de navegador.
Espaçamento
Depois que a fonte estiver pronta, adicione algum espaçamento ao módulo de texto para garantir que o texto esteja perfeitamente centralizado. Podemos ver que o texto está um pouco fora do centro devido ao espaçamento das letras. Podemos corrigir isso facilmente adicionando um preenchimento à esquerda igual ao valor que adicionamos para o espaçamento das letras.
Atualize o seguinte:
- Margem: 0px inferior
- Preenchimento: 2em superior, 2em inferior, 1,3em esquerdo
Mudar a cor da letra central
Uma maneira simples de alterar a cor de uma única letra no Divi é usar as opções de estilo embutido ao usar o construtor no front end.
Basta destacar a letra que deseja alterar e clicar no ícone da cor do texto na barra de menu.
Em seguida, adicione o seguinte código de cor: rgba (248, 142, 96, 0,54)
É isso!
Largura total da linha
Precisamos abrir algum espaço para o texto que será adicionado, então vá em frente e torne a linha largura total abrindo as configurações de linha e atualizando o seguinte:
- Largura: 100%
- Largura máxima: 100%
Resultado final
Aqui está o resultado final.
E se quiser, você pode adicionar um espaço para o caractere central no texto para usar o ícone da imagem de fundo para o espaço vazio. Aqui está como seria.
Projeto de fonte monoespaçada nº 2: blocos de letras grandes
O próximo design mostra a estrutura de fonte em bloco que é possível com fontes monoespaçadas. Ao contrário das fontes regulares (largura variável), as fontes monoespaçadas são empilhadas umas sobre as outras para um design equilibrado que é moderno e agradável à vista.
Veja como fazer.
Crie uma nova seção regular com uma linha de uma coluna.
Antes de adicionar qualquer módulo, atualize a seção com um design de plano de fundo da seguinte maneira:
- Cor do gradiente de fundo à esquerda: # fcd1e5
- Cor do gradiente de fundo à direita: rgba (255,255,255,0)
- Direção do gradiente: 135 graus
- Posição inicial: 50%
- Posição final: 76%
Em seguida, adicione uma imagem de fundo. Estou usando um do Pacote de Layout do Cake Maker.
Adicionar largura de linha
Em seguida, atualize a largura da linha da seguinte forma:
- Largura: 100%
- Largura máxima: 100%
Adicione o Módulo de Texto
Depois de ter uma linha de largura total, adicione um módulo de texto à linha.
Em seguida, atualize o conteúdo do corpo com o seguinte:
<p>dividesign<a href="#">learnmore</a></p>
Em seguida, estilize o texto do parágrafo da seguinte maneira:
- Fonte do texto: Overpass Mono
- Estilo da fonte do texto: TT
- Cor do texto do texto: # 2e298f
- Tamanho do texto do texto: 15vw
- Espaçamento entre letras do texto: 0,16em
- Altura da linha de texto: 1em
Adicionaremos um estilo diferente ao texto do link da seguinte maneira:
- Estilo da fonte do link: sublinhado
- Cor do texto do link: # 2e298f
- Tamanho do texto do link: 3,5vw
- Espaçamento entre letras de links: 0em
Espaçamento
Após o estilo do texto, atualize o espaçamento da seguinte forma:
- Margem: 0px inferior
- Preenchimento: 0,16em à esquerda, 3em à direita
Depois disso, salve as configurações. Em seguida, use as opções de estilo embutido para alterar a cor das letras, como fizemos no primeiro exemplo de design no início da postagem.
Para fazer isso, destaque as quatro letras principais e altere a cor para branco.
Altere a cor da segunda letra para a seguinte: # f34a43
Por último, destaque as primeiras cinco letras no texto do link (“aprender”) e atualize a cor para o seguinte: # f34a43.
Design final
Agora vamos conferir o resultado final em uma página ao vivo.
Projeto de fonte monoespaçada nº 3: quebra-cabeça de palavras cruzadas
Este último design aproveita as fontes monoespaçadas para criar um layout do tipo palavras cruzadas para o seu texto. Veja como fazer.
Primeiro, crie uma nova seção regular com uma linha de uma coluna.
Antes de adicionar qualquer módulo, abra as configurações da seção e adicione uma imagem de fundo com um gradiente da seguinte maneira:
- Imagem de fundo: [inserir imagem]
- Cor do gradiente de fundo à esquerda:
- Cor certa do gradiente de fundo:
- Direção do gradiente: 90 graus
- Posição inicial: 25%
- Posição final: 0%
- Colocar gradiente acima da imagem de fundo: SIM
Configurações de linha
Assim que o plano de fundo da seção estiver pronto, abra as configurações de linha com uma nova largura e algum espaçamento.
- Largura: 100%
- Largura máxima: 100%
- Preenchimento: 22vw superior, 5vw esquerdo
Adicionar módulo de texto
Depois que a linha for atualizada, adicione um novo módulo de texto à linha com a palavra “mono” como o conteúdo do corpo.
Em seguida, atualize o design do módulo de texto da seguinte forma:
- Fonte do texto: Rubik Mono One
- Cor do texto do texto: # faac00
- Tamanho do texto do texto: 8vw
- Espaçamento entre letras do texto: 0,15em
- Altura da linha de texto: 1em
Duplique o módulo de texto
Para acelerar o design de nossos próximos dois blocos de texto, vamos duplicar o módulo de texto que acabamos de projetar duas vezes para que você tenha um total de três módulos de texto empilhados um sobre o outro.
Atualizar Módulo de Texto # 2
Depois de duplicar o módulo de texto, abra as configurações do segundo módulo de texto (do meio) e altere o corpo do texto para a palavra “fontes”.
Em seguida, atualize o seguinte:
- Corpo: “fontes”
- Cor de fundo: #dddddd
- Cor do texto do texto: # 930565
- Largura: 0,86em
- Margem: -3em topo, 2em esquerda
Observe como a alteração da largura do módulo de texto faz com que o texto seja exibido verticalmente. E porque é uma fonte monoespaçada, eles se empilham uniformemente. E com uma largura igual ao tamanho de cada bloco de letras, podemos mover o módulo de texto com incrementos de 1em. Assim, a margem superior -3em trará o texto exatamente com 3 blocos de letras. E a margem esquerda 2em moverá o módulo de texto sobre exatamente 2 blocos de letras para a direita. Isso torna mais fácil posicionar os itens em um layout de palavras cruzadas como este.
Sombra da caixa
Vamos adicionar uma sombra de caixa para aumentar o tamanho do fundo atrás do módulo de texto.
- 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: 0,08em
- Cor da sombra: #dddddd (igual à cor de fundo)
Índice Z
Para garantir que este bloco de texto permaneça acima dos outros módulos de texto, atualize o índice z da seguinte maneira:
- Índice Z: 11
Atualizar Módulo de Texto # 3
Quando o módulo de texto nº 2 estiver concluído, abra as configurações do terceiro módulo de texto e altere o corpo do texto para a palavra “espaçado”.
Em seguida, mova o módulo no lugar usando nossos valores mágicos de margem em:
- Margem: -1em topo, 2em esquerda
Design final
Móvel
Como esses designs são construídos usando unidades de comprimento vw e em, o design permanecerá consistente em todos os tamanhos de navegadores. Aqui está a aparência do design na tela do tablet e do telefone.
Observação: o único elemento que não responde é o ícone da imagem de fundo no primeiro design. No entanto, você pode adicionar facilmente uma imagem de fundo menor no tablet e no telefone para corrigir isso.
Pensamentos finais
Talvez a melhor coisa sobre a criação de designs de fonte monoespaçada no Divi seja a versatilidade dos estilos de fonte. Apenas alguns pequenos toques podem fazer uma grande diferença. Além disso, os aplicativos são bastante práticos para qualquer site.
Qual desses três exemplos você achou mais promissor?
Estou ansioso para ouvir de você nos comentários.
Saúde!