Como criar um portfólio em WordPress #9 – Página inicial, Blog e Menu
Articles Blog

Como criar um portfólio em WordPress #9 – Página inicial, Blog e Menu

August 23, 2019


Olá gente!
Sejam bem-vindos a mais uma vídeo-aula do canal Clube do Design.
Aqui quem fala, é Liute Cristian. E, estamos de volta com mais um vídeo da série:
Como criar o seu portfólio em WordPress. No último vídeo, eu mostrei para vocês o painel de
opções do Workality. E hoje, nós vamos criar a nossa página inicial, que é a página que vai
aparecer na cara do seu blog, quando as pessoas acessarem ele diretamente.
É importante lembrar que as opções de cada tema variam muito, de acordo com cada tema. O
Workality é um tema básico, é um tema grátis. Então, as opções são bem simples e bem fácil de
aprender. Mas, claro que isso não é regra para todo tema. Alguns são bem complicados, bem
difíceis e até utilizam plug-ins, que são como aplicativos, para que eles funcionem
corretamente. A gente vai ver isso de plug-ins, mais na frente.
Depois de configurar o seu logotipo, as configurações iniciais do seu tema, nós vamos
criar a nossa página inicial. Por enquanto, a sua página inicial está feiona, não está nada parecida
com a que eu estou mostrando aqui. Isso aqui, porque eu já tenho tudo configurado e tudo
criado. É o que você vão fazer agora. Voltando para o painel do Workality, você vai
procurar aqui no painel lateral, o menu Páginas, e clique na opção Páginas. Ele vai abrir um painel,
onde ele exibe todas as páginas estáticas, criadas no seu site. Existe uma diferença entre
páginas e posts de blog. As páginas podem ser utilizadas para criar um formulário de contato, por
exemplo, a página inicial do seu blog. Você pode utilizar na verdade, as páginas de uma maneira
muito diferente de um post de blog. Você tem muito mais versatilidade para controlar
os resultados de página. Alguns temas mais avançados, permitem inclusive, que você coloque
slides, divida em colunas, coloque botões, gráficos animados, utilizando justamente as
páginas. O Workality, oferece poucos recursos de páginas, mas são suficientes para que o seu
portfólio funcione perfeitamente, igual a gente viu na demonstração.
Então, acessando aqui a parte de páginas, eu já tenho aqui a minha página inicial e uma página de
blog. E também, tem uma página Sobre, que eu vou mostrar só depois. Você só tem uma página
de exemplo, então, para a gente ficar todo mundo igual, eu vou apagar todo mundo aqui. Clicando
aqui, selecionando todo mundo, mandando essa galera de páginas, todas para a lixeira, para todo
mundo ficar igualzinho. Depois, na lixeira, aqui em Lixos, eu vou acessar novamente o Lixo, e vou
excluir todas as páginas do lixo também. Por que eu vou excluir? Porque eu vou precisar da URL
que essa página já tem. Então, se eu mantê-la na lixeira, eu não conseguir usar por exemplo, o
mesmo URL que ela estava usando, que seria: aftereffects.blog/home ou /início por exemplo.
Então, apago elas, e depois apago da lixeira. Voltando aqui em cima, eu vou clicar no botão
Adicionar Nova. Nós vamos criar a página inicial do nosso blog, que é essa página aqui que eu
não vou nem mexer, porque nem existe mais. Se eu for atualizar, vai eliminar a minha
configuração. Pronto! Depois, eu vou colocar aqui: Página inicial. Você pode escrever só:
Home, você pode escrever o que você quiser, no título da sua página.
Você não precisa colocar conteúdo nenhum. Pode deixar vazio, porque o Workality já tem um
tema padrão. E, você vai modificar aqui embaixo, nos atributos de página, onde você tem a opção
modelo, você configura para Works. Ele vai exibir neste caso, todos os trabalhos do seu portfólio,
na sua página inicial, utilizando o modelo Works. É interessante no construtor de páginas, nesse
caso, no construtor padrão do WordPress, você tem aqui em cima, opções de tela, que permite a
você, marcar algumas opções que podem ser exibidas dentro do seu construtor. Essas opções
quando marcadas, são exibidas aqui embaixo. Por exemplo, você pode escrever um resumo da
página, que é utilizado por alguns temas. Você pode utilizar campos personalizados, que ainda
não uso isso, porque não sei muito bem para que serve. Você pode permitir ou não, os
comentários na página. Eu vou desmarcar, porque é uma página inicial.
Aqui embaixo, você configura o Slug, que é justamente o finalzinho da url. Vou colocar aqui:
Home. Então, no caso, vai ficar aftereffects.blog.br/home. A pessoa pode
acessar diretamente assim, caso ela queira. Isso aqui é mais útil, quando você tem muitas páginas,
e quer por exemplo, utilizar uma página de contato. Aí, você cria uma página, e você coloca
no Slug: Contato. Assim, a pessoa pode acessar: aftereffects.blog.br/contato. Olha como é fácil,
ela vai acessar a página de contato facilmente. Se você tiver mais de uma página com o mesmo
Slug, o WordPress, coloca automaticamente um número: 1, 2, 3, ele coloca um tracinho assim,
para que ele configure várias páginas com Slugs semelhantes. Aqui embaixo, você pode
configurar, se houver mais de um administrador, ou mais de um autor no seu site, quem vai ser o
autor. Depois então, de configurar todas essas opções, é só clicar em Publicar, para que ela seja
publicada. Na verdade, a gente só mudou o modelo, para
que ele fosse o modelo Works. É só isso que você precisa fazer com o Workality. Essa
configuração novamente, pode variar muito mesmo, de acordo com o tema que você
escolher. Principalmente, se o tema oferecer algum construtor de páginas próprio. Ele pode
oferecer muito mais opções aqui para você. Inclusive, botões, uma interface completamente
diferente, que lhe permite criar páginas mais facilmente, coisa que eu falei para vocês na aula
sobre temas. Depois de criar nossa página inicial, a gente
precisa criar uma página para o blog. Você pode configurar o WordPress, para exibir todos os
posts do seu blog na página inicial. Ou, você pode fazer o que a gente está fazendo agora:
Configurar uma página para a página inicial, que você pode construí-la como você quiser, e
também, configurar uma página que vai ser a página de arquivos do blog.
Então, você precisa obrigatoriamente, criar uma nova página, chamada Blog. Então, aqui em
páginas, novamente eu clico em Works. Aqui, em páginas, novamente eu vou clicar em Adicionar
Nova. Vou configurar o título desta minha página para Blog. Deixa ele carregar aqui, que está meio
devagarinho, clicar aqui e digitar Blog, no título da minha página. Vou mudar aqui embaixo, o modelo
para Blog. Você pode não precisar mudar, de acordo com o tema ele pode nem exibir essa
opção de Blog. Sendo, que o próprio WordPress já faz essa configuração, quando você fizer a
próxima opção que eu vou mostrar já, já. Aqui, você nem precisa mexer nas opções. Eu
vou apenas, configurar o meu Slug padrão, para Blog. Se você não configurar o Slug, ele vai
colocar como Slug padrão, o título que você configura para sua página, caso não exista uma
com o mesmo título. Clique em Publicar, e pronto! Você acabou de publicar duas páginas para o
seu novo site, que vão ser utilizadas por padrão, nas páginas de Home Page, a página inicial, e no
blog. Não basta só criar, você precisar configurar o
WordPress. Deixa eu atualizar aqui. Colocar aqui na minha página inicial, para ver se ele conseguiu
herdar a configuração. Não. Olha só! Então, por padrão, quando você instala o WordPress, ele
vem configurado para exibir na sua página inicial, todos os posts do blog. Então, essa é a
configuração padrão. Depois de criar a página Blog e a página Home,
ou a página inicial, você vai acessar a opção Configurações, e clicar na opção Leitura, que a
gente já conheceu quando conheceu pela primeira vez o WordPress. Clica aqui em Leitura.
E aqui, você tem a configuração da página inicial. O que vai ser mostrado na sua página inicial?
Aqui, ele está configurado para mostrar os seus posts recentes, o que você publica no blog. E
aqui embaixo, você tem quantos itens de blog, quantos posts ou quantos itens ele vai mostrar
na página inicial, na página de blogs e também nos seus Feeds, que eu vou falar para vocês
depois. Então, a gente vai configurar aqui, para que ele
exiba uma página estática. E aqui, a gente vai configurando a página inicial, como sendo a
nossa página inicial, que a gente criou agora há pouco. E, na página de posts, configure a página
do blog. Depois, basta clicar em Salvar Alterações e pronto! O seu site já passa a exibir,
deixa eu clicar aqui na página inicial, vou só pressionar o F5, ele já passa a exibir a sua
página criada. A página com o tema Works, que a gente configurou lá na página inicial que a gente
criou. Então, essa página vai usar na verdade o link
padrão do seu site, da sua home page, da sua página inicial. E vai exibir nesse caso, os seus
trabalhos aqui, utilizando a configuração do tema. E, quando você clicar em Blog, colocar aqui por
exemplo aftereffects.blog.br/blog, ele vai ser direcionado aos posts do seu blog. A gente vai
aprender a fazer mais lá na frente, nas próximas vídeo-aulas.
Então, viram como é legal? Viram como o Slug funciona? Só coloquei /blog, e já pegou o Slug
que eu configurei: /blog. Então, aqui ele mostra os posts do blog, só tem um por enquanto. Vou
voltar para a página inicial. E olha só! Aqui, a gente já tem a nossa página inicial. No seu caso,
não vai aparecer nada, porque você ainda não tem nenhum projeto criado. E, isso, a gente vai
aprender a fazer na próxima vídeo-aula. Depois de criar aqui, a sua página inicial, pode
ser necessário que você configure o seu menu. Observe que ele está mostrando aqui no menu
superior, apenas a opção Home, e a opção Sem Categoria. Eu vou voltar aqui para o meu painel
de configurações. Você deve apontar para a opção Aparência, e selecionar a opção Menus.
Você pode criar vários menus para utilizá-los em situações diferentes, deixá-los armazenados
aqui, caso seja necessário. Então, você cria por exemplo, eu já tenho aqui o menu principal, e
posso criar um segundo menu, um terceiro menu. Há inclusive, temas que utilizam mais de um
menu. Ele utiliza por exemplo, um menu aqui, um menu mais em cima, e um menu até aqui embaixo
no seu rodapé. Isso depende muito do tema. A gente vai criar um novo menu, vou clicar aqui
na opção Crie um novo menu. Ele vai carregar a janelinha para mim criar um novo menu. A minha
internet está lenta para caramba. Pronto! Criar um novo menu e vou clicar aqui, vou colocar assim:
Menu Principal 2. Já tem o menu principal ali. Vou clicar em Criar Menu. Ele vai criar o meu novo
menu, que já vai aparecer vazio. Depois de criar o menu, você vai adicionar agora
as opções que vão ser exibidas nele. Você tem aqui do lado várias opções. Algumas opções, são
características do tema. Como por exemplo, a opção Works, que não é exibida em outros
temas, por exemplo. Aqui em cima, você pode inserir no seu menu, as páginas que você já
criou. Eu vou clicar aqui na opção Ver tudo, vou
adicionar essa opção aqui, que é uma opção predefinida, início, página inicial. Não é
necessário adicionar o link para a página física. Apenas esse que já tem início aqui. É só clicar em
Adicionar ao menu. Ele vai adicionar aqui do lado. E, eu vou adicionar também, a página do blog.
Pronto! Depois de adicionar o menu, as opções de menu
aqui no seu menu principal, você pode expandi- lo, para configurar algumas opções diferentes.
Como por exemplo, um atributo. Isso é característica de alguns temas, como por
exemplo, uma descrição que é exibida junto com o link. A classe CSS, que pode não aparecer para
você, mas você pode habilitá-la aqui em cima das opções de tela. Você pode habilitar novas
opções aqui em cima, como destino do link, enfim, etc. Deixa eu marcar aqui para você ver. Olha só!
Destino do Link. Então, essas opções podem ser configuradas. A
classe CSS, se você quiser criar menus personalizados, enfim… Aqui embaixo, você tem
o menu Blog. Uma opção interessante, é que você pode criar facilmente, menus e submenus.
Se você não sabe o que é submenu, eu vou mostrar agora.
Vou adicionar por exemplo, aqui no submenu Blog, uma categoria do blog. As categorias, são
uma maneira de você organizar as suas publicações dentro do seu blog, para elas
ficarem mais organizadas e mais bonitinhas. Eu vou mostrar isso também, posteriormente. Por
enquanto, você tem uma categoria de blog, que se chama Sem Categoria. Vou marcar e adicionar
ao meu menu. Para que essa categoria se transforme em um
submenu, basta eu arrastá-la um pouquinho para dentro, abaixo da minha categoria de blog.
Depois, vou clicar em Salvar Menu, para salvar o menu que eu acabei de criar. Não basta criar e
salvar o seu menu. Depois, você precisa configurar onde ele vai aparecer. Para isso, você
vai clicar aqui em cima na opção Gerenciar Posições, e aqui, você vai escolher o seu menu
principal 2, no meu caso, menu principal 2, para que ele seja exibido no menu principal e no menu
mobile, que é uma característica herdada do tema. Clique em Salvar, para que o seu menu seja
salvo. E, a partir de agora, ele vai ser exibido aqui em cima. Vou atualizar a página para você ver.
Então, eu tenho aqui a página inicial, tenho aqui, apontando para o blog, a minha subcategoria,
que seria a Sem Categoria, o meu submenu. Você pode criar por exemplo, vários submenus,
quantos níveis você quiser. Basta ir posicionando as categorias, as páginas ou os links
personalizados, um pouquinho mais para a direita do seu menu principal.
Por exemplo, se eu quiser transformar o blog em um submenu da página inicial, é só arrastar para
o lado. Virou um submenu. Vou salvar aqui. Vou atualizar a minha página inicial, para você ver
agora, que eu tenho um menu principal de página inicial, quando eu aponto para ele eu vou para
blog, quando eu aponto para o blog, eu para Sem Categoria. Então, são vários níveis de menu.
Deixa eu voltar aqui. Pronto. Além de adicionar essas opções que vem
predefinidas, como os seus projetos do portfólio, as páginas que você criar, depois a gente vai
criar uma página de contato e adicionar ao menu, você também pode adicionar links
personalizados. Então, você pode criar por exemplo, um link para o seu canal no Facebook,
desculpa! Para o seu canal no Youtube. youtube.com/liutecristian. E aqui embaixo, você
coloca o texto do link, que vai aparecer no menu. Você pode colocar: Visite o meu canal, canal, só
Youtube, tá bom?! Colocou aqui, você pode expandir e fazer as
alterações. Por exemplo, aqui em Página Inicial, eu não gostei desse título. Vou mudar aqui, ao
invés de Página Inicial, colocar Início. Você pode colocar Home, por exemplo. Você pode mudar o
rótulo da navegação para qualquer menu que você adicionar. Pronto! Vou clicar em salvar, e
olha só! Vou atualizar aqui a minha página inicial, e agora eu já tenho o meu menu personalizado, já
com o meu título Início. O blog com o seu subnível, e aqui, eu tenho o canal do Youtube, que vai me
levar para o meu canal lá no Youtube. Um detalhe interessante, é que você também
pode configurar para que os links de menu abram em uma nova guia. Então, eu não quero que o
meu canal do Youtube, seja aberto na mesma guia, então você marca a opção: Abrir link em
uma nova janela, uma nova aba e clica em Salvar. Pronto! Agora, quando a pessoa acessar aqui,
deixa eu atualizar a página, quando ela acessar aqui o link do canal no Youtube, vai abrir uma
nova guia, porque é de um site externo, nem precisa abrir na mesma página.
Então, nesta aula, você aprendeu como criar a página inicial, a sua página de blog, e como
configurar o seu menu principal dentro do tema Workality. Na próxima vídeo-aula, a gente já vai
começar a criar os nossos posts do Portfólio, a criar os nossos projetos, para serem exibidos no
nosso portfólio. Então é isso! Se você gostou do vídeo, não
esquece de curtir, de compartilhar, se inscreve no canal, visite os links na descrição do vídeo, e
claro! Se inscreve aí, para que você receba todas as nossas novidades.
Um forte abraço para vocês! E até a próxima aula!

Only registered users can comment.

  1. Vê lá hein, não nos deixa na mão. Ansioso para a próxima…
    Não haverá analfabeto digital enquanto vc lembrar de nós. XD.

  2. @Clube do Design, queria agradecer pela iniciativa, graças a seus vídeos e sua didática excepcionais tomei coragem para aprender wordpress.

    Queria deixar um aviso pra galera que está acompanhando, se vocês, assim como eu, estão acompanhando o curso utilizando o wordpress instalado no computador como servidor local, não é necessário botar o arquivo .htaccess no diretório do servidor. Caso vocês coloquem ele lá, ao configurar os links permanentes para qualquer opção diferente da padrão, qualquer página no menu (pelo menos só testei no menu) diferente da home não abrirá. Eu demorei uma hora pra descobrir o que estava errado. Então repetindo, caso vocês estejam utilizando o wordpress instalado no PC de vocês, não coloquem o arquivo .htaccess na pasta do wordpress. Basta configurar os links permanentes do jeito que vocês quiserem sem necessidade do arquivo.

    Grande abraço!

  3. Ola Liute. Primeiro quero parabeniza-lo e agradecer pela iniciativa pois esta me ajudando muito a publicar meu primeiro blog!
    Agora, tenho 2 duvidas: o template q escolhi nao vem com icones de seguir no face, instagram, etc. Eu gostaria de colocar na pg inicial, no cabeçalho, apenas os icones para direcionar para as minhas redes, como faço?
    E outra: como descobrir se o template tem o "page builder" antes de instala-lo?
    obrigada!

  4. Liute bom dia, estou com versão 4.3 do wordpress, mas esse menu do CANAL DO YOUTUBE não tem opção de marcar abrir uma nova guia, será que é atualização do wordpress

  5. Obrigado Liute Cristian! Esta serie de videos sobre como criar um Portifólio no WordPress ajudou muito na criação do meu próprio Portifólio.VALEU….

  6. Amigo, boa noite, tudo blz ? Como eu faço para que minha página inicial seja a página que recebera meus post ? Obrigado

  7. Bom dia Liute… o meu tema não tem a função modelo "works", não consigo criar a página inicial dessa forma 🙁 … tem algum outro modo? AAAA vc me ajudou e muuuito a criar o meu Blog. muito a te agradecer!

  8. Fala Liute. Você teria uma solucao para criar uma área restrita(cadastro e login) somente para uma página do site? Exemplo. No meu site eu tenho uma página de Booking. Lá tenho um plugin pra Booking online. Quero criar um formulário de cadastro para o cliente poder ter acesso a essa página de Booking e marcar direto desse plugin nessa página restrita a data do serviço. Vc tem uma solução pra isso!

  9. Eu quero criar a página inicial como "home" e definir ela como padrão da pasta raiz onde o wordpress está instalado, por exemplo, eu instalei dentro de um site com o nome da pasta /agencia/ então eu quero criar uma página com o nome "home" mais o que esta acontecendo é isso www.site.com/agencia/home, mais o que eu quero é que ao clicar em "home" apareça dentro de www.site.com/agencia/, que é o padrão. Agradeço desde já.

  10. olá ,gostei muito do curso de WordPress, você  me permite postar ele no meu blog (sem fins lucrativos)? Desde já te agradeço

  11. Muito bom seu trabalho … mano ATRIBUTOS DE PAGINA a opção MODELO só aparece nos temas pagos ? Porque não encontrei ! LIKE

  12. Fiz tudo conforme a video aula… pagina inicial colquei: inicio e em pagina de posts coloquei: Blog, mas quando acesso meu site ganhardigital.com.br aparece a página em branco. Como resolver?

  13. Boa noite amigo,

    Estou com uma dificuldade em fazer funcionar o menu, em um tema PARALLAX ONE, fiz o menu com a estrutura link personalizado #id, assim a página rola normalmente com o feito parallax, o problema ocorre quando clico em algum link que direciona para alguma página que criei, ocorre que ná página fora do parallax o menu não funciona, ou seja, não direciona qd clico nas opções do menu. Será que vc poderia me ajudar com essa solução?

    Segue o link do site para vc dá uma olhada www.precisacontabilidade.com.br
    Obs: Para ver o erro, clique na opção do menu SERVIÇOS e após clique no quadro CONTABILDIADE, qd a página carregar clique novamente na opção do Menu SERVIÇOS e vc verá que não direciona, mostra apenas a id #services.

    Espero que possa me dar essa força. Abraço

  14. Olá, obrigado por publicar estes vídeos. Você não mostrou como mudar as cores do Workality-lite, e eu não encontrei essa opção… Não é possível? Abraço.

  15. Outra coisa é que quando mudo a opção pra 2 ou 3 colunas, não muda nada no meu site… Tentei limpar o cache, mas não resolveu.

  16. Poxa não consigo editar, apagar ou mudar a inicio, até tentei criar uma nova mas não rola…
    Poderia me ajudar?

  17. Parabéns pela aula, gostei muito, você sabe me informar se é possível fazer pelo WordPress ou você me indica outro sistema, quero criar um site que ao cadastrar um novo usuário ele tenha uma pagina dentro do meu site onde ele pode colocar sua foto sua agenda…, desde já agradeço pela ajuda. fico no aguardo

  18. Eu uso o tema interon para site imobiliário, para postar os anúncios eu uso o plugin IM listings.
    A lista de imóveis ficam na home, mas quando entro com dominio no navegador abre nada encontrado e a lista de imoveis so aparece clicando nos menus. como faço nesse caso para deixar a lista de imoveis para abrir na pagina inicial?

  19. Amigo, pode me ajudar aqui. Criei uma página com Portifólio(home), Blog e Loja. Na loja não consigo criar a página por que ao criar um menu com "todos os produtos" cria uma página inxistente… Como prosseguir?

  20. ótimo vídeo !! é um legado de bom conteúdo que você cria fazendo o seu material, por mais que quando a série estava sendo desenvolvida não havia engajamento, porém 4 anos depois que o seu trabalho foi publicado esta me ajudando muito!! continue assim.

  21. Top Liute.. Eu achava que tinha começado a conhecer o WordPress… Depois deste vídeo sim : Agora eu acho que comecei a conhecer WordPress.. Muito boas suas explicações irmão. Estão me ajudando muito. OBRIGADO ! Bora pra aula #10 !

  22. Liute, poderia me tirar uma dúvida, por favor?! se eu compro um tema tipo o Bridge que tem várias possibilidades de construção de um site, eu posso usar para vários clientes? ou preciso comprar um tema para cada um exclusivo? exemplo, precisaria comprar todas as vezes que quisesse utilizar o bridge? o link é esse: https://themeforest.net/item/bridge-creative-multipurpose-wordpress-theme/7315054

Leave a Reply

Your email address will not be published. Required fields are marked *