Transcrições
1. Apresentação: Olá, neste curso vou
te ensinar como criar um site de uma página com
WordPress e elemento, ou essa é a
maneira mais fácil de criar sites. E eu recomendo isso para iniciantes, pois você pode adicionar texto, imagens e outros elementos
ao seu site em tempo real e
movê-los com apenas alguns cliques. A melhor coisa sobre isso
é que você não
precisa ser um programador, então você não precisa
saber nenhum código. Não sei como criar
sites como um hobby, e tenho certeza de que
você conseguirá executar esses dois em pouco tempo. Então, se você está pronto para aprender como começar
a criar um site com WordPress e um elemento ou discurso visual para finalizar a compra. Como eu abordei tudo o
que você precisa saber, incluindo SEL,
vendo o curso.
2. Como escolher seu domínio, hospedagem e configuração de e-mail: Olá, bem-vindo ao curso. Agora, antes de mergulhar em qualquer coisa, você terá que comprar uma
hospedagem e um domínio. O domínio é basicamente o URL do
seu site como o Google, que está do meu
lado aqui. E a hospedagem é o seu servidor onde você
realmente terá seu site. Então, você pode simplesmente acessar
o Google e digitar serviços de
hospedagem, se não
tiver um. E aqui temos
algumas opções populares. Godaddy também é outra opção
popular. Mas para este curso, eu escolhi hospedagem ou apenas
porque essa opção é popular. Então, quando você acessa
o site, por exemplo vamos ao host stinger. Nesta opção, você
vai hospedar. E aqui temos a hospedagem
WordPress. E eu escolhi a segunda opção porque também temos
o domínio incluído. E isso é gratuito apenas
no primeiro ano, então você terá que
pagar novamente. E são apenas $10 por ano,
o que é bem barato. Então, basta selecionar a
segunda opção, que na verdade é a melhor
porque você
também tem o domínio e tem tudo o
que precisa incluído. E depois de configurar,
eles solicitarão o nome de usuário
e a senha do
seu site WordPress, e praticamente o
nome do nosso site e tudo mais. Depois de passar por esse assistente e concluir
a compra, você será redirecionado aqui. Este é um painel único do host e você clicará em Gerenciar. Você acessará o painel
do WordPress. Depois de entrar aqui, certifique-se de
ativar essa opção. Diz certificado SSL. Verifique se isso está ativo. O que isso é basicamente a
extensão do seu site. Então, se você olhar
aqui, na URL, temos HTTPS antes do domínio
real, certo? Portanto, essa é basicamente uma versão segura do seu site, porque
temos um bloqueio aqui. Então, se eu clicar
nele, ele diz Como diz, essa conexão é segura. Então, é basicamente
isso que esse certificado SSL faz. É basicamente uma camada extra de proteção para o seu site. E todo site
deveria ter isso. Tudo bem, então, depois
de ativar isso, você poderá acessar
o painel do WordPress. Você tem duas
maneiras de entrar nisso. A primeira é entrar aqui e clicar
em Editar site. Então, se eu clicar nele
e deixá-lo carregar. E é assim que vai
aparecer pela primeira vez. Você pode simplesmente pular
isso para clicar neste logotipo da WW aqui
no canto superior esquerdo. E esse é basicamente o
nosso painel do WordPress. E faremos algumas
mudanças aqui. Mas eu quero mostrar outra
coisa. Digamos que você tenha
acessado o painel
de uma maneira diferente. Há mais uma maneira. Você pode simplesmente abrir uma nova
guia no seu navegador. Basta digitar o
nome de domínio que você comprou. No meu caso, é esse one.com
slash WP menos admin. Isso é o que você
precisa digitar para acessar a área administrativa. Mas do meu lado, não vai aparecer. Deixe-me usar outro navegador. Eu vou usar esse. E você precisará
inserir o nome de usuário e a
senha que usou quando criou
a hospedagem ou a conta pela primeira vez e
fez a compra
do site. Portanto, você precisa adicioná-los
aqui e
poderá fazer
login no painel. Então é assim que ele pode
entrar no painel. Você pode usar o nome de usuário
ou simplesmente entrar na hospedagem ou no painel aqui e
clicar em Editar site. Outra coisa que
você terá que fazer. Você terá que ir até
a aba de e-mails. Eu já fiz um para mim. Mas depois de clicar nela, você verá uma
interface diferente aqui. E você terá a
opção gratuita de criar seu e-mail. Você clicará nele e será
redirecionado aqui. Deixa eu te mostrar. Tudo bem, vou clicar em contas de e-mail, criar uma nova conta de e-mail e você verá essa opção. Então, basicamente, você
terá que criar um e-mail personalizado para o seu domínio, porque isso
parece profissional, então você não usará o Gmail ou qualquer outra
coisa. Então, por exemplo, eu criarei um que diga
contato em meu domínio.com. Aqui, você inserirá a senha e
clicará em Criar nova conta. E é basicamente isso. Agora temos um
e-mail personalizado para seu domínio. E a maneira como você usa
esse domínio, por exemplo, você pode adicionar esse e-mail em seu aplicativo do Gmail ou em qualquer servidor de
e-mail que você queira usar. E a maneira de fazer isso é
entrando em e-mails novamente, vou clicar nessa seta. E vamos esperar um pouco. E aqui temos a opção de
configurar aplicativo de desktop. E aqui temos as
configurações. Então, se você quiser usar
esse símbolo para o Gmail,
por exemplo, deixe-me mostrar. Vou apenas entrar em make.com. Eu vou entrar aqui,
adicionar outra conta. Tudo bem? E eu farei isso. Eu não quero usar um Gmail. Acho que não consigo fazer isso a partir da minha
conta real do Gmail para o Chrome. Preciso fazer isso do meu telefone. Acho que não está
disponível no desktop. Você precisará
usar outro aplicativo. Acho que isso funciona
com o Outlook, por exemplo ,
deixe-me abrir, vamos fechar este. E se eu abrir o Outlook, o Outlook terá essa opção. Portanto, não está disponível
para endereço de e-mail. Sim, vou apenas
entrar em contato com o laboratório em x service.com. Tudo bem. E agora está me perguntando
que tipo de hemólise. E aqui, como você pode ver, deixe-me voltar. Essa. duas opções de conexão
com esse e-mail. Ele selecionará este. Terei que inserir
meu endereço de e-mail e senha e esses dois
servidores e as portas. Então, vou selecionar TOP. Teremos que
inserir o servidor, que é
POP escuro nesse e-mail. E a porta é 995. E então temos o servidor de
saída, que é o mesmo,
na verdade, é diferente. E-mail Smtp dot python dot. E entraremos no 4651. Tudo bem? E selecionaremos SSL, TLS. E para este também. Tenho a opção de selecionar
a raiz quadrada da criptografia. Sim. Em seguida, vou inserir
a senha aqui. E agora devemos ser capazes de nos
conectar a esse novo e-mail. Sim. Adicionado com sucesso. Sim, foi basicamente isso. Agora estou logado neste e-mail. Como você pode ver, é
assim que você faz login em um e-mail
personalizado. Esses são os passos. Na verdade, é muito fácil porque temos
as configurações aqui. E de outra forma, digamos, por exemplo que você não usou o host
singer e usou outro serviço de hospedagem que provavelmente
usará o cPanel. Portanto, esse é o painel popular e o mais popular, na verdade. Então, aqui temos
muitas guias. A forma como você cria um e-mail aqui é na seção de e-mail. Você vai para contas de e-mail, vai para Criar. E aqui você
digitará o e-mail desejado, praticamente a mesma
coisa e a senha. E então você será redirecionado para as
configurações novamente. Então, isso é muito fácil. A maneira de acessar o
WordPress a partir daqui é rolando
para baixo e você tem o gerenciador do Wordpress aqui na categoria
de software. E você tem duas
maneiras de registrar. Você pode clicar em
Login e será redirecionado para o
painel do WordPress instantaneamente. Ou você pode clicar em
Gerenciar usuários, adicionar usuário e criar um novo usuário para fazer login no painel do
WordPress
usando o link de administrador do WP,
como mostrei antes. Então é assim que você entra no painel
do WordPress. No próximo vídeo,
explicarei painel
do WordPress e também
instalaremos
os plug-ins. Eu vou te dizer
exatamente por que isso acontece. E sim, é basicamente
isso. Vendo o próximo.
3. Instalação e personalização do tema: Agora que estamos no WordPress, a primeira coisa que você
precisa fazer é acessar
a guia de aparência e
clicar nos temas. A partir daqui, adicionaremos um
novo tema aqui no topo. E adicionaremos um tema chamado
Astra, que é esse. Este é o melhor
tema gratuito que você encontrará. Clicaremos em Instalar e
depois o ativaremos. Lembre-se de que há
muitos temas aqui e também há muitos temas
personalizados. E falaremos sobre isso em um vídeo posterior deste
curso. Então, vamos ativar este e depois personalizá-lo. Então, agora ele está instalado,
novo tema ativado. E clicaremos em
Personalizar aqui. Como você pode ver, agora, temos várias
opções aqui. Cada tema tem essas opções. Basicamente. Alguns têm mais, outros têm menos. Então, vamos clicar em global e eu vou te mostrar
cada um deles. Então, aqui na topografia, podemos basicamente mudar as fontes
do nosso site, todas as fontes. Mas queremos mudar
as fontes a partir daqui, usaremos uma espécie de
plug-in ou aplicativo que nos ajudará a alterar as fontes em praticamente
todos os lugares do site. Então, queremos usar as
predefinições daqui. Mas eu só estou mostrando isso para você
para que eles também estejam
aqui. Então temos as cores. Você pode mudar as
cores a partir daqui. E também
poderemos
alterá-los com o elementor posteriormente. Você pode alterar
praticamente a cor do link. Como você pode ver,
este é um botão aqui dizendo
página de amostra do menu. Se eu passar o mouse sobre ele, a cor mudará para preto. Por padrão, a cor é azul. Então, podemos mudar
essas cores aqui. Você pode alterar as cores
dos cabeçalhos, que
são os títulos, o corpo dos textos,
que é esse, basicamente
a descrição
ou o parágrafo. E você pode alterar as
cores das bordas, do fundo lateral e assim por diante. Então temos contêineres. Você não precisará
mudar nada aqui porque vamos mudar
isso do Elementor. Então, vamos voltar aos botões
praticamente da mesma história. Você não vai mudar isso daqui. Tudo bem, editor de blocos,
você quer usar este. Tem nosso construtor. Isso é importante. Em nosso site, temos
cabeçalhos e rodapés. O cabeçalho é a
parte superior do site. Então é esse daqui. Aqui, podemos basicamente
adicionar nosso logotipo na parte superior. Podemos mudar nosso
menu e adicionar alguns itens extras, como os ícones sociais que
adicionei aqui. Então, por padrão, você
quer ter qualquer coisa aqui. Você pode simplesmente clicar no site, no
título e no logotipo, por exemplo, e selecionar um logotipo
para o seu site. Então, eu posso simplesmente navegar e selecionar meu logotipo,
que é esse. E vou clicar em Selecionar e
pular o corte ao cortá-lo. E, como você pode ver,
o logotipo está lá agora. Então você pode simplesmente ajustá-lo,
torná-lo maior ou menor. Muito fácil. E, por padrão, você também terá
essa caixa habilitada. Você simplesmente o desativará. Então, o Intune ainda mostra o texto. Então, eu posso simplesmente adicionar alguns ícones
sociais, por exemplo, e vou deixar assim. Em seguida, vou clicar
em voltar, voltar novamente. E optaremos pela
próxima, pão ralado. Você também não precisa
mudar isso. Se você acabou de adicioná-lo. Basicamente, ele adicionará a localização exata
em que você está
agora no site e a
mostrará o tempo todo. Então, isso não é útil. Isso é usado principalmente em sites de
comércio eletrônico. Temos produtos, então
você sabe exatamente em qual categoria você
está nesse site. No nosso caso, este será um site de
apenas uma página, então não o usaremos. Vou selecionar o
não e
vou para a próxima categoria. Então temos o blog.
Queremos usar o blog. Neste
curso específico, vamos nos
concentrar apenas na criação de
um site de uma página. Portanto, não vou usar
essas configurações. Esses são basicamente
apenas o layout. Tudo bem? Vou apenas clicar em publicar porque ele
não quer voltar. Isso acontece de vez em
quando, isso é um bug, então você só precisa atualizar a página e ela
funcionará depois. Temos layouts de página, praticamente a mesma coisa. Você não precisará
alterá-los daqui,
barra lateral, isso é para o
blog, você não vai mudar isso. Em seguida, temos o construtor de rodapés. É praticamente a mesma
coisa que o cabeçalho. Portanto, temos três seções. Você pode adicionar até três rodapés e também pode adicionar
até três cabeçalhos. Temos layouts diferentes
, como você pode ver aqui,
temos colunas livres. Aqui temos apenas dois, e aqui temos apenas um. Basicamente, ele pode clicar
em direitos autorais, por exemplo e alterar esse texto
sempre que quiser. Você pode adicionar um menu aqui. Podemos adicionar ícones sociais ou alguns elementos extras apenas
clicando neste botão de adição. E você pode fazer isso
adicionando um menu de rodapé. Se você quiser
ícones e widgets sociais, usaremos os
widgets mais tarde. Basicamente, pode adicionar
o que quiser. Ao usar um widget,
você pode adicionar imagens, calendários, o que quiser. Tudo bem, vamos
para a próxima. Desempenho. Você não precisa
tocar nesse. Identidade do site, ícone do site, que é o ícone do site, basicamente esse
pequeno brilho que você vê aqui na parte superior. Você pode alterá-lo com seu próprio logotipo do site. No meu caso, meu logotipo
não tem formato quadrado, então eu posso encaixá-lo. Agora vamos selecioná-lo para que
você possa ver como ele aparece. A pré-visualização normalmente não é boa, mas será exibida depois
quando eu atualizar a página. Então, aqui está uma prévia disso. Como você pode ver, não é
a melhor opção
que tenho, mas se você tiver um logotipo com formato quadrado, ele aparecerá aqui,
como você pode ver. Vou guardá-lo
para este curso. Tudo bem? E então eu
vou voltar e temos menus. Aqui. Você verá todos os seus menus. Você também pode criar um novo menu, mas criaremos
um novo menu
a partir do painel e eu
mostrarei mais tarde. Então temos widgets. Novamente. Você poderá adicionar esses widgets da seção de cabeçalho e rodapé que eu
visitei anteriormente. E vamos trabalhar com
eles posteriormente nas configurações
da página inicial do curso. Isso é importante aqui, você terá que
selecionar uma página estática e
criar uma página inicial. Por padrão. Você não
tem uma página inicial. Então, criaremos um
no próximo vídeo. Mas só para você saber,
você pode mudar isso
daqui e você deve mudá-lo. Porque se você
deixar assim, seu site será
um blog por padrão. É por isso que devemos
passar pela página estática e
selecionar a página inicial. Então, faremos isso mais tarde. Então você tem CSS adicional. E isso é estritamente para codificação, mas não usaremos nenhum
código neste curso. No próximo vídeo, mostrarei os plugins e mostrarei exatamente o que eles são
para ver o próximo.
4. Como instalar os plugins: Agora é hora de
entrar na seção de plugins. Então você vai para os
plugins, plugins instalados. E removeremos
tudo daqui. Você clicará neste
para selecionar tudo. E em ações em massa, você selecionará a ativação
se elas estiverem ativadas. Então vá para a ativação, aplique. Em seguida, você os selecionará novamente. E você selecionará, excluirá e aplicará novamente. E agora vamos instalar
apenas os plugins úteis. Então, você aceitará
Adicionar novo aqui. E adicionaremos os
seguintes plug-ins. Então, os plug-ins são basicamente
aplicativos que nos
ajudarão a fazer
coisas diferentes no WordPress. Então você precisará de um editor clássico. Neste, você
clicará em instalar. Agora. Isso facilitará a interface de
criação de páginas no WordPress. E então você clica em Ativar. Adicionar novo. Vamos instalar
outro chamado Yoast. Este, Install. Novamente, este nos
ajudará na otimização
do nosso site. Em seguida, procuraremos dinheiro na
velocidade da luz,
que é esse. Este também
nos ajudará na otimização
do nosso site. Isso também aumentará a
velocidade do nosso site. Agora vamos procurar
outro chamado duplicado. Publicar. Essa.
Outro tem 404 páginas. O primeiro. Agora teremos que procurar um
plugin para nossos formulários de contato
, chamado formulator. Exatamente esse. E outro
chamado Elementor. Este é o nosso construtor de sites. E você poderá criar
seu site em tempo real. E é muito fácil de usar. Você pode simplesmente arrastar e soltar o texto, movê-lo daqui para lá. E segundo, vai ser super fácil. Então, vamos ver se eu
esqueci alguma coisa. Eu tenho todos eles aqui. Então, esses dois, cookie, GDPR e Simple SSL. SSL tão simples. Ssl é basicamente um certificado
de segurança. E esse plugin ativará
esse certificado se ele, se ainda não estiver ativado. No meu caso, ele já está
ativado porque você vê esse ícone de cadeado aqui
perto do meu nome de domínio. Se eu clicar nele, ele
dirá que a conexão é segura porque eu tenho
esse certificado, certificado é válido, certo? Então, basta instalar
este plugin caso seu certificado SSL não
esteja habilitado. E mais uma: precisaremos
desse plugin GDPR de cookies. Então, acabei de instalar
este também. Na verdade, não esse, porque existem muitos
e parecem parecidos. Este cookie é o GDPR. Então, excluiremos
esse e instalaremos esse. Eles têm meio que o logotipo do Yahoo. Então, é muito parecido. E agora vamos para a seção Plugins
instalados. E excluiremos
essa conformidade com o GDPR. E vamos ativar
os outros. Então, as ações em massa são ativadas e aplicadas. E vou te contar resumidamente o que cada
um deles fará. Então, vou clicar em pular aqui
e clicar em Ativar SSL. Você não precisa
fazer mais nada, pode simplesmente ignorar
tudo daqui. E eles entrarão em plug-ins. Então, página 404, isso é
basicamente quando alguém insere uma URL errada
para seus sites. Então, se eu for ao meu site e errar, eu
digito outra coisa. Então, por KCSO result
com slash as D, por exemplo este é o fórum da página, mas criaremos um fórum
separado para página que terá um botão. Quando alguém
clicar nesse botão, ele o redirecionará para a
página inicial. Então, se eles entrarem em algum lugar errado, nós
os encaminharemos para a página inicial. Então, isso será útil para que
eles não saiam da nossa página. Depois, temos o
editor clássico, como eu disse, isso simplificará
a criação
do cookie de páginas como GDPR. Isso é necessário. Basicamente,
todo site tem isso. Portanto, ao acessar um site, você terá que
aceitar os cookies. Tenho certeza de
que você conhece essa cópia e exclusão de postagens. Você poderá facilmente copiar postagens e páginas
com este plugin. Então, isso simplificará tudo. Elementary é nosso
construtor de sites. Formulator seria o plugin que usaremos para
criar formulários de contato. Melhorou a velocidade
do nosso site. Este é o certificado e também nos ajudará a
otimizar um site. Então, esses são os plug-ins
que usaremos. E no próximo vídeo, mostrarei o
plug-in Elementor e como ele funciona.
5. Compreender o painel do Wordpress: Vamos usar o
painel da broca e eu mostrarei o que é
mais importante aqui. Então, temos a etapa de postagem. O primeiro passo é para o blog. Então, quando você estiver fazendo
suas postagens no blog, você entrará aqui e
clicará em adicionar novo. Você também pode selecionar a postagem do
blog que deseja. Você pode excluí-los
ou editá-los. Você pode fazer o que
quiser daqui. Digamos que eu esteja
excluindo esse. E eu quero criar
um novo clicando em adicionar novo. Aqui você adicionará o título da postagem. Então, digamos, dez maneiras de ter
um estilo de vida mais saudável. E aqui eu vou digitar
o que eu quiser sobre isso. Depois, você pode adicionar imagens, adicionar links e
o que quiser. Você também tem algumas opções
aqui para alinhar o texto,
colocá-lo em negrito e assim por diante. Então é basicamente assim que
você faz um post no blog. É muito, muito simples. Aqui você tem alguns padrões, como praticamente alguns modelos ou predefinições para essas postagens
específicas do blog de sangue. Mas você pode simplesmente ficar com
o padrão, se quiser. É bem fácil.
Aqui você criará as categorias para
a postagem do blog. Então, digamos que este esteja
na categoria saúde. Basta adicionar uma nova categoria, chamá-la de saúde e adicioná-la. E você selecionará essa
categoria para essa postagem específica. Muito simples. Aqui, você
inserirá as tags. Eles são muito
importantes e você deve adicionar tags
específicas ao seu tópico. Então, neste caso, temos saúde, podemos adicionar condicionamento físico,
estilo de vida e assim por diante. Tudo depende do
que você está escrevendo. Esses testes são úteis
porque você se virará dirá ao mecanismo de
busca
exatamente o que é importante
neste artigo específico. E praticamente o Google saberá exatamente quando mostrar esse
artigo com base nas palavras-chave. Então, sim, é
assim que você adiciona uma postagem. E você clicará em publicar
e, em seguida, terá o link aqui e poderá
acessá-lo onde estiver. Você tem a seção de categorias, a seção tributária, para que você
possa gerenciá-las aqui. Isso é simples. Então você tem
a seção de mídia. Aqui. Você terá todas as suas
imagens, vídeos e arquivos. Então, temos a seção
Páginas aqui. Você pode simplesmente criar e adicionar
novas páginas ao seu site. Bem simples. A
seção de comentários é para o blog. Aqui você verá todos os
comentários do seu blog. Você tem
comentários pendentes aprovados e poderá
aprová-los ou
rejeitá-los aqui. Então você tem o Elemental, que é o nosso plugin
e os modelos, este é o
plug-in de cookies para o GDPR. Você não precisa fazer
praticamente nada com isso. Você pode alterá-lo se quiser. Assim, você pode personalizar o
banner que aparecerá. Se eu clicar
no banner de pré-visualização aqui, você o verá. Então é assim que ele
aparecerá no meu site. Portanto, você terá que
clicar em Aceitar, aceitar
também os cookies, e é assim que
eles aparecerão e você sempre
poderá
fazer alterações nos cookies. Portanto, é praticamente
totalmente automatizado. Você também precisará
criar uma página de cookies
para o seu site. Então, aqui temos algumas opções e tenho
certeza de que você pode clicar em Personalizar banner e
poderá selecionar uma página
para seus cookies. Deixe-me ver se esse plugin nos
permitirá fazer isso. Aviso de cookie ou certo? Rotulado, rejeitado, leia mais. Sim, exatamente. Nesta seção do rótulo, você pode ativar o
link Leia mais e poderá inserir o URL em sua página específica para seu
cookie ou política de privacidade. Então, teremos que
criar uma página para isso. Mas se eu entrar nas páginas e
abrir uma nova guia aqui, você verá que, por padrão, WordPress criou uma, mas temos alguns
textos aleatórios adicionados por eles. Então, se você quiser mudar isso,
você terá que mudá-lo. Então, eu posso simplesmente copiar esse
link daqui, por exemplo, à direita, e simplesmente
inseri-lo neste URL. E quando
clicarem em ler mais, serão redirecionados aqui. Mas antes disso, teremos que
fazer algumas mudanças
que são importantes. Portanto, você terá que acessar
as configurações aqui e
outras leituras aqui, você terá que alterar isso. Portanto, a página inicial exibe a página inicial
porque, se você tiver feito uma, você clicará em salvar alterações para que sua página não apareça mais
como um blog. E outra coisa
sob link permanente aqui. Você precisará alterar
o formato do nome da postagem. Dessa forma, seus
links aparecerão exatamente
com o nome da sua postagem. Portanto, existem muitos
formatos, como você pode ver, mas esse é o
mais relevante, pois não tem números, datas
nem nada. E também clicaremos
em Salvar aqui. Em seguida, teremos algumas configurações
gerais. Você pode alterar o título do
seu site, o slogan, que é descrição do
seu site
que aparecerá no Google. Isso é importante. Você
terá que escrever algo relevante aqui
que inclua palavras-chave. Eles são um nicho específico para
nossa base, para nossos negócios. Então, se eu apenas pesquisar no Google, digamos, serviço de conserto de bicicletas, posso ver
minha concorrência. E, basicamente,
olha o que eles escreveram. E eu posso pegar alguns
exemplos e escrever algo assim
para mim, certo? Eu posso simplesmente pegar
algo
daqui e desta descrição e escrever algo para este site. Mas eu não vou escrever
nada para essa demo. Mas você entendeu. Aqui. Você pode alterar o
fuso horário do seu site, o formato da hora e o formato da data. Muito simples de entender. Deixe-me ver se é outra
coisa importante que eu
preciso te mostrar aqui. Você sempre pode examinar
os plug-ins e assim por diante, mas nós
os abordaremos mais tarde. Aqui temos os widgets. Então, deixe-me mostrar
o que são. Essa é a barra lateral principal. Então isso é para o blog. Portanto, você sempre pode editar isso, alterar os textos daqui,
se quiser traduzi-los ou escrever outra coisa em vez disso
, você pode fazer isso. Isso é para o cabeçalho. Assim, você pode adicionar um widget para
o cabeçalho e, em seguida, você poderá
adicioná-lo mais tarde se você apenas personalizar o tema, como
fizemos anteriormente aqui, e você poderá
adicionar qualquer um desses. Você pode simplesmente clicar em
navegar por tudo e
verá que temos
muitos widgets aqui. Então, você pode basicamente
adicionar tudo o que quiser no
cabeçalho e no rodapé. Então você tem calendários, por exemplo, pode adicionar isso na pasta, mas eles são muito grandes
e não terão uma boa aparência, então você não deve usá-los. Mas você pode adicionar
o que quiser. Isso é apenas
uma referência para que você saiba
exatamente o que pode fazer. K. E então temos os menus. A partir daqui, você
criará os menus. Então, basta digitar o nome do menu, digamos, menu principal, Criar. E você pode adicionar as páginas
diretamente daqui. Ele os detectará
automaticamente. Então, o WordPress
detectará isso para nós. E você também pode
adicioná-los por meio de links personalizados. Então, se você quiser usar a âncora do
menu
sobre a qual falei ou sobre a qual
falarei no próximo vídeo. Você precisará inserir
o URL aqui,
como seu site, por exemplo, .com, hashtag de
barra e uma parte
específica da sua página Digamos que você tenha seção
Serviços
em sua página inicial. Então, quando alguém
clicar nesse botão, será redirecionado para aquela parte específica da página. Mas vou mostrar, vou mostrar um exemplo também para que
possamos entender isso. Mas, basicamente, você
criará o menu a partir daqui. Você pode adicionar o link e o
texto que será exibido,
digamos, entre em contato conosco, por exemplo ou entre em contato. Para
simplificar isso adicione o site
com o link específico. Vou apenas adicionar o site
simples agora mesmo. Certo? Então, eu também posso adicionar um
botão home no menu. E praticamente tudo o que
você quiser sobre serviços. E então você cria
o menu a partir daqui
e, em seguida, selecionará
o que isso representa. menu principal é o menu principal e o menu externo do Canvas
é para dispositivos móveis. Portanto, sempre tire o menu
principal e saia do menu Canvas ao
mesmo tempo. A menos que você queira criar um menu diferente para o celular. Mas você deve sempre
ficar com esses dois. E então você clica em Salvar
e esse menu é criado. Aqui você tem o botão criar
um novo menu. Então, se você quiser criar
um menu para o rodapé, você pode criar um
menu para o rodapé. Basta adicionar o
menu de rodapé como o nome, por exemplo , selecionar o menu de rodapé
aqui e clicar em Criar. E então você apenas adicionará botões como eu fiz
com o anterior. Portanto, é muito fácil
de entender. Então é basicamente isso. Quando se trata do
painel, como ele funciona. Há muitos botões aqui, mas você não
precisará ativá-los. Talvez os usuários
também sejam importantes porque você pode adicionar outros administradores para acessar seu
site WordPress, se quiser. Então você clica em Adicionar novo aqui. Você adiciona o nome de usuário
desse usuário, um e-mail e a senha que é gerada
automaticamente, certo? Portanto, é muito fácil de usar. E aqui você
selecionará a função
desse editor de usuário específico para que
ele possa editar tudo
em seu site, de texto a imagens e assim por diante. Alpha é estritamente para o blog. Então, se quiserem criar uma postagem no blog ou uma
pequena postagem no blog, eles poderão fazer isso atribuindo-lhes uma função
específica. Então, sim, é assim que
funciona e também é muito fácil
a partir daqui. Então, esses são os mais
importantes do painel. Ao ver o próximo,
explicarei como
o Elementor funciona.
6. Elementor - Estrutura de sites - seções e colunas: Agora criaremos nossa primeira página e
falaremos sobre o Elementor. Então, vamos entrar em
páginas, todas as páginas. E, por padrão, você terá
algumas páginas criadas aqui. Excluiremos essa
página de amostra clicando na lixeira. E clicaremos em
adicionar novo aqui no topo. E criaremos uma
nova página chamada home. Em seguida, você clicará em Publicar. Agora, basta clicar em editar com o Elementor e
posso editar esta página. Então, como uma explicação simples, os
sites são divididos em
seções e colunas. Então, como isso funciona? Basicamente, se eu clicar
nesse botão de adição aqui, selecionarei uma estrutura
para essa seção específica. Eu posso basicamente dividir uma
seção em várias colunas. Digamos que eu esteja
selecionando esse. Temos duas colunas. Então, agora temos uma seção
que é essa borda azul, e dentro dela
você tem colunas. Esta é uma coluna que
eu posso arrastar e mover. E essa é outra coluna. Certo? Agora, cada seção e
coluna tem algumas configurações. Então, se eu clicar nesses
seis pontos aqui, diz a seção Editar,
vou apenas clicar nela. E essas são minhas configurações. Então, aqui temos
na guia Layout, temos a largura do conteúdo em caixa. E você deve
deixar assim. Se você clicar na largura total, veja o que acontece. Temos o limite
dessas colunas. Ele se estenderá
até a esquerda e para a direita. Então você pode fazer
isso em tela cheia, mas isso não vai parecer certo. Portanto, deve ir com caixas. Agora temos uma lacuna de colunas. Isso basicamente
aplicará uma lacuna entre a coluna em si e
o que está dentro dela. Eu raramente uso isso, então não devemos nos preocupar com isso. Essa é a altura
da coluna. Então, se eu selecionar ajustar
à tela, por exemplo agora essa coluna será
tão grande quanto minha tela. Se eu selecionar uma altura mínima, posso simplesmente ajustar a
altura desta forma. Então, muito fácil, certo? Você pode simplesmente adicionar uma
imagem de fundo por trás dela, por exemplo, como você pode simplesmente
ajustá-la a partir daqui. Agora temos a posição da coluna. Eu posso simplesmente ajustar
essas colunas na parte superior ou inferior, à direita. Muito fácil. Alinhamento vertical,
não se preocupe com isso, transborde, não se preocupe com isso. E você não
precisa usar nada disso. Algo importante
é a guia Estrutura. Isso basicamente
dividirá essas seções e
mudará o formato. Assim, você terá um menor e este é duas vezes
maior que o primeiro. E este vai reverter
praticamente a aparência. Então, se, por exemplo,
quisermos adicionar mais colunas, posso simplesmente clicar com o botão direito em uma coluna e
teremos uma nova coluna. Agora temos três deles. E se eu entrar
novamente em Configurações para esta seção
sobre a estrutura, agora temos layouts diferentes porque temos três deles. Portanto, você pode jogar com as estruturas da maneira que quiser. Sim, então é bem simples. Agora temos a guia de estilo. Na guia de estilo,
temos várias opções. Então, em segundo plano, temos duas opções, Normal e passar o mouse. mouse significa que quando você o
mouse sobre
um determinado elemento, ele se comportará de forma diferente. Então, isso funciona praticamente para todos os elementos que
você adicionará aqui, texto, imagens, o que quiser. Aqui dentro. Digamos que eu esteja
adicionando um plano de fundo. Temos várias opções. Posso selecionar um fundo
simples, clássico ou colorido, se quiser, por exemplo, bem simples ou uma imagem. Aqui temos a opção de
gradiente. Então, podemos basicamente fazer uma combinação
entre duas cores. Então, podemos ter um plano de fundo
diferente. Então eu posso acrescentar talvez
algo assim. Você também pode alterar a
localização das cores, o ângulo, o tipo. Muito fácil de entender. Você pode simplesmente brincar
com ele se quiser. Vou apenas remover isso e adicionarei uma imagem
de fundo. Você também pode adicionar um vídeo,
como pode ver aqui. Você tem a opção de
fazer o vídeo ser reproduzido novamente. Comece de uma
segunda vez específica, o link do YouTube e assim por diante. Você também pode adicionar a
apresentação de slides de várias imagens. Loop infinito significa
que essas imagens
mudarão continuamente e se
repetirão basicamente, a duração
mudará uma vez a cada 5 s, 1.000 milissegundos é 1 s. Tipo de
transição,
animações diferentes, quanto tempo leva para que o tipo de plano de
fundo de transição específico. Então você pode simplesmente jogar com essas opções e
mostrar para você o que é isso? Então, se eu selecionar, por exemplo uma imagem como capa,
selecionarei esta. Criar, inserir. E agora, por exemplo, essa
tecla de efeito Burns adicionará um bom
efeito de zoom à minha foto. Mas primeiro eu tenho que
fazer alguma coisa, eu tenho que selecionar a capa. E deve funcionar,
mas tem alguns problemas. Então, deixe-me mudar isso. Vamos selecionar o ajuste à tela. E eu vou entrar na moda novamente. E vamos tentar agora. Deve haver algum viés
porque geralmente funciona. Talvez se adicionarmos
mais um, isso resolva. Vamos adicionar mais uma foto. E vou acrescentar,
digamos que este. Sim, e agora funciona. Como você pode ver, ele diminui o
zoom da imagem lentamente, o que parece muito
legal, na verdade. Então, se você quiser cancelar
esse loop infinito, podemos fazer isso usando isso. E não vai fazer isso
para sempre, certo? Então, é muito legal. Agora, se eu remover isso também, por exemplo, e eu quiser adicionar
uma imagem simples. Posso fazer isso clicando no clássico e
selecionarei uma imagem. Aqui mesmo. Temos certas opções. Agora, eu posso simplesmente selecionar o posicionamento
da imagem se eu quiser. Eu posso selecionar os
anexos, o tipo. Então, por exemplo, se eu selecionar
fixo e rolar, a imagem ficará parada. Mas isso criará
um efeito interessante. E para rolar, a imagem se
moverá com o pergaminho. Então, sim, muito simples. Agora, repito, isso
é autoexplicativo. Basicamente, se você não
quiser que uma imagem se repita, como você pode ver agora com
desaparecida porque ela estava se
repetindo porque a
resolução não é perfeita. E se tivermos alguns pontos vazios, ele
se repetirá automaticamente . Então, não queremos isso. E sob o tamanho, posso
selecionar uma capa, por exemplo, para que agora a imagem
se estenda e caiba em toda a tela, o
que é melhor. Aqui temos uma sobreposição de fundo. Basicamente, podemos
adicionar outra cor na imagem sobre essa imagem. Então, por exemplo, se eu quiser
escurecer esta imagem, posso simplesmente selecionar o tipo de
fundo, clássico, e selecionar
uma cor preta. E agora essa imagem está
mais escura e você
também pode ajustá-la
daqui. Bem simples. Aqui temos a opção de passar o mouse. Então, deixe-me mostrar
o que isso faz praticamente todos os elementos. Então, se eu clicar em passar o mouse e quiser mudar essa
cor preta para outra coisa. Quando você passa o mouse sobre ele, posso simplesmente selecionar o clássico, por exemplo e selecionarei um vermelho. E agora a imagem
fica vermelha quando eu passo o mouse sobre ela. Bem simples. E isso pode funcionar com botões, texto, imagens e praticamente
tudo o que você quiser. Tudo bem, então vamos remover isso. Então. Nós temos fronteiras. Basicamente, você adiciona
uma borda ao redor cada forma, seção ou coluna. Então, você pode praticamente adicionar uma
borda aqui, se quiser. Temos algumas opções. E aqui está a
largura da borda. Então, digamos, dez pixels. Agora você pode ver que a
borda ao redor dela
também pode mudar a cor dessa
borda sempre que quiser. Então é assim que
essa fronteira funciona. Você também pode adicionar
um raio de borda. Então, isso basicamente
criará algum tipo de forma para nossa coluna de seção ou qualquer elemento ao qual você
queira adicionar uma borda, digamos 50 pixels. E agora, como você pode ver, esta seção está ao
virar da esquina. Então é isso que a fronteira faz. Você pode simplesmente
aumentá-lo se quiser, certo? Isso funciona melhor para imagens, só para você saber, então
selecionaremos zero. Você também tem a opção de
desvincular os valores aqui para
poder adicionar o valor que
quiser , independentemente um do outro. Então, neste caso, vou
apenas removê-los. Então temos divisores de forma. divisórias de forma são elementos de design muito
legais. Então, por exemplo se eu quiser adicionar uma
na parte inferior da seção, aqui temos as opções e posso simplesmente percorrê-las. Então é assim que parece. Muito legal, certo? Você também pode mudar a cor. Como sempre. Com a altura,
podemos invertê-la. Então, sim, é um efeito
muito legal e você tem muitos deles. Então, vou remover esse. Então temos a topografia. Basicamente, você pode alterar todas as fontes
nesta seção. É por isso que eu te disse que
você não precisa transformar isso em fama anteriormente. Mas também podemos mudar isso individualmente para
um elemento específico. Então, simplesmente não toque nisso. Você não precisa
mudar nada. Agora também temos o aplicativo
avançado. E aqui nos
preocuparemos apenas com algumas coisas. Margem. O que é isso? Então, basicamente, ele adicionará um espaço entre essa seção e
o elemento acima dela, ou o elemento que está
na parte inferior da seção. Então, se eu quiser adicionar
50 pixels na parte superior, agora temos um
espaço entre a seção
e o cabeçalho. Como você pode ver, muito fácil. Você também pode desvincular
os valores e adicionar apenas 50 pixels na parte superior
e zero na parte inferior. Certo. Tão fácil de entender. Agora, o preenchimento é o
oposto da margem, então ele adicionará um espaço dentro da seção ou
coluna real ou qualquer
elemento que você tenha. Então, por exemplo, se eu quiser arrastar, digamos que um título
seja um título nesta coluna. Aqui dentro. Eu posso editar esta coluna, ir para Avançado e
adicionar alguns espaçamentos. Agora temos algum
espaço entre o elemento e
a coluna real. Muito fácil de entender. E, como você pode ver,
podemos
arrastar esse elemento
sempre que quisermos. Então, vou clicar com o botão direito do mouse
nele e nos litros. Vamos voltar às configurações. E, sob o nível avançado,
temos algo mais. Não me importo com isso. Você nunca os usará. Eles são mais complicados e eu quero simplificar
isso aqui. Aqui temos efeitos de movimento. Você pode adicionar efeitos a colunas e elementos
onde quiser. Então, vamos selecionar um efeito
saltitante, por exemplo, e como você pode ver, que estava em vigor em toda
a seção. Aqui temos o botão responsivo.
Isso é muito útil. Então, você pode basicamente ocultar
certos elementos, se quiser. Você pode ocultar essa coluna, por
exemplo, para celulares. Esconda-o para usuários de desktop
e mostre no seu celular. Você pode fazer isso.
E isso é basicamente tudo quando se trata das
configurações desta seção. Agora, a coluna tem
praticamente a mesma configuração, mostrará a largura de duas colunas. Você pode mudar isso se quiser, mas não precisa.
Alinhamento vertical. Você quer mudar isso.
Alinhamento horizontal. Você quer que as cadeiras decidam,
esse importante espaço de widget. Então, basicamente, isso
é, por padrão, 20. Então, se adicionarmos vários
elementos aqui, digamos que eu esteja
adicionando o título e depois queira adicionar um botão. Você verá que há
um espaço entre eles. E a maneira de
mudar isso é
acessando as configurações. E você terá que alterar o espaço do widget aqui
para que eu possa defini-lo como zero. E agora eles estão
próximos um do outro. Então, isso é
basicamente quando se trata das configurações da
coluna e da seção. Essas configurações
aparecerão praticamente em todos os elementos
que queremos adicionar. Então, se você adicionar um botão, os textos estão encabeçando uma
imagem, como você quiser. Eu posso simplesmente clicar
na caneta e editar. Você tem as
configurações individuais e, em seguida, o estilo e as configurações
avançadas para praticamente todos os elementos. E eles são muito, muito
parecidos. Nós temos fronteiras. Podemos editar o texto, cor de
fundo, cor,
quatro elementos e assim por diante. Então, é muito fácil. Então, vendo o próximo vídeo
,
explicarei alguns elementos
do ensino fundamental.
7. Elementor — como usar e personalizar os elementos: Vamos agora escolher os elementos, esse elemento ou tem. Então a primeira é a
interseção aqui, certo? Vamos, deixe-me fechar esse. Aqui. Temos uma seção
com uma coluna, certo? Se eu arrastar essa interseção
dentro da coluna, agora tenho duas colunas
dentro da coluna. Então, basicamente, isso criará uma pequena seção que também pode
ter colunas internas, mas você pode fazer isso
dentro da coluna. Então, se eu quiser, por exemplo, adicionar mais
duas colunas
abaixo dessas duas, posso fazer
isso adicionando esta abaixo. Mas se você quiser, por exemplo,
significa que são dois. Se você quiser adicionar,
se quiser adicionar, digamos, uma nova coluna aqui, à esquerda e à direita, e quiser
adicionar mais abaixo. Você pode fazer isso
clicando com o botão direito do mouse. Você pode arrastá-los para baixo. A única maneira de fazer
isso é adicionando, adicionando interseções
dentro das colunas. Dessa forma. Então agora eu posso
simplesmente arrastar a outra interseção e ter
várias, certo? Então essa é a única
maneira de fazer isso. Se você quiser adicionar
mais abaixo, basta excluí-los e removê-los, se quiser. E eu posso simplesmente excluir
isso e ter apenas um, e então adicionamos mais um, dividimos isso em, essa é a melhor maneira de fazer isso. Você não precisa adicionar
várias colunas. Você pode simplesmente clicar com o botão direito, por exemplo ,
agora
e adicionar três deles, e todos eles estão
dentro dessa interseção. Assim, você pode adicionar mais abaixo. É isso que a
interseção faz. Então, temos
elementos simples, como texto. Você pode simplesmente
alterá-lo aqui digitando. Podemos adicionar um link para esse texto. Então, quando alguém clica
nele, ele o
redireciona para esse link específico. Você pode alterar o
tamanho a partir daqui, mas eu não recomendo
trocá-lo daqui. Faremos isso acessando
a guia de estilo. E aqui temos a
tag HTML que é importante. Você deve ter apenas
um H1 por página. Portanto, apenas um H1 por página. Isso é muito importante
para o seu SEO, o que significa otimização de
mecanismos de busca. Portanto, isso é muito importante para o mecanismo de pesquisa do Google e os outros mecanismos de pesquisa,
pois você lhes
dirá exatamente quais palavras-chave são importantes
para você no seu site. Portanto, neste H1, você deve sempre adicionar palavras-chave
importantes. Então, no meu caso, escreverei serviços profissionais de conserto de
bicicletas, certo? Então, vou centralizar isso, por exemplo vá para o estilo e eu posso mudar
a cor do texto. Também posso alterar a fonte
clicando na panorâmica aqui. Portanto, temos muitas fontes. Vou apenas selecionar um que
eu goste, que é ferroviário. E você pode simplesmente ajustar
o tamanho a partir daqui. Bem simples. Aqui você
pode ajustar o peso, que significa a espessura
da fonte real. Você pode selecionar a
opção em negrito ou o que quiser. Você pode
transformá-lo em letras maiúsculas. minúsculas, n capitaliza
o primeiro. Novamente, temos
estilo, altura da linha, que adicionará um espaço entre o texto e a parte superior ou
inferior. Bem simples. espaçamento entre letras pode criar alguns efeitos
interessantes com isso. E também o espaçamento entre palavras. Então, sim, bonito, muito
fácil de personalizar e usar. Então você tem o traçado do texto. Isso é basicamente um
esboço ao redor do texto. Então, digamos que eu esteja selecionando vermelho e aumentarei isso. Como você pode ver, esse vermelho
está ao redor das letras. Em seguida, temos a sombra do texto. Você basicamente adicionará uma
sombra aos textos reais. Assim, você pode aumentar o
desfoque, o que aumentará o raio. Também podemos reduzi-lo, por exemplo
, você pode simplesmente
ajustá-lo a partir daqui. Então você pode ver
a sombra agora se movendo. Então você pode fazer algo
assim, se quiser. Você pode
personalizá-lo como quiser. Você tem muitas opções. E se você quiser
removê-lo, clique nele para
voltar ao padrão. Portanto, ele pode lidar com
praticamente tudo aqui. Simples. Você não precisa
mexer com o modo de mesclagem. Você pode jogar com
ele se quiser. Mas eu praticamente nunca o usei. E então temos as
configurações avançadas que são
praticamente o mesmo preenchimento de margem. Você não precisa
digitá-los aqui. Efeitos de movimento para
animações, certo? Simples. Fronteira. Se você quiser adicionar uma borda
ao elemento específico aqui, e a opção Responsive para ocultá-la no desktop, no
celular e assim por diante. Você não precisa
tocar nos outros. Então, essas são praticamente as mesmas configurações
para cada elemento. Deixe-me remover
este clicando com o botão direito do mouse e excluí-lo. Se eu, se eu adicionar uma imagem, por exemplo, aqui, você pode adicionar
a imagem em si. Você o seleciona na
galeria onde você o carrega. Em seguida, você seleciona o tamanho. Qualquer tamanho que você quiser. Legenda de alinhamento, que
é basicamente essa. Então, se eu clicar na imagem aqui, terei um campo de legenda. Então eu posso digitar algo. Se eu quiser mostrar essa legenda. Em seguida, também posso selecionar uma legenda
personalizada para que eu possa digitar algo que seja texto, por exemplo você também pode adicionar o
link, se quiser, ou se você selecionar o arquivo de mídia em vez do URL,
que é o link. Se você clicar nele
, ele aumentará o zoom. Muito autoexplicativo. Então, vamos clicar na
caneta novamente para editar isso. E a caixa de luz tem,
por padrão, anos. Então foi aquela coisa
quando eu cliquei
nela e é alguma coisa,
esta é uma caixa de luz. Tudo bem? Em estilo, temos
a opção de tornar essa imagem maior ou
menor, ajustar a altura, a largura e assim por diante na borda. Novamente, as
mesmas configurações também podem adicionar a legenda,
que era o texto. Então você pode mudar a cor, que está na parte inferior aqui. Alinhamento. Certo? Sombra,
praticamente a mesma coisa, espaçamento entre o
texto e o elemento. Então, essas configurações,
você praticamente as
encontrará em
praticamente tudo. Deixe-me mostrar
os diferentes. Então você tem divisores. Deixe-me remover o plano de fundo para isso ou vamos simplesmente remover esta seção e adicionar a nuance para que tenhamos
um fundo branco. Então divisor. Isso é basicamente uma linha que você pode adicionar
entre os elementos. Isso é principalmente para fins
de design. Então você tem muitas
opções aqui. Deixe-me ir até eles
usando a tecla de seta para baixo. Então, como você pode ver,
temos muitas variações que são bem legais. Você pode alinhá-los aqui. Então, se eu alinhar isso ao centro
e ajustar a largura, posso torná-lo
maior ou menor. Também posso adicionar um
texto intermediário. Por exemplo, eu posso digitar
algo como venda. E você só precisa mudar
qualquer outra coisa aqui. Em estilo, temos
as mesmas configurações. Você pode ajustar o peso,
que é a espessura, o tamanho disso, a quantidade de linhas, certo? O espaço entre
o divisor real e a parte superior e inferior. Também podemos editar o texto. E aqui temos
as mesmas configurações. É isso que um divisor faz. É basicamente um elemento de design. Então temos um espaçador. Isso adicionará um
espaço entre seus elementos. Então, se eu adicionar um botão
aqui, por exemplo na parte superior, aqui temos o espaço que podemos
aumentar se você quiser. Como você pode ver,
deixe-me adicionar isso no topo, porque
será melhor assim. Parece que tenho um problema de interface e ele
não me permite movê-lo. Isso acontece de vez em
quando, então não se preocupe. Então, nesse caso,
vou apenas excluir isso e adicioná-lo novamente, e vou adicioná-lo
na parte superior. Então, como você pode ver agora, estou aumentando o
espaço para isso. É assim que funciona. Como você pode ver aqui,
temos um botão, que
possamos
ajustá-lo para celular, tablet e desktop,
para que
possamos sempre fazer alterações em uma interface específica. Também temos pré-visualizações para
celular ou tablet a partir daqui, que você
possa otimizar seu
site em tempo real. Bom. Agora vamos entrar em algum outro
elemento que é diferente. Então, deixe-me dar uma olhada aqui. Você tem o mapa. Isso é autoexplicativo
e fácil de usar. Certo? Deixe-me removê-lo
e adicionar mais uma coluna. Você tem ícones, caixa de ícones, caixa de imagem não pode ser
classificada com estrelas, certo? Bem simples. Alinhe-os, altere a classificação por estrelas. Aqui mesmo. estilo avançou nas
mesmas configurações. O que mais é um carrossel de
imagens diferente é basicamente uma galeria. Então, você adiciona várias
imagens aqui, por exemplo, e pode selecionar o tamanho que
deseja que as imagens tenham. Mas isso não vai mostrar que a imagem é maior porque eu tenho duas
colunas e elas estão divididas. Então, se eu excluir essa coluna, por exemplo, agora tenho a opção de
aumentá-la, certo? Muito simples. Quantos slides
você quer mostrar. Você pode alterar a navegação, que são pontos e setas. Você pode alterar a cor
desses pontos e setas. Você pode alterar os
ícones para eles, pode adicionar um link para eles. Você pode mostrar a legenda. E em opções adicionais,
você pode simplesmente desativar essa reprodução automática, pois ela as
percorrerá continuamente. O avanço do estilo
é praticamente o mesmo. Muito simples de entender. Então você tem o ícone básico, galeria é
praticamente a mesma coisa com o carrossel de imagens. A caixa de imagem é basicamente
uma imagem na parte superior. Então você tem um título
e uma descrição. Você pode adicionar um link se
alguém clicar nele, certo? estilo de posição. Você pode editar tudo, imagem, o que quiser. Conteúdo do editor,
que é o texto, o título e o texto da
descrição. Muito, muito simples
de entender. Então, vamos escolher
o diferente, que é a âncora do menu. Usaremos este para
navegar em nosso site. Então, por exemplo, se eu adicionar um
botão aqui dizendo contato e eu adicionarei a seção de contato
neste site. Se eu colocar essa âncora específica
acima do texto do contato, posso simplesmente vincular esse botão
a essa âncora e isso levará esse visitante específico
a essa seção específica. Quando clicarem em contato,
eles irão para lá. Então, isso é basicamente um link para um
local específico no site. Então, vou apenas
removê-lo e
mostrarei como isso funciona mais tarde. E eu acho que quase
tudo é parecido aqui. Então, tudo é
configurável da mesma maneira. Talvez contadores, mas
isso também é simples. Você selecionará o
número inicial, o número final. Então você pode fazer
algo assim. Eu tenho algo antes
ou depois do número. Então, eu posso dizer, tipo aqui, digitar clientes, escrever
algo assim. Então você pode simplesmente ajustar o texto, o título novamente,
aumentar a alteração da fonte. Muito, muito fácil de usar. Portanto, cabe à sua
imaginação usar praticamente tudo o
que está aqui. Mas tudo é
muito, muito simples. Então, sim, é basicamente
assim que isso funciona, como o
Elementor funciona. Eles podem
arrastar tudo e mudar sua visualização
sempre que você quiser. Então, nos vemos no próximo vídeo.
8. Elementor - Modelos: Algo interessante que
você tem no Elementor é que você pode
escolher entre seus próprios modelos. Portanto, se você passar o mouse
sobre essa pasta aqui, verá que eles também
já têm
páginas e blogs pré-construídos . Assim, você pode importá-los
diretamente para sua página. Mas a maioria deles
requer a covariante, mas também temos alguma variação
livre aqui, como você pode ver. Então, tudo o que você precisa fazer
é clicar em Inserir e
adicioná-lo à sua página. Mas teremos que criar
um elemento ou conta. Portanto, se você receber esse erro, basta atualizar a página. Vá para esta seção novamente. Então, vou entrar nisso novamente e
inserirei uma página, por exemplo ,
agora clicarei em Começar e seremos redirecionados
para o elemento ou site. Para você, isso vai parecer
um pouco diferente, então vou clicar nele e você verá o
seguinte. Vai parecer assim. Você precisará criar uma
conta ou simplesmente fazer
login com seu endereço do Gmail,
o que é muito mais rápido. E eu farei isso também. Agora estamos conectados, clique em Conectar aqui. Agora está me perguntando
se eu quero aplicar as configurações desta
página para, basicamente, se você já tiver
uma página criada, não aplicar as configurações e, como isso pode
atrapalhar sua página. Mas se a página estiver vazia, você pode simplesmente aplicar as configurações, mas precisará usar
as mesmas configurações para que
seu site tenha a mesma aparência, os mesmos
espaços de fonte e tudo mais. Então é assim que esse
modelo parece. Isso é basicamente algum tipo
de portfólio ou galeria. Se você quiser usar isso, basta
alterar as imagens, clicar nelas, alterar as imagens e pronto. Você sempre pode editá-lo. Outra coisa que você pode
fazer é salvar blocos ou seções desta página específica.
Em seus modelos,
basta clicar com o botão direito do mouse
nesses seis pontos aqui para esta seção, por exemplo, e clicar em Salvar como modelo. E você pode salvar isso para mais tarde e usá-lo em seu site. Então, vou salvar isso, salvar isso como teste. Agora, está salvo aqui. Então, se eu quiser adicionar o modelo agora e
clicar neste diretório aqui, nós o temos em meus modelos e eu sempre
posso
inseri-lo quando quiser. Então é assim que você
pode usar modelos.
9. Como construir a página: Agora é hora de
criar uma página de demonstração. Assim, você pode ver exatamente
todas as etapas que estou
passando ao criar
uma primeira página real. Então, esta é a página inicial que eu
criei e vou clicar em
editar com Elementor. E eu vou começar a construir. Então, vou remover esta
seção para começar do nada. Portanto, antes de criar uma página, certifique-se de fazer um esboço de sua base real. Então, exatamente como você
deseja criar nossa página. Então, por exemplo, no meu caso, eu fiz um. Deixa eu te mostrar aqui. Eu fiz um esboço como esse,
logo, menu de links sociais para o cabeçalho. Então temos um banner com algumas informações e um botão aqui, botão de apelo à ação. Outra imagem de texto do título. Aqui teremos alguns números, exatamente o que alcançamos
com nossa empresa, por exemplo, Serviços. Descrição pequena, depois imagem de cada serviço e a pequena
descrição abaixo, avaliações de
clientes e seção de
contato. Muito fácil.
Siga-nos nas redes sociais. Abaixo deles, os próprios
ícones das plataformas sociais
e um boletim informativo aqui. E então temos o
rodapé na parte inferior. Essa é uma
estrutura bastante básica para Atlantic page. Então, vamos entrar nisso. Já
tenho todas as imagens aqui e tudo o que preciso. Então, isso será bem rápido. Então, vou clicar no sinal de mais R, criar uma nova estrutura,
uma nova seção. Vou clicar nas
configurações aqui e adicionarei a imagem para
precisar de um plano de fundo clássico. E a imagem em si, vou usar essa. E agora vou clicar
em Editar novamente. Aqui, para as configurações, não
mudarei a posição, mas em tamanho
selecionarei a capa. E indo para o layout. E selecionaremos a
altura para caber na tela. Embora isso seja meio grande, então eu quero torná-lo menor. Então, vou selecionar a altura mínima e vou torná-la algo
assim, um pouco menor. Agora eu quero deixar isso mais escuro para
que eu possa adicionar alguns textos, alguns textos brancos para que eu possa
ver melhor os textos. Então, eu preciso de uma sobreposição de fundo. Vou clicar em Clássico e deixarei isso em preto e talvez reduza um pouco
a opacidade. Então, algo assim. Agora vou adicionar um texto dentro,
então eu preciso de um título. Vou inserir o texto aqui. Então, vou entrar em serviços profissionais de conserto de
bicicletas. Vou centralizá-lo.
Vou selecionar H1. Então lembre-se, apenas
um H1 por página. E esse H1 deve conter as palavras-chave mais importantes
do seu site. Então eu adicionei aqui praticamente
as palavras-chave mais importantes. Tenho serviços de conserto de bicicletas. Tenho todas as
palavras-chave necessárias de que preciso. Agora, vou entrar em Style. Vou mudar isso
para tipografia branca. Eu também mudarei a fonte. E vou selecionar a fonte
que eu gosto, que é Railway. E eu vou fazer
isso com 44 pixels. E você também pode mudar
o peso, se quiser. Mas vou deixar assim. E agora eu preciso de alguns
textos embaixo. Então, vou adicionar um editor de texto. E vou escrever
exatamente o que tenho aqui. Então, vou colocar isso
lado a lado na minha tela e vou
apenas inserir o texto. Então, estamos aqui para
ajudá-lo a escrever mais, certo? Mais feliz e tire o máximo proveito da sua bicicleta. Bem simples. Volte para o site em
tela cheia. Eu vou mudar a
cor para isso. Então eu vou para o estilo,
alinho isso ao centro, mudo o texto para branco. E isso mudará a fonte para outra fonte que eu
gosto, que é Meriwether. Portanto, você deve fazer duas combinações de
fontes
para o seu site. Podemos usar ainda
mais se você quiser, mas não use como dez fontes, fontes gratuitas no máximo são
muito boas. Então, eu estou usando dois neste caso. E então vamos definir
isso para 17 pixels. Por baixo. Isso adicionará um botão de
apelo à ação. Vou alterar o texto
desse botão para entrar em contato conosco. Vou centralizá-lo
aqui no link. Posso fazer com que esse botão
realmente leve a uma ligação telefônica ou leve à abertura do
aplicativo de e-mail no telefone. Então você pode fazer isso
se quiser
fazer disso um botão de chamada, você digita aqui T L
do telefone, dois pontos, e então você usa o
número de telefone deles. Para isso simples,
se você quiser, exclua o aplicativo de e-mail, escreva um e-mail dois pontos e insira
o e-mail depois. Muito simples. Mas eu vou fazer esse
telefonema de chamada à ação. Então eu corri, inseri um tamanho
numérico aleatório desse botão. Vou selecionar o meio. Vou adicionar um ícone aqui. Nós encontramos. Vou selecionar este, inserir algum espaçamento entre eles. E para estilizar, eu só
quero mudar a cor
desse botão para
praticamente a cor que
eu tenho no meu logotipo. Então, é uma espécie de
combinação entre um azul e um verde,
algo assim. E eu posso simplesmente copiar essa
cor para que eu possa usá-la para mais tarde para as outras
coisas que eu farei. Então, aqui temos algum espaço entre esses, esses elementos. Então, como podemos removê-lo? Coluna adicionada, fizemos espaço, transformamos isso em zero, por exemplo, e foi assim que você fez. Então. Muito simples. Agora, vou
passar para a próxima parte. Portanto, precisarei de uma imagem de texto
sobre nós do título, e também temos um divisor
abaixo do título. Então, uma nova seção. Muito simples. E aqui vou
adicionar um título. Vou escrever sobre nós. Isso será um H2, então não
vou mais usar o H1
nesta página. Topografia, ferrovia,
novamente, para títulos. Torne isso maior para 44 pixels. E isso mudará
a cor para preto. E vou adicionar uma divisória
embaixo para o design. Então, vou centralizá-lo.
Vou mudar isso para barras porque
gosto da aparência e
vou torná-la menor. E agora eu preciso de mais duas
colunas embaixo. Então, como fazemos isso? Adicionamos uma interseção
sob esse divisor e agora temos mais
duas colunas. Então, em vez de criar
uma nova seção, basta adicionar uma interseção sob um elemento específico e você
terá mais duas colunas. E se você clicar com
o botão direito do mouse, poderá adicionar ainda mais um, se quiser. Mas vou
ficar com dois. Por enquanto. Vou adicionar uma imagem
à direita e alguns
textos à esquerda. Muito simples. Vamos
adicionar a imagem. Então clique em Carregar arquivos, selecione os recursos do site porque esta é uma pasta onde eu adicionei tudo e
vou adicionar este. E vou escrever no altar todos os textos, oficina de conserto de
bicicletas. Porque essa imagem
é representativa. E para o texto, vou simplesmente copiá-lo
desta imagem. Coloque-os lado a lado novamente. E vou apenas inserir o texto. Acabei de escrever algo aleatório, mas você deveria escrever
algo que tenha mais palavras-chave relevantes
aqui. Portanto, será melhor
para o seu SEO, para a otimização do seu site e
para o mecanismo de pesquisa. Mas nesse caso, vou
ficar com esse x. Então, vamos ver o que
mais eu tenho para digitar uma ótima experiência do cliente. E sempre teremos
como objetivo dissolver. Tudo bem, desculpe, só para a tela. E vou aumentar esse
texto e mudar a fonte ou
a cor está boa, ou talvez torná-lo um pouco mais escuro. O alinhamento está bem. E vamos mudar essa atualização do
Meriwether 17. E vamos remover os espaços entre os elementos
porque eles são muito grandes. Então, novamente, zero pixels aqui. E talvez eu o tenha mexido por engano. Então, eu apenas pressiono Control Z no
meu teclado para desfazer isso. Ou você pode simplesmente entrar aqui
em História na parte inferior. E você pode simplesmente
clicar na última seção e ela irá para a seção
anterior que você fez antes. Muito simples. Agora vamos adicionar espaçador aqui. Isso é muito próximo
um do outro. Então, algo assim, talvez, e atualize isso. E agora vamos ver o que
mais temos a acrescentar. Vou adicionar mais uma seção. Vou adicionar um plano de fundo
a este. Então, vou selecionar
outra foto, talvez algo
assim. Layout. Altura, altura mínima
e ainda menor do que esta capa de tamanho de estilo. Então, a imagem
se repetirá aqui nas laterais, no lado direito do pulso. Por isso, está esticado. E eu quero três colunas. Então, vou clicar com o botão direito nesta coluna
aqui no espaço, Adicionar novo e adicionar novo. Nós temos de graça. E vou adicionar contadores. Então, não no, esses são os elementos Pro da versão paga, mas
eu não preciso deles. Vou minimizá-los e
vou até o balcão. E adicionaremos os
três contadores. Portanto, temos mais de 4.430,
500 clientes. E nós temos um sufixo, então eu adiciono um sinal de mais aqui. Clientes satisfeitos. Depois, posso personalizá-lo para que
eu possa deixar o texto branco. E a fonte, eu posso praticamente
alterá-la para a mesma coisa. Digamos que a
ferrovia parece muito melhor agora. E para o título,
a mesma coisa. Cor do texto: branco. E também posso adicionar uma sobreposição de fundo
a isso para torná-lo mais escuro. Então, os textos aparecem mais ou menos
assim. E vamos adicionar esse também. Essas são duas colunas. Então, vou apenas duplicar esse porque
já fizemos as mudanças. Portanto, é mais fácil
editar assim. E vamos mudar os
textos e os números. Então, mais de dez anos de experiência. Aqui. Cinco locais.
Exclua o sufixo e os locais. Muito simples. Vou apenas clicar em atualizar aqui para salvar minhas alterações por enquanto. E vamos adicionar o outro para que
tenhamos serviços e outra coluna. Eu preciso do título para que eu possa simplesmente duplicá-lo daqui
e movê-lo para baixo. O divisor também. Isso é muito
mais eficiente do que trabalhar nisso novamente. E agora eu preciso de uma interseção. Então eu preciso de outro. Adicione uma nova coluna, temos grátis. Então, eu preciso de três imagens. Então,
vou adicionar o primeiro. Eu farei as alterações nele e depois
duplicarei a primeira nas outras duas colunas. Então, vamos ver o que
eu tenho aqui. Também preciso de um
texto descritivo abaixo. Então, vamos mudar
o primeiro editor de texto
abaixo do divisor. Ou, na verdade, é melhor
adicioná-lo aqui. Então, vamos ver. Vamos colocar essa gama completa
de serviços
lado a lado em junho, consertar e aprimorar o estilo de
desempenho de suas bicicletas, no centro. Eu posso voltar para a tela
cheia agora. E vamos mudar a fonte novamente. Então, temos Meriwether e 17, e talvez transforme isso em um cinza
mais escuro ou até preto. E vou apenas
adicioná-lo abaixo. Eu acho que é melhor. Sim, vamos fazer isso assim. E vamos selecionar as fotos. Então, o primeiro são rodas
e pneus. Eu já o tenho. Essa. E em textos
alternativos, tudo bem, rodas e pneus. E aqui temos
um campo de legenda. Selecionarei uma legenda personalizada e digitarei exatamente
rodas e pneus embaixo. Link para nenhum. Ou, na verdade, posso fazer um
arquivo de mídia, se quiser. Então, se você clicar
nele, ele aparecerá. Vamos fazer algumas mudanças aqui. Então, vou clicar em Editar estilo. E eu quero mudar apenas os
textos das legendas. Então, centralize-o. A cor pode ficar
bem, tipografia. Vamos fazer isso 17 ou mais. Vamos tentar 44. Muito grande, talvez
algo assim. E talvez em maiúsculas. Vamos ver como fica em maiúsculas. Então, sim, é melhor assim. Então, deixe-me voltar a estilizar, legendar e fazer isso
assim e talvez ousado, pode ser demais. Sim, algo
assim. Parece estar bem. Talvez até adicione algum
espaçamento como esse. E talvez vamos
mudar a cor. Vamos ver o que podemos fazer. Vou ficar
assim e atualizar. E terei que adicionar
algum texto abaixo. Agora. Adicionaremos o texto
daqui lado a lado novamente. E treinamos para
agir para abençoar os
serviços de pneus e muito mais. Tela cheia novamente. E
vamos editar esse texto. Vamos torná-lo mais escuro. E mude isso para. Meriwether, centralize-o. E vamos reduzir o
espaço intermediário. Teremos que ir aqui
e transformá-lo em zero. Sim, isso é melhor. E agora teremos que mover
isso para o outro lado. Talvez possamos adicionar alguns efeitos
a isso antes de fazer isso. Então, eu posso simplesmente adicionar uma sombra de caixa. E vamos ver o quanto queremos acrescentar algo assim. Acho que não há problema em
adicionar um pouco mais de profundidade a isso. Então agora eu posso simplesmente duplicar
isso e adicioná-lo aqui. Então
duplique-os e o texto também. E do outro lado. Agora vamos mudar o
texto para os outros. Temos sintonia
e montagem de bicicletas. Tudo bem, e vamos
mudar as descrições. Então, como você pode ver,
isso é bem simples. Na verdade, é rápido,
então podemos fazer isso em 2 minutos ou até mais rápido se você continuar trabalhando, porque estou
falando agora, então estou trabalhando um pouco mais devagar, pausas e trocas
rodas e muito mais. E isso praticamente
já mudou. Temos as configurações aplicadas
da anterior. Então mude essa também, e depois
mudaremos as imagens. Assim feito. Então, vamos mudar as fotos. Às vezes sinto falta de clicar e pressiono Control Z logo
abaixo dessa coisa. É por isso que você verá algumas coisas se movendo
de tempos em tempos. Vamos selecionar esse. Acho que temos a mastigação, que é desse tipo que
estamos mastigando. E a outra,
que é a montagem de bicicletas. E eu vou escrever
aqui, por assembléia, você não precisa
mudar todos eles. Todos os textos são os mais
importantes para o SEO. E insira. Tudo bem, vamos ver
o que mais temos. Temos uma seção de revisão. Então, isso é muito fácil de fazer. Novamente. Outra seção. Basta duplicar o
título. Mova-o. Editando aqui. Spacer novamente. Tudo bem, e precisaremos
dos depoimentos reais. Então, eu preciso adicionar uma
interseção abaixo. Eu preciso de três deles, então eu adiciono mais um. Eu volto,
procuro depoimentos, arrasto este e vou
adicioná-lo, o primeiro. E adicione uma foto aqui. Nome aleatório,
ocupação ou posição aleatória. E eu vou configurá-lo assim. E então vamos apenas duplicar esse
e movê-lo. Você sempre pode
personalizá-lo e
torná-lo diferente se quiser
mudar as cores e assim por diante. Mas, por causa desse vídeo, vou fazer isso rápido. E talvez vamos mudar a cor de
fundo disso. Então, vamos configurá-lo para um cinza mais claro para fazer algum
tipo de distinção distinta. Tudo bem, e
talvez eu possa adicionar uma borda. Então, vamos adicionar talvez algo, um forro macio ou
algo parecido com isso. Cinco, grátis. Sim, isso deve ficar
bem. O que mais? Temos a seção Fale conosco. Então, vamos adicionar esse também. Novamente, outra seção. Vou duplicar o título. Duplique uma divisória. Portanto, esse é um
design muito básico, mas funciona. E vamos mudar isso para aqui, nossos clientes para entrar em contato. E eu adicionarei uma
interseção. Novamente. Só precisamos de dois, então vou
adicionar o mapa à direita. Teremos que inserir
o endereço aqui. Vou deixar assim. Altere o zoom para
17 para que fique bem
mais próximo e você possa
realmente ver a localização. E vamos adicionar essas
informações abaixo. E aqui vou adicionar
o formulário de contato. Então, vou pesquisar um código curto. E eu adicionarei um formulário de contato. Então, terei que
voltar ao painel. Fóruns de formuladores. E eu vou
clicar nesta roda
e copiar o código curto. Agora vou reembolsar a base aqui. Aqui está o formulário,
mas ele aparecerá corretamente sem esse ótimo
plano de fundo depois. Então guarde assim. E aqui embaixo. E vamos apenas adicionar uma lista de ícones. Vou procurar um ícone. Essa. E eu serei,
escreverei para o endereço. Posso simplesmente copiá-lo
daqui, por exemplo, e selecionarei uma inserção de mapeamento de
pinos. Para o próximo. Eu vou selecionar. Vou apenas escrever o horário de trabalho nove às cinco, de
segunda a sexta-feira. E isso selecionará um relógio. Para o próximo. Vou escrever um e-mail e apenas inserir o horário ou talvez o
número do telefone porque
temos o formulário à esquerda. Vamos inserir o número do telefone. Isso é melhor. Tudo bem, e
eu vou procurar um telefone. Muito simples. E eu posso simplesmente fazer disso um apelo
à ação, se eu quiser. Eu posso simplesmente escrever d l
e copiar o número. Assim. Mas deixe de fora o espaço
porque eu adicionei um espaço intermediário como esse e a atualização. E agora eu posso simplesmente
personalizar isso, mudar a cor dos botões,
os tamanhos, se eu quiser. Então você tem espaço entre
uma divisória entre eles. Depois, você pode simplesmente alterar
o tipo de divisor. Então, você pode
personalizá-lo se quiser. Bem simples. Vamos mudar isso rapidamente. Certo? Ícones. Talvez até um vermelho possa funcionar. E eu posso simplesmente
deixar isso assim. Talvez mude a fonte. Tudo bem, então temos a seção Siga-nos,
que é a última. Então, vou fazer com que agora selecione
o plano de fundo para ele. Estilo, plano de fundo, tipo clássico e eu selecionarei
o plano de fundo. Então, vamos ver qual
deles devo escolher? Acho que ainda
tenho um. Essa. E insira layout, altura, altura
mínima.
Eles deveriam trabalhar. E terei que
escolher Estilo, tamanho, capa e também torná-la
um pouco mais escura. Então, adicionaremos uma
sobreposição de fundo novamente. Clássico e preto. Mas mais brilhante, assim. Então, precisamos de um título agora. Vou apenas duplicar
esse e mudar para branco. Então, certo, siga-nos. E eu preciso de mais
duas seções. Vamos adicionar um divisor também. Portanto, mantemos praticamente o mesmo
design. OK. E aqui vou adicionar os ícones sociais
reais. E à direita, posso simplesmente
adicionar a inscrição no boletim informativo. Então, aqui vou
pesquisar por redes sociais. E eu posso mudar a forma para circular porque
eles parecem melhores. E você pode simplesmente clicar
neles e alterar os links. Mas eu quero fazer
isso neste vídeo. E aqui à direita, posso simplesmente adicionar uma inscrição no
boletim informativo. Então, vamos duplicar esse
título adicionado aqui. Faça com que seja um pouco menor. Porque isso é muito grande. Assim. Eu posso escrever a
inscrição em nosso boletim informativo. Ainda menor do que isso. Na verdade. Escreva a atualização. E
voltaremos ao painel e eu farei outro formulário. Então, crie uma
inscrição no boletim informativo, continue. Você pode nomear este boletim informativo. Criar. Aqui está.
Só precisamos fazer algumas mudanças para
nós porque ele tem um fundo branco e eu
quero isso transparente. Então, vou usar cores, contêiner de formulário
personalizado e
terei que mudar todas as
cores de fundo para transparentes. Então, apenas
mova isso e certifique-se de que ele
seja arrastado até o fim. E isso terá que
fazer isso praticamente todas as cores de
fundo. Então, eu vou ter que passar por
cada um deles. Indicador de envio, cor de
fundo. Eu acho que isso é tão básico em
k campos. Eles realmente precisam de um plano de fundo. Vou deixá-los como
esta área de entrada e texto. Preciso mudar o
texto para branco por E5. Se eu deixar preto, também não
direi que beirará
branco. Então, selecione branco aqui embaixo. E vamos ver o que mais. Etiqueta, descrição
branca, mensagem de erro branca. Podemos deixar isso assim. Isso está bem. E vamos ver o que mais é esse
botão de envio. Cor do texto em branco novamente. Cor do texto: branco. E eu posso simplesmente visualizá-lo. Então está tudo bem porque
não vemos os textos aqui, mas precisamos mudar
isso para branco. Então, vamos mudá-los. Então nós temos, deixe-me
ver onde eles estão. Eles devem estar no
campo básico ou de entrada. Sim, espaços reservados
para branco, ambos. E a cor de fundo talvez seja
transparente para os campos. Vamos ver agora,
acho que sim, estamos bem na página. Então, vamos clicar em Publicar. E eu vou copiar este. Voltamos e adicionamos um código
curto e colamos. É
assim que fica na pré-visualização, mas ficará melhor se apenas
atualizarmos a página. Então, vamos salvar isso
e abrir a página. E depois faremos alguns
ajustes de injustiça. Então, precisamos de alguns
espaços intermediários. E esse é o formulário.
Parece muito melhor. Talvez possamos adicionar algum
tipo de borda ao redor dela para
torná-la mais visível. E alguns textos aqui, como está vazio
, temos o rodapé
que precisamos editar e otimizaremos esta
página para celular. Então foi basicamente isso. Vamos fazer pelo menos as alterações
nessa parte, e depois
a
otimizaremos no próximo vídeo. Então, vamos fazer as mudanças primeiro. Vamos escrever algo aqui. Vamos ver talvez um título. Digamos, como posso escrever isso? Eu posso escrever aqui, nos seguir. E centro e BH3 e branco. E mude a fonte para
ferrovia. Algo parecido com isso. E talvez adicionemos uma
divisória embaixo. Mude a cor para branco. Talvez um pouco mais de espessura até o centro. E faça com que seja algo assim. Vamos adicionar mais alguns
textos aqui. Mude para o centro branco. E digamos
algo assim. Então, quando você recebe descontos e se inscreve em sorteios
automaticamente seguindo nossas redes sociais. Segundo ou algo parecido, e talvez torne isso maior. E Meriwether, novamente,
temos a mesma fonte. Então, agora
sentimos praticamente o espaço intermediário. E talvez adicionemos
outra divisória aqui. Talvez duplique
este e adicione aqui. E é isso. Mas agora temos mais
espaço na parte inferior. Agora vou apenas removê-lo. Então, vamos deixar assim. Sim, veja no próximo vídeo. E
praticamente otimizaremos para dispositivos móveis e faremos mais
algumas coisas.
10. Versão móvel: Agora vamos otimizar o
site para dispositivos móveis. Então, vou clicar em editar
com o Elementor aqui. Em seguida, mudaremos
a visualização para celular. E veremos
como isso fica no modo responsivo
móvel, aqui
no canto inferior esquerdo, e clicaremos
no ícone do celular. Então, primeiro precisamos
remover esse texto. A forma como removemos esse
texto foi acessando o painel do WordPress,
aparência e personalização. E aqui nas configurações do tema, precisamos alterar isso
no criador de cabeçalhos, no
site, no título e no logotipo. E mudaremos para a
visualização móvel clicando aqui. Teremos que remover o título
desse site de exibição. E agora, como você pode ver, isso não está mais visível
e você clicará em Publicar. Então, isso é corrigido. Voltaremos ao site
e eu o atualizarei. E então vamos
examiná-lo para ver exatamente como fica. Tão responsivo e móvel. O texto está bom,
o botão está bem. espaçamento é bom. Aqui, como você pode ver, também
vemos as âncoras, mas elas não aparecerão
no site real ao vivo. Então é assim que
vai ficar. Precisamos mudar os divisores. Então, como você pode ver,
as divisórias são muito pequenas no celular em comparação com a
aparência no desktop. Então, agora,
teremos que mudá-los. E também deixe-me
mudar para o desktop. Como você pode ver, o
conteúdo no celular está sendo exibido
da esquerda para a direita. Então, primeiro vimos o texto,
depois vimos a imagem. Então, isso funciona praticamente para cada elemento aqui. Então, vamos mudar para o celular e aumentar os divisores. Algo parecido com
isso. Para este, o texto é bom, os espaços são bons. Este também é bom, mas eu quero adicionar um
pouco mais de espaço
na parte superior e inferior também. Então, vou clicar nesta seção de
edição avançada e adicionar algumas margens. As 20 principais margens,
preenchimento, na verdade 20. Sim, isso é melhor. Mude esse divisor também. Algo parecido com isso. Eu não vou fazer isso
porque leva apenas um pouco
menores, imagens são boas. Vou ter que mudar o
tamanho dessas imagens. Então, faremos isso em breve. Esse também. Todo o resto é bom o suficiente. O texto é bom, tudo
parece bom, o mapa está bom. Tudo bem, agora
deixe-me explicar por que adicionei esse preenchimento no
começo para esquerda e direita. E vou mostrar um exemplo que acontece se eu o remover. Então, digamos que, nesta seção, eu vá para Avançado e
temos 20 preenchimentos. Vamos definir isso como zero. Agora, como você pode ver,
o texto está
bem próximo da
borda da tela. E isso não é recomendado porque não ficará
muito bem no seu celular. Portanto, é melhor adicionar
algum espaço aqui. Então você faz isso adicionando um pouco de preenchimento à
esquerda e à direita. Mas eu também adicionei na parte superior
e inferior para responder, para adicionar algum espaço
entre a próxima seção. Assim,
você pode adicionar somente
à esquerda e à direita, se quiser. Então, posso simplesmente desvincular
esses valores e adicionar 15 à esquerda, 15 ou 20. Ambos estão bem. E agora você terá
esse espaço intermediário, que parece muito melhor, certo? Então, eu posso simplesmente salvar isso. Portanto, ele sempre deve adicionar
espaçamento à esquerda e à direita para cada
seção que você tem. Então, fica melhor no celular. E todo o resto está bem. Então, vamos mudar a
visualização para o canto superior direito. E as imagens também
parecem boas. A janela no
começo parecia errada e essa era maior. Agora, aparentemente quando olhamos para isso
em tela cheia, vamos abrir a página novamente e ter certeza de que está
tudo bem. Tudo bem. Sim, parece bom. Então, outra
coisa que você pode fazer, você pode até adicionar alguns
efeitos à imagem. Então, posso adicionar uma sombra de caixa
para isso, por exemplo, se eu quiser definir a cor para praticamente a mesma cor
que temos em nosso logotipo. Torne isso mais visível e
selecione uma cor como essa. E agora eu posso simplesmente
reduzir o desfoque e fazer algo
assim, certo? E faça algum tipo de
sombra ou imagem duplicada. Portanto, esse é um
efeito interessante que você pode adicionar duas fotos, se
quiser. Muito fácil de usar. E sim, é basicamente isso. O site é
otimizado para dispositivos móveis. Assim, você sempre pode alterar a visualização móvel e
verá exatamente como ela fica. Talvez eu possa editar esse texto e
alterá-lo para justificá-lo. Mas eu não gosto
desse espaço honestamente, então vou deixá-lo
assim ou até mesmo centralizá-lo, mas fica melhor assim. Ou talvez eu apenas o
centralize. Na verdade. Eu acho que é melhor. Então, enviaremos
essa e talvez mudaremos essa fonte
para a mesma fonte. Na verdade, mudou
, mas é muito pequeno. Então, parece um pouco diferente. Sim, então foi isso para
a otimização móvel. E no próximo vídeo, trabalharemos no rodapé. Portanto, adicionaremos alguns
botões aqui e
também na página de política de privacidade
em termos de uso. O menu é totalmente funcional. Também funciona em dispositivos móveis e está tudo bem. Então, vendo que é um.
11. Como usar âncoras de menu e adicionar animações: Agora é hora de
personalizar um
pouco a página e adicionar alguns
efeitos ao site. Então, basta clicar na seção Editar e ir para Avançado. E aqui temos efeitos de movimento. Então, eu posso simplesmente adicionar
algumas animações. Então, eu vou pegar
cada seção, ou você pode pegar
cada elemento, se quiser. Mas vou apenas adicionar uma animação
à seção inteira. Então, algo assim. Só não use a
mesma animação, apenas use animações diferentes, mas não use animações
que possam causar dor de cabeça. Use algo simples e limpo. Vamos ver, aumentando o zoom. Isso é bom. Isso é aplicar um a isso, certo? Outro aqui. E para este. E deslizando para a direita,
para isso, para a direita. Ok, agora vamos fazer
alguns pequenos ajustes. Então, vamos adicionar algum espaço
entre a seção real na parte superior e os textos, porque isso é muito próximo
um do outro. Então, podemos fazer isso
usando roupas de cama. Então essa é a melhor maneira. Então clique na seção de edição
e em outras avançadas aqui. Vamos para a
rebatida real e você
adicionará cerca de 30 pixels, 20. Isso é melhor. Também temos acolchoamento à esquerda
e à direita. Isso é bom para otimizações
móveis e otimização móvel,
desculpe-me. E você verá depois por que vamos fazer isso com praticamente
cada um deles. Então, 20, 20 aqui. Se você acha que é demais, você sempre pode alterar
os valores, desvinculá-los
e alterá-los individualmente, se quiser. Nós podemos fazer isso. E para este, eu não precisarei porque
ele permanece centrado. Mas acho que sim porque precisamos criar esse espaço entre
esse texto para celular. Você verá depois o porquê. Então, vamos adicionar 20 aqui
também e atualizar isso. Agora, vamos criar os menus. Estamos usando âncoras de menu. Quando você cria um
site de uma página como este, ao adicionar todas as
informações em uma página, você precisa usar âncoras de menu para criar seu menu de
navegação, porque você terá que liderar seus clientes na mesma página, mas em locais diferentes.
Então, como fazemos isso? Usaremos as âncoras do menu
aqui, na barra de pesquisa. Vou pesquisar o menu. E vou pegar essa
âncora e colocá-la acima do texto ou
acima do título principal. Então, vou criar uma seção Sobre nós que acabou no
botão aqui também. Então, nomeie isso sobre
outro para serviços. Então, vou voltar e
procurar a âncora do menu e adicionar outra. Serviços. Eles são invisíveis
, então eles
não adicionam espaços, só você pode vê-los. É por isso que
parece assim. Aqui temos alguns problemas
com as fotos. Eles são
menores que o primeiro, então teremos que
mudar isso também. Então, basicamente,
teremos que alterar
a resolução para que todas essas
imagens sejam iguais, para ter exatamente a mesma proporção. É por isso que isso é maior
e esses dois são menores. Portanto, não podemos ajustá-los
manualmente ou você pode
cortá-los e praticamente
ajustá-los na mesma proporção. Eu farei isso em um
minuto e mostrarei para. Então, adicionaremos
outro para o menu de contato. E entre em contato certo aqui. E eu quero adicionar
um para esta parte. Não é necessário. Então, esses
são os mais importantes. Tudo bem, agora vamos para painel
do WordPress e eu
vou para Aparência e menus. E eu selecionarei
o menu principal. E vamos adicionar todos os botões. Então, temos o botão Contato. Este é o link do nosso site, e você terá que
adicionar uma hashtag e exatamente o que escrevemos
em nossa âncora de menu. Então eu escrevi contato. Isso é para o URL do contato. Vou ter que adicionar mais um. Então eu apenas copio, copio esse link basicamente aqui e mudo essa parte
com superfícies agora, certo? Serviços. Vou adicioná-lo e
colar novamente. E tínhamos
quase, tudo bem, e talvez
mudar a ordem assim e salvá-la. Lembre-se de que o
menu fora do campus é para celular, então você
também deve verificá-lo se estiver usando, se estiver usando esse
menu para o primário, por exemplo agora voltaremos
à página e a atualizaremos. Vamos atualizá-lo. Eu fiz. Ok. Vou atualizá-lo.
Por algum motivo. Demora um pouco. Então, eu posso
ter alguns problemas de conexão. E se eu clicar em Serviços
agora, vá exatamente
nesta parte da página. Se eu clicar em Contato, ele entrará aqui
e por aqui. É assim que as âncoras do menu funcionam e são
bonitas, muito fáceis de editar. Agora, outra coisa. No próximo vídeo, mostrarei como
otimizar isso para dispositivos móveis, e faremos
isso, passo a passo. Também será bem rápido. Então, nos vemos na próxima.
12. Como editar o rodapé: Agora é hora de
trabalhar no rodapé. Então, vamos apenas para a
aparência personalizada. E aqui temos
o pilar do rodapé. Então, queremos adicionar o menu de
política de privacidade na parte inferior. Isso é o que geralmente
todo mundo está fazendo. E aqui também adicionarei
alguns ícones sociais. Talvez eu não escolha as redes sociais e
as adicione à direita. E à esquerda teremos
um menu, o menu de rodapé. E teremos que trabalhar nisso. Então, entraremos no painel. Então, deixe-me abrir o
painel novamente aqui. E iremos aos menus de
aparência. E selecionaremos
o menu de rodapé. E aqui precisaremos
da página de política de privacidade, que já temos em páginas. Isso é criado por padrão, pelo WordPress, então eu
posso simplesmente abri-lo. Ainda não foi publicado,
mas posso simplesmente publicá-lo. Então, eu posso simplesmente copiar
o link daqui. Tudo bem. nome a esta política de privacidade. E precisaremos de
outro chamado Termos de Uso. Teremos que criar esse. Então, vá para Páginas novamente e adicionaremos uma nova página, nomeie-a, termos de uso. E precisaremos de
alguns textos para isso. Eu posso simplesmente copiar e colar
o texto aqui. Você não precisa usar o
Elementor se quiser, se quiser
projetá-lo e torná-lo mais agradável, basta usá-lo. Mas essas duas páginas
não importam muito. Então eles vão, eles
mal serão visitados. Então, posso ir até a
competição, encontrar um serviço de conserto de bicicletas e procurar nosso
site em algum lugar. Digamos que eu esteja escolhendo. Eu não conheço esse. Aceitarei seus biscoitos e
irei até o fundo. Este é o rodapé deles. É muito maior. Quero dizer, na verdade, eles
têm dois deles. Então, aqui temos
termos e condições, aviso
de privacidade e política de
cookies. Eles têm muitos. Eu apenas manteria os
termos e condições. Então, você basicamente
precisa dos termos e
condições e da política de privacidade. E na política de privacidade, você pode incluir os cookies para não precisar fazer tantos. Então eu vou pegar este e vou apenas
copiar uma parte dele, não tudo,
porque eu acho que é muita coisa, ou talvez apenas pegue tudo. Mas lembre-se de que você
terá que trabalhar
nisso para que possamos simplesmente copiar os termos e condições de outra pessoa e
colá-los em sua página. Você terá que realmente
ver o que eles escreveram lá e fazer isso de acordo. Mas por causa deste vídeo, vou apenas copiar e colar isso. Agora clique em Publicar. Então, agora temos uma página de
termos de uso. E vamos adicionar este aqui. E esses dois devem
ser mais do que suficientes. E talvez eu possa adicionar o botão
de serviços novamente. Então, links personalizados,
digamos serviços. Então, se eles quiserem ver
os serviços, novamente, nossos contatos talvez sim, melhor. Vamos adicionar um contato para que eles possam voltar para lá, se
quiserem , também no rodapé. Então, vou inserir a hashtag de
barra do website.com, entre em contato. Tudo bem, Salvar menu. E agora voltaremos
ao personalizador de temas. Tudo bem. Mas não aqui. Ah, sim, isso é melhor. E digamos que esse fosse um para o cabeçalho.
Eu não preciso disso. Isso era para o rodapé e eu posso simplesmente salvá-lo e nós apenas
atualizaremos a página. E deve ser atualizado. Vamos ver. Sim, nós temos isso. Também podemos mudar as
cores, se você quiser. Se você não gosta das
cores e de tudo mais, pode mudar as
cores sempre. A qualquer hora, quero dizer, então basta abri-los, vamos
ver se eles funcionam. Eles deveriam trabalhar. Muito simples. Você deve sempre adicionar a
política de privacidade e os Termos de Uso. Este link da política de privacidade. Precisamos adicioná-lo
ao plug-in,
novamente, ao plug-in de cookie. Então, os cookies, este, personalizam o banner e
mostram configurações avançadas. Deveria estar em algum lugar
aqui, digamos que o layout. Agora conteúdo e cores. Sim, biscoito. Observe que o temos aqui, leia mais, vincule,
habilite-o, leia mais. E aqui você adicionará a URL da sua página de política de privacidade, esta, e a salvará. Então, agora, quando abrimos o site, se eu clicar nas configurações de
cookies aqui, no canto inferior esquerdo, deveríamos
ter o botão Leia mais, mas acho que ele aparece apenas quando eles abrem o site
para o primeira vez. É por isso que não vemos isso agora. Nela então aparece,
mas está tudo bem. Isso
funcionaria de qualquer maneira. Então, foi isso para a página de política de privacidade
e os Termos de Uso, certifique-se de fazê-los corretamente para não
simplesmente copiá-los. Então, vemos o próximo.
13. Temas personalizados: Agora,
deixe-me mostrar que o WordPress realmente tem alguns famosos se você
quiser pagar por eles. Então você irá para a floresta
temática, dotnet. E aqui temos uma
categoria para WordPress. Você apenas clicará nele. E temos muitos nichos aqui. Assim, você pode comprar
praticamente sites pré-construídos para diferentes nichos. Então, aqui estão os sites, como você pode ver anteriormente. Digamos que eu esteja
procurando um site de fitness. E eu vou escolher um
deles como este. E todos eles
têm prévias ao vivo. Então você pode simplesmente verificar
o tema em tempo real. Clique nele, vá em frente. Sou exatamente o que você está comprando. E todos
esses temas podem ser editados com o elemento em
praticamente 90% deles. Portanto, ele pode praticamente editar cada um deles
e alterar os elementos, imagens, textos e assim por diante. Então você praticamente tem um site
pré-construído. Deixe-me escolher um deles. Como você pode ver, eles têm
dois construtores, Elementor, que é o mais popular, e depois a padaria WordPress, que também é popular. E todas essas equipes são
compatíveis com o Elementor. Então deixe-me escolher
este, por exemplo, e sim, isso parece ótimo. Os efeitos também são ótimos. Heather é ótima. Então, é muito melhor do que ter
um tema simples. Então, uma vez que você saiba
como o Elementor funciona, se você quiser obter
a grande fama, basta acessar o tema forest dotnet. Esta é a
plataforma mais popular onde você pode encontrar temas
WordPress realmente bonitos. Então, basta pesquisar
o que você precisa. E você encontrará temas
imobiliários, restaurantes, o que precisar. Então, só para você saber que eles existem e estão sendo vendidos
por um ótimo preço. Então, você encontrará praticamente
todos eles abaixo de $100. Então, basicamente, depois de fazer uma
compra aqui, você receberá um
arquivo, um arquivo zip. Você precisará acessar o painel
do WordPress. Então, aqui, você clicará
em Adicionar novo e fará o upload do tema. E você escolherá
o arquivo, o arquivo e precisará
instalar esse nome específico. E esse famoso geralmente
vem com plugins embutidos. Portanto, você terá que
instalar todos os plug-ins junto com
eles porque são obrigatórios, porque
já estão pré-configurados. E tudo o que
é construído dentro
deles tem que funcionar
com esses plugins. E a partir daí, você pode
simplesmente editar o texto. Você terá todas as páginas
aqui na seção Páginas. Você terá a
página de contato sobre os serviços. Ele já está pré-configurado e você tem todos os
emblemas incluídos. Esse tema específico. Então, eu estou apenas mostrando isso para você
saber que eles existem. Então, se você provavelmente estava
no futuro, quero mudar seu
site com uma grande fama. Você pode fazer isso, mas precisa de
alguma experiência
antes de escolher esse famoso porque ainda não
tem experiência. Então, depois de se acostumar com a
plataforma, talvez
você o faça no futuro
e isso também será útil. Então, sim, é basicamente isso. Nos vemos no próximo vídeo.
14. Como criar a página 404: Agora é hora de criar
uma página de fluoróforo. Como eu disse no início, esta página é basicamente uma forma redirecionar nossos visitantes de
volta para nossa casa, nossa página inicial, quando eles acessam o link errado,
por exemplo, se eles acessarem nosso site e
digite por engano, corte algo errado aqui. Eles serão levados para esta página. Esse é o padrão, mas mudará esse por
um melhor. Então, vou adicionar uma capa, pouco de texto e um botão para
levá-los à página inicial. Mesmo que eles tenham
os botões aqui, é mais acessível
colocá-los no meio. Então, iremos para Pages Add New. Vou nomear essa página 1404. Selecionaremos a partir do
modelo aqui, Elementor,
largura total e publicaremos. Agora vou clicar em
editar com Elementor. E vou clicar nisso e
faremos uma nova seção. Vou adicionar uma imagem
como plano de fundo. Então, vamos para o
tipo de fundo de estilo, imagem clássica. E eu adicionarei essa imagem. Vamos ao layout, altura, altura
mínima e talvez
algo assim. Vou adicionar uma sobreposição de fundo para que eles possam ver
melhor o texto e escurecê-lo mais. Agora eu vou voltar. Adicionaremos um título. E eu vou dizer, opa, você está no
lugar errado. Centralize isso. Mude a cor para branco. Torne isso maior. Mude
a fonte, talvez para Railway. Então, temos a mesma fonte. E podemos adicionar talvez uma
descrição abaixo. Diga algo assim. Essa página não existe. Para retornar à página inicial, clique no botão abaixo. Também centralizaremos
esse texto. Vamos torná-lo branco.
Mude a fonte. Eu vou mudar isso para casar,
se deve ser bom. E vamos adicionar o
botão abaixo. Vamos centralizá-lo. Aqui. Adicionaremos o link
à nossa página inicial. Então, no meu caso, é esse. Talvez aumente esse botão e me leve de volta
à página inicial. Ou talvez me leve para a
página inicial. Vamos dizer palavras. E vamos mudar as cores. Cor ao passar o mouse. Vamos fazer isso vermelho. Tudo bem. E talvez adicione um ícone, um ponto de
exclamação. Ou talvez um estreito.
Fica melhor. Quanto mais isso pode funcionar. E clicaremos em atualizar. E isso deve ser muito bom. Agora voltaremos
ao painel. Plugins,
plugins instalados para a página 04. Clicaremos em Configurações. E aqui selecionaremos a página
404 e clicaremos em Salvar. Agora, se entrarmos em nosso site e
eu adicionar uma barra e
digitar algo aleatório. Estamos na página do fluoróforo. E se clicarmos nesse botão, voltaremos à
nossa página inicial principal, certo? Muito simples. Como você pode ver, eu tenho
alguns espaços em branco aqui, então talvez eu possa fazer
algo sobre isso. Então, vamos fazer com que esse tamanho talvez, cubra e mude a
altura, talvez para 600. Portanto, isso deve resolver o
problema. Agora está bom. Então é assim que você cria
uma página de fluoróforo. Bem simples. Você deve sempre ter
isso para não perder seus visitantes
no seu site. Se eles escreverem algo
após o link.
15. Como fazer SEO com o Yoast SEO e dicas: Vamos falar um pouco
sobre SEO agora mesmo. Então, o SEO vem da otimização de
mecanismos de busca. Então, basicamente,
otimizaremos nossa página para o Google para que
possamos ser encontrados mais facilmente
no mecanismo de pesquisa e assim por
diante, com base em nossas palavras-chave. Então, temos um plug-in para isso, e esse plugin é
esse, Yoast SEO, certo? Então, você basicamente
terá que abrir isso. E tem um pequeno, algum tipo de assistente primeiro que você precisará usar para
configurá-lo. Primeira configuração, basta
clicar em Continuar. Você terá que selecionar
algumas coisas aqui. Nome da organização,
seu logotipo, seus perfis de mídia social e você
estará pronto depois. É muito fácil de configurar. Depois de fazer isso, você entrará em suas
páginas e verá que tem algum tipo de
classificação aqui para SEO. Então esse é para SEO. Para cada página. No nosso caso, para este curso, nos concentramos em criar um site
de uma única página. Então, um site de uma página. Vamos nos concentrar apenas
na página inicial, que é a mais importante. Então, vamos entrar nele, basta clicar nele. E aqui temos uma categoria de SEO do
Yoast. E como você pode ver,
nossa pontuação agora está vermelha, então precisamos fazer algumas mudanças. Primeiro, você precisa de uma frase-chave de
foco. Isso significa suas principais palavras-chave nas
quais você deseja se concentrar. No meu caso, as principais palavras-chave
são serviços de conserto de bicicletas. Ou só por treta, eu posso escolher o que eu quiser. O reparo de bicicletas também funciona. Talvez seja melhor
e mais curto. Vou me concentrar nisso. Agora. Eu preciso de um título para o meu site. Então, meu título é esse. Eu escrevi serviços profissionais de
conserto de bicicletas anteriormente, mas mudei para isso
porque é muito mais simples. E eu posso simplesmente
deletar o que temos aqui e escrever serviços de
conserto de bicicletas. O melhor da cidade. Então, para slug, você pode
escrever o que quiser. E, como você pode ver, o slug é basicamente o que aparece
depois do seu domínio. Mas você não precisa
inserir nada aqui. Não é obrigatório. Para a meta-descrição.
Se eu clicar em
SEO e análise aqui, você verá que
temos várias marcas de verificação
vermelhas e precisamos corrigir praticamente tudo. Nem tudo é
realmente um problema, mas você deve corrigir o
máximo possível. Então você tem essa tela e estará
muito pronto para começar. Então, vamos nos concentrar em
transformar isso em verde. Links de saída. Isso significa
basicamente que você precisa
mencionar outros sites
em seu site. Então, eu preciso apontar para
outros sites, se você puder. Isso vai te ajudar. Ofereceremos
credibilidade e assim por diante. Então, se você puder fazer isso, por exemplo, na minha página, tenho uma página de serviço de
conserto de bicicletas. Talvez eu possa, nesta seção, adicionar algum tipo de
evento futuro com um link para ele. E isso vai me
ajudar e eu vou me fixar. Então é assim que você corrige isso. Em seguida, temos a frase-chave
na introdução. Sua frase-chave ou não
aparece no primeiro parágrafo, certifique-se de que o tópico
esteja claro imediatamente. No meu site. Qual
é o primeiro parágrafo? É esse aqui embaixo. Como você pode ver, esse texto
é um parágrafo aqui. Então, preciso mencionar as
palavras-chave no primeiro parágrafo. O que vou fazer é
adicionar mais uma linha de textos. E eu direi somos conhecidos por oferecer os melhores
serviços de conserto de bicicletas da cidade. E ao fazer isso, isso está coberto agora. E você verá que
funciona assim que eu salvar e
atualizar esta página. Mas vamos lidar com
todos os problemas primeiro. Então temos outro. O foco em elogiar
foi encontrado uma vez. Isso é menos do que o mínimo
recomendado de duas vezes para um texto
desse tamanho. Então você precisa mencionar
essa frase-chave, certo, no seu site, pelo
menos duas vezes ou mais. Certo? Portanto, você pode fazer isso facilmente mencionando
isso em seu texto. Isso pode ser facilmente corrigido. E agora são seis porque eu
mencionei isso no meu parágrafo, então isso também deve ser corrigido. Então, temos mais um
tamanho de
meta descrição , independentemente da descrição
especificada, que é essa, a
descrição da sua página. Então, vamos escrever
algo agora. Eu já escrevi alguns textos aqui. Então, essa é uma descrição
que vou acrescentar. Vou inseri-lo aqui. E, como você pode ver, tem
a frase-chave dentro, que é obrigatória.
Então, isso é bom. Agora temos mais uma vez, use
mais frases-chave são sinônimos em seus subtítulos H2
e H3. Então, h para h freeze
são praticamente, eu mudo este para H4. Este é livre de H, então você deve consertar alguma coisa na
bicicleta. Ou no meu caso, pelo menos eu
deveria consertar bicicletas. As palavras-chave em si estão aqui. Mas isso não é obrigatório. Você precisa escrever
muito conteúdo em seu site para
ter um título mencionado na palavra-chave,
novamente, a frase-chave. Então eu vou pular este. Não vou me concentrar nisso, mas
vou me concentrar nos outros. próxima linha do texto
contém 231 palavras. Preciso de no mínimo 300 palavras, então preciso adicionar mais texto no
meu site. Eu farei isso. Eu já editei quase como
parte e adicionei mais texto. Então, esses são os textos
que vou acrescentar agora. Então, basicamente, agora
temos muito mais textos. Deixe-me adicionar alguns
espaços intermediários. Isso é copiado e colado, e essa não é a
melhor prática, mas vou fazer com que
funcione de alguma forma. Então, backspace, Enter novamente, e isso é bom o suficiente. E mais uma linha. É isso. Sim. Tudo bem, deixe-me
deletar essa parte. Então, vamos ver se está
tudo bem. Tudo bem, isso é
bom. Outra coisa, vamos ver. Textos de capa. Eu fiz isso. Talvez adicione um pouco mais aqui. Mas acho que tenho texto suficiente. Então, vamos atualizar isso primeiro e ver
quantos problemas com x. Então, vamos atualizá-lo agora. E eu esqueci de
salvá-lo nesta parte. Então eu tenho que escrever novamente,
tudo bem, nós faremos isso. Então, temos conserto de bicicletas. E aqui temos serviços de
conserto de bicicletas. Certo? E uma descrição aqui. Feito. Como você pode ver,
já estamos verdes agora, consertei praticamente
tudo o que tínhamos. Este X contém. Então, eu preciso de mais uma palavra para corrigir
isso também. Então eu vou fazer isso. Deixe-me acrescentar outra coisa. Então, vou entrar aqui
e adicionar alguns textos talvez embaixo ou talvez
no mesmo parágrafo. Otimalidade ajustada. Tudo bem, mesmo que
não faça sentido, eu escrevi quase a mesma coisa, mas só para preencher as
lacunas e concluir isso. E temos mais uma aqui que diz
imagens de ultrassom nesta página, apenas uma tem um atributo alternativo que reflete o
tópico do seu texto. Então, como podemos corrigir isso? Nós entramos em imagens. Então, vamos para a mídia. Aqui dentro. Eu abro isso em uma nova
guia e adicionarei alguns textos alternativos aqui. E posso dizer conserto de bicicletas
em vez de rodas e pneus. E este
resolverá esse problema. Então, vamos adicionar mais um. Esse problema agora será corrigido. Então, vamos atualizar isso primeiro. Vamos ver. Acho que tenho que esperar
um pouco para que ele seja atualizado. Deixe-me ver se eu sim,
vou ter que esperar um pouco. Vamos atualizá-lo novamente. Ainda não terminei. Portanto, pode levar algum
tempo para ser atualizado porque apesar de
eu ter feito as mudanças, como você pode ver, as palavras ainda
são as mesmas. Então, fizemos uma atualização, as palavras que eu
escrevi anteriormente e os textos
alternativos também. Mas temos esse verde e isso será atualizado muito, muito rápido. Portanto, isso não é um problema.
Então, esses são basicamente os princípios básicos quando se
trata de SEO. Tudo o que você tem
aqui é uma boa informação. E se você aplicar praticamente tudo o que esse
plug-in diz, repetirá
muito bom para usar. Mas há mais coisas, e uma delas são backlinks,
por exemplo, o que é um backlink? Basicamente, alguém
menciona seu site em seu site que oferece credibilidade e é um
bom fator para SEO. Mas o mais importante
, obviamente, é o tráfego. Portanto, desde que você tenha muito
tráfego em seu site, você terá um desempenho muito bom
no mecanismo de busca e
isso o ajudará muito. Então, comece a veicular anúncios e isso
resolverá tudo para você. E você subirá na classificação desde que tenha boas
palavras-chave em seu site. Agora, outra coisa
que é importante quando acessamos a guia de mídia aqui
na biblioteca, você deve sempre
otimizar as imagens. Certifique-se de usar
imagens que tenham um tamanho baixo, como esta, um tamanho pequeno. Então, abaixo de 200 kb, não importa a imagem,
abaixo de 200 kb. Agora, quando se trata de formatos,
existem dois formatos. Temos uma página na web. Este é mais recente, mas é muito mais eficiente e geralmente ocupa menos espaço. Portanto, é melhor do que
o formato JPEG, que é popular. Então, novamente, na web B, converti praticamente todas as
minhas imagens de JPEG para API. Então você pode simplesmente acessar
o Google, por exemplo, deixe-me fechar este. Depois, você pode acessar o Google e digitar convertê-lo novamente em um p. E aqui você
terá ferramentas gratuitas. Então, basicamente, selecione
seu JPEG específico ,
selecione o formato de conversão e clique
aqui para obter o arquivo e
substituí-lo em seu site. Então, é muito, muito simples. Então, esses são
basicamente os princípios básicos que você precisa saber.
Isso é praticamente o suficiente. Basta ter uma boa hospedagem, bom conteúdo em seu site. Se boas palavras-chave
otimizarem suas imagens, não sobrecarregue seu site
com muitas coisas, pois isso fará com que ele carregue ainda
mais lento do que já carrega. E lembre-se também de que,
mesmo nesses mapas do Google aqui, estamos atrasando o tempo
de carregamento provavelmente
estamos atrasando o tempo
de carregamento em meio segundo, ou até mais. Portanto, você pode simplesmente adicionar
uma imagem em vez desse mapa e adicionar
o link a ela. Então, quando alguém
clica nessa imagem, ela vai para aquela localização específica
do mapa do Google. Você pode simplesmente copiar o link. Então, podemos fazer algo
assim, isso pode funcionar. E é
mais eficiente do que adicionar um mapa, mesmo que o mapa tenha uma aparência
melhor, obviamente. Então, sim, é basicamente isso. Obrigado por permanecer
até o fim neste curso. Tenho certeza de que você
aprendeu muitas coisas. E desejo-lhe muita
sorte com seu projeto.