Que a internet mudou a maneira como recebemos e processamos informações não é apenas um clichê: é a verdade. Por um lado, nosso os períodos de atenção estão diminuindo: as pessoas têm cada vez menos tempo para o conteúdo textual. Por outro lado, não há substituto para ele se você quiser transmitir informações com qualquer significado ou complexidade.
Uma coisa que você pode fazer para evitar que seus visitantes simplesmente pulem um grande corpo de texto é tornar seu conteúdo textual digitalizável, caso você só queira destacar algumas informações interessantes. Você também pode usar o texto realçado para acentos. As caixas de mensagens do WordPress ainda são outra coisa que você pode tentar: eles se destacam claramente do resto do texto e transmitir informações escolhidas aos seus visitantes.
Mostraremos como criar caixas de mensagens para o seu site WordPress. Mas antes de entrarmos em detalhes, gostaríamos de discutir a caixa de mensagem em termos mais gerais. Se você tiver certeza de que tudo o que precisa é saber como fazer, role para a direita até a seção do tutorial. Aqui está o que vamos falar:
Uma caixa de mensagem do WordPress é um elemento de design usado para chamar a atenção do visitante para uma informação. Consiste em uma caixa, algum texto e possivelmente ícones ou outros gráficos. Eles costumam relacionar algumas informações importantes a um visitante do site e destacar-se do corpo principal do texto.
Além disso, uma caixa de mensagem normalmente pode ser dispensado clicando em um sinal X ou outro tipo de ícone de fechamento. Depois de obter as informações, o usuário pode remover a caixa de mensagem com um simples clique do mouse e prosseguir com a leitura. Eles se parecem com isto:
Uma caixa de mensagem é melhor usada quando você deseja faça seus visitantes prestarem atenção especial a uma informação discreta que pode informar o resto do conteúdo, mas não é necessário compreendê-lo. Pode estar intimamente relacionado ao texto, mas não precisa ser.
Talvez o artigo que um visitante está lendo não seja a primeira parte de uma série. Nesse caso, você pode querer alertá-los com uma caixa de mensagem de que eles precisam ler outra coisa primeiro. Sua loja tem uma oferta especial relacionada ao texto? Talvez você possa anunciá-lo em uma caixa de mensagem. Seu livro ou crítica de filme contém spoilers? Melhor deixar isso claro com antecedência.
Uma caixa de mensagem pode ser criada usando um código ou um plugin. Estaremos usando um plugin gratuito, desenvolvido por nós, chamado Qi Addons for Elementor. Os Complementos Qi expandem a já formidável paleta de widgets do Elementor com 60 novos elementos lindamente projetados, um dos quais é a caixa de mensagem.
Com nosso plugin você pode criar caixas de mensagens atraentes do WordPress em minutos. Tudo o que você precisa fazer com antecedência é instalar a versão mais recente do Elementor (a versão gratuita é adequada) e, em seguida, instalar os Complementos Qi. Junto com Complementos de Qi para Elementor, usaremos nosso próprio Tema de Qi. Para obter melhores resultados, sugerimos que você também o faça. Se você já investiu em outro tema, não se preocupe: Addons Qi também funcionarão com ele.
Qi Addons é um plugin separado projetado para funcionar com Elementor e complementá-lo, e é completamente grátis. Depois de instalar os dois, está tudo pronto. Você pode ver como criar uma caixa de mensagem no vídeo abaixo:
Se você preferir seu tutorial em formato de texto, leia abaixo. Para começar, você precisa encontrar um Caixas de mensagem elemento no menu do lado esquerdo e arraste-o para onde quiser na página.
Você verá a caixa de mensagem com suas configurações padrão. Tem um título de espaço reservado e algum texto lorem ipsum. Você pode editá-los no Em geral guia do widget.
Não estaremos usando o Classe Personalizada configurações para esta demonstração. O que vamos fazer é mudar o Título para Ajuste as cores de fundos, ícones, títulos e texto. Tudo isso leva apenas alguns cliques e apaga o texto, tornando esta uma caixa de mensagem muito simples.
O que também queremos fazer é mudar os ícones. O ícone no lado superior esquerdo da caixa é o primeiro em seu Em geral aplicativo, e é chamado Ícone. Passe o mouse para mostrar os menus e, em seguida, Biblioteca de ícones para mudar isso.
Uma vez lá, você pode escolher entre as bibliotecas disponíveis. Estaremos adicionando um marca páginas ícone pesquisando-o no campo de pesquisa, selecionando-o e clicando em Inserir.
Também vamos mudar o Ícone Fechar, o ícone à direita que é usado para descartar a caixa de mensagem. Para alterar um ícone enviando uma imagem .svg, passe o mouse sobre o controle e clique em Carregar SVG.
Você pode então fazer o upload de uma nova imagem ou selecionar uma da biblioteca de mídia, como faremos. Basta selecionar uma imagem e clicar Inserir mídia quando estiver pronto.
Com nossos ícones configurados, estamos prontos para passar para o Estilo aba.
Na seção principal do Estilo guia, você pode encontrar várias opções para definir o estilo do título, texto, ícone e plano de fundo do widget.
Vamos mudar o nosso Tag de título para H4, mas você pode alterá-lo para qualquer configuração de título ou texto de parágrafo. Você também pode alterar o Cor do Título, o que não faremos, e o Tipografia do Título.
No Tipografia do Título configurações, você pode alterar o tipo de fonte (Família), Tamanho (definimos o nosso para 21 pixels), e Peso (ou “ousadia”). O Transformar controle altera a capitalização do título, o Estilo pode ser usado para colocar a fonte em itálico ou selecionar uma fonte oblíqua, enquanto o Decoração o controle é usado para sublinhado, sobrelinhado ou tachado.
O Altura da linha pode espaçar as linhas de um título se tiver mais de um, mas também tem um efeito no tamanho da caixa, pois reserva espaço para uma linha alta o suficiente. Vamos definir o nosso para 30 pixels. O Espaçamento entre letras o controle é usado para espaçar letras individuais do título e não o usaremos para esta caixa de mensagem em particular.
O Cor do texto e Configurações de tipografia de texto são exatamente os mesmos, mas se aplicam ao texto, em oposição ao título. Esta caixa de mensagem em particular não tem texto, então não iremos usá-los.
Em seguida, encontramos o Posição do ícone controles. Você pode colocar seu ícone no topo, no meio ou na parte inferior da linha de título. Gostamos do topo, então vamos deixar como está. Vamos mudar Cor do ícone para # 1e1e1e – quase preto, para combinar com a cor da fonte do nosso título. Finalmente, vamos definir o Tamanho do ícone para 23 pixels.
Os controles para o Fechar tamanho do ícone funcionam exatamente da mesma forma que para o Ícone. O Fechar a cor do ícone controle permite que você escolha uma cor diferente para o seu ícone. Iremos defini-lo como preto (# 000000). O Fechar a cor do ícone de flutuação é a cor do ícone quando passa o mouse sobre ele. Vamos definir isso como preto também, mas com alguma transparência (# 000000cc).
Em seguida, encontramos o Tipo de Fundo controles. Este controle tem dois modos principais: Gradiente, que não usaremos, e Clássico, o que faremos. Usaremos um fundo de cor simples, azul claro (# d5eaf4), mas você também pode usar um Imagem se você assim escolher.
Na parte inferior do Estilo seção desta guia você pode encontrar o Raio da borda da caixa controles. Você pode usá-los para tornar qualquer um ou todos os cantos da caixa de mensagem arredondados. Não o usaremos para esta demonstração.
Finalmente, encontramos o Estilo de espaçamento seção da guia. No Margem do ícone controle, você pode definir a distância entre o ícone e os outros elementos. Vamos clicar no link ícone para desvincular os valores, porque queremos ajustar a posição do ícone. Vamos definir a margem superior para 4 e a margem direita para 18 pixels.
O Margem do Texto Superior o controle está lá se você deseja separar o texto do título. Como esta caixa de mensagem não tem texto, não precisamos dele.
finalmente, o Preenchimento da caixa control é usado para controlar a distância entre as bordas da caixa e seu conteúdo. Não precisaremos dele para esta demonstração.
E aí está, uma bela caixa de mensagem em apenas alguns minutos.
Para concluir
Como você pode ver, é extremamente fácil configurar uma caixa de mensagem no WordPress. Tudo que você precisa são alguns plug-ins gratuitos (Elementor e Complementos Qi) e uma boa ideia para um design atraente. Com o Qi Addons, você obtém uma caixa de mensagem totalmente funcional com opções de estilo virtualmente ilimitadas. Nós o encorajamos a fazer um bom uso.
Apoie o nosso trabalho ❤️
Se você gostou deste artigo, considere deixar uma gorjeta para nos ajudar a continuar publicando conteúdo de qualidade.
