Alguém sabe como eu coloco a tarja embaixo dos mini banners?

Alguém sabe como eu coloco a tarja embaixo dos mini banners?

quero fazer igual: https://crosspower-temafoxtech.lojaintegrada.com.br/

1 Curtida

Olá @Physique_suplementos, beleza?!

Tente executar esses procedimentos:
1. vá em incluir código HTML e escolha: RODAPÉ >> TODAS AS PÁGINAS >> JAVASCRIPT

(function($){
$(’.secao-banners .conteiner’).append( $(’.banner.mini-banner’) );
})(jQuery);

Esse script vai trocar o conteiner em que o seu mini-banner está atrelado… vai tirar do #corpo e colocar junto com os outros banners na seção-banner. Então após isso, vamos reordenar os banners

Obs: dentro dos parênteses, o que está escrito entre os ’ ’ deve ficar com uma coloração esverdeada… se o editor de comando estiver acusando erro (um x vermelho) apaga os ’ ’ e coloca de novo.

2. Vá em incluir código HTML de novo e escolha: CABEÇALHO >> PÁGINA INICIAL >> CSS

.secao-banners .conteiner {
display: flex;
flex-direction: column;
}
.secao-banners .conteiner .row-fluid.banner.cheio.hidden-phone {
order: 0;
}
.secao-banners .conteiner .row-fluid.banner.mini-banner.hidden-phone {
order: 1;
}
.secao-banners .conteiner .row-fluid.banner.hidden-phone {
order: 2;
}

Esse é o CSS que vai ordenar os banners.
Primeiro é dado a o comando para o conteiner dos banners se tornar FLEX (“maleável”). Como ele será “moldável” os banners seriam espremidos lado a lado, pois esse é o valor padrão, então o colocamos na orientação de coluna.
Depois isso, basta ordenar cada banner.

Qualquer coisa, pode chamar!

2 Curtidas

Ivanilson, não deu certo amigo. Embora aparentemente tenha dado tudo certinho, porque nao apresentou os erros que vc comentou, ficou como estava. Olha meu site p.f: www.physiquesuplementos.com.br

Voce pode printar pra mim, a página de inclusão do script, por favor!

Na parte que exibe o código!

Seguem os dois html que você indicou: 2840

O problema do seu script, está porque quando você cola o código, as aspas simples mudam… tenta copiar e colar esse:

(function($){
    $('.secao-banners .conteiner').append( $('.banner.mini-banner') );
})(jQuery);