Com o Theme Builder do Divi é fácil criar cabeçalhos com elementos diversos. Mas quando o cabeçalho tem mais de uma coluna, em telas menores essas colunas ficarão uma embaixo da outra, o que geralmente não é interessante, pois o cabeçalho fica com uma altura muito grande. Para que as colunas sejam exibidas uma ao lado da outra, é bem simples. Na linha, ir na aba Avançado > Customize CSS > Elemento Principal e adicionar:
display: flex;Esse foi o caso com um site que desenvolvi e que tinha, além do menu, um widget do plugin de tradução, exibindo as línguas disponíveis.
Já aqui nesse blog, o cabeçalho fica com uma coluna embaixo da outra porque a barra de pesquisa ficaria muito pequena de outra forma, mas a diferença de cores entre as colunas faz um efeito bonito.
Atualizado em 01/05/2021:
A solução apresentada acima só funciona para três ou menos colunas, a partir de quatro, é necessário usar outro código. Em linha, ir na aba Avançado > Classe e ID do CSS > Classe CSS e definir com um nome como four-columns. Então deve-se adicionar um módulo de código ou definir nas opções do tema o seguinte:
@media only screen and (max-width: 980px) {
.four-columns .et_pb_column {
width: 20%!important;
margin-right: 5%!important;
}
}Eu fiz um rodapé com quatro colunas de ícones sociais (havia uma rede social que não constava no Divi Booster) e queria que eles ficassem em linha tanto no tablet quanto no celular.
