Como usar as opções de estilo de lista e texto da Divi para designs exclusivos de alternância e acordeão de conteúdo
Publicados: 2019-07-24As opções de estilo de lista e texto do Divi são um recurso comum disponível na maioria dos Módulos Divi. Isso abre novas oportunidades para criar conteúdo criativo e listar designs dentro de módulos (como o módulo de alternância e acordeão) que antes só eram possíveis no módulo de texto. O truque é configurar seu conteúdo com o html apropriado para que você possa direcionar esses itens usando as configurações de design integradas.
Neste tutorial, vou mostrar como usar as opções de estilo de lista e texto do Divi para designs de conteúdo de alternância e acordeão exclusivos. Isso será útil sempre que você quiser incorporar designs de texto diferentes sem ter que usar classes CSS ou css embutidos.
Vamos começar.
Espiada
Aqui está uma rápida olhada nos designs que construiremos usando as opções de estilo de lista e texto do Divi.
Baixe GRATUITAMENTE os designs de estilo de lista para layout de alternância e acordeão
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!
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á ter o seguinte:
- O Divi Theme instalado e ativo
- Uma nova página criada para construir do zero no front end (construtor visual)
- Imagens a serem usadas para conteúdo simulado
Depois disso, você terá uma tela em branco para começar a desenhar no Divi.
Parte 1: Usando estilos de lista em módulos de alternância
Nesta primeira parte do tutorial, vamos criar três alternadores, cada um com o conteúdo projetado usando opções de estilo de lista. Isso será útil para separar os itens da lista em alternâncias diferentes, quase como uma sinopse personalizada de conteúdo.
Primeiro crie uma seção regular com uma linha de três colunas. Em seguida, atualize as configurações de linha da seguinte forma:
Largura da calha: 2
Largura: 100%
Largura máxima: 90vw
Adicionar um Módulo de Alternância
Em seguida, adicione um módulo de alternância à coluna 1. Este será o primeiro dos três módulos de alternância que serão adicionados a cada uma das três colunas.
Adicionar a Alternância de Conteúdo HTML
O conteúdo HTML é a chave para este design. Para aproveitarmos os diferentes estilos de lista nas configurações de alternância do Divi, precisamos adicionar listas HTML à nossa caixa de conteúdo.
Vá em frente e cole o seguinte HTML no
Caixa de conteúdo do corpo.
<ol start="1">
<li>
<ul style="margin-top: -1.5em;">
<li>Lorem ipsum dolor sit amet</li>
</ul>
</li>
</ol>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</p>
Agora, este pedaço de código HTML cria uma lista ordenada usando a tag ol. A lista ordenada tem apenas um item de lista (li) que é uma lista não ordenada aninhada (ul) com um item de lista (li) que tem algum conteúdo simulado. Abaixo da lista ordenada está um parágrafo básico de texto.
Com esta configuração, podemos direcionar cada uma dessas marcas (ol, ul, p) para estilos diferentes usando os estilos de texto integrados do Divi que incluem estilos de lista.
Observe que a tag inicial tem start = ”1 ″ dentro dela. Isso informa à lista por qual número começar, listando os números da lista ordenada com cada item da lista. Tecnicamente, isso não é necessário para o primeiro número porque ele começará automaticamente com 1 por padrão. Mas vamos precisar dele para os próximos botões que adicionarmos.
Além disso, a tag de lista não ordenada tem algum estilo embutido para aumentar um pouco o conteúdo ul usando a margem negativa. É assim que iremos sobrepor o número da lista ordenada com o texto da lista não ordenada no design.
Estilizando o Conteúdo
Agora podemos começar a adicionar algumas cores e estilos de fonte usando as configurações integradas e estilos de lista. Atualize as configurações de alternância de design da seguinte maneira:
Cor do ícone: # ff3d97
Tamanho da fonte do ícone: 26px
Abrir alternar cor de fundo: #ffffff
Cor de fundo de alternância fechada: #ffffff
Cor do texto do título aberto: # 333333
Cor do texto do título: # 333333
Fonte do título: Oswald
Tamanho do texto do título: 18 px
Altura da linha do título: 3em
Fonte de lista não ordenada: Oswald
Peso da fonte da lista não ordenada: leve
Cor do texto da lista não ordenada: # 333333
Tamanho do texto da lista não ordenada: 36px
Tipo de estilo de lista não ordenado: Nenhum
Fonte da lista ordenada: Kameron
Peso da fonte da lista ordenada: negrito
Cor do texto da lista ordenada: rgba (255,61,151,0,34)
Tamanho do texto da lista ordenada: 100px
Altura da linha da lista ordenada: 1.1em
Duplique o primeiro módulo de alternância para criar as outras alternâncias
Para criar os alternadores para as colunas 2 e 3, vamos duplicar o módulo de alternância que acabamos de projetar. Em seguida, podemos arrastá-los para cada coluna de modo que cada coluna tenha o mesmo módulo de alternância.
Atualizar os números iniciais da lista ordenada
Para alternar entre duplicatas na coluna 2, precisamos que a lista ordenada comece com o número “2” em vez de “1”. Para alterar isso, abra as configurações do módulo de alternância e altere o número inicial na tag ol para “2”.
Você também precisará atualizar a alternância na coluna 3 com o número inicial da lista ordenada de “3”.
Design final
Agora vamos verificar o design final.
Parte 2: Usando estilos de lista em módulos de acordeão
Nesta segunda parte do tutorial, mostrarei uma maneira rápida e fácil de trazer os designs de conteúdo de estilo de lista do módulo de alternância para um módulo de acordeão. O processo é fácil porque você pode usar os mesmos estilos de texto e lista em um módulo de acordeão (ou praticamente qualquer módulo) que usamos em nossos alternadores anteriores. Para fazer isso, primeiro crie uma nova seção com uma linha de uma coluna. Em seguida, adicione um módulo de acordeão à linha.
Em seguida, duplique um dos dois acordeões padrão na guia de conteúdo para um total de três acordeões. Em seguida, atualize o conteúdo de cada acordeão individual com o mesmo conteúdo html de alternância exata em cada um dos três botões de alternância que criamos anteriormente.
Estenda os estilos de alternância para o acordeão
Uma maneira rápida de transportar o estilo das alternâncias que criamos para o módulo de acordeão é usar o recurso Estender estilos. Para fazer isso, abra um dos módulos de alternância e clique com o botão direito na categoria de estilo de ícone e selecione “estender estilos de ícone” no menu do botão direito. Em seguida, selecione para estender os estilos deste ícone para “Todos os Acordeões” em “Esta Página”.
Em seguida, faça o mesmo para cada uma das categorias de design que possuem um estilo personalizado que precisa ser estendido para o módulo de acordeão. Isso inclui estilo para “Alternar”, “Texto do título” e “Corpo do texto”.
Em seguida, confira o resultado final do design do acordeão.
Parte 3: Usando estilos de lista para criar conteúdo de várias colunas em um módulo de alternância
Nesta terceira parte do tutorial, vou mostrar como você pode criar várias colunas de conteúdo para seus designs de estilo de lista.
Primeiro, crie uma nova seção com uma linha de uma coluna. Em seguida, copie e cole um dos módulos de alternância que criamos anteriormente na linha.
Em seguida, atualize o conteúdo do corpo do módulo de alternância com algum novo HTML da seguinte maneira:
<ol style="column-count: 2">
<li>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
</ul>
</li>
<li>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
</ul>
</li>
<li>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
</ul>
</li>
<li>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
</ul>
</li>
</ol>
Observe o atributo de estilo embutido “column-count: 2” que foi adicionado à tag inicial. Isso permitirá que o conteúdo da lista ordenada seja estruturado em duas colunas em vez de uma. Você pode alterar isso para qualquer número para mais colunas, conforme necessário.
E observe como temos a capacidade de usar as configurações de design integradas do Divi para os estilos de título, link e lista.
Estilo do texto do link
Uma vez que os estilos de título e lista já estão em vigor desde o design anterior, tudo o que precisamos fazer é adicionar algum design para o texto do link.
Abra as configurações de alternância e atualize o seguinte:
Peso da Fonte do Link: Semi Negrito
Estilo da fonte do link: sublinhado
Cor do texto do link: # ff3d97
Tamanho do texto do link: 15px
E uma vez que não estamos sobrepondo nenhum texto com este design, vá em frente e dê aos números de estilo de lista ordenada uma cor mais brilhante da seguinte maneira:
Cor do texto da lista ordenada: # ff3d97
Adicione um fundo ao alternador
Para finalizar o design, podemos adicionar um fundo personalizado ao nosso alternador. Para fazer isso, atualize as seguintes configurações de alternância:
Imagem de fundo: [carregar imagem de sua escolha]
Cor do gradiente de fundo à esquerda: rgba (255,255,255,0,92)
Cor do gradiente de fundo à direita: rgba (255,255,255,0,8)
Direção do gradiente: 90 graus
Posição inicial: 50%
Posição final: 0%
Colocar gradiente acima da imagem de fundo: SIM
Adicionar elementos responsivos à alternância de duas colunas
Como o conteúdo de alternância agora tem duas colunas, vamos atualizar o design com alguns estilos responsivos para torná-lo escalável no celular.
Primeiro, atualize as configurações de linha da seguinte maneira:
Largura: 100%
Largura máxima: 89vw (desktop), 90vw (tablet e telefone)
Abra as configurações de alternância e atualize o seguinte:
Tamanho da fonte do ícone: 5vw
Tamanho do texto do título: 4vw
Tamanho do texto da lista não ordenada: 26 px (desktop), 18 px (tablet), 14 px (telefone)
Recuo do item da lista não ordenado: 1px
Tamanho do texto da lista ordenada: 8vw
Design final do conteúdo de alternância de múltiplas colunas
Aqui está o design em telas de tablets e telefones.
E aqui está o mesmo design com um fundo mais escuro e cores de texto brancas.
Pensamentos finais
Na maioria das vezes, os toggles e acordeões terão um conteúdo corporal básico que realmente não requer um design criativo. Mas se chegar a hora em que você deseja incrementar seu conteúdo de alternância e acordeão, você pode aproveitar as vantagens das opções de estilo de lista e texto integradas do Divi. Depois de ter seu html no lugar, você pode direcionar essas tags html para designs diferentes sem ter que usar CSS ou classes externas personalizadas. Essa também é uma ótima maneira de exibir estilos de lista criativos em qualquer módulo usando o Divi builder porque essas mesmas opções de estilo de lista estão disponíveis em todos os módulos.
Divirta-se explorando novos designs.
Estou ansioso para ouvir de você nos comentários.
Saúde!