Como fazer uma página 'O que fazer'

Passo a passo

Este tutorial mostra como é feita uma página 'O que fazer'. Deixo aqui o roteirinho de como fazer uma página que fique como esta.

Recomendo ler o texto corrido. Mas, para facilitar a consulta na hora em que você precisar, vou fazer um índice acha-fácil.

• Dicas para criar o texto
  • Escreva antes, formate depois
  • A frase de introdução
  • Escalete o roteiro dia a dia
  • Organize as atrações
  • Quantos dias?
  • Fura-filas e passes
  • Hop-on hop-off
  • Encomende os boxes de serviço
  • Construa o menu inicial
  • Transfira textos mais para cima
  • Recheie o texto dos roteiros
  • Crie os verbetes
  • Verbetes com "como chegar"
• Dicas de formatação
  • Formatação do menu (bullets)
  • Formatação de títulos (níveis 2, 3, 4, 5 e negrito)
  • Criação de pontos de navegação interna (#)
  • Criação de links internos
  • Criação de links externos
  • Criação de boxes amarelos
  • Criação de boxes de serviço
  • Inserção de links para voltar ao topo
  • Inserção de fotos
  • Criação de legendas

(1) Escreva antes, formate depois

No modo iniciante, o recomendável é primeiro produzir o texto inteiro e, só depois de terminado, formatar.

Caso você use o Word para compor o texto, atenção: nunca copie/cole do Word direto para o Wordpress. Dá muito erro de formatação!

Se for escrever no Word, sempre copie/cole o texto no Bloco de Notas antes de copiar/colar no Wordpress.

Começando, então, com o título:

Não vamos usar negritos nos títulos ou subtítulos, nem mexer em tamanho de fonte, porque depois na hora da formatação o publicador vai fazer isso automaticamente.

Essa formulação 'Nome do Destino: o que fazer' é padrão nesse tipo de página. Sempre que houver um padrão, a gente vai te contar.

Importante: sempre que estiver trabalhando no publicador do Wordpress, a cada etapa do trabalho salve como rascunho. Você encontra o botão de salvar rascunho no alto do menu da barra direita.

(2) Frase de introdução

Depois do título entra uma frase pro leitor e pro robô do Google saberem do que se trata a página. Vou copiar a introdução escrita pela Mariana na página ainda não-publicada de Atenas, que vai ser o padrão daqui por diante.

(Pode copiar, nesse lugarzinho da página quanto menos a gente inventa, melhor.)

(3) Escalete o roteiro dia a dia

Separando as atrações por dia a gente tem a base do trabalho desta página. Nos destinos que já existam (como Buenos Aires e Montevidéu) eu vou te mandar uma escaletinha pré-feita. Mas fique à vontade para sugerir mudanças (você não acha melhor trazer a atração X do dia 3 pro dia 2 e levar a atração do dia 2 pro dia 3, depois da atração Z?).

(4) Organize as atrações em ordem alfabética

É meio dãh, mas uma hora precisa ser feito, e fazendo agora a gente já tem idéia do tamanho do trabalho.

(5) Quantos dias?

Com os roteiros escaletados, é hora de recomendar a permanência no destino. Aqui a gente sempre dá uma solução para o turista apressado (em Montevidéu pode ser até 1 dia, em Londres vai ser pelo menos 4 dias) e depois dá a permanência mínima ideal. Nos destinos já existentes (Buenos Aires, Montevidéu) eu vou te mandar a indicação de número de dias já consagrada no site.

(6) Fura-filas e passes de atrações

A partir dos roteiros dia a dia e da lista de atrações prontos, avalie as opções para facilitar a turistagem do leitor. O destino tem passe de atrações e ingressos fura-fila com hora marcada que valham a pena ser usados nos roteiros que estamos propondo?

(7) Tem hop-on hop-off?

Hop-on hop-off é batata: se a gente não põe no texto, chovem perguntas. Então em todo lugar em que haja o ônibus de dois andares, vale a pena criar um item pra comentar.

(8) Encomende os boxes de serviço

Com a lista de atrações, passes e hop-on hop-off feita, a Juliana pode te ajudar com o serviço. Mande a listinha dos itens que precisam de box de serviço com cópia pra mim e pra Elisa, e a gente pede pra Juliana. Ela já vai te entregar os boxes formatados. (Mesmo que a gente não recomende hop-on hop-off, precisa pôr o box.)

(9) Construa o menu inicial

Agora que a gente já sabe se vai ter itens de fura-filas e hop-on hop-off, dá pra fazer um primeiro rascunho de menu do alto, que vai embaixo da frase de introdução.

(10) Transfira o Menu Inicial e os itens Quantos dias, Passes e Hop-on hop-off para antes dos roteiros

Assim a página já vai começando a tomar o formato definitivo. Neste momento, teríamos o seguinte 'texto corrido', sem ainda as formatações de título:

(11) Recheie os roteiros dia a dia com texto

Pegue a lista de atrações selecionadas para cada dia e crie frases concisas que resumam a logística do dia. Não é preciso dar detalhes das atrações -- na hora de formatar, os nomes das atrações vão funcionar como links para os verbetes de cada um desses lugares na Lista de Atrações.

(12) Crie os verbetes das atrações

Em 1 ou 2 parágrafos, damos o contexto e dicas principais para aproveitar. Quando a atração é topzêra, a gente pode criar uma página especial para esta atração (falamos sobre isso quando acontecer). Mas mesmo nesses casos (de atração topzêra), a orientação atual é a gente tentar limitar o verbete a dois parágrafos + box de serviço. Um exemplo:

(13) A atração precisa de um 'Como chegar'?

Algumas atrações precisam de um parágrafo "Como chegar" (lugares fora de mão ou fora da cidade). Nesses casos, a gente põe um subtítulo e explica. Exemplo:

(14) Bora formatar?

Com todos os verbetes já concluídos, vamos à formatação.

(15) Ponha bullets no menu

Para não confundir item de menu com título de seção, vamos começar a formatação colocando bullets no menu -- assim ele fica já destacado no texto.

Selecione os itens do menu e clique no ícone de bullets no menu de formatação do alto.

Pronto, o menu já tem cara de menu.

(16) Formate os títulos e sua hierarquia

Lembra aqueles títulos e subtítulos que a gente evitou pôr em negrito? Chegou a hora de serem oficializados como títulos e organizados numa hierarquia.

Começando pelo alto: "Turislândia: o que fazer" é um título 2.

↑ Selecione o trecho do texto que vai ser formatado como título

↑ No menu drop-down de "Parágrafo", encontre o Título 2

↑ Voilà!

Os 5 itens que estão listados no menu (Quantos dias, Fura-filas, Hop-on hop-off, Roteiros e Atrações) são títulos 3.

↑ Cuidado para não selecionar uma linha do menu! Vá ao ponto em que a frase "Quantos dias em Turislândia" é título (e não item do menu)

↑ No mesmo menu drop-down do Parágrafo, encontre Título 3

↑ Feito!

Os sub-itens de "Roteiros dia a dia" (Dia 1, Dia 2, Dia 3, Mais dias) são títulos 4.

↑ Idem

↑ Ibidem

Os sub-itens de "Turislândia, atração por atração" (de Aquário Interativo a Vegantown) são títulos 4 também.

O sub-sub-item "Como ir de Turislândia à Serra do Like" (em Serra do Like) é um título 5.

Não usamos títulos acima de 5. Se houver novos sub-sub-sub-itens (como De ônibus, De carro e De Tour Organizado, em "Como ir de Turislândia à Serra do Like") usamos simplesmente negrito.

↑ Selecione o texto que vai virar negrito e clique no ícone B (bold) do menu do alto.

↑ CQD

(17) Crie os pontos de navegação interna

Tudo o que estiver formatado como Título 2, Título 3 e Título 4 vai ganhar um identificador para poder ganhar um link interno. (Não vamos usar link nos títulos 5.)

Para isso vamos usar o código de programação id="nome" em cada um dos títulos (em que "nome" muda a cada item).

Aqui somos obrigados a fazer uma manobrinha chata. Durante esta operação, vamos colocar a página em modo Texto. É só ir no canto esquerdo do menu do alto e clicar em Texto.

A página fica com esta cara:

Tudo o que a gente tinha formatado como 'Título' no modo visual aparece como <h> no modo texto.

<h2> é o que a gente marcou como Título 2

<h3> é o que a gente marcou como  Título 3

<h4> é o que a gente marcou como Título 4

<h5> é o que a gente marcou como Título 5

Agora é preciso entrar em cada um desses <h>'s e inserir um id="nome".

O "nome" do <h2> é sempre igual: "topo". Fica assim: <h2 id="topo">. Para inserir, é só posicionar o cursor entre o h2 e o colchete > e escrever o textinho id="topo". Há um espaço entre <h2 e id=, mas não pode haver espaço entre id="topo">.

Os outros "nomes" devem ser escolhidos de acordo com cada título. Todos esses nomes precisam ser diferentes entre si.

Para caçar todos os <h>'s, dá para acionar a busca interna da página (Ctrl F) e digitar <h (só assim, sem colocar número nem fechar o colchete). Todos os <h>'s (h2, h3, h4 e h5) vão se iluminar.

Esses são os "nomes" que escolhi. Com exceção de "topo", que é padrão, os outros você pode nomear como quiser.  Só precisam ser todos diferentes entre si, para que possam ser encontrados na navegação interna.

Não estou fechando os comandos (exemplo:

) para não criar esses pontos de navegação neste texto.

<h2 id="topo">Turislândia: o que fazer

<h3 id="dias">Quantos dias em Turislândia?

<h3 id="furafilas">Fura-filas e passes de atrações

<h3 id="hopon">Ônibus hop-on hop-off vale a pena?

<h3 id="roteiros">Roteiros práticos dia a dia

<h4 id="dia1">Dia 1

<h4 id="dia2">Dia 2

<h4 id="dia3">Dia 3

<h4 id="maisdias">Mais dias

<h3 id="atracoes">Turislândia, atração por atração

<h4 id="aquario">Aquário Interativo

<h4 id="bosque">Bosque Novo

<h4 id="catedral">Catedral Antiga

<h4 id="zuma">Centro de Difusão da Zuma

<h4 id="fabrica">Fábrica da Paçoquinha Amor;

<h4 id="galeria">Galeria Kardashian

<h4 id="jardim">Jardim Mouro;

<h4 id="mae">MAE (Museu de Arte Experimental)

<h4 id="memorial">Memorial da Cidade

<h4 id="mercado">Mercado de Santa Luzia;

<h4 id="mirante">Mirante da Praça Central;

<h4 id="cha">Museu do Chá

<h4 id="diamante">Museu do Diamante

<h4 id="ferroviario">Museu Ferroviário

<h4 id="novadamasco">Nova Damasco

<h4 id="boavista">Parque Boavista

<h4 id="aclimatacao">Parque da Aclimatação

<h4 id="pordosol">Pôr do sol no Sétimo Céu

<h4 id="esquerda">Rua Esquerda de Baixo

<h4 id="like">Serra do Like

<h4 id="vegantown">Vegantown

(18) Salve como rascunho e volte para o modo visual!

Ufa. Todos as marcações estranhas vão sumir.

(19) Crie os links internos.

Cada "nome" que a gente criou nos id's agora vai ser usado para criar os links internos. Graças a esses links internos, o leitor vai poder clicar em qualquer item do menu ou em qualquer atração citada nos roteiros e cair exatamente no lugar do texto em que o verbete está.

A gente vai nos menus e nos roteiros e, cada vez que um título ou verbete é citado, cria um link interno. Da seguinte maneira:

(1) Selecione o texto que vai ganhar o link

(2) Clique no ícone de criar link do menu do alto

(3) Escreva o "nome" daquele id="nome" precedido por uma hashtag (#) e sem aspas nem espaços. Como o id="nome" do item 'Quantos dias em Turislândia' é "dias", a gente constrói o link como #dias .

Os menus vão ficar com esta cara:

Os roteiros vão ficar com esta cara:

(20) Crie os links externos, se existirem

Nesta página só temos um, o Veja nosso guia de hospedagem (na seção "Quanto dias?").

Para pôr o link:

(1) Selecione o trecho do texto que vai receber o link ("guia de hospedagem em Turislândia").

(2) Clique no ícone de criar link no menu do alto.

(3) Copie/cole o link da página a ser linkada (no caso: https://www.viajenaviagem.com/destino/turislandia/onde-ficar-turislandia/ )

(4) Clique no ícone da engrenagenzinha, vai abrir um pop-up

(5) No pop-up, assinale a caixinha "Abrir em nova aba"

(6) Pronto, tá linkado.

(21) Crie os boxes amarelos

Algumas seções do texto são destacadas em boxes amarelos. Nas páginas O que fazer, é o caso da seção Roteiros.

Vamos criar boxes amarelos para as seções Dia 1, Dia 2, Dia 3 e Mais dias.

É superfácil. Vá até o ponto da página onde está o Dia 1. Na linha acima do título Dia 1, escreva:

abre colchete - box cor="destaque" - fecha colchete

(não posso escrever aqui senão crio o comando!)

Na linha abaixo do último item do roteiro dia 1, escreva:

abre colchete - /box - fecha colchete

(Não posso escrever aqui senão crio o comando)

Prontinho.

Agora repita nos dias 2, 3 e Mais dias.

Salve como rascunho!

Na versão publicada, o box de destaque vai aparecer assim:

(22) Insira os boxes de serviço

Copie/cole os boxes de serviço que vieram da Juliana em cada um dos verbetes da seção Atrações.

Caso queira saber como se cria um box de serviço, é assim:

Escreva todos os itens do serviço, um por linha.

Formate o nome da atração como um título 5

Selecione todo o texto abaixo do título (o título fica fora) e ponha bullets, usando o comando do menu do alto.

Crie as indentações (dsclp) da tabela usando o comando "aumentar a indentação" (dsclp) do menu do alto.

Coloque o link do site oficial. (Mesmo esqueminha descrito no passo 19)

Agora é só escrever, uma linha acima do título

abre colchete - box cor="servico" (sem cedilha) - fecha colchete

E, abaixo do último item

abre colchete - /box - fecha colchete

Na página publicada, vai aparecer assim:

(23) Insira os links internos de "voltar"

Em mais um esforço para facilitar a navegação do leitor, a gente insere links de "voltar".

Ao fim de cada seção do menu (neste caso: Quantos dias, Fura-filas, hop on hop off, Roteiros) a gente insere esta frase:

Voltar | Topo

O 'Voltar' está em negrito. O 'Topo' tem um link interno #topo, que na página que estamos fazendo leva ao título "Turislândia: o que fazer" do alto. (Se você clicar neste topo aí de cima, vai parar no alto deste post mesmo.)

A gente não insere este voltar ao fim da seção "Atrações", porque esta seção tem um "voltar" próprio. Ele deve ser inserido ao fim de cada atração, logo abaixo do box de serviço.

Voltar | Atrações A-Z | Topo

Esse 'Atrações A-Z' tem o link interno #atracoes, e o 'Topo', claro, o link #topo.

(24) Insira as fotos

Nessa fase você ainda não vai editar as fotos. Vai receber fotos tamanho 1920x1080 já editadas e nomeadas. Só vai precisar pôr cada foto no lugar certo.

Aí vai o passo a passo para inserir fotos:

(1) clique no ponto em que a foto vai ser inserida (logo abaixo do título!) e em seguida clique no comando "Adicionar mídia" no menu do alto.

(2) Vai abrir uma página para carregar a foto. Escolha "enviar arquivos" e "selecionar arquivos".

(3) Selecione a imagem da pasta em que você guardou.

(4) No campo "Texto alternativo" escreva uma descrição sucinta da foto. Pode ser o título do verbete ("Museu do Diamante Turislândia")

(5) No campo "Tamanho" (último do menu) selecione "Médio: 600 x 338"

Feito!

(25) Crie as legendas

Para colocar legendas nas fotos, basta usar o comando é só escrever legenda entre colchetes e depois fechar o comando na mesma linha:

(26) Me avise quando estiver pronto!

Daí eu vou criar a seção "A Bóia recomenda", inserir os mapas e preencher o campo de SEO. (No futuro você vai fazer isso também, mas por enquanto vamos ficar por aqui).

Vai por mim: na terceira ou quarta vez você já vai querer criar a página direto já com todas as marcações

Veja mais: