⚡ SNEAKERS 30% OFF | CLICK HERE
*Valid from May 21st to June 16th 2024, on selected items. Not combinable with other discounts.

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

			<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

  • Bootstrap Grid: link
  • Font-awesome Icons: Link

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