Índice Remissivo. Contato. Configurações do contato. Parallax Final

Transcrição

1

2 Índice Remissivo Contato Configurações do contato Parallax Final

3 Contato Finalmente chegamos na parte que nos interessa. O paciente seguiu passo a passo por nossa página, até ser conduzido suavemente para essa sessão. Aqui, sejamos diretos: vamos parar de enrolação e informar exatamente o que ele quer saber... Como ele faz para marcar a consulta! 3

4 Configurações do contato Essa é a área que vamos começar a configurar: Aposto que nesse momento você já está olhando para a página e imaginando o código de texto que está por trás... Mas vou detalhar mais uma vez, não se preocupe: 4

5 A parte inicial nada mais é do que uma simples sessão de cabeçalho e texto comum, centralizados. Usei um bloco de [highlight] para chamar a atenção para uma Call To Action. Embaixo, temos duas colunas, portanto, [one_half] e [one_half_last]. Dentro da primeira, temos um componente diferente: um mapa (esse tipo de componente chamamos de <iframe>). Todos os componentes dessa tela você já aprendeu a desenvolver sozinho. Agora, vamos nos focar na novidade: o mapa! Configurando o mapa de sua clínica Primeiro, vá até o site do Google Maps e digite o endereço do seu local 5

6 de atendimento. Nessa tela, digite seu endereço e certifique-se que o marcador está no local correto. Note que, nesse exemplo, escolhi a Avenida Brasil, número Agora, clique sobre a engrenagem que fica lá embaixo, no canto inferior direito da tela (às vezes o Google troca as ferramentas de posição, mas é só procurar por ela, ok?) 6

7 No próximo passo, clique no botão "Compartilhar ou incorporar mapa". Vai aparecer uma tela como essa: O nosso objetivo é incorporar o mapa no nosso site, portanto, vá até a 7

8 aba de "incorporar mapa". Ela deve parecer com essa: Selecione o tamanho que deseja (pode ser o "médio", tanto faz... depois vamos ter que editar de qualquer forma). Depois, copie o texto com o código de inserção do mapa 8

9 Ele deve ir até o final, onde está o bloco </iframe>. Copie o texto! Agora, vá até o editor da página CONTATO, na aba do editor visual. No local onde estava o mapa de exemplo, cole o conteúdo que você acabou de copiar. O resultado deve ter sido esse: 9

10 Está pronto para ver o resultado?! Vá lá e veja o que aconteceu! Esquisito, né!? Deve ter ficado parecido com isso: 10

11 Acontece que o editor visual só entende o que são os shortcodes. Por definição, os shortcodes ficam entre colchetes [ ] e não < >. Esse código que possui os símbolos < > são chamados de iframe... A linguagem do editor de texto. Para corrigir o problema, faça o seguinte: 11

12 Em primeiro lugar, delete o seu código do editor visual. Dê um espaço entre a abertura e o fechamento da primeira coluna. É lá que vamos colocar o nosso código. 12

13 Agora, clique na aba do editor de texto e veja o que aparece... uma série de códigos que estavam ocultos. Procure pelo componente [one_half] e veja onde está o [/one_half]. Faça como eu fiz: dê um espaçamento DEPOIS de um desses blocos <p> </p>, ainda no meio dos blocos da primeira coluna. Nessa área, insira novamente seu código: Deve ter ficado parecido com o meu. Agora, clique novamente na aba editor visual. Veja o que aconteceu: 13

14 Agora o seu código foi reconhecido!! Centralize o componente (clique sobre ele e clique no ícone de centralizar). Teste e veja se ficou certo!! Hum... Mais ou menos, não é verdade? Deve ter acontecido algo como isso: 14

15 Provavelmente o seu mapa deve ter ficado com o tamanho distorcido e entrando sobre a outra coluna. Para corrigir, volte até o editor de texto. Dentro do código do iframe, tem duas informações que delimitam a altura e a largura do componente. Procure pelo width="xxxx" height="xxxx". Coloque o tamanho que desejar, em pixels. Um bom parâmetro é 400 em cada. Se quiser uma imagem retangular, coloque valores diferentes entre eles (prefiro quadrada). 15

16 Agora, salve e veja novamente! Deve ter ficado mais ou menos assim! 16

17 Faça os ajustes que achar necessários! 17

18 Parallax Final Agora, vamos configurar o parallax final. Abra a página PARALLAX FINAL no menu "todas as páginas". Lembre-se de ajustar o conteúdo, marque como PARALLAX SECTION e configure a imagem destacada: 18

19 Prontinho!! Agora, seu site já deve estar 100% com a sua cara e pronto para rodar!! Fantástico, não é mesmo!? Você imaginaria que seria capaz de criar seu próprio site, há algumas semanas atrás?! 19