CHRISTMAS DELIVERIES, Click Here*  
flag_en
EUR - Euro
( 0 )

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/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

Container

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>

A lembrar

Ao criar qualquer página cms, não esquecer na tab "Design" escolher a opção "1 column".

Home Page

Imagens Verticáis

Roupa de homem

A NOSSA
ESCOLHA

Comprar

Roupa de Mulher

A PENSAR
EM TI

Comprar 
			<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>

Sequencia de imagens horizontais

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ã.

SAPATILHAS

comprar

SWEATS

comprar

BIKINIS

comprar 
			<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>

Landing Pages das categorias

Imagens Verticáis

Blusões

Comprar

Camisas

Comprar 
			<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>

Imagens Horizontais

T'shirts

Comprar 
			<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>

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 gotham-condensed e texto em maiusculas
  • class="condensed-lower": font-family gotham-condensed
  • class="condensed-small": font-family gotham-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