Edição de páginas
Como editar uma página
1. Para editar uma página do site, enquanto estiver logado no painel, posicione o cursor do mouse sobre a opção "páginas" no canto esquerdo da tela.
2. Ao fazer isso, surgirão duas opções: "todas as páginas" e "adicionar nova".
3. Clique na primeira opção, "todas as páginas" (1), conforme ilustrado na imagem abaixo.
4. Após clicar na opção "Todas as Páginas", todas as páginas do site serão exibidas.
5. Posicione o cursor do mouse sobre a página que deseja editar, sem clicar, e serão exibidas 5 opções abaixo do título da página: "Editar, Edição Rápida, Lixeira, Ver e Editar com Impactalive".
6. Clique na última opção, "Editar com Impactalive" (2), de acordo com a imagem abaixo.
7. Após clicar, aguarde o carregamento da página.
8. Assim que carregada, o painel de edição do Impactalive será aberto juntamente com a página selecionada.
9. 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.
Descrição do painel impactalive
1
Adicionar elementos
O primeiro ícone oferece uma ampla gama de elementos para adicionar ao site, como texto, imagens, mapas, menus, botões e muito mais. Ao clicar nele, será possível ter acesso a todas essas opções, além de várias outras que podem ser inseridas em qualquer parte do seu site.
2
Reordenar blocos
O segundo ícone tem a função de reordenar as seções do site, possibilitando alterar e inserir essas seções na ordem desejada. Assim, poderá organizar o site de acordo com sua preferência.
3
Estilo
O terceiro ícone permite alterar a cor e a tipografia de todos os elementos do site a partir de um único local. Com essa ferramenta, é possível atribuir uma única cor a vários elementos, como ícones, bordas e tipografia, permitindo alterar a cor de todos eles simultaneamente.
4
Visualização no dispositivo móvel
O quarto ícone possibilita visualizar e fazer alterações no site em dispositivos móveis, como tablets e celulares. Com essa opção, você pode verificar como o site será exibido nessas plataformas e realizar ajustes se necessário.
5
Página
O quinto ícone tem diversas funções: permite visualizar e alterar o template utilizado no site (recomendamos fortemente que essa opção não seja alterada sem conscientização e ajuda da nossa equipe). Além disso, ele permite selecionar como gostaria de visualizar a página do site, por exemplo, como: "assinante, colaborador, autor, logado e não logado". Por último, esse ícone possibilita inserir uma imagem de destaque ao seu site, que será exibida juntamente com o domínio do site ao compartilhá-lo em redes sociais e outros aplicativos de comunicação.
6
Mais
O sexto ícone exibe algumas opções ao ser clicado. A opção "Go to Dashboard" retorna ao painel inicial de gerenciamento do site. As demais opções são configurações que são gerenciadas exclusivamente pela nossa equipe.
7
Mostrar elementos escondidos
Ao clicar no sétimo ícone, serão exibidos os elementos que foram "escondidos" no site por meio de uma função que ensinaremos a utilizar posteriormente.
8
Desfazer alteração
O oitavo ícone permite desfazer uma alteração realizada, porém, é importante destacar que essa opção só pode ser utilizada para alterações feitas antes de atualizar e salvar a página. Após essa ação, a alteração não poderá mais ser desfeita.
9
Refazer alteração
O nono ícone permite refazer uma alteração realizada, porém, é importante destacar que essa opção só pode ser utilizada para alterações feitas antes de atualizar e salvar a página. Após essa ação, a alteração não poderá mais ser refeita.
10
Visualizar página
O décimo ícone permite visualizar as alterações realizadas na página sem a necessidade de atualizar ou salvar as modificações feitas.
11
Atualizar/ salvar página
O último ícone tem a função de atualizar e salvar todas as alterações feitas no site. Portanto, antes de sair do painel de edição, certifique-se de salvar suas modificações clicando no botão azul, para garantir que as alterações sejam devidamente salvas no site.
Como mudar imagens
1. Abra a página no modo de edição na qual você deseja alterar a imagem.
Anteriormente explicamos como abrir uma página para editar. Clique aqui para conferir
2. Clique na imagem que deseja mudar. Ao clicar, um menu com várias opções será exibido.
3. Selecione a primeira opção, representada por um ícone de imagem (1), conforme mostrado na imagem abaixo.
4. Após clicar no ícone, um pequeno painel (2) será aberto.
5. Nesse painel, você verá a imagem atualmente selecionada, e no canto superior direito haverá um ícone com um "x" (3).
6. Clique nele para deletar a imagem, como mostrado na imagem abaixo.
7. Após deletar a imagem, clique no ícone representado por uma nuvem e uma seta apontando para cima (4) que irá aparecer no lugar da imagem, conforme ilustrado na imagem abaixo.
8. Após clicar, uma galeria com todas as imagens do seu site será aberta.
9. Se desejar inserir uma imagem que já está na galeria, basta clicar na imagem desejada (5) e, em seguida, clicar no botão "Selecionar" (6), conforme exemplificado na imagem abaixo.
10. Para inserir uma imagem que não está na galeria, clique na opção "Enviar Arquivos" (7) localizada no canto superior esquerdo, como ilustrado na imagem abaixo.
11. Depois de clicar, uma tela será exibida para fazer o upload das imagens.
12. Você pode fazer o upload de um arquivo de duas maneiras: arrastando os arquivos do seu computador para a caixa correspondente ou clicando em "Selecionar Arquivos" (8) e escolhendo os arquivos desejados.
13. Com a imagem agora alterada, é possível posicioná-la da forma que desejar, clicando e arrastando a bolinha azul (9) que aparece sobre a imagem no painel de edição de imagens.
14. Além disso, também é possível ampliar a imagem, dando um zoom (10). Confira as duas opções na imagem abaixo.
15. Também é possível adicionar um filtro à sua imagem. Para isso, clique na segunda opção "Filters" (11), ao lado de "Imagem" no painel.
16. Após clicar, irão aparecer quatro opções para alteração: "Matiz" (12), "Saturação" (13), "Brilho" (14) e "Contraste" (15).
17. Para fazer a alteração, basta clicar e arrastar a bolinha (16) sobre cada uma das opções, conforme exemplificado na imagem abaixo.
18. Além disso, é possível alterar o formato da imagem. Para fazer isso, clique na terceira opção "Mask" (17), localizada ao lado de "Filters" no painel.
19. Após clicar, basta selecione o formato desejado para aplicar na imagem (18), conforme exemplificado na ilustração 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 mudar textos
1. Abra a página no modo de edição na qual você deseja alterar o texto.
Anteriormente explicamos como abrir uma página para editar. Clique aqui para conferir
2. Clique sobre o texto que deseja modificar. Ao clicar, o texto será destacado por uma borda sublinhada (1), e o cursor do mouse estará piscando no local em que você clicou.
3. Agora, basta apagar o texto e digitar o que desejar, conforme ilustrado na imagem abaixo.
4. Além de modificar o texto, você também pode realizar outras alterações, como alterar a fonte (1), mudar a cor (2), ajustar o alinhamento (3), transformar o texto em uma lista (4), aplicar negrito (5), aplicar itálico (6), sublinhar o texto (7), riscar o texto (8), deixar o texto em maiúsculas (9) e adicionar links (10).
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 fontes
É possível alterar as fontes do seu site de duas formas:
Primeira opção:
Importante: Essa primeira opção é indicada para quem deseja alterar apenas a fonte de um texto especifico.
A primeira forma é bastante simples:
1. Clique sobre o texto que deseja modificar a fonte.
2. Ao fazer isso, o texto será destacado por uma borda sublinhada e um menu com diversas opções de edição de texto será exibido, como já demonstrado anteriormente.
3. Para alterar a fonte, basta selecionar a primeira opção que possui a letra "T" (1), conforme ilustrado abaixo.
4. Ao clicar no ícone "T", um pequeno painel será aberto, oferecendo várias opções de alteração, tais como: fontes (1), tipografia (2), tamanho (3), peso (4), altura da linha (5) e espaçamento entre letras (6).
5. Essas opções estão ilustradas na imagem abaixo.
Descrição das opção do painel de texto
1
Fontes
A primeira opção refere-se às fontes. Nessa opção, é possível visualizar uma variedade de fontes disponíveis para seleção e aplicação no texto selecionado.
2
Tipografia
A segunda opção é a tipografia, na qual você pode selecionar um estilo pronto para ser aplicado ao seu texto. Esse estilo inclui fonte, tamanho, peso, altura e espaçamento já definidos.
3
Tamanho
A terceira opção refere-se ao tamanho da fonte. Nessa opção, você pode modificar o tamanho da fonte digitando um número ou utilizando as setas para cima e para baixo, localizadas ao lado do valor, para fazer o ajuste desejado.
4
Peso
A quarta opção refere-se ao peso da fonte do texto. Nessa opção, é possível selecionar o peso desejado para a fonte. As opções disponíveis são: regular (normal), leve (fino), extra light (mais fino), light (um pouco mais fino), medium (médio), semi-bold (negrito mais leve), negrito, extra-bold (negrito mais intenso) e black (negrito forte).
5
Altura da linha
A quinta opção permite que você defina o espaçamento entre as linhas do texto, permitindo ajustar a proximidade ou afastamento entre elas. Para realizar essa alteração, basta digitar o valor desejado ou clicar nas setas para cima ou para baixo dentro do campo ao lado do número, conforme sua preferência.
6
Espaçamento entre letras
A sexta opção permite que você ajuste o espaçamento entre as letras do texto, podendo deixá-las mais próximas ou mais afastadas. Para realizar essa alteração, basta digitar o valor desejado ou clicar nas setas para cima ou para baixo dentro do campo ao lado do número, de acordo com sua preferência.
Depois de realizar as alterações lembre-se sempre de clicar no botão "atualizar" que aparece no canto inferior direito da tela.
Segunda opção:
Importante: Essa segunda opção é indicada para quem deseja alterar um conjunto de textos com a mesmo estilo (tipográfia).
A segunda opção é um pouco mais complexa, mas extremamente útil para aqueles que desejam modificar um conjunto de texto no site:
1. Primeiramente, selecione um dos textos que deseja alterar (1).
2. Em seguida, clique no ícone "T" (2) do menu de texto.
3. Após abrir o painel, verifique o modelo de tipografia selecionado (3). No exemplo abaixo, o modelo de tipografia escolhido é o heading 4 (4).
4. Após verificar o modelo de tipografia, clique no ícone em forma de "pincel" (5), localizado no lado esquerdo do painel, como exemplificado na imagem abaixo.
5. Após clicar, um painel de estilo (6) será aberto no canto esquerdo, ao lado do ícone clicado.
6. Dentro desse painel de estilo, procure pela tipografia selecionada para o texto, conforme discutido anteriormente. No exemplo fornecido, a tipografia utilizada é a heading 4 (7), como mostrado na imagem abaixo.
7. Após encontrar a tipografia clique sobre ela para abrir o painel de edição de texto, ao abrir realize as alterações que desejar, conforme ilustrado na imagem abaixo:
Descrição das opção do painel de texto
1
Telas
Os ícones de tela exibidos abaixo do número 8 são usados para selecionar e editar o texto no formato de tela desejado. Por padrão, o "computador" é selecionado como a primeira opção. No entanto, se você deseja alterar o texto para o formato de "tablet", basta selecionar o segundo ícone. Da mesma forma, se preferir alterar o texto para a versão "celular", selecione o terceiro ícone
2
Fontes
A primeira opção refere-se às fontes. Nessa opção, é possível visualizar uma variedade de fontes disponíveis para seleção e aplicação no texto selecionado.
3
Tamanho
A terceira opção refere-se ao tamanho da fonte. Nessa opção, você pode modificar o tamanho da fonte digitando um número ou utilizando as setas para cima e para baixo, localizadas ao lado do valor, para fazer o ajuste desejado.
4
Peso
A quarta opção refere-se ao peso da fonte do texto. Nessa opção, é possível selecionar o peso desejado para a fonte. As opções disponíveis são: regular (normal), leve (fino), extra light (mais fino), light (um pouco mais fino), medium (médio), semi-bold (negrito mais leve), negrito, extra-bold (negrito mais intenso) e black (negrito forte).
5
Altura da linha
A quinta opção permite que você defina o espaçamento entre as linhas do texto, permitindo ajustar a proximidade ou afastamento entre elas. Para realizar essa alteração, basta digitar o valor desejado ou clicar nas setas para cima ou para baixo dentro do campo ao lado do número, conforme sua preferência.
6
Espaçamento entre letras
A sexta opção permite que você ajuste o espaçamento entre as letras do texto, podendo deixá-las mais próximas ou mais afastadas. Para realizar essa alteração, basta digitar o valor desejado ou clicar nas setas para cima ou para baixo dentro do campo ao lado do número, de acordo com sua preferência.
8. Após realizar as alterações, todos os textos que possuírem a tipografia selecionada serão modificados de acordo com as alterações feitas. No exemplo deste tutorial, a tipografia utilizada é a heading 4, portanto, todos os textos com essa tipografia serão atualizados com as modificações aplicadas a ela. Abaixo, segue um exemplo comparativo.
Observe a primeira imagem, onde os dois textos destacados em negrito são identificados como 14 e 15, os dois possuem a tipografia heading 4.
Realizamos a alteração da fonte dessa tipografia e automaticamente ambos os textos foram alterados simultaneamente, como ilustrado na segunda imagem.
Depois de realizar as alterações lembre-se sempre de clicar no botão "atualizar" que aparece no canto inferior direito da tela.
Como mudar cores
Para alterar as cores dos elementos do seu site, como fundo, botões, textos e outros elementos em geral, existem duas maneiras simples de realizar essa alteração:
Primeira opção:
Importante: Essa primeira opção é indicada para quem deseja alterar apenas a cor de um elemento especifico.
A primeira forma é bastante simples:
1. Clique sobre o elemento que deseja alterar a cor.
2. Ao fazer isso, o elemento será destacado por uma borda sublinhada (1) e um menu com diversas opções de edição será exibido, como já demonstrado anteriormente.
3. Para modificar a cor, basta selecionar a opção que apresenta um "quadradinho" (2) com a cor atual do elemento selecionado. No exemplo fornecido, o ícone do "quadradinho" (2) está em vermelho, pois selecionamos um botão que está na cor vermelha, como mostrado na imagem abaixo.
4. Após clicar no "quadradinho", um painel de cores será aberto, contendo um conjunto variado de opções, conforme ilustrado abaixo.
Descrição das opção do painel de cores
1
Bg, texto, borda e shadow
Essa opção permite que você selecione qual parte do elemento deseja alterar a cor, podendo ser: bg (sobreposição), texto, borda, shadow (sombra), ícone, entre outros, variando de acordo com o elemento selecionado.
2
Normal e passando o mouse
Essa opção permite que você escolha alterar a cor de um elemento tanto no estado normal (sem passar o mouse) quanto no estado em que o mouse está sobre ele. Para isso, basta selecionar a primeira opção, representada por uma "bolinha", para modificar a cor do elemento no estado normal, ou selecionar a segunda opção, representada por uma "mãozinha clicando", para alterar a cor do elemento quando o mouse está sobre ele. É importante ressaltar que essa opção está disponível apenas em alguns elementos, como botões e outros elementos com links, por exemplo.
3
Nenhum, solid ou gradiente
A opção número 5 permite selecionar o formato de cor que deseja aplicar ao seu elemento. São oferecidas três opções: "nenhum" (sem cor), "solid" (uma única cor) ou "gradiente" (um conjunto de duas ou mais cores em um mesmo elemento).
4
Painel de tom da cor
O painel de cores permite ajustar o tom de uma cor já selecionada.
5
Paleta de cores do site
O conjunto de cores que aparece abaixo são a paleta de cores atual do seu site.
6
Opções de todas as cores
Caso não queira utilizar nenhuma das cores da paleta atual do seu site, você pode selecionar a cor desejada por meio desse painel de cores.
7
Transparência
Essa opção permite gerenciar o nível de transparência da cor de um elemento.
Depois de realizar as alterações lembre-se sempre de clicar no botão "atualizar" que aparece no canto inferior direito da tela.
Alterar cor de fundo:
Para alterar a cor de fundo de uma seção do seu site, é simples:
1. Clique na bolinha (10) que irá aparecer no canto superior direito da tela, conforme mostrado na imagem abaixo.
2. Após clicar, um menu será exibido com várias opções.
3. Selecione o "quadrinho" (11) com a cor de fundo desejada para a seção. No exemplo da imagem, a cor exibida é preta, pois estamos alterando o fundo que está na cor preta.
4. Após clicar no "quadradinho", um painel de cores (12) será aberto, apresentando uma variedade de opções para realizar alterações, como 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.
Segunda opção:
Importante: Essa segunda opção é indicada para quem deseja alterar um conjunto de elementos com a mesma cor.
1. Clique no ícone em forma de "pincel" (1), localizado no lado esquerdo do painel, como exemplificado na imagem abaixo.
2. Após clicar, um painel de estilo será aberto no canto esquerdo, ao lado do ícone selecionado.
3. Dentro desse painel de estilo, serão exibidas as cores atualmente utilizadas no seu site (2). Isso pode ser visualizado na imagem abaixo.
4. Clique na cor que deseja alterar e o painel de cores (3) será aberto para que você possa realizar a modificação, como exemplificado na imagem abaixo.
5. Após realizar a alteração da cor, todos os elementos que possuem a mesma cor serão modificados automaticamente.
Confira no exemplo abaixo, onde trocamos a cor laranja da paleta de cores para roxo.
Como resultado, todos os elementos que estavam na cor laranja foram alterados para a cor roxa, como é o caso dos ícones.
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