Gerenciamento do site na versão mobile
Como editar uma página no mobile
Para editar uma página do site na versão mobile:
Importante: Esse passo a passo também serve para realizar as alterações no site na versão do tablet.
1. Abra a página em modo de edição na qual pretende efetuar a alteração.
Anteriormente explicamos como abrir uma página para editar. Clique aqui para conferir.
2. Após abrir a página, clique no ícone representado por um "computador" (1), localizado no canto inferior esquerdo. Em seguida, selecione a opção "dispositivo móvel" (2), conforme indicado na imagem abaixo.
3. Ao selecionar a opção "dispositivo móvel", a página de edição irá mudar para a visualização do site na versão responsiva.
4. Agora, concluída esta etapa, você poderá começar a realizar as alterações desejadas.
Abaixo, segue uma imagem ilustrativa de como o painel de edição aparecerá junto com a página do site selecionada.
Como alterar as colunas
Para alterar as colunas de textos e imagens no site no mobile é simples.
Importante: Esse passo a passo também serve para realizar as alterações no site na versão do tablet.
1. Abra a página em modo de edição na qual pretende efetuar a alteração.
2. Após abrir selecione o modo edição do site na versão responsiva
Anteriormente explicamos como abrir uma página para editar. Clique aqui para conferir.
3. Já no modo edição responsivo passe o cursor do mouse sobre a imagem ou o texto do site, um contorno azul, que representa a coluna (1), ficará visível.
4. Dentro desse contorno azul, é possível observar um círculo azul com uma seta no canto direito da coluna (2), como ilustrado na imagem abaixo.
6. Ao clicar na seta mencionada acima, uma série de opções de edição estará disponível para as colunas, como ilustrado na imagem abaixo.
7. Abaixo segue uma explicação de cada uma das opções de edição disponíveis para as colunas e como utilizá-las:
Descrição das opção do painel de edição das colunas no mobile
1
Esconder coluna
Essa opção permite ocultar uma coluna na visualização móvel do site. Para fazer uso dela, basta clicar sobre o ícone com o símbolo do "olho", fazendo com que o conteúdo fique invisível para os visitantes que acessarem o site por meio de dispositivos celulares.
2
Inverter
Essa opção possibilita inverter a ordem das colunas na página. Para utilizá-la, basta clicar no ícone das setas, o que resultará na troca de posição de uma coluna com outra.
3
Fundo imagem
Essa opção permite inserir uma imagem como fundo de uma coluna. Para utilizá-la, basta clicar na opção e selecionar uma imagem da galeria ou fazer o upload de uma imagem diretamente do seu computador. Caso você não saiba como realizar essa alteração, clique aqui para visualizar o passo a passo detalhado.
4
Fundo cor
Essa opção permite adicionar uma cor como fundo de uma coluna. Para utilizá-la, basta clicar na opção e selecionar a cor desejada.
5
Configurações
Essa opção permite alterar a largura (1), o tamanho (2) e a posição do conteúdo (3) dentro de uma coluna. Para modificar a largura (1), basta clicar sobre a bolinha branca e arrastá-la (também é possível ajustar a largura apenas clicando e arrastando a linha azul em torno da coluna). Quanto à altura (2), você pode selecionar para que seja automática ou personalizada. Quanto à posição do conteúdo (3), é possível selecionar como irá querer posicionar: em cima, ao centro, em baixo ou ao meio conforme exemplificado abaixo:
Depois de realizar as alterações lembre-se sempre de clicar no botão "atualizar" que aparece no canto inferior direito da tela.
Margem da coluna
Para alterar as margens das colunas no site no mobile é simples.
Importante: Esse passo a passo também serve para realizar as alterações no site na versão do tablet.
1. Abra a página em modo de edição na qual pretende efetuar a alteração.
2. Após abrir selecione o modo edição do site na versão responsiva
Anteriormente explicamos como abrir uma página para editar. Clique aqui para conferir.
3. Já no modo edição responsivo passe o cursor do mouse sobre a imagem ou o texto do site, um contorno azul, que representa a coluna (1), ficará visível.
4. Dentro desse contorno azul, é possível observar um círculo azul com uma seta no canto direito da coluna (2), como ilustrado na imagem abaixo.
5. Ao clicar na seta mencionada anteriormente, você irá notar que surgirá um campo no canto direito da tela com o título "margens" (3).
6. Para editar e alterar as margens, é simples: basta clicar na bolinha branca e arrastá-la para a posição desejada, conforme exemplificado na imagem abaixo.
Depois de realizar as alterações lembre-se sempre de clicar no botão "atualizar" que aparece no canto inferior direito da tela.
Como alterar textos
Para alterar os textos no site no mobile é simples.
Importante: Esse passo a passo também serve para realizar as alterações no site na versão do tablet.
1. Abra a página em modo de edição na qual pretende efetuar a alteração.
2. Após abrir selecione o modo edição do site na versão responsiva
Anteriormente explicamos como abrir uma página para editar. Clique aqui para conferir.
3. Já no modo edição responsivo clique sobre o texto que deseja alterar e um painel com algumas opção ficará visível, conforme ilustrado na imagem abaixo.
4. Abaixo segue uma explicação de cada uma das opções de edição disponíveis para os textos e como utilizá-las:
Descrição das opção do painel de edição das colunas no mobile
1
Esconder texto
Essa opção permite ocultar o texto na visualização móvel do site. Para fazer uso dela, basta clicar sobre o ícone com o símbolo do "olho", fazendo com que o conteúdo fique invisível para os visitantes que acessarem o site por meio de dispositivos celulares.
2
Tipografia
Essa opção permite personalizar o modelo de tipografia, tamanho, peso, altura da linha e espaço entre letras no site na versão mobile. Para obter mais detalhes sobre como utilizar e modificar cada uma dessas opções, clique aqui para visualizar o passo a passo detalhado.
3
Alinhar
Essa opção permite a alteração do alinhamento do texto, podendo posicioná-lo à esquerda, à direita, ao centro ou justificado. Para utilizar, basta clicar na opção e selecionar o alinhamento desejado para o texto.
4
Configurações
Essa opção permite ajustar o espaço acima (1) e abaixo (2) do texto, possibilitando que ele fique mais próximo ou mais afastado de outros conteúdos. Para utilizar essa funcionalidade, basta clicar na bolinha branca e arrastá-la conforme ilustrado na imagem abaixo.
Depois de realizar as alterações lembre-se sempre de clicar no botão "atualizar" que aparece no canto inferior direito da tela.
Como alterar imagens
Para alterar as imagens do site no mobile é simples.
Importante: Esse passo a passo também serve para realizar as alterações no site na versão do tablet.
1. Abra a página em modo de edição na qual pretende efetuar a alteração.
2. Após abrir selecione o modo edição do site na versão responsiva
Anteriormente explicamos como abrir uma página para editar. Clique aqui para conferir.
3. Já no modo edição responsivo clique sobre a imagem que deseja alterar e um painel com algumas opção ficará visível, conforme ilustrado na imagem abaixo.
4. Abaixo segue uma explicação de cada uma das opções de edição disponíveis para os textos e como utilizá-las:
Descrição das opção do painel de edição das colunas no mobile
1
Esconder imagem
Essa opção permite ocultar a imagem na visualização móvel do site. Para fazer uso dela, basta clicar sobre o ícone com o símbolo do "olho", fazendo com que o conteúdo fique invisível para os visitantes que acessarem o site por meio de dispositivos celulares.
2
Imagem
Essa opção permite alterar a imagem. Para utilizá-la, basta clicar na opção e selecionar uma imagem da galeria ou fazer o upload de uma imagem diretamente do seu computador. Caso você não saiba como realizar essa alteração, clique aqui para visualizar o passo a passo detalhado.
3
Alinhar
Essa opção permite a alteração do alinhamento da imagem, podendo posicioná-la à esquerda, à direita ou ao centro. Para utilizar, basta clicar na opção e selecionar o alinhamento desejado para a imagem.
4
Configurações
Essa opção permite ajustar a altura (1) e largura (2) da imagem. Para utilizar essa funcionalidade, basta clicar na bolinha branca e arrastá-la conforme ilustrado na imagem abaixo.
Depois de realizar as alterações lembre-se sempre de clicar no botão "atualizar" que aparece no canto inferior direito da tela.
O Impactalive é um produto da Impactamídia | CNPJ: 08.917.570/0001-52