Links

Todos os links(href) são chamados com a seguinte tag

{{store url=""}}

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://www.dormilocos.pt/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=""}}

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

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%