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 https://concentrastore.com/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/concentra_store.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


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

Buttons

  • class="action primary": botão standard do site

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="slider-with-text": para colocar nos slider que têm texto
  • class="slider-with-text green": slider com texto verde
  • class="slider-with-text black": slider com texto preto
  • class="flex-item": para colocar nos image sliders que fiquem com a mesma altura
  • class="height-100": altura 100%