Todos os links(href) são chamados com a seguinte tag
{{store url=""}}em que colocaremos dentro das " o link pretendido.
Por exemplo se criarmos uma página cms com o link guia-cms e quisermos criar um link para essa mesma página teriamos que utilizar {{store url="guia-cms"}}
exemplo: Link para esta página
html:
<a href="{{store url="guia-cms"}}">Link para esta página</a>
Todas as imagens(src) são chamadas com a seguinte tag
{{media url=""}}em que colocaremos dentro das " o caminho da imagem.
exemplo:
html:
<img class="img-responsive" src="{{media url="wysiwyg/ericeira_logo.png"}}" />
PS: Em alternativa as imagens podem ser trocadas ou alteradas com o metodo demonstrado na formação com a vista do editor cms.
PS2: a class="img-responsive" possibilita o bom funcionamento responsivo e mobile da imagem em questão
Todas as páginas (apenas páginas) que queiramos continas da largura normal do website e não com o aspecto full-with devem ser envolvidas na seguinte div:
<div class="container-fluid page-container"> Conteudo da página </div>
Ao criar qualquer página cms, não esquecer na tab "Design" escolher a opção "1 column".
<div class="row"> <div class="col-sm-6 col-xs-12"> <div class="media-banner"> <a href="{{store url="roupa-de-homem"}}"> <img class="img-responsive has-padding media-banner-img" src="{{media url="wysiwyg/homepage/ESS_HP_MEN.jpg"}}" /> <div class="media-banner-info text-center"> <h3 class="condensed white">Roupa de homem</h3> <h1 class="bold-strong has-padding-smaller white big-text">A NOSSA<br />ESCOLHA</h1> <a class="btn btn-custom-primary btn-sm" href="{{store url="roupa-de-homem"}}">Comprar</a> </div> </a> </div> </div> <div class="col-sm-6 col-xs-12"> <div class="media-banner"> <a href="{{store url="roupa-de-mulher"}}"> <img class="img-responsive has-padding media-banner-img" src="{{media url="wysiwyg/homepage/ESS_HP_WOMEN.jpg"}}" /> <div class="media-banner-info text-center"> <h3 class="condensed white">Roupa de Mulher</h3> <h1 class="bold-strong has-padding-smaller white big-text">A PENSAR<br />EM TI</h1> <a class="btn btn-custom-primary btn-sm" href="{{store url="roupa-de-mulher"}}">Comprar</a> </div> </a> </div> </div> </div>
Este é um dos casos em que esta secção não está dentro do container referido nas noções básicas, como tal esta secção tem toda a width do ecrã.
<div class="container-fluid has-padding-bottom"> <div class="row"> <div class="col-sm-3 col-xs-12"> <a href="}}store url="calcado/tenis-e-sapatilhas"}}"> <div class="homepage-middle-banner left-banner" style="background-image: url('}}media url="wysiwyg/homepage/ESS_HP_COL1.jpg"}}'); background-size: cover; background-position: center; height: 500px;"></div> </a> <div class="text-center has-padding-small"> <h3 class="bold-less has-padding-smaller-bottom">SAPATILHAS</h3> <a class="btn btn-custom-primary btn-sm" href="}}store url="calcado/tenis-e-sapatilhas"}}">comprar</a> </div> </div> <div class="col-sm-6 col-xs-12"> <a href="}}store url="roupa-de-homem/sweats-de-homem"}}"> <div class="homepage-middle-banner middle-banner" style="background-image: url('}}media url="wysiwyg/homepage/ESS_HP_COL2.jpg"}}'); background-size: cover; background-position: center; height: 500px;"></div> </a> <div class="text-center has-padding-small"> <h3 class="bold-less has-padding-smaller-bottom">SWEATS</h3> <a class="btn btn-custom-primary btn-sm" href="}}store url="roupa-de-homem/sweats-de-homem"}}">comprar</a> </div> </div> <div class="col-sm-3 col-xs-12"> <a href="}}store url="roupa-de-mulher/bikini"}}"> <div class="homepage-middle-banner right-banner" style="background-image: url('}}media url="wysiwyg/homepage/ESS_HP_COL3.jpg"}}'); background-size: cover; background-position: center; height: 500px;"></div> </a> <div class="text-center has-padding-small"> <h3 class="bold-less has-padding-smaller-bottom">BIKINIS</h3> <a class="btn btn-custom-primary btn-sm" href="}}store url="roupa-de-mulher/bikini"}}">comprar</a> </div> </div> </div> </div>
<div class="row"> <div class="col-sm-6 col-xs-12 media-banner"> <a href="{{store url="roupa-de-homem/casacos-blusoes-homem"}}"> <img class="img-responsive" src="{{media url="wysiwyg/landing/HOMEM/ESS_HOMEM_VERT_H1.jpg"}}" /> </a> <div class="text-center has-padding-bottom"> <h3 class="condensed has-padding-small">Blusões</h3> <a href="{{store url="roupa-de-homem/casacos-blusoes-homem"}}" class="btn btn-custom-primary">Comprar</a> </div> </div> <div class="col-sm-6 col-xs-12 media-banner"> <a href="{{store url=""}}roupa-de-homem/camisas-e-polos-de-homem?familia=Camisa"> <img class="img-responsive" src="{{media url="wysiwyg/landing/HOMEM/ESS_HOMEM_VERT_H2.jpg"}}" /> </a> <div class="text-center has-padding-bottom"> <h3 class="condensed has-padding-small">Camisas</h3> <a href="{{store url=""}}roupa-de-homem/camisas-e-polos-de-homem?familia=Camisa" class="btn btn-custom-primary">Comprar</a> </div> </div> </div>
<div class="row"> <div class="col-xs-12 media-banner"> <a href="{{store url="roupa-de-homem/t-shirts-de-homem"}}"> <img class="img-responsive" src="{{media url="wysiwyg/landing/HOMEM/ESS_HOMEM_HORIZ_H1.jpg"}}" /> </a> <div class="text-center has-padding-bottom"> <h3 class="condensed has-padding-small">T'shirts</h3> <a href="{{store url="roupa-de-homem/t-shirts-de-homem"}}" class="btn btn-custom-primary">Comprar</a> </div> </div> </div>
<div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe> </div>
Todas as classes descritas abaixo podem ser utilizadas em qualquer contexto e qualquer elemento(p, a, div, etc.) para os referidos efeitos.