Para qualquer proprietário de site, muitas vezes é importante saber que você se destaca da concorrência. Divi oferece inúmeras possibilidades para produzir layouts únicos, mas sempre podemos, com um pouco mais de escavação, criar algo mais único. É aqui que os pseudo-elementos CSS realmente são úteis.
O que queremos dizer com elementos pseudo-CSS?
Simplificando, um pseudoelemento CSS pode ser usado para estilizar partes específicas de um elemento. Existem cinco tipos de pseudoelementos que fazem coisas diferentes. Para os fins deste artigo, vamos falar apenas sobre: antes e: depois.
Esses dois pseudoelementos são usados para inserir algo antes ou depois do conteúdo de um elemento. Isto é particularmente útil porque podemos usá-los para adicionar elementos visuais adicionais a imagens, textos e outros elementos existentes!
Então, por que usaríamos esses pseudo-elementos? Antes e depois são ótimos para desbloquear possibilidades de design sem a necessidade de adicionar mais elementos ou módulos. Da mesma forma, eles são úteis para adicionar elementos adicionais sem ter que tocar nos principais modelos html ou arquivos de tema.
Como você usa os elementos antes e depois com o Divi?
Se tudo isso parece um pouco confuso até agora, não se preocupe! Se fôssemos usar :: before e :: after para escrever o código CSS do zero, seria mais ou menos assim:
Suponha que temos uma linha de texto com a classe "texto-exemplo" - o CSS para estilizar e personalizar essa linha seria:
.example-text {* adicione seu estilo aqui *}
Agora, se você quisesse adicionar e estilizar um elemento :: before ou :: after, o CSS ficaria assim:
.example-text :: before {* adicione seu estilo antes do elemento aqui *} .example-text :: after {* adicione seu estilo após o elemento aqui *}
Felizmente, Divi fornece acesso fácil a pseudo-elementos ::antes e ::depois com muito menos problemas. Na verdade, se você já abriu a guia “Avançado” para adicionar CSS personalizado, já viu as áreas às quais estamos nos referindo.
Essas áreas fornecem um atalho rápido para adicionar e personalizar o conteúdo antes e depois de qualquer módulo Divi existentes e podemos usá-los para criar designs realmente flexíveis e interessantes.
Visão geral
Aqui está o que criaremos neste tutorial:
Exemplo 1
começo
Para este tutorial, começaremos no modo Visual Builder. Você deve, portanto, clicar em "Visual Builder", quando estiver em uma nova página.
Agora estamos prontos para começar!
Exemplo 1: Módulos Blurb numerados usando pseudoelementos
O blurb é provavelmente um dos módulos Divi mais flexíveis disponíveis para você. Neste caso, usaremos pseudoelementos para adicionar números antes de cada apresentação para criar uma seção detalhada "Como funciona". Também adicionaremos uma forma de seta à direita para indicar o processo.
O que criaremos:
Embora esse design funcione com todos os designs de apresentação, pegamos emprestada a seção dedicada para apresentação da agência web. Se quiser usá-los como ponto de partida, você pode acessar a página de destino da agência da web criando uma nova página e acessando o construtor de front-end.
Quando sua página é carregada, você tem a opção de usar um layout predefinido, um de seus layouts salvos, ou criar uma nova construção. Selecione o layout predefinido e use a barra de pesquisa para encontrar os layouts de “Agência Web”. A seção de visão geral deste tutorial está na página inicial.
Uma vez carregado, a única diferença entre o layout predefinido e o nosso exemplo é que alteramos o plano de fundo de cada texto, o título e a cor da fonte do texto e adicionamos um pouco de preenchimento.
Depois de alterar essas configurações em um anúncio, você pode clicar com o botão direito do mouse no módulo e usar os "estilos estendidos" para aplicá-los aos outros três.
Agora que personalizamos nossos quatro módulos do Blurb para ter a aparência que desejamos, é hora de adicionar algum código para criar o elemento numerado. No entanto, para que esse design funcione, primeiro precisamos adicionar uma linha de CSS à caixa de CSS personalizada do elemento principal.
transbordamento: visível
Isso simplesmente permitirá que os elementos que criamos nas etapas a seguir sejam visíveis onde quer que eles se sobreponham às bordas do nosso módulo de apresentação.
Feito isso, abra as opções do módulo e vá para a “aba Avançado”. Na área "antes", adicione este snippet CSS:
conteúdo: '1.'; / * adicione o número "1". antes do conteúdo * / peso da fonte: negrito; tamanho da fonte: 80px; opacidade: 0.7; / * tornar o número ligeiramente transparente * / color: blue; / * altera a cor da fonte do número * / position: absoluto; índice z: 9999; esquerda: 0; / * coloca o conteúdo a 0px bem à esquerda do conteúdo * / top: -20px; / * Posiciona o conteúdo 20px acima da borda superior * /
Depois de adicionar este snippet, você verá o número aparecer no canto superior esquerdo do pod do Blurb. Você pode alterar a posição do número alterando as linhas "esquerda:" e "superior:" ou alterar a cor do número e o tamanho da fonte neste snippet CSS.
Depois de concluir isso no primeiro módulo, vá para os três novos módulos do Blurb e altere a linha "content:" para:
conteúdo: '2.';
conteúdo: '3.';
... etc.
Agora que resolvemos nossos números, precisamos adicionar um pouco de CSS para criar a forma da seta.
Abra cada módulo e digite-o na caixa Depois da caixa CSS personalizada:
content:''; display:block; height:60px; width:60px; position:absolute ; top:40%; right:-30px; z-index:-1; background-color:#e8e8e8; transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg);
Agora, suas quatro notas introdutórias devem ficar assim:
Isso é tudo para este tutorial, espero que permita que você use melhor os pseudo-elementos com as opções que o Divi oferece.
