Como Criar Menu no WordPress

como criar menu no wordpress

Curso Completo

Olá pessoal tudo bem com vocês vão
sair para mais uma aula do nosso curso
de como criar um site com o WordPress e
o tema Astra e essa é uma aula bem
importante também porque eu vou ensinar
a como criar menos no WordPress e fazer
algumas customizações aí que o site a
África permite o tema astral Então vamos
lá vamos para o nosso painel do
WordPress aparência minozzo essa
configuração aqui ela é padrão no Word
presentão não importa qual o tema você
utiliza sempre vai ser a mesma forma de
criar menu no WordPress Tá bom então
vamos lá como nós fizemos a importação
de um site ele já tem aqui alguns menos
então ao selecione o menu para editar
tem aqui ó Fuller menu que é o menu do
rodapé e homem do que é o menu principal
Olá neste caso aqui nós vamos trabalhar
o menu principal e selecionar ele já vai
trazer aqui é os itens que tem nesse
menor então aqui olhando o nosso site
tem um e tem o home que é o único item
que tem no menu e depois tem um botão
que nós vamos configurar daqui a pouco
então vamos lá agora nós vamos criar o
menu igual nós tínhamos com o tema
anterior esse a página home aqui é a
página inicial você pode expandir sempre
lembrando pessoal que é muito importante
manter essas configurações só selecionar
o menu para editar menu principal Ok o
nome do menu não importa você pode
colocar o nome que você quiser por
exemplo eu vou substituir aqui menu por
menu principal esse apenas para o nosso
conto olho tá E aqui embaixo tem que
estar marcado o menu principal certo se
você deixar desmarcado você vai fazer
alterações aqui e não vai aparecer aqui
no menu principal então deixe-me
é feito essas configurações iniciais
clique em salvar menor certo então vamos
lá eu tenho aqui até agora somente Um
item que é home Mas eu não quero deixar
esse nome em inglês eu vou colocar em
português então você expande aqui e você
ao invés de home
e coloca início salvar menu atualizar o
site e pronto tenho início porque que
tem que ter início no menu porque se a
pessoa estiver aqui numa página interna
por exemplo ela está lendo este artigo
ela quer voltar para página inicial do
site tem aqui ó início ela vai clicar e
pronto vai voltar para página inicial Tá
então é sempre importante você ter aqui
um menu início só que aí você pode
colocar outros itens no seu menu então
aqui do lado a você sempre pode expandir
ou recuar tá os itens Então vamos lá que
eu vou apresentar cada opção páginas
você pode colocar no minuto qualquer
página que Nós criamos então aqui é o
páginas todas as páginas nós temos todas
essas certo então você pode inserir no
menu o que você quiser por exemplo vamos
manter início Vamos colocar a todos os
cursos você seleciona e clica em
adicionar ao menu e pronto vamos
em contato com você pode selecionar mais
de uma tão contato quem somos blog e
adicionar ao menor e agora você pode
reorganizar então início todos os cursos
é vamos colocar aqui quem somos
e depois blog e por último contato e
então salvar o menu
a e agora atualizando Pronto já fizemos
aqui em cima o nosso menu uma pessoa
está no início se ela clicar em todos os
cursos vai ser direcionado para a página
todos os cursos página quem somos página
blog ou a página blog Ela já tem o
design do tema que nós importamos estão
aqui bonito que fica os artigos lá olha
que os artigos expostos que nós
publicamos ó como criar um curso online
WordPress então a página blog e já ficou
bem legal né ficou com formato bem legal
e temos também a página contato que é
aqui Nós criamos na mas o nosso tema tem
uma página contato bem mais bonita Então
vamos lá organizar isso também essa
página contato nós vamos tirar remover e
a página Quem Somos Nós vamos remover
também então salvar menu nosso menu
ficou somente assim ó
no início todos os cursos e blog agora
vamos na páginas todas as páginas e
vamos remover a nossa página contato EA
nossa página quem somos Vamos mandar
para a lixeira por quê Porque quando nós
fizemos a importação do tema nós
importamos essas duas aqui são bem
melhores né são são mais bonitas vamos
apenas fazer a tradução dessas páginas
tão about meu edição rápida e vamos
traduzir para quem somos você copia isso
daqui e coloca aqui também colar e deixa
igual atualizar
nós vamos fazer a mesma coisa com
contact edição rápido
o contato aí você copia e deixa igual
aqui embaixo depois eu vou explicar
melhor o que quer Slug link permanente
tudo isso tá bom essa página home
Podemos até traduzir também para início
ó e aqui no Slug
o início
e é atualizar
Tá certo agora vamos parar aparência
menu e vamos colocar novamente então o
páginas ver tudo e agora sim a contato
EA quem somos adicionar porque essas são
as páginas né as mais bonitas Então
vamos lá início todos os cursos blog
início todos os cursos quem somos blog e
contato salvar menu
a e agora vindo para página inicial como
ficou o início todos os cursos que nós
vamos desenvolver a página quem somos ó
e já bem mais bonita né do que a padrão
do nosso WordPress a página blog que
está bem legal também e a página contato
que também já é bem legal bem
profissional que já veio com a
importação do tema tá bom então o nosso
menu padrão já ficou bem legal no
entanto eu vou explicar aqui tudo que é
possível fazer com o menu já deixamos
aqui as páginas mas caso você queira
colocar no menu postes você também pode
então é o sol é WordPress alcançar 15
milhões de usuários tem o nosso poço e
seleciono adicionar e Pronto coloquei
salvar menu atualizar o site está aqui ó
só que é claro que vocês vão vendo que
já não vai fazer sentido né não faz
sentido você colocar aqui no menu esse
artigo Tá mas é uma opção caso você
queira fazer quero
o item vem aqui expandir e remover e
pronto já não tem mais certo então aqui
nós colocamos páginas postites você pode
colocar categorias também mas isso o
deixa mais para frente na quando a
Explicar sobre categorias você pode
colocar links personalizados por exemplo
você quer colocar uma página com o
endereço específico né que não está
exatamente no seu site por exemplo eu
vou colocar aqui Google
o site do Google e aí aqui eu vou
colocar o endereço do Google como eu
disse sempre copia o endereço daqui
porque ele já vem com o protocolo
correto http é se você não coloca o
endereço completo não funciona tá então
adicionar ao menu vou deixar ali no fim
mesmo e salvar menu e agora atualizando
o site olha o que aconteceu eu tenho as
minhas páginas da internas do site e tem
um item aqui ó site do Google a pessoa
clica e vai para o Google tá bom Há
muitos motivos para você querer fazer
isso por exemplo se você for vender um
produto da hotmart no seu site Você não
vai colocar um link aqui do site do
Google mas você vai colocar o link do
check-out né da hotmart Então você
coloca aqui ó hotmart
o produto na hotmart produto na hotmart
aí aqui você coloca o link na de ser o
link de afiliado por exemplo E aí você
salvar menu
Oi e aí aqui no seu site olhe no menu
vai ter produto da hotmart a pessoa
clica efetua a compra tá só um exemplo
isso que eu dei tá legal Então essas são
as opções é padrão que você pode colocar
no seu menu WordPress Beleza ainda
existem outras opções pessoal então a
vocês podem clicar aqui há opções de
tela e colocar aqui ó por exemplo
destino do link E aí aqui ó por exemplo
esse produtos da hotmart eu posso
colocar Abrir link em nova aba porque é
um link externo então salvar menu Eu
apenas vou substituir aqui ó produto da
hotmart ao invés de Google vou colocar
hotmart mesmo
o hotmart.com salvar menu e agora
atualiza o site agora se a pessoa clicar
aqui ó em quem somos fica na mesma
janela mas ela clicar em produtos da
hotmart eu abrir em outra janela e assim
o usuário não sai do meu site Tá bom
então esse é o recurso de abrir em uma
nova aba que você habilitou aqui no
opções de tela destino do link certo
então é isso aí pessoal esse essa é a
configuração padrão para qualquer site
WordPress mas o tema a África também tem
esse recurso a muito legal de você
colocar o botão aqui no menu Então vamos
lá para o nosso painel aparência
personalizar no porque é uma
configuração própria do nosso tema vou
até opção menu principal e olha só tem
aqui é o último item do menu ele é um
botão caso você não queira você vem aqui
coloca nenhum
Oi e pronto isso daqui também pessoal
quando vocês fazem uma alteração aqui e
querem visualizar vocês podem clicar
aqui ó esconder controle e pronto
visualiza é melhor tá Então olha o que
que eu fiz eu retirei aquele botão que
tinha mas eu vou manter o botão porque é
um recurso bem legal então botão certo
que só que esse nome incluir lá não tem
nada a ver com meu projeto então eu
posso colocar aqui por exemplo como esse
daqui vai ser um site de cursos eu vou
colocar um botão ali chamado
ao acessar e o link do botão vai ser uma
página interna chamada acessar mas essa
página ainda não existe então a gente
deixa esse sinal aqui ó de hashtag né de
sustenido de hash pode chamar aí como
você quiser nós deixamos esse sinalzinho
aqui de jogo da velha também o pessoal
chama quando você ainda não tem o
endereço definido Então nesse caso a
página não existe mas ela é um link
então eu deixo apenas aqui #a que eu
escolho se eu quero abrir ou não em
outra aba eu vou deixar aqui não porque
será uma página interna do meu próprio
site Então vai abrir no mesmo site certo
publicar atualiza o meu site e pronto
agora já tem um botão aqui chamado
acessar que provavelmente vai levar para
uma forma onde a pessoa vai poder
assistir os cursos Ok mas ainda tem
algumas outras configurações aqui também
depende do tema vamos ver como funciona
aqui no Astra ó vamos voltar para cá
e até opção cabeçalho transparente essa
parte de logo aqui é mais específica eu
vou falar depois mas olha só temos aqui
cores e fundo lembrando o pessoal que o
tema Astra ó vou voltar ai eu acabei
saindo eu vou voltar o tema Astra ele
tem cabeçalho a transparência Mas ele
também tem o cabeçalho normal por
exemplo abrir aqui um artigo ou esse
cabeçalho já não é mais transparente
então toda configuração que você fizer
em cabeçalho você tem que saber se você
está alterando o cabeçalho transparente
ou cabeçalho principal beleza nessa
nossa página o cabeçalho é transparente
Então eu tenho que vir nessa parte e
aqui eu vou ter algumas configurações
isso daqui são coisas mais específicas
mas no momento eu já vou passar para
vocês tudo aqui ó que é cores e fundo
então Ó o nosso site nosso menu né ele
já tem algumas coisas vamos fazer uma
algumas alterações então aqui o fundo eu
posso colocar a uma cor é a
e por exemplo e Ó ficou esse azul bem
claro vermelho então é caso você queira
mudar tá vamos ver aqui colocar aqui ó
ainda limpar
Oi e aí ele volta para porque era padrão
sem nenhuma cor então você pode até
mesmo regular o cá vou colocar aqui algo
um pouco mais escuro Opa fundo cor Vou
colocar aqui ó preto e vou deixar aqui
você vai regular o a transparência tá
então você quero deixar não tão
transparente quero deixar assim ó só
recolher tá vendo Então ele continua um
pouco transparentes mas nem tanto então
esses aqui você vai alterar de acordo aí
com a sua preferência e você pode
colocar a cor também o nesse caso esse
azul vamos ver se ficou legal ó né então
dá um dá uma diferença aí aí vai de
acordo com o que você quer Eu achei até
legal assim esse azul vou manter desse
jeito tá bom então aqui você vai mudar a
cor de fundo título do site Não adianta
mudar porque não está aparecendo aqui
como eu disse isso daqui não é o título
não é um texto é um
hoje eu vou falar isso na aula de logo
então aqui não temos como mudar nada em
título menu editar o menu Então vamos lá
o cor do link e a cor do link está esse
esse Branco esse cinza Mas se você
quiser mudar a que você também pode
acordo o link vermelho eu vou deixar bem
colorido aqui só para vocês verem Tá mas
é claro que está ficando feio desse
jeito então ó deixei agora o meu link
com a cor vermelha tá bom
a cor de fundo olha só a cor de fundo
aqui não é de todo o menor Onde está
Transparente é a cor de fundo somente
Dominou a cor de fundo roxo Então
somente o menino ficou com a cor de
fundo roxa certo
e já que você vai escolher também a cor
de fundo e acordo do link quando a gente
coloca o mouse em cima então ó quando eu
coloco Mouse o meu link fica azul Mas eu
posso alterar aqui também eu posso
colocar por exemplo Verde vamos publicar
aqui para ver tudo de uma vez só
atualiza tão ao tudo que eu mudei e
quando eu coloco o mouse e fica verde
mas como o fundo é roxo não dá nem para
ver direito que é verde tá então quero
mais vamos fazer assim então eu vou
colocar Preto aqui e ó coloca o mouse e
agora fica preta tá então esse último
item que você configura é a cor do link
quando você coloca o mouse em cima certo
ó e aqui submenu e conteúdo eu ainda não
mostrei porque não será necessário aqui
Futuramente eu gosto até porque essa
aula já ficou bem longa tá mas aí
submenu e conteúdo é quando nós vamos
trabalhar com menu drop-down nós vamos
deixar isso para uma próxima aula quem
sabe até na próxima nós já fazemos isso
então beleza então por enquanto é isso é
claro que agora eu vou mudar as cores
aqui vou deixar cores mais bonitas então
vocês aí já vão fazer isso tá vão deixar
o menu de acordo com as cores aí do seu
projeto Então é isso Pessoal espero que
vocês estejam gostando deixe nos
comentários aí a opinião de vocês sobre
esse curso um grande abraço e até a
próxima tchau

Quer conversar sobre WordPress com outros membros?

Acesse nosso Fórum de Discussão.

Seja o primeiro a avaliar essa aula.

Por favor, entre na sua conta para deixar sua avaliação.
Adicionar aos favoritos
WORDPRESS DEFINITIVO PRO (1) (1)