Micro-Temas: Configurações responsivas para os tamanhos de tela SM e XS

Existem duas categorias de Micro-Temas (Micro-Theme) que te ajudarão configurar o seu criativo e o torna-lo responsivo também para telas de tamanho SM e XS.

Elas podem ser encontradas nas listas "Responsive Settings – SM" e “Responsive Settings – XS” na seção Micro-Themes.

Dentro dessas duas categorias, há uma variedade de ajustes prontos para serem utilizados. Lembre-se que aqui, as alterações serão aplicadas somente nos tamanhos de tela SM ou XS.

Veja a continuação o que cada opção realizará quando aplicado a um elemento do seu criativo:

• Center Align

Alinha o conteúdo ao centro

• Left Align

Alinha o conteúdo à esquerda

• Right Align

Alinha o conteúdo à direita

• Black Background

Substitui o fundo e o deixa preto

• White Background

Substitui o fundo e o deixa branco

• Black Transparent Background

Substitui o fundo e o deixa preto transparente

• White Transparent Background

Substitui o fundo e o deixa branco transparente

• Remove Background Image

Remove a imagem de fundo

• Remove Borders

Remove todos os contornos

• Add Black Border Bottom

Adiciona uma borda preta na parte inferior

• Add White Border Bottom

Adiciona uma borda branca na parte inferior

• Remove Fixed Height

Remove qualquer propriedade de “height” (altura) que tenha sido definida

• Remove Fixed Width

Remove qualquer propriedade “width” (largura) que tenha sido definida

• No Margins

Remove todas as margens

• Padding 1

Substitui as propriedades de preenchimento e define todo o preenchimento (superior, direito, inferior, esquerdo) para 1

• Padding 0.5

Substitui as propriedades de preenchimento e define todo o preenchimento (superior, direito, inferior, esquerdo) para 0,5

• Padding Block

Substitui a propriedade "display" e a define como bloco

• Padding Inline Block

Substitui a propriedade “display” e a define para inline-block

Usando o recurso de Mostrar e Ocultar (Show and Hide):

Ao editar uma página responsiva, você também poderá utilizar o recurso Show and Hide de Ion para mostrar ou ocultar certos elementos em determinados tipos de tela.

Para ocultar um elemento, basta selecionar o elemento e o tamanho da tela para os quais deseja ocultá-lo.  Confira o que significa cada sigla de tamanho de tela: 

• XS = Mobile
• SM =  Mobile horizontal
• MD = Tablet

• LG = Desktop

Por exemplo, se a intenção é ocultar uma imagem para visitantes que estejam acessando suas páginas desde um dispositivo móvel, selecione a imagem e marque na caixa de seleção "Hide in XS". 

Clique aqui para saber mais sobre como utilizar este recurso.

Usando "Responsive Row Settings" (Configurações de linha responsiva)

Este é um recurso que permite ajustar a forma como estão organizados elementos para diferentes tipos de tela. Um ponto importante é que utilizando este recurso, cada configuração realizada não modificará a forma como a página é exibida em outros tamanhos de tela. Em outras palavras, as alterações refletem apenas no tamanho de tela a qual você selecionou.   

Para utilizar este recurso, primeiramente selecione corretamente o tamanho de tela o qual você deseja editar.  Em seguida, clique no ícone de "Responsive Raw Setting", localizado no contorno  azul do elemento: 

Isso abrirá uma pequena janela onde você poderá escolher como este elemento será organizado em cada tamanho de tela.  

Observação:  Verifique se está na janela de visualização do dispositivo correto ao aplicar as Configurações de linha responsiva.  Dessa forma, poderá ver automaticamente as edições refletidas no seu criativo:

---

Caso você tenha dúvidas, por favor, entre em contato conosco help@rockcontent.com. 😀