Transcrições
1. 1. Introdução: Bem-vindo ao meu
curso de compartilhamento de habilidades, meu nome é David, e vou orientá-lo no
passo um a passo, como criar um site
profissional de alta
conversão muito bonito no Blog usando o
tema 2024 do Neste curso,
abordarei tudo o que
você precisa saber. Isso significa que vou mostrar como obter um nome de domínio,
em um registro de nome de domínio, como obter uma conta de
hospedagem na web, como instalar o WordPress
e, em seguida, como
criar seu site no Blog com o 2024 principais recursos desse
design são
focar em uma página inicial de alta conversão
com um claro apelo à ação que direciona o
visitante final a um ímã da web
que ajuda a aumentar sua lista de e-mails para que você
possa vender produtos Mostre também como criar várias páginas para seu site, como blogar com esse tema, como editar o
cabeçalho, o rodapé e todos os outros
pequenos elementos de design que você precisa conhecer Então, se você está
procurando criar um site e
blog profissional de
alta conversão muito bonito com um claro apelo à
ação, este curso é para você Se você está pronto para
começar, vamos começar.
2. Visão geral de 2 sites: O site, eu vou te
mostrar como fazer. Portanto, o objetivo não é ensinar você a criar esse site exato. É apenas para mostrar
como editar e ajustar diferentes aspectos do site para que você possa obter
um resultado semelhante. Especificamente, como
criar uma seção de ofertas no topo do seu site
com uma bela tag de título H one, um belo botão grande um pouco de animação
associada a ele, um vídeo de vendas ali, vendendo Oma para ajudar
as pessoas por que elas querem
aproveitar a oferta gratuita. Como adicionar uma
cópia de vendas adicional ao design do seu site, adicionar uma postagem no blog, uma chamada à ação final, como editar e
ajustar o rodapé, como adicionar links internos e
externos, como ajustar esse
menu na parte superior,
adicionar um botão, criar um
logotipo, adicionar um favicon e ajustar as páginas de postagem do seu blog, bem
como sua postagem
individual no blog, todos esses pequenos detalhes
preciso saber para criar um site muito eficaz e de alta conversão com
esse tema gratuito De qualquer forma, vamos começar.
3. 3 nome de domínio: Para o meu laptop. Vamos começar. Portanto, o primeiro passo para
criar um site com o tema 2024 do WordPress é
registrar um nome de domínio Embora você possa obter um
nome de domínio em um host da web, recomendo fortemente o uso um registro de
nome de domínio dedicado. Você obterá preços melhores, para quem está protegido e taxas de renovação mais baixas. Agora, eu pessoalmente uso
e recomendo o Namecheap. Agora, começar a usar o
Namecheap é muito simples. Tudo o que você precisa fazer é digitar o nome de domínio que deseja registrar nesta caixa e
clicar em Pesquisar. Ok, então depois de
inserir seu nome de domínio, vamos clicar neste
botão vermelho grande Fantástico. Portanto, o nome de domínio
aparecerá, esteja ou não disponível para registro. Agora, se não estiver
disponível para registro, isso significa que você
precisa vir aqui e descobrir uma combinação de
palavras diferente. Agora, eu definitivamente
sugiro comprar domínio.com se este for
seu primeiro site. Mas se o seu
nome de domínio estiver disponível, basta clicar no botão
adicionar dois cartões. Agora, você pode ignorar todas
essas vendas adicionais aqui
e, em seguida, basta clicar
no botão Checkout E é realmente muito simples. Agora estamos na
página de checkout, então temos nosso registro de
nome de domínio Agora, o que é legal sobre um registro de nome de domínio
é que você pode registrar seu nome de domínio por até dez
anos por um preço baixo, você recebe gratuitamente a proteção dele. Portanto, nossa proteção é muito importante porque, ao
registrar seu nome de domínio, você precisa fornecer informações
precisas sobre quem você é,
como seu nome,
e-mail, endereço, número de telefone, informações
confidenciais
e, portanto, DomAndamePrivacy apenas mantém todas
essas informações privadas,
então você definitivamente
deseja que então você definitivamente
deseja Agora, você vai
querer clicar em Confirmar pedido quando estiver pronto para registrar
seu nome de domínio e precisará criar uma conta no Namecheap e adicionar todas as informações
adicionais
,
como seu nome,
e-mail, número de telefone
e assim por diante,
além de criar
uma conta no informações
adicionais
,
como seu nome,
e-mail, número de telefone
e assim por diante, além de criar
uma conta Então, quando você estiver pronto para continuar, clique em Confirmar pedido.
4. 4 hospedagem: É hora de conseguir
hospedagem. Portanto, você precisa um host
para ter um site. E neste tutorial, eu vou usar o Hostinger Agora, eu realmente gosto de hospedar aqui porque eles são muito
econômicos e
amigáveis para iniciantes, além de serem ideais Se você está apenas começando, precisa de um plano básico de hospedagem
na web de qualidade. Além disso, eles
também são recomendados pelo Wordpress aqui. Portanto, eles são um
host de qualidade com um ótimo preço. Agora você pode clicar
aqui para reivindicar a oferta, mas vamos clicar
aqui para hospedagem. Queremos hospedagem na web, ok? E então esta é a página de
hospedagem na web aqui. Vamos rolar um pouco
para baixo. Você tem alguns
planos diferentes, negócios
premium, startup na nuvem. Pessoalmente, gosto do
plano de negócios. Qual é a principal diferença
entre esses dois? Bem, você recebe 100.000 visitas
mensais aqui e recebe uma CDN gratuita Portanto, o CDN ajuda a acelerar seu site. Então,
isso é muito útil. Mas o plano premium está bom. Se você optar pelo
plano premium e quiser fazer o
upgrade para o
plano empresarial, você pode fazer isso. Mas a
diferença de preço é tão pequena que eu provavelmente escolheria
o plano de negócios. Então, basta clicar
neste plano Escolher. E, finalmente, tudo o que você precisa
fazer é concluir seu pedido. Portanto, não vou
insultar sua inteligência e mostrar como pagar
por algo online Apenas algumas coisas importantes às quais
você deve prestar atenção já que
está nesta página. Agora, você recebe uma garantia de devolução do
dinheiro em 30 dias. E aqui embaixo, com a hospedagem
empresarial na web, você tem o período de tempo. Então você tem 48 meses, você
pode mudar isso para 12, 24, 48 ou um mês. Pessoalmente, vou
ano após ano. Você pode decidir se
isso é para você ou não. Você obtém um nome de
domínio gratuito se comprar hospedagem
na web por um
ano ou mais. Agora, o problema com o nome de domínio
gratuito é que
ele é gratuito no primeiro
ano, mas depois disso,
você tem que pagar
as taxas de renovação, é por isso
que eu gosto do
Name jeep porque Namecheap tem taxas de
renovação mais baixas e você pode registrar
um nome
de domínio até dez anos Pessoalmente, é por isso que gosto de
manter meus serviços separados. De qualquer forma, está aqui embaixo. Você pode criar suas contas. Você pode selecionar sua opção de
pagamento e , em seguida, navegar até aqui
com um código de cupom, e podemos usar a web
P. Clique em Aplicar, e isso também economizará
dinheiro. E então, quando estiver
pronto para comprar, clique aqui para
enviar um pagamento seguro e pronto.
5. 5 configuração de sites: Bem-vindo ao HostingR Então, agora é hora de
instalar o WordPress Então, depois de
se inscrever na Hostinger e passar pelo processo de
integração, você
cria sua conta recebe vários e-mails E é assim que o painel se parece
inicialmente. Então, você terá
suas ações de conta e poderá configurar sua
hospedagem. Então, vamos começar. Então, eu tenho minha postagem comercial
na web aqui. Vamos continuar e
clicar em Configuração. E isso o direcionará
para um processo de integração. Então clique aqui para eu criar um site e, em
seguida, clique em Avançar. Agora, esse
processo de integração é muito útil se você não tiver
nenhum tipo de vídeo tutorial, mas como você tem esse vídeo, vamos clicar em Ignorar E então vamos
usar um site que já
possuímos. Está bem? Então, registramos nosso nome de domínio na Namecheap.
Então, o que você tem que fazer? Você tem que inserir seu nome de
domínio aqui. Então, deixe-me navegar até o
Namecheap. Este é o
nome de domínio que vou usar voghow.com Então, deixe-me digitar isso
em voghow.com. E aparecerá
abaixo que isso já foi
registrado em outro provedor Agora, novamente, como
você se inscreveu uma conta de
hospedagem de um ano ou mais, você recebe um
nome de domínio gratuito no primeiro ano. Então, se você quiser tirar
proveito disso, pode fazer isso aqui, mas eu já registrei
esse nome de domínio na Namecheap, então
vou clicar nele Ao usar um nome de domínio, registre-se em outro lugar, você
precisa conectá-lo manualmente ao seu site. Não tem problema. Eu vou te mostrar como fazer isso. Demora um minuto. Não é nada complicado. De qualquer forma, basta clicar em Avançar. Mas agora
podemos selecionar onde queremos que
nosso data center esteja. Então, você quer escolher
o data center mais próximo de
onde está seu tráfego. Então, eu vou clicar
aqui para Massachusetts, e vamos clicar em Avançar E está inicializando a configuração. Fantástico. Portanto, este é o nosso
painel para o hostinger Então, primeiro, aqui em cima, diz o status do domínio, não
apontando para nossos servidores de nomes. Vamos clicar em como corrigir isso. Vamos clicar em Vamos
começar ou qualquer outra coisa. E aqui estão os servidores de nomes da
Hostinger. Então, precisamos pegar
esses servidores de nomes e inseri-los no Namecheap Então, de qualquer forma, faça login em
suas contas baratas. Acesse o nome de domínio
que você deseja gerenciar. Então, aqui está o nome de
domínio lockow.com. Clique em gerenciar. Em seguida, ele o
levará para esta página aqui. Agora, você precisa
navegar até
aqui , Namecheap, Clique na pequena lista suspensa. Clique em DNS personalizado. Agora temos o servidor de nomes
um e o servidor de nomes dois. Onde obtemos
essa informação? Aqui mesmo. Simples assim. Copie e cole isso.
Estrondo. E pegue esse. E coloque isso aí mesmo.
E é um, e são dois. Certifique-se de clicar
nessa pequena marca de seleção
verde ali mesmo. E fantástico. Portanto,
diz que os servidores DNAT podem levar até 48
horas para entrarem em vigor Então, isso é chamado de propagação. Nunca vi isso
demorar tanto. Leva cerca de 10 minutos,
talvez um dia para se propagar com cada
servidor de nomes em todo o mundo, mas em alguns minutos, ele estará vinculado corretamente De qualquer forma, deixe-me afastar
X disso. É tão simples quanto isso.
Isso é tudo que você precisa fazer. Apenas espere. Não é grande coisa. Você pode continuar
instalando seu site. Vamos em frente e
instale o WordPress. Então, acabamos de configurar
nossos servidores de nomes para conectar nosso nome de domínio na Namecheb à nossa
conta de hospedagem aqui E agora podemos simplesmente
instalar o WordPress. Então, passaram apenas
alguns minutos e aquele pequeno banner
já sumiu, simples
assim. Tudo bem, então vamos
clicar aqui
no botão Auto Installer ali mesmo, e ele aparecerá com
algumas opções diferentes. Temos Juma,
WooCommerce, Wordpress, queremos o Wordpress aqui, então vá em frente e clique em Selecionar E depois é só instalar o
WordPress no nome do domínio. Então, o título do site. Então,
vou chamar esse vlog de H e vou mudar isso aqui E chamaremos isso, na verdade, eu chamarei aquele vlog, um,
dois, três, e depois
criarei uma senha E aí está. Agora, clique em. Quando estiver tudo pronto,
tudo estará bem. Clique em Avançar. Você também
pode abrir o Advance se quiser ver aqui
o caminho de instalação. Então, se você quiser entrar, desculpe, se você quiser instalar
isso no subdiretório Para a maioria das pessoas, isso
não é obrigatório. Então, um subdiretório seria como, eu quero instalar isso
apenas no slash Blog
e, em seguida, talvez usar o Juma para o.com, o
nome Por que isso está subavançado. A maioria das pessoas não
quer fazer isso. Você deseja instalar o WordPress
em todo o nome de domínio. Portanto, mantenha as coisas simples assim. Insira o nome de usuário, a senha, o e-mail e o título do site. Em seguida, clique em Avançar. E aqui, temos
a versão do aplicativo, o
idioma, o espaço,
todas essas coisas boas. Basta manter tudo como
está e clicar em Instalar. Feito. É tão simples quanto isso. Demora um minuto. Então, o Wordpress foi instalado
e, para acessar seu site, você pode clicar aqui
para acessar o painel de administração, que abrirá em uma nova guia. E lá vamos nós.
É tão simples quanto isso. A hospedagem torna incrivelmente
fácil instalar o WordPress. Então, estamos prontos para ir.
É literalmente isso. Assim, você pode acessar seu site
de algumas maneiras diferentes. Você pode fazer login em
sua hospedagem ou contas, navegar até o painel e clicar no painel do administrador. Pessoalmente, eu recomendaria apenas
entrar diretamente no seu site, então vou
mostrar como fazer isso. Então, já que você está aqui, certifique-se de que está
tudo bem. Como se o certificado SSL estivesse
ativo e funcionando. Se não estiver, clique nas pontas para reinstalá-lo e
verificar se está tudo bem Se você tiver algum problema, pode sempre
clicar aqui para suporte
do chatbot para hospedagem e entrar em
contato com o suporte De qualquer forma, então este é o seu site. Então, deixe-me ir em frente e
sair . Eu sei, acabamos de entrar Deixe-me sair. Tudo bem Então, como você acessa essa seção
do painel aqui? É muito simples acessar
seu nome de domínio, então o
meu é blockout.com Então é WP Admin. Abra isso, e é
isso aqui. Como você faz login com o nome do seu ano
ou e-mail que você acabou de criar e
a senha que você acabou de criar. Então,
deixe-me ir em frente e fazer isso. Ok. E deixe-me ir em frente
e clicar no botão Login. E aí está. Portanto, é tão simples quanto isso
fazer login no seu
site conforme necessário. É por isso que eu recomendo
acessar seu site em vez de fazer login na sua conta de
hospedagem. A maioria das pessoas não faz isso. A maioria das pessoas acessa o WP Admin e faz login diretamente no
site De qualquer forma, é assim que você instala o
Wordpress com o Hostinger.
6. 6 visão geral do wordpress: Para WordPress. Temos algumas
coisas a fazer para
limpar o Wordpress no
back-end antes de
começarmos a criar nosso site.
Então, vamos começar. Clicamos em Dispensar aqui. A primeira coisa que queremos fazer é excluir alguns
plug-ins diferentes que vêm instalados com nossa
hospedagem de nossa conta. Agora, isso é totalmente
opcional para você, mas eu gosto de manter
tudo bem limpo. Portanto, temos
ferramentas de hospedagem de IA e integração. Vou prosseguir
e desativar tudo isso. Clicamos em
Inscrever-se aqui. Nós vamos. E então você pode clicar em Excluir se quiser removê-lo. Também vou desativar o cache de velocidade da
luz porque
um plug-in de cache é essencial para criar seu site e
ajuda a
acelerá-lo porque fornece uma versão em cache
ao visitante final Mas, como estamos projetando o site e fazendo
muitas alterações, não
queremos que nosso site seja armazenado em cache
enquanto o projetamos Então, você só quer
desativar isso
e, quando seu site
estiver completamente pronto, você estará pronto para começar e, em seguida,
deseja reativá-lo Deixe-me clicar
aqui para desativar isso. Agora, vamos adicionar um novo
plug-in
aqui e eu vou
digitar Rank Math Rank Math é meu plugin de SEO
favorito. Apenas lhe dá controle
sobre os títulos de SEO, meta descrição, os redirecionamentos três
em um um monte de
pequenas coisas úteis Então, deixe-me clicar
em Instalar aqui
e, em seguida, clicaremos em Ativar. E isso nos
direcionará para um processo de
integração aqui Se você quiser
passar por isso, você pode, mas vou clicar
aqui para pular agora para que eu possa
voltar ao painel, e vamos clicar
lá embaixo para retornar
ao painel E aí está. Então, se você quiser voltar
para essa página, você fica tipo, Oh, David,
como faço para obter o Assistente de Configuração. Está bem? Então, tudo o que você precisa fazer é clicar aqui
para acessar o Assistente de Configuração, e isso o direcionará de volta
ao processo de integração Tudo bem. De qualquer forma, a
próxima coisa que queremos conferir aqui são os usuários Então, aqui está seu nome de usuário e e-mail que
você tem vinculado a tudo, e aqui está a função. Portanto, você deve ter uma função de
administrador. Você notará que eu
tenho uma pequena foto minha ao lado desta
aqui. Como isso funciona? É de um serviço
chamado Gravitar. Então você pode simplesmente assiná-lo no
Gravitar, é de uso gratuito. Em seguida, você anexa um e-mail
e uma foto juntos. Portanto, uma foto sempre aparece
com o e-mail associado. Então é assim que isso está sendo
povoado ali mesmo. E quando estiver na
sua conta de usuário, é
aqui que você
pode alterar as senhas e adicionar uma boa descrição. Portanto, URLs de perfil adicionais, informações
biográficas. Então, esta é aquela pequena
seção que você vê em um blog onde você vê David gosta de longas caminhadas na
praia, esse tipo de coisa. Você colocou isso aqui. Depois, você também pode gerar uma nova senha lá
embaixo. E então temos o
rank Math instalado. Agora podemos mudar a
aparência do trecho para o autor Então, o autor é o título do
autor ali mesmo. É por isso que eu gosto de matemática hierárquica. Mas de qualquer forma, é isso
que você faz com as configurações aqui Então, deixe-me sair disso. E vamos
adicionar um novo usuário apenas para mostrar as diferentes
funções que você pode criar. Então, aqui, você
tem funções diferentes, você tem assinante,
colaborador,
autor, editor, administrador Isso é útil quando você atrai escritores e outras pessoas apenas para publicar conteúdo
em seu site. Você não quer dar acesso de administrador às
pessoas. Normalmente, você deseja
adicionar um autor ou editor porque eles têm acesso
diferente ao site. Assim como um editor pode editar
todos os conteúdos do autor. O autor só pode editar seu
próprio conteúdo. Portanto, você pode pesquisar
isso sozinho, mas é por isso que gostaria de
ter funções diferentes. Se o seu site crescer, você quer atrair
mais pessoas. Tipo de coisa. Tudo bem, então, de qualquer forma, vamos clicar aqui para
ver as configurações Sim, não quero sair
desta página agora. Tudo bem, então
aqui está o
título do site e o slogan Isso não é realmente
tão importante. Então você pode simplesmente deixar como está. O ícone do site é o Fabcon. Então você pode clicar em escolher um ícone de site e esse é esse
pequeno favicon ali mesmo Então, aqui, você tem
o URL do WordPress, endereço do
site e
está pronto para começar. É isso mesmo aqui. Agora vamos clicar em leitura. E aqui, ao
ler,
sua postagem no blog mostra a
maioria das postagens às vezes, feed
de distribuição mostra isso Então, você só quer manter
tudo conforme necessário aqui e escrever apenas coisas
básicas ali. Nada realmente a mencionar.
Deixe-me clicar aqui. Agora, está tudo bem por aqui. Você tem
configurações de discussão se
quiser ativar os comentários em seu site. Mas o mais importante aqui
é o permink ao qual você deve
prestar atenção Agora, por padrão, o Wordpress
agora tem postname como estrutura de URL padrão,
e isso é aceitável Então, será
website.com slash POS Title. Pessoalmente, gosto bastante. Outra estrutura
que eu gosto
seria adicionar na
categoria, se você quiser. Então, eu não teria a primeira
categoria. Vamos pegar isso e colocar isso aí mesmo. Então
você pode ter categoria. Aí está. Categoria, nome do
post, se você quiser. Mas eu mesmo uso o nome do
post. Mas se você tem um site
muito grande e vai ter categorias e
subcategorias
específicas , essa
estrutura de URL é bastante útil Mas para 99% das pessoas, nome da
postagem é tudo que você precisa, então mantenha tudo
como está aqui. Mas se você quiser
mudar a estrutura da URL, é aqui que você faz isso, mas eu definitivamente sugiro escolher uma estrutura de URL
e ficar com ela. Não mude isso mais tarde. Tudo bem, então, de qualquer forma,
essa é apenas a visão geral básica
do que você precisa
saber com o WordPress. Agora,
queremos navegar até aqui até a
aparência e os temas Agora você quer que o
tema 2024 seja ativado. Você tem o tema 2023,
2022 aqui. Então, você só
quer ter certeza de que esse tema
é o que está ativo. Você também pode excluir esses temas,
se quiser. Posso clicar aqui
e clicar em Excluir. Vamos clicar em OK,
depois clicar aqui, clicar em
Excluir e, em
seguida, clicar em OK E então
temos apenas o tema 2024. Agora estamos prontos para
criar nosso site.
7. 7 editor de site completo: Vamos começar a criar
nosso site com o tema 2024 do WordPress Primeiro, vamos dar uma
olhada em nosso site. Clique aqui
onde está o logotipo. Clique em Visitar o site. Estrondo. Eles deveriam
abrir aqui mesmo. Agora, por padrão, essa é
uma página inicial muito boa. Gosto muito,
mas vamos criar uma
página inicial do zero, não se
preocupe, mas deixe-me
mostrar como isso funciona Depois de
abrir, você pode clicar aqui para editar o site e começar a criar
a página inicial e todos os elementos de design que
você vê à sua frente Se você quiser apenas
abrir o editor diretamente, navegue até
aqui até a aparência. Em seguida, você clica em
Editor. Lá vamos nós. Vamos esperar que isso passe despercebido. E sim, ok, agora
o site está carregando. Então, aqui, temos algumas opções diferentes. Então
você tem sua navegação. Sua navegação é esse
elemento ali mesmo. Portanto, diz que a lista de páginas
não pode recuperar páginas. Isso porque ainda não há
páginas. Então não se preocupe. Mas quando você publica uma página como sobre contato, etc., ela será
preenchida automaticamente no topo, e veremos como editar
essa seção principal posteriormente Você tem seus
estilos aí. Então, por padrão, ele
vem com várias paletas
diferentes nas quais
você pode simplesmente
clicar e alterar as E, claro, você pode personalizar
tudo sozinho, as cores
que
quiser e a opção de fonte
que desejar. Aqui estão suas páginas. Portanto, publique os
rascunhos do cronograma pendentes. E então temos nossos
modelos ali mesmo. Assim, você pode ver todos
os modelos incorporados neste site
que você pode aproveitar. É muito bom por lá. Em seguida, padrões ali mesmo. E os padrões são simplesmente seções de
blocos que você pode simplesmente adicionar ao site com o clique de um botão. Então
você vê que está tudo trancado. Isso porque você não
pode ajustá-lo, mas pode adicionar essas
seções ou padrões, quiser chamá-los
na página específica
que está editando. Então você realmente não quer
editá-lo a partir daqui. De qualquer forma, em
termos gerais, é
assim que esse elemento
aqui Então, agora podemos clicar no
site ali mesmo, e temos algumas coisas
diferentes. Então, vamos clicar
nesse aqui mesmo. Veja como é um bloco. Então, isso é chamado
de editor de blocos. Agora, algumas coisas que você
precisa saber ao usar
o editor de blocos é clicar nele, agora estou editando este bloco. Agora, se eu quiser editar
um bloco diferente, basta clicar nele. É simples assim. E
então você quer ter certeza
de que tem algumas opções
diferentes aqui no topo, você tem Salvar. Você tem suas configurações,
então você tem seus estilos. Os estilos são globais. Isso muda tudo
no site. E então esse elemento
ali faz a mesma coisa que a outra seção, onde
você pode
alterar automaticamente o estilo lá. Na maioria das vezes, você vai
querer estar aqui em suas configurações e depois no bloco e depois ajustar
o bloco específico Agora, quando você tiver um bloco,
clicaremos neste. Portanto, um compromisso com a inovação
e a sustentabilidade. Tudo bem, então temos
estilos, temos o padrão. E com o Asterisk, esse é apenas um aspecto exclusivo
desse tema, então vamos
mantê-lo como padrão E aqui, eu posso
mudar a cor do texto e o fundo da cor. Para o texto, se eu quiser,
tipografia aqui, temos tamanhos diferentes com os
quais podemos brincar Se você quiser ter um controle um
pouco mais granular, basta
clicar aqui e abrir conforme necessário Então as dimensões estão aqui, então você tem margens de preenchimento Então, preenchimento e margens,
você pode torná-lo amplo ou mais
estreito, se quiser.
Avançado, você pode
configurar um link âncora em HTML Então, um link âncora, ou seja, se você quiser ter
um item de menu
aqui em cima , diremos recursos O usuário clica nos recursos e, em
seguida, eles são arrastados
para uma seção específica da
página e não para
uma página separada Isso é tudo o que um link
âncora é. Mas, na maioria das vezes, você clicará em um bloco e se
afastará dele. Então, vamos
clicar nessa configuração. Em seguida, você
usará o bloco e, em
seguida, apenas alterará o texto, a tipografia de
fundo E com o tema 2024
tem esse recurso Asterk. Então,
quando você está projetando elementos
diferentes , você fica tipo,
aqui, tipo, como faço para me livrar disso? Tipo, eu quero me
livrar do Asterik. Não posso simplesmente clicar e
desligá-lo assim por
padrão com o Asterk.
É assim que funciona. Mas, novamente, como eu disse,
vamos criar
uma página inicial personalizada, mas estou apenas dando
uma visão geral ampla sobre como
esse processo de visão geral ampla sobre como design funciona.
E então aí está. Então, clique no W
e depois navegue volta ao painel do Editor. E é realmente muito simples. Então, vamos começar a
criar nossa página inicial.
8. 8 configuração da página inicial: Vamos criar
uma página inicial dedicada para nosso site Então, para começar,
é muito fácil. Tudo o que você precisa fazer é
navegar pelas páginas. E então, quando isso abrir, clique em Adicionar novo. Agora, vamos
criar uma página e depois defini-la como página inicial,
então não importa realmente o título
que você dá a ela Não sei por que
isso está aparecendo. De qualquer forma, basta adicionar um título. Então, vou chamar
essa página inicial. Mantenha as coisas simples. Vamos
continuar e clicar em Publicar. Clique em Publicar.
E simples assim. Agora vamos clicar em W e voltar ao nosso painel
do Wordpress, e queremos navegar até aqui
até as configurações. Em seguida, queremos navegar
até a leitura. Sua página inicial exibe sua
última postagem ou uma página estática. Queremos clicar na página estática. E para a página inicial,
queremos selecionar a página inicial ou o que quer que você faça com o título da
página, não importa De qualquer forma, deixe-me
clicar em Salvar alterações. E lá vamos nós. Então, vamos
dar uma olhada no site, então eu vou
clicar no logotipo. Abra isso em uma nova
guia e pronto. Los r. Parece exatamente o que
eu esperava. Página inicial. Agora podemos usar isso
como um modelo em branco, mas há apenas
uma
pequena etapa adicional que precisamos fazer. Então, vamos navegar até
nossas páginas e abrir essa página. Ok, então o que precisamos
fazer é, por que isso está
aparecendo de novo? De qualquer forma, precisamos ajustar as configurações no
back-end aqui Então, precisamos abrir a página
e, em seguida, alterar os modelos
aqui das páginas
e, em seguida, queremos
trocar o modelo Agora você fica tipo, Bem, por quê? Por que eu quero fazer
isso? Tudo bem, então abra o site novamente
e dê uma olhada rápida. Agora, o que você vê? Você vê uma tag de título H one na frente e no centro que diz página inicial Eu não quero essa tag de título
H one. Não quero esse
título no topo
da página
e não consigo me livrar dele. É tipo, como faço para me livrar disso e adicionar outra coisa que seja um pouco mais
atraente e melhor projetada Então, com esse tema,
é muito simples. Tudo o que você precisa fazer é clicar nos
modelos aqui para ver a página. Então você quer clicar
em Swap Template. Agora, você tem
alguns modelos diferentes. Você tem página com barra lateral, página com imagem
ou página sem título Queremos uma página sem título. Em seguida, clique em Salvar. Portanto, deve dizer página
sem título ali mesmo. Deixe-me clicar em
Salvar, lá vamos nós. E lá vamos nós. Tudo bem, então vamos
recarregar isso. E lá vamos nós. Então, agora temos um
bom modelo em branco para começar a editar nosso site.
9. 9 Crie uma chamada para ação: Adicionando uma chamada à
ação para nosso site. Agora, vamos dar uma
olhada na página inicial. Temos um modelo em branco configurado
e, da forma como vou
criar esta página inicial, é como uma
página de vendas para uma oferta gratuita Então, você já viu em outros
sites que é como
baixar meu e-book, obter minha lista de verificação, assistir minha master class, Vamos
criar uma página inicial assim, além
das postagens e páginas do blog, do cabeçalho e
do rodapé Todas essas coisas eu vou te mostrar
mais tarde no vídeo tutorial. Mas agora,
precisamos adicionar uma chamada à ação no
topo, aqui. Então, volte para a página que você
definiu como sua página inicial Em seguida, clique no sinal de mais. Em seguida, clique em Procurar tudo. Então, queremos navegar até
aqui até os padrões. Agora, você tem
vários
padrões diferentes sobre banners,
chamados de ação
em destaque, e assim por diante Se você entrar na chamada ação, você tem vários modelos
diferentes aqui que são muito bons. E eu
vou realmente usar esse. Este é apenas um bom exemplo para
mostrar como editar coisas. Aqui, isso
parece muito bom. Deixe-me clicar aqui
para ver as configurações. Agora que tenho
as configurações abertas, temos essa cor de fundo. Talvez você não goste dessa cor. Portanto, certifique-se de selecionar a
imagem ou o padrão, como
quiser
chamá-lo. Em seguida, verifique se você
selecionou o bloco. Você deseja navegar
aqui até as configurações ou os estilos. E então é aqui
que você pode mudar a cor. Então, eu quero mudar
o plano de fundo e herdar a cor
do tema Então, há brancos e depois
há a cor do tema. Então, eu gosto da
cor do tema que é esbranquiçada. Gosto da forma como isso é configurado. E então aqui, essa deve
ser sua tag de título H one. Por que sua tag de título H one? Porque é o
título da página. Porque, novamente, lembre-se de que essa
é sua tag de título H one, mas no tempo que estamos usando, estamos escondendo o título da página. Então esse é agora o título da página. Então você precisa destacar isso, mudar isso para H um, e você pensa:
Bem, eu não gosto quão grande isso é.
Tipo, sem problemas. Clique aqui para ver a tipografia, e então você pode
minimizar isso um pouco, diminuí-lo um pouco Depois, você pode alterar
a cópia
aqui conforme necessário,
aqui e aqui. Agora, temos essa imagem
aqui e você pode substituí-la pela sua própria imagem. Obviamente, você
precisará criar uma imagem e ela deve mostrar
o que o usuário final receberá. Seja qual for a sua oferta gratuita,
seja um
vídeo, um curso, mais uma vez, uma aula
magistral, um truque, uma
lista de verificação, qualquer Você vai ter que criar um gráfico e
adicioná-lo aqui. Mas você também pode adicionar um vídeo, que é o que vou
mostrar como fazer. Podemos simplesmente clicar
nessa imagem aqui. Na verdade,
deixe-me clicar em Salvar. E vamos dar uma olhada rápida
para ver como isso aparece. Vamos recarregar os
sites ali mesmo. E sim, isso parece ótimo. Eu quero mudar
isso para dizer um vídeo. Já tenho algumas
guias diferentes abertas para vídeo, então deixe-me clicar nesta
imagem e clicar em Excluir Então, basta remover a imagem. Agora podemos adicionar
um vídeo aqui. Então, deixe-me
clicar no sinal de mais, e eu quero digitar no YouTube, e então há um
botão do YouTube ali mesmo. E esse pequeno
bloco do YouTube. Podemos colar isso. Clique em Incorporar e
clicaremos em Salvar novamente aqui. E agora vamos recarregar isso. Sim, e agora temos um vídeo
bonito aqui. Mas e se você disser: Bem,
eu não quero incorporar o
YouTube ou quero ter um pouco mais de marca
no meu site, tudo Então, eu definitivamente sugiro usar uma
opção alternativa de hospedagem como Vemo ou Vemo Vimeo, não Vemo.
Não estou enviando dinheiro. Vimeo ou algo parecido.
Se você quiser usar o YouTube, talvez
você possa simplesmente deixar
o vídeo não listado
e, em seguida, usar um plug-in
dedicado para Wordpress que pode ajudá-lo a melhorar a
marca do vídeo Então, qual plug-in eu recomendo? Então, deixe-me encerrar isso. Clique aqui para ver o W e vamos navegar até aqui
para conectá-lo ou conectá-lo. E vamos adicionar um novo plugin. E vamos
adicionar a camada Presto player
Presto aqui Ok, é o melhor
reprodutor de vídeo do Presto player. Ok, então talvez seja chamado de
Ultimate Video player agora. De qualquer forma, vá em frente
e instale isso. O melhor reprodutor de vídeo para WordPress, da Presto Player Vamos clicar em Ativar
ali. E bom. Então, agora classificamos o
Mathio e o Presto player como plug-ins ativos no site Então, agora precisamos
voltar às nossas páginas. E vamos para a página inicial, a página que estamos
editando aqui E agora podemos novamente excluir isso e clicar
no sinal de mais. E então queremos
digitar o Presto player. Então, o jogador Presto está ali mesmo. Clique em Ns e este
é um vídeo do YouTube. Então, se você estiver criando
um vídeo de vendas, eu definitivamente
recomendo usar o VMO Então, só porque ele
remove todos os tipos de vídeos recomendados e tudo mais. Mas você pode usar o YouTube e usar vídeos
não listados em
seu vídeo de vendas para incentivar as pessoas a
clicarem no botão
aqui para baixar o
que você está oferecendo De qualquer forma, deixe-me
pegar essa URL novamente e colocar essa
URL aqui Vamos clicar em Adicionar vídeo. E isso parece muito melhor. Então, vamos economizar rapidamente. E vamos
abrir o site só para dar uma olhada, sim, aí está. Ok, então tudo
foi carregado corretamente. A razão pela qual eu gosto do Presto
player é porque você tem muito mais
controle sobre a aparência marca do vídeo que está sendo exibido
em seus sites Então, se eu clicar aqui, se eu clicar aqui, agora temos o bloco selecionado, e então eu tenho várias opções
diferentes para a forma como
esse player de opções
diferentes para a forma como vídeo é exibido. Configurações de vídeo, silenciado, reprodução automática, tempo de
reprodução ali
e, em seguida, temos Eu posso mudar o curso, mínimo, simples,
YouTube, otimizado. Então, apenas algumas
predefinições
úteis, a marca global do player, para que você possa alterar a
cor aqui para combinar o design do seu site e as cores escolhidas
para o seu De qualquer forma, é por isso que eu gosto do Presto player,
porque você tem um pouco mais de
flexibilidade e controle sobre como isso é
exibido em seu site Então, a próxima coisa que você precisa fazer é, novamente, criar algum
tipo de vídeo de vendas se
você estiver oferecendo
algum tipo de você estiver oferecendo curso gratuito ou qualquer outra coisa,
e então ter um bom vídeo, enviá-lo para o Vimeo ou YouTube, torná-lo não listado e
usar o Presto Player Em seguida, altere a cópia
aqui para corresponder à oferta gratuita.
10. 10 Como personalizar a chamada à ação: Então, eu atualizei
a cópia da nossa chamada à ação. Então, algumas coisas diferentes eu fiz. Então, coloquei o
texto em negrito aqui em cima. Eu adicionei pequenos
emojis de marca de seleção para marcadores, que se destaquem um
pouco mais E eu atualizei o botão, para que ele chamasse um
pouco mais de
atenção e mudei a cor, para que combinasse com o
player de vídeo aqui Agora, deixe-me entrar aqui e
mostrar o que eu fiz. Então, como destacar o texto e colocá-lo em negrito, basta
destacar o texto. E clique no botão B. Isso coloca o texto em negrito ali mesmo. E então o parágrafo de texto
ali mesmo, muito simples. Então eu acabei de adicionar
marcadores aqui. Então, literalmente, isso é
apenas uma linha de texto, linha de texto, linha de textos. Agora, como consegui esse
pequeno Emoji de marca de seleção? Eu literalmente pesquisei Emoji com marca de seleção
verde no Google. E então me direcionou para o
Emoji PDA aqui. Você clica em Copiar, depois
clica em Colar, colar, colar. Feito. Simples assim. Então, aqui mesmo,
temos o botão. Então eu fiz algumas
coisas diferentes aqui. A primeira coisa que fiz foi,
nas configurações do bloco, que fosse 100%. Então, isso faz com que
o botão tenha 100% de largura para preencher toda essa seção
vertical aqui. Então, parece apropriado. Depois, a outra coisa
que fiz foi clicar nos estilos. Depois fui para o plano de fundo e criei a
cor de fundo do botão, combinei com o
reprodutor de vídeo aqui, e depois fiz
a tipografia L grande. Então, novamente, chama mais
a atenção.
11. 11 Como finalizar a seção de chamada para ação: Ok, então esse botão
aqui, não vai mentir. É meio chato porque não
tem animação. Com os botões em seu site, você quer ter algum
tipo de animação para indicar ao
usuário final que ele pode clicar e interagir
com esse botão. Então, se isso fosse
capaz de destacar, escurecer, levantar, qualquer coisa, apenas fazer
alguma coisa, seria ótimo Mas, infelizmente, esse é o botão
padrão do Wordpress e não há opções para
ter recursos como esse. Então, teremos que
instalar um
plug-in diferente e criar um botão
diferente. Agora, novamente, se você está feliz com esse botão, você fica
tipo, eu não me importo. Isso é bom para
mim. Tudo bem. Ótimo. Guarde isso. Para cima. Mas, para mim, quero algo
que chame mais a
atenção e De qualquer forma, deixe-me
clicar aqui. Vamos clicar no W e vamos navegar até
aqui até Plugins. E eu vou adicionar um
plugin chamado stackable. Então clique em Au Plugin. Em seguida, clique aqui
e digite Stack ble,
Stack, ble . Tudo bem.
Procure por isso. Tudo bem, então aqui está Stack Bull Page Builder Gutenberg Tudo isso adiciona blocos
adicionais para você
usar no blocos
adicionais para você
usar design do seu site. Clique em Instalar e clique
em Ativar. Lá vamos nós. E clicaremos em
pular aqui. Tudo bem, então está instalado. Então, vamos
voltar para nossas páginas e voltar para a página inicial
que estamos editando E é hora de adicionar
um novo botão. Então, vamos navegar até aqui. Deixe-me chegar a um
pouco de espaço. Clique no sinal de mais, navegue aqui e
clique em Procurar A. Agora
que você instalou o
Stackable, há uma grande variedade de plug-ins
do Wordpress que adicionam blocos adicionais Eu só gosto de empilháveis.
Então, essa cor
rosa-choque, arroxeada, é
empilhável Então, o que queremos é
adicionar o botão. Então, aqui para o botão, esse é um botão empilhável Agora podemos começar a
criar nosso novo botão. Então, deixe-me ir
em frente e adicionar o texto aqui. Então pegue o
minicurso aqui. Ok, então isso parece
bom lá. E queremos
mudar a cor
desse botão para combinar. Então,
deixe-me clicar aqui. Vamos clicar nos estilos, no fundo e na
cor personalizada que eu tenho aqui. Vamos clicar em Copiar ali. Então, vamos clicar
no botão aqui. E bundas e
cores ali mesmo. Depois, bundas e cores.
Clique sobre isso. E então, aqui, só
queremos copiar e
colar essa cor, e pronto. E
isso parece bom. Então, novamente, um pouco pequeno. Queremos que o texto seja maior e queremos que o
botão seja maior. Mas podemos fazer tudo isso no StacCableJ de forma um pouco
diferente Como se você não pudesse destacar
o texto aqui e tudo mais. Você tem que interagir
com tudo aqui. Então esse
era o botão Color. Agora, lados e espaçamento dos botões, bordas e sombras,
ícone, Vamos pular aqui
para ver a tipografia. E aqui, podemos tornar o botão um pouco maior. Então, continue assim. E eu quero mudar a
tipografia e aumentar o peso. Vamos apenas dizer em negrito. E sim, isso parece
ótimo lá. Então, vamos clicar em Salvar e
ver como está. Vamos rever a visão Ok, então eu gosto bastante desse botão
do jeito que está configurado, então fica bem aqui, então vamos clicar no botão novamente E podemos simplesmente continuar.
Então, com o layout aqui, se você navegar até aqui, você terá tamanho e espaçamento
dos blocos, então você pode ter várias margens
e preenchimentos diferentes , pequenas
coisas Normalmente, você ficará
na seção de estilo aqui. Você tem o link padrão,
Goes plain. Eu gosto do padrão. De qualquer forma, então coloque bordas
e sombras aqui. Portanto, você pode adicionar um raio de borda se quiser
que seja um pouco mais redondo Então, eu gosto de um pouco mais
redondo aqui. Guarde talvez apenas um quatro, mas muito sutil aí mesmo. E então contorno da sombra. Você pode dar
uma boa sombra ao botão
para que ele saia da
página da web e escolha nove Vou manter algo sutil assim, talvez cinco. Estilos aqui, efeito de foco. No momento, é enviado para escurecer. E eu quero que isso
seja, digamos, elevador. Mantenha-o como elevador ali mesmo, e talvez
possamos aumentar o tamanho e o espaçamento do botão Então, talvez apenas em toda a largura,
mantenha as coisas simples assim. E vamos clicar em Salvar e
vamos recarregar as vistas. E sim, isso parece muito melhor. Então esse botão é muito melhor, um
pouco de animação
associada a ele. Então, novamente, para alterar os
estilos acima, o efeito Hover, você
pode alterar a elevação,
escurecimento, escala, elevação Você pode brincar
com isso para ver o que quiser pessoalmente. Tem uma pequena
sombra projetada agora. É um
design muito sutil. É arredondado. Então, eu realmente gosto disso.
Isso é muito melhor. Então, agora podemos ir em frente
e deletar essas pontas ali mesmo. Saia disso. Ótimo. E precisamos dar
a isso um
pouco de espaço para respirar. exemplo, eu não gosto de como
esses botões ficam logo abaixo do texto,
então basta pressionar Enter Sim, eu sei que é super complicado. De qualquer forma, clique em Salvar. Tudo bem, então vamos
recarregar os sites aqui E agora temos nosso belo botão
estilizado que sai da página da web quando passamos o mouse sobre ela e
pronto E, finalmente, para onde você
direciona as pessoas exatamente? Então, eu sei que vou
receber essa pergunta. Então agora você tem
seu botão configurado. As pessoas clicam nele.
Para onde você os envia? Você quer enviá-los
para uma página compacta. Então, basta clicar nesse botão e, em
seguida, entrar em uma página na
qual posso inserir meu e-mail para ter acesso
ao que estou
vendendo aqui Como você cria essa página? Ou você pode criar sua
própria página em seu próprio site, então basta seguir o
processo que eu já mostrei, onde
você cria uma página, página sem barra lateral, sem cabeçalho, seja o que for, e depois basta adicionar o formulário de inscrição por e-mail Para a maioria das pessoas, eu
sugeriria usar seus clientes de
e-mail. Portanto, se você estiver usando o ConvertKit, ConvertKit vem com páginas de destino
gratuitas, então você pode simplesmente personalizar
uma página de destino e ter aqui
o formulário no qual as pessoas podem inscrever para obter Você também pode usar o card.co, que é um ótimo construtor de sites de uma
página Você pode usar páginas de leads. Mas a jornada do usuário é
clicar no botão levá-lo para uma página compacta Na página de compressão, é aí
que eles inserem e-mail ou
o nome e o
e-mail para obter a coisa Depois que eles clicarem no botão para
realmente enviar o e-mail
, você os
instrui a baixar o conteúdo gratuito que
você está fornecendo ou assistir ao vídeo gratuito. E para realmente criar um link
para a página específica, basta navegar aqui até onde diz Link. Agora, você verá
que diz abrir em uma nova guia e abrir
tinta em uma caixa. modo geral,
se você estiver
vinculando seu site a
uma URL diferente, a uma página compacta,
o que você geralmente deseja usar, abra em uma nova guia Você não precisa, mas
isso é o que eu faria. Abra em uma caixa de luz. Uma caixa de luz é uma tela ou uma caixa que aparece como uma
sobreposição na parte superior do seu site Então, eu definitivamente não
usaria o Openink em uma caixa de luz. Então, eu usaria abrir em uma nova guia, novamente, se você estiver direcionando
as pessoas para sua página de compressão, mas
depende totalmente de você, de qualquer forma, quando você tiver sua página compacta ou
página de vendas, seja o que for, direcionaremos o visitante final Você quer clicar
no botão ali mesmo. Você deseja navegar até Link e, em
seguida, inserir
seu link aqui.
12. 12 Crie um elemento de venda: Adicionando elementos de venda
à nossa página de vendas. Então, um elemento de venda,
como eu gosto de chamá-lo, é algo que
ajuda a estabelecer confiança e autoridade no site. Você já viu isso
em outros sites em que está em um
site que diz, como apresentado neste site, neste
site, neste site ou em
mil clientes da AB, cinco avaliações de servidores, um
prêmio do órgão regulador. Tipo de coisa. Então, como você
adiciona isso ao seu site? Então, deixe-me abrir as configurações do
bloco ali, e eu quero clicar
no bloco amplo. Então, agora
tudo está selecionado, e eu quero clicar
no pequeno sinal de
mais que está
lá embaixo para adicionar um novo bloco. Vamos
clicar em Browse A e
voltar aos nossos padrões. E então, aqui embaixo, depoimentos que eu conheço, surpreendentes, mas o
bloco de depoimentos eu
realmente gosto para esse
propósito aqui Então, basta clicar nele para adicionar
e pronto. Então, a primeira coisa que
queremos fazer é mudar
a cor de fundo para combinar a cor de destaque que está acontecendo com o
resto dos sites Então, deixe-me clicar
aqui para ver esse azul. Aí está. Vamos destacar
essa cor de destaque E agora vamos clicar no
bloco aqui embaixo novamente. E então queremos clicar aqui para
ver os estilos. Você quer clicar no plano de fundo. E então você quer clicar na
área branca
aqui para que ela
apareça com o hexadecimal Você quer ignorar essa
base dois, tanto faz. Agora você quer colar
isso aqui, e isso parece ótimo. E então queremos
ter certeza de que o texto é branco, porque isso que estamos fazendo
em todo o design. Então, o botão azul
aqui tem texto branco. Agora, aqui está
um monte de imagens. E então não queremos isso. Só quero me livrar
disso. Mantenha as coisas simples. Em seguida, queremos adicionar
várias colunas diferentes. Então, eu quero clicar
aqui para ver o sinal de mais, e então queremos adicionar
colunas ali mesmo. E eu sugeriria três
ou quatro, mas vou
simplificar. Vamos fazer apenas três. E então temos várias colunas
diferentes aqui. E então, com essas colunas, é aqui que
podemos adicionar texto. Agora, temos um pequeno
espaçador ali. Então, queremos mover
o espaçador para cima. Então, é útil aqui. Não é grande coisa, mas
mantemos isso aí. E agora queremos adicionar texto. Então, clicamos no sinal de mais, no parágrafo e depois no título. Clique aqui, texto
do parágrafo, título, clique aqui, texto do parágrafo, boom e título. Lá vamos nós. Ok, então aperte a barra de espaço, então a cópia vai aqui e a
mesma coisa com isso. cópia vai aqui. Então a mesma coisa. Novamente, a cópia vai aqui, apenas para fins de demonstração. E, claro, queremos mudar esse texto para branco, então você
pode simplesmente clicar nele, clicar no sinal
e depois alterar a cor do texto clicando
nele ali Então, deixe-me clicar no
backspace para voltar a ficar preto. Lá vamos nós. Tudo bem, então, de qualquer forma, vamos
mudar isso de volta para preto só para manter
a consistência Então, deixe-me clicar
em Salvar. E ótimo. Então, vamos
ver o site. Então, vemos como isso está acontecendo do ponto de vista do
design, e isso parece muito bom, mas algumas coisas, então não é equilibrado. Então, queremos ter
certeza de que essas colunas estão todas centralizadas, para que tudo se
encaixe perfeitamente Há muito
espaço aqui. Então, quando você está
criando a cópia
aqui, precisamos pegar isso e ter certeza de centralizar o texto
ali mesmo no centro da linha
e, em seguida, no
centro da linha, no centro da linha, no centro da linha,
no centro da linha Lá vamos nós. Então,
vamos clicar em Salvar. E vamos recarregar os
sites ali mesmo. Muito melhor. Portanto, a cópia que quero adicionar
aqui é qualquer coisa
que ajude a estabelecer
confiança e autoridade
no aqui é qualquer coisa
que ajude a estabelecer site, como
milhares de estudantes se juntando a 5.000 outras pessoas, um prêmio de um
órgão governamental, seja o que for. Então, vou atualizar
esta seção com algumas cópias. Tudo bem, então aqui está
o que eu inventei. Temos 6.000 blogueiros. Eu assisti mini coors, Blueprint, roubar meu processo
passo a passo,
recursos, aprendi como
roubar o segredo, como criar diferentes
estilos de conteúdo Seja o que for. Então eu também decidi adicionar um pequeno asterisco ao lado cada pedaço de texto aqui, para que ele se
destaque um pouco mais Então, vamos dar uma olhada
nisso no back-end. Tudo isso é literalmente apenas um asterisco que você
pode usar no teclado E então eu acabei de tornar o texto do
título aqui grande. E então esse é
o mesmo corpo de texto. Então, você quer
ter certeza de que esse texto tem o mesmo tamanho desse
texto aqui em cima. Você quer ser
consistente com isso. Então, seu H um, H dois, H três, tags de
título, que são essas
coisas, sua tag H um, H dois tag, H três
ou certos tamanhos, então seu corpo de texto
é mais consistente. Portanto, o corpo do texto deve ser consistente em todo
o design do site. De qualquer forma, isso é tudo para
os elementos de venda.
13. 13 Crie um CTA de página do meio: O design da página inicial está indo muito
bem. Agora, a próxima coisa
que precisamos
fazer é interromper o usuário final que está visitando o site com outra
chamada Ação aqui Só queremos adicionar um botão, um belo botão grande ali mesmo. Então, o botão deve corresponder esse botão lá em cima porque você está avisando
o usuário final de que, Ei, o grande botão azul que diz esse texto
é o que eu quero que você clique Então, já preparamos
o usuário final da seguinte forma Este é o botão em
que eu quero que você clique Só preciso
adicioná-lo aqui. De qualquer forma, deixe-me
dar uma olhada na página
aqui e vamos
navegar até aqui. Você deseja
clicar nos elementos ali mesmo e clicar
no sinal de mais, digitar botão e criar um novo botão. Simples assim.
Agora, infelizmente, você não pode copiar e colar
o botão aqui. Você precisa apenas
projetar tudo manualmente novamente.
Mas não é muito difícil. Basta fazer o que você fez
com este botão na parte superior. A direita aqui embaixo. Vou comprar as minicores do que eram 101 K a dez K ou zero
a um K Lá vamos nós. Então, vamos
clicar aqui novamente. Obtenha o cifrão de zero
a um k, minicurso. Ok, então basta passar por todo
o processo
de configuração de tudo. Então, vamos clicar no botão. E que estilo era esse? Vamos navegar até aqui para ver a cor do botão
e pronto. E vamos destacar
isso, copiar isso. Pegue isso. Lá vamos nós. Navegue até aqui,
assuma isso, e teremos o estilo, as bundas e cor ali mesmo,
voltados para trás E copiar e colar
isso parece ótimo. E então vá e
volte com tudo. Mas algumas coisas que
eu quero que você preste atenção são no estilo, você quer clicar
nele, então é um
botão de largura total ali mesmo. E então o texto aqui, você quer aumentar
esse texto,
obviamente, para que ele se encaixe. Então, deixe-me minimizar
as cores dos botões aqui mesmo. E você quer
navegar até aqui para, eu acredito que são estilos. Não. Ok, então nós
queremos ter isso também. Queremos que isso aumente o tamanho e
o espaçamento dos botões. Isso parece bom lá. Bordas e sombras dos botões, tipografia. Lá vamos nós. Ok, então, em tipografia, quero clicar em Ns.
Queremos fazer os pesos Queremos que isso seja ousado. E então queremos que o
tamanho do texto
seja um pouco maior, para que ele saia da página.
Sim, parece bom. Então, talvez seja um
pouco grande demais. Minimize um pouco.
Sim, lá vamos nós. Então, eu realmente gosto da aparência
que está lá. É minimizar isso. Ok, então
botão, bordas e sombras Então, o raio é como
podemos deixar o botão um
pouco mais redondo, para que não haja tantas bordas afiadas nem tão
afiadas ali mesmo E então vamos adicionar um
pouco de sombra projetada, cinco é bom. E sim, estou gostando muito. Então, fica bem aqui. Agora, também existem
alguns problemas. Então é como, Bem,
está tocando isso. Então, como faço para que isso
tenha mais espaço? Então, para separar
o botão dele, tocando nesse
elemento ali mesmo, o que precisamos fazer é
clicar no sinal de mais e
digitar SP, ACER Então, clique no espaçador,
clique nele e queremos mover o espaçador
para cima clique nele e queremos mover o espaçador
para E talvez seja um
pouco de espaço demais, mas queremos
mantê-lo ali, parece bom. Vamos
clicar em salvar. Ótimo. E vamos recarregar o
site e ver como fica E isso parece fantástico. Então, muito legal, chamada de
ação no topo, ali mesmo. O usuário rola para baixo. Isso chama a atenção do usuário novamente com um belo botão grande no meio da página,
porque você deseja ter uma ação chamada na
parte superior, em algum lugar no meio E, novamente, uma ação final
chamada logo na parte inferior da página, logo acima desse rodapé Então, de qualquer forma, é isso.
É assim que você adiciona um botão no meio
do site.
14. 14 Design de cópia de vendas: O que exatamente as pessoas
aprenderão com seu ímã de chumbo
gratuito Essa é a próxima seção
que queremos adicionar abaixo desse
elemento, aqui Então, basicamente, o que
as pessoas vão aprender? Você tem que lembrar que
as pessoas são egoístas. As pessoas querem saber,
tipo, o que eu ganho quando estou no seu site. Então, vamos voltar para a
página que estamos editando. E vamos clicar aqui, e eu quero clicar
no pequeno sinal de mais. Em seguida, vamos clicar em Browse A. Vamos clicar em padrões. E então vamos clicar em “
Sobre” ali mesmo. Agora, um padrão
que eu realmente gosto para esse trabalho
é esse aqui. Grade de características, três colunas.
Vamos clicar nisso. Agora, ele adiciona tudo acima desse elemento,
mas não é grande coisa. Apenas certifique-se de que esteja selecionado.
Então você quer clicar nessa pequena seta
ali, mova para baixo. Feito. Simples assim. Agora, há um bom espaço entre esse elemento
aqui e esse
elemento ali, e tudo que você precisa fazer
é alterar a cópia. Pessoalmente, gosto da
forma como isso é apresentado. Se você não quiser seis itens, pode simplesmente vir até aqui
e excluir esses três. Muito simples.
Destaque-o e simplesmente exclua-o e mantenha
esses três no topo aqui Eu, pessoalmente, vou
deixar todos os seis. E tudo o que você precisa fazer neste
momento é atualizar a cópia e
enfatizar os benefícios que o usuário final obterá
ao baixar
seu guia de dicas e
assistir ao vídeo oculto para sua classe,
o que, neste caso,
for um minicurso O que as pessoas
aprenderão com o curso, o que
você está oferecendo? Ok, então eu atualizei as cópias. Então, para a tag de título H two
no canto superior direito aqui, coloquei o texto em negrito e atualizei os pequenos títulos
aqui para torná-los algo atraente
que as pessoas queiram
se inscrever e obter um minicurso
gratuito para aprender E então isso é
apenas um texto fictício. Então, vamos dar uma olhada
no back-end sobre
como isso está funcionando. Então, o pequeno parágrafo de texto
que estava abaixo disso, eu simplesmente o apaguei,
destaquei isso e cliquei
em Negrito, e pronto Então aqui com cada um
desses pequenos blocos, vamos abrir nossas configurações
ali mesmo e você fica tipo, Bem, como faço para me
livrar do asterisco Tudo o que você precisa fazer é clicar no padrão e ele
remove o asterisco Mas eu pessoalmente
gosto do asterico. Eu acho que é um
pequeno elemento de design agradável. É muito chamativo. Talvez remova o asterco
deste principal ali mesmo. Talvez isso parecesse
melhor. Vamos clicar em Salvar. Acho que
provavelmente ficaria melhor. Recarregue isso. E sim, eu
gosto mais disso. Portanto, isso é interessante e
chama a atenção
sobre o que o
usuário final aprenderá Em seguida, existe algum tipo de processo que você ensina
em seu sorteio gratuito, como passo um, faça isso,
passo dois, faça aquilo.
Passo três, faça isso. É tão rápido, rápido fácil que qualquer um pode fazer isso. Esse tipo de
seção, você pode adicioná-la à sua cópia de vendas para
que o usuário final
entenda qual o valor
que obterá ao
comprar a coisa gratuita. Então, vamos
adicionar esse tipo de seção aqui embaixo Talvez queiramos dividir um
pouco esse design porque temos esse lindo layout de grade de seis
elementos que parece ótimo ali. Então, talvez a imagem à esquerda, direita, esquerda, direita, esquerda, direita, esse tipo de layout. Então você quer fazer isso com
talvez três imagens no máximo, duas ou três é tudo o que você quer. Então, vou
ter uma pequena seção
passo a passo que
vou adicionar. De qualquer forma, aqui está a
página inicial dessa edição. E deixe-me navegar até
o final, e vamos clicar
nisso e clicar
no botão de adição,
Procurar todos os padrões. E eu vou para a seção
Sobre o padrão, e podemos usar esse
padrão aqui, texto com imagens alternadas Então, vou clicar nisso. E agora temos essa
pequena seção aqui com uma imagem
aqui à direita, esquerda, direita, esquerda.
E poucas coisas. Então, primeiro,
tudo isso
foi adicionado acima desse
elemento, então podemos corrigir isso
clicando em
tudo aqui. Então, a coisa toda está selecionada. Agora basta clicar na seta
para baixo e movê-la para baixo. Lá vamos nós. Então,
temos isso aqui, seguido por esse
elemento aqui. Agora, se você disser: “Bem, eu quero ter três
imagens, como eu faço isso? Bem, porque essa
imagem está à direita. Esta é uma imagem à esquerda. A próxima imagem aqui
deve estar à direita. E, novamente, eu
faria três imagens no máximo. Você não quer que isso
seja redundante e repetitivo. Então, fazer isso é muito
simples. Queremos clicar nesse
elemento aqui, clicar no pequeno botão
Opções e depois
clicar em Duplicar E lá vamos nós. E
vamos reduzir isso. E agora não há espaço
suficiente aqui. Então, aqui,
temos um pequeno ícone, ou não é ícone, mas um espaçador como é chamado tecnicamente Então, queremos duplicar isso. Vá em frente e duplique isso, depois mova isso para baixo.
Simples assim. Então, agora temos três
imagens aqui. Agora, obviamente, você
vai querer substituir essas imagens
por suas próprias imagens. Qual tamanho importa.
Não há um tamanho adequado que você
deva ou não usar. Você tem que testar
isso, ok? Mas uma coisa é que você
quer ter certeza de que todas as imagens são
realmente do mesmo tamanho. Então, se é 500 por 500, esse tipo de estrutura, é
isso que você
quer modelar aqui. De qualquer forma,
deixe-me clicar em Salvar. Ótimo. E vamos continuar
e recarregar a página inicial E, sim, isso está
funcionando muito bem. Então, agora temos uma
pequena seção interessante aqui. E, novamente,
tudo o que precisamos fazer é atualizar a cópia para
refletir nossa oferta, bem
como atualizar
as imagens para
refletir novamente a oferta gratuita, o valor que o
usuário final receberá Então, para esta seção, como
eu disse, no começo, vou transformar isso em
talvez um processo passo a passo, etapa um, etapa dois, etapa três, com imagens exclusivas. Então, acabei de atualizar o conteúdo, e aqui está o que eu criei
. Nada muito complicado. Então, logo no topo,
a tag de título H two,
coloquei em negrito, como venho fazendo com cada tag de título
H two Em seguida, adicionei minhas
próprias imagens personalizadas. Agora, de onde eu tirei
essas imagens? Como isso funciona? Então, primeiro
, pule aqui. Agora, mais uma vez, atualize
a cópia ali. A mesma coisa com o asterisco e o padrão, esse tipo de coisa Então eu vou deixar
isso. Em seguida, basta alterar a cópia com os
marcadores aqui Agora, se você está se perguntando tamanho dessas imagens padrão, elas eram de 1.200 por 800 Pego essas informações
e, em seguida
, fui para o Canva, e você pode criar uma conta
gratuita no Canva e ir
para Tamanho personalizado Em seguida, você deve
digitar 1.200 por 800 e criar um novo design Porque esse é o
design que vem com o tamanho da
imagem por padrão. Se você realmente gosta
desse tamanho e forma e só quer
mantê-lo, é isso que você pode fazer de 1.200 por 800 e depois criar suas próprias
imagens aqui Então, usei fotos e digitei palavras que
refletiam o que eu estava procurando,
como açoitar, editar, monetizar, qualquer coisa .
Encontre a imagem. Vá em frente
, faça o download e pronto. Agora, apenas algumas
coisas minimizamos isso. Depois que
você baixou a imagem, eu a baixei como PNG, mas não a enviei como PNG. Então eu uso algo
chamado GIMP para convertê-lo em um gráfico P de teia de
pontos. Então, fazer isso é muito simples. Tudo o que você faz é clicar com o botão direito do mouse, abrir com e depois GIP. Então você tem que
baixar GIP e GIMP. Este é o meu
editor de fotos que eu uso. Então você tem a
imagem aqui, e então você quer ir para Arquivo, então você quer
ir para Exportar como, então você quer dar
um título, e você quer mudar de PNG ou JPEG para web P.
Por que eu faço isso? Um gráfico web P tem uma aparência melhor e é mais
eficiente em termos de tamanho, especialmente se estivermos
carregando uma imagem de 1.200 por 800, que é uma imagem um pouco grande E tudo o que você
precisa fazer é exportar. Feito. Simples assim. Tão simples. Por isso, eu sempre gosto de
converter minhas imagens de JPEG em
uma imagem WebP, só porque com o Canva, por algum motivo, não sei
por que eles não permitem isso, mas você só pode baixar
imagens como JPEG ou PNG Portanto, não
apenas a capacidade de
baixá-lo como um arquivo WebP de pontos não
está disponível Assim, podemos
baixá-lo como
vídeo JPEG, PNG,
PDF, SVG, NPFoE Mas não há rede de pontos
P. Então é por isso que eu faço esse pequeno processo
de conversão rápida. Tudo bem, então uma vez que você tenha
suas duas ou três imagens porque tem a Etapa
um, a etapa dois. Passo três, como eu disse,
então tudo que você precisa fazer é clicar na imagem
e clicar em substituir, clicar em Carregar, fazer o upload, depois selecionar o tema ou desculpe, você seleciona a imagem
que deseja enviar
e, em seguida, ela a
substitui automaticamente aqui Feito. Simples assim. Agora, depois de ter
a imagem aqui, você tem algumas
opções diferentes para ajustar as coisas. Você tem a
proporção. Você pode mudar e brincar com
isso, resolução grande. Você pode jogar com
isso. Você também tem suas configurações aqui,
onde você pode ter estilos, arredondados
padrão, e então você pode alterar o raio
ali, se quiser Se quiser adicionar uma
borda, você pode fazer isso. Se quiser torná-lo realmente
redondo, você pode fazer isso. Então, depende totalmente de você, como você
quer lidar com isso. Então,
deixe-me voltar para 14. Então, é bonito e
redondo. Lá vamos nós. E sim, basta ter os cantos ligeiramente
arredondados e apenas pequenas coisas
sutis , caso contrário,
fica muito bom. Então, no geral, estou muito feliz com a forma como esta
página inicial está funcionando, e é assim que você
atualiza as imagens desta
seção para
suas próprias imagens personalizadas Novamente, essa é uma imagem de
1.200 por 800. Você pode obtê-lo em uma
ampla variedade de sites. Gosto de usar o Canva
pessoalmente para todas as minhas imagens e depois
convertê-las em um arquivo WebP, enviá-las para o seu site e
alterar a cópia conforme
15. 15 Como adicionar uma seção de perguntas frequentes e depoimentos: Em seguida, podemos
adicionar uma seção de perguntas frequentes e depoimentos
à nossa página inicial Portanto, o objetivo de um FAQ
é, na verdade, responder às objeções que as pessoas
teriam de tirar proveito do que você está oferecendo, seja ou não
um curso gratuito , um download ou um produto pago E, obviamente, depoimentos são úteis se forem verificáveis,
porque, novamente,
isso é apenas uma forma
de prova social úteis se forem verificáveis,
porque, novamente,
isso é apenas uma forma
de prova social. Então,
como fazemos isso? Então, vamos
voltar aqui para esses sites. Então eu tenho a página
aberta aqui. Deixe-me minimizar isso. Deixe-me rolar até
aqui e, se
clicarmos nesse
elemento ali mesmo, você poderá ver o sinal de mais. Você não quer
clicar nesse porque
clica neste sinal de adição, ele adiciona tudo
a esta seção aqui, o que
não queremos fazer. Você quer clicar aqui embaixo. E agora estamos adicionando outra
seção
abaixo desta Isso faz algum
sentido. De qualquer forma, vá em frente e clique
no sinal de mais Vamos clicar em Arcos A. Clicaremos em padrões E eu acredito que está abaixo do
destaque onde está o FAQ, então role um pouco para baixo. Sim, lá vamos nós. Então, agora
temos o FAQ aqui. Assim, podemos clicar nele adicioná-lo
automaticamente ao nosso site. E um design muito bom. Mas uma pequena coisa, não
sei por que ela continua sendo adicionada ao meio
do site ali mesmo. Apenas mova isso
para baixo, mova para baixo. Continue movendo-o
para baixo. Lá vamos nós. E, obviamente, você pode ajustar a aparência desta
seção ali mesmo. De qualquer forma, queremos adicionar uma pequena seção de depoimentos para que
possamos clicar nela, navegar por todos os padrões
e, em seguida, temos depoimentos
lá Então, podemos adicionar qualquer
depoimento que quisermos, talvez este aqui
e fique bem aqui Gosto
de como isso se mistura, mas podemos
reduzir isso. Lá vamos nós. Então, agora temos uma pequena seção de
perguntas frequentes que leva a uma
seção de depoimentos aqui Ok, então como você edita e
ajusta essas duas seções? Então, primeiro, eu gosto
que eles se misturem, então eu manteria a mesma cor de
fundo. Então, se você vai usar
preto, mantenha-o preto ou qualquer cor de destaque
que você esteja usando Mas de qualquer forma, ajustar
tudo, é muito simples. É uma seção, então
basta clicar nela. Você navega até
aqui para ver suas configurações
e, em seguida, aqui,
você tem suas cores. Você tem a camada aqui, que você pode alterar
e usar se quiser. Pessoalmente, gosto da forma como
isso é apresentado. E queremos clicar aqui para
ver os estilos. Você tem sua
cor de fundo ali, então você pode
alterá-la para talvez herdar cor do
tema aqui ou talvez transformá-la em cinza claro ou verde ou o que
você quiser fazer Você pode simplesmente brincar com isso porque é o seu site. Você pode fazer o que quiser. Então, só uma coisinha, deixe-me mudar para a
cor do tema. O que você nota? E deixe-me mudar o
texto aqui para preto. Então, em algumas coisas,
você precisará clicar
manualmente nas coisas
aqui, destacá-las e
alterá-las para a
respectiva cor. Então, esteja ciente disso. Mas eu gosto de preto. Pessoalmente, gosto da
forma como isso funciona e se parece. Portanto, a configuração é muito boa. Então, criar uma nova
linha é muito simples. Você só quer clicar
nele primeiro para entender qual
elemento é esse, e ele diz o bloco,
depois diz separador e é
selecionado como uma linha larga Então é isso que
precisamos adicionar. Então, clicamos e o que precisamos?
Precisamos de um separador Então, precisamos de um separador, espuma e pronto Queremos uma linha larga
e queremos que a cor
seja branca. Simples assim. Agora, quando estivermos aqui embaixo, quisermos clicar aqui, digitando Olá, eu
clicarei em baixo, para
que ele
se mova para baixo E essas são todas as
três tags de título H. Vamos clicar aqui,
mudar isso para parágrafo. Título. Agora, o título desapareceu porque H
dois está definido como preto. Vamos clicar
aqui para H três, e agora temos que mudar
a cor manualmente. Então clique aqui,
clique em branco e pronto. Então, basta chamar esse novo título e destacamos isso novamente. Clique aqui para A, deixe
isso branco. Aí está. É um novo título, então Hello world. Vou manter as
coisas simples assim. Então, obviamente, é
assim que você ajusta esta seção
aqui. Muito simples. Estes são apenas
pequenos parágrafos, H três tags de título Isso é definido como H dois. Do ponto de vista do SEO,
isso faz sentido. Então esse é o título
da seção. Essas são as legendas aqui. Então, eu manteria isso como está. Se você quiser se
livrar desse grande FAQ, provavelmente desejará alterá-lo
para H dois,
H dois, H dois e assim por diante. E eu manteria o
FAQ curto e agradável. Como se isso fosse perfeito, L
um, dois, três, quatro, talvez cinco, Max. Isso é
o mais longe que eu iria. Quatro, eu provavelmente
manteria para quatro, por padrão. Deixe-me desistir
disso. Lá vamos nós. E basta ajustar o
texto e, novamente, responder às objeções que
as pessoas teriam ao
comprar o curso baixar o item
ou comprar seu produto, que é a seção de depoimentos Então, novamente, a mesma coisa de antes. Basta clicar no
bloco inteiro ali para alterar a cor,
o texto, o tamanho da
fonte e todas as coisas
boas ali. E com esse
modelo aqui, ele vem com a opção de
adicionar uma pequena imagem. Agora, isso é muito instável. Não sei qual é a palavra
certa. Do jeito isso funciona, funciona. Simplesmente não é intuitivo. Tipo, você quer
pensar como, Oh, eu vou clicar na imagem
aqui e vou clicar em textos medianos
e isso Não, não O que isso faz é transformar esse pequeno círculo em um desses itens lá em cima.
Não queremos fazer isso. Você literalmente quer clicar
no círculo ali mesmo. Veja o pequeno lado, eu posso rolar para a esquerda e para a
direita com a barra de rolagem. Você quer rolar para baixo. Você deseja clicar em Carregar. Eu sei. É ridículo Agora, só queremos
clicar em uma imagem, fazer o upload da
imagem ali mesmo
e, em seguida, formatar
tudo corretamente,
e é assim que você pode adicionar
uma imagem com ela em seguida, formatar
tudo corretamente,
e é assim que você pode adicionar se estiver se
perguntando como isso funciona. Você precisa clicar no
pequeno círculo e rolar para baixo e
procurar onde diz: Carregue e carregue
a imagem dessa forma. Mas, no geral, acho que
isso parece muito bom assim que sai
da caixa proverbial
16. 16 Como adicionar postagens de blog à página inicial: Postagem de blog em nossa página inicial. Agora, para esse tipo de design, não
sou muito fã de
postagens de blog na página inicial, simplesmente porque
é uma distração da principal chamada à ação, que é clicar nesse
botão ali mesmo Mas eu sei que muitos de vocês
vão dizer:
Como faço para adicionar uma
postagem de blog à minha página inicial? Então, deixe-me
mostrar como fazer isso. Agora, a primeira coisa que você precisa fazer
é clicar fora desse elemento e navegar até
esta seção branca. Em seguida, clique no sinal de mais. A única razão
é porque todo esse conteúdo está meio
que agrupado Então, se eu clicar aqui
para ver o sinal de mais, clico em Procurar,
clico em Padrões. Clique na postagem e, não sei, deixe-me selecionar qualquer
uma delas aqui. Vamos clicar neste e
adicioná-lo aqui no topo. Então, é uma grande bagunça e
difícil de se mover. Então, saia disso. Então,
deixe-me navegar até aqui. Então, queremos nos
afastar disso. Clique aqui. Clique
no sinal de mais. Clique no parágrafo.
Boom, lá vamos nós. Agora que temos a
seção do parágrafo ali, podemos
clicar no sinal de mais. Em seguida, podemos clicar em
Procurar tudo, depois em padrões, navegar até aqui para
ver as postagens
e, em seguida, você pode selecionar a que quiser Então, se você quiser que
uma imagem e um texto combinem,
tudo bem. Vou selecionar esse aqui
mesmo. Eu não sei Isso só chama minha atenção
com um texto muito grande. Então, deixe-me clicar ali,
e isso parece muito bom. Talvez o texto seja um
pouco grande demais, talvez seja um
pouco largo demais. Vamos ver. Deixe-me
clicar no topo aqui. Vamos salvar o design. E então deixe-me ir para a página inicial
e ver como isso fica Então, role para baixo aqui. E sim, isso chama
a atenção. Eu meio que gosto disso, mas
certo, como podemos ajustá-lo? Talvez o torne um
pouco menor. Então, basta clicar
nos elementos aqui, e esses são apenas
todos os elementos. Em seguida, clique aqui
para ver suas configurações e, em
seguida, clique nos
estilos ali mesmo. Em seguida, tamanho personalizado, podemos torná-lo um pouco menor,
se quisermos, talvez 4,6 Então vamos dar um
tapinha aqui. Então, talvez se for um pouco largo
demais, não gostemos disso. Aumente
um pouco desse jeito. Clicaremos em Salvar para que haja um pouco mais de espaço para
respirar
à esquerda e à
direita do título. Então, vamos
recarregar isso e parece bom. Então, eu meio que gosto da maneira como
isso é interrompido. Então, novamente, você pode simplesmente brincar com isso
no seu próprio tempo ou talvez apenas querer
torná-lo muito menor, assim. Você poderia ir em frente
e fazer isso ou talvez uma pitada maior assim Então, de qualquer forma, depende
totalmente de você. Você pode brincar com
os diferentes layouts postagens do blog Provavelmente vou
manter isso assim. Eu meio que gosto desse design. Mas de qualquer forma, é assim que você adiciona postagem de
blog à sua página inicial
17. 17 CTA final: E, finalmente, precisamos adicionar uma chamada à ação final
para nosso site. Então, temos a chamada
ação no topo aqui, pegue o minicurso,
todas essas coisas boas. Em seguida, o usuário
percorre a página da web aqui, outra interrupção
para clicar no botão Agora precisamos adicionar uma ação
chamada final na parte inferior direita aqui para fazer a ação chamada
principal, que é clicar nesse botão,
obter a coisa gratuita entrar em nossa lista de e-mail. Então, como fazemos isso? Então, queremos
apenas adicionar
outra chamada à ação, que é que há muitas seções
predefinidas que
podemos adicionar facilmente E então você só quer
adicioná-lo abaixo desse bloco. Então você não quer
clicar aqui ou aqui, basta adicioná-lo logo
abaixo deste Então, vamos clicar no sinal de mais e clicar em Procurar
tudo. Clique nos padrões. Clique na chamada à ação. E há alguns apelos à ação
diferentes. Aqui, na verdade,
há dois, desculpe, não dois. De qualquer forma, você tem
esse aqui, junte-se a 10.000 inscritos e,
em seguida, este com o
pequeno ícone do e-mail Pessoalmente, gosto deste porque
temos um ímã de chumbo, então eu alteraria a
cópia conforme apropriado, onde isso é um
pouco melhor se
você estiver criando um boletim informativo
por e-mail de marca,
e o boletim informativo por e-mail
é a oferta Então, de qualquer forma, eu vou
clicar nesse aqui mesmo , e lá vamos nós Então, agora tudo o que precisamos fazer é mudar a cópia aqui. Então, quero que o texto reflita a chamada à ação
no canto superior direito, aqui, sobre como criar vídeos de
viagens lucrativos para blogueiros Então, você quer
enfatizar isso novamente aqui, junte-se a 900 outras pessoas e aprenda a criar vídeos de viagens
lucrativos. Aprenda a fazer XYZ uma,
duas, três coisas, blá,
blá, blá Então esse botão ali mesmo. Está tudo bem. Quer dizer, eu trocaria
por esse botão Então, novamente, você
precisa passar por
todo o processo, atualizá-lo e redesenhar o botão
aqui embaixo Então, deixe-me clicar em
salvar aqui. Ok, então, de qualquer forma,
vamos dar uma olhada
na página inicial e ver
como isso saiu. Então, aqui embaixo, isso parece muito bom. Talvez haja um
pouco de excesso de acolchoamento ali mesmo do qual possamos nos livrar Então, eu realmente não preciso
desse espaçador ali, então podemos excluir esses elementos Agora, temos essa
seção aqui. Então, se eu clicar aqui,
podemos clicar
aqui e conferir
o preenchimento geral Portanto, há um pouco de
preenchimento ao redor desse bloco, para que possamos reduzir isso e ver como fica.
Vamos clicar em salvar. Então, novamente, tudo o que fiz foi
selecionar o bloco, o item, o bloco, clicar aqui para ver os estilos e depois
reduzir o preenchimento É assim que isso é chamado
quando você vê espaço entre diferentes elementos na
página, nós o recarregamos E, oh, sim, está
parecendo muito melhor. Então, aqui está o rodapé,
chamado de ações ali mesmo. Clicamos aqui novamente e talvez minimizemos completamente o
preenchimento Não precisamos de nenhum
acolchoamento. Vamos clicar em salvar para isso. E vamos recarregar isso. Sim, eu realmente gosto disso. Então, isso parece fantástico
na parte inferior. Então, novamente, é claro,
você pode projetá-lo, então certifique-se de que todo
o resto esteja bem. No entanto, não ajustei nada
na página da web. Eu gosto disso. Agora, a única coisa que
você precisa fazer
daqui em diante é, obviamente,
mudar a cópia. Portanto, ele deve se juntar 3.000 outras pessoas e ter
acesso ao minicurso Aprenda a fazer XY Zoo um, dois,
três, blá, blá, blá, blá, blá,
blá. Estrondo. Então, o botão ali mesmo
deve corresponder a esse botão. Botão bonito, grande e clicável com uma boa cópia na
parte inferior, aqui mesmo Então, de qualquer forma, vamos pular
aqui, e depois aqui, podemos simplesmente excluir
isso juntos, excluir e depois navegar até aqui, e então a mesma coisa de antes Clique no botão, crie o botão
ali mesmo, estilo padrão. E então aqui, você pode simplesmente passar por todo
esse processo e editar e ajustar
esse botão conforme necessário. Então pegue um ou desculpe, zero a um k, minicurso. Lá vamos nós. Então isso parece bom. E então, com efeito escuro. Não, eu quero que isso acabe. E depois as cores dos botões. Basta mudar a cor do
botão
ali mesmo . Tamanho e espaçamento. Quero que seja um botão
grande e de largura total ali mesmo.
Bordas e sombras Sim, eu quero ser um
pouco arredondado, e talvez um pouco de
sombra. Então, minimize isso e depois a
tipografia ali mesmo. Tão rápido por aqui. Quero que
o peso seja ousado. Eu quero que o
tamanho da tipografia seja um pouco maior
e mais chamativo, talvez pareça bom E então só precisamos
dessa cor novamente. Então, deixe-me clicar no topo
aqui, ver o que é isso. E bundas coloridas, pegue isso. Vamos destacar isso, boom. Copie, role para baixo aqui novamente e clique aqui.
Tudo bem, então cor do botão Saia disso. Cole
isso. Boom, lá vamos nós. Então, precisamos de um
pouco de espaço, então vou clicar acima dele, pressionar Enter, só para
espaçar um pouco. E lá vamos nós. Então,
vamos clicar em Salvar. Tudo bem, agora vamos
dar uma olhada na página, ver como ela fica.
Sim, isso é ótimo. Então, novamente, você pode alterar
a cor de fundo e coisas
assim, se quiser. Então você pode clicar aqui
para ver todo esse elemento, você pode alterar a imagem de
fundo para uma cor específica, se quiser. Portanto, tem duas camadas como a camada externa e
a camada interna, então você precisa clicar
aqui para mudar essa cor para outra. Então clique aqui,
para que corresponda. Então, se você quiser de novo, se você
só quiser fazer isso, não faça. Gosto que seja
branco e fique bem, mas é assim que você o ajusta. Então você pode fazer algo
simples assim. Mas de qualquer forma, certo,
boa cópia ali. E você também pode ter
um emoji, se quiser. Então, Emoji, sem dúvida, abra, tudo bem, então vamos abrir
isso aqui Copiar. Podemos colocar isso aí e colar, salvar. Lá vamos nós e recarregamos isso. E sim, uma coisinha bonita e
sutil. Então, se você quiser adicionar isso. De qualquer forma, parece muito bom. Agora temos o rodapé
e o cabeçalho para ajustar. De qualquer forma, a página inicial
parece boa, está pronta, e você deve ter
conhecimento suficiente sobre como
personalizar e editar cada uma
dessas seções
18. Logotipo 18: Adicionando um logotipo
ao nosso site. A página inicial é feita
grosso modo. Agora vamos atualizar esse logotipo
de texto chato aqui. Como você faz isso? Muito simples. Volte
para o painel do WordPress, navegue até aqui até
onde diz aparência. Então você quer
clicar no editor. Agora, aguarde alguns segundos
para que o editor seja carregado
e, em seguida,
clique no design. Lá vamos nós. Então,
vamos clicar nele. E agora queremos selecionar a seção
do cabeçalho,
clique na seção do cabeçalho. Então você quer clicar
em Editar ali mesmo. E então você tem essa
caixa aqui. É aqui que você
pode fazer o upload de um logotipo. Então você clica nele
para fazer o upload de um logotipo. E então eu fiz um logotipo aqui. Adicionar seu logotipo é muito simples. Tudo o que você precisa fazer
é criar um logotipo e
arrastá-lo e
soltá-lo no lugar certo. Então, deixe-me prosseguir
e selecionar isso. E você quer chamá-lo
do nome do seu site. E o logotipo do
texto ali mesmo. Em seguida, vá em frente e
clique em Selecionar. Em seguida, o logotipo deve aparecer. Então, vamos expandir
isso um pouco. Lá vamos nós. Agora temos texto aqui, então
você tem duas opções. Ou você pode simplesmente
retirar espaço disso ou
excluir completamente esta seção de texto, se quiser que
você decida totalmente, é realmente muito simples. Agora, a
parte mais complicada é como, Bem, como você faz um logotipo? Deixe-me abrir o Canva. O Canva é o que eu uso
para criar gráficos. Você pode criar uma
conta gratuita do Canva e criar gráficos. Agora, depois de criar
sua conta, clique
aqui para ver Tamanho personalizado. Clique em Tamanho personalizado. Descobri que 300 por
80 pixels funciona melhor
e, em seguida, clique em
cria um novo design. Em seguida, ele abrirá com um espaço em branco de 300 por 80
e, em seguida, você poderá adicionar um logotipo. Aqui você pode brincar
e criar seu próprio logotipo. Consegui criar isso Na verdade, cliquei aqui para
ver o texto
e, em seguida, cliquei
aqui para ver a combinação de fontes Então eu apenas brinquei com a combinação de fontes
ali mesmo. Mas você pode criar logotipos personalizados
do zero, se quiser. Então, a fonte aqui
é TT blue screens. Então, os efeitos aqui
são deslocamentos como esses
e, em seguida, a direção
que você pode mudar E, obviamente, você pode
brincar com as diferentes cores aqui para o
design do site. Então, você quer que
a cor de destaque
corresponda à cor de destaque que está
no seu Quando estiver pronto para fazer o download, tudo o que você faz é clicar em Compartilhar. Em seguida, clique aqui
para baixar o logotipo
e, em seguida, basta
enviá-lo para o seu site. Por aqui. É
realmente muito simples.
19. 19 Design de menu: Editando a seção
do menu do nosso site. Então, aqui mesmo, eu adicionei
algumas páginas adicionais. Então, sobre bloquear
recursos de contato e, claro, temos a página inicial desde o início
do Tutorial. Agora, a forma como esse
menu funciona com esse tema é que qualquer
página que você criar preenche automaticamente
o menu aqui em cima Então, tudo o que fiz foi acessar as páginas, clicar em Adicionar nova página
e criar
uma página Sobre, uma página de blog, uma página de contato
, etc., clicar em Publicar e adicioná-la automaticamente ao menu É bom e também pode
ser um pouco chato, porque você não quer adicionar
todas as páginas ao seu menu Às vezes, você só
quer criar uma página por qualquer motivo. Mas isso não é grande coisa porque você pode excluir
qualquer tipo de página. Vou
excluir a página inicial e mostrar
como tudo isso funciona Então, depois de adicionar algumas páginas, sugiro uma página sobre, página de
contato, coisas assim. Vá em frente e adicione isso. E vamos excluir a
página inicial, e mostrarei como adicionar outras páginas ao
menu que você deseja adicionar, além de um botão Tudo bem, então, de qualquer forma,
vamos navegar até
aqui até o nosso painel do WordPress E vamos navegar até
aqui até a aparência. E temos que
voltar para a seção do cabeçalho, que é onde estávamos
quando adicionamos o logotipo. Então, vamos voltar
aos mesmos lugares. Então, vamos clicar no design. Vamos clicar no cabeçalho. Vamos clicar em Editar.
E lá vamos nós. Ok, então queremos brincar com o menu, então
clique no menu. Simples assim, e depois
clique na página inicial aqui. Então, depois de
selecionar esse menu , você
deve clicar em Editar Portanto, a página de edição é a exibição de navegação,
seus sites, páginas. A edição permitirá que você
adicione, De reordenar páginas. No entanto, novas páginas não serão
mais adicionadas automaticamente. Sim, não queremos que novas páginas
sejam adicionadas automaticamente. Isso é conveniente no início, mas você quer ter um
pouco mais de controle. Então, basta clicar em Editar. Agora
você precisa adicionar manualmente as páginas que achar melhor, como eu gosto de dizer De qualquer forma, página inicial. Não precisamos de um link inicial
porque as pessoas podem e clicarão no logotipo
para voltar à página inicial Então, tudo o que fiz foi selecionar
a página inicial. Navegue até aqui,
clique em Excluir. Simples assim. Ok, agora temos os
itens do menu selecionados aqui. Clicamos em mais e, em seguida,
podemos adicionar itens adicionais
aqui, se quisermos. Mas não queremos fazer
isso. Queremos clicar no item do menu
dessa forma. Está bem? Veja a diferença. Agora,
quando clicarmos aqui , podemos adicionar links
adicionais. Clicamos aqui,
clicamos em NTS, pesquisamos ou digitamos ARL ou
clicamos em Adicionar bloco Então, aqui,
depois de criar uma página, você pode navegar
e encontrá-la aqui, basta adicioná-la facilmente dessa forma. Mas, novamente,
já adicionamos um blog, então exclua isso. É assim que funciona a
partir desse aspecto. Ou você pode simplesmente digitar uma palavra, então digite learn. Clique em Mais Concluído. Tudo o que eu fiz foi digitar uma palavra, apertar Enter e adicioná-la. Mas o problema é que ele
não está vinculado a nada, então você precisa
passar o mouse manualmente sobre ele, clicar aqui para
ver o link
e clicar no
pequeno ícone de lápis Temos o texto
ali, depois o link aqui, isso não é um link. Isso não está vinculado a
nada, então você
precisa digitar no site. Então, vamos apenas dizer blackout.com slash, eu não
sei, vamos Talvez crie uma página
chamada aprender. Aqui, em Avançado, é
aqui que você pode optar abri-lo em uma nova guia. Ok, então eu espero que você entenda.
Espero que isso faça sentido. Espero que não seja muito complicado, então deixe-me
deletar isso. Então, deixe-me
clicar neste pequeno
sinal de mais aqui, adicionar um bloco ali mesmo. Em seguida, você pode adicionar um botão aqui em
cima, se quiser. Agora, novamente, o mesmo problema com esse botão é o
mesmo problema com os outros botões, onde
você não tem muito controle sobre a animação
e o estilo dela. Então, deixe-me clicar aqui. Vou apenas dizer clique aqui. Sim. De qualquer forma, uma
vez selecionado o botão, você sempre clica em Estilos. Então navegue até aqui
ou desculpe, não estilos. Errado. Os estilos afetam todo
o site. Você deseja clicar nas configurações,
no botão selecionado, clicar aqui
e, em seguida,
alterar a cor
de fundo do botão ali mesmo. Então, saia disso
e saia daquilo. Então, você sabe, novamente
, depende de você, se quiser adicionar um
botão ali mesmo, pode excluí-lo
e excluí-lo. Lá vamos nós. Ok, ou você
pode fazer isso aqui. Clicamos no bloco
no meio e depois
digitamos o botão. Aqui, você pode adicionar um botão de call to action
adequado. Então pegue o minicurso de dez K, ou chamaremos isso de minicurso de
zero a um K. E então, é claro,
você tem que acessar suas configurações e brincar com todo o
design desse botão. Tipo, bem, eu não quero
o botão no meio. Isso é meio estranho.
Tipo, isso parece estranho. Então, como você muda
as coisas? Então você clica aqui
com esta pequena seta, move para a esquerda, pronto. Então, agora seus
logotipos estão mais centralizados com o botão principal chamado botão de
ação aqui Então, essas são suas duas
opções com um botão. Então, ou você clica
aqui para ver o sinal e adiciona o botão
manual ali mesmo. Você pode clicar em Procurar tudo. Deixe-me clicar nos botões
e ver como isso funciona. E talvez isso funcione. Deixe-me clicar
aqui. E sim, tudo bem, então isso tende a acabar com isso. Adicione aqui embaixo
em mim, de volta. B fora disso, volta fora
disso, volta fora disso. E vamos deletar
o botão ali mesmo. Ok, e vá em frente
e exclua isso. Vamos clicar aqui. Então, vamos adicionar um bloco, procurar tudo. Botão aí mesmo,
e lá vamos nós. Temos o botão ao
lado dele. Então, essas são suas duas opções. Assim, você pode adicionar
o botão ali mesmo e mover o botão
para a direita, que dá um
pouco de espaço, ou você pode adicionar o botão ao
item do menu principal aqui. Então, só para chamar isso de D novamente, ou 020, dois, um K, minicurso Então, temos o
item do menu ali mesmo. Ok, vamos clicar aqui com todos
esses elementos,
e parece bom. Então, novamente, você só
precisa pular até aqui, acessar suas configurações e, em seguida combinar o botão com o botão
que você tem aqui. Então, espero que isso faça sentido. Então é assim que você adiciona e
exclui coisas do seu menu. Você também pode adicionar um botão, mas, novamente, você precisa selecionar
tudo desta forma. Clique aqui, no sinal de mais, em
Adicionar bloco e, em seguida, navegue por
tudo e,
em seguida, digite literalmente o botão e encontre bloco empilhável
ali mesmo Ou você pode clicar aqui para o elemento no meio
aqui para adicionar um botão depois mover o
botão para a direita. O item do menu meio que se
move um pouco para o centro. Então, da maneira que você quiser mais. Pessoalmente, meio
que gosto da aparência com o logotipo ali
e esse elemento. Ok, então eu atualizei o estilo do botão
aqui para combinar o botão principal chamado
Ação, logo abaixo, com uma pequena cópia
rápida. Então, vamos voltar
aqui para o design do logotipo clicar no
botão ali mesmo. Então, só para mostrar algumas
coisas que fiz no estilo, eu o tenho como padrão. Eu tenho o
efeito de passar o mouse como escurecer, o link ali
levaria para sua página de call
to action principal, página destino, página de compressão, qualquer coisa para a qual você
direcionará o A cor do botão está aí, eu tenho a cor do botão definida para a mesma cor que
eu uso lá embaixo. Então, aqui embaixo, eu tenho
bordas e sombras, o raio da borda é como
você a torna arredondada Eu não gosto de
pontas afiadas como essas. Sempre um pouco bom. E depois o contorno da sombra, se você quiser. Isso é opcional. Eu gosto
do jeito que parece lá, e é mais ou menos isso. Isso é tudo que eu realmente
fiz por isso. Novamente, só para que
o logotipo e
o botão tenham a mesma cor, e o botão aqui
corresponda aos botões encontrados
em outros lugares do site porque você está trocando com
o visitante final que, Ei, o grande botão azul
é o que você clica para
aproveitar a oferta.
20. 20 cor de fundo de cabeçalho: Como alterar a cor de
fundo do seu cabeçalho. Então, agora, eu tenho
tudo configurado para branco, e eu gosto muito
da aparência Mas se você disser:
Bem, não, eu quero um fundo colorido,
como faço isso? É assim que você faz isso.
Navegue de volta ao seu editor. Eu tenho a
seção de cabeçalho selecionada. Agora, a primeira coisa que você precisa fazer é
clicar em
toda a seção do cabeçalho. S tem um contorno azul. Isso significa que
tudo está selecionado. Não isso, não aquilo. Deixe-me clicar aqui. Sim, assim. Você
não quer isso. Você não quer clicar
no meio aqui. Você quer ter certeza de que
tudo está selecionado. Depois de selecionar o
bloco, navegue até aqui
até onde diz estilos. Clique aqui e você
terá várias opções
diferentes aqui
para alterar o plano de fundo. Primeiramente, posso
mudar a cor do texto. Se eu quiser fazer isso
por algum motivo, vou deixar como preto. Se eu quiser mudar a cor de
fundo para uma cor diferente, posso
ir em frente e fazer isso. Se eu quiser adicionar
uma imagem de fundo, se houver algum tipo
de imagem padrão que você queira
usar, você pode usá-la. Você também pode mudar a
tipografia aqui, tornar as coisas maiores ou menores, como quiser lá Você pode aumentar o
preenchimento, torná-lo maior, dobrar o preenchimento à esquerda e
à direita, torná-lo mais Novamente, há
algumas coisas com as quais você pode brincar aqui. E você também pode adicionar
uma borda ali mesmo. Então, uma borda pode ser
útil, então,
por exemplo , aqui, não há fronteira. E se você quiser, eu quero uma leve linha preta
na parte superior, assim. Aqui é onde você
selecionaria a borda para
fazer exatamente isso
e, em seguida, clicaria
aqui para ver o estilo. Então, para o quadro aqui, eu manteria esse zero, zero, zero, e nós
manteríamos isso como um. Então você tem um
pequeno separador de linha, o cabeçalho do
corpo, o site Se você quiser fazer isso
, o que eu não faço. E isso é verdade para as
diferentes opções que você tem para criar o cabeçalho em
relação à cor. Agora, uma coisa que
você está notando
aqui é que o logotipo
tem um fundo branco Você fica tipo, por que isso? Isso porque o logotipo não tem um fundo transparente. Então, se eu voltar
aqui até o meu logotipo, clico aqui
para compartilhar, baixar. Aqui, diz fundo
transparente. Basta clicar nele e
a imagem terá um fundo
transparente. Mas uma pequena coisa é que esse é um
recurso pago do Canva, então você precisará uma assinatura paga ou de
ter acesso a Caso contrário, se você
quiser, eu não quero pagar pelo Canva, tudo bem Você pode baixar
a imagem como está. Mas então você precisa
usar outra ferramenta, como um site
gerador de transparência PNG. Acabei de encontrar isso para que você possa simplesmente enviar sua
imagem PNG para lá. Em seguida, vou transformá-lo em um plano
de fundo
transparente se você realmente
não quiser pagar. Mas, novamente, eu pago pelo
Canva porque é muito útil e eu o
uso o tempo todo Mas, na verdade, isso é tudo que
você precisa saber para editar e ajustar
seu cabeçalho
21. Design de 21 rodapés: Editando e projetando o
rodapé do nosso site. Então, vamos navegar até
a parte inferior do site. Portanto, este é o rodapé
desse tema. E, por padrão, eu realmente gosto muito disso.
Parece muito bom. A única coisa que eu provavelmente
mudaria é mudar esses links
aqui para outra coisa. Então, eu sempre colocava
os termos de privacidade, suas páginas jurídicas aqui embaixo. Então, eu mudaria isso do design com o WordPress para a
cópia do seu site, termos, privacidade,
esse tipo de coisa. E então eu simplesmente
reformularia isso de privacidade para informações da empresa, seja o que for, e depois adicionaria links
adicionais ali Em seguida, os links de mídia social. Eu gosto muito disso.
Isso parece bom. Basta atualizar esses links para vinculá-los ao seu perfil de mídia
social. Então,
deixe-me mostrar um exemplo rápido do meu rodapé favorito,
não de todos os tempos, mas é um pouco Grandios,
mas é um bom rodapé Então, logotipo do site, quais são os sites sobre a empresa, aprenda informações sobre como
você quiser chamá-lo, depois links de links e,
na quarta coluna , links de mídia social. E-mail, número de telefone, endereço
físico
da empresa. Isso é o que você
pode fazer aqui. Copie os
termos do site, privacidade, pronto. Então, eu faria algo
semelhante a isso aqui. Por padrão, eu gosto muito disso. Então, novamente, como eu disse, eu trocaria
com lá. Agora, de qualquer forma, como
você edita e ajusta? Então você tem que
entrar no editor. Então, eu tenho o editor
aberto aqui. Vamos clicar no design. Deixe-me longe disso. E vamos rolar
até o final. Tudo bem, então passe o mouse
sobre o rodapé, você verá o vinho roxo Clique nesse vinho roxo e agora você pode clicar em Editar aqui. E simples assim. Agora você está editando o
rodapé. Então, você pode clicar aqui para
aumentar o logotipo, se quiser. Semelhante a esse outro site, você pode ter um pequeno slogan, descrevendo do que tratam os sites Como um blog sobre açoitamento. Não sei, seja o que for.
Então, está tudo bem. Então você pode simplesmente
clicar aqui. Então, esses são todos os links ali,
então você clica em NTs. Clique aqui. Isso tem
um link de ancoragem ali mesmo Então, se você quiser mudar
isso, por exemplo, diz sobre você
sabe, qualquer coisa. Você pode retroceder para realmente
alterar o texto Então, basta ligar para Hello
apenas como exemplo. Depois, você pode destacar
isso aqui e atualizar o link
ali mesmo com outra coisa. Então, seria como um vlog
how.com slash Page Title. Assim, você pode simplesmente
examinar manualmente cada um
desses itens ali mesmo e
alterar tudo conforme necessário. Então, o design com o
WordPress ali, obviamente,
como eu disse,
mudaria isso e faria com que
fosse copiar um registro,
como, e então eu teria
talvez um separador de páginas Lá vamos nós. Depois, privacidade, termos do separador de
páginas e assim por diante, coloque suas
páginas jurídicas lá embaixo Então, na verdade, crie esses links, você teria que destacá-los, clicar no link e, em seguida você pode vincular a uma
página que já existe. Portanto, se você já criou
uma política de privacidade, basta criar um link para
ela aqui ou digitar manualmente o URL. Então você pode digitar a barra
voghow.com. Política de privacidade. Agora, obviamente, você precisa criar uma página
para a política de privacidade, mas é assim que você adiciona
links aqui, onde você tem que ser
vocow.com, Ok. Isso é o que eu
faria com isso aqui. Agora, deixe-me clicar aqui para as configurações e clicar
no quadrado novamente. Então, agora temos
todo o modelo selecionado e, aqui, ao clicar em Parte do Modelo, você pode facilmente alterar o design
para outro layout de modelo. Então, por exemplo, esse é um
belo layout minimalista que eu gosto bastante.
Esse parece bom. Todas essas
peças do modelo estão ótimas. Assim, você pode editar e
ajustar como quiser. Eu pessoalmente gosto
desse. É bom começar com um menu muito simples, apenas mais um menu. E então eu
simplesmente mudava o design com o Wordpress e
atualizava isso, novamente, copiava o site, os termos , a
privacidade, e provavelmente silenciava a cor, um
pouco muda significa, tipo, então não é preto escuro, então é apenas cinza claro De qualquer forma, depende
totalmente de você, mas é assim que você edita
e ajusta o rodapé Agora, como eu tenho o
bloco selecionado, novamente, assim como seu cabeçalho, se você quiser alterar as
cores e todas essas coisas boas, basta navegar até
aqui até a configuração. Então você tem aqui o texto, você pode alterar a cor do texto para o que quiser lá. Você pode alterar a cor
de fundo conforme necessário. Se quiser, novamente, você precisará atualizar o logotipo. Novamente, como eu
mostrei com o cabeçalho. Você precisa criar
um logotipo transparente. Não fiz isso porque estou usando
um fundo branco, então não é tão importante. Você também pode atualizar uma imagem
de fundo ali mesmo. Você pode alterar a tipografia para tamanhos diferentes aqui, aumentar e minimizar
o preenchimento se quiser e a altura mínima, borda e algo semelhante
ao cabeçalho, se quiser uma borda, então
eu quero uma borda lá, mas não a quero em todos os
lados, que seja zero, zero,
zero e, em seguida, tenha uma bela borda sutil
no canto superior Então o raio, a mesma coisa. Por aqui, se você tem
um fundo colorido, você quer ter esse design. Novamente, vou
manter uma
cor branca sólida para combinar com tudo, mas estou apenas tentando mostrar coisas diferentes
que
você pode fazer essa parte do modelo
para editar e criar. É assim que você edita
e ajusta o rodapé. E se você estiver usando
um rodapé colorido, verifique se é da mesma
cor do cabeçalho Então, você quer que a
seção do cabeçalho, como o rodapé, e seu cabeçalho
aqui
no topo tenha a mesma cor, como um sanduíche, se você quiser voltar
com um fundo colorido
22. 22 Design de página do blog: Editando a página
do blog do seu site. Então, se você quiser
começar a blogar com essa equipe, você pode
fazer isso Então aqui em cima, no
menu, eu tenho um blog, e tudo isso é apenas uma página que eu criei
e a chamei de blog. Simples assim, e certifique-se de
que o URL seja slash Blog. Então, como eu fiz isso? Então, vamos pular até aqui. Deixe-me navegar pelas
páginas aqui, e é literalmente apenas
uma página chamada blog. Então, tudo o que fiz foi
criar uma nova página, e então eu literalmente a
intitulei Blog, publiquei,
e depois me
certifiquei de que o link,
o URL, fosse e depois me
certifiquei de que o link,
o URL, Slash Blog Agora, do jeito que deveria funcionar, e com a maioria das equipes
do WordPress, funciona assim
: você deseja
navegar até aqui
para ver suas configurações, clicar em Leitura e
temos uma página dedicada define uma página inicial para que possamos
personalizar nossa página inicial Bem, a página de postagem
deve funcionar da mesma maneira. Então, eu tenho a página do blog e
quero que seja minha página de postagem. Clicamos em Salvar alterações. Vou te mostrar o que
acontece se você fizer isso. Agora vamos recarregar a página e ela exibirá o modelo
padrão Não tenho ideia de por que
essa coisa faz isso. Eu acho que é uma peculiaridade
ou um descuido. Você tem que tecer isso em branco. Deixe a página de postagem em branco e nós mesmos teremos que personalizar
a página de postagem do blog, é assim
que fazemos? Muito simples. Eu vou te mostrar
agora como fazer isso. Mantenha Postpage como selecionado. Então, quando você tiver sua página de
blog, nós a recarregaremos. Lá vamos nós. Agora queremos
editar a página, não editar o site. Você deseja editar a página. Vamos continuar e
editar esta página. Tudo bem, fantástico. Então
, primeiro de tudo, queremos selecionar o
modelo aqui. Então, por que você quer
fazer isso? Porque agora você quer clicar
em Trocar modelo Por que você quer
fazer isso? Se você quiser que
a página do seu blog tenha uma barra lateral, selecione a página com barra lateral aqui. Novamente, depende
totalmente de você. Ou você pode deixá-lo
apenas com a página com imagem ou página, sem título. Basta deixar assim com o blog e fazer com que esse seja o título ali mesmo.
Simples assim, se você quiser. De qualquer forma, deixe-me trocar o modelo, e selecionarei a página de layout da
barra lateral com a barra lateral e Agora precisamos
ter o rolo do blog como o corpo do conteúdo ali. Então, clicamos no sinal de adição
ali mesmo para adicionar um bloco. Quer navegar por todos os padrões, e você quer navegar
até aqui até as postagens. E aí está.
Então você pode clicar na postagem
padrão ali mesmo ou
nesta com a imagem à esquerda,
a cópia direita aqui com
o layout da grade de
alvenaria
ou o
design escalonado aqui ou
neste design simples,
onde é como lista de postagens com Novamente, você pode
brincar com isso no seu próprio tempo para ver qual
deles você mais gosta. Então, vou clicar nesta
postagem aqui, na
grade com a primeira
postagem, duas colunas, o que for. Vamos clicar em Ns. Lá vamos nós. E isso parece ótimo. Deixe-me clicar em
Salvar, lá vamos nós. Ok, então vamos
abrir isso em uma nova guia, só
para ver como fica. Temos uma barra lateral aqui. Agora, o problema com esse design é que
eu tenho uma barra lateral, que está meio que esmagando
toda essa cópia aqui Portanto, se você optar
por um layout de barra lateral, provavelmente
é melhor usar
um design em que seja apenas
uma única coluna com ,
tipo, postagem em bloco, postagem de blog do
BlogPost Se isso faz algum sentido, agora deixe-me clicar aqui,
página com barra lateral Vamos nos livrar
desse modelo de troca e clicaremos
neste, página sem título Ótimo. Deixe-me ir em frente
e recarregar isso E sim, isso parece muito melhor. Agora você fica tipo, Bem,
eu quero uma barra lateral, como isso funciona? Tudo
bem De qualquer forma, eu. Clique aqui e
vamos em frente e exclua isso. Deixe-me clicar
aqui para ver a página, página sem título, trocar modelos, barra lateral e vamos clicar
em um design que
corresponda a uma Vamos
clicar em Publicar
aqui para facilitar as coisas. Vamos clicar no
primeiro deles lá em cima. Vamos clicar em salvar. E se você está se
perguntando o que é isso, essa é a
imagem em destaque na postagem do seu blog, que abordarei na seção de postagem
do blog. De qualquer forma, isso para a página do blog. Então, vamos dar uma olhada na
aparência desta página. Vamos abrir isso em uma nova guia aqui. E aí está. Agora você tem dois layouts
diferentes se quiser uma barra lateral ou se quiser um design de largura total Então, isso parece muito bom. E isso mostrará
a imagem em destaque de cada
postagem individual do blog conforme você a
adiciona no topo da tag de
título H one do blog
23. 23 Design da barra lateral: Agora, se você está curioso sobre como editar e ajustar a
barra lateral com esse tema, a maneira de fazer isso
é clicar em Editar sites aqui mesmo quando a página do blog
estiver aberta
e, em seguida, acessar
os elementos da barra lateral Então clicamos aqui, e então você pode
clicar em Editar na barra lateral, que se abre assim Para ser honesto, é
um pouco desajeitado. Eu realmente não gosto do jeito que isso funciona, mas é assim que é. E então você pode simplesmente ajustar as coisas aqui
com a barra lateral Se você quiser adicionar
novos blocos, basta clicar aqui. Role um pouco para baixo. Veja, é por isso que eu
não gosto disso. É desajeitado. Clicamos
aqui para obter mais informações e vamos clicar em Procurar tudo. Então temos blocos aqui que eu posso adicionar se eu quiser. Então, por exemplo, temos
categorias, como isso é adicionado? Vamos até aqui para ver a
lista ou categorias de categorias, exibimos uma lista de
categorias da taxonomia, exibimos uma lista de
todas as Clique aqui para ver a
lista de categorias e pronto. Agora temos uma categoria. É daí que isso está
sendo preenchido, e é assim que esse
elemento aqui funciona Então, se eu fosse
realmente usar um cibernético, o que não sou, pessoalmente não
gosto de barras laterais Aqui estão minhas
dicas de design para barras laterais. Se você vai usar
uma barra lateral, mantenha a simplicidade. das barras laterais está popularidade das barras laterais está
diminuindo
porque, honestamente, maioria das pessoas visitará
seu site em um dispositivo móvel, Então, vamos dar uma olhada em Justin Welch se você quiser usar
a barra lateral Eu gosto disso. Literalmente, uma
coisa é fazer uma coisa. Clique aqui para se inscrever. Concluído, ou atividades de nicho, tem uma pequena caixa
aqui com um botão Assim, você pode criar isso com Stackable e adicionar
um botão, se quiser Em seguida, eles simplesmente usam o resto
do elemento aqui para veicular anúncios e
exibir anúncios gráficos. E este é um blog
antigo, agora extinto. Mas eu gosto da
barra lateral aqui, onde há um monte de imagens bem
desenhadas com uma sombra projetada que
foram adicionadas
aqui e vinculadas
externamente aos produtos Portanto, essa é uma boa
maneira de fazer
com que as pessoas acessem seus produtos específicos,
se você quiser seus produtos específicos,
se você quiser usar uma barra lateral e quiser
ter um elemento de design Isso é o que eu
faria com a barra lateral. Ok, então
deixe-me mostrar como ajustar isso. Então, talvez eu me livre
disso lá em cima e clique aqui
para ver o sinal de mais dizemos Imagem de imagem aqui, e eu quero fazer o upload de uma imagem Vou fazer upload de uma imagem minha. Lá vamos nós. E vamos mover
isso para cima, ali mesmo. E então eu tenho
uma imagem de mim mesma ali. Parece bom. E deixe-me clicar
aqui para ver o sinal de mais. Oi, meu nome é David. Bem-vindo ao meu blog
sobre açoitamento. Sou o autor do nome do produto XYZ
123123. Eu criei este site para ajudar
você a fazer um vlog melhor, seja o que for. Ok, então vamos mover
isso para cima e para cima, e vamos clicar em
Salvar aqui, e vamos dar uma
olhada na página de registro agora. Clique aqui. Vamos
abrir isso. Lá vamos nós. Então, temos uma
pequena imagem minha e um pequeno
título aqui, e algo que você poderia fazer com isso é como, por exemplo, se você escreveu um livro da Amazon ou talvez tenha um e-book
que esteja vendendo,
você pode simplesmente criar um link
interno para É como se eu fosse o
autor deste livro
e, em seguida, basta vincular novamente, vincular externamente a esse livro.
Então, como você faria isso? Sou o autor do produto
XYZ 123. Vamos apenas destacar isso. Em seguida, clique aqui e, em seguida, crie um link para a Amazon ou para qualquer lugar onde
seu eBook esteja hospedado, e você poderá fazer isso E é assim que você meio que
ajusta o ciberespaço aqui. Novamente, eu manteria as
coisas super simples. Eu provavelmente
escolheria talvez uma imagem como essa, uma pequena
sinopse sobre E, em seguida, uma chamada à ação para
se inscrever em seu site. Então, se você pensa, Bem,
como você consegue isso? Isso é do seu cliente
de email marketing, essa opção de se inscrever. Ou o que eu também consideraria fazer é simplesmente adicionar um botão, e o botão leva à página de
compressão que estamos
fazendo desta forma exemplo, clique em seu para se inscrever
e, em seguida, a pessoa clica nela e a direciona para aquela página Ou se você quiser
ter esse formulário para que as pessoas possam inserir
e-mail e clicar em Inscrever-se
, você receberá esse pequeno campo
de seus clientes de e-mail. Então, novamente, eu manteria as
coisas super simples. Uma caixa, um botão,
algo para assinar, um monte de imagens com links
externos para produtos, uma pequena sinopse
sobre quem Realmente, é isso.
Eu não usaria uma barra lateral super longa
com categorias,
links e tags e pesquisaria neste site e várias outras coisas para
mantê-lo minimalista De qualquer forma, é assim que você edita
e ajusta essas barras laterais.
24. 24 Design de pós único: Editando suas páginas individuais de postagem no
blog. Então, temos que cobrir
algumas coisas aqui. Então, primeiro, eu tenho essa postagem
no blog aqui. Como as postagens do seu blog são criadas? Onde você cria postagens de blog? Então, vamos navegar
até seu painel. Você quer ir
aqui para ver as postagens. E então você
quer clicar em adicionar nova postagem e simples assim. É assim que você adiciona uma nova
postagem. Então, vamos abrir este melhor
microfone geral para vloggers Essa é a aparência de uma postagem
de blog no WordPress. Você tem sua tag de título H one no canto superior direito, seguida pelo corpo do texto. Então você pode
criar H dois,
H três,
tags de título e assim por diante. Então, vamos dar
um exemplo rápido. Então, os melhores microfones de espingarda,
microfones de espingarda. E eu quero que seja
uma etiqueta H two tile. Então, eu destacaria isso. Clique aqui.
Clique no título. E então você quer ter
certeza de que isso é H dois. Por que H dois? Porque isso
é um subtítulo disso Tipo, esse é um subtítulo
desse título aqui mesmo. E então você poderia ter
uma cópia abaixo disso, apenas como um exemplo rápido, copiamos isso ali mesmo E então talvez tenhamos
um subtítulo disso. E então o nome do microfone. Não sei, chame
esse nome de microfone, e eu quero que seja
uma tag de título H three. Então, tomaremos isso como título, e eu farei com que H seja três, porque esse é o
subtítulo disso Então, deixe-me realmente
abrir um exemplo rápido de uma postagem de blog para que seja um
pouco mais. Fácil de entender. Então, vamos clicar aqui, os sete melhores tipos de sites. Essa é a sua tag de título H one
no canto superior direito. Essa é uma tag H two tile porque é um
subtítulo disso E então, enquanto você
avalia isso, você pode simplesmente fazer H três,
como H, que é uma etiqueta
H três Tile porque esse é o subtítulo
disso aí E é assim que você realmente deseja
estruturar uma postagem no blog. Ok, então com as postagens do blog, você tem algumas
coisas diferentes às quais precisa
prestar atenção. Então, aqui, você pode ajustar
o tamanho com o bloco. Então, novamente, deixe-me
sair disso. E nós temos isso aqui.
Deixe-me clicar aqui. Clicaremos nas configurações. E então eu quero selecionar
esse bloco ali mesmo. E talvez eu queira que os textos sejam um pouco maiores
para esse bloco, então vou clicar em Grande. Portanto, chama um pouco
mais de atenção. Depois, você pode alterar a
cor do texto e o plano de fundo, bem
como ajustar as
dimensões e avançar. Ok, então, de qualquer forma, eu
não quero fazer isso. Então, saia disso. Tudo bem, então vamos clicar
aqui para postar. Na verdade, isso é
importante aqui. Então, primeiro, você tem
o autor aqui, você tem o título e o link. Com o link com o URL, você deve mantê-lo curto
e agradável em geral. Então, se eu tenho os melhores
microfones gerais para vloggers, esses realmente devem ser os melhores
microfones Você quer manter
as coisas simples assim. As categorias são importantes. Todas as postagens do blog devem ser
organizadas em uma categoria. Portanto, este site atualmente tem
apenas uma categoria de blog. Em geral, eu provavelmente penso quatro a seis categorias nas quais
você vai criar conteúdo e meio que me
atenha a elas e talvez adicione novas categorias quando
ultrapassar talvez 60, 70 postagens por categoria. Realmente, você quer
isso aqui. Então eu tive que adicionar uma nova categoria. Então, para isso, vou
chamar isso de microfone. Clicaremos em Adicionar nova
categoria ali mesmo e eu a desmarcarei E agora temos essa
categoria aqui. Deixe-me ir em frente
e clicar em Salvar. E lá vamos nós. Então,
com categorias, você quer colocar uma
postagem de blog em uma categoria, não em duas, não em três, em uma. Agora, você também pode
marcar coisas. Eu não gosto muito de etiquetar. Na minha opinião, a marcação não é
muito útil, mas a ideia por trás da marcação era se você
fosse criar um conteúdo
único sobre
um tópico muito específico Então, talvez sua categoria seja, tipo ,
carros e depois caminhões, e então uma etiqueta seria
como Ford, muito específica. Em geral, eu só uso
categorias para meus sites,
mas, novamente, cabe a você
não se sobrecarregar Não é como uma
mídia social em que você pode marcar coisas e
ajudá-las a se classificar melhor. Na verdade, é para fins
organizacionais para o visitante final. E, na verdade, simples assim. Então você tem
sucessões de links
ali mesmo e, na verdade, simples assim Agora, como definir uma imagem
em destaque, que é sobre o que eu meio que
falei aqui. Então, no topo
desta cena, você define a imagem em destaque. Você clica em NATs e, em seguida,
pode fazer o upload de uma imagem de destaque, que é o que
faremos ali mesmo Então, acabei de criar essa
imagem novamente com o Canva, como mostrei anteriormente E você quer dar um título a isso como algo
relacionado às postagens do blog, então o registro do microfone e todo o texto seriam
a palavra-chave da postagem do blog Então, qual é a postagem do blog sobre
microfones para o YouTube. Ok, então microfones
para o YouTube. Agora, clicaremos na imagem do
recurso de conjuntos ali mesmo. E agora temos a
imagem principal ali. Vamos clicar em Salvar. Ótimo. E vamos
recarregar nossa página do blog só para mostrar como isso se parece. E
sim, parece bom. Agora temos um pequeno
borb ali, imagem e o título,
e isso parece bom Então é assim que essa seção
vai ficar e ser
preenchida à medida que você cria imagens de
destaque,
blogs e assim por diante Tudo bem, então, de qualquer forma, vamos voltar ao
Dashboard. Abaixo da sua postagem. aqui que você tem suas
categorias e tags. Então, se você clicar
nas categorias aqui, esse também é outro
local onde você pode adicionar novas categorias
e gerenciar quantas categorias você tem e postagens de blog
dentro das categorias. E você também pode criar
subcategorias, se quiser. Então, por exemplo,
chamaremos isso de registro
e, em seguida, a
categoria principal seria blog, apenas como exemplo. E então essa é uma subcategoria. A estrutura de URL
deste site seria logout.com slash category slash Blog slash
flogging Então aí está.
Simples. E você quer usar subcategorias,
pois faz sentido para
a categoria primária Então, se você está
falando, por exemplo, volta aos caminhões, talvez
caminhões sejam minha categoria principal. Mas às vezes, mas eu escrevo muito sobre quatro caminhões
por qualquer motivo, talvez eu crie uma
subcategoria na Ford ou quatro caminhões e a
estruture assim E, na verdade, é tão simples com o design
e com os blogs Então é assim que você quer
abordar isso,
criar conteúdo aqui, H dois, H três, tags de título, colocar cada postagem do bloco
em uma categoria lógica, não pensamentos ou categoria
lógica não categorizada, talvez quatro a seis, isso
faz sentido para o seu site Além disso, não se esqueça de
que você ainda tem acesso a todas as vantagens da edição de
blocos com o WordPress Você pode clicar
aqui para o Plus, clique aqui para o BRS. Talvez eu queira ter um
padrão aqui. Então, clicaremos no
destaque ali mesmo. Talvez eu queira
ter esta seção aqui, adicioná-la. O Wordpress é bastante
flexível e permite que você crie
páginas e conteúdos bonitos. Agora, se dermos uma olhada nessa postagem de bloco individual que acabamos de publicar aqui, será um design de coluna
única. E se você disser: Bem, ei, eu quero adicionar na barra lateral ou talvez você apenas goste
da aparência Talvez você queira que isso
tenha uma barra lateral e, em seguida, sua
postagem de bloco individual não tenha uma barra lateral, depende totalmente de você Mas se você quiser
adicionar a barra lateral em uma única página de postagem, você pode fazer
isso facilmente clicando aqui para ver as configurações Em seguida, clique aqui para ver
o modelo, postagem única, modelo de
troca e, em seguida, postagem
única com uma barra lateral, e é assim que você
adiciona na Ou se você
quiser apenas mantê-lo como está, basta usar o modelo
padrão, que é uma única postagem. Então, por padrão,
não há barra lateral com as postagens
individuais do blog Pessoalmente, gosto da
aparência. Sou só eu.
Mas depende totalmente de você. Novamente, se você passar
pelo processo de criação de uma
barra lateral que deseja usar, basta
adicioná-la aqui Mas, no geral, isso é
tudo que você precisa saber para começar a blogar E uma última coisa rápida
que eu quero que você ajuste e saiba como ajustar é como mudar esse
título ali mesmo. Então, diz B e depois Vlog 123. Esse é o nome de usuário de login do administrador.
Então, não queremos isso. Obviamente, queremos que esse seja um nome mais lógico, como Brian
ou qualquer que seja o nome dela. Então essa é a
categoria que eu adoro. Perfeito na categoria. Perfeito, não
mudaria nada ali mesmo. Isso é ótimo. O encontro
aqui também está bom. Ok, então algumas
pequenas coisas rápidas. Então, com a data, como
você muda a data? Então, talvez você volte
a esta postagem do blog em um mês ou dois meses e a atualize, e
não queira mais que isso diga essa data, você quer ser a data
mais atual. Portanto, você pode simplesmente alterar a data de
publicação aqui. Está bem? Portanto, nunca chegue ao seu posto. Nunca chegue aqui para publicar, e então você pode alterar
a data de publicação para outra coisa. Para se livrar do
título de administrador, você precisa ir até a aparência. Tudo bem, desculpe, você
tem que ir até os usuários. Todos os usuários. Abra isso. Então abra isso
aí mesmo. Então, nome de usuário. E então o nome de usuário é
esse e você não pode mudar seu nome de usuário, mas
você pode mudar o apelido Então eu não quero isso. Então, vamos dizer
como Brian, seja o que for. Em seguida, exiba publicamente ou exiba o nome publicamente como Brian
ou qualquer que seja seu nome. Em seguida, anote aqui as informações
biográficas como mencionei anteriormente, onde é como se você pudesse ter uma pequena descrição rápida
do autor ali mesmo Em seguida, clicaremos em Atualizar
perfil. E grades. Vamos revogar os sites e pronto. Então é
assim que você muda seu nome. Você pode atualizar a data e colocá-la na categoria,
isso é perfeito. Belo link interno para
as páginas da categoria.
25. 25 Favicon: Como adicionar um fabricon
ao seu site. Portanto, um ícone de tecido ou ícone de site. Essa coisinha
está aqui na aba. Então, como você o torna personalizado em vez de
ser o logotipo que
enviamos e depois misturamos personalizado em vez de
ser o logotipo que
enviamos e depois misturamos
? Bem,
isso é bem simples. Você pode usar o Canva para criar
o gráfico e seu site navegando
até as configurações e, em
seguida, indo para a guia geral E aqui é
onde você pode alterar o ícone do site e fazer o upload de um
novo ícone criado por você. E mostra o tamanho
aqui 512 por 512, pelo
menos 512 por 512 pixels Vamos dar
um exemplo rápido do
Canva, tamanho personalizado, 512,
512, para criar um novo um exemplo rápido do
Canva, tamanho personalizado, 512,
512, para design.
E lá vamos nós. Então, temos um pequeno
quadrado bem ali. Vamos digitar os elementos. Não sei, digite vlogging, vlogar é bom, vlogar é bom, Ok, ou vlog talvez seja melhor. Que tal digitar na câmera? Então, sim, seja o que for. Então, você
só quer encontrar algum tipo de imagem ou gráfico que
faça sentido para seus tópicos? Deixe-me uma bandeira e
veja o que aparece. Sim. Ok, tudo bem. Agora, do ponto de vista
prático, realmente deve corresponder ao
design do seu site Então esse é o logotipo
que eu criei para o meu
site pessoal ali mesmo. Então, o tecido lá em cima está aquele símbolo Du ali mesmo, fundo
circular,
que é transparente. Então, novamente, depende totalmente de você
se você quiser projetar isso. Então, se você quiser
usar, tipo, um plano de fundo em estilo circular, basta
navegar até aqui digitar um círculo. Tudo bem. Bum, e mude a
cor ali, talvez faça com que seja azul. Então faça isso bonito
e grande, desse jeito. Lá vamos nós. Tudo bem. Agora, posição. Queremos
reverter isso. Ok, vamos colocar isso
em prática ali mesmo. E sim, tudo bem, então nada mal. E agora queremos que seja uma imagem
transparente para que possamos compartilhar e baixar,
fundo transparente, baixar. E vamos salvá-lo na
minha área de trabalho aqui. E vamos abrir
esses sites e minimizar isso, minimizar isso. Vamos arrastar e soltar
isso no lugar, alterar o ícone do slide e
arrastá-lo para lá. Defina o ícone do site. Lá vamos nós. Clique em Salvar alterações. E então vamos recarregar
o site. Aí está. Então, agora temos um pequeno ícone
agradável. Então, para fins de tutorial, é assim
que você o atualiza. Eu criaria algo
um pouco mais personalizado, talvez como um VH ou qualquer outra coisa, mas você tem a ideia
de como criar um ícone de site personalizado
para seus
26. 26 SEO: SEO básico para seu site. Então, estamos chegando ao
final deste tutorial. Então, como configuramos
o SEO para um site? Portanto, na otimização de mecanismos de pesquisa, há algumas pequenas coisas que você só
precisa conhecer. Então, primeiro na
página inicial, aqui, nós a definimos como
página inicial, separador de páginas Aprenda como aumentar sua renda,
blá, blá, blá. E isso foi preenchido
porque eu
adicionei o slogan ali mesmo Mas podemos mudar isso.
Não estamos presos a isso. Então,
navegue até o Painel. Então você quer navegar até
o Rank Math, que é um plugin de SEO que
instalamos logo no início. E agora, quando
tivermos o Rank Math aberto, queremos ir para
Titles and Meta. E quando o Titles
and Meta estiver aberto, você deve clicar na
página inicial aqui E a página estática é
definida como primeira página. Adicione a descrição do SCoTile em
casa e o Meta na página inicial. Normalmente, você pode editar aqui, mas temos que ir até
aqui para editar a página inicial Então, aqui é onde
podemos definir o título. Então, como fazemos
isso? Muito simples. Então, vamos clicar
aqui,
há uma pequena caixa
que diz rank Math. Em seguida, clicamos em Editar
trecho ali mesmo e podemos ajustar
tudo aqui. OK. Então, em geral, com maioria dos temas para Wordpress, depois de instalar o rink
Math, tudo o que você precisa fazer é
clicar na página inicial, e aqui é onde
você pode definir um título de SEO Mas isso está nos direcionando
para a página inicial aqui. Então, basta clicar nessa
pequena caixa lá em cima. Então isso aparece aqui, e é aqui que você
pode alterar o título Portanto, deve ser algo como separador da página de título do site
VoGHT, aprenda como iniciar
um vlog lucrativo Em seguida, a meta descrição deve descrever
do que se trata o site. Então, aprenda a criar registros melhores e
aumentar seu público. Conselhos e guias
sobre blogs. Sempre. Você também pode usar essa
geração com IA, se quiser. De qualquer forma, gosto
de Ds e parece bom. Clique em salvar, é
assim que você altera o título de SEO da
página inicial lá em cima Então vamos lá.
Muda lá em cima, mas permanece o mesmo
aqui embaixo Então aí está. Simples assim. Agora, você também precisa fazer isso com cada página individual. Então, a página Sobre como um exemplo rápido,
podemos simplesmente abrir isso,
clicar nessa caixa ali mesmo
e, em seguida, editar trechos, então
esta é a página Sobre, deve ser sobre log, Então, novamente, a mesma coisa. Escreva uma descrição
e pronto. Então, a outra coisa
que
você quer fazer é também para postagens de blog. Então, com postagens de blog, você quer usar
um título que não seja excessivamente otimizado e
não seja rico em palavras-chave, mas algo que seja um
pouco clicável, como a incrível
verdade sobre Não sei, algo
assim é um pouco mais
atraente do que começar um vlog
que gera dinheiro para sempre, em vez de começar um De qualquer forma, o melhor
microfone geral para vloggers. Você quer clicar
aqui, editar para recortá-lo, e então você quer se
livrar do
nome do site ali mesmo, e então
digitar manualmente no Vlog how ou você pode simplesmente se livrar de tudo
isso se quiser, e
apenas ter o Mas eu normalmente gosto de usar o título e depois o nome do
site. Se o título não for muito longo. Portanto, se o título estiver
ocupando toda a seção aqui, basta deixá-lo. Mas se houver um
pouco de espaço
, normalmente gosto de
ter o nome do site no final. E então você quer escrever
a descrição
ali mesmo e ajustar o link do
permiano ali Então, você só quer
acessar o site
e, ao publicar páginas e postagens de blog
em sua página inicial, certifique-se de que
tudo tenha um título lógico de SEO que seja muito útil e descritivo
para o visitante final
27. 27 toques finais: Ok, então agora você deve ter um bom
entendimento sobre como
criar um site com
esse tema que seja bom,
atraente, tenha uma boa cópia, seção de
ofertas, cópia de vendas, páginas de postagem de
blog, todas essas
coisas boas Então, deixe-me voltar aqui
para o meu painel do WordPress. E deixe-me
abrir o editor, só para mostrar alguns pequenos detalhes
finais que você pode ajustar se quiser Pessoalmente,
gosto da aparência padrão
desse tema, mas, novamente, você tem
muitas opções aqui. Então, deixe-me mostrar
brevemente como as coisas funcionam. Ok, então
aqui em cima, temos estilos. Novamente, os estilos afetam todo o site. Portanto, se você quiser
alterar um bloco individual, sempre
desejará operar acordo com suas configurações.
Mas aqui, estilos. Então, eu falei sobre isso logo
no começo,
mas acima de tudo, os
estilos meio que
mudam amplamente o site inteiro Se você quiser fazer isso e
mudar a cor ali mesmo. Mas, novamente, você pode alterar cada um desses elementos individualmente, mas isso é para todo o site. Ok, então temos nossa
tipografia lá em cima. É provavelmente a
mais importante porque você pode alterar a
tipografia do site Então, se você não gosta
dessa escolha de fonte, você fica tipo: Como
faço para mudar isso? Me deixa louco. Eu não
gosto disso. Aqui em cima. Então, na verdade, você quer mudar seu texto e seus títulos. Texto significa seu corpo de texto, e seus títulos significam
seu texto de bloco H um, h2h3 Então, quando você clica
nesse elemento, ele diz H um ali mesmo. Isso significa literalmente rumo. Cabeçalho um. Então esse é
o título da página. Então H dois é um
subtítulo de H um, H três é o
subtítulo de H dois, assim por diante Então, aqui com cabeçalhos, podemos mudar os cabeçalhos para outra
coisa, se quisermos Tipo, isso é e vamos
desistir disso. Então temos o
texto ali mesmo. Então, podemos mudar o texto
para outra coisa, se
quisermos assim ou se estiver aqui. Essas são suas únicas
opções, podemos
ser cardo, Enter, qualquer outra coisa Então é assim que você
muda a escolha e o
tamanho da fonte, se quiser
brincar com isso ali, e é isso mesmo. E, de um modo geral,
você quer que suas fontes sejam
parecidas em todo o site. Então, na verdade, suas tags de título H one, h2h, suas tags de cabeçalho
são uma opção de fonte, então seu corpo de texto
é outra coisa Então você não quer ter,
tipo, uma fonte diferente para seus itens de menu e uma fonte
diferente para sua H one, tags de título
h2h, uma
fonte diferente para seu corpo Para. Você quer ir com dois. Um estilo para seus cabeçalhos, outro estilo para o corpo do texto Se você precisar de ajuda para descobrir o que combina, você pode brincar
com um site chamado par de fontes aqui E isso dá uma ideia de quais fontes combinam umas
com as outras. Mas, novamente, você está muito limitado aqui
com sua tipografia É isso mesmo. É um, dois, três, quatro,
nenhum dos padrões Então, brinque com isso
para ver se você gosta. Mas, novamente, você pode
alterar o tamanho, aparência ali,
torná-la mais leve, altura da
linha e o espaçamento entre letras Portanto, você tem muita flexibilidade com o design aqui. Caso contrário, essa é a
principal coisa que você provavelmente vai querer mudar com
a tipografia Então temos cores lá. Cor, você pode alterar as cores da tinta interna do
link. Então, quando você tem um link
interno ou externo para outro
site ou qualquer outra coisa, como Amazon ou
YouTube ou qualquer outra coisa, é
aqui que você também pode
alterar a cor do link. Então, se eu tivesse um link ali, vlogs de viagem de
alta qualidade, como esses Vamos pegar isso.
Deixe-me colocar um link aqui para o YouTube como um exemplo rápido. Lá vamos nós. Vou ousar isso. E então a tinta
ali é como eu
mudaria essa cor. Então, e se você
disser, eu não gosto desse preto. Eu não
quero que isso seja preto. Então aqui, contrastando o preto, você pode mudar a cor e brincar com ela
ali mesmo para mudar essa cor. Então, os links ali mostram
como você muda as cores. Você
também tem outras opções
e gradientes com os quais pode
brincar E, no geral,
essas são as principais coisas
que você deseja mudar. Biografia, seu H one, bloco
h2h3,
suas tags de cabeçalho e suas fontes de corpo,
depois as cores para, por
exemplo, seus links.
Praticamente isso. E então sombras ali.
Então você tem o layout. O layout é útil porque
você pode
ampliar o site se quiser
e adicionar preenchimento E se você quiser adicionar
uma imagem de fundo para todos os sites, você pode fazer isso aqui. E uma última coisa
é que você tem CSS
adicional
lá embaixo e também blocos
para que você possa personalizar a aparência de
blocos específicos para todos os sites. Portanto, se você quiser
personalizar esses blocos, para não precisar
alterá-lo continuamente toda
vez que o usar,
basta alterá-lo aqui
mesmo em todo o site E, novamente, como eu disse, CSS
adicional está aqui. Então, se você sabe como
codificar CSS e quer, onde eu insiro o
CSS que eu quero adicionar. Cresça aqui mesmo
no seu estilo. De qualquer forma, isso é tudo
para este tutorial.
28. Valeu!: Tudo bem, pessoal. Isso é tudo para meu curso Skillshare sobre como
criar um site e
blog muito bonito e
profissional de alta
conversão com o tema 2024 do Wordpress Espero que você tenha gostado
e espero que tenha extraído muito valor
disso e tenha conseguido
criar uma página inicial muito eficaz com um apelo à ação inteligente De qualquer forma, eu só
quero
agradecer e ter um
ótimo dia. Tchau tchau.