Liberando o poder do módulo de texto da Divi para designs de listas criativas
Publicados: 2018-08-16A criação de designs de listas exclusivos é um aspecto importante do design da web. Os leitores apreciam a estrutura e a estética de uma lista bem projetada porque permite que processem as informações com muito mais rapidez.
Com o módulo de texto Divi, você tem tudo que precisa para transformar listas comuns em belas obras de arte. As configurações do módulo de texto do Divi permitem que você direcione e estilize diferentes elementos html em seu conteúdo - incluindo listas. E com algumas técnicas de design, você pode aproveitar o poder dessas opções para personalizar suas listas de maneiras surpreendentes.
Neste tutorial, vou mostrar como você pode criar designs de lista exclusivos no Divi.
Vamos começar.
Espiada
Aqui está uma olhada nos quatro designs de lista que construiremos neste tutorial.
Inspirado nas configurações do módulo de texto
Se você for como eu, pode tender a ignorar algumas das opções “ocultas” que se escondem bem no fundo do Divi Builder. Um módulo que possui alguns tesouros enterrados é o Módulo de Texto. As configurações do Módulo de texto têm várias guias que contêm opções de estilo para diferentes elementos html. Esta pode ser uma ferramenta de design extremamente conveniente e criativa. Essas guias incluem opções para o corpo do texto, links, listas não ordenadas, listas ordenadas e aspas em bloco.
E, há algumas joias ocultas sob essas guias que você pode não ter pensado em utilizar em seu projeto. Por exemplo, você sabia que pode alterar as opções de estilo de lista para listas não ordenadas? Existem várias opções exclusivas disponíveis (18 para ser exato), incluindo numerais romanos e decimais com um zero à esquerda.
Isso pode parecer insignificante, mas quando você aproveita as opções de design, pode produzir alguns designs realmente criativos.
Você também pode definir o estilo de diferentes níveis de título (ou marcas) em cada uma das guias nas opções de estilo de título.
Essa capacidade de direcionar vários elementos html em seu conteúdo abre algumas possibilidades maravilhosas. Esperançosamente, eles irão inspirar você também.
Para saber mais sobre isso, verifique a atualização de recursos que explica algumas dessas opções de texto maravilhosas.
Criando sua lista de HTML
Uma lista html pode ser “ordenada” (com números, numerais romanos, etc.) ou “não ordenada” (com ícones quadrados, ícones de círculo, etc.). Para listas não ordenadas, os itens da lista serão incluídos em uma tag “ul” (“ul” significa “lista não ordenada”). Para listas ordenadas, os itens da lista são agrupados em uma tag “ol” (“ol” significa “lista ordenada”). Cada item da lista é envolvido por uma tag “li” (“li” para “item da lista”).
Aqui está a estrutura básica de uma lista ordenada:
<ol>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ol>
Que por padrão terá a seguinte aparência:
- Item da lista
- Item da lista
- Item da lista
Na verdade, você pode criar uma lista HTML usando o editor wysiwyg dentro de um Módulo de Texto Divi. Certifique-se de que está editando na guia visual e simplesmente digite os itens da lista, certificando-se de que haja uma quebra de linha (pressione Enter) após cada um. Em seguida, destaque o conteúdo e clique em um dos ícones da lista na parte superior do editor.
Agora vá até a guia de texto para ver a aparência do HTML:
Isso funciona bem para listas simples, mas se você quiser criar listas aninhadas (uma lista dentro de uma lista), é melhor criá-las usando HTML (usando a guia de texto) para evitar a dor de cabeça de tentar fazer isso no wysiwyg editor (guia visual).
Aqui está a estrutura básica de uma lista aninhada que possui uma lista ordenada com cada item da lista tendo uma lista não ordenada aninhada.
<ol>
<ol>
<li>Ordered List Item
<ul>
<li>Unordered List Item</li>
</ul>
</li>
<li>Ordered List Item
<ul>
<li>Unordered List Item</li>
</ul>
</li>
<li>Ordered List Item
<ul>
<li>Unordered List Item</li>
</ul>
</li>
</ol>
Por padrão, essa lista html aninhada terá a seguinte aparência:
- Item de lista pedido
- Item de lista não ordenado
- Item de lista pedido
- Item de lista não ordenado
- Item de lista pedido
- Item de lista não ordenado
Você também pode adicionar outras tags html na lista. Por exemplo, podemos envolver o item da lista ordenada em uma tag h5. O resultado será assim:
<ol>
<li><h5>Ordered List Item</h5>
<ul>
<li>Unordered List Item</li>
</ul>
</li>
<li><h5>Ordered List Item</h5>
<ul>
<li>Unordered List Item</li>
</ul>
</li>
<li><h5>Ordered List Item</h5>
<ul>
<li>Unordered List Item</li>
</ul>
</li>
</ol>
Não se preocupe, isso é tão complicado quanto vou entender neste tutorial. Mas o que você precisa perceber é que essa estrutura tem três tags diferentes (ol, ul e h5) que podem ser estilizadas independentemente umas das outras com as configurações de design poderosas do Divi em um módulo de texto.
Iremos precisar dessa estrutura um pouco mais tarde, mas por agora, vamos colocar nossa página no ar para iniciar nosso design no construtor visual.
Criando a Seção e Linha para as Listas
Crie uma nova página e implante o Visual Builder. Em seguida, selecione a opção Criar página do zero. Em seguida, crie uma seção regular com uma linha de duas colunas.
Criando a lista HTML em um módulo de texto
Na primeira coluna de sua linha, adicione um novo módulo de texto. Na caixa de conteúdo nas configurações de texto, insira a seguinte Lista HTML:
<ol> <li> <h5>Design</h5> <ul> <li>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.</li> </ul> </li> <li> <h5>Develop</h5> <ul> <li>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.</li> </ul> </li> <li> <h5>Deliver</h5> <ul> <li>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.</li> </ul> </li> </ol>
Esta estrutura deve parecer familiar desde o início. O texto do cabeçalho h5 será os itens da lista ordenada e o texto fictício “lorem ipsum” será os itens da lista não ordenada aninhada.
Por padrão, será parecido com isto:
Não muito impressionante até agora, eu sei. Mas com esse conteúdo pronto, agora podemos começar a parte divertida de criar nossa lista com a Divi!
Observação importante: como cada design é uma versão modificada do primeiro design, seria melhor começar com o primeiro design neste tutorial e mantê-los em ordem.
Design de lista # 1
Para começar, vamos dar ao nosso módulo de texto um fundo gradiente da seguinte maneira:
Cor esquerda do fundo gradiente: rgba (0,0,0,0.04)
Cor certa do fundo do gradiente: rgba (255,255,255,0)
Direção do gradiente: 90 graus
Posição inicial: 25%
Posição final: 0%
Estilizando os Itens da Lista Ordenada
Agora vá até a guia de design e selecione a guia de lista ordenada sob a alternância de Texto.
Em seguida, atualize o seguinte:
Fonte da lista ordenada: Abril Fatface
Peso da fonte da lista ordenada: negrito
Cor do texto da lista ordenada: # 559cad
Tamanho do texto da lista ordenada: 45px
Altura da linha da lista ordenada: 1,6em
Tipo de estilo de lista ordenada: decimal à esquerda
Posição do estilo da lista ordenada: Fora
Recuo do item da lista ordenada: 2vw
Você notará que o h5 e a lista não ordenada aninhada herdarão o estilo da lista ordenada pai. Não se preocupe, você poderá sobrescrever o estilo dos outros itens.
Estilizando os itens da lista não ordenada
Agora clique na guia da lista ordenada para alterar as seguintes configurações:
Fonte de lista não ordenada: Montserrat
Peso da fonte da lista não ordenada: leve
Cor do texto da lista não ordenada:
Tamanho do texto da lista não ordenada: 18 px
Tipo de estilo de lista não ordenado: Nenhum
Recuo do item da lista não ordenado: 0,01 px
Estilizando o Cabeçalho H5
O último item que precisamos estilizar é o cabeçalho H5. Para fazer isso, acesse as opções em Texto do título e clique na guia H5. Em seguida, atualize o seguinte:
Fonte do título 5: Montserrat
Cabeçalho 5 Peso da fonte: leve
Estilo da fonte do título 5: maiúsculas (TT)
Cor do texto do título 5: # 4f6d7a
Título 5 Tamanho do texto: 5vw (desktop), 70px (tablet), 40px (smartphone)
Para finalizar o design do nosso módulo de texto, adicione o seguinte preenchimento personalizado:
Preenchimento personalizado (desktop): 3vw superior, 3vw inferior
Preenchimento personalizado (tablet): 2vw esquerdo
Preenchimento personalizado (smartphone): 50 px à esquerda
Salvar configurações.
Agora copie o módulo de texto e cole-o na segunda coluna da linha. Você pode notar que os números da lista precisam ser ajustados no módulo de texto duplicado para que continue da lista anterior. Queremos que nossa segunda lista de módulos de texto comece com o número 4 (em vez de 1). Para fazer isso, precisamos adicionar uma pequena mudança à nossa lista de html. Vá para a caixa de conteúdo nas configurações do módulo de texto e substitua a tag de abertura “ol” pelo seguinte:
<ol start="4">
Agora vamos conferir o resultado final.
Design de lista # 2
Para este segundo design de lista de exemplo, vou duplicar a primeira seção que criamos para nos dar uma vantagem. Também apresentarei um fundo legal para o design da lista usando gradientes de fundo.
Criação de um design de gradiente de fundo personalizado
Na seção duplicada, atualize a configuração da seção com o seguinte fundo gradiente:
Cor esquerda do fundo gradiente: #ffffff
Cor certa do fundo do gradiente: rgba (155,29,32,0.08)
Direção do gradiente: 45 graus
Posição inicial: 50%
Posição final: 0%
Salvar configurações.
Agora atualize suas configurações de linha com o seguinte gradiente de fundo:
Cor esquerda do fundo gradiente: rgba (155,29,32,0.08)
Cor certa do fundo do gradiente: rgba (255,255,255,0)
Direção do gradiente: 45 graus
Posição inicial: 25%
Posição final: 0%
Cor esquerda do fundo gradiente da coluna 2: rgba (255,255,255,0)
Cor direita do fundo gradiente da coluna 2: #ffffff
Direção do gradiente da coluna 2: 45 graus
Posição inicial da coluna 2: 65%
Posição final da coluna 2: 0%
A chave para esses designs de gradiente de fundo é que todos eles têm a mesma direção de gradiente de 45 graus. Em seguida, você pode usar a posição inicial para espaçar o design de maneira uniforme.
Configurações de estilo para projeto de lista # 2
Neste ponto, podemos realmente nos divertir ajustando os designs de nossas listas de maneiras exclusivas. Para este segundo exemplo, vou mostrar como é fácil transformar seu design com apenas algumas pequenas alterações. Vá para o módulo de texto na primeira coluna e atualize as configurações da seguinte maneira:
Primeiro exclua o gradiente de fundo.
Peso da fonte da lista não ordenada: médio
Cor do texto da lista não ordenada: rgba (0,0,0,0.5)
Peso da fonte da lista ordenada: regular
Cor do texto da lista ordenada: # 9b1d20
Peso da fonte do cabeçalho 5: fino
Cor do texto do título 5: rgba (0,0,0,0.8)
Título 5 Tamanho do texto: 5vw (desktop)
Agora copie os estilos do módulo para o módulo de texto na coluna da direita.
Aqui está o design final do nosso segundo exemplo.
Design de lista # 3
Para o terceiro exemplo, achei que seria bom dar um exemplo de design de lista de uma coluna centralizado. Para criar este design, duplique a segunda seção de exemplo. Na nova seção duplicada, altere a estrutura da linha para uma coluna e exclua o segundo módulo de texto.
Agora atualize as configurações da seção com novas cores de fundo gradiente:
Cor do fundo gradiente à esquerda: # 559CAD
Cor certa do fundo gradiente: # 4f6d7a
Atualize as configurações de linha com uma nova cor de fundo gradiente à esquerda:
Cor esquerda do fundo gradiente: # 4f6d7a
Em seguida, adicione um novo gradiente de fundo ao módulo de texto .
Cor esquerda do fundo gradiente: rgba (255,255,255,0)
Cor certa do fundo gradiente: # 559cad
Direção do gradiente: 45 graus
Posição inicial: 75%
Posição final: 0%
Isso cria uma versão mais escura do design de plano de fundo simétrico no design de lista # 2 para uma lista de uma coluna. A chave para este design é colocar gradientes de fundo em camadas adicionando um à seção, linha e módulo.
Configurações de estilo para projeto de lista # 3
Para este terceiro exemplo, quero mostrar a você a aparência de uma lista alinhada ao centro. E para o item da lista ordenada, usarei um estilo decimal / numérico mais tradicional.
Vá para as configurações do módulo de texto e atualize o seguinte:
Fonte da lista ordenada: Poppins
Peso da fonte da lista ordenada: Pesado
Alinhamento do Texto da Lista Ordenada: Centro
Tamanho do texto da lista ordenada: 4vw (desktop), 50px (tablet)
Cor do texto da lista ordenada: # f4f1bb
Tipo de estilo de lista ordenada: decimal
Posição do estilo da lista ordenada: dentro
Recuo do item da lista ordenada: 0vw
(Observação: alterar a posição do estilo para dentro fará com que o número se empilhe acima do texto do cabeçalho, o que é conveniente para este design.)
Peso da fonte da lista não ordenada: leve
Cor do texto da lista não ordenada: #ffffff
Fonte do título 5: Lato
Peso da fonte do cabeçalho 5: fino
Cabeçalho 5 espaçamento entre letras: 6vw (desktop), 70px (tablet), 40px (smartphone)
Cor do texto do título 5: #ffffff
Título 5 Tamanho do texto: 6vw
Preenchimento personalizado (desktop): 15% à esquerda, 15% à direita
Preenchimento personalizado (tablet): 5% à esquerda, 5% à direita
Você também deve remover o preenchimento esquerdo personalizado de 50 px no smartphone para este design.
Aqui está o design final.
Projeto de lista # 4
Para este quarto exemplo, vou usar um design de “lista” mais mínimo (viu o que eu fiz lá?). Para a lista ordenada, usarei numerais romanos maiúsculos grandes na fonte Lato. Também vou enquadrar a lista adicionando uma sombra de caixa a cada módulo.
Configurações de estilo para projeto de lista nº 4
Para iniciar este design de lista, duplique a primeira seção com o design de lista # 1. Em seguida, atualize as configurações do primeiro módulo de texto na nova seção da seguinte maneira:
Exclua gradiente de fundo.
Fonte da lista ordenada: Lato
Peso da fonte da lista ordenada: leve
Cor do texto da lista ordenada: # 000000
Tamanho do texto da lista ordenada: 6vw
Tipo de estilo de lista ordenada: romano superior
Recuo do item da lista ordenada: 0vw
Fonte do título 5: Lato
Cabeçalho 5 Peso da fonte: Negrito
Estilo da fonte do título: sublinhado
Cor do sublinhado do título 5: rgba (0,0,0,0.14)
Estilo de sublinhado do título 5: duplo
Cor do texto do título 5: # 000000
Título 5 Tamanho do texto: 40px
Preenchimento personalizado: 3vw à esquerda, 3vw à direita
Exclua o preenchimento esquerdo personalizado para tablet e smartphone herdado do design anterior.
Posição horizontal da sombra da caixa: 6px
Posição vertical da sombra da caixa: 6 px
Força de propagação da sombra da caixa: 0px
Força do desfoque de sombra da caixa: 0 px
Cor da sombra: # 000000
Posição da sombra da caixa: sombra interna
Copie os estilos de módulo para a segunda coluna. Em seguida, atualize a posição da sombra da caixa para a sombra externa.
Aqui está o resultado final.
É isso!
Pensamentos finais
Depois de construir e ajustar suas listas html nos exemplos acima, você deve ter um melhor entendimento de como aproveitar o poder das configurações do módulo de texto como um especialista Divi. Você não terá mais que se contentar com designs de lista enfadonhos em seu conteúdo. Espero que essas técnicas o inspirem a criar designs de lista incríveis para seu próximo projeto.
Eu adoraria ver alguns exemplos seus, então sinta-se à vontade para compartilhar nos comentários.
Saúde!