Seja bem vindo a nossa plataforma. Veja agora como começar:

1. Entendendo o Painel administrativo
2. Definindo nome e descrição do site
3. Entendendo as opções do tema
4. Trabalhando com um css próprio
5. Inserindo o logotipo da sua empresa
6. Alterando as cores do site
7. Entendendo o conceito de Página
8. Trabalhando com os menus
9. Como utilizar o visual composer
10. Gerenciando o motor de pesquisa de viagem
11. Trabalhando com ofertas
    1. Cadastrando novas ofertas
    2. Exibindo ofertas em uma página

Entenda como cadastrar suas credências para começar a utilizar o nosso motor de pesquisa

1. Cadastrando uma credencial de Hotel
2. Cadastrando uma credencial de Aéreo

» No menu principal, clique em “Configurações”
» Em seguida Clique em “Geral”

Em “Configurações Gerais“:

• No campo “Título do site” digite o título do site. Essa informação será exibida como título da página ou aba no navegador do visitante.
• No campo “Descrição” Escreva a descrição do seu site conforme deseja que apareça no google e outros mecânicos de pesquisa. Essa informação não será apresentada em nenhuma área do site

Os demais campos são para uso avançado e serão explicadas mais a frente

A configuração do logotipo fica localizada nas configurações do tema junto com a maior parte das configurações visuais que você vai utilizar para administrar seu site.

» No menu principal, clique em “Design”
» Em seguida Clique em “Opções do tema”

Na página Theme Options:

» Clique em “Cabeçalho do site”
» Em seguida Clique em “Logotipo”

Em “Logotipo“:

• No campo “Logotipo” clique no botão laranja  “+ ” para abrir a ferramenta de upload de imagens e enviar o logotipo da sua empresa. Os formatos aceitos são: JPG, JPEG, PNG, GIF. O site não limita o tamanho padrão das imagens, para evitar imagens pesadas, envie o arquivo no tamanho que deseja que ele apreça no site. Veja aqui como utilizar o gerenciador de imagens do wordpress 
• Você pode utilizar os campos “Largura do Logotipo” e “Margem do Logotipo” para posicionar corretamente o seu logotipo e o campo “Endereço da Página inicial do site”  para alterar o link da home page do site redirecionando o usuário para outro endereço quando clicar no logotipo.
• Clique em “Salvar” no topo ou no rodapé da página

Experimente outras configurações do cabeçalho para entender como elas afetam o seu layout. Por exemplo, caso a altura do logotipo seja maior do que a altura do seu cabeçalho, va até a aba “Cabeçalho” e aumente a opção “Altura”.

Para um setup básico de layout, temos algumas propriedades que alteram o layout inteiro de forma simples e rápida para adaptar-se a identidade visual da sua empresa.

A maioria dos elementos continuará respeitando a diagramação e o layout padrão mas seguindo as cores que você determinar.

» No menu principal, clique em “Design”
» Em seguida Clique em “Opções do tema”

Na página “Theme Options”, em “Geral”:

Todas as alterações afetarão algumas áreas especificas do site que também podem ser modificadas individualmente através de suas respectivas abas dentro das “opções do tema”.

• No campo “Cor primária do site”, clique para alterar a cor principal do site. Altera:
  • Cor de fundo do menu principal
  • Cor de fundo do rodapé
  • Cor de “meus pedidos”
  • Títulos principais e dos filtros da tela de resultado de busca
  • Alguns ícones
• No campo “Cor secundária do site”, clique para alterar a cor secundária do site. Altera:
  • Cor de fundo da barra no topo do site (menu do cliente)
  • Botão “Refazer Pesquisa”
  • Cor de destaque das opções de “melhor preço encontrado” nas telas de resultado
  • Alguns ícones
• No campo “Cor terciaria do site”, clique para alterar a cor terciaria do site. Altera:
  • Cor do preço e dos botões “comprar” e “selecionar nas telas de resultado
• Clique em “Salvar” no topo ou no rodapé da página

Você pode utilizar a mesma cor como primária, secundária e terciária caso queira um layout com poucas cores, basta repetir a mesma cor em todas as opções, ou em duas delas se for o caso.

Experimente outras configurações das “opções do tema” para entender como elas afetam o seu layout. Por exemplo, a opção “Fonte principal” permite customizar a fonte, a cor e outras opções do texts padrão do site.

A opção “Cor ou imagem de fundo” permite mudar a cor de fundo do site inteiro, ou adicionar uma imagem de fundo. Só tenha certeza que a cor da opção “Fonte Principal” escolhida seja adequada para a cor do fundo para permitir a leitura.

Uma “Posição no Tema” é a área do site onde um “menu” será exibido

Um “Menu” é um conjunto de links que você deve associar a uma “Posição no Tema” para decidir onde exibi-lo

Sendo assim, um mesmo “menu” pode ser exibido diversas vezes apenas mudando a “Posição no Tema”, e do mesmo jeito você pode mudar um “menu” inteiro de lugar sem precisar montar a estrutura novamente

Todas as instalações padrão do TravelGo possuem duas áreas de menu pré-configuradas: O “Menu Principal”, e o “Menu do Topo”.  Ambos já virão com menu de mesmo nome estruturado com algumas páginas que foram criadas automaticamente durante a configuração da sua conta.

As alterações no menu são divididas em duas partes: Conteúdo e Design, e ficam localizadas em áreas diferentes do painel administrativo:

Trabalhando com o conteúdo de um menu

» No menu principal, clique em “Design”
» Em seguida Clique em “Menu”

Nessa área você encontrará todos os menus que ja existem no seu site e poderá editá-los. Também é possível  criar outros menus, você vai encontrar uma explicação detalhada sobre como criar menus no site do wordpress

Na aba “Editar menu”

Na opção “Selecione um menu para editar” o campo listará todos os menus que foram criados no seu site.  Na instalação padrão você encontrará as opções “Menu Principal”, e o “Menu do Topo”. Escolha com qual menu deseja trabalhar

O conteúdo do menu é composto por links estruturados. Você pode criar links para qualquer página, post ou categoria dentro do seu wordpress, marcando no painel esquerdo as opções que deseja e clicando em “Adicionar ao menu”.

Para outros tipos de conteúdo você pode utilizar qualquer tipo de link, e incluir o título manualmente. Para isso utiliza a opção “Links personalizados” na listagem da esquerda.

No painel direito “Estrutura do Menu” é possível reordená-las, arrastando para a posição desejada, inclusive hierarquicamente.

Atribuindo um menu a uma “Posição no tema”

Marcando a opção “Adicionar páginas automaticamente”, as novas paginas que forem criadas com nível hierárquico superior serão adicionadas ao menu automaticamente.

Na área “Posições no Tema” você verá todas as “Posições no Tema” disponíveis. Escolha aquela que o seu menu deverá ocupar.

Trabalhando com o visual de um menu

» No menu principal, clique em “Design”
» Em seguida Clique em “Opções do tema”

Na página Theme Options:

» Clique em “Menu principal”

Entre muitas funcionalidades, você pode escolher a posição do menu, se ele vai ficar ao lado do logotipo, abaixo ou e se vai ocupar a tela inteira. O alinhamento dos links, se serão centralizado, lado direito, ou do lado esquerdo. Cores, tamanhos, bordas e muitas outras configurações. Explore essa tela para descobrir todo o potencial da ferramenta e deixar o menu do site com a sua cara.

Trabalhando com o “Menu do Topo”

As configurações visuais do “menu do topo” também ficam nas “Opções do tema”

» No menu principal, clique em “Design”
» Em seguida Clique em “Opções do tema”

Na página Theme Options:

» Clique em “Cabeçalho”
» Em seguida clique em “Menu do topo”

Esse menu possui características mais simples e portanto menos opções de configuração.

A exibição de ofertas do TravelGo é feita através de grupos de ofertas que são filtrados por muitos níveis. O primeiro dele é por “Tipo de Produto”.

Para começar a criar um bloco de oferta:

Dentro da página que você deseja trabalhar e com o “editor padrão” ativado, divida o layout em linhas e colunas da forma que deseja exibir os grupos de promoção.

» Escolha uma coluna e clique no sinal “+” para adicionar um grupo de ofertas

Para esse exemplo, vamos usar uma “oferta de voo” que possui algumas peculiaridades com relação aos outros produtos.

Na aba “Listagem” você pode definir alguns critérios ou filtros para determinar quais promoções você deseja exibir.
A maioria dos filtros possui uma pequena descrição de como funcionam para ajudar a compreender a ferramenta como na imagem abaixo:

Pontos importantes:

Na aba “Layout da oferta”

– A opção “Padrão de cores” define o nível de detalhes que você deseja configurar na sua oferta

– A opção “Diagramação do Grupo de Ofertas” determina se as promoções serão exibidas uma ao lado da outra ou uma abaixo da outra. Essa opção é importante pois setando as promoções como “Horizontal – Um ao lado do outro” você pode criar uma linha de promoções com os mesmos parâmetros sem precisar criar varias promoções e organiza-las em colunas

– O campo “Ordem” altera a ordem do html das ofertas permitindo que você mude alguns itens de posição. Isso pode facilitar muito a diagramação.

Na aba “Imagem da oferta”

– Você pode definir o alinhamento da imagem, largura e margens

Na aba “Texto”

– Algumas opções de configuração são formadas por um conjunto de itens que devem ser trabalhados em grupo. Por exemplo as opções de tipografia.
No campo “Tag” você deve escolher como o html será formado: Usando o html padrão definido pela nossa equipe de acordo com a hierarquia do código. Ou você pode escolher uma tag de sua preferencia entre as principais tags existentes. Ou ainda, escolher uma opção de “Texto adicional”.
As opções de texto adicional são definidas:

» No menu principal, clique em “Design”
» Em seguida Clique em “Opções do tema”
» Clique no menu “Textos”
» Clique na aba “Textos adicionais”

Você encontrará 10 opções de texto que podem ser customizadas e utilizadas nas ofertas ou em outras funcionalidades do “Visual Composer”

Na aba “Preço”

– Na opção “Agrupar Chamada e preço em uma ‘div'” altera o html para que o html seja exibindo dentro da mesma div, ou individualmente permitindo mais controle na hora de customizar o visual do preço das ofertas.

– Você também pode configurar a exibição das chamadas de preço, do próprio preço e toda a tipografia.

Para ofertas de aéreo

Para ofertas do tipo “Ofertas de voo” também existe a opção múltiplas ofertas.

Caso a oferta que você cadastrou tenha mais de uma localização, você poderá ajustar o visual da listagem de preços e localizações através desse painel. Caso a oferta escolhida não seja uma oferta múltipla, as alterações dessa aba não afetarão o layout.

Oferta Básica

Esse tipo de oferta foi criado para os clientes que desejam criar seu próprio css. Dessa forma, somente o html da oferta é gerado e você pode customiza-lo utilizando o campo “Classe Extra (Para Desenvolvedores)”.

A quantidade de opções disponíveis para esse tipo de oferta é bem menor já que não possui ajustes de cor e tipografia, mas também é bastante completa:

– Na aba “Listagens das promoções”
Essa aba é exatamente igual a das promoções anteriores onde você define os filtros para a listagem das promoções.

– Na aba “Layout da oferta”
Reúne todas as customizações de html dos outros tipos de ofertas em uma única aba.

Você pode inserir seu próprio CSS conforme explicado no artigo “Trabalhando com um css próprio”

Como o Visual Composer funciona e o que ele pode fazer?

Como já vem ativo em todas as instalações do TravelGo, basta criar uma página para começar a utilizá-lo (veja aqui como criar uma nova página). Quando criar uma nova página, ela deverá ser bem parecida com a imagem a seguir:

Caso a sua página não exiba as opções do visual composer, clique no botão “Editor visual padrão” para ativa-lo conforme imagem abaixo.

A partir daqui, as possibilidades são praticamente ilimitadas! Você pode adicionar linhas, colunas, botões, textos. imagens e muito mais, utilizando todas as opções do Visual Composer. Além disso, há também a opção de salvar seus layouts como modelos para que sejam reutilizados depois!

Navegação e controles do “Visual composer”

Antes de começar a utilizar realmente o seu editor visual, é importante entender melhor como ele funciona, e como a hierarquia dos elementos da página deve ser trabalhada.

Quando ativo, o “Visual composer” se resume a area chamada de “Editor Visual”. Veja na imagem a seguir como utilizar cada nível de controle

1 – Nível externo – Todas as alterações feitas nessa área afetam todo o “Editor Visual”. Você pode utilizar o botão “+” nessa área para inserir um novo componente  na página. O componente será sempre adicionado ao final da página e você pode arrasta-lo para a sua área de interesse.

2 – Nível da linha – Todas as alterações feitas aqui, afetam toda a “Linha”, as colunas e os componentes dentro dela. Por exemplo, clicando no botão “Lápis” você pode escolher a cor de fundo, e margem para a “Linha”, essas configurações serão aplicadas em toda a “Linha”. O botão “Lixeira” exclui a “Linha” e todas as linhas e componentes dentro dela. Clicando no botão “+”  você pode adicionar um novo componente diretamente dentro da linha.

3 – Nível de coluna – As alterações feitas aqui afetam todas as “Linha” e os componentes que estiverem dentro dela. O botão “Lixeira” exclui a coluna e todas as linhas e componentes dentro dela. Clicando no botão “+”  você pode adicionar um novo componente diretamente dentro da coluna.

4 – Nível de componente – Todas as alterações feitas aqui alteram somente o componente atual

5 – Botão adicionar – Adiciona novos componentes a página, sempre no final dela

Trabalhando com “linhas”

A base do visual composer são as “linha”. Linhas servem para diagramar sua página e montar a estrutura onde cada parte do conteúdo será exibida.

– Para criar a sua primeira linha clique no botão azul “Adicionar elemento”. Caso já existam outros elementos na tela, você pode inserir uma nova linha clicando no sinal “+” no topo da área “Editor Visual”

– “Linhas” podem ser dividas em colunas criando células pequenas na mesma “linha”, exatamente como em uma planilha do excel. Basta passar o mouse sobre o ícone no canto superior esquerdo da “linha” e selecione quantas e quais os tamanhos das linhas que deseja criar.

– Você por criar “Linhas” dentro de “Linhas”, mas são permitidos somente dois níveis. Sendo assim, você pode criar uma “linha” com duas colunas, e dentro de cada coluna colocar outras “Linhas” com outro número de colunas, por isso as possibilidades de diagramação são infinitas!

Elementos da página

O próximo passo é começar a adicionar recursos a sua página. Basta clicar no botão “Adicionar Elemento” para abrir um painel com todos os componentes disponíveis. Há diversas opções para adicionar, caixas de texto, títulos, compartilhamento social, imagens, galerias, acordeões, posts antigos (que também funcionam com ofertas e destinos que você cadastrou, além dos posts de blogs), botões e até mesmo menus e widgets da barra lateral.

Clique em qualquer elemento para abrir as opções disponíveis, que variam da escolha de cores e alinhamentos, slides de transições ou categorias recentes de posts.

Arraste e solte

Em qualquer ponto do processo de personalização, você pode arrastar e soltar qualquer elemento da linha ou da página para reorganizá-los. É possível editar qualquer elemento e qualquer conteúdo de forma rápida e fácil e também excluí-lo.

Depois de criar um layout que você amou, é possível salvá-lo como um modelo. Basta clicar no botão “Modelos”, escolher o seu layout, nomear e pronto, só salvar! Quando você usa um modelo, sua página é preenchida automaticamente com o layout que você salvou.

Para cadastrar uma nova Oferta

Para esse exemplo usaremos uma oferta de Hotel

» No menu principal, posicione o mouse sobre o tipo de oferta que deseja criar
» Clique em “Adicionar Novo”

A tela seguinte deverá ser parecida com a imagem abaixo e será explicada em seguida:

1. Digite o título aqui: Como o campo sugere, se refere ao título interno da oferta. Esse título não será exibido para o usuário e pode ser usado como um identificador interno para classificar as promoções. É importante para sites que tem grande volumes de ofertas.
   Esse campo é obrigatório.
   Ex.: “SKU 012345” ou “Hotel São Paulo Janeiro”
2. Título da Oferta: Se refere ao título da oferta que será exibido para o cliente.
   Este campo não é obrigatório.
   Ex.: “Hotéis maravilhosos em São Paulo”, “Tudo incluso em Imperdível em São Paulo”
3. Descrição: Campo para um texto personalizado que será exibido junto com a oferta, pode ser usado para qualquer informação adicional que você precisar exibir
   Este campo não é obrigatório.
   Ex.: “Preço por diária” ou “oferta imperdível” 
4. Chamada para o preço: Texto que acompanha o preço
   Este campo não é obrigatório.
   Ex.: “A partir de” ou “Apenas”  ou “6 vezes de”
5. Preço: O Valor do produto ofertado
   Este campo não é obrigatório.
   Ex.: “R$ 100,00” ou “2 x R$50,00” ou “Confira”
6. Link: O link para a oferta. Pode ser qualquer tipo de link, dentro ou fora do site. O Mais usual é criar o link direto para a página do resultado com os parâmetros da promoção configurados.
   » Para isso, abra o motor de pesquisa do site. O seu TravelGo padrão, já virá com o motor de pesquisa configurado na home page com todos os produtos, escolha o mesmo produto que você está criando a promoção, no caso desse exemplo será “Hotel”
   » Preencha o Motor com os mesmos parâmetros que você deseja descrever na promoção.
   Por exemplo: Para uma promoção de “Hotéis maravilhosos em São Paulo” coloque no campo “Destino” a cidade de São Paulo. Preencha com uma data dentro do período da promoção, demais critérios que você deseje utilizar e clique em “Buscar”.
   » A tela de resultados da sua pesquisa será a tela que o visitante deverá encontrar quando clicar na sua oferta. Então basta copiar o link dessa página e coloca-lo no campo “Link” da sua promoção.
   Este campo é obrigatório.
   Ex.: “http://seu_site/transacional/masterpricer?SearchType=Hotel&Location=Campos%20do%20Jordao%20&LocationId=252567&CheckIn=14/6/2016&CheckOut=21/6/2016&Rooms=1&Adults=1&Children=0&ChildAges=&HotelName=”
7. Campo Extra: Um campo para trabalhar textos ou códigos html adicionais. 
   Este campo não é obrigatório.
   Ex.: Pode ser usado para criar um botão “Confira” ou “Veja Mais”
8. Tipo de viagem: Determine se sua oferta será nacional ou internacional. É possível selecionar as duas opções.
   Este campo não é obrigatório. Caso não selecione nenhuma opção, a oferta será exibida tanto em blocos nacionais quanto internacionais
   Ex.: Pode ser usado para criar um bloco com todas as ofertas nacionais em sua página
9. Localidades: Funcionam como categorias, elas são hierárquicas, ou seja, você pode inserir uma cidade abaixo de um país, um país abaixo de um continente, ou qualquer outra divisão que funcionar para o seu negócio.
   Este campo não é obrigatório.
   Ex.: Pode ser usado para criar um bloco com todas ofertas de uma determinada região, por exemplo “Europa” ou “Argentina”, ou “São Paulo”
10. Perfis de viagem: Também funcionam como as categorias e também são Hierárquicos.
    Este campo não é obrigatório.
    Ex.: Pode ser usado para criar um bloco com todas ofertas de um mesmo perfil, como “Praias” ou “Neve”, ou “Românticas”
11. Imagem destacada: a foto que você deseja exibir na sua oferta.
    Este campo não é obrigatório. 

Inserindo o motor de viagem na sua página

O motor de pesquisa do Travel go pode ser inserido em qualquer posição dentro de qualquer página do seu site, isso inclui a Home principal, home de produto, destinos ou landing pages. Observe que somente dentro das páginas, não é possível inserir no cabeçalho, rodapé ou tão pouco dentro de uma oferta.

» Crie ou edite uma “Página” no seu TravelGo (Veja aqui como trabalhar com páginas)
» Crie ou edite as “linhas” e colunas necessárias para posicionar seu motor no lugar certo (veja aqui como trabalhar com linhas e colunas no Visual Composer)
» Clique no sinal “+” dentro da célula onde quer exibir o seu motor
» Na aba “Travelgo” clique em “Motor de viagem”

Uma tela como essa será exibida:

Basta escolher as configurações que deseja trabalhar em cada tipo de motor