\n Requisitos deste tutorial
\n<\/h5>\n
\n Voc\u00ea precisar\u00e1 baixar algumas imagens, vetores e fontes para criar este site. Mas voc\u00ea ainda pode acompanhar sem esses recursos. Para organizar o conte\u00fado adequadamente, crie uma pasta separada para o seu site.\n<\/p>\n
- \n
- \n
\n Acesse pexels.com<\/a> e baixe:\n <\/p>\n
- \n
- \n
\n 4 imagens de tamanho 1160 x 480 para apresenta\u00e7\u00e3o de slides. Aqui est\u00e1 uma captura de tela do pexels. Voc\u00ea pode colocar esse tamanho na caixa ‘tamanho personalizado' neste site.\n <\/p>\n<\/li>\n
- \n
\n 6 imagens de tamanho 271 x 208 para a se\u00e7\u00e3o ‘servi\u00e7os'.\n <\/p>\n<\/li>\n
- \n
\n 1 imagem de tamanho 1160 x 692 para a se\u00e7\u00e3o ‘Fale Conosco'.\n <\/p>\n<\/li>\n<\/ul>\n<\/li>\n
- \n
\n Acesse freepik.com<\/a> e baixe:\n <\/p>\n
- \n
- Um \u00edcone de cruz (voc\u00ea pode editar este \u00edcone no illustrator ou apenas baixar o arquivo png do feepik).\n <\/li>\n
- 6 imagens de rosto para a se\u00e7\u00e3o ‘Testemunhos'.\n <\/li>\n<\/ul>\n<\/li>\n
- \n
\n V\u00e1 para sutilpatterns.com<\/a> e baixe o padr\u00e3o ‘brickwall' para a se\u00e7\u00e3o ‘Testemunhos'.\n <\/p>\n<\/li>\n
- \n
\n \u00c0 medida que voc\u00ea prosseguir com este tutorial, eu lhe direi como baixar as fontes necess\u00e1rias (isso pode ser feito dentro do Muse).\n <\/p>\n<\/li>\n
- \n
\n Use o texto fict\u00edcio de lipsum.com<\/a>.\n <\/p>\n<\/li>\n<\/ul>\n
\n VAMOS COME\u00c7AR!\n<\/p>\n
\n Preparando o espa\u00e7o de trabalho e configurando o cabe\u00e7alho\n<\/p>\n
\n 1 Crie um novo site indo em File > New Site (Ctrl+N) e coloque os valores conforme mostrado abaixo. N\u00e3o se esque\u00e7a de marcar a caixa de sele\u00e7\u00e3o que diz ‘Rodap\u00e9 fixo'. Clique em OK e voc\u00ea ter\u00e1 o modo PLAN. Clique duas vezes em A-Master localizado na parte inferior em uma \u00e1rea cinza. Voc\u00ea criar\u00e1 tudo nesta p\u00e1gina mestra.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235b3f0862.webp\")
<\/a><\/p>\n\n 2 Escolha a ferramenta de texto na caixa de ferramentas localizada no lado esquerdo da janela do aplicativo. Clique e arraste na tela ou p\u00e1gina para criar uma caixa de texto. V\u00e1 para o painel de texto (Ctrl+T), no menu suspenso de fontes, procure Web Fonts e escolha ‘Adicionar fontes da web' e baixe as seguintes fontes:\n<\/p>\n
- \n
- Rametto Um\n <\/li>\n
- peda\u00e7o\n <\/li>\n
- Quest\u00e3o\n <\/li>\n
- Estrada de ferro\n <\/li>\n
- Nobre\n <\/li>\n
- PT Sem\n <\/li>\n
- ubuntu\n <\/li>\n
- Lagosta\n <\/li>\n<\/ul>\n
\n Depois de baixar essas fontes, exclua esta caixa de texto.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235b5afeaf.webp\")
<\/a><\/p>\n\n 3 V\u00e1 para o painel Layers localizado no lado direito da janela do aplicativo. Se n\u00e3o estiver l\u00e1, v\u00e1 para o menu Janela > Camadas. Voc\u00ea ver\u00e1 uma camada chamada Layer 1 (cor azul). Esta \u00e9 a camada padr\u00e3o e tudo o que voc\u00ea cria ou coloca na tela vai para l\u00e1. Clique duas vezes nesta camada e nomeie-a como ‘Cabe\u00e7alho'.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235b8cad84.webp\")
<\/a><\/p>\n\n 4 Dentro do painel de camadas, clique no pequeno \u00edcone de papel com borda dobrada localizado no canto inferior direito. Clicar aqui criar\u00e1 uma nova camada com a cor vermelha. Novamente, clique duas vezes nesta camada e renomeie-a para ‘Conte\u00fado'.\n<\/p>\n
\n 5 Clique e arraste esta camada de conte\u00fado e coloque-a abaixo da camada de cabe\u00e7alho. Fizemos isso porque queremos que nosso cabe\u00e7alho esteja no topo de tudo.\n<\/p>\n
\n 6 Selecione a camada de cabe\u00e7alho e recolha o painel de camadas.\n<\/p>\n
\n 7 Selecione a ferramenta ret\u00e2ngulo na caixa de ferramentas ou pressione ‘m' no teclado.\n<\/p>\n
\n 8 Desenhe um pequeno ret\u00e2ngulo na tela e verifique se a cor da borda \u00e9 azul, o que indica que esse objeto est\u00e1 dentro da camada de cabe\u00e7alho.\n<\/p>\n
\n 9 V\u00e1 para o painel Transform localizado no canto superior direito da janela do aplicativo. Deixe a largura (W) e coloque 50 dentro do campo altura (H) e pressione enter. (N\u00e3o se preocupe com os valores X e Y.)\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235bc3e592.webp\")
<\/a><\/p>\n\n 10 No topo da p\u00e1gina, voc\u00ea ver\u00e1 duas linhas de cor azul (mostradas na captura de tela abaixo). Estes s\u00e3o chamados de ‘guias'. Quando voc\u00ea passa o mouse sobre o primeiro guia, ele diz ‘Topo da p\u00e1gina, arraste para ajustar o preenchimento acima da p\u00e1gina' e o outro diz ‘Cabe\u00e7alho, arraste para ajustar a posi\u00e7\u00e3o'. Configurar esses guias no come\u00e7o \u00e9 muito importante.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235bf23e62.webp\")
<\/a><\/p>\n\n 11 Agora, como criamos um ret\u00e2ngulo de H=50, clique, segure e arraste a guia ‘topo da p\u00e1gina' at\u00e9 que a caixa que aparecer\u00e1 abaixo quando voc\u00ea come\u00e7ar a arrastar diga Y=50.\n<\/p>\n
\n 12 Da mesma forma, arraste a guia de cabe\u00e7alho acima para a parte superior da guia de p\u00e1gina at\u00e9 que apare\u00e7a Y=0. Fizemos isso para configurar nossa \u00e1rea de cabe\u00e7alho. (Voc\u00ea pode querer experimentar colocar essas guias em posi\u00e7\u00f5es diferentes para obter resultados diferentes, mas \u00e9 bom por enquanto.)\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235c2cc503.webp\")
<\/a><\/p>\n\n 13 Selecione o ret\u00e2ngulo que acabamos de criar, arraste-o para a \u00e1rea do cabe\u00e7alho para que se encaixe corretamente.\n<\/p>\n
\n 14 Agora, temos que aumentar a largura do ret\u00e2ngulo e torn\u00e1-la 100% para que o cabe\u00e7alho fique perfeito em todos os tamanhos de tela. Expanda o ret\u00e2ngulo para ambas as bordas e verifique se ele se encaixa nas bordas. Uma guia laranja aparecer\u00e1, garantindo que o objeto foi encaixado. Conforme voc\u00ea aumenta a largura do ret\u00e2ngulo, o pop-up dir\u00e1 W=100% ou W=1160 quando voc\u00ea atingir a borda.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235c5f0fa0.webp\")
<\/a><\/p>\n\n 15 Mantenha o ret\u00e2ngulo selecionado, clique na palavra Preenchimento abaixo do menu do aplicativo e defina as op\u00e7\u00f5es conforme a seguir. Escolha a primeira cor como Preto e a segunda cor: R=37, G=37, B=37.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235c90d279.webp\")
<\/a><\/p>\n\n 16 V\u00e1 para Arquivo > Salvar site. Salve seu site sempre que fizer uma altera\u00e7\u00e3o.\n<\/p>\n
\n 17 Crie uma caixa de texto e digite \u2013 ‘example.com' e altere sua formata\u00e7\u00e3o conforme mostrado abaixo.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235cc3e77d.webp\")
<\/a><\/p>\n\n 18 Ajuste o tamanho da caixa de texto para que todo o texto apare\u00e7a em uma linha. Selecione esta caixa de texto e arraste-a sobre o ret\u00e2ngulo preto. Alinhe-o ao centro vertical do ret\u00e2ngulo (uma linha azul indicar\u00e1 quando ele est\u00e1 centralizado) e encaixe-o na borda esquerda, conforme mostrado abaixo.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235cebd543.webp\")
<\/a><\/p>\n\n 19 Crie uma caixa de texto e digite \u2013 ‘Home'. Altere sua formata\u00e7\u00e3o da seguinte maneira. Ajuste a largura e a altura da caixa de texto de acordo. Voc\u00ea tamb\u00e9m pode fazer isso no painel de transforma\u00e7\u00e3o. O meu \u00e9 W=52, H=17.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235d124081.webp\")
<\/a><\/p>\n\n 20 Copie e cole esta caixa de texto e digite ‘Servi\u00e7os' na nova. Ajuste a largura. Arraste e coloque esta caixa de texto ao lado de casa com uma diferen\u00e7a muito menor entre os dois. Mais uma vez, os guias ir\u00e3o ajud\u00e1-lo no alinhamento adequado.\n<\/p>\n
\n 21 Copie e cole esta caixa de texto por mais quatro vezes e digite \u2013 Por que N\u00f3s, Depoimentos, Fale Conosco e Newsletter. Coloque essas caixas de texto uma a uma em espa\u00e7amento igual ao lado de ‘servi\u00e7os'.\n<\/p>\n
\n 22 Com a ferramenta de sele\u00e7\u00e3o selecionada e a tecla shift pressionada, selecione todas essas caixas de texto uma a uma. V\u00e1 para o painel de texto, mude a cor para branco. Escolha o grupo dessas caixas e coloque-o sobre o ret\u00e2ngulo do cabe\u00e7alho. (Centralizado verticalmente e alinhado com a borda da p\u00e1gina do lado direito). Este \u00e9 o nosso Menu.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235d30933a.webp\")
<\/a><\/p>\n\n 23 Novamente, com a ferramenta de sele\u00e7\u00e3o selecionada e a tecla shift pressionada, selecione essas caixas de texto, o ret\u00e2ngulo e a caixa de texto example.com. No canto superior direito, voc\u00ea ver\u00e1 uma op\u00e7\u00e3o chamada Pin. Clique na caixa central superior para fixar esses itens. Isso significa que, quando o usu\u00e1rio rolar pelo seu site, esse cabe\u00e7alho ficar\u00e1 fixo no topo. \u00c9 muito \u00fatil, pois o usu\u00e1rio n\u00e3o ter\u00e1 que rolar at\u00e9 o fim para escolher outra op\u00e7\u00e3o.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235d5928ff.webp\")
<\/a><\/p>\n\n 24 V\u00e1 para o painel Layers e bloqueie a camada de cabe\u00e7alho. Isso pode ser feito clicando dentro da caixa \u00e0 esquerda do nome da camada. Quando voc\u00ea bloqueia uma camada ou qualquer objeto, isso n\u00e3o afeta sua apar\u00eancia, mas voc\u00ea n\u00e3o poder\u00e1 selecionar esses itens, a menos que desbloqueie. Fizemos isso para eliminar completamente as chances de mover acidentalmente os itens.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235d843d05.webp\")
<\/a><\/p>\n\n 25 Selecione a camada de conte\u00fado e recolha o painel de camadas.\n<\/p>\n
\n Estabelecendo apresenta\u00e7\u00e3o de slides
\n<\/h3>\n\n 26 V\u00e1 para a biblioteca de widgets localizada no lado direito da janela do aplicativo. Se n\u00e3o estiver l\u00e1, v\u00e1 para o menu Janela > escolha Biblioteca de widgets. Expanda a se\u00e7\u00e3o ‘apresenta\u00e7\u00f5es de slides' e selecione ‘Em branco'. Clique e arraste este objeto para a tela. Uma janela preta com op\u00e7\u00f5es de apresenta\u00e7\u00e3o de slides aparecer\u00e1.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235db65202.webp\")
<\/a><\/p>\n\n 27 Certifique-se de que as op\u00e7\u00f5es estejam definidas conforme mostrado na imagem abaixo. Na se\u00e7\u00e3o de partes na parte inferior, desmarque as caixas de sele\u00e7\u00e3o que dizem Anterior, Pr\u00f3ximo, Legendas e Contador. N\u00e3o precisamos de nada disso.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235deacba4.webp\")
<\/a><\/p>\n\n 28 Clique em qualquer lugar na tela para fazer esse pop-up desaparecer. Agora, clique com cuidado dentro da apresenta\u00e7\u00e3o de slides. Ao clicar uma vez, voc\u00ea ver\u00e1 que ‘Apresenta\u00e7\u00e3o de slides' foi escrito em ‘o tipo de \u00e1rea de sele\u00e7\u00e3o atual'. Ele est\u00e1 localizado no canto superior esquerdo abaixo do menu do aplicativo. Esta \u00e1rea permite que voc\u00ea veja o que voc\u00ea selecionou. \u00c9 um recurso muito \u00fatil quando o layout fica complicado. Clique novamente e voc\u00ea notar\u00e1 que a descri\u00e7\u00e3o diz ‘Hero Image'.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e121ebd.webp\")
<\/a><\/p>\n\n 29 Aumente a largura da imagem do her\u00f3i manualmente, expandindo-a a partir do meio. Encaixe-o nas bordas da p\u00e1gina (para torn\u00e1-la 100% de largura) e na parte inferior do ret\u00e2ngulo do cabe\u00e7alho, conforme mostrado abaixo.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e337282.webp\")
<\/a><\/p>\n\n 30 V\u00e1 para transformar o painel e coloque H=500.\n<\/p>\n
\n 31 Abra as op\u00e7\u00f5es de apresenta\u00e7\u00e3o de slides novamente clicando no pequeno c\u00edrculo azul com ret\u00e2ngulo branco dentro dele (localizado no canto superior direito da apresenta\u00e7\u00e3o de slides).\n<\/p>\n
\n 32 Clique no \u00edcone da pasta ao lado da op\u00e7\u00e3o ‘Adicionar imagens…', procure as imagens que baixamos para a apresenta\u00e7\u00e3o de slides. Selecione todos os quatro e clique em abrir.\n<\/p>\n
\n 33 V\u00e1 para Arquivo > escolha ‘Visualizar p\u00e1gina no navegador' ou Ctrl+Shift+E e veja como sua apresenta\u00e7\u00e3o de slides funcionar\u00e1 quando o site estiver no ar. Eu recomendo que voc\u00ea memorize os atalhos de teclado que estou usando neste tutorial. Isso ajudar\u00e1 voc\u00ea a acelerar seu processo de design.\n<\/p>\n
\n Criando a se\u00e7\u00e3o ‘Servi\u00e7os'
\n<\/h3>\n\n 34 Agora que configuramos nosso cabe\u00e7alho e apresenta\u00e7\u00e3o de slides, \u00e9 hora de criar se\u00e7\u00f5es para cada item que adicionamos ao nosso menu. Vamos come\u00e7ar com ‘servi\u00e7os'. Crie uma caixa de texto e digite servi\u00e7os nela (todas as letras min\u00fasculas) e altere sua formata\u00e7\u00e3o da seguinte maneira.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e4de8f0.webp\")
<\/a><\/p>\n\n 35 Clique duas vezes dentro desta caixa de texto e selecione apenas a letra ‘I'. Mude sua fonte para ‘Chunk' e deixe tudo igual. Ajuste a altura desta caixa de texto. Quando voc\u00ea diminuir sua altura, uma linha tracejada aparecer\u00e1 em um determinado ponto e a caixa n\u00e3o ficar\u00e1 mais curta. N\u00e3o reduza o tamanho depois disso. Esta \u00e9 a menor altura poss\u00edvel com este tamanho de fonte.\n<\/p>\n
\n 36 Com a caixa de texto selecionada, v\u00e1 para transformar o painel e defina o \u00e2ngulo de rota\u00e7\u00e3o para -90 graus (90 graus negativos).\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e695d45.webp\")
<\/a><\/p>\n\n 37 Mova a caixa de texto para o lado esquerdo da tela, conforme mostrado abaixo.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235e88e04c.webp\")
<\/a><\/p>\n\n 38 Voc\u00ea pode diminuir um pouco o zoom para ver todo o conte\u00fado de uma vez ou para ajustar os objetos adequadamente. Para fazer isso, tente digitar valores diferentes (menos de 100%) na se\u00e7\u00e3o de n\u00edvel de zoom na parte superior. Depois de digitar o valor, pressione enter.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235eab2968.webp\")
<\/a><\/p>\n\n 39 V\u00e1 para Arquivo > escolha ‘Colocar'. Selecione a primeira imagem que baixamos para nossa se\u00e7\u00e3o de servi\u00e7os. Clique em abrir.\n<\/p>\n
\n 40 O cursor mudar\u00e1 sua apar\u00eancia para um marcador carregado com uma imagem. Clique na tela para coloc\u00e1-la. Mova e posicione-o de forma que fique alinhado com a parte superior da caixa de texto ‘servi\u00e7os'.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235ed9df42.webp\")
<\/a><\/p>\n\n 41 Copie esta imagem e cole-a duas vezes. Selecione essas imagens coladas uma a uma e alinhe-as em espa\u00e7amento igual \u00e0 primeira imagem.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235f1531ed.webp\")
<\/a><\/p>\n\n 42 Selecione a segunda imagem, clique com o bot\u00e3o direito e escolha ‘replace image' (\u00e9 a \u00faltima op\u00e7\u00e3o). Procure a segunda imagem e clique em abrir. Substitua a terceira imagem tamb\u00e9m.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235f44fa27.webp\")
<\/a><\/p>\n\n 43 Crie caixas de texto para as informa\u00e7\u00f5es sobre servi\u00e7os e aplique a formata\u00e7\u00e3o de t\u00edtulos e par\u00e1grafos conforme abaixo. As guias ir\u00e3o ajud\u00e1-lo a alinh\u00e1-los corretamente.\n<\/p>\n
- \n
- \n Para cabe\u00e7alhos:<\/strong> Fonte: Raleway Bold, Tamanho=20, Cor: Preto, alinhamento \u00e0 esquerda e 100% entrelinha.\n <\/li>\n
- \n Para par\u00e1grafos:<\/strong> Fonte: Questrial, Tamanho=15, Cor: R=67 G=67 B=67, Alinhado \u00e0 esquerda e 120% entrelinha.\n <\/li>\n<\/ul>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235f67e871.webp\")
<\/a><\/p>\n\n 44 Coloque mais tr\u00eas imagens como fizemos nas etapas anteriores e crie um texto de descri\u00e7\u00e3o semelhante para elas. Voc\u00ea deve ter o seguinte resultado.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235f8b3f61.webp\")
<\/a><\/p>\n\n Resultado Final da Se\u00e7\u00e3o ‘Servi\u00e7os'
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235fb6b3b2.webp\")
<\/a><\/p>\n\n Criando a se\u00e7\u00e3o ‘Por que n\u00f3s'
\n<\/h3>\n\n 45 Em seguida, vem a se\u00e7\u00e3o ‘Por que n\u00f3s'. Este \u00e9 um pouco complicado. Tenha cuidado ao selecionar os objetos. Em primeiro lugar, crie um ret\u00e2ngulo de 100% de largura e H=996. Preencha com uma cor (R=47, G=48, B=55). Clique com o bot\u00e3o direito neste ret\u00e2ngulo > Organizar > escolha ‘enviar para tr\u00e1s' (n\u00e3o enviar para tr\u00e1s).\n<\/p>\n
\n 46 Expanda sua \u00e1rea de trabalho clicando e arrastando a guia ‘bottom of page' para que voc\u00ea tenha espa\u00e7o suficiente para criar o conte\u00fado que ser\u00e1 colocado neste ret\u00e2ngulo que acabamos de criar.\n<\/p>\n
\n 47 Role para baixo at\u00e9 o espa\u00e7o vazio em branco e fa\u00e7a outro ret\u00e2ngulo de W=351 e H=351. Preencha com a cor branca e sem tra\u00e7o.\n<\/p>\n
\n 48 V\u00e1 para a op\u00e7\u00e3o ‘corner radius' (localizada ao lado do tra\u00e7o abaixo do menu do aplicativo). Clique em todos os cantos para torn\u00e1-los redondos e coloque 500 na caixa ao lado.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235fd21bf3.webp\")
<\/a><\/p>\n\n 49 Voc\u00ea ter\u00e1 um c\u00edrculo. Arraste este c\u00edrculo para o ret\u00e2ngulo e ajuste-o da seguinte maneira. Ao lado do raio do canto, existe uma op\u00e7\u00e3o chamada ‘Opacidade'. Com o c\u00edrculo selecionado, coloque 14 nesta caixa.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638235ff30452.webp\")
<\/a><\/p>\n\n 50 Crie uma caixa de texto e digite \u2013 por que n\u00f3s (todos pequenos). Altere sua fonte para Rammetto One, tamanho=100, Cor R=241 G=244 B=247, entrelinha 100% e alinhe ao centro. Coloque esta caixa de texto dentro do c\u00edrculo e alinhe-o corretamente.\n<\/p>\n
\n 51 Agora vamos criar as linhas tracejadas. Fa\u00e7a um ret\u00e2ngulo de W=9 e H=9, sem preenchimento. Clique na palavra ‘tra\u00e7o' ao lado de preencher. Escolha a cor R=241 G=244 B=247. Clique no \u00edcone da corrente para quebr\u00e1-la e coloque ‘1' na espessura do tra\u00e7ado inferior.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236015d3b8.webp\")
<\/a><\/p>\n\n 52 Copie este ret\u00e2ngulo de tra\u00e7o de um lado e cole-o v\u00e1rias vezes. Organize-os em uma linha (amplie um pouco com a ferramenta de zoom se estiver achando dif\u00edcil ver esses ret\u00e2ngulos). Depois de obter o comprimento desejado da linha tracejada, selecione todos esses ret\u00e2ngulos, clique com o bot\u00e3o direito do mouse e escolha ‘Grupo'. Copie e cole este grupo para outras linhas tracejadas.\n<\/p>\n
\n 53 Para linhas tracejadas inclinadas, tente colocar diferentes \u00e2ngulos de rota\u00e7\u00e3o no painel de transforma\u00e7\u00e3o. Eu usei 150 e 30 graus. Voc\u00ea ter\u00e1 que deletar alguns ret\u00e2ngulos deste grupo para ter comprimentos menores. Ajuste essas linhas perto do c\u00edrculo como mostrado abaixo.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823602da73a.webp\")
<\/a><\/p>\n\n 54 Agora adicionaremos mais texto para n\u00fameros, cabe\u00e7alhos e descri\u00e7\u00f5es. Use as seguintes configura\u00e7\u00f5es para cada um deles e ajuste essas caixas de texto conforme mostrado abaixo.\n<\/p>\n
- \n
- \n Para n\u00fameros:<\/strong> Fonte=Rammetto One, Cor: R=196 G=214 B=193, alinhado ao centro e 100% \u00e0 esquerda, tamanho: 200 (para o n\u00famero ‘1'), 160 (para os n\u00fameros ‘2' e ‘3') e 120 (para os n\u00fameros ‘4' e ‘5').\n <\/li>\n
- \n Para cabe\u00e7alhos:<\/strong> Fonte=Ralway Bold, Tamanho=18, Cor:Branco, Alinhado ao centro e 100% entrelinha.\n <\/li>\n
- \n Para par\u00e1grafos:<\/strong> Fonte=Questrial, Tamanho=16, Cor: R=241 G=244 B=247, Alinhado ao centro e 120% entrelinha.\n <\/li>\n<\/ul>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823605a97a7.webp\")
<\/a><\/p>\n\n Resultado final da se\u00e7\u00e3o ‘Por que n\u00f3s'
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382360890068.webp\")
<\/a><\/p>\n\n Criando a se\u00e7\u00e3o ‘Testemunhos'
\n<\/h3>\n\n 55 Novamente, crie algum espa\u00e7o para trabalhar arrastando para baixo a guia da p\u00e1gina. Fa\u00e7a um ret\u00e2ngulo de 100% de largura e H=486.\n<\/p>\n
\n 56 Com o ret\u00e2ngulo selecionado, clique na palavra ‘Preencher' e clique em ‘Adicionar imagem' ao lado da op\u00e7\u00e3o de imagem. Procure a imagem do padr\u00e3o brickwall que baixamos. Na op\u00e7\u00e3o Fitting, escolha ‘Tile' para preencher todo o ret\u00e2ngulo com esta textura.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382360b46ae7.webp\")
<\/a><\/p>\n\n 57 Role para baixo at\u00e9 o espa\u00e7o vazio e crie uma caixa de texto de tamanho W=406, H=289 com a ajuda do painel de transforma\u00e7\u00e3o. Digite \u2013 ‘o que os outros t\u00eam a dizer' (todos pequenos). Altere a fonte para Rammetto One, tamanho=70, alinhamento \u00e0 esquerda, valores de cor R=37 G=37 B=37 e entrelinha=100%.\n<\/p>\n
\n 58 Com esta caixa de texto selecionada, clique no tra\u00e7o da palavra, aplique o tra\u00e7o direito de peso um e de cor preta a ele. Arraste esta caixa de texto e coloque-a sobre o ret\u00e2ngulo com padr\u00e3o brickwall.\n<\/p>\n
\n 59 O pr\u00f3ximo passo \u00e9 adicionar depoimentos de clientes. Para isso, usaremos as imagens vetoriais de rosto redondo que baixamos de freepik.com. Mais uma vez, des\u00e7a para o espa\u00e7o vazio em branco para que voc\u00ea possa personalizar sua composi\u00e7\u00e3o adequadamente.\n<\/p>\n
\n 60 V\u00e1 para a biblioteca Widgets e arraste ‘Blank' da se\u00e7\u00e3o de composi\u00e7\u00f5es para a tela. Clique no sinal de mais para adicionar mais tr\u00eas gatilhos. Selecione cuidadosamente o primeiro gatilho e garanta sua sele\u00e7\u00e3o com a ajuda da \u00e1rea de sele\u00e7\u00e3o atual que diz gatilho. E logo ao lado, h\u00e1 uma op\u00e7\u00e3o chamada ‘Ativo'. Clique aqui para expandir. Selecione o estado ‘Normal' e escolha ‘sem preenchimento' e ‘sem tra\u00e7ado' para este estado. Repita isso para cada estado que for Rollover, Mouse Down e Active. V\u00e1 para o painel de transforma\u00e7\u00e3o com o primeiro gatilho selecionado e coloque W=10, H=10.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382360de4579.webp\")
<\/a><\/p>\n\n 61 Repita o passo anterior para cada gatilho que temos. Isso significa aplicar sem preenchimento e sem tra\u00e7ado para cada estado e transformar os gatilhos em tamanho 10 x 10. Aproxime os gatilhos um do outro.\n<\/p>\n
\n 62 Agora. Personalizaremos os alvos para cada um desses gatilhos. O grande ret\u00e2ngulo que voc\u00ea est\u00e1 vendo \u00e9 o alvo. Selecione o primeiro gatilho e selecione seu estado normal no painel de estados. Depois disso, selecione o alvo para este gatilho e n\u00e3o aplique nenhum preenchimento e nenhum tra\u00e7ado para cada estado. Em seguida, v\u00e1 para o painel de transforma\u00e7\u00e3o e fa\u00e7a o alvo de W=360, H=370.\n<\/p>\n
\n 63 Repita a etapa anterior para cada alvo. Apenas certifique-se de selecionar primeiro o gatilho, coloc\u00e1-lo no estado normal e, em seguida, selecionar o respectivo alvo com o estado normal e, em seguida, n\u00e3o aplicar nenhum preenchimento e nenhum tra\u00e7ado. Voc\u00ea n\u00e3o precisar\u00e1 alterar o tamanho de cada alvo. Basta faz\u00ea-lo para um e ser\u00e1 aplicado a todos.\n<\/p>\n
\n 64 Agora, vamos come\u00e7ar a adicionar conte\u00fado a esta composi\u00e7\u00e3o. V\u00e1 para Arquivo > Colocar e abra a primeira imagem de rosto e coloque-a fora da composi\u00e7\u00e3o. Arraste esta imagem e coloque-a dentro da composi\u00e7\u00e3o agora. Voc\u00ea ver\u00e1 que um c\u00edrculo azul aparecer\u00e1 no canto superior direito, indicando que esta imagem agora faz parte da composi\u00e7\u00e3o.\n<\/p>\n
\n 65 Crie tr\u00eas caixas de texto \u2013 uma para o nome da pessoa, uma para sua designa\u00e7\u00e3o e uma para a declara\u00e7\u00e3o ou revis\u00e3o. Aplique a formata\u00e7\u00e3o conforme abaixo e coloque essas caixas de texto dentro da composi\u00e7\u00e3o. Apenas certifique-se de que cada um deles tenha um c\u00edrculo azul no canto.\n<\/p>\n
- \n
- \n Para o nome da pessoa:<\/strong> Fonte: Nobile Medium Italic, tamanho=18, Cor: R=37 G=37 B=37, alinhamento ao centro e 100% entrelinha.\n <\/li>\n
- \n Para designa\u00e7\u00e3o:<\/strong> Fonte: Nobile, tamanho=15, Cor: R=37 G=37 B=37, alinhamento ao centro e 100% entrelinha.\n <\/li>\n
- \n Para Declara\u00e7\u00f5es (com v\u00edrgulas):<\/strong> Fonte: PT Sans Italic, tamanho=18, cor: R=69 G=64 B=68, alinhamento ao centro e 100% entrelinha.\n <\/li>\n<\/ul>\n
\n 66 Com a imagem do rosto selecionada, aplique pincelada de peso 4 em cada lado, cor: branco, arredonde todos os cantos e aumente o raio at\u00e9 envolver a imagem. Eu usei 100 como raios de canto.\n<\/p>\n
\n 67 V\u00e1 para ‘Efeitos' (localizado ao lado da op\u00e7\u00e3o de cantos arredondados) e marque a caixa de sele\u00e7\u00e3o ‘sombra'. Coloque os valores como; Cor=Preto, Opacidade=37%, Desfoque=12, \u00c2ngulo=78 e Dist\u00e2ncia=5.\n<\/p>\n
\n 68 Repita as etapas anteriores (de 64 a 67) para adicionar conte\u00fado a cada destino e salve as altera\u00e7\u00f5es (Ctrl+S). Coloque esta composi\u00e7\u00e3o sobre o ret\u00e2ngulo com padr\u00e3o brickwall.\n<\/p>\n
\n 69 Agora, selecione toda a composi\u00e7\u00e3o (certifique-se com a \u00e1rea de sele\u00e7\u00e3o atual) e expanda suas op\u00e7\u00f5es clicando no pequeno c\u00edrculo azul. Defina as op\u00e7\u00f5es conforme mostrado abaixo. Pressione Ctrl+Shift+E e veja se est\u00e1 funcionando bem.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361123532.webp\")
<\/a><\/p>\n\n 70 Voc\u00ea deve ter o seguinte resultado.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361448e2e.webp\")
<\/a><\/p>\n\n Resultado Final da Se\u00e7\u00e3o ‘Testemunhos'
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823618421c8.webp\")
<\/a><\/p>\n\n Criando a se\u00e7\u00e3o ‘Fale conosco'
\n<\/h3>\n\n 71 A pr\u00f3xima se\u00e7\u00e3o \u00e9 Contate-nos. Adicionaremos uma imagem de plano de fundo, um formul\u00e1rio e algumas caixas de texto nesta se\u00e7\u00e3o. Em primeiro lugar, fa\u00e7a um ret\u00e2ngulo de 100% de largura e H=692. Preencha-o com uma imagem que baixamos para esta se\u00e7\u00e3o e escolha ‘dimensionar para preencher' em Ajuste. Altere sua opacidade para 72%.\n<\/p>\n
\n 72 Fa\u00e7a outro ret\u00e2ngulo da mesma largura e altura e preencha-o com um gradiente. Coloque os valores do gradiente como; Opacidade=90% a 46%, Cor: Preto a R=69 G=64 B=68, Ponto focal=66%, Dire\u00e7\u00e3o: Horizontal e Tamanho: autom\u00e1tico. Coloque este ret\u00e2ngulo sobre a imagem e verifique se ele se encaixa em todas as bordas.\n<\/p>\n
\n 73 V\u00e1 para a biblioteca de widgets. Em formul\u00e1rios, selecione ‘contato simples' e arraste-o na tela. Uma janela com op\u00e7\u00f5es de formul\u00e1rio ir\u00e1 aparecer. Colocar nome do formul\u00e1rio: Formul\u00e1rio de contato, Email para: coloque seu endere\u00e7o de email no qual deseja receber as informa\u00e7\u00f5es inseridas pelos visitantes, Ap\u00f3s o envio: selecione ‘permanecer na p\u00e1gina atual'. A \u00faltima op\u00e7\u00e3o \u00e9 ‘Editar juntos'. Certifique-se de que est\u00e1 marcado. Desta forma, voc\u00ea ter\u00e1 que fazer altera\u00e7\u00f5es apenas em um campo e elas ser\u00e3o aplicadas a todos. Clique em qualquer lugar na tela para fazer a caixa de op\u00e7\u00f5es desaparecer.\n<\/p>\n
\n 74 Selecione o formul\u00e1rio. Clique no r\u00f3tulo ‘Nome' e clique nele novamente at\u00e9 ver ‘R\u00f3tulo' escrito na \u00e1rea de sele\u00e7\u00e3o atual. Clique em deletar. Repita isso para r\u00f3tulos de e-mail e mensagem e exclua-os.\n<\/p>\n
\n 75 Selecione o formul\u00e1rio novamente e selecione o primeiro campo do formul\u00e1rio que diz ‘Digite o nome' at\u00e9 ver ‘Entrada de texto' na \u00e1rea de sele\u00e7\u00e3o atual. N\u00e3o aplique preenchimento e tra\u00e7o inferior (peso um e cor branca) para cada estado, de Vazio a Foco. Para o estado de erro, selecione sem preenchimento e tra\u00e7o inferior de cor vermelha com peso 1.\n<\/p>\n
\n 76 Depois disso, com o campo de email selecionado > escolha seu estado vazio novamente e personalize a fonte e a cor do texto para cada estado conforme escrito abaixo.\n<\/p>\n
- \n
- \n Para estado vazio, n\u00e3o vazio e foco:<\/strong> Fonte: Questrial, tamanho=14, cor: branco, alinhamento \u00e0 esquerda, 100% entrelinha e sem it\u00e1lico.\n <\/li>\n
- \n Para o estado de rolagem:<\/strong> basta alterar a cor do texto para R=196 G=196 B=196 e sem it\u00e1lico.\n <\/li>\n
- \n Para estado de erro:<\/strong> altere a cor do texto para vermelho e sem it\u00e1lico.\n <\/li>\n<\/ul>\n
\n 77 Clique e selecione o bot\u00e3o Enviar. Escolha seu estado normal, arredonde todos os cantos com 40 raios e aumente sua largura conforme mostrado na captura de tela abaixo. Altere sua fonte para Raleway Bold, tamanho=20, alinhamento ao centro, cor: R=241 G=244 B=247, entrelinha: ajuste o texto ‘enviar' no centro do bot\u00e3o aumentando este valor (usei 130%) .\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361be815c.webp\")
<\/a><\/p>\n\n 78 Para os estados de rolagem e mouse pressionado, altere a cor do tra\u00e7o e a cor do texto para cinza (R=127 G=127 B=127). Por fim, para o estado ‘enviar em andamento', altere a cor do tra\u00e7o e do texto para azul celeste (R=41 G=171 B=226).\n<\/p>\n
\n 79 Ao selecionar o estado ‘enviar em andamento' para este bot\u00e3o de envio, voc\u00ea ver\u00e1 que h\u00e1 outra caixa de texto que diz ‘enviando formul\u00e1rio…'. Selecione esta caixa e escolha o estado ‘enviar em andamento'. Altere a fonte para Questrial, tamanho=14, cor: cinza, alinhamento ao centro e sem it\u00e1lico. Escolha o estado ‘enviar com sucesso' e altere a cor do texto para azul celeste (sem it\u00e1lico). Escolha o estado ‘enviar erro' e altere a cor do texto para vermelho (sem it\u00e1lico). O formul\u00e1rio de contato est\u00e1 pronto.\n<\/p>\n
\n 80 Fa\u00e7a duas caixas de texto. Digite \u2013 entre em contato conosco e na segunda linha, digite ‘todos os campos s\u00e3o obrigat\u00f3rios'. Para o texto de contato, use a fonte: Rammetto One, tamanho=60, cor: R=241 G=244 B=247, entrelinha=100% e alinhamento \u00e0 esquerda. Para o texto ‘todos os campos s\u00e3o obrigat\u00f3rios', use a fonte: Nobile it\u00e1lico, tamanho=26, cor: R=241 G=244 B=247, entrelinha=100% e alinhamento \u00e0 esquerda. Para esta caixa de texto, aplique o tra\u00e7o inferior de peso 1 e cor branca.\n<\/p>\n
\n 81 Digite algum par\u00e1grafo na segunda caixa de texto que criamos. Use fonte: PT Sans Italic, tamanho=14, cor: R=241 G=244 B=247, entrelinha=120%, alinhamento \u00e0 esquerda e espa\u00e7o anterior=15.\n<\/p>\n
\n 82 Coloque essas caixas de texto e o formul\u00e1rio na imagem que colocamos. Ajuste-os da seguinte forma.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361dd708d.webp\")
<\/a><\/p>\n\n 83 Crie mais uma caixa de texto para algumas informa\u00e7\u00f5es de contato, como endere\u00e7o do escrit\u00f3rio, e-mail e n\u00fameros de telefone. Coloque esta caixa de texto na imagem. Voc\u00ea deve ter o seguinte resultado.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382361fd3a10.webp\")
<\/a><\/p>\n\n Resultado Final da Se\u00e7\u00e3o ‘Fale Conosco'
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236220ca76.webp\")
<\/a><\/p>\n\n Criando Rodap\u00e9
\n<\/h3>\n\n 84 A \u00faltima se\u00e7\u00e3o \u00e9 o rodap\u00e9. Existem tr\u00eas guias na parte inferior, a saber – parte inferior da p\u00e1gina, rodap\u00e9 e parte inferior do navegador. O que voc\u00ea precisa fazer agora \u00e9 certificar-se de que a guia ‘parte inferior da p\u00e1gina' se encaixe na parte inferior da se\u00e7\u00e3o de contato e a guia ‘rodap\u00e9' coincida com a guia ‘parte inferior da p\u00e1gina'. Depois disso, voc\u00ea pode arrastar o guia ‘parte inferior do navegador' para baixo para ajustar o espa\u00e7o necess\u00e1rio para o rodap\u00e9.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236248fda2.webp\")
<\/a><\/p>\n\n 85 Crie dois ret\u00e2ngulos de 100% de largura e H=168 para o primeiro e H=37 para o outro. Altere a cor de preenchimento do ret\u00e2ngulo grande para branco e use R=47, G=48, B=55 para um menor.\n<\/p>\n
\n 86 Selecione o primeiro ret\u00e2ngulo e tente coloc\u00e1-lo na \u00e1rea do rodap\u00e9. N\u00e3o vai l\u00e1. Em vez disso, a parte inferior da guia da p\u00e1gina come\u00e7ar\u00e1 a se expandir para baixo. Para tornar este ret\u00e2ngulo um item de rodap\u00e9, marque a caixa de sele\u00e7\u00e3o ‘Rodap\u00e9' localizada na \u00e1rea superior direita da janela do aplicativo. Fa\u00e7a isso para o segundo ret\u00e2ngulo tamb\u00e9m.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823626e43d3.webp\")
<\/a><\/p>\n\n 87 Agora coloque esses ret\u00e2ngulos na \u00e1rea do rodap\u00e9 e certifique-se de que o ret\u00e2ngulo grande esteja um pouco acima da guia do rodap\u00e9. A parte inferior do ret\u00e2ngulo colorido deve encaixar na parte inferior da guia do navegador. Caso contr\u00e1rio, voc\u00ea ver\u00e1 uma pequena lacuna branca ap\u00f3s o rodap\u00e9 que n\u00e3o parece agrad\u00e1vel.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823629217b3.webp\")
<\/a><\/p>\n\n 88 Crie caixas de texto para o rodap\u00e9 e digite o que quiser. Basta marcar a caixa de sele\u00e7\u00e3o ‘rodap\u00e9' para as caixas de texto que voc\u00ea adicionar\u00e1. Eu adicionei algum texto contendo Isen\u00e7\u00e3o de responsabilidade e informa\u00e7\u00f5es de direitos autorais.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382362b623c3.webp\")
<\/a><\/p>\n\n 89 O selo ‘Feito com Adobe Muse CC' pode ser adicionado da biblioteca de widgets na se\u00e7\u00e3o social. Voc\u00ea tamb\u00e9m pode adicionar links \u00e0 sua p\u00e1gina do Facebook, Twitter, Google+, LinkedIn, Pinterest, canal do YouTube ou link do vimeo.\n<\/p>\n
\n 90 O s\u00edmbolo de direitos autorais e muitos outros s\u00edmbolos que voc\u00ea v\u00ea ao lado do texto Todos os direitos reservados podem ser adicionados no painel ‘Glifos' localizado no lado direito da janela do aplicativo. Se n\u00e3o estiver l\u00e1, v\u00e1 para o menu Janela > escolha Glifos.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382362e4f736.webp\")
<\/a><\/p>\n\n Criando a se\u00e7\u00e3o ‘Newsletter'
\n<\/h3>\n\n 91 At\u00e9 agora, criamos se\u00e7\u00f5es para todos os itens de menu, exceto um, que \u00e9 o ‘Newsletter'. Vamos fazer algo interessante com ele. Lembre-se do s\u00edmbolo da cruz que baixamos, ele ser\u00e1 usado aqui (tudo bem se voc\u00ea n\u00e3o baixou, voc\u00ea ainda pode acompanhar). Em primeiro lugar, selecione a caixa de texto Newsletter e anote sua largura e altura no painel de transforma\u00e7\u00e3o. O meu \u00e9 81 x 17.\n<\/p>\n
\n 92 Agora, abra a biblioteca de widgets e arraste ‘Lightbox Display' da se\u00e7\u00e3o de composi\u00e7\u00f5es. Exclua os dois primeiros gatilhos (localizados na parte superior) e exclua todas as legendas (localizadas na parte inferior). Torne o tamanho do terceiro acionador igual ao da caixa de texto do boletim informativo, que \u00e9 81 x 17. Altere o preenchimento e o tra\u00e7ado para nenhum em todos os estados.\n<\/p>\n
\n 93 Arraste a caixa de texto do boletim informativo e coloque-a dentro desse acionador de forma que todas as bordas da caixa de texto coincidam com as bordas do acionador. Agora arraste este grupo e coloque-o novamente no menu onde foi colocado anteriormente. O que fizemos foi aplicar um link para a caixa de texto da Newsletter. Quando o usu\u00e1rio clicar nele, o site desaparecer\u00e1 e o alvo aparecer\u00e1.\n<\/p>\n
\n 94 O pr\u00f3ximo passo \u00e9 customizar nosso alvo. Selecione a \u00e1rea cinza e assegure-se de que a \u00e1rea de sele\u00e7\u00e3o atual diga ‘Destino'. Voc\u00ea ter\u00e1 que clicar tr\u00eas vezes para selecion\u00e1-lo. Altere o preenchimento e o tra\u00e7ado para nenhum em todos os seus estados.\n<\/p>\n
\n 95 Adicione duas caixas de texto e um formul\u00e1rio de contato simples (exclua seus campos de nome e mensagem e mantenha apenas o campo de e-mail). Arraste-os para dentro desta composi\u00e7\u00e3o e certifique-se de que todos eles tenham um c\u00edrculo azul em seus cantos.\n<\/p>\n
\n 96 Personalize o formul\u00e1rio como fizemos na se\u00e7\u00e3o de contato. Voc\u00ea deve ter o seguinte resultado. Para o campo de texto ‘Mantenha contato', use a fonte: Lagosta, tamanho=40, cor:branco, alinhamento ao centro e entrelinha 100%. Para o texto descritivo abaixo, use a fonte: Ubuntu Light Italic, tamanho=14, cor: branco, alinhamento ao centro e 120% entrelinha. Altere o texto do bot\u00e3o de envio para ‘Inscrever-se'.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823631ea47b.webp\")
<\/a><\/p>\n\n 97 Agora selecione o bot\u00e3o Fechar, mova-o e coloque-o no canto superior direito desta exibi\u00e7\u00e3o lightbox como mostrado abaixo. Clique dentro dele at\u00e9 ver ‘R\u00f3tulo' escrito na \u00e1rea de sele\u00e7\u00e3o atual. Exclua o r\u00f3tulo.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382363507e52.webp\")
<\/a><\/p>\n\n 98 Altere o preenchimento e o tra\u00e7ado deste bot\u00e3o Fechar para nenhum em todos os estados e torne seu W=40 e H=40. V\u00e1 para Preencher > adicionar imagem e procure a imagem cruzada. Escolha ‘dimensionar para caber' na op\u00e7\u00e3o de ajuste.\n<\/p>\n
\n 99 Clique em Newsletter e voc\u00ea ver\u00e1 um c\u00edrculo azul em seu canto. Clique nele e verifique se as op\u00e7\u00f5es est\u00e3o definidas da seguinte maneira.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236383b97c.webp\")
<\/a><\/p>\n\n Resultado Final da Se\u00e7\u00e3o ‘Newsletter'
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382363ae64bc.webp\")
<\/a><\/p>\n\n Criando hiperlinks
\n<\/h3>\n\n 100 A tarefa final restante \u00e9 aplicar links a cada se\u00e7\u00e3o. Para fazer isso, escolha a op\u00e7\u00e3o ‘link \u00e2ncora' localizada na \u00e1rea central superior ou pressione a letra ‘a' em seu teclado. Voc\u00ea ver\u00e1 que o cursor muda sua apar\u00eancia para uma arma posicional carregada com uma \u00e2ncora de link.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382363d80277.webp\")
<\/a><\/p>\n\n 101 Quando voc\u00ea clicar na tela para coloc\u00e1-la, uma caixa de di\u00e1logo ser\u00e1 exibida, permitindo que voc\u00ea renomeie uma \u00e2ncora.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382363feb1d6.webp\")
<\/a><\/p>\n\n 102 Criar \u00e2ncoras de link para cada se\u00e7\u00e3o que criamos, ou seja, Home, Servi\u00e7os, Por que N\u00f3s, Depoimentos e Fale Conosco. Coloque as \u00e2ncoras no topo de cada se\u00e7\u00e3o. A \u00e2ncora inicial \u00e9 mostrada abaixo como um exemplo. A coloca\u00e7\u00e3o dessas \u00e2ncoras \u00e9 uma etapa importante e deve ser feita com cuidado. Quando o usu\u00e1rio clicar em um link espec\u00edfico, o site rolar\u00e1 para a posi\u00e7\u00e3o onde a \u00e2ncora foi colocada.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-63823642ca0c4.webp\")
<\/a><\/p>\n\n 103 Agora vamos aplicar os links. Para fazer isso, selecione a caixa de texto ‘Home'. V\u00e1 para a op\u00e7\u00e3o ‘Hiperlinks' (localizada na parte superior), clique na pequena seta para baixo para expandir a lista. Aqui voc\u00ea pode ver todas as \u00e2ncoras que acabamos de colocar. Vincule-o \u00e0 \u00e2ncora ‘Home'. Repita esta etapa para outras caixas de texto, exceto Newsletter, pois aplicamos uma exibi\u00e7\u00e3o lightbox a ela.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382364694c80.webp\")
<\/a><\/p>\n\n Resultado final ap\u00f3s a cria\u00e7\u00e3o de hiperlinks
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382364a29ed4.webp\")
<\/a><\/p>\n\n Toques Finais \u2013 Mudando as Propriedades da P\u00e1gina e Adicionando Favicon
\n<\/h3>\n\n 104 Dentro do Modo Plano, clique com o bot\u00e3o direito do mouse na p\u00e1gina inicial e escolha ‘Propriedades da p\u00e1gina'. Uma caixa de di\u00e1logo aparecer\u00e1. Escolha a guia ‘Op\u00e7\u00f5es' e, sob o nome da p\u00e1gina, coloque \u2013 ‘Bem-vindo a example.com' e clique em OK. Este \u00e9 o texto que aparecer\u00e1 na parte superior da janela do navegador.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382364d02485.webp\")
<\/a><\/p>\n\n 105 V\u00e1 para Arquivo > Propriedades do site. Na guia Layout, a \u00faltima op\u00e7\u00e3o \u00e9 ‘Favicon'. Ao passar o mouse sobre ele, aparecer\u00e1 um pop-up descrevendo o que \u00e9 um favicon e qual deve ser o tamanho ideal. \u00c9 bom adicionar um favicon, pois ajuda a destacar sua marca e tamb\u00e9m serve para ajudar os usu\u00e1rios a identificar facilmente seu site, caso o tenham marcado.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382364f684c8.webp\")
<\/a><\/p>\n\n Testando e exportando
\n<\/h3>\n\n 106 Teste seu site acessando Arquivo > Visualizar site no navegador ou Ctrl+Alt+E. N\u00e3o escolha ‘Visualizar p\u00e1gina no navegador' desta vez, pois os links n\u00e3o funcionam na visualiza\u00e7\u00e3o da p\u00e1gina. Voc\u00ea pode tentar colocar as \u00e2ncoras em pontos diferentes para garantir que, quando o usu\u00e1rio clicar em um link, o site role para a se\u00e7\u00e3o correta e para a posi\u00e7\u00e3o correta.\n<\/p>\n
\n 107 Por fim, v\u00e1 em Arquivo > Exportar como HTML (Ctrl+E). No URL do site, coloque qualquer nome como ‘example.com' e escolha o local. Clique OK. O site est\u00e1 pronto.\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-638236528be8c.webp\")
<\/a><\/p>\n\n Resultado Final de Cada P\u00e1gina
\n<\/h3>\n\n Primeira p\u00e1gina
\n<\/h5>\n<\/a><\/p>\n\n Se\u00e7\u00e3o ‘Servi\u00e7os'
\n<\/h5>\n<\/a><\/p>\n\n Se\u00e7\u00e3o ‘Por que n\u00f3s'
\n<\/h5>\n<\/a><\/p>\n\n Se\u00e7\u00e3o ‘Depoimentos'
\n<\/h5>\n<\/a><\/p>\n\n Se\u00e7\u00e3o ‘Fale Conosco'
\n<\/h5>\n<\/a><\/p>\n\n Se\u00e7\u00e3o Rodap\u00e9
\n<\/h5>\n - \n Para o estado de rolagem:<\/strong> basta alterar a cor do texto para R=196 G=196 B=196 e sem it\u00e1lico.\n <\/li>\n
- \n Para designa\u00e7\u00e3o:<\/strong> Fonte: Nobile, tamanho=15, Cor: R=37 G=37 B=37, alinhamento ao centro e 100% entrelinha.\n <\/li>\n
- \n Para cabe\u00e7alhos:<\/strong> Fonte=Ralway Bold, Tamanho=18, Cor:Branco, Alinhado ao centro e 100% entrelinha.\n <\/li>\n
- \n Para par\u00e1grafos:<\/strong> Fonte: Questrial, Tamanho=15, Cor: R=67 G=67 B=67, Alinhado \u00e0 esquerda e 120% entrelinha.\n <\/li>\n<\/ul>\n
- \n Para cabe\u00e7alhos:<\/strong> Fonte: Raleway Bold, Tamanho=20, Cor: Preto, alinhamento \u00e0 esquerda e 100% entrelinha.\n <\/li>\n
- \n
- \n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-255985-6382365f01860.webp\")
<\/a><\/p>\n