Noções Básicas
Links
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>
Imagens
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/58surf_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
A lembrar
Ao criar qualquer página cms, não esquecer na tab "Design" escolher a opção "1 column".
Home Page
Imagens Topo Homepage
<div class="home-main-58-banner clear-element">
<div class="main-58-single main-58-single-50" style="background-image: url('{{media url="wysiwyg/homepage/58_main_50.png"}}')">
<a class="white" href="#">
<div class="main-58-inner-holder">
<div class="main-58-inner">
<h4>Billabong men summer 18</h4>
</div>
</div>
</a>
</div>
<div class="main-58-single main-58-single-25" style="background-image: url('{{media url="wysiwyg/homepage/58_main_25.png"}}')">
<a class="white" href="#">
<div class="main-58-inner-holder">
<div class="main-58-inner">
<h4>Billabong Women summer 18</h4>
</div>
</div>
</a>
</div>
<div class="main-58-single main-58-single-12" style="background-image: url('{{media url="wysiwyg/homepage/58_main_12_1.png"}}')">
<a class="white" href="#">
<div class="main-58-inner-holder">
<div class="main-58-inner">
<h4>DAKINE summer 18</h4>
</div>
</div>
</a>
</div>
<div class="main-58-single main-58-single-12" style="background-image: url('{{media url="wysiwyg/homepage/58_main_12_2.png"}}')">
<a class="white" href="#">
<div class="main-58-inner-holder">
<div class="main-58-inner">
<h4>Mar summer 18</h4>
</div>
</div>
</a>
</div>
</div>
Imagens com links
Comprar homem
Categorias
Comprar mulher
Categorias
<div class="row">
<div class="wrap-holder home-image-links">
<div class="col-sm-6 col-xs-12 single-home-image-links">
<div class="home-cat" style="background-image: url('{{media url=="wysiwyg/homepage/home_cat_men.png"}}')">
<h4 class="has-padding-smaller-bottom">Comprar homem</h4>
<h4>Categorias</h4>
<div class="has-padding-smaller">
<ul>
<li><a href="{{store url="clothing/mens-apparel/mens-t-shirt"}}">T-shirts</a></li>
<li><a href="{{store url="clothing/mens-apparel/mens-jackets"}}">Casacos e blusões</a></li>
<li><a href="{{store url="clothing/mens-apparel/mens-cardigans"}}">Camisolas e malhas</a></li>
<li><a href="{{store url="clothing/mens-apparel/mens-sweatshirt"}}">Sweats</a></li>
<li><a href="{{store url="clothing/mens-apparel/mens-boardshorts"}}">Calções de banho</a></li>
<li><a href="{{store url="clothing/mens-apparel/mens-mens-shirts"}}">Camisas</a></li>
<li><a href="{{store url="clothing/mens-apparel/mens-jeans-and-pants"}}">Calças</a></li>
<li><a href="{{store url="clothing/mens-apparel/mens-long-sleeve"}}">Long sleeve</a></li>
<li><a href="{{store url="clothing/mens-apparel/mens-socks"}}">Meias</a></li>
</ul>
</div>
</div>
</div>
<div class="col-sm-6 col-xs-12 single-home-image-links">
<div class="home-cat" style="background-image: url('{{media url=="wysiwyg/homepage/home_cat_women.png"}}')">
<h4 class="has-padding-smaller-bottom">Comprar mulher</h4>
<h4>Categorias</h4>
<div class="has-padding-smaller">
<ul>
<li><a href="{{store url="clothing/womens-apparel/womens-t-shirts"}}">T-shirts</a></li>
<li><a href="{{store url="clothing/womens-apparel/womens-jackets"}}">Casacos e blusões</a></li>
<li><a href="{{store url="clothing/womens-apparel/womens-cardigan"}}">Camisolas e malhas</a></li>
<li><a href="{{store url="clothing/womens-apparel/womens-sweatshirt"}}">Sweats</a></li>
<li><a href="{{store url="clothing/womens-apparel/womens-tops"}}">Tops</a></li>
<li><a href="{{store url="clothing/womens-apparel/womens-walkshorts"}}">Walkshorts</a></li>
<li><a href="{{store url="clothing/womens-apparel/womens-jeans-and-pants"}}">Calças</a></li>
<li><a href="{{store url="clothing/womens-apparel/womens-dresses-and-skirts"}}">Vestidos e saias</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
Videos responsivos
<div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe> </div>
Recursos
Helper Classes
Todas as classes descritas abaixo podem ser utilizadas em qualquer contexto e qualquer elemento(p, a, div, etc.) para os referidos efeitos.
Text
- class="text-center": Texto centrado
- class="text-left": Texto a esquerda
- class="text-right": Texto a direita
- class="bold-less": font-weight 300
- class="bold-light": font-weight 500
- class="bold-normal": font-weight 600
- class="bold-strong": font-weight 800
- class="bold": font-weight bold
- class="text-italic": italico
- class="condensed": font-family Futura-Condensed e texto em maiusculas
- class="condensed-lower": font-family Futura-Condensed
- class="condensed-small": font-family Futura-Condensed, texto em maiusculas e tamanho 12px
- class="thin-spaced": font-weight 300 e letter-spacing 3px
Buttons
- class="btn btn-custom-primary": botão standard do site
- class="btn btn-light-custom": botão branco (exemplo checkout)
- class="btn btn-custom-primary btn-100": botão full-width
- class="btn btn-custom-primary btn-sm": botão pequeno/li>
Paddings / Espaçamentos
- class="has-padding": 30px cima e baixo
- class="has-padding-top": 30px cima
- class="has-padding-bottom": 30px baixo
- class="has-padding-tall": 60px cima e baixo
- class="has-padding-tall-top": 60px cima
- class="has-padding-tall-bottom": 60px baixo
- class="has-padding-small": 20px cima e baixo
- class="has-padding-small-top": 20px cima
- class="has-padding-small-bottom": 20px baixo
- class="has-padding-smaller": 10px cima e baixo
- class="has-padding-smaller-top": 10px cima
- class="has-padding-smaller-bottom": 10px baixo
Outros
- class="white": cor branca
- class="big-text": font-size 60px