Como Criar Um Site Profissional Sozinho [WordPress]
Articles Blog

Como Criar Um Site Profissional Sozinho [WordPress]

August 9, 2019


Olá, o meu nome é Tiago Dantas e neste video
vou-te mostrar como podes criar um site assim como este passo a passo e sem saltar um único
passo. Este modelo de design é grátis, simples
e como podes ver é muito bonito. Eu vou-te mostrar como podes fazer um site
à tua medida, colocar qualquer video como fundo ou imagem, mudar o tipo de letra, como
podes ver aqui nestes exemplos que estou a mostrar agora. Os princípios de design deste
site são inspirados em sites como a Apple, airbnb e o skype. Aqui no site da Apple podemos
ver as semelhanças. Logotipo em cima, menu curto, simples e uma imagem em alta definição
como fundo. No site da airbnb, logotipo em cima, menu curto, simples, um video como fundo,
texto aqui a meio, botão com chamado à ação. No site do Skype, logotipo em cima, menu curto,
sem desperdiçar espaço nenhum, texto a meio e aqui um botão com o chamado à ação.
Portanto vamos começar com um pequeno tour ao site.
Vou-te mostrar como colocar um video em alta definição como fundo, um título e um subtítulo
com letras profissionais e uns botões para um chamado à ação que podem ter a cor que
tu quiseres. Ao clicarmos aqui neste botão, vamos bater
à página de contato. Aqui vou-te mostrar como podes colocar o Google
Maps e este formulário onde as pessoas podem enviar mensagens diretamente para o teu email.
De volta à página principal, clicando no outro botão, vou-te mostrar como inserir
uma janela como video do youtube no site. Aqui podes colocar um video promocional sobre
o teu site ou negócio. Mais abaixo vou-te mostrar como inserir linhas
e colunas de texto, como por exemplo estas três colunas onde podes destacar benefícios
do teu site ou negócio e também colocar estes ícones modernos que te vou mostrar
onde obter grátis. Aqui em baixo vou-te mostrar como podes editar
o rodapé, podes mudar as cores e colocar os ícones para as redes sociais.
Agora vamos ver as páginas interiores. Esta é a página “Sobre”, com um texto e uma imagem
em alta definição. Eu vou-te mostrar como podes obter estas imagens grátis sem pagar
por direitos de autor. Temos aqui mais três fotografias.
Obviamente podes colocar as fotos que quiseres. Vamos ver agora a página o nosso “Trabalho”.
Aqui podes demonstrar em que consiste o teu trabalho, pôr uma fotografia, falar mais
sobre o teu trabalho, pôr uma fotografia. Como vês, o site está muito bonito. Vou-te
mostrar como é fácil fazeres isto tudo sem precisares de um web designer ou experiência
alguma. Vamos ver agora a página “Serviços”.
Aqui é onde podes falar sobre os teus serviços, colocar uma fotografia relacionada com cada
um. Como vês, esta página também está feita
de forma simples e elegante. Existe muito espaço entre o texto fazendo com que o visitante
se sinta confortável com o site. Aqui temos o chamado à ação. Aqui ao clicarmos
vai bater à página de “Contato” que já tinhamos visto antes.
Mas isto não é tudo, este site é 100% responsivo. Ou seja, funciona em todas as plataformas,
Iphones, Androids, tablets, portáteis, Macs, o que for.
Como vês neste exemplo, o site ajusta-se completamente ao tamanho do ecrã. Isto é
muito bom porque um site com um design responsivo é fundamental nos dias de hoje.
Por isso, vou-te mostrar como fazer um site com um design assim, passo a passo sem saltar
um único passo. Vou deixar tudo no índice do video do youtube, portanto se não fizeres
tudo hoje podes voltar noutro dia, colocar o video nos favoritos, vens ao índice e vais
encontrar a parte onde deixaste da última vez.
Se estás pronto, eu estou pronto, vamos começar. Podes cirar o teu site em quatro passos. O
primeiro passo é o mais importante que é o responsável por colocar o site no ar, ou
seja, a hospedagem que não é nada mais do que um servidor* que está ligado 24 horas
por dia e que guarda todas as informações do teu site, os textos, as imagens. Sem hospedagem,
se alguém visitar o teu site, este aparece em branco, portanto, é o fundamental, temos
de começar por esse. O segundo passo é obter um nome de domínio,
ou seja, o nome do teu site. No terceiro passo vamos instalar o WordPress
que é um sistema de gestão de conteúdos, uma plataforma que te vai ajudar a gerir todo
o conteúdo do site como os textos, as imagens, em vez de precisares de aprender código.
No quarto passo vamos finalmente nos divertir e criar o site, mas primeiro vamos ver quanto
é que isto tudo vai custar. Para a hospedagem, que permite o teu site
ficar no ar 24 horas por dia, vai custar à volta de $8 por mês.
Para o teu domínio, que é o nome do teu site, vai custar à volta de $13 por ano.
Felizmente para nós, o WordPress é grátis e porque somos nós próprios a criar o site
em vez de pagar milhares de dólares a um web designer, criar o site também é grátis.
Por isso, a única coisa que dinheiro são os passos 1 e 2 e eu tenho um desconto para
esses passos. Logo para começar, o custo será menos de $13.
Vamos então começar e fazer os passos 1 e 2. Felizmente para nós, podemos fazê-los
no mesmo sítio, portanto podes abrir agora a tua internet e escrever na barra de endereços
“hostgator.com”. E é
aqui que vamos obter o nome do nosso domínio
e a hospedagem. Estamos no site do hostgator e é aqui que
vamos hospedar o site por três principais: melhor razão qualidade-preço, bom suporte
e rapidez. Vais ficar com um site “.com” pronto em 5 minutos.
Portanto, desliga qualquer tipo de distração que tenhas agora, televisão, rádio, o que
for e presta bem atenção a esta parte. Vamos clicar em “web hosting” no canto superior
esquerdo, depois clicámos em “Choose a Plan”. Agora vamos ser apresentado três planos diferentes,
o “Hatchling Plan”, o “Baby Plan” e o “Business Plan”.
Podemos esquecer o “Business Plan” por agora, porque é demasiado para o que precisamos.
A diferença entre o “Hatchling Plan” e o “Baby Plan” é a quantidade de nomes de domínios
permitidos, ou seja, a quantidade de sites que podemos registar.
No “Hatchling Plan” só podemos registar um único site, por exemplo, “oteusite.com”,
enquanto que no “Baby Plan” podemos registar um número ilimitado de sites.
Podes ter “oteusite.com”, “outronegócio.com”, “ositedoteuamigo.com”, por aí fora.
Por isso, se quiseres criar mais do que um site, escolhe o “Baby Plan”. Neste caso como
só vou criar um site vou escolher o “Hatchling Plan” que também é o mais barato, portanto,
vamos a isso. Muito bem, aqui vamos escolher o nome do nosso
domínio, que é o nome do site. No meu caso seria “vivedanet.com” e basta clicar fora
da caixa para ver se está disponível e obviamente que este domínioão está disponível porque
eu já o registei, mas vais notar muito rapidamente que muitos domínios não se encontram disponíveis,
por isso às vezes tens que ser um pouco criativo para escolher um nome.
Se precisares de ideias para o nome do teu site, vai até ao site “vivedanet.com” e coloca
o teu email na caixa que aparece no início para receberes uma lista com centenas de bons
mercados para criar um site. Assim que escolhermos o nome do site, também
perguntam-nos se queremos adicionar outras extensões como “.org” ou “.net”. Eu não
acho que seja necessário, por isso não vou selecionar nada.
Mais abaixo é-nos perguntado se queremos proteção de privacidade do domínio.
Isto tem um custo extra que eu acho que é desnecessário e se o nosso negócio é ético
e quisermos ser encontrados facilmente não necessitados disto, por isso vou retirar a
seleção. Aqui em baixo vamos confirmar o nosso plano.
Neste caso é o “Hatchling” e aqui podemos escolher durante quanto tempo nos queremos
comprometer. Eu, normalmente, quando começo um site do
zero gosto de fazer mês a mês, porque fico com os custos iniciais mais baixos e sei que
posso cancelar a qualquer momento, mas podes te comprometer por mais tempo se quiseres,
mas como estamos a começar, vou escolher mensal.
Aqui escolhemos um nome de utilizador só com minúsculas e um PIN de 4 a 8 dígitos.
Agora vamos preencher o formulário com o nome, email, morada, zip code que é o código
postal e colocar os dados de pagamento. Podemos escolher entre cartão de crédito
ou Paypal. Aqui em baixo vão-nos perguntar se queremos
serviços extra. Por definição eles já se encontram selecionados
e nós podemos adicioná-los mais tarde e existem opções grátis que fazem a mesma
coisa, portanto vou retirar as seleções porque não acho que sejam necessárias.
Mais abaixo podemos introduzir um código promocional.
Temos aqui o código SNAPPYDAY que já se encontra pré-definido e que nos dá um total
a pagar de $21.71 com um desconto de $4.24, mas nós temos um código melhor chamado PLANOECONOMICO,
sem acento, tudo seguido, portanto podes escrever PLANOECONOMICO, clicar em validar e vais ver
que o desconto é bem maior. Como podes ver aqui ficamos a pagar $12.96,
menos $13 com o desconto de $12.99 Vamos agora confirmar tudo o que temos direito:
Suporte 24 horas por dia, 7 dias por semana grátis, ativação da conta é instantâneo
grátis, garantia de 45 dias, o registo do nome do site é $12.95, a hospedagem, primeiro
mês a $0.01, subtotal $25.95, mas com o desconto de $12.99, temos a pagar apenas $12.96.
Portanto, agora vamos concordar com os termos e condições e clicar em “Checkout Now”.
A seguir vamos bater à “Welcome Page” do Hostgator e é nesse momento que está na
hora de irmos ver o nosso email. Vamos abrir o email com o assunto “Your Account
Info” que vem do email “[email protected]” e neste email podemos encontrar todas as informações
importantes para a nossa conta, como o nome de utilizador, o painel de controlo, a password.
Convém imprimir ou guardar estas informações no nosso computador.
Agora vamos clicar no link que está no email para fazer o login que está no painel de
controlo do Hostgator, pois é aqui que vamos instalar o WordPress.
Para o login usamos os dados do email como o nome de utilizador e a password.
Para isso basta virmos aqui ao email, copiamos esta password, colamos e fazemos o login.
Após o login, para instalar o wordpress, vamos descer na página até onde diz “Software/Services”
e clicamos em “Quick Install”. De seguida clicamos em WordPress do lado esquerdo
e na caixa onde diz “Free” clicamos em “Install WordPress”.
A seguir basta selecionarmos o site em que queremos instalar o “WordPress”, deixamos
o lado direito em branco, no “Admin Email” colocamos o nosso email principal, em “Blog
Title” vou colocar o nome do meu site, em “Admin Name” vou pôr Tiago. Obviamente que
cada pessoa escolhe o seu. Aqui basta o primeiro e último nome e de
seguida clicar em “Install WordPress”. Muito bem, temos o WordPress instalado.
Após a instalação vai aparecer uma caixa no topo com as credenciais para o painel administrativo
do “WordPress”. Esses dados também serão enviados para o
nosso email, portanto se não receberes na tua caixa principal, verifica na tua caixa
de spam, porque devem estar lá. É provável que demore algumas horas até
o “WordPress” estar no ar e o site pronto para gerir. Por isso, vou fazer uma pequena
pausa e voltar daqui a pouco. Muito bem! Já passaram 2 horas, vamos ver
se o link já funciona e usar as credenciais que estão aqui para fazer o login no “WordPress”.
Este link temos que saber de cor, pois é através deste login que vamos entrar no painel
administrativo do “WordPress”, que é onde gerimos todo o conteúdo do site, como os
textos e as imagens. Para todos os sites o link será sempre “onossosite.com/wp-admin”.
Será sempre assim. Não te esqueças! Recorda sempre este link.
Vou abrir o link noutro separador e fazer o login no WordPress com esta password complexa
que está aqui, que já vou mostrar como alterar para uma password da nossa escolha.
Vamos então ao login colocar o nome de utilizador e colar a password.
De seguida clicamos em “Login”. Ok! Chegamos ao Dashboard do WordPress que
é onde vamos criar o site. Antes de mais nada, parabéns por teres chegado
até aqui! Alguns web-designers já cobram um valor significativo
só para trazer as pessoas até esta fase, por isso estás num bom caminho. Continua!
Vamos ver o nosso progresso até agora: Hospedagem do site – Feito!
Criação do Domínio – Feito! A instalação do WordPress agora mesmo – Feito!
Portanto, chegamos ao passo mais interessante que é a criação do site.
Mas primeiro vamos colocar o WordPress em português. Para isso vamos a “Settings” do
lado esquerdo e clicamos em “General”, a seguir vamos até cá abaixo a “Site Language” e
selecionamos o idioma pretendido. Eu vou escolher “Português do Brasil”.
Clicamos em “Save Changes” e já está alterada a língua.
Agora vamos mudar a password aqui em “Usuários”, “Seu Perfil”, vamos até cá abaixo novamente,
clicamos em “Gerar Senha”. Esta senha vai ser gerada automaticamente, podemos apagar
e criar a nossa senha, uma senha que seja forte.
Depois clicamos em “Atualizar Perfil” e temos a password alterada.
Agora vamos colocar o site mais leve, desinstalado algumas coisas que vieram pré-instaladas
com o WordPress, mas que não vamos precisar. Para isso vamos até “Plugins”, os Plugins
adicionam funcionalidades ao site, mas estes que vamos desinstalar são marketing do hostgator
e o outro é desnecessário. Por isso vamos selecionar o “Hostgator WalkMe
Plugin”, o “Jetpack” e o “Mojo”. Vamos até cá acima e desativamos. Clicamos
a seguir em “Aplicar”. De seguida voltamos a selecionar “Mojo”, “Jetpack”, “Hostgator
WalkMe Plugin”, vamos até cá acima e desativamos, aliás, excluímos.
Clicamos em “Aplicar” e de seguida basta confirmar. Ok! Agora tens uma versão limpa e atualizada
do WordPress instalada no teu site. A próxima coisa que vamos fazer é instalar
o tema do site que é o mesmo que dizer o design do site.
Se formos ver agora o site podemos ver que ele está a preto e branco e com um ar bastante
incompleto, mas nós queremos algo fantástico. Para mudar o design clicamos em “Aparência”,
“Temas”. Aqui podemos ver o design instalado.
Mas vamos clicar em “Adicionar Novo”. Há milhares de temas por onde escolher, mas
a maior parte deles não são assim tão bons e é por isso que eu optei por um tema que
segue os melhores princípios de design do mundo. Se abrirmos a Internet e formos ao
“vivedanet.com” podemos fazer o download do tema aqui.
Este tema foi criado pelo designer Tyler Moore que juntamente com a sua equipa ao longo de
vários meses de muito trabalho criou um tema que é realmente fantástico e também 100%
grátis. Claro que eu uso este tema no meu site, pois
nunca iria recomendar algo em que não acredito plenamente.
Como podes ver, o design é simples, elegante e bonito.
Tem um número ilimitado de cores, funciona em todas as plataformas e eu estou muito entusiasmado
com este tema. Chama-se “Tesseract” e podes fazer o download
aqui no vivedanet.com grátis. Portanto, clica aqui e guarda o tema no ambiente de trabalho
agora. Após o download basta clicar em “Fazer Upload
Do Tema” e “Escolher Ficheiro” e encontramos o download, que neste caso está aqui no ambiente
de trabalho e clicamos em abrir. Depois clicamos em “Instalar Agora”.
Depois da instalação estar concluída, clicamos em “Ativar”.
Muito bem! O tema está ativo e agora podes visitar o site, clicando aqui em “Visitar
o site” para ver como ficou. Parabéns! Instalaste o tema “Tesseract” de
forma bem sucedida. A barra preta aqui em cima não faz parte
do tema, apenas indica que estamos logados no WordPress e podes fazer o logout passando
com o rato aqui em cima. Para voltar a fazer login, não te esqueças
que temos de escrever na barra de endereços “onomedonossosite.com/wp-admin”.
Para irmos ao painel de controlo basta clicarmos aqui.
Para voltar ao site através do painel de controlo basta clicar em “Visitar Site” e
a primeira coisa que vamos fazer é combinar as cores do cabeçalho e do rodapé com as
cores do teu negócio. Para fazer isso clicamos “Personalizar” aqui
em cima e neste menu do lado esquerdo clicamos em “Header Options” para mudar as cores do
cabeçalho, em “Header Colors”, depois clicamos em “Selecionar a cor” e com esta palheta aqui
podemos mudar o cabeçalho para a cor que desejas e é por isto que eu gosto tanto deste
tema. Podemos combinar o nosso site com a cor do nosso negócio. A cada cor corresponde
um código e a esta cor corresponde este código, se mudarmos o código, mudamos a cor e vice-versa.
No meu caso tenho um código que vou colar aqui para a cor do meu site. Obviamente que
podes usar este código ou escolher a cor mais adequada para o teu site.
Aqui em baixo em “Header Opacity” podemos selecionar o nível de transparência do cabeçalho.
Quanto mais baixo o valor mais transparente fica a cor do cabeçalho.
Mais abaixo podemos mudar a cor dos links do cabeçalho para a cor pretendida, como
podes ver, mudando aqui a cor, mas vou deixara opção de padrão selecionada porque gosto
de como está. Agora, vamos voltar atrás clicando nesta
seta aqui em cima e aqui podemos definir a identidade do site, ou seja, o título e a
“Tagline”, que no fundo é o slogan do site. É importante preencher a identidade, pois
é este título e slogan que vão aparecer nos motores de busca quando as pessoas procurarem
pelo teu site. Podemos voltar para trás. Mais tarde vamos
fazer o “Header Logo” que é o logotipo do site e outras definições.
Por agora vamos salvar e publicar as alterações e voltamos ao menu onde podemos alterar as
cores do rodapé em “Footer Options” aqui através do mesmo processo.
Eu vou manter como está e para voltarmos ao site fechamos o menu aqui em cima.
O próximo passo é eliminar esta “Sample Page” aqui e adicionar páginas para o menu.
Para isso vamos até ao “Painel”, de seguida vamos a “Páginas”, “Todas as Páginas”, selecionamos
a “Sample Page” e mandamos para a lixeira. Agora vamos adicionar as páginas para o menu,
para isso vamos clicar em “Adicionar Nova” e vamos escrever aqui “Início”, que será
a página inicial, a homepage. De seguida clicamos em “Publicar”.
Voltamos aqui a “Adicionar Nova” e criamos a página “Sobre”.
Por enquanto vamos deixá-las em branco, vamos só criá-las.
Vamos aqui a “Adicionar Nova” e criamos a página “Nosso Trabalho”, obviamente que podes
criar as páginas que quiseres com o nome que quiseres. Vamos aqui a “Publicar”.
“Adicionar Nova”, vamos criar a página de “Serviços”. “Publicar”.
“Adicionar Nova”, e a página de “Contatos” por último e publicamos.
Vamos ver como ficou, para isso basta clicar aqui em “Ver Página”.
Como podes ver está tudo trocado aqui em cima e há duas páginas de início, portanto
temos que remendar esta situação. É muito fácil, vamos a “Editar Página”.
De seguida, vamos até “Aparência” aqui do lado esquerdo e selecionamos “Menus”.
Vamos criar um novo menu para o cabeçalho com o nome “Menu Principal”.
Clicamos em “Criar Menu”. Agora basta selecionarmos as páginas que
queremos que façam parte do menu principal. São estas novas que criamos. Clicamos em
“Adicionar ao Menu”. De seguida basta trocarmos a ordem, “Início” em cima, “Sobre”, “Contatos”
vai para último e trocar estas duas. Agora é só selecionar a posição do tema
que é o cabeçalho, portanto é “Header”, em inglês significa “Cabeçalho”. E clicamos
em “Salvar menu”. Vamos ver o nosso trabalho aqui “Visitar o
Site” e, como podemos ver, já estão todas as páginas por ordem, portanto, foi um bom
trabalho. Agora vamos definir a página “Início” como
a nossa página principal, esta página aqui. Vamos remover a barra do lado esquerdo e colocar
um vídeo como fundo em alta definição como fundo da página principal.
Para isso podemos ir aqui a “Editar Página” e do lado esquerdo vamos a “Configurações”,
“Leitura”, onde diz “A Página Inicial Mostra”, “Uma Página Estática”, selecionar e definir
a “Página Principal” como a página “Início”. Agora vamos até cá abaixo e clicar em “Salvar
Alterações”. Ao visitar o site podemos ver que a página
Início já está definida como página principal. Agora como é que podemos editar a página
principal e adicionar o nosso próprio conteúdo? É muito fácil. Para isso vamos até “Editar
Página” e nesta caixa de texto podemos escrever o que quisermos. Vou colar aqui algum texto
para dar o exemplo. Este editor é muito parecido com o “Word”, tem funcionalidades em cima
que podes sublinhar o texto, pôr a negrito, colocar links, centrar o texto, adicionar
imagem, etc. E para remover aquela barra lateral que tinhamos
na página “Início” vamos até “Modelo” e em vez de “Modelo Padrão”, selecionamos “Full
Width Page” que significa página de largura completa.
Agora clicamos em “Atualizar” e de seguida em “Ver Página”.
Podemos ver que a página já está com melhor aspeto, mas nós não queremos apenas melhor
aspeto, queremos que o site fique fantástico. Como é que fazemos com que o site e a página
principal fiquem fantásticos? Em primeiro lugar, penso que devemos remover este título,
colocar um vídeo grande como fundo, colocar um tipo de letra bonito, profissional a meio
que possamos controlar, mas como é que fazemos isso tudo? Por definição o WordPress não
te permite fazer isso, por isso precisamos de Plugins que te permitam remover o título,
que permitam colocar um vídeo ou imagem como fundo, que permitam colocar tipos de letra
mais bonitos, por isso vamos adicionar alguns Plugins para podermos fazer todas estas coisas
boas para colocar o site com aspeto realmente fantástico.
Para adicionar os Plugins vamos até ao Painel. Por enquanto não te preocupes com este ícone
do jacaré aqui em cima. Pertence ao Hostgator e mais à frente vou-te mostrar como podes
obter o teu ícone grátis. Agora vamos até “Plugins” e vamos adicionar
um total de 9 Plugins. Por enquanto não precisas de saber de tudo o que eles fazem. Eu vou-te
explicando à medida que o tutorial vai avançando. Vamos até aqui e procuramos por um Plugin
chamado “SiteOrigin”, clicamos em “Enter”, vamos até cá abaixo e vamos instalar o “Page
Builder by SiteOrigin”. Podes ver aqui as estrelas, a classificação e o número de
downloads. Este Plugin vai permitir criar imagens como
fundo e editar visualmente o WordPress. Agora é só clicar em “Ativar”.
De seguida vamos clicar em “Adicionar Novo” e voltamos a escrever aqui “SiteOrigin”. Vamos
adicionar agora um Plugin chamado “SiteOrigin Widgets Bundle”. Clicamos em instalar.
Este Plugin vai permitir adicionar o Google Maps no site. Clicamos em “Ativar Agora”.
O último Plugin do SiteOrigin que vamos adicionar, clicamos em “Adicionar Novo”, chama-se “Video
Background”. Este Plugin, como o próprio nome indica,
vai permitir-nos colocar aquele video como fundo da página principal, como tinhamos
visto no início do tutorial. Vamos clicar em “Ativar”.
De seguida “Adicionar Novo” e vamos adicionar agora o “Easy Google Fonts”. Este Plugin permite
colocar tipos de letras muito bonitos, mudar o aspeto da letra, a cor, o tamanho, a posição,
é um Plugin muito bom. Portanto, vamos clicar em “Instalar Agora” e “Ativar”. De seguida
vamos a “Adicionar Novo” e vamos escrever aqui “Black Studio”. Este Plugin permite que
o Plugin Page Builder seja visual. Não faz muito sentido agora, mas vai fazer quando
chegarmos a essa parte. Clicamos em “Instalar Agora” e ativamos.
O próximo Plugin é o “Title Remover”. Vamos a “Adicionar Novo” e escrevemos aqui “Title
Remover” que vai permitir removermos o título, por exemplo, onde diz “Início” na página
principal, dá para remover, o que dá um ar mais limpo ao site. Portanto, é este com
esta cor, vamos aqui a “Instalar” plugin e “Ativar”.
Mais três para acabar. Vamos agora a “Adicionar Novo” e escrever “Contact Form 7” que é a
página de contato, é o formulário que permite o visitante preencher um formulário no nosso
site e enviar as mensagens para o nosso email através de um formulário.
Vamos instalar e ativar. Estamos quase a acabar, só mais dois.
Vamos agora instalar o “Spacer”, “Adicionar Novo”, Spacer, este Plugin vai nos permitir
controlar melhor o espaçamento do site. Pode não fazer muito sentido agora, mas já vais
perceber. Clicamos em “Instalar agora” e ativamos. Por fim, vamos a “Adicionar Novo” e instalar
o “light box plus color box”. Este Plugin Vai nos permitir criar uma janela Pop-up como
aquele video que te mostrei no início do tutorial, aquele video do youtube que estava
dentro do site. Portanto, é muito bom. Vamos ativar e agora temos todos os Plugins
instalados e ativos no site. A próxima coisa que vamos fazer é editar
a página principal. Para isso vamos até “Páginas”, clicamos
em “Todas as Páginas” e clicamos sobre a página “Início” para editar.
Como podemos ver aqui, está tudo normal, continuamos aqui com o editor visual, mas
se formos ver aqui do lado direito, tem um novo separador chamado “Page Builder”. Vamos
clicar. Fazemos Ok. Todo o conteúdo que estava antes no editor visual passa para dentro do
“Page Builder”. O Page Builder funciona desta forma: Conseguimos adicionar linhas aqui,
vou adicionar, clicar em “Adicionar Linha” e neste caso esta linha tem duas colunas,
50% cada uma,onde podemos colocar conteúdo. Aqui em cima nesta seta podemos diminuir para
1 coluna, por exemplo. Fica a largura total ou para 3 em que podemos colocar conteúdo
aqui, aqui e aqui. Vou clicar em inserir, para dar o exemplo
aqui com 3 colunas. Clicamos sobre a primeira coluna e clicamos em “Adicionar Widget”. É
aqui que vamos adicionar o “Editor Visual” e aí está o porquê de termos instalado
o “Black Box Studio” Plugin. Clicamos sobre “Editor Visual” e podemos editar como se fosse
o editor visual normal. Aqui podemos colar texto, vou dar este como exemplo e clicar
em “Feito”. De seguida vamos aqui duplicar o texto para
termos agora 3 editores visuais e vamos arrastar para as outras colunas para dar aqui um exemplo
com 3 colunas. Clicar em “Atualizar” e agora “Ver Página”.
Aqui podemos ver, temos uma linha em largura total e três colunas, só que vamos fazer
com que este título saia daqui, porque não fica bem.
Para isso vamos a “Editar Página” e como instalamos o Plugin “Title Remover”, vamos
ter cá abaixo uma opção para esconder o título.
Hide title? Sim. “Atualizar”.
Agora vamos ver a página. Muito bem! o título já desapareceu. Agora
temos o problema do conteúdo ter subido, mas porque instalamos o Plugin “Spacer”, é
possível virmos aqui editar esta primeira linha, colocar aqui o rato, dar um espaço,
onde podemos colocar aqui do lado direito no extremos, temos aqui o “Spacer” devido
ao Plugin que instalamos e vamos colocar aqui “90px”.
Feito! “Atualizar” e vamos ver como ficou agora. De certeza com mais espaço. Ora aí
está, muito bem! Já temos o site com uma aparência mais desejável,
mas ainda não é isto que queremos, obviamente, só estou a dar um exemplo daquilo que podes
fazer com este editor visual a nível de criar linhas e colunas com um novo conteúdo.
Antes não dava para fazer com o editor visual antigo, daí a razão de usarmos Plugins.
Mas por muito que eu goste deste trabalho, nós vamos é colocar um vídeo em alta definição
como fundo da página principal, porque queremos um design fantástico, um design que dê nas
vistas. E para isso vamos abrir aqui um novo separador
e vamos procurar por “4K youtube downloader”. Este programa vai permitir que os vídeos
do youtube sejam em alta qualidade para ficar com uma alta definição no site. O site é
“www.4kdownload.com”. Fazemos o download normalmente e aqui basta
ir clicando seguinte e aceitar as condições até o download estar concluído.
Clicamos em “Concluir” e agora o programa abre-se automaticamente.
Está na hora de irmos até ao Youtube, claro que cada pessoa vai escolher o vídeo mais
adequado para o seu negócio. Este vídeo que estou a usar é só como exemplo. Neste
caso o autor permite usarmos o vídeo, portanto convém ter atenção se podemos ou não usar
determinados vídeos. E colá-lo aqui no youtube downloader.
Selecionamos aqui “Alta Definição” e clicamos em “Baixar”.
Aguardamos pelo final do download. E agora vou clicar com o botão do lado direito,
“Mostrar na pasta” e vou colocar o vídeo no ambiente de trabalho.
Muito bem! Já temos o vídeo aqui no ambiente de trabalho. Agora temos de fazer upload do
ficheiro no WordPress. Para isso vamos voltar a abrir o WordPress.
Vamos a “Editar Página” e podemos apagar aqui estas linhas que eram só exemplos, passando
com o rato aqui nesta chave inglesa e apagar. Outra vez, apagar.
Agora vamos adicionar uma nova linha com o tamanho 100%, largura total e clicar em “Inserir”.
De seguida vamos adicionar o “Editor Visual”. E agora vamos tratar de umas definições
para colocar o vídeo como fundo da página principal. Vamos aqui a “Editar Linda”. Vamos
colocar aqui o “Background Video” ativo. A seguir vou vos mostrar como funciona cada
uma destas. Aqui vamos deixar em branco nos atributos.
Em “Layout” vamos colocar em “Largura Completa” para o vídeo ter a largura completa do ecrã.
Em “Design” é só em caso da pessoa querer usar imagens em vez de um vídeo como fundo
e caso queiras usar a imagem, usa em “Cover” a “Exibição do Background”, mas vamos deixar
agora normal como estava. Vamos selecionar aqui “Ativado”, onde diz
“Background Video” e temos que ir buscar agora o link do vídeo para colocar no WordPress.
Vamos “Salvar” as aterações e clicar “Atualizar”. De seguida vamos até “Mídia”, “Adicionar
Nova”, “Selecionar Arquivos” e aqui podemos selecionar o vídeo para fazer upload no WordPress.
O upload está a ser feito no WordPress. Agora vamos a “Editar” aqui do lado direito
e vamos copiar este link que se encontra aqui. De seguida, vamos até “Páginas”, “Todas
as Páginas”, “Início”, vamos até aqui à chave, “Editar Linha”, vamos até “Background
Video” e colamos o link aqui onde diz “MP4 URL”. Podemos deixar por enquanto em branco
estas definições, depois vou mostrar como é que funcionam. Esta aqui podemos desativar,
esta aqui do “Pause/Play button” e vamos clicar em “Salvar”.
De seguida “Atualizar” e vamos ver a página para ver como ficou.
Como podemos ver, não está aqui, porquê? Por isso é que adicionamos o Plugin chamado
“Spacer”. Temos que criar espaço antes para aparecer
o vídeo, portanto temos que vir aqui a “Editar” e colocar um Spacer. Vamos colocar aqui 640px,
mais ou menos, deve ser suficiente. Clicar em “Feito”, “Atualizar” e agora que demos
um espaço dentro da página vamos ver como é que ficou o trabalho.
Ora aí está, já temos o vídeo como fundo da página principal. Excelente trabalho!
Portanto, agora vamos ver como é que é para colocar uma imagem como fundo da página principal
em vez de um vídeo, portanto vamos voltar aqui à página “início”, clicamos em “Editar
Linha” e vamos desativar aqui o “Background Video” e vamos clicar em “Design”.
Aqui onde diz “Selecionar imagem”, clicamos e vamos buscar os arquivos ao ambiente de
trabalho. Podes fazer download desta pasta através do meu site em que tem estas imagens.
Portanto, vai a vivedanet.com onde podes fazer o download destas imagens. Vou escolher aqui
esta do ártico e agora vamos clicar em “Done”. É muito importante aqui colocar “Cover” em
“Exibição do Background” para a imagem ser a largura total do ecrã. Clicar em “Salvar”,
“atualizar” e vamos ver a página. Pronto! Como podes ver, uma imagem também
fica muito bonito como fundo, portanto é uma opção também para quem quiser, mas
vou voltar a colocar o vídeo e para isso vamos aqui clicar em “Editar Página”. De
seguida clicamos em “Editar Linha”. Isto é tudo muito simples, basta vir aqui
a “Design” e remover a imagem, obviamente quem quiser pode manter a imagem. Clicamos
em “Salvar”, de seguida podemos… podíamos ter feito tudo ao mesmo tempo, mas.. clicar
aqui para ativar o background e aqui em baixo vou colocar… está definido para o vídeo
pausar após 120 segundos, mas eu vou colocar bastante mais tempo para o vídeo ser contínuo,
portanto podes colocar aqui mais tempo e clicar em “Salvar”, “Atualizar”.
Portanto agora chegou a hora de colocarmos texto na página, colocar um título, um subtítulo,
um chamado à ação e isso é importante porque vai ser esse título e subtítulo que
vão explicar ao visitante em que é que o teu negócio ou site consiste.
Portanto, para nos basearmos vamos ver aqui o site da “airbnb” para tirarmos uma ideia.
“airbnb.com”. Como podes ver aqui o design da airbnb é muito simples, menu curto, bastante
espaço aqui , o título, o subtítulo, o botão com o chamado à ação.
Portanto vamos aqui no nosso editor de texto colocar um “Spacer”, vou dar aqui 200px e
vamos colocar algum texto. Vamos copiar aqui o título da airbnb. Tentar
fazer assim desta forma. Convém reparares também no tipo de linguagem
usado por estas empresas, portanto temos uma expressão grande que é o título, que é
para chamar à atenção para apelar às emoções e depois temos um subtítulo que é no fundo
mais explicativo. Entretanto, no editor vamos centrar o texto,
clicando aqui nesta barra em cima do lado direito abrem-se opções, como por exemplo
aqui o tamanho da letra. Vou colocar “Cabeçalho 1” que é maior para “BEM-VINDO A CASA” e
“Cabeçalho 3” para o subtítulo. Agora tinha-me esquecido de colocar aqui o
Spacer também em baixo para termos espaço em baixo.
Não te esqueças, tens de colocar sempre o Spacer. Vamos pôr a cor a branco, porque
o nosso fundo é escuro, “atualizar”. E ver aqui a página.
Como podes ver, o não está mau mas também não está ao nível que desejamos.
Se formos ver aqui à airbnb, as letras são bem maiores, com um ar mais profissional.
Como é que nós podemos fazer isso, colocar as letras de uma forma mais profissional e
colocar o botão em baixo? É muito simples, para isso vou até aqui ao painel e vou abrir
uma página que acabei de criar. Essa página é muito fácil de encontrares, basta ires
até vivedanet.com e, uma vez no site, vais encontrar um menu com o nome “Instruções”.
Clicas nesse menu e vais bater a uma página assim deste género. Nesta página, além
de teres o vídeo, tens aqui em baixo a opção para baixares o tema e aqui a opção para
baixares imagens, ou seja, aqueles fotografias de alta qualidade.
Agora, vamos até cá abaixo e onde diz “Criar a Página Principal” temos aqui um código
HTML que vamos copiar e colar no site. A palavra “span” no início indica o começo do texto
que queremos controlar, mas em ordem para o controlar temos de lhe dar um nome que é
a classe. Neste caso damos o nome de “inicio-titulo”.
Neste caso estamos a controlar o texto “INSPIRE” e o span final indica o final do controlo.
Já vais perceber melhor, por enquanto vamos colar este código no editor visual.
Vamos até ao editor visual. Podemos apagar o texto que estava aqui dentro
ou apagar o editor visual e substituir por um novo, clicando aqui, clicando no retângulo,
“Adicionar Widget” e clicarmos em “Editor Visual”.
De seguida vamos a “Editar”. Agora vamos colocar em modo Texto, clicado no separador “Texto”
do lado direito. o modo “Visual” é quando queremos escrever, o modo “Texto” é para
linguagem HTML, que é este caso. Repara que ao clicarmos em modo “Visual” só
aparece o texto que queremos controlar, que é o que está aqui dentro e podes escrever
aqui o que quiseres relacionado com o teu site, o teu negócio.
Portanto, esta parte é a parte que vamos controlar. Repara que fica apenas esta parte
no modo “Visual”. Mas vou voltar a colocar “INSPIRE”. Muito bem!
Agora vamos voltar a copiar um código que neste caso é o do subtítulo com uma classe
diferente. Neste caso, a classe é “inicio-sub”. Podemos dar o nome que quiseres à classe.
Aqui vamos copiar os botões. Copiamos o primeiro botão e colamos no editor visual. Clicamos
em “Enter” para vir cá para baixo e colamos. Agora vamos copiar o segundo botão. Selecionamos
e podemos colá-lo aqui à frente do outro botão. Não precisa de ser em baixo. Agora
clicamos em “Visual” e temos aqui o texto. Vamos selecionar o texto todo e centrar.
De seguida vamos adicionar um Spacer. Temos que adicionar sempre espaço. Aqui em baixo
vou colocar “300px” e em cima vou colocar “100px”.
A seguir clicamos em “Feito”, “Atualizar” e “Ver Página”.
Como podes ver, os botões já estão com ótimo aspeto, mas aqui a letra ainda tem
que ser controlada. Como é que podemos controlar a letra? Já temos os códigos. É muito fácil,
temos que vir aqui ao painel, clicamos do lado esquerdo em “Configurações” e, de seguida,
em “Google Fonts”. Se te lembras, instalamos um Plugin com este nome.
Agora em “Control Name” vamos escolher o nome do texto que queremos controlar, que é o
texto “Início Título”. Aqui podes dar o nome que quiseres. Clicamos em “Create Font
Control”. Aqui em baixo é que não pode ser o nome
que quiseres, em “CSS Selector” colocamos um “.” que na linguagem CSS significa classe
e escrevemos assim como está no código HTML, “inicio-titulo”. Vamos clicar em “Save Font
Control”. Já vais perceber como isto tudo vai fazer
sentido agora. Agora vamos só aqui a “Páginas”, que eu enganei-me num ponto aqui. Vamos à
página “Início”, “Editar” e vamos só apagar este Spacer aqui em cima, porque já vais
perceber como é que podemos controlar o espaço através de uma funcionalidade que temos aqui
no tema. Vamos atualizar e, de seguida, vamos aqui ao menu “Aparência” e clicamos em “Personalizar”.
Chegamos até aqui ao menu do tema e clicamos em “Typography”, de seguida, em “Theme Typography”
e podemos ver aqui a Font que acabamos de criar no Google Fonts “Início Título”. Aqui
temos várias opções, temos o estilo, a aparência, posicionamento, aqui na margem
podes ver aqui, como tinha falado podemos controlar o espaço, por isso é que não
precisamos daquele Spacer. Agora vamos até às instruções e temos aqui em baixo as
definições para o tipo de letra do texto “Inicio-titulo”. Podemos ver aqui, “Font Family:
Roboto”, o estilo 300, portanto, vamos colocar. Aqui em “Font Family” colocamos o tipo de
letra “Roboto”, selecionamos e clicamos fora da caixa para ficar selecionado.
Aqui em “Font Weight/Style” que é o estilo colocamos em “300”.
De seguida vamos definir a cor da letra, que é este código e o tamanho. Não é preciso
colocar o código, porque este código é o do branco, “#ffffff” é a cor branca.
“Em Font Size” colocamos em tamanho “100px” e aqui em “Line Height” vamos colocar a altura
da linha “0.8” e em “Letter Spacing”, que é o espaçamento entre as letras vamos colocar
“6px”. Temos aqui também o topo da margem, “Margin Top”. Vamos colocar primeiro “Letter
Spacing”, aqui podes definir o espaçamento que queres, “6px” para este caso.
Em “Positioning” vamos a “Margin”, “Top” e vamos colocar “183px”. Podes usar as teclas
do teu teclado para ajustar aqui estes últimos números. Não te preocupes com esta parte
aqui, parece que ficou mal, mas se formos “Salvar E Publicar” vamos ver que vai estar
tudo bem. Clicamos aqui para fechar. Vamos aqui “Visitar Site” e, como podes ver,
está tudo bem. Temos aqui o título bem situado com o tamanho da letra bom. Agora vamos editar
o subtítulo, para isso é muito fácil. Vamos aqui ao “Painel”, do lado esquerdo vamos a
“Configurações”, clicamos em “Google Fonts” e, de seguida, clicamos em “Create a new font
control” para criar uma nova Font. Aqui no “Control Name” vamos dar o nome “Inicio
Sub”, vamos tratar agora do subtítulo. Clicamos em “Create Font Control”.
Aqui em baixo no “CSS Selector” colocamos um “.” porque estamos a fazer uma classe e
“inicio-sub”, como diz no código HTML deste texto.
Vamos clicar ali em “Save Font Control” e agora vamos ver aqui as definições que temos
para a Font Inicio Sub, como podemos ver aqui.
Vamos então a “Aparência”, “Personalizar” e no lado esquerdo clicamos em “Typography”,
“Theme Typography” e temos aqui a nova fonte “Inicio Sub”. Clicamos e vamos colocar aqui
em “Roboto” em “Font Family”, selecionamos “Roboto” e clicamos fora para ficar selecionado.
Em “Font Weight/Style” vou colocar “300”. Agora vamos ver as outras definições, temos
aqui a cor e o tamanho. Vamos colocar o tamanho em “25px” e a cor é o branco.
Aqui vamos colocar o estilo, um pouco mais fino, clicando em 100, acho que fica melhor.
Eu depois vou mudar ali nas instruções. Agora vamos aqui ver as margens, nas instruções
diz 18 e 51. Vamos ver aqui “Positioning”, “Margin”, “Top”,
“18”, parece que fica muito distante, se calhar vou ter que alterar… pois, vamos usar outras
definições. Vou colocar aqui, no “Top” vou colocar a zeros e aqui no “Bottom” vou colocar
em “23px”. Portanto, vão ser as novas definições, depois eu vou atualizar nas instruções,
não te preocupes. Ok, “0” e “23”, vamos clicar em “Salvar” e
“Publicar”. E agora vamos “Visitar site” e podemos ver
que a página inicial já está com um aspeto mais profissional, mas agora vamos colocar
uma linha aqui em baixo com uma frase que inspire o visitante e para isso vamos até
às Instruções, vamos até cá abaixo
e podemos ver aqui as instruções para essa frase “Crie outro título para página principal”.
É aqui, vamos primeiro criar uma coluna de 100% no Page Builder, para isso vamos até
ao Painel, podíamos ter ido editar a página, isto é outra forma de chegarmos lá, não
é tão rápida, mas vai dar ao mesmo. Aqui em “inicio”, clicamos e vamos adicionar uma
nova linha clicando em “Adicionar Linha”, definir aqui as colunas para “1”, queremos
uma largura de 100%. Clicar em “Inserir”, de seguida, clicamos sobre o retângulo e
adicionamos widgets, neste caso, vamos adicionar o “Editor Visual”. A seguir vamos editar a
linha e colocar o separador “texto” porque vamos colar um código HTML.
Voltamos às Instruções e podemos copiar e colar este código HTML.
Temos aqui o span a abrir, a fechar e o texto a meio que queremos controlar, que obviamente
podes colocar o que quiseres aqui e, ao mudarmos para o editor visual, aparece apenas o texto.
Selecionamos e podemos centrar o texto. Clicamos em “Feito”, “Atualizar”. Agora temos
que trabalhar este texto, porque se formos ver agora a página
podemos ver que o texto tem letras muito pequenas,
por isso temos que criar uma nova fonte, usando o “Google Fonts” da mesma forma que fizemos
com o título e com o subtítulo. Para isso vamos até ao Painel. Do lado esquerdo vamos
a “Configurações”, clicamos em “Google Fonts”, clicamos em “Create a new font control”. No
“Control Name” vou colocar “Inicio Fazendo”. Clicamos em “Create Font Control” e agora
em CSS Selector vamos colocar como está no código HTML, “.” que significa classe em
linguagem CSS, “inicio-fazendo”. De seguida clicamos em “Save Font Control” e agora podemos
editar a Font em aparência, clicamos em “Personalizar”. Vamos às Instruções ver as definições
para a nova Font. Temos aqui a “Font Color”, já podemos copiar
este código. Aqui no menu do lado esquerdo vamos a “Typography”, “Theme Typography” e
temos aqui a Font “Inicio Fazendo”, “Appearance” para editarmos a cor. Podemos colar o código.
Aqui em estilos vamos colocar em “Roboto Slab”. Vamos ver se fica bem, eu não tenho a certeza
se estas definições são as melhores. Vamos experimentar aqui um pouco. Colocar o estilo
aqui a “300”. É o que está aqui, agora o tamanho “37px”,
como podemos ver aqui. Portanto, vamos colocar em Appearance “37px” também.
Eu acho que se calhar ficou demasiado grossa, vou colocar em “100” e ver como é que fica.
Gosto mais de como fica, em “100”, portanto vou colocar em “100” e talvez aqui em vez
de “Roboto Slab” coloque “Roboto”. Em Font Family” vou colocar “Roboto” e em
estilo vou colocar “100”. Depois vou atualizar ali nas instruções. Aqui em “Positioning”
vamos colocar uma margem de “25px”. Vamos agora guardar e visitar o site.
Clicamos aqui em “Visitar site”. E pronto, como podes ver, temos aqui uma bela frase,
com um bom espaçamento entre as letras, tudo ótimo. Agora vamos criar as três caixas
de destaque onde podes pôr os benefícios do teu site ou do negócio. É muito fácil,
vamos voltar aqui às “Páginas”, página”Início” e vamos criar novas colunas. Vamos clicar
sobre este retângulo para adicionarmos linha por baixo. Vamos colocar aqui o número “3”
colunas, cada uma de 33,3%. Vamos “Atualizar”. Agora vamos adicionar um widget. Já sabes,
é o “Editor Visual”, duplicamos duas vezes. Vamos ficar com três editores visuais e vamos
arrastar cada um para a sua respetiva coluna de 33. “Atualizamos”. Pronto, temos aqui três
editores visuais e agora vamos até um site muito bom chamado “logomakr.com”. Repára
que é “makr” sem o “e”. E neste site podes arranjar ícones ou logotipos grátis. Portanto,
é em inglês, se tiveres dificuldades basta usares o “Google Tradutor” para encontrares
as palavras que precisas. Podes editar à vontade aqui as cores do teu
logotipo, como podes ver, estou aqui a editar as cores, mas eu já tenho aqui um código
que criei, basta ir ao “vivedanet.com”, às instruções, copiar estas cores. Se desejares
o mesmo tipo de cor, vou colar então esta cor e pronto.
Agora em relação ao tamanho, gosto de usar 210 por 210 pixeis. Mais ou menos assim.
De seguida clicamos em “Salvar” aqui do lado direito. Podemos guardar no ambiente de trabalho
aqui em baixo e convém sempre copiar os créditos. Porquê? Porque estamos a usar material gratuito,
por isso é que eu criei aqui um documento com todos os logotipos e ícones que estou
a usar através deste site para dar crédito às pessoas que criaram estes ícones.
Depois vamos criar uma página de créditos no nosso site em que podes dar crédito a
quem te está a ajudar. Vamos voltar aqui à página início, clicamos
em “Editar”, “Adicionar Mídia”. Eu já tenho aqui os ícones, mas vou-te mostrar
como podes ir buscar. Basta clicares em “Enviar Arquivos”, “Selecionar Arquivos” e está tudo
aqui nesta pasta que fizeste download com as imagens HD com o nome “Icones”. Portanto,
vou selecionar este ícone da boia, clicar em “Inserir na página”. Agora vou clicar
em “Feito” e inserir os próximos ícones. Vamos agora ao próximo editor visual, clicamos
em “Editar” e vamos “Adicionar Mídia”, colocar este ícone das galerias e “Inserir na página”.
“Feito”. Agora vamos colocar o último ícone, “Adicionar Mídia”, vamos colocar este e “Inserir
na página”, “Feito”. Muito bem!, vamos atualizar e ver como é
que está a ficar o trabalho. Vamos aqui a “Ver Página”.
Está com um ótimo aspeto. Agora vamos colocar algum texto por baixo de cada ícone e depois
um botão que vai bater à respetiva página. Vamos então colocar o cursor à frente, clicamos
em “Enter” para vir cá para baixo e vamos dar aqui o título de “Serviços”.
Queremos que este ícone vá bater à página “Serviços”.
Vamos colar algum texto, colocar um “Spacer” para dar melhor aspeto.
Aqui antes do botão vou colocar um Spacer, em vez de “20px”, que é o normal, vou colocar
“15px”. Portanto, se quiseres copiar tem em atenção isso. Agora vou colocar em modo
“Texto”, porque? Porque vamos colar um código HTML e sempre que usamos HTML temos que colocar
em modo “Texto”. Vamos colar aqui o código para o botão e
queremos que o botão vá parar à página, neste caso, “Serviços”. Portanto, vamos apagar
onde diz “nosso-trabalho” e vamos escrever “servicos” com um “c” normal, porque é um
link, não usa carateres especiais. Portanto, é um “c” normal em vez do “ç”.
Aqui, como é um texto, podemos colocar o “ç” novamente.
Como podes ver, no modo visual, aparece “serviços” normalmente no texto. Vamos selecionar tudo,
centrar, clicamos em “Feito” e agora vamos repetir os mesmos passos para a próxima coluna.
Vamos colocar aqui o título “Nosso Trabalho”, colar algum texto, colocar o “Spacer” depois
do logotipo e depois do título. Colocamos também o Spacer de “15px” depois do texto
e antes do botão. Vamos colocar em modo “Texto” para colarmos
o código do botão. Copiamos o código e colamos.
Este não precisamos de alterar porque já está definido para a página “Nosso Trabalho”,
portanto basta centrar e clicar em “Feito”. Vamos “Atualizar” e ver como é que está
a ficar. E como podes ver, está com bom aspeto, agora
só nos falta alterar aqui o título para dar mais ênfase e distinguir o título do
texto. Vamos fazer primeiro o último ícone, a última
coluna, vamos a “Editar”. Aqui vamos dar o nome do título, neste caso é “Contato”,
colar o texto, vamos colocar o “Spacer”, “20px”, “20px” e aqui um “Spacer” de “15px” antes
do botão. Agora em modo “Texto”, sempre o mesmo procedimento,
vamos colar o botão e vamos alterar aqui o link para a página “Contato” e o nome do
botão em vez de “Nosso Trabalho” para “Contato”. De seguida colocamos em modo “Visual”.
Centramos, clicamos em “Feito” e vamos “Atualizar”. Muito bem! Agora vamos colocar os títulos
com “cabeçalho 3” para dar mais ênfase. Vamos aqui colocar todos os títulos com “Cabeçalho
3”. Clicamos em “Feito”. Agora o último, “Cabeçalho
3”, selecionamos e clicamos em “Feito”, “Atualizar” e vamos ver como é que ficou.
Como podes ver, está ótimo. Agora só precisa de algum espaçamento em baixo.
Vamos ver se vai bater à página que queremos, neste caso tem que ser a página “Serviços”.
Corretíssimo! Claro que temos que colocar esta página como deve ser, mas isso é mais
para a frente. E o que queria mostrar era realmente isto
aqui. Como é um link, não utiliza carateres especiais, portanto temos que escrever sem
o “ç”. Vamos agora confirmar que cada ícone vai bater à página respetiva. Portanto,
está certo o nosso trabalho, a pagina “Contato”. Agora vamos colocar um pormenor que temos
que fazer aqui, como podes reparar, o fundo não está completamente em branco, portanto
vamos aqui a personalizar. Mas a “General” e em “Background Color” vamos até cá abaixo,
selecionamos a cor e podes ver aqui o código, não é o código do branco porque o do branco
é seguido de seis “f”, portanto, podemos colocar em branco, “Salvar e Publicar” e vai
criar um maior contraste. Muito bem! Estamos a acabar agora a página
principal, vamos só colocar aqui chamado à ação em baixo, criar mais espaço. Um
chamado à ação que vá bater à página de Contato. É muito fácil, vamos aqui ao
“Painel”. “Páginas”, “Início”.
Vamos clicar sobre o último retângulo para adicionarmos uma linha por baixo com duas
colunas, cada uma de 50%. “Inserir”, vamos adicionar o “Editor Visual”
na primeira coluna e vamos editar. Colocamos em modo “Texto” porque vamos colar algum código
HTML e temos aqui o próximo passo que é adicionar um chamado à ação.
Vamos então copiar este código, como podes ver aqui com a classe “inicio-nosso”, portanto,
já sabes que vamos usar o Google Fonts para editar a letra.
Vamos copiar e colar no editor. Vamos agora copiar esta frase com a classe
“inicio-as” e vamos colar no editor. Aqui em modo “Visual” podemos ver.
De seguida vamos adicionar, como diz aqui nas instruções, um novo Editor Visual na
segunda coluna e criar um Spacer de 30px. Vamos clicar em “Editor Visual”, “Editar”,
colocar um “Spacer” de “30px” e vamos colar. Agora este código, que são 2 botões seguidos.
Colocamos sempre em modo “Texto” quando colamos HTML, colamos e em modo “Visual” podemos ver.
Agora vamos colocar “30px” em baixo também e clicar em “Atualizar”.
Podemos ir ver a página e como podes ver, os botões já estão com um ótimo aspeto
deste lado, mas temos que editar o tipo de letra do lado esquerdo. Como temos as classes
já vamos só criar agora a Font no Google Fonts em “Configurações”, “Google Fonts”.
“Create a new Font Control”. No “Control Name” vamos dar um nome, temos
aqui em baixo “Inicio Nosso” para editarmos a Font com o texto “Inicio Nosso”. Aqui em
baixo vamos dar o nome de “Inicio As” para editarmos o texto. As ações falam mais alto
do que as palavras. Portanto, vamos colocar aqui “Inicio Nosso”, “Create Font Control”,
no “CSS Selector” “.inicio-nosso”. Clicamos em “Save Font Control”.
Agora vamos a “Create a new font control” e vamos dar o nome de “Inicio As”, “Create
Font Control” e com o CSS “.inicio-as”. “Save Font Control”.
Agora vamos até ao menu “Aparência”, clicamos em “Personalizar” e do lado esquerdo vamos
a “Typography”, “Theme Typography” e já temos aqui as duas novas Fonts.
Vamos editar primeiro a Font “Inicio Nosso” com o texto “Nosso Trabalho”.
Temos aqui as definições, vamos ver se estão boas, colar aqui esta cor e colocar em “Roboto”.
Vamos pôr aqui “300” de estilo, na “Aparência” podemos colar a cor agora aqui este azul claro.
“35px” de tamanho, “0.8” de “Line Heights”. Vamos ver se fica bem.
“35px”, fica bem? “Margin”, “Top”, “38px”, se calhar já não
vai ser preciso colocar, pois como colocamos um Spacer, podemos pôr a “Margin”, “Top”
a zeros. Se não tivesse Spacer, se calhar já fazia sentido.
Vamos colocar agora as definições na outra Font.
“Inicio As”, “Font Family” “Roboto”, selecionamos “Roboto”, clicamos fora. Em estilo vamos colocar
“300” e “Aparência” acho que vou deixar esta cor, está bom assim. E “Font Size” vou colocar
a “19px”. Agora vamos ver em “Positioning” vou colocar
um pouco maior aqui a margem em baixo, talvez nuns “4px”. Depois vou atualizar nas instruções
para ficar como está aqui. Vamos “Salvar e Publicar” e ver como ficou
o trabalho. “Visitar site”.
Pronto! Está ótimo, agora só um pequeno pormenor, vamos colocar a cor de fundo diferente
da linha superior. Basta virmos aqui à linha, onde tem a chave
inglesa clicamos em “Editar Linha”. Do lado direito vamos até “Layout” e onde diz “Layout
da linha”, está em padrão, vamos colocar “Largura Completa” e em “Design” vamos à
cor, “Selecionar Cor” e vamos colocar aqui um código que é aproximadamente… é aproximado
do branco mas não é branco. Clicamos em “Salvar”, “Atualizar” e vamos
ver a página. E podemos ver aqui uma diferença, que é
ligeira, mas é o suficiente. São pormenores como este que fazem a diferença no design.
Bem, agora vamos colocar o logotipo aqui em cima, tirar este “Vive da Net” e colocar um
logotipo. Para isso vamos aqui a “Aparência”, “Personalizar”,
“Header Option”, clicamos em “Header Logo” e aqui podemos selecionar uma imagem.
Para arranjares um logotipo grátis podes vir aqui ao logomakr.com, eu já tenho o meu.
Vou escrever aqui “compass” e vou usar este. Colocando a cor aqui, o branco fica transparente,
portanto vou guardar, copiar os créditos aqui e já vais perceber como é que vai ficar.
Parece que desapareceu, mas não desapareceu, portanto, ao virmos aqui selecionar a imagem
podes vir buscar o logotipo, se quiseres usar o mesmo, está aqui nesta pasta “Imagens HD”
em logotipo. Portanto, vou selecioná-lo, “Abrir”, clicar em “Escolher Imagem” e vais
ver que vai aparecer com a cor do cabeçalho. Portanto, se colocarmos a branco aparece com
a cor de fundo. Vamos agora adicionar a página de créditos.
Clicamos em “Adicionar Nova”, damos o título da página “Créditos”, copiamos os nossos
créditos aqui, que estão em linguagem HTML. Portanto, vamos abrir aqui um “Page Builder”,
“Adicionar uma Linha” de uma coluna, “100%”, “Inserir”. Aqui vamos confirmar que está
em “Largura Completa”. Podemos ter o título porque é uma página
de créditos, pode dizer “Créditos”. Vamos agora colocar o “Editor Visual” em “Adicionar
Widget”, “Editor Visual”. Aqui no “Editar” colocamos em modo “Texto”
porque vamos colar HTML e colamos os créditos. Agora podemos colocar algum Spacer entre cada
frase. E se quiseres me dar crédito por este tutorial,
podes escrever aqui “Obrigado Tiago, Como Criar um site”, agora selecionas a parte “Como
Criar um site”, clicas aqui em “Inserir/Editar link”, aqui no URL metes o meu site “www.vivedanet.com”.
Podes clicar aqui “Abrir link em nova aba” e “Adicionar Link”.
Aprecio muito se fizeres isto porque é como se fosse um voto para o meu site, portanto
se este tutorial te ajudou, agradeço imenso que faças isso.
Portanto, vamos ver como é que ficou, “Ver Página”.
Aqui está a página de Créditos com um ar limpo e temos aqui já os links todos.
Muito bem! Agora vamos adicionar um rodapé aqui em baixo, para isso é muito simples,
vamos até ao “Painel”, “Aparência”, “Menus” e vamos clicar em “Crie um novo menu”. No
nome do menu vamos dar o nome de “Rodapé” e clicamos em “Criar Menu”.
Agora vamos adicionar as páginas que queremos no rodapé, a página de “Créditos”, “Contato”,
“Início” e “Sobre”. Clicamos em “Adicionar ao menu”.
Agora basta colocar na ordem que queremos. Vou colocar “Início” em primeiro, “Sobre”
em segundo e podem ficar assim estas. Aqui em baixo em “Configurações do menu” temos
que selecionar “Footer”, que significa rodapé em Inglês.
Clicamos em “Salvar Menu”. Vamos ver como ficou.
Temos aqui o menu superior, que é o cabeçalho e aqui em baixo o rodapé com outras páginas.
O próximo passo é fazer as páginas interiores e vamos começar pela página “Sobre”, portanto
podes clicar em “Sobre”. E podemos começar por remover o título e eliminar esta barra
aqui do lado esquerdo. Para isso podemos ir aqui a “Editar Página”
ou vamos ao “Painel”, até “Páginas” e encontramos aqui a página “Sobre”.
Clicamos. Em primeiro lugar vamos colocar o modelo da página em “Full Width Page”,
que é o modelo de Largura Completa. E vamos esconder o título clicando em “Hide Title”.
Vamos “Atualizar”. E ver como é que ficou.
Portanto, vamos começar com este ponto de partida, uma tela bonita em branco para construir
a nossa página “Sobre”. Vamos colocar uma imagem de alta definição bonita com texto
por cima. Vamos ver. Vamos aqui a “editar Página”. Clicamos em
“Page Builder”. Agora vamos adicionar uma linha, “100%”, “Inserir”, clicamos sobre o
retângulo, adicionamos o “Editor Visual”. Agora vamos aqui à chave inglesa do canto
superior direito para “Editar Linha”, em “Layout” selecionamos, no Layout da linha, “Largura
Completa”. Agora em “Design” vamos adicionar uma grande
imagem, esta aqui, que podes ir buscar aqui aos arquivos aqui na pasta que fizeste download
com as imagens com o nome “Ártico”. Se quiseres usar esta imagem, obviamente.
Portanto eu já tenho aqui, “Done”. Aqui em “Exibição do background” é muito importante
colocar “Cover”, que é para a imagem aparecer em Largura Total da página.
Clicamos em “Salvar”, “Atualizar”. Agora vamos colocar texto na página, para
isso vamos a “Editar” no Editor Visual, clicamos no separador “texto”. Vamos até às instruções
até onde diz “Criar a Página Sobre” e copiamos este código HTML com a frase que queremos
controlar. Temos aqui a classe. Vamos criar um Font Control no Google Fonts e aqui a meio
temos a frase que vamos controlar, que obviamente podes escrevr o que quiseres aqui. Vamos dividir
esta frase clicando em “Control” + “Shift” + “Enter”. Portanto, “Control” + “Shift” +
“Enter”, dá para dividir a frase. Colocamos em modo visual, selecionamos e vamos
centrar. Clicamos em “Feito”.
Clicamos em “Atualizar”. E se formos ver como está agora, obviamente
que não está bom porque temos que editar a Font e podemos criar o espaçamento com
o Google Fonts como vou mostrar agora. Portanto, vamos ao “Painel”, “Configurações”,
“Google Fonts” e vamos clicar em “Create a new font control” com o “Control Name” de
“Sobre Titulo”. Aqui no “CSS Selector” vamos dar o nome “.sobre-titulo”
e clicamos em “Save Font Control”. De seguida vamos à “Aparência”, “Personalizar”,
“Typography”, “Theme Typography” e temos o controlo aqui em baixo.
Agora podemos encontrar nas instruções as definições sobre a letra, o “Font Family”
é “Roboto”, escolhemos “Roboto”. Vamos clicar na página para ver como é que
está a ficar. Em “Appearance”, no “Font Size”, no tamanho
da letra, vou escolher “23px” como diz aqui e temos a “Margin Top” “174px”, que é a margem
do topo. Vamos aqui a “Positioning” e colocamos “174px” enquanto que a “Margin Bottom”, que
é a margem em baixo tem “316px”. Portanto, já está.
Agora vamos aqui a Estilos, não, vamos a “Aparência” primeiro e colocamos a cor padrão.
Eu tinha posto aqui branco por engano, mas podes deixar a cor como está. E em Estilos
colocamos “300”. De seguida, podemos “Salvar e Publicar” e
vamos ver como é que ficou. Muito bem! Já temos a primeira parte feita,
agora vamos fazer o resto da página. Para isso, vamos a “Editar Pagina” e vamos adicionar
uma linha para baixo desta linha. Para isso clicamos no retângulo e adicionamos uma nova
linha. Esta linha vamos fazer com 3 colunas de 15% no lado e 70% a meio. Portanto vamos
escrever texto a meio e não queremos nada nos lados. Vamos adicionar só o “Editor Visual”
a meio. Portanto, clicamos na do meio e adicionamos o “Editor Visual”.
Vamos até às instruções e temos aqui onde diz “Criar texto adicional na página sobre”,
podemos copiar este código HTML. Vamos até ao “Editor Visual”, clicamos em
“Editar”, abrimos o separador “Texto” e colamos o código, que tem uma classe com o nome “sobre-texto”,
será o nome que vamos dar ao CSS Selector no Google Fonts e aqui um texto a meio.
Vamos centrar, clicar em “Feito” e “Atualizar”. Agora vamos criar uma nova Font Control para
este texto, por isso vamos a “Configurações”, “Google Fonts”, “Create a new font control”
e vamos dar o nome de “Sobre Texto”, “Create Font Control”.
Na classe sempre colocar um ponto, “.sobre-texto”. Temos de colocar sempre como está no código
HTML. Como podes ver é sempre a mesma lógica para
todas as páginas, todas as Fonts, o resto do tutorial será mais do mesmo, por isso
vamos seguires os movimentos que faço com o rato, consultares as instruções no vivedanet.com
e ires pausado o video ou voltando para trás quando necessário.
Se eu voltar a falar no tutorial será apenas em momentos importantes, em momentos chave.
O mais difícil já está feito, até ao fim é muito fácil e alguma dúvida que tenhas
entra em contato comigo através do vivedanet.com Como é que podemos juntar estas três imagens?
Fácil, segue os meus passos. Repara que já não precisamos de editar este
texto aqui porque ficou automaticamente com as definições deste texto assim que fizemos
o “Google Font Control”. Vamos agora criar a página o “Nosso Trabalho”,
mas antes vou-te mostrar onde podes obter fotografias em alta definição. Vais a “unsplash.com”,
clicas aqui para ser mais fácil para ver e podes fazer o download de centenas de fotografias
em alta definição sem ter que pagar. Vamos então fazer a página “Nosso Trabalho”. Para o Design desta página vamos alternar três frases com três imagens em alta definição.
Vamos a isso! Agora vamos fazer a página “Serviços”. A nível do Design, o objetivo é termos uma frase aqui, uma imagem, uma frase, uma imagem,
uma frase, uma imagem. Portanto, vamos ter várias linhas. É muito fácil, basta seguir
os passos, vamos a isso. Agora vamos fazer a página de “Contato”. A nível de design, o objetivo é colocarmos aqui em grande em cima o Google Maps e em
baixo um formulário de Contato para as pessoas poderem mandar mensagens para ti. Vamos a
isso! Agora vamos editar os botões no canto superior
direito.

Only registered users can comment.

  1. Olá tudo bem com voce ? eu amo blogar e tenho uma dica que talvez voce vai querer saber tem um site na internet que os layouts ficam mais em contas bom eu acho nao sei voceis e tipo voce nao vai se estresar procurando como fazer porque eles ja sabem estao atuando nessa area a muito tempo um layout deles ficam 60 reais dependendo do tipo da um olhada no site deles e faz um orsamento com eles ! www.designerbrasil.com

  2. você me ajudou muito, valeu.
    amigo por que os meus artigos estão todos juntos, quando clico no nome blog, estão emendando um no outro

  3. Nem visualizei seu video todo e já meti like, pois vi de cara que é bom! amanhã começo meu site.
    Aqui no Brasil qual hospedagem você recomenda, melhor custoxbeneficio? obrigado!!!!

  4. Obrigada Thiago Dantas ,você me fez um bem danado.Nossa como eu aprendi!Sou muito grata por você compartilhar seus conhecimento.Parabéns pela didática,dedicação sem enrolação e por ajudar tantas pessoas. Espero aprender muito com você ainda. sucesso !Abraço!

  5. Olá, quando ativo o tema me dar varias mensagens com esses erros e não consigo fazer mais nada.
    (Warning: fopen(): https:// wrapper is disabled in the server configuration by allow_url_fopen=0 in /var/www/html/afhera.com.br/web/wp-content/themes/TESSERACT/functions.php on line 1255

  6. Bom dia como que faço para deixar mais de uma imagem na pagina inicio e que as mesmas vão sendo trocadas a cada 5 ou 10 segundos

  7. Fale Tiago. Seu video é muito bom amigão. Eu já havia assistido outros tutoriais mas o seu é o que melhor explica, de forma simples e direta. Muito Show! Agora me ajude numa seguinte questão. O segundo botão (nosso trabalho), ficou montado. Comom resolver isso amigo?

  8. boa tarde estou a fazer a instalação do wordpress, fique a meio da instalação esperei duas horas e hoje iria iniciar a construção do site, mas não encontro a pagina onde iniciar o processo, pode ajudar-me em como lá chegar. Não consigo mesmo. Preciso de ajuda.

  9. Olá Tiago, primeiro, muito obrigada pelo tutorial. Estou tendo um problema: apesar de ter instalado e ativado o plugin de video background, qdo vou editar a página, ele não aparece no menu lateral. Sabe o que pode estar acontecendo?

  10. Baixei plugin para a galeria de fotos, conforme vc falou, porém não mostrou como fazer a galeria.
    Muto bem explicado, porém preciso ainda fazer alguns ajustes no meu site.
    Tem algum video seu, explicando como faz a galeria de fotos, uma vez que pretendo voltar a trabalhar com fotografias em eventos.
    Abraço.
    Aguardo.

  11. olá tudo bem?. primeiramente gostaria de parabeniza – lo pelo excelente material que você disponibiliza para criação de sites e lojas virtuais tenho aprendido muito com você em seus videos tutoriais.
    no video tutorial sobre Como Criar Um Site Profissional Sozinho [WordPress] estou com uma dúvida naquela parte onde colocamos os dois botões lightbox no canto superior. fiz tudo conforme o tutorial porém quando eu clico no botão "ver video" abre a janela popup mas o play do video fica inativo (cinza e o video não roda qual configuração que fiz que pode estar errada?
    usei o plugin: lightbox plus colorbox 23 systems seria esse plugin mesmo ou tem outra versão caso tenha qual seria
    Novamente meu parabéns pelo videos fantásticos e muito obrigado sucessos.

  12. cara eu quero entender uma coisa , tipo é possivel ter um site ativo totalmente gratis ? pq existe hospendagem dominio essas coisas , é nescessario pagar para ter um site fucionando ?

  13. Olá Tiago, esse tutorial de longe é o melhor que já vi!!!!! Parabéns, ganhou mais um inscrito. Estou com uma pequena dúvida, não encontrei o botão do plugin Spacer na hora de editar a página, o que faço, me ajuda por favor?

  14. Você é simplesmente divino. Não pare nunca, você é a luz que faltava neste universo da criação didática .DIVINO

  15. Bom dia,
    Seu vídeo é simplesmente sensacional!
    Tive um problema agora, apareceu uma atualização para fazer do tema TESSERACT, atualizei e agora o meu sumiu, já fui nas configurações do menu e está selecionada a opção Header, mas ele não aparece no meu site, já não sei mais o que fazer, pode me ajudar?
    Obrigada

  16. Boa tarde. Entrei no site para me inscrever porém aceitei entrar pelo site em português hostgator.com.br e depois de registrado o domínio todos os passos desde e-mail de validação e acesso ao WordPress foram diferentes a ponto de não achar os mesmos comandos que vc apresenta no vídeo. Fiquei perdido e agora não sei como fazer a hospedagem… Fiz alguma coisa errada?
    O que faço? Como faço? Obrigado

  17. Não sei nem como te agradecer! Acabei de criar o meu site seguindo os seus passos e ficou simplesmente fantástico! Se eu tivesse feito qualquer curso não teria aprendido talvez nem 10% do que aprendi com você em 4 dias! Muito obrigado mesmo!

  18. Estou muito feliz por ter encontrado o seu canal, agradeço muito as suas vídeo aulas, continue sempre assim irmão!!! Valeu… tens um fã😉🖒

  19. Montei o site desse modo, ficou top no desktop, mas na hora que abro pelo celular ele desconfigura, tem algum plugin para corrigir isso?

  20. Quando eu baixo o tema ele não com os dois botões "Primary Button" e "Secundary Button" na parte superior direita do layout, como mostrado no vídeo. Alguém teve essa mesma dificuldade? Alguma luz pra solucionar esse problema?

  21. Olá Tiago, antes de mais parabens pelo tutorial.. Eu estou com um problema no background video.. O video funciona perfeitamente em desktop e mobile, no sistema operativo android. O problema é que em ios ele não me aparece. O que achas que pode ser o problema? Obrigado pela ajuda

  22. Olá Tiago, estou assistindo ao vídeo pela segunda vez para ver sacar os princípios usados antes de partir para ver o novo vídeo de "Como criar em 2018". Sou WebDesigner, mas nunca senti muita segurança em aplicar os meus conhecimentos para criar sozinha, e, claro, usar o código puro atualmente não é muito inteligente do ponto de vista em relação ao tempo gasto para isso. Bom, quero apenas lhe dizer que o seu trabalho neste vídeo trouxe-me bastante clareza, organização e vontade de iniciar novos trabalhos. Sigo aguardando novos treinamentos. Gostaria de saber se possui cursos ou treinamentos à venda, em qual site? Obrigada.

  23. Sensacional, Foi maravilhoso, excelente explicação e demonstração. Meus Parabéns. Você ajudou por demais, Acredite. Muitissimo agradecida

  24. Excelente o seu vídeo. Os plugins que vc usou facilitam muito a montagem do site. Vc está de parabéns! 🙂

  25. Quando instalo o tema , não aparece no menu superior o ( Primary Button e Secundary Button) , o que aconteceu?

  26. Ola, Amigo, a imagem de fundo em cada pagina esta ficando apenas uma parte da tela! sabe como corrigir?

  27. Fico agradecido de coração!Não sou de comentar em nenhum video, mas a clareza e qualidade, tanto do video como do conteúdo, fez eu tirar meu chapéu!!!

  28. Tiago, sen-sa-cio-nal seu tutorial! Vc não tem ideia do quanto me ajudou! Estava desesperada pq não conseguia entender uma vírgula do wordpress, mesmo tendo feito alguns cursos. Mas seu vídeo é muito completo, muito bom! Parabéns, dei os créditos a vc com gosto! Ganhou uma fã no Canal e uma seguidora assídua!

  29. Seus vídeos são muito bem explicados,de uma forma clara e objetiva.

    Agradeço-lhe por produzir um conteúdo diferênciado e que vem só acrescentar ao nosso aprendizado.

    Sim, curti me escrevi e compartilhei kkk.

    Gostaria de deixar uma sugestão de tema >> Betheme >>> uma vez que explica com tanta propriedade, adoraria ver aqui no seu canal !

    Que Deus o abençoe e fortaleça cada vez mais seu trabalho, obrigado !!!

  30. Oi Tiago,
    Muito grata por esse tutorial, tão claro e objetivo. Estou seguindo todos os passos.
    Obrigada por compartilhar seu conhecimento com a gente <3

  31. OLA TIAGO MUITO OBRIGADO PELO SEU CURSO. APROVEITO A PARA PERGUNTAR-LHE COMO POSSO MODIFICAR O MEU FORMULARIO DE ENCOMENDA DO WOOCOMMERCE ? AI PESSOAL SE ALGUEM TIVER A RESPOSTA TAMBEM é BEM VINDA !

    VALEU PESSOAL, E UM #TIAGO #VIVEDANET

  32. quando importo o tema TESSERACT da erro de php home1/csrribeiro/public_html/wp-content/themes/TESSERACT/functions.php on line 1255

    e quebra meu wordpress … tenho que ir no cpainel do hostgator e deletar o tema pelo file manager… alguma dica ?

  33. Olá, eu não estou conseguindo fazer o upload do vídeo para colocar no inicio da pagina, ele da um erro depois que termina de fazer o upload
    "HTTP ERROR", você poderia estar me ajudando?
    Obrigada

  34. Não tenho palavras para te agradecer! Muito obrigado mesmo , excelente didática.Em 1 dia consegui deixar o site pronto e orgulhoso do que fiz!

  35. Olá onde eu faço aparecer o menu para dispositivos moveis? quanto eu diminuo a tela nao aparece o menu para dispositivos moveis grato pela tutorial acabei de termina-lo complatamente

  36. Parabens, ,me ajudou muito e ja estou seguindo. Me diga uma coisa tenho duvidas como usar os elementos integrados do wordpress..um blog por xemplo dentreo do elementor, categorias, content etc…

  37. Tiago, primeiro obrigada pelo excelente vídeo. Mas não consigo mexer nos textos do meu site. ele só aceita tipografia por omissão e todo o texto, título e subtítulo, texto e sobre texto estão como parágrafo. Já incluí google fonts e coloquei a fonte conforme orientou com ponto(.). Exemplo .inicio-titulo mas ele não aceita tipografia por tema, somente por omissão. Onde estou errando? Grata

  38. Nossa, muito bom. Só tive um problema, minhas páginas ficaram uma embaixo da outra e não ao lado uma da outra, alguém pode me ajudar?

  39. Boa noite Tiago Você sabe como colocar menu diferentes em cada página, tenho 10 pagina cada uma dela quero colocar o menu diferente, wordpress! Grato.

  40. Oi Thiago, tudo bem? Parabenizo pelo video e os conteudos em seu site. Posso lhe pedir um grande favor, não estou encontrando o plugin Lightbox plus colorbox. Poderia me informar aonde posso encontrar em seu material? Grato

  41. Boa tarde!
    Você aplicou para o valor de 11 dólares ao mês para hospedagem ….isso quer dizer que:
    1 somente hospedar um mês e depois o site fica fora do ar .
    2 Ou todo mês renova esse valor ?

  42. boa tarde esta a dar um erro na istalação do tema diz que" O ficheiro carregado excede a instrução upload_max_filesize em php.ini." o que faço ?

  43. lll Ultimate Membership Pro +++ Ultimate Affiliate Pro
    precisamos da video aula correta ja pesquizei varios saite video e ate agora não achei nada que vale apena video aulas emboladas pobre complicadas video aula correta tenque ter detalhes duração do video 2 ou 3 horas e faser aos poco mais comuinto de talhes comuinta calma de pois e so unir video
    ja criei meu saite com 8 pagina pelo WordExpress,,, so quero ocultar 5 pagina se for posivel refaser as pagina omelhor voce amigo faser junto seu saite com agente objetivo ter botão logar e cadastrar para pessoas ter sua area de membro e o seu link de afiliado exemplo ao se cadastra ganha 10 ponto quem se escrever pelo seu link de afiliado ele ganha 1 ponto e a sim com todos se escreveu ganho 10 divulgo 1 pónto pois meu objetivo e vender e faser desconto atraves do ponto divulgado
    WordExpress

  44. 77 Ultimate Membership Pro +++ Ultimate Affiliate Pro
    precisamos da video aula correta ja pesquizei varios saite video e ate agora não achei nada que vale apena video aulas emboladas pobre complicadas video aula correta tenque ter detalhes duração do video 2 ou 3 horas e faser aos poco mais comuinto de talhes comuinta calma de pois e so unir video
    ja criei meu saite com 8 pagina pelo WordExpress,,, so quero ocultar 5 pagina se for posivel refaser as pagina omelhor voce amigo faser junto seu saite com agente objetivo ter botão logar e cadastrar para pessoas ter sua area de membro e o seu link de afiliado exemplo ao se cadastra ganha 10 ponto quem se escrever pelo seu link de afiliado ele ganha 1 ponto e a sim com todos se escreveu ganho 10 divulgo 1 pónto pois meu objetivo e vender e faser desconto atraves do ponto divulgado
    WordExpress

  45. O arquivo ultrapassa o limite definido em upload_max_filesize no php.ini.
    pessoal esta aparecendo esse erro aqui pra mim ja tentei varias coisas, eu fiz a compra de um servidor online e não deu certo, estão utilizei o xamp e esta dando esse erro e não sei como tirar, não pude prosseguir com a video aula por conta disso.

  46. Oi ótimo vídeo só um problema tem como me ajuda não consegui estalar o tema o que vc indicou no vídeo tem como me ajuda desde ja agradeço

  47. GoogleMaps .
    Mesmo depois de inserir a IPI Key o mapa do GoogleMaps não aparece na pagina. 
    Como resolver este problema? 
    Muito obrigado pelo magnifico tutorial.

  48. plug wp poder ter link de recompensar link de afiliadas exemplo compartilhar cada escrito ganhar pontos ao se escrever etc…

  49. Obrigado a todos pelos gostos, comentários e visualizações este foi o meu PRIMEIRO tutorial no Youtube. Nunca poderia ter imaginado que tivesse tido o sucesso que teve. Apesar disso, este tutorial já é antigo e recomendo assistires ao meu tutorial de criação de sites mais recente aqui: https://youtu.be/3o7AWmXSAfo

    Ensino tudo o que ensinei neste mas muito mais atualizado e profissional!

Leave a Reply

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