[TUTORIAL] Incluir Formas de Envio no Rodapé

Layout
1

Como muitas pessoas acabam perguntando as mesmas coisas sempre vou criando os tópicos de dúvidas mais frequentes aqui, começando pelo Seles de forma envio no rodapé.

Coloque este código no HTML > RODAPÈ

<!-- Formas de envio -->
  
    <div id="span4-envios">
    <style>
        .pagamento-selos #span4-envios ul li {
            display: inline-block;
            margin: 0 10px 20px 0;
        }

        .pagamento-selos #span4-envios ul li img {
            width: 100px; 
        }

	body.pagina-carrinho #span4-envios {
	    display: none
	}
    </style>

    <span class="titulo cor-secundaria">Formas de Envio</span>
    <ul>

        <li><img src=" LINK DO SELO 1"></li> 
        <li><img src=" LINK DO SELO 2"></li>
        <li><img src=" LINK DO SELO 3"></li>
    </ul>

    <script type="text/javascript">
        $(function(){
            $('#span4-envios').appendTo('.pagamento-selos .conteiner .row-fluid');
        })
    </script>
</div>

Coloque ou retire quantas formas quiser, bata ir acrescentando ou tirando os LI.

Se ficar desalinha por causa da rede social, coloque esse código em CSS:

/*RODAPE*/

/* AUMENTAR O TAMANHO DA BARRA DO RODAPÉ */
#rodape .institucional{
    background-image:none;
    padding-bottom: 80px; /*AQUI PODE ALTERAR O TAMANHO*/
}
    
/* ALINHA NOME DA REDE SOCIAL */

#rodape .redes-sociais {
    top: 5.6pt;
}

/*RETIRANDO A BORDA DA REDE SOCIAL*/

 #rodape .redes-sociais.borda-principal {
background: none !important;
box-shadow:none;
}

.gateways-rodape {

background: none;
border:0px;
    
}

/*SE QUISER ALTERAR A COR DO NOME DA REDE SOCIAL*/
.institucional .redes-sociais .titulo {
    color: #fff; /*ALTERE A COR AQUI*/
}

Pronto, sua página irá mostrar as formas de envio no rodapé =D
Meu site: www.lojasrmb.com.br

13 curtidas
2

Olá, não entendo muito de HTML e CSS. Vejo muitas publicações de códigos, mas nao sei onde coloca-las, dentro da pagina, gostaria muito de alterar partes do site. Este código do rodapé simplesmente copiei e colei dentro da loja integrada conforme link do local: https://app.lojaintegrada.com.br/painel/plataforma/conta/tema/css/editar

Como devo fazer?
Desculpe a todos!
Desde Já
Obrigado.

3

A primeira parte do código é em incluir HTML, ai coloca no RODAPÉ. A segunda parte é em CSS

4

Ok Meirim.
Farei isso.
Meu site em desenvolvimento azzovio.lojaintegrada.com.br muitas coisa para mudar, vou fazendo aos poucos, eu desenvolvo estes aparelhos eletrônicos, mas de site tive pequeno conhecimento no passado.
Obrigado!

5

Olá, fiz o tutorial deu tudo certo, mas o que tenho que fazer para deixar com o fundo branco, desse jeito como na imagem? Sem ser a aquele fundo que vai até o final do site.

6

Manda o link da loja para eu dar uma olhada

7
8

Com esse código css, ele fica sem o fundo branco

9 
/*RETIRANDO A BORDA DA REDE SOCIAL*/

#rodape .redes-sociais.borda-principal {
background: none !important;
box-shadow:none;
}

Só tirar esse código e veja como fica, aí depois deve ter que fazer ajustes no tamanho dele.

10

E como se ajusta o tamanho? hahaha Pq tirando esse código, fica cm o fundo branco até o final da pagina

11 
#rodape .redes-sociais.borda-principal {
    width: 230px;
    height: 380px;

}

Coloca no CSS e altera o tamanho para o desejado

1 curtida
12

Deu certo Meirim, muito obrigado!

1 curtida
13

que bom, só altera o tamanho do teu height pra colocar o instagram dentro, ou deixar ele de fora

15

Convido vocês entrar no grupo LI whatsapp https://goo.gl/EOV7q3 tem muitos membros que podem te ajuda, atendimento rápido e personalizado no teu celular.

16

@Meirim Me tire uma dúvida,

Eu coloquei o código pra aparecer as formas de pagamento no rodapé do meu site mas não mostra as fotos, ou seja, o ícone das formas do pagamento.

Link do meu site em implantação: http://imporium-modas.lojaintegrada.com.br/

Gostaria também de alguma sugestão dos nobres colegas pra deixar meu site melhor na aparência me indicando alguns códigos HTML ou CSS.

1 curtida
19

Olá! Como faço para colocar links nessas imagens da forma de envios? Tem algum script para adicionar ao código que vc passou acima?

Grata.

20

Coloquei o script da forma de envio, mais o imagem (logo dos correios) não aparece
ID: www.agapesuplementos.com.br

1 curtida
21

Olá! Agradeço pela disponibilidade dos códigos.
Gostaria de saber como alterar as cores dos ícones sociais no rodapé.
Obrigada!

22

Olá @LuisCarlosJr

onde você encontrou o logo do PAC? Não encontrei.

Muito obrigada

23

Boa tarde!
Preciso dividir meu rodapé em subsessões também. No meu site, que está ainda em construção, só tem uma coluna de categorias e uma coluna de conteúdo. Quero incluir mais algumas colunas ao lado, como ‘Antes da compra’, ‘Comprando’, ‘Após a compra’. Como faço? Adorei o site da Lojas RMB. Preciso também colocar uma caixa para incluir o e-mail. No meu site, aparece um popup para quem quer receber o NewsLetter, e depois desaparece.

7 curtidas