O cliente tinha um site como modelo que apresentava uma lista de motivos para ler uma isca digital. A lista era com texto desencontrado, ícones e divisor vertical centralizado no desktop. Já em tablet e celular, os ícones e divisor ficavam à esquerda e o texto um abaixo do outro. Além disso, era numerada. Fiz os dois modelos para o cliente e deixei a visibilidade do de 2 colunas apenas para desktop e o de 1 coluna apenas para tablet e celular.
Para reproduzir isso com Divi, usei o módulo de sinopse com o ícone de diálogo, módulos de texto para os números e módulo de código para o divisor. Os ícones, número e divisor tem posição absoluta na versão com 2 colunas. Com 1 coluna, a sinopse ficou na posição padrão. Para deixar mais bonito, aumentei o padding do ícone circulado.
O mais difícil foi fazer o divisor. Tentei fazer com a borda das colunas primeiro, mas como o texto é desencontrado, teria que ser numa linha a borda direita da primeira coluna e na outra a esquerda da segunda coluna, o que faz com que a linha fique ligeiramente desencontrada. Não funcionou tentar colocar sempre a borda direita da primeira coluna (ou esquerda da segunda), pois uma das colunas fica vazia e a não ser que estabelecesse uma altura fixa para a linha, o que seria ruim em termos de responsividade, a coluna vazia não mostrava a borda.
Depois tentei fazer com um módulo de divisor e rotacionar para que ele ficasse na vertical, mas causava o problema de ter que colocar uma altura para o divisor, já que em 100% ele ainda ficava pequeno. Por fim, criei uma div com uma classe (linha na versão 1 coluna e linha2 com 2 colunas), estabeleci posição absoluta e altura de 100%. Para funcionar, todo os níveis do módulo tinham que ter posição absoluta e altura de 100%, não apenas o módulo em si, então acrescentei uma classe ao módulo de código e selecionei com css também a div interna do módulo que tem a classe et_pb_code_inner.
Também registro que enquanto a lista com 1 coluna funciona em todos os tamanhos de tela, a lista com 2 colunas só fica bem em desktop, portanto desabilitei a visualização em tablet e celular aqui no blog. Segue abaixo o código css usado nos dois casos e, após, as seções com as listas.
Lista em 2 Colunas
.dialogo .et-pb-icon-circle {
padding: 10px;
}
.codigo-linha2 .et_pb_code_inner {
position: absolute;
height: 100%;
}
.linha2 {
border-left: 2px #d5d5d5 dashed;
position: absolute;
height: 100%;
top: 45px;
right: 50%;
}Lista em 1 Coluna
.dialogo .et-pb-icon-circle {
padding: 10px;
}
.dialogo.et_pb_blurb_position_left .et-pb-icon {
font-size: 50px !important;
}
.codigo-linha .et_pb_code_inner {
position: absolute;
height: 100%;
}
.linha {
border-left: 2px #d5d5d5 dashed;
position: absolute;
height: 100%;
top: 20px;
left: 35px;
}O que você
encontrará no livro?
Entendendo e Definindo seu Cliente Ideal
Entenda os diferentes tipos de cliente, e defina qual deles é o cliente ideal para você
1
2
Construindo Sua Lista de Emails
Como construir a sua lista de emails e usá-la como principal canal de vendas
Relacionamento e Autoridade com Sua Lista
Tenha uma lista de emails responsiva e aquecida, se relacionando da maneira correta com ela
3
4
Criando uma Oferta Irresistível
Aumente drasticamente suas vendas com uma oferta que vai muito além de uma explicação do seu produto
Como ter um Negócio Digital Lucrativo
Escolha e valide o seu nicho ideal, alcançando lucro e liberdade
5
6
O Modelo de Produto Ideal
Entenda exatamente qual é esse modelo, e como tirar vantagem dele
O que você
encontrará no livro?
1
Entendendo e Definindo seu Cliente Ideal
2
Construindo Sua Lista de Emails
3
Relacionamento e Autoridade com Sua Lista
4
Criando uma Oferta Irresistível
5
Como ter um Negócio Digital Lucrativo
6
