Crie um site com o tema Astra! | David Utke | Skillshare

Velocidade de reprodução


1.0x


  • 0.5x
  • 0.75x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Crie um site com o tema Astra!

teacher avatar David Utke, Web Pro and YouTuber

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

    • 1.

      1 Introdução de Astra

      0:48

    • 2.

      Introdução e configuração

      5:30

    • 3.

      Configuração de 3 sites

      12:37

    • 4.

      4 começam site de design

      4:24

    • 5.

      5 Imagem de herói e chamada para ação

      9:59

    • 6.

      Mensagem de boas-vindas

      5:14

    • 7.

      7 Menu visual

      10:59

    • 8.

      8 publicação de blog

      8:29

    • 9.

      9 e-mail

      3:46

    • 10.

      Menu de 10 logotipo

      8:53

    • 11.

      11 sobre página de contato

      7:31

    • 12.

      Projeto de 12 rodapé

      3:42

    • 13.

      13 páginas legais

      2:18

    • 14.

      Design de 14 blogs

      15:04

    • 15.

      Estrutura de 15 posts

      8:07

    • 16.

      16 Console de busca

      2:25

    • 17.

      17 conclusão

      0:15

  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

389

Estudantes

--

Projetos

Sobre este curso

Aprenda como criar um site profissional e responsivo usando o tema Astra GRATUITO e o editor de blocos Gutenberg do WordPress. Astra é um tema WordPress líder no setor e o tema mais download em todo o WordPress. Em combinação com o editor de blocos Gutenberg, você pode criar e projetar qualquer tipo de site que você goste sem habilidades de codificação necessárias.

Astra especificamente fornece funcionalidade arrastar e soltar para seu fluxo de trabalho com WordPress, isso significa que você pode simplesmente arrastar e soltar blocos de elementos em lugar de uma maneira fácil de entender, visual e editar como quiser. O tema Astra funciona perfeitamente bem com o editor do Gutenberg para criar qualquer tipo de site que você quiser.

Neste curso, abrangemos do passo 1 ao passo em como criar um blog pessoal ou profissional com este tema incrível:

  • Obtenha um nome de domínio de um registrador de nomes de domínio, Namecheap.
  • Como obter uma conta de hospedagem compartilhada do SiteGround
  • Como instalar corretamente o WordPress.
  • Um tutorial de design completo sobre como criar um site visual impressionante usando o tema Astra
  • Configurações de back-end, permalink e dicas de segurança
  • Recursos de personalização avançados para o tema Hello
  • Como otimizar seu site para celular.
  • Ferramentas e plugins adicionais para aprimorar seus projetos.

O tema Astra é perfeito para qualquer pessoa que queira começar um site profissional que pode ser personalizado em alto grau com o editor de blocos Gutenberg. Várias opções de design para páginas que também são responsivas para vários dispositivos. Este tema é perfeito para qualquer pessoa que queira um tema em branco para criar em cima.

Este curso é um guia completo sobre como criar um site profissional usando WordPress em um host de web auto-hospedado. É perfeito para qualquer pessoa que queira aprender e entender como usar o tema Astra e o editor de blocos de página Gutenberg do WordPress.

Conheça seu professor

Teacher Profile Image

David Utke

Web Pro and YouTuber

Professor

Hi there,

My name is David and I'm professional blogger, web designer and a highly rated user experience consultant.

Starting in 2009, I first began learning web development and WordPress for my own online projects and now translate technical skills in an easy to understand way for beginners with my helpful courses.

Currently, I live abroad, travel, and I run my online business from cafes and workspaces. If you would like to find out more, follow my Skillshare profile and drop a message/email with any questions. I'm here to help.

Visualizar o perfil completo

Habilidades relacionadas

Desenvolvimento Desenvolvimento web
Level: Beginner

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui aulas curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. 1 Introdução à Astra Introdução: Bem-vindo ao curso e meu nome é David. Eu vou orientá-lo através do passo um a passo feito, e como criar um blog e site usando o Tema Astra. Astra é um tema completamente livre em um dos demes mais baixados para WordPress é projetado para ser luzes responsivas em rápido. Neste tutorial, vou mostrar-lhe como usar o editor Gutenberg padrão e a versão gratuita do Asherah para colocar esses dois juntos para projetar qualquer tipo de site que você quiser. Este curso é perfeito para qualquer pessoa que queira criar um site de estilo informativo e blog. Como este é um passo um para descer tutorial, vou orientá-lo através de todos os passos que você precisa saber. Vamos obter um nome de domínio em um registro de nome de domínio, vamos obter uma conta de hospedagem compartilhada. Em seguida, vamos instalar o WordPress InDesign ou site. Então, se você está procurando um curso intensivo sobre como projetar um site e blog usando o tema do Azure. Este curso é para você. Clique no próximo vídeo e te vejo lá dentro. 2. 2 Introdução e configuração do site: Muito bem, bem-vindo ao tutorial. Então este é o site que vamos construir. Vamos fazer um site orientado para a informação. E eu vou mostrar a vocês como projetar este site específico usando apenas Astra, literalmente apenas Astra e apenas o editor padrão WordPress. Você pode realmente fazer isso muito impressionante. De qualquer forma, vou mostrar-te como criar uma bela imagem de herói. Como adicionar botões de sobreposição de texto, mensagem de boas-vindas, como adicionar esses guias detalhados. Então, quando você passa o mouse sobre ele, dá um pouco de textos indo junto com ele, como adicionar em uma seção aqui e dividi-la, e como torná-la super ampla assim. Então, é um tipo de visualmente se destaca na sobreposição de texto sobre. É assim que você pode adicionar em suas postagens mais recentes do blog. Tinha que ter um e-mail opt-in formulários severidade na parte inferior. Como mudar o rodapé e adicionar uma página de termos de privacidade e divulgação, posts de blog reais, como nós, como adicionamos migalhas de pão como esta? Como adicionamos nesta divulgação padrão que vai estar em cada postagem de blog. Como você se vincula a uma divulgação como esta? Como adicionamos uma caixinha como esta para promover produtos? Como adicionamos um formulário de aceitação por e-mail para ficar na parte inferior de cada postagem de blog, etc. Então, se você está pronto, vamos começar. Bem-vindo ao nome cheaper.com. Então este é o local onde eu recomendo que você registre seu nome de domínio. Agora você pode registrar totalmente seu nome de domínio em um host web, mas vai ser mais caro UM termo. E então eu uso pessoalmente ovelha chamada, eu mantenho todo o meu nome de domínio, dividi-los. Os domínios podem começar em 80 por ano e isso é um preço fantástico. Então, de qualquer maneira, então você pode começar com chamado Sheep é muito simples. Então, basta chegar à caixa de pesquisa, colocar no nome de domínio que deseja registrar. Então, se eu digitar meu super incrível blog.com, tudo bem, vamos clicar no ícone de pesquisa. Ok, Então meu super incrível blog.com está disponível, por isso é adicionado ao seu carrinho é muito simples. Ele só poderia ser Adicionar ao carrinho botão. Lá vamos nós. Ok, então vamos em frente e ver o item e vamos em frente e verificar. Ok, então esta é a página do checkout para nomeá-lo barato. E então você vai ter que criar uma nova conta barata, obviamente. Mas aqui você tem seu registro de nome de domínio. Você pode registrar um nome de domínio por um ano com até dez anos de antecedência. Eu recomendo registrar-se por alguns anos porque você anda em que nomes de domínio de baixo preço. Não Burr sabia cerca de US $12, por isso não é tão caro, mas se você quiser andar em que baixo preço AAT, então basta ir em frente e selecionar como cinco anos são o que você acha que é melhor para o seu projeto. Agora, quem é guarda é fantástico. É livre para obtê-lo completamente de graça. Hosts da Web e outros registros de nome de domínio. Eles cobram extra por isso, se você for tipo, o que é isso? Bem, quem era Deus mantém sua informação privada porque parte das regras não posso é que você tem que divulgar informações de contato. Então quem é vai muito bem porque mantém tudo privado e é grátis para sempre. Que isso basicamente é tudo o que você tem a fazer é ir em frente e clicar em Confirmar Ordem, pagar e criar uma conta nome ovelhas. E você está pronto para ir. Bem-vindo ao siteground.com. Então, digamos que terra é um dos apenas três hosts web que são recomendados pelo WordPress. E eles são um dos mais rápidos, mais alto desempenho anfitriões web em torno do definitivamente superar um sonho anfitriões e Bluehost em termos de velocidade, mas seu ponto de preço é um pouco maior. Mas o que eu realmente gosto sobre SiteGround é que eles têm uma ótima taxa de introdução para iniciantes que nem sequer têm um site para começar. Agora, na página inicial, você vai ver um monte de opções diferentes. Nós não queremos que este que diz gerenciado porque nós tivemos que ter acesso através do backend de nossas contas não estão começando uma loja. Hospedagem em nuvem é para vistas de alto desempenho, sites de alto tráfego, que não somos nós. Estamos começando um novo site. Então, basta ir em frente e clicar em hospedagem na web. Agora temos três opções diferentes. Inicialização, crescer grande, e ir geek. Eu realmente gosto do crescer grande o mais. E são sites ilimitados, 25 mil visitantes por mês ou mais, 30000 visitantes, etc. Isso é como 1000 visitantes por dia, o que é uma boa quantidade de tráfego. Inicialização. Você só pode ter um site. Então eu estou dizendo a você como uma vez que você entende como criar um site WordPress, você definitivamente vai querer ter sites ilimitados. De qualquer forma, vá em frente e clique nele, obtenha um plano. Ok, então agora nesta página, nós temos que colocar em nosso nome de domínio para que possamos registrar um nome de domínio através de saquê rodada, que eu não recomendo porque o registro de nome de domínio é 1595 por ano chamado barato, é AAA, e é por isso que eu mandei você ir através de ovelhas nomeadas. Então você deveria ter obtido seu nome de domínio ovelha. Então vá aqui. Eu já possuo este nome de domínio. Está bem? Agora coloque no nome de domínio que você registrou. Em seguida, clique em Continuar. E lá vai você. Então agora você só precisa revisar e completar suas informações de pagamento e criar um site de contas terrestres. Não vou insultar a tua inteligência e mostrar-te como pagar por algo online. Senti que a informação era apropriada. E você quer vir até aqui para ter certeza que tudo está bem. Então você tem sua escolha de datacenter aqui. Então, se você quiser alterar o datacenter, temos EUA, Austrália, Alemanha. Então, como é isso, de onde, de onde o seu tráfego vai vir principalmente? Está bem? Então, se você tem um público americano, então você provavelmente quer EUA, ok? Se você tem um público europeu, talvez você queira como a Europa ou a Alemanha, por exemplo. E é isso. Ok, então venha aqui, diga que eu gostaria, eu gostaria de obter notícias sagradas e atualizações talvez se você quiser, e definitivamente você tem que clicar neste onde eu possa formar. Eu li e concordei em citar motivos, termos de serviço, e então é isso. Então vá em frente e clique no botão de pagamento agora e você está pronto para ir. 3. 3 sets no site: Bem-vindo ao siteground.com. Então, depois de enviar o pagamento, você será apresentado com o seu painel de conta de hospedagem web SiteGround. Agora temos essa configuração, nosso site, vou mostrar a vocês como é feito rápido e fácil em cinco minutos. Então você pode simplesmente ir em frente e clicar neste site de configuração lá. Ou você pode clicar na guia lá em cima e você clicar em fazer site lá ou este, criar um site lá. Seja como for, todos eles te levam para a mesma página, que é esta página aqui onde podemos adicionar um novo site. Então, podemos adicionar um novo nome de domínio. E então o que isso vai fazer é registrar um nome de domínio através do Sacre, o que eu não recomendo. Nome de domínio temporário significa uma caixa 1, 2, 3 pontos siteground.com, qualquer que seja. Literalmente, apenas um nome de domínio temporário para praticar algo ou o que quiser fazer. Queremos que este seja um nome de domínio existente. Então, agora queremos vir aqui inserir o seu nome de domínio. Portanto, queremos usar o nome de domínio que usamos quando nos inscrevemos no siteground. Então deixe-me ir em frente e colocar isso aqui. Eles iam e iam em frente e clicavam em continuar. Ok, então o nome de domínio que você usa não está registrado no seu sacro e contas. Agora, prossiga blablabla. Está bem. Tudo o que está dizendo é que você vai ter que configurar servidores de nomes. Não é um grande negócio. Não se preocupe com isso. Clique em continuar. Ok, então agora queremos clicar neste onde podemos começar um novo site porque estamos começando um novo site, não estamos migrando um site de outros hosts da web, etc. Mas se você tiver uma conta de hospedagem diferente e quiser passar para o site, você pode simplesmente ir aqui e migrar seu site, mas vamos em frente e clicar em iniciar um novo site. Ok, então agora podemos clicar em WordPress, WooCommerce, Wembley, outro, queremos WordPress. Então vamos em frente e fazer isso. Ok, agora WordPress login configurável. Então vai ser assim que entramos em nosso site. Então deixe-me ir em frente e clicar em um endereço de e-mail. Então deixe-me colocar o meu endereço de e-mail aqui. Ok, e então deixe-me ir em frente e colocar uma senha. Ok, e vamos clicar em Continuar. Agora podemos instalar o scanner sagrado, o que não vamos fazer. E vá em frente e clique em Concluir. E lá vai você. Então agora o SiteGround está criando nosso site. Ok, então diz que estamos prontos, mas uma coisa que temos que fazer é apontar o nome do domínio. E então o que isso significa, temos que ir para a nossa conta barata nome e atualizar os servidores de nomes para apontar para a nossa conta SiteGround. Muito, muito simples. Então você só quer entrar aqui e você só quer pegar qualquer servidor de nome que você deseja navegar para o seu nome de domínio. Está bem? Queremos vir aqui e queremos ir clicar neste menu suspenso e você deseja ir para o servidor de nomes DNS personalizado um. Cole isso. Boom. Ok. E agora vá para o Servidor de Nomes para levá-lo. Copiado, boom, bem ali. Colar. Em seguida, clique na pequena marca de verificação. Ok, então agora você atualizou com sucesso os servidores de nomes. Diz que vai levar 40 pode levar 40 horas. É que eu nunca vi isso. Normalmente leva uns cinco minutos. Então, o que você precisa fazer agora. Espere um pouco. Certo, então espere cinco minutos, seis minutos para que tudo se propague corretamente. E então seu site deve estar tudo pronto. Depois de esperar cerca de cinco minutos ou mais, volte para a guia de seus sites e isso terá os detalhes do seu site. Você quer clicar em kits WordPress e, em seguida, você quer ir para WordPress admin porque queremos fazer login em nosso site. Então, seu administrador para suas páginas, então não vai ser o seu website.com, o que quer que seja, barra WP admin. Agora você provavelmente deve ver algo como isso onde uma grande mensagem assustadora. A razão é porque este site não tem um certificado SSL ativado. E assim podemos ir em frente e rapidamente e facilmente fazer isso nós mesmos aqui em baixo. Então, com o SSL, venha aqui e clique em Adicionar. E assim no SSL ele adiciona um pequeno ícone lá em cima. Agora podemos usar, Vamos Criptografar e Vamos Criptografar é completamente gratuito e certifique-se de que está selecionado. Desça aqui e clique em ativar. Muito bem, agora estamos no nosso gestor SSL. Selecione o nome do domínio, selecione o certificado SSL desejado. Vamos criptografar e ir em frente e clique em Obter. Certo, agora está instalando o certificado SSL. Demora um minuto, talvez dois minutos, não muito tempo. Fantástico. Então vamos criptografar está instalado para o nosso site. Fantástico. Então tudo o que temos que fazer agora é clicar em Ir para minhas contas. E isso vai nos guiar de volta para onde estávamos. Certo, então vamos para sites. Ok, vá novamente, vá para o kit WordPress, vá para o administrador do WordPress. E lá vai você. Então agora seu site deve ser seguro, e este é o seu administrador WordPress. Então, o que você precisa colocar aqui são as credenciais que você usa ao configurar o site. Então, basta colocar em seu endereço de e-mail que você usa, bem como sua senha, e então clique em login. Bem-vindo ao WordPress. Então este é o seu painel WordPress e há algumas pequenas configurações de back-end que precisamos cuidar rapidamente antes de começarmos a projetar nosso site. Então vamos começar a isso. Tudo bem, então a primeira coisa que eu quero que você navegue até onde ele diz plugins. Agora plugins, você obtém o plugin inicial WordPress. Isto é do terreno do local. Definitivamente não precisamos dele. Eu definitivamente deixar Saigon otimizador este um plug proprietário fantástico e por siteground, que faz o seu site carregar mais rápido para o usuário final. Então vamos em frente e deletar isso. Ok, Então o primeiro plugin que eu quero que você adicione, e agora é bom para adicionar. E eu quero que você adicione algo chamado Yoast SEO. Tudo bem, vamos em frente e clique em Instalar agora. E vamos clicar em Ativar. Ok, então o que Yoast SEO faz é que ele apenas nos dá um pouco mais de controle sobre o nosso SEO na página, como nossos títulos de página, Meta descrição nos permite ter migalhas de pão em nosso site. Um monte de coisas realmente úteis. Então você está tipo, do que você está falando? Diamos que foi site criativo pro.com. Então, como uma descrição Meta é esta seção superior direito aqui no título da página. O que Yoast nos permite ter todo aquele pequeno controle granular sobre como isso parece para os motores de busca, etc. Agora, o próximo Bogan que eu quero que você vá em frente e adicione chama-se smush. Então digite “smush”. Lá vamos nós. Agora o que é muito faz é que nos permite otimizar suas imagens que carregamos em nosso site. E assim, por exemplo, se chegarmos ao site criar pro.com, esta é uma imagem de herói. É uma imagem grande. Ele é otimizado para carregar rapidamente. Se eu recarregar, isso cobrirá apenas boom, lodes muito rápido. Está bem? Porque e isso é smush ajuda faz isso porque ele otimiza suas imagens, tornando-o feito fazendo um tamanho de arquivo menor, mas ainda não reduzindo a qualidade. Está bem? E, em seguida, o último plugin que eu quero que você vá em frente e instalar é chamado jetpack. Agora jetpack é realmente de um WordPress. E eu gosto de mochila a jato porque permite que você tenha principalmente como ele morre. A principal coisa que eu uso é postagens relacionadas. Então, se descermos novamente, então um site ótimo pro.com foi apenas saltar para o post registrado no blog Dominion. Se eu rolar todo o caminho até o fundo aqui, você vai ver um monte de pequenos. Você também pode gostar de boom, boom, boom. Isto está a ser alimentado por mochila a jacto. Está em servidores de jetpacks, não no meu serviço. Eu não sou como um acordo. Não está ocupando largura de banda. É apenas uma coisinha útil que aumenta. As pessoas estão clicando em torno de seu site, links internos no Pete, mais tempo em seu site, etc. E então deixe-o lá. E então estamos prontos para ir. É tudo o que precisamos fazer. Agora, eu quero que você navegue até onde diz usuários. Clique nisso. Tudo bem, então agora devemos ter um usuário aqui. Agora foi aberto este usuário e há um par de pequenas coisas que você precisa saber. Então, viemos até aqui. Aqui em baixo, informação biográfica, aqui é onde você pode colocar como David gosta de beber café e gosta de longas caminhadas na praia, etc, blá, blá, blá. Sabe, você vê uma postagem no blog, você vê uma biografia do autor na parte inferior das postagens do blog. É de onde está sendo povoada. Agora você tem sua foto de perfil bem ali. Você pode clicar sobre isso e ele vai levá-lo para um site chamado gravidade. Então gravidade é um site que permite que você associe uma imagem com um e-mail. Então, quando você deixar um blog comentários ou seu próprio site tem uma imagem para ser associado com o e-mail. Ok, e agora aqui, o gerenciamento de contas aqui podemos configurar uma nova senha. Então, se você quiser alterar sua senha, é aqui que você pode simplesmente fazê-lo de forma rápida e fácil. Ok, e agora uma outra coisinha para, vamos voltar para todos os usuários. Também podemos adicionar novos usuários. Nós clicamos sobre isso. Agora, quando você vê a função aqui, então você pode criar um novo nome de usuário, e-mail, primeiro nome, etc, que você pode definir a função. E agora estamos em suas contas de administrador, então ele tem acesso total. Então, por exemplo, se você contratar um escritor de blog, por exemplo, você poderia apenas ter alguém vindo aqui e mulheres para ser um editor. Então eles só têm acesso a como dizer, a postagem do blog, por exemplo. E por isso é uma boa ideia também criar uma conta de editor para si mesmo e fazer login no seu próprio site como um editor ou um autor. Ok, e apenas deixe a conta de administrador para apenas editar o site, etc., totalmente com você, mas acrescenta outra camada de segurança. Ok, agora, por último vamos vir aqui para as configurações e eu quero descer para promover links. Ok, então agora nós queremos vir aqui e nós queremos clicar em Estrutura Personalizada. Agora, para blogs, eu pessoalmente gosto da estrutura de barra título post blog. Agora você pode usar o nome do post, o que é bom, ou você pode fazer a estrutura personalizada que eu gosto. Não há maneira certa. Não é tão grande de um negócio, mas eu definitivamente prefiro este tipo de estrutura porque ele fornece uma arquitetura de site agradável para o site. Organiza tudo adequadamente sob o blog. Mas é totalmente com você. Mas você definitivamente não quer avião porque é p igual a 1, 2, 3. Isso não dá nenhuma indicação sobre o que é a postagem do blog. E queremos evitar qualquer coisa com datas porque datas são ótimas se estamos produzindo conteúdo sensível ao tempo. Mas se não somos como um site de notícias que não precisamos de datas em nossos euros. Então, de qualquer forma, ir para o blog de barra de estrutura personalizada. Ok. E lá vamos nós. E agora você quer clicar em salvar as alterações. Fantástico. Ok, ótimo. Então agora temos nossos plugins instalados. Agora é hora de instalar o Tema Astra. Então vamos para a Aparência. Vamos aos temas. Agora, por padrão, o WordPress vem com um monte deles já instalados. E eu tenho tutoriais honestamente sobre este canal de cada um desses, se você quiser, confira. Mas novamente, vamos passar por isso e podemos simplesmente ir em frente e excluir cada um desses temas. Mas vamos em frente e primeiro instalar o Tema Astra. Então vá em frente e clique em adicionar novo no topo. Pesquise por temas. Astra. Responda. Boom, bem aqui estava. Clique em Instalar. E vamos em frente e clique em Ativar. Grandes. Agora a próxima coisa que precisamos fazer é por razões de segurança, queremos ir em frente e simplesmente excluir esses outros temas que estão instalados. Não precisamos deles em nosso site. Não vamos usá-los. Não há necessidade de eles estarem. Então vamos em frente e fazer isso. Clique no pequeno ícone. E boom, lá vamos nós. Uma última coisa que eu quero que você faça é habilitar HTTPS. Então, fomos em frente e instalar um certificado SSL em nosso site através do nosso painel SiteGround. Agora só precisamos habilitá-lo. Então você só tem que navegar até onde diz “Optimizador de Psych Run”. E então você quer ir sob ambiente e otimização. E então você só vai querer ter certeza de que você habilita HTTPS. E o que isso faz é forçar uma conexão segura com o seu site. Então, funcionalmente falando, você realmente tem duas versões do seu site. Você tem uma versão não segura, que é a versão HTTP, e você tem a versão segura que a versão HTTPS. E assim, apenas habilitando isso, ele forçará qualquer um que tente acessar a versão não segura para a versão segura. É apenas algo que realmente torna seu site apenas mais seguro e melhor para o usuário final. E você tem qualquer tipo de problema basta vir aqui e habilitar corrigir conteúdo inseguro. Se você está tendo algum tipo de problema. 4. 4 a página de design comece o site: Ok, então nossa quarta-feira está preparada e pronta para ir. Estamos finalmente prontos para projetar um site com o tema Astra. Então eu só queria dar a vocês um contexto sobre minha abordagem, sobre como vamos fazer isso. Primeiro, vamos nos concentrar na página inicial, e vamos transformar a página inicial em um belo menu visual para o site. Em seguida, vou mostrar-lhe como personalizar as páginas individuais do seu site bem como o seu post de blog específico e suas páginas legais. Vou mostrar-lhe como configurar um logotipo, um ícone fabuloso e adicionar várias seções à sua página inicial para fazer um site realmente impressionante que parece ótimo em dispositivos móveis. Então vamos continuar. Vamos começar a projetar nosso site. Então, se você der uma olhada em um site como o que é uma carreira pro.com. O que você vai notar é que esta é a página inicial e esta é literalmente uma página dentro do WordPress que eu criei para ser a página inicial, e então você tem um monte de outras páginas diferentes. Então, por exemplo, se navegarmos até a página do blog, esta é a página específica do blog para o arquivo do blog. Agora, dentro do WordPress, se você quiser ter uma página inicial para o seu site, que é o que vamos estar fazendo. Você tem que criar uma página e ter que ser definido como sua página inicial e outra página, e ter que ser definido como o blog. Então vamos navegar até aqui. Vamos para a leitura e queremos ir para uma página estática. Agora temos que selecionar a página inicial e opor página, mas você vai notar algo. Só temos uma página de amostra. Isso significa que temos que literalmente, literalmente, criar essas páginas. Então vá em frente e clique em páginas, e então queremos clicar em adicionar novo. Certo, então vá em frente e digite a página inicial. Ok? E então queremos que esta seja a nossa página inicial, então é assim que vamos chamá-la. Agora, vá em frente e clique em Publicar. Tudo bem, lá vamos nós. Agora, agora eu quero que você role até aqui, e eu quero que você pule aqui para a sua descrição Meta. E é aqui que você pode dar o título do seu site. Então você quer ter algo onde é um título de site, separador de página e, em seguida, uma descrição de palavra-chave do site. Por exemplo, se dermos uma olhada no site carreira profissional, separador de página, ele planejar, faturar, promover lucro, o que quer que você queira fazer, algo semelhante, ter uma frase de palavra-chave que descreve o que seu site é sobre, então este é a sua descrição do Meta. Então sua meta descrição deve conter várias palavras-chave e frases e ela apenas descreve o que o site é sobre. Então, por exemplo, se eu gravar foi um profissional criativo. Aqui mesmo, crie um site, inicie uma loja online lançada pelo blog. Por que eu tenho essas palavras? Porque isso ajuda a descrever para motores de busca e usuários finais como o que o site é sobre. É sobre criar sites, começar blogs, lojas online, tutoriais gratuitos, esse tipo de coisa. Então é um tipo de arte e uma ciência com sua descrição Meta, mas você quer colocar algo lá e é isso. E então a seguir, uma vez que você tenha sua página inicial lançada, nós temos que voltar e ir para Adicionar novo. E agora nós só queremos fazer exatamente a mesma coisa para o blog. Então vá em frente e digite blog. E ele garante que a estrutura de URL ali mesmo é o seu blogue de barra de nome de domínio.com.br. Vá em frente e clique em Publicar. Lá vamos nós. Ok, então novamente, venha aqui e nós queremos ir até a descrição do Meta. E aqui é onde você quer colocar algo e você não quer que ele seja apenas esta estrutura padrão. Então, queremos dar algo a ele. Por exemplo, com programa de grau teias, eu chamo de site Greer pro blog, estudos de caso, tutoriais e mais como você poderia apenas o que você diz, é baixo? Então, se você tem como uma bolha orientada para café, por exemplo como o café, o café andar. Ok, então separador de página, qualquer conselho, conselho, conselhos e guias, qualquer coisa, você sabe, algo assim. Basta ter um pouco de consideração para a descrição da sua página para suas postagens de blog e para a página inicial. Tudo bem, então agora podemos navegar de volta para nossas páginas. Temos a página inicial, temos o blog. Estamos prontos para ir. Então, uma vez que você configurar os títulos de página e Meta descrições, em seguida, essas páginas são funcionalmente feitas. E então nós podemos apenas vir aqui, voltar a ler e clicar na página estática, homepage, boom, homepage, post page. Eu queria ser a página do blog. E, em seguida, vá em frente e clique em Salvar alterações. Fantástico foi dar uma olhada no nosso site. E lá vamos nós. Então agora temos, agora temos esta página inicial agora está definido para ser a nossa página inicial e estamos prontos para personalizar a aparência e o design do nosso site. 5. 5 imagens de herói e a chamada à ação: Definindo uma imagem de herói e uma chamada à ação. Então vamos começar a projetar nossa página inicial. E então o que eu quero dizer com imagens de herói, este tipo de imagem com este texto e uma chamada à ação, etc. Você pode fazer isso com a Astra. É muito, muito simples. Assim, o primeiro passo no processo é ir para a sua página inicial e você deseja editar a página. E então você quer editar sua página inicial, ok? E aqui, na barra lateral, temos configurações de Asherah, certo? E então aqui é onde você pode ter configurações específicas para esta página específica. E assim queremos desativar o título. Certo, e o que isso faz, desliga isso. Agora, a barra lateral aqui, eu não quero barra lateral na página inicial. Então vamos aqui, os clientes estão definindo e podemos dizer sem barra lateral. Agora, layout de conteúdo, podemos ter caixa de conteúdo caixa de largura total em extensão de largura total. Então queremos que a imagem estique todo o comprimento, certo? Então vamos querer cheio, vamos escrever aqui cheio com contido. Ok? Nós não queremos esticar porque o que esticado faz é eliminar o preenchimento, então tudo fica esticado todo o caminho da esquerda para a direita. Parece super estranho também. Nós não queremos isso. Queremos que seja contido um pouco. E lá vamos nós. E então vamos em frente e agora fazer upload de uma imagem. Então, viemos até aqui e este é o seu quarteirão. Então, clique no sinal de adição e você deseja digitar em alguns casos capa. Agora este é um bloco de capa e agora você tem que fazer upload de uma imagem que você possa encontrar imagens livres de direitos autorais aqui no Unsplash. Então, para este tutorial, eu vou estar fazendo um blog de café, ok? E então vamos em frente e fazer upload de uma imagem. Ok, então eu baixei esta imagem do Unsplash bem aqui. Acho que está muito bonito. Agora uma nota sobre imagens. Você quer diminuir o tamanho deles quando possível. Por exemplo, como esta imagem aqui é cento e quinhentos por cento e quinhentos. É grande, mas não é muito grande porque se uma imagem grande vai cortejar maneira de lentamente, ok? Tudo bem, então aqui, é muito simples. Então, agora sobre esta imagem você pode começar a digitar na Europa chamados ações. Então vou dizer Café, cafeteria, tudo bem. Então vamos apenas dizer conselhos e guias para preparar café. Lá vai você. E então eu quero que isso seja centrado, ok? E vamos deixar assim por enquanto. Então, vamos em frente e clique em Atualizar. Lá vamos nós. Certo, então vamos recarregar a página. Ok, então isso parece bem. Então, há algumas coisas diferentes. Primeiro, quero que a imagem se estenda da esquerda para a direita. Não quero este espaço em branco. Além disso, eu quero um cabeçalho transparente como este. Então, parece que na imagem atrás dele em vez do cabeçalho branco. Como é que fazemos isso? Muito fácil. Então, novamente, temos que clicar na página inicial. Agora estamos editando a página. Então desça aqui. Cabeçalho transparente personalizar o que está habilitando Ok, e a seguir queremos ajustar esta imagem. Então, como ajustamos a imagem dele? Clique nele. Ok, é isso. Agora, quando você clica nele, ele lhe dá um monte de opções diferentes para editar este bloco específico. Então nós queremos vir aqui e queremos mudá-lo para largura total. Lá vamos nós. Agora ele não muda isso neste lado, mas ele muda no front-end. Então vamos em frente e atualizar isso, e vamos recarregar isso. Ok, então agora temos um cabeçalho transparente grandes na imagem se expande da esquerda para a direita. Parece bom. Agora você está tipo, por que está escuro? Como se eu não entendesse. Como por que isso é tão escuro? Bem, é chamado de sobreposição. Ok, então você tem que vir até aqui para a opacidade, e assim você pode baixar isso. Podes transformar isto para o que quiseres, se quiseres ser um pouco sombrio ou o que for. E então eu gostaria, você sabe, se você vai colocar textos em geral, você precisa de sobreposição sobre uma imagem para tornar o texto legível. Mas, novamente, depende da imagem. Então, por exemplo, talvez eu faça esse texto preto ou qualquer outra coisa, mas que seja. Então isso é como o que você tem que descer e mudar a opacidade. Então, se eu abaixar isso só um pouco, vamos dizer, vamos dizer como vamos dar para 0 lá em baixo. Ok, então nós gostamos disso. Vamos em frente e atualizá-los. Ok, e isso parece muito melhor, isso é muito mais legível e não é super escuro, mas é realmente tão simples. Ok, então isso é tudo o que você precisa fazer para adicionar uma imagem de herói muito bonita ao seu site do Azure. Certo, então vamos em frente e ajustar nossa chamada à ação. Então, novamente, este vai ser o seu logotipo aqui no site. E o seu apelo à ação deve ser um apelo à ação como dizer às pessoas para fazerem algo que deveria receber as pessoas para dizerem que você deve explicar de forma rápida e fácil sobre o que os sites e dizer às pessoas o que fazer, para onde ir. Talvez fornecer um botão, e-mail, formulário de opt-in, ou apenas introduziu o site e ter algum título rico em palavra-chave na página inicial. E é isso que vamos fazer aqui. Então deixe-me ajustar isso. Então vamos voltar para a nossa página inicial e deixar-me livrar-me disto. E então chamá-lo de cafeteria, eu vou dizer, vamos dizer, fazer café incrível. Ok? E isso meio que ajuda a descrever o que é o site. E então temos guias de aconselhamento para preparar café. Isso parece bom. Agora, se você quiser mudar as cores, você pode apenas vir aqui e aqui embaixo é onde suas configurações principais estão. Então, se você alguma vez, tipo, se qualquer que seja o seu design que você assistiu, você precisa mudar o texto de preto ou cinza ou qualquer outra coisa. É onde você faz isso aqui, mas eu vou deixar branco para mim porque eu acho branco muito bonito. Deixe-me ir em frente e apenas clique em Atualizar. Tudo bem, então agora a coisa que eu quero ter certeza é que isso é H1. Então H1 significa apenas cabeçalho, cabeçalho, um cabeçalho, cabeçalho 2, cabeçalho 3. Sua tag H1 para mostrar ser apenas uma frase, que é H1 porque este deve ser o título da página. Agora este é um subtítulo, então podemos ir em frente e fazer isso em um título, e podemos fazer isso em um cabeçalho H2. E então vamos centralizar o texto bem ali. E vamos em frente e clique na atualização. E deixe-me recarregar a página. E isso parece melhor. Ok? E agora, se você quiser mudar o estilo da fonte, nós não estamos. Isso é muito simples com Astra. Nós só vamos até aqui para a opção de personalização. E você quer ir navegar para onde diz global. Ok, então você tem que clicar na tipografia, e então nós queremos ir para os títulos. Ok, então agora temos a configuração padrão para todos os cabeçalhos. Então aqui é onde você pode mudar sua família de fontes de cabeçalho para outra coisa. Temos muitas opções diferentes. Novamente, você pode brincar com ele como quiser. Só vou usar Poppins. Muito simples. Lá vamos nós. Ok, então isso parece bom. Então agora eu quero personalizar o H1. Então, o que veio aqui em baixo para cada um? Família de fontes definida para herdar. Herdar significa que está herdando as configurações que temos lá em cima. Então podemos deixar isso como está. Tudo bem, agora eu queria mudar altura da linha, então vamos torná-la um pouco melhor assim. Isso olha para o realmente parece muito melhor. Vamos deixar aí mesmo. Parece bom. Está bem. Então agora normal talvez eu queira que isso seja meio ousado, isso parece bom. E a seguir queremos tornar os textos realmente grandes. Então talvez eu faça algo como 70. E agora isso parece muito bom. Então, temos um forte apelo à ação aqui mesmo. Faça um café incrível. Parece bom com o subtítulo um pouco menor. Gosto do jeito que isso está aparecendo. Então eu vou apenas ir em frente e clicar em Publicar. Ok, ótimo. E então vamos clicar no X. E isso parece muito bom. E assim podemos deixar como está. Uma pequena coisa que você também pode fazer é clicar com o botão direito do mouse e ir para Inspecionar. E agora, quando você inspeciona, você só quer ter certeza de que você tem definido para ser como o que seria parecido em um telefone. Está bem. Assim, você sempre quer se certificar de que, com a equipe do Azure, basta carregar seu site no telefone para garantir que tudo fique bem. Porque às vezes, quando você faz as mensagens muito grandes, ficam bem em digamos, um tablet ou um laptop, mas quando você está em seu telefone, pode ser um pouco estranho, então apenas certifique-se de que tudo parece bem. Tanto o seu laptop como o seu telefone. E isso é realmente tudo que você tem que fazer para personalizar o texto lá em cima. Agora, a fim de adicionar um botão que é super-duper simples, bem como, basta clicar no sinal de mais. Então digita o botão, está bem? E depois há um botão, boom. Ok, e então aqui você pode personalizar o texto do botão. Então compre, vou dizer compre agora. Ok, ótimo. Então agora eu quero tipo de ajustar isso e ter isso um pouco centrado. Agora adicionar um limite aqui é muito fácil também. Então podemos vir até aqui e só temos que navegar de volta aqui. É clicar no sinal de mais, e então você só quer digitar algo que diga botão, ok? E, em seguida, clique no botão. Lá vamos nós. Agora o botão, você tem duas opções diferentes. Então, se você clicar em um, você está editando o especificamente o botão. Se você clicar na área de bloqueio, agora você está editando o bloco. Ok, então só queria saber como tudo funciona. Então, se eu clicar no bloco aqui, posso dizer algo como se inscrever, certo? Vamos dizer subscrever, boom, assim. Agora você está tipo, eu quero centrá-lo um quarteirão. Você tem que clicar na seção de bloqueio. Ok, não desista do pão porque você vai ser como, para onde eu mandei para você? Eu não entendo. O que é porque você tem que clicar na seção de bloqueio. Então vamos nos mudar para cá, então podemos alinhar o centro, e então é isso. Ok, então quando você coloca o bloco, então você tem um monte de opções diferentes para como você quer mudar o visual a sensação e o estilo do botão deste aqui. Então, se você quiser ter um estilo padrão não definido contorno, você pode simplesmente mudar as coisas como taxa apropriada lá. Então eu vou clicar em Atualizar. Deixe-me recarregar o mesmo. Ok, então agora eu tenho um botão transparente. Então, por que isso é transparente? Porque eu defini o estilo padrão é delineado tão rápido e fazer esse preenchimento. Então aqui podemos mudar a cor canta para o botão em si. E então, novamente, que cor é essa imagem de fundo? Você precisa escolher algo que combine um pouco. Talvez eu vá com um preto um pouco. Nosso, você sabe, nosso LED, o texto branco. Vou deixar o botão preto. Lá vamos nós. 6. 6 mensagens de boas-vindas: Tudo bem, agora o que eu quero fazer é continuar construindo o corpo do site. Então eu vou começar com uma pequena mensagem de boas-vindas agradável que meio que explica o que os sites sobre. Então isso é apenas algo que eu pessoalmente gosto de fazer. Gosto de ter uma chamada à ação no topo de qualquer um dos meus sites de informação. Então bem abaixo aqui, um parágrafo rápido de uma a três frases que explica o que o site é sobre e um pouco mais de detalhes, mas apenas ajudou novamente, digitalizável ajuda a chamar a atenção das pessoas e pessoas que saber instantaneamente se esta palavra é para eles ou não, etc E assim com WordPress e astra, isso é super-duper simples. Então, novamente, voltamos à nossa página e tudo o que tenho a fazer é adicionar um parágrafo. Então você só tem que clicar neste sinal de mais e você só quer adicionar em um parágrafo. E então tudo o que você tem que fazer é escrever literalmente algo. É isso. Então eu já fui em frente e escrevi algo. Então vamos em frente e fazer isso. Vou colar isso aí. Ok, então agora eu quero que este aqui seja o título, ok? E então eu não quero que isso seja apenas um parágrafo padrão, então vamos torná-lo um título. E eu quero que seja H2. Então quero que isto seja censurado. Lá vamos nós. E vamos em frente e ousar isso. Muito bem, vamos actualizar e ver como isto está a parecer. Ok, então deixe-me recarregar a página. Ok, então isso parece bem. Então você está, se você está se perguntando, bem, como eu adiciono velocidades? Como de novo, como eu faço isso? Então, não é tão largo. Há algumas opções diferentes que você pode fazer para mudar isso. Ok, então primeiro, novamente, para adicionar qualquer tipo de espaço, novamente, você só tem que adicionar em outro espaçador. Então, de novo, vamos aqui. Faremos isso e adicionaremos um espaçador. E lá vamos nós. Mova isso para cima e mova isso para cima bem ali. O que é atualizar isso, ver como isso parece. Certo, então isso nos deu um pouco mais. Vamos reduzir isso só um pouco, talvez assim. Certo, vamos atualizar isso e dar uma olhada rápida. Ok, então isso parece legal. Talvez, você sabe, o que quer, você sabe, você pode ajustar como quiser, mas é assim que você adicionaria espaço a diferentes elementos. Ok, então agora em termos de largura do site, onde você vai para mudar isso? Só estou recarregando a página rapidamente. Está bem. A alteração da largura da página. Um par de coisas diferentes. Primeiro, eu volto a isto. Ok, então nós viemos aqui para Ashley configurações ter uma largura total contida. Então, se você for até aqui e você vai toda a largura esticada e nós vamos atualizá-lo. Verá o que acontece como o Texas se estende de ponta a ponta? Isso parece muito estranho. Então, primeiro, certifique-se de que é toda a largura contida. E então isso significa que ele foi ativado aquele contêiner. Agora, você pode ajustar a largura do contêiner para a página. Para fazer isso, novamente, fácil, temos que ir para personalizar. E uma vez que você clicar em personalizá-lo, ele vai abrir. E podemos vir aqui para a Global. Queremos ir para onde diz “contentor”. Se você é como, o que é um contêiner? Um recipiente é apenas meios como a largura da página. Ok, então agora mesmo aqui nós podemos tipo de brincar em mudança como quisermos. Então, se quisermos que seja realmente amplo, podemos fazer isso. Se quisermos ser um pouco mais estreitos, podemos ir em frente e fazer isso. Eu recomendaria algo que não é muito largo, não muito estreito, apenas algo no meio como que parece bem aqui. Poderíamos sempre aumentar o texto se quiséssemos fazer algo assim. Mas novamente, é seu site totalmente com você, o que você quiser fazer. Então, se você quiser como minimizar o máximo possível. Assim, com esta opção de contêiner, você pode alterar o contêiner para diferentes aspectos do seu site. Como se tivéssemos a página, postagens de blog, layout, layout de arquivo. E assim você pode mudar a largura como quiser aqui. Então isso é tudo que você tem que fazer para mudá-lo. Então vamos em frente e publicar isso. Tipo cola que parece. Então, se eu for, um padrão na verdade é bastante amplo, então é cem, duzentos pixels. Eu gosto de mantê-lo um pouco como se nós apenas vamos mantê-lo como 900 de uma reta e 900, eu acho que isso é bom. Ok, então vamos em frente e publicar isso. E assim que faz, que a largura 900 vai clicar em X. Ok, então lá vamos nós. Então agora temos a nossa pequena configuração de mensagem bem aqui. Ok, então ele veio para cá. Agora, se quisermos mudar o tamanho do texto, é muito, muito simples, então destacamos o que queremos. E aqui, vai ter tipografia. E então você pode vir aqui e mudar para o que quiser. Então, se você quiser que ele seja médio, você pode apenas fazer isso de forma rápida e fácil ou você pode apenas torná-lo um tamanho personalizado também. E então o que faz isso um pouco menor? Vamos dizer 18. Tudo bem, vamos em frente e atualizar isso. Muito bem, vamos recarregar isto e ver como fica. Ok, então isso está chegando muito bem. Certo, então acho que vou fazer isso um pouco maior. 22. Ok, bom. Tudo bem, então nós temos que todas as larguras definidas fazer isso um pouco maior. Ok, vamos em frente e atualizar isso. E vamos dar uma olhada rápida para ver como isso está indo junto. Certo, então isso é um pouco grande demais, na verdade. Então, vamos descer aqui 18, atualizar isso. E lá vamos nós. Ok, então isso está bom. Está bem. Então eu gosto disso. Digamos, você sabe, tipo similar de legível, não muito pequeno, não muito grande. O que parece estranho. E então estamos prontos para ir. Então agora vamos continuar adicionando elementos à nossa página inicial. 7. 7 menu visual: Tudo bem, então o que eu quero fazer é transformar a página inicial em uma espécie de menu visual. Eu acho que a mídia visual é um layout agradável para qualquer blog, site de estilo orientado à informação. É como o que eu faço aqui no site carreira pro.com, onde temos o melhor em pedaços de conteúdo que crescem depois de termos muito competitivos, tutoriais, últimas postagens de blog na parte inferior tornou-se e-mail opt-in formulário, et cetera. Este é um layout agradável para o site porque ele introduz o site e introduz o conteúdo. Então, como começamos? Então a primeira coisa que precisamos fazer é adicionar um novo plugin. Então vá para seus plugins, bom, Adicionar novo e você quer encontrar um pouco disso é empilhável. Lá vamos nós. Então construtor de páginas empilháveis, blocos de Gutenberg. Vamos em frente e instalá-lo. Agora, se você está se perguntando o que diabos é Gutenberg? Este é Gutenberg. Esta página, este editor de blocos que temos usado, na verdade chama-se Gutenberg. Tudo bem, fantástico. Então Gutenberg está instalado. Deixe-me ir em frente e recarregar a página. Recarregar a página só porque, em seguida, os blocos são ativados ou um axônio para isso. Certo, então vamos começar. Então eu vou adicionar um pequeno título como este. Ok, então eu gosto de manter minhas seções um pouco de um título bem aqui, então é, é digitalizável, ele chama sua atenção, etc. Então vá em frente e clique no sinal de mais. E se clicarmos em Procurar Todos estes são todos os seus blocos, você vai saber. Observe que são blocos coloridos brilhantes. Estes estão vindo de empilháveis. Agora, o que eu quero são colunas. E então o que as colunas fazem é que se divide, tudo bem, se divide em pequenos blocos. Podemos adicionar conteúdo. Agora a largura da coluna aqui, vou escolher esta no meio. Vou fazer disto um botão e depois este é o título. Tudo bem, então vamos em frente e adicionar conteúdo. Então, houve clique no parágrafo e então vamos dizer que comprar e cerveja vai dizer algo assim. Ok, então por baixo está em nossa profundidade. Em guias de profundidade. Lá vamos nós. Agora eu vou fazer isso uma etiqueta H2. Então vamos aqui. E o rumo H2 parece bom. E vou manter esse do jeito que está. E vamos em frente e adicionar aqui um botão. Então digite o botão e eu vou adicionar o botão empilhável bem ali. Agora que o botão está preto lá em cima, queremos que este botão combine. Então queremos que este botão seja preto também. E então aqui, primeiro, podemos mudar o texto do botão e diz qualquer botão para acessar, digamos que podemos dizer Ver, todos os caras. Ok, eles podem estar bem com este botão. Você pode vincular a uma página de categoria ou você pode ter uma página dedicada em seu site, no entanto, você deseja configurá-la para que você possa simplesmente adicionar isso. Então aqui você pode colocar o euro que você quer. Tudo bem, então agora vamos mudar a cor disso. Então nós temos a cor do botão bem aqui. Eu vou fazer isso preto. Lá vamos nós. Isso parece bom. Certo, agora podemos mudar a tipografia. Eu quero que a tipografia corresponda ao site, então eu tenho usado pop-in, então apenas mude para qualquer tipo, qualquer tipo de fonte que você está usando para que ele corresponda. Então, porque você quer ter como suas fontes para todas corresponderem, você quer que uma fonte seja o corpo e, em seguida, uma fonte para ser seus títulos. Então você quer fontes, você não quer três ou quatro. Você não quer que as coisas sejam como um estilo de fonte diferente, etc. Certo, então vamos dar uma olhada nisso. Então, estou gostando do jeito que isso parece. Vamos ver se há mais alguma coisa que possamos fazer em termos de estilo aqui. Então, se viermos aqui, temos gordura e como o que acontece quando as pessoas passam o mouse sobre o botão. Tudo bem, e então nós temos aqui estofamento vertical, raio de fronteira. Então, se você quiser fazer o botão um pouco mais redondo, podemos vir aqui talvez um pouco. Certo, então vamos atualizar isso. E vamos apenas dar uma olhada, apenas olhá-lo. Vamos ver como fica. Tudo bem, então isso parece bom. Então eu preferiria que houvesse um pouco mais de espaço acima deste elemento. Eu gostaria que isso fosse um pouco mais maior, ousado, apenas se destacar um pouco melhor. Então vamos em frente e consertar isso. Tudo bem, então primeiro as coisas, eu quero ir aqui e nós vamos adicionar um espaçador. Tudo bem, então adicionando o nosso bom e velho espaçador mão-dandy, minimiza que, apenas, nós só precisamos de um pouco de espaço, não muito. Dê algum espaço para respirar entre os elementos. Lá vai você. Ok, bom. Tudo bem, então vamos em frente e fazer isso maior. Então, o tamanho padrão do texto, talvez eu queira ter isso em negrito no padrão. Quero que isto seja talvez grande. Posso vir aqui e ter um tamanho personalizado. Talvez. Vamos mudar isso para algo como 45. Tudo bem, lá vamos nós. Tudo bem, e então podemos ousar isso, ver como isso parece. Vamos em frente e atualizar isso. E vamos recarregar isto. Ok, então isso é, parece legal. Acho que vou me livrar daquela tigela que não combina. Vamos deixar assim. Deixe-me ir aqui para me livrar disso. E vamos mudar essa configuração de cor para talvez um cinza, e então eu vou para a cor personalizada. E então eu talvez eu quisesse apenas ser um pouco cinza, apenas uma pitada Grey. Então, você sabe, se destaca um pouco. Vamos recarregar isso. Ok, então isso está bom. Talvez eu possa fazer isso um pouco maior. Nós vamos com, vamos com 50. Veja como isso parece. Ok, então eu meio que quero que isso encha um pouco mais do espaço, então ele tem 54. Tudo bem. Vamos dar uma olhada. Tudo bem, isso parece bom. Ok, então agora nós temos uma pequena mensagem de boas-vindas e nós temos uma pequena introdução para o título bem aqui sobre o que esta seção vai ser aqui em adição de um botão, bem aqui, este é Lincoln para a página inicial. Mas, novamente, você pode mudar onde quiser que esse link seja vinculado. Então eu estou tendo este olho ver todos os guias. Então, talvez você possa criar uma página dedicada inteira em todos os guias que você tem, ou você pode vincular a uma página de categoria ou o que quer que você tenha essa flexibilidade. Então agora vamos adicionar algumas imagens abaixo do link para guias em profundidade. Ok, então agora vamos adicionar imagens específicas para um site que tem um pouco de uma descrição para acompanhar. Então a primeira coisa que quero que você faça é vir aqui, não aqui, ok? Porque este aqui está associado a este bloco. Portanto, certifique-se de selecionar um novo bloco onde ele está em sua própria seção aqui. A razão é porque isso é dividido ao meio. Portanto, não queremos adicionar imagens apenas sob esta seção aqui. Quero que seja a seção inteira. De qualquer forma, com empilhável porque instalamos bat torna muito, muito fácil. Então, podemos vir aqui e dizer caixa de imagem. Tudo bem? E então o que a caixa de imagem faz é permitir que você exatamente literalmente o que você vê. Você passa o mouse sobre ele e dá um pequeno título agradável e descrição. Tudo bem, então como você adiciona imagens? Então, basta clicar no quadrado e agora você pode selecionar a imagem que você deseja. Então eu já fui em frente e selecionei, já instalei um monte de imagens no meu site que você possa ir em frente e em seu próprio tempo e fazer isso. Então eu vou adicionar essas imagens de forma rápida e fácil. Lá vamos nós, e lá vamos nós. Ok, então vamos em frente e fazer uma atualização rápida. Veja como isso parece. Recarregue o site. Tudo bem, então isso parece bem, então isso está muito bonito. Temos guias aprofundados. Boom, temos imagens diferentes ali, e podemos começar a lançar um título agora mesmo, aqui mesmo. Ok, então, ok. Comprar vai dizer compra, fabricação de cerveja. E então vamos dizer fatos divertidos sobre nossos fatos divertidos, bom ou não ponto de exclamação. Tudo bem, então agora aqui nesta seção é onde você pode editar a forma como cada bloco parece bem? E então nós viemos, eu vou clicar neste, por exemplo. Tudo bem, então aqui você pode mudá-lo para os blocos para ser simples ou básico. Você pode vir aqui para o estilo. Você pode alterar a maneira como as colunas funcionam. Então, se você quiser dois ou três, então, por exemplo, se você for tipo, eu não quero três, eu quero, bem, é aí que você pode vir aqui e mudá-lo. Você pode mudar também a altura. Então, se você quiser que seja um pouco mais quadrado ou mais longo ou o que seja. Então eu acho que eu gostaria que fosse um pouco mais quadrado para 95. Ok. Agora o raio da fronteira, ok, então aqui está. Você pode mudar as coisas um pouco. Então talvez um pouco arredondado, não muito contorno de sombra. Então, se você quiser que essas coisas apareçam um pouco da página, você pode dar sombra. E lá vai você. Então você pode mudar a forma como as coisas estão alinhadas, etc. Ok, então agora com a seção de imagem, então a imagem grande padrão aqui, você pode alterar coisas específicas como a cor de sobreposição do mouse, então sobre a cor de sobreposição, obviamente o que acontece quando vocês passam o mouse sobre a imagem. Eu, pessoalmente, gosto da forma como é por padrão, onde dá uma sombra agradável, sobreposição escura, parece ótimo. E então, você sabe, então você pode vir aqui e mudar o legenda e títulos. Por exemplo, aqui temos o título, então todos os títulos são H4. E então novamente, você tem que prestar atenção a isso porque este é H2, este é H2. Então, o que deveriam ser? Estes são um sub-título desta seção. Então honestamente como estes devem ser h3, para ser honesto com você. Então vamos em frente e mudar isso, mudar tudo para H3. Aqui. Nós podemos mudar o tamanho se você realmente quiser ser detestavelmente grande ou pequeno. Então nós poderíamos mudá-lo assim como ele vai ser obter 28. Isso parece legal. Ok. Podemos mudar a cor da fonte como queremos aqui. E, novamente, no seu tempo livre, você pode contar e pular aqui e editar as coisas como quiser. E então é realmente simples porque aqui você clica nisso, então isso é bem aqui é onde você pode adicionar em uma URL. Então, por exemplo, se você tem uma página de categoria sobre a compra estão se preparando ou qualquer outra coisa, ou você apenas tem um blog específico posts que você deseja vincular. É onde você pode fazer isso aqui. E assim podemos nos livrar de mim. Vá em frente e atualize isso. Vamos dar uma olhada rápida. Tudo bem, então agora no filme mouseover CSS subtítulo descrição. Então nós temos que obter um dar ainda temos que dar uma pequena descrição rápida em um subtítulo se quisermos órbita. Apague isso também. Se você realmente não quer colocar nada aí, tudo bem também. Então você pode vir até aqui e apenas retroceder tudo isso e atualizar isso. E cada carga. E vamos ver, bum, nada. Certo, então totalmente com você. Eu meio que gosto que essa descrição vem à tona. Não gosto do subtítulo, mas gosto da descrição. Então, totalmente com você, o que quer que você queira fazer se você só quiser deixar isso tão velho como este e as pessoas passam o mouse sobre ele e então ele pode se ligar a algo. Não fui em frente e fiz isso. Então, você sabe, é seu design, seu site, totalmente com você. É assim que você pode adicionar esses pequenos blocos úteis para tornar seu site mais atraente visualmente. 8. 8 página de posts no blog: Agora a próxima coisa que eu quero adicionar em é nosso livro de posts mais recentes a partir de uma perspectiva de design, eu acho que seria muito bom apenas para quebrar esta seção e, em seguida, ter um como um separador de imagem. E, em seguida, nossos posts mais recentes, eu acho que seria um pouco mais visualmente atraente. Então vamos em frente e fazer isso. Então vai ser da mesma maneira que nós adicionamos a imagem aqui em cima. Só temos que fazer a mesma coisa. Então nós viemos aqui, ok, então embaixo de nossos blocos bem aqui, nós queremos chegar ao sinal de adição e você quer navegar até onde ele diz cobertura. Agora você quer fazer upload de uma nova imagem, ok? E então eu já fui em frente e fiz isso. Então eu tenho essa imagem bem aqui. Consegui esta imagem do Unsplash. Eu o redimensiono para torná-lo um pouco menor. Então eu estou indo para ir em frente e clique em select. Lá vamos nós. Agora, novamente, clique na imagem em si. Rápido aqui, vá para a largura total. Lá vai você. Agora é largura total. E então, pessoalmente, o que eu faria nesta seção aqui é como talvez ligado a um produto ou curso específico, ou talvez você tenha, talvez você tenha, vai ter uma página de recursos ou uma página de curso em seu site. Nós gostamos de listar os melhores cursos de café na Udemy, Skillshare, etc Como um afiliado, qualquer coisa, ou seu próprio produto, o que quer que seja. Então vamos apenas digitar eu vou digitar violar seu pro aprender mais. Está bem. Então, novamente, eu quero que isso certifique-se de que este não é apenas um parágrafo. Eu quero que isso seja um título, e eu quero que seja H2, e eu quero que isso seja centrado. Tamanho padrão normal, ok, então vamos apenas dizer normal. Tudo bem, vamos tornar isso um pouco mais visualmente atraente assim. Ok, e então aqui eu poderia destacar isso e então eu posso fazer isso em como um link específico e link para uma página. E assim não está feito. Sim, definitivamente queremos acrescentar um pouco mais. Tudo bem, então aprenda a preparar um ótimo café com o nosso, BY, aprendendo com nossos cursos favoritos em, aprendendo com nossos cursos favoritos ou cursos, vamos deixar simples assim. Ok, deixe-me ir em frente e clicar no sensor. Tudo bem, então isso parece bom. Vamos em frente e atualizar isso. E vamos ver como isso saiu. Então vamos recarregar a página. E lá vamos nós. Maravilhoso. Então isso parece fantástico. Então talvez estas sobreposições um pouco escuras. Acho que gostaria de mudar isso. Então, de novo, como você muda isso? Você tem que clicar na imagem. Certo, navegue para baixo. Vá encontrar onde diz opacidade. Vamos trazer isso para baixo de 50. Vamos fazer isso uns 15 ou 14. Certo, vamos atualizar isso assim que votarmos. Tudo bem, então isso é incrível. Então lá vamos nós. Certo, agora temos nossos guias detalhados. Temos uma seção onde podemos ligar para talvez como um curso como um afiliado ou algo assim. E agora é hora de adicionar em nossas últimas postagens de blog. Tudo bem, então agora é hora de adicionar em nossas últimas postagens de blog. Então eu pessoalmente fui em frente e publiquei um monte de posts que eu publiquei para agora. Você provavelmente não tem nenhuma postagem de blog, então você pode ir em frente e fazer isso mais tarde, mas eu só quero mostrar como ele funciona quando você estiver pronto para adicionar blogposts à página inicial. Primeiro, precisamos adicionar um título. Então isto, temos o nosso pequeno título lá. Precisamos fazer algo similar bem embaixo, então combina com o site. Então, de novo, vá aqui. Sinal de mais. E eu vou para colunas, ok? E então colunas avançadas e grades em, e eu vou selecionar essa outra vez. Vou deixar isto vazio desta vez, mas aqui vou adicionar um texto, está bem? E por isso, ultimamente, tudo bem, mais recente, mais recente, qualquer coisa. Está bem. Então lá vamos nós. Então, pelo que vejo do quarteirão, tudo bem, lá vai você. Seja qual for. Agora, você pode mudar isso para o que quiser, o que corresponde ao seu site. Então, de novo, H2. Agora vamos ter que combinar. Então, vamos vir até aqui. Tamanho personalizado 54 e é negrito. Certo, então vamos fazer isso. Então eu vou em frente e ousado é Boehm. Eu vou dizer grande, vamos fazer este 54 para que a fonte corresponda ao acima. Lá vamos nós. Ok, e agora eu quero vir aqui e adicionar mudar isso. Está bem? E então o que fizemos aqui? Nós meio que fizemos isso um pouco mais leve, cinza como um não preto, não jet-black, mas apenas algo um pouco mais leve. Então venha aqui, vá aquela cor personalizada. Lá vamos nós. E faça algo assim. Ok, lá vamos nós. Então agora vamos recarregar para garantir que tudo esteja no lugar. Ok, então está tudo bem. Então, novamente, como se você quiser ter mais espaço entre este elemento ou este elemento, você pode ir em frente e fazer o separador. Acho que isso parece legal. Então, de qualquer forma, eu vou adicionar nas últimas postagens do blog. Então, novamente, nós não queremos colocar este aqui porque este bloco, ok, isso, isso está se ajustando para esta seção bem ali. Queremos a nova seção bem ali. Ok, então agora o que é realmente adicionar em nossas postagens de blog? Então, novamente, certifique-se de que você está em uma nova seção e um novo bloco. Você não quer editar apenas esta seção. Então vamos em frente e clique no sinal de mais e você só quer digitar no post. Lá vamos nós. Posts osso. Lá vamos nós. Parece ótimo. Então vamos para o estilo e eu vou mudar isso para talvez uma coluna de quatro, ok? E eu realmente gosto do jeito que isso está aparecendo. Ok, então este é todo o conteúdo de demonstração que eu acabei de enviar rapidamente e facilmente. E então eu definitivamente recomendo se livrar da maioria dessas coisas. Então, vamos entrar no assunto. Tudo bem, então a imagem do recurso, a imagem do recurso é isso. Queremos a categoria de imagem de feição lá em cima. Sim, isso é meio útil. Quero dizer, totalmente com você se quiser exibir a categoria ou não. Então eu acho que vou deixar isso, mas eu queria categoria para ser preto, não azul. Tudo bem. E agora temos o título bem ali. Sim, queremos que o título seja exibido. Absolutamente Venha aqui, mude a tipografia, faça com que corresponda ao seu site. 25, tudo bem. Certo, então vamos nos livrar disso. Está bem? Ok, agora, a próxima coisa que precisamos fazer é H3. Então isso é bom porque essa é a nossa etiqueta H2 bem ali. Então estes devem ser h3 está bem. Então vamos voltar e clicar no bloco novamente. E agora vamos minimizar esse trecho. Não quero um trecho. Trecho significa, como o texto que vem por baixo, que é completamente inútil. Isso é minimizar essa meta-descrição. Mostrar autor, não mostrar data, Não mostrar comentários. Não, eu realmente não me importo com nada disso. Tudo bem. Então agora queremos mudar a cor do texto para preto. Está bem? Tudo bem, vamos minimizar isso. Desculpe, o que vem para o título? Parece que é, sei lá, preto. Lá vamos nós. Ok, e então nós temos o link Leia Mais bem aqui. Então personalizado ler mais link. Então, podemos dizer Clique para saber mais, ler mais, o que for. Ou se não quiser nada, pode se livrar dele. Você pode simplesmente clicar nisso e, em seguida, as pessoas podem clicar no título das postagens do blog para ver o conteúdo da rivalidade. Então, de qualquer maneira, vamos em frente e clique em atualizar. E vamos recarregar o mesmo e ver como isso parece. Tudo bem, ótimo. Então agora temos links para um blog específico posts. Então, novamente, se você quiser se livrar da categoria totalmente até você, eu acho que vou me livrar da categoria que eu tipicamente, como você pode ver na Web, digamos criar protocolo, eu pessoalmente gosto de manter as coisas super simples. Então eu só gosto de ter, para mim, eu gosto apenas ter a imagem eo título pessoas que clicam no pedaço de conteúdo e obter mais sobre ele. Então nós os carregamos. E sim, acho que está ótimo. Então talvez se pudermos fazer esta fonte um pouco mais pesada, ela é fina e simplesmente não combina tão bem. Então foi apenas saltar de volta para o título. Está bem. Então o tamanho, talvez possamos torná-lo um pouco menor. Ok, e vamos para a tipografia e o peso padrão vai dizer negrito. Vamos ver como isso parece. Torne o texto um pouco menor, negrito. Oh, sim, parece muito melhor. Certo, então lá vamos nós. Então agora temos nossos guias detalhados. Boom, nós temos nossa pequena seção onde podemos promover como um link para um produto afiliado, etc. E agora temos nossas últimas postagens no blog. E então vamos terminar a página inicial com eu posso enviar um formulário de aceitação por e-mail ou alguma chamada à ação final. 9. 9 e-mail: Tudo bem, então vamos em frente e adicionar uma chamada final para ação e imagem bem na parte inferior, sentado logo acima do rodapé. Então este é definitivamente o lugar onde os pontos de conversão mais altos em um site porque as pessoas atingem seu site e, em seguida, eles rolam para baixo e, em seguida, ele chega ao fundo. Ter algo para eles, ter um apelo à ação, direcionar as pessoas para algum lugar, seja lá o que for. Está bem. Pode ser um e-mail opt-in formulário produto sobre mim, o que quer que seja. É só dar às pessoas algo para fazerem quando chegarem ao fundo. Você poderia deixar apenas o blog aqui, tudo bem, mas definitivamente é melhor ter algo. Então o processo vai ser exatamente o mesmo que adicionar esta imagem e adicionar esta imagem. Certo, então vamos ao assunto. Então, vamos voltar para o nosso editor, clicar no sinal de adição, e queremos adicionar uma capa. E então eu já fui em frente e baixei esta imagem de grãos de café que recebi do Unsplash. E então basta obter sua própria imagem novamente, como redimensioná-la. Então é um 2000 por 2000, não muito grande. Tudo bem, então vamos ter certeza que isso é largura total e agora podemos escrever nosso chamado à ação aqui. Então eu vou dizer como obter o nosso curso de 377 dias sobre como fazer a melhor bebida fria que você já teve. De lá vamos nós. Talvez ele vai, talvez ele levaria este curso de sete dias grátis de sete dias. Vou levar isso e vou ousar isso. Então esse tipo de estourou um pouco. Tudo bem, vamos em frente e clicar em cima D. Vamos recarregar a página e ver como isso parece. Sim, isso parece fantástico, ótimo. Então eu realmente gostei da maneira que esta sobreposição olha para os grãos de café onde é escuro e apenas parece realmente agradável. Agora precisamos adicionar um formulário como um e-mail opt-in, o que quer que seja. Então, qualquer provedor de serviços que você deseja usar, esta é apenas minha conta demo para converter kit, mas isso funciona da mesma forma com qualquer tipo de provedor estar em Lake Miller maneira, MailChimp, um weber, etc. E então só precisamos de um formulário. Então eu vou usar o formulário em linha bem ali. E então eu vou até aqui para a Claire. Vou escolher este. Ok, então agora aqui dentro do seu editor de e-mail, você pode mudar as coisas como quiser. Como você vê melhor. Você sabe, você pode vir até as configurações e apenas brincar com tudo. Este não é converter kit tutorial, então eu vou apenas deixá-lo como é assim. E assim, de qualquer maneira, na verdade, deixe-me ir em frente e mudar essa cor do botão vai apenas torná-lo algo um pouco mais. Lá vamos nós. Ok, então eu vou incorporar. Agora queremos me comer em HTML. E eu sei que você diz, Oh, mas há WordPress, bem, você tem que baixar o plugin kit converter. Só vou usar o HTML. Tudo bem, vamos clicar nisso. Copiar. Lá vamos nós. Tudo bem, então agora queremos voltar aqui. Tudo bem, então o que eu quero adicionar no sinal de mais? Eu tenho HTML, digite espuma HTML, clique com o botão direito do mouse em colar. Tudo bem, vamos em frente e pré-visualização. Então você diz: “Bem, David, é uma saída para a esquerda. Como você faz isso no centro? Como o que diabos? Ok, calma. E vá aqui. E vamos para, vamos voltar para o formulário HTML. Tudo bem, então eu vou ter que fazer é digitar os sensores. Então, tudo bem, triângulo olhando coisa centro. Tudo bem, lá vamos nós. E então o último marcado, então estes são chamados de caras tags. Certo, então esse é o texto central. Então temos centro bem ali, chegar ao fim, fim coletivo em uma etiqueta de fechamento. Ok, lá vamos nós. Clique em Pré-visualização. Lá vai você. Agora está centrado. Vamos em frente e clique em Atualizar. Vamos voltar aqui e recarregar. E isso parece ótimo. Então, sim, a página inicial parece fantástica. Bem, guias de mensagens bem-vindas. Boom, como um marketing afiliado ali, talvez, a partir do blog, em seguida, e-mail opt-in formulário sentado bonito na parte inferior do nosso site. 10. 10 menu de favicon de logotipo: Ok, então agora nós geralmente falando, temos o nosso design da página inicial corretamente. Então vamos corrigir o cabeçalho e vamos corrigir o rodapé agora. Então vamos começar com o cabeçalho. Então o que precisamos fazer é criar um logotipo para o nosso site. E um site que eu pessoalmente gosto de criar logotipos rápidos simples é na verdade canva.com. E então eu vou estar usando link profundo modelo de miniatura do YouTube. Você pode usar qualquer modelo que você quiser. Não é assim tão importante. Então nós queremos apenas vir aqui e apenas usar as ferramentas disponíveis para você para criar um logotipo. Então eu vou para a mensagem e eu vou para a direção. E eu vou estar ligando para dizer como cafeteria, como vamos fingir que eu tinha como café house.com ou café house.com, o que quer que seja. Certo, então temos nosso título aqui. Primeiro, queremos o jogo do Fontan. Então eu queria fazer Poppins ousado. Ok, lá vamos nós. Então eu vou fazer isso um pouco maior. Lá vamos nós. Tudo bem, então agora podemos deixar como mensagens, mas podemos adicionar algo. Então vá para os elementos. Vou digitar algo como café e ver o que aparece. Certo, vamos passar por isso e dar uma olhada rápida. Oh, isso parece fantástico e é grátis. Fantástico. Então, alguns desses você tem que pagar por isso e quando eles custam como um dólar, então, você sabe, é o seu logotipo. Então, se você acha que é importante, abra a lei e gaste um dólar para obter os gráficos que você precisa. Mas este aqui está libertado, então eu posso ir em frente e usar isso. Então faça com que pareça assim. Ok, bom. E então uma coisa eu quero adicionar 2s, talvez como uma linha abaixo disso. Então vamos para a fila e ver o que aparece. Ótima. Ok, então eu acho que eu vou realmente adicionar este livre aqui mesmo. Quero dizer, eu vou torná-lo um pouco menor para que a mentalidade não seja tão grossa e pesada. Tudo bem, então purê para a esquerda. Tudo bem, então vamos expandir isso todo o caminho para cobrir a palavra. Tudo bem, então deixe-me minimizar isso. Acho que gostaria de fazer isso um pouco maior. Lá vamos nós. Está bem. Tudo bem. Então vamos levar isso para lá. E bom. Então eu gosto do jeito que isso parece. Então reduza isso aí. E reduzimos isso a talvez lá. - Sim. Ok, então isso parece bem. Então a primeira coisa que precisamos fazer agora é baixar a imagem. Então faça o download como um PNG. Png significa que será a imagem da mais alta qualidade salva. Certo, então vamos arrastar e soltar isso na nossa área de trabalho. Agora a primeira coisa que precisamos fazer é cortar todo esse espaço em branco. Então vamos para Editar imagem. Agora, novamente, você pode fazer isso com qualquer editor de imagens que você quiser. Vou cortar a capota ali mesmo. Não precisamos de todo esse espaço lá. Não precisamos de todo esse espaço aqui. O mesmo com esta área aqui. Boom. E vamos nos livrar disso ali mesmo. Ok, então pegue um pouco mais, isso é hop bem ali. Ok, bom. Está bem. Agora vá para redimensionar, e queremos redimensionar nosso logotipo. E o logotipo não deve ser tão grande. Como se isso literalmente significa ser como 200 e algo pixels como logotipos são pequenos, ok? Você não precisa de um logotipo grande e complicado. Está bem. É 260. Ok, ótimo. Sim, literalmente, isso parece ótimo. Então, o rápido o x eu vou clicar em Salvar. Agora a questão é que o logotipo é como tem um fundo branco. Então vamos usar um serviço chamado Remover BG, removida RBG, então remova fundo. Fácil. Vamos para aqui. Carregue a sua imagem. Boom, boom. Feito. Está bem. Agora, isso usa aprendizado de máquina para remover automaticamente o espaço em branco. Lá vamos nós. Podemos baixar nosso logotipo, certo, e arrastá-lo e soltá-lo lá. Deixe-me ir para Renomear o logotipo da cafeteria. Lá vamos nós. Ok, então agora vamos realmente adicionar nosso logotipo a um site então nós temos que ir para Personalizar. Oh, certo, e nós queremos ir para a Global, e então nós queremos ir para cima não global. Queremos ir para o cabeçalho. Lá vamos nós. Ok, então nós queremos navegar para a identidade do site, e aqui é onde podemos fazer upload de um logotipo. Então vamos em frente e selecione Logotipo e arraste e solte ou logotipo no lugar. Então temos 260 por 53. Isso parece bom. Alt textos diria apenas que é o logotipo. Clique em, clique em Selecionar. Tudo bem, deixe-me chegar lá, Cortar Imagem e ver como isso parece. Tudo bem, isso parece muito bom. Agora você está tipo, espere, por que ele diz My WordPress? Bem, só tenho que remover isso. Então venha aqui, exibe um título. Não, lá vamos nós. Então agora o logotipo foi removido. Tudo bem. Então agora, se você quiser fazer o logotipo menor, etc, o que você tem que fazer é de novo, apenas volte aqui. E, novamente, basta editar sua imagem novamente e apenas torná-la menor como você entender. Então, se eu quisesse mudar isso e torná-lo ainda menor, como vamos dizer, vamos dizer tarde para 26, ok? Você só tem que vir aqui, editar a imagem. E então, novamente, brinque com isso até que você esteja feliz com a maneira como seu logotipo específico procura seu site. Acho que isso parece legal. Vou deixar como está, assim. E é isso. Então é assim que você adiciona um logotipo. Então, em seguida, vamos editar nosso menu. Ok, então vamos em frente e ajustar nosso menu agora porque isso é bom olhar, mas podemos torná-lo muito melhor. Então vamos para o nosso painel WordPress, vá para os menus Aparência Goodson. Agora nós realmente temos que definir um novo menu porque agora nós temos um menu primário e um menu de rodapé. Temos essas duas seções onde podemos adicionar um menu, mas não temos um menu. Então, o que é ótimo? Então eu vou chamar este menu primário e certifique-se de que este é o menu primário selecionado bem ali. Vá em frente, clique em Criar menu. Lá vai você. Ok, então veja tudo. E eu vou adicionar na página do blog. E eu vou em frente e salvar o menu. E vamos recarregar isto. Está bem, parece fantástico. Tudo bem, então vamos continuar. Então vamos personalizar isso um pouco mais para que possamos ir até aqui e clicar em personalizar. Tudo bem, as primeiras coisas primeiro. Então, se chegarmos ao cabeçalho e, em seguida, o menu primário, este é o lugar onde temos opções adicionais para o menu. Então, por exemplo, Asch é realmente útil porque o último item no menu, se você quiser adicionar um botão, lá vai você, então você pode mudar a cor e brincar com ele como quiser. Ou você pode adicionar uma função de pesquisa, ok? Ou você pode adicionar em um widget o que quiser. Então eu vou levar para a função de busca lá. Agora você pode notar que é azul. A razão pela qual é azul é porque todos os hiperlinks no site estão definidos para ser a cor azul. E assim você pode alterar as cores do link, mas que este item vai ficar azul o tempo todo, dependendo da cor que você escolher. Então, de qualquer maneira, vamos navegar até aqui. Global, por baixo de cores, cores de base, cor de link, modo que quando a cor é azul, então se você quiser mudá-la para outra coisa, este é o lugar onde você meio que pode saltar para o seu próprio site e tipo de mudar as cores ao redor. Então talvez eu faça algo um pouco mais. Veja, você quer algo que se mistura um pouco para que não corresponda realmente. Então, mantenha tudo bem, eu vou mantê-lo azul assim. Isso é sutil, tudo bem. Então deixe-me clicar em Publicar, certo? Então, a próxima coisa é, eu não gosto de quão fino esse texto é. E assim esta é uma espécie de uma configuração Astra Pro pessoalmente, a fim de tornar os itens de menu lá em cima ousados. Sabe, CSS, você pode realmente chegar perto, mudar você mesmo. E então eu tenho um pouco de CSS que acabei de escrever. Então, seu cabeçalho principal, menu, item de menu, tamanho da fonte, pesos da fonte. E assim podemos apenas adicionar isso em nosso CSS personalizado. Agora, se você pagar por Astra Pro, você pode ajustar o menu Apenas de forma rápida e fácil. Se você não gosta que você tem a versão gratuita como eu faço, então você tem que apenas fazer isso, a fim de tornar o item de menu um pouco mais WordPress. Interessante, pouco à frente e adicionar em suas próprias marcas R1 terminou. Então deixe-me só talvez isso quando abrir meu logotipo e bem ali, eu vou fazer a xícara de café. Estou com o tecido, então vamos minimizar isso. Então isso parece, ok, isso parece bom coisa um resultado. E você realmente vê que outra coisa, como dizer que como o ícone, lá vamos nós, ok, e eu vou salvá-lo na minha área de trabalho. Lá vamos nós. Não salvar. Tudo bem, então a seguir tudo o que temos que fazer é personalizar. E você só precisa navegar de volta para onde você alterou seu cabeçalho. Então vamos para Header, dizer identidade. Então nós temos o nosso logotipo lá, dizer ícone aqui. Clique nisso, arraste e solte-o no lugar. Ok, clique em selecionar. Isso parece bom. Ok, vamos clicar em Cortar imagem. E lá vamos nós. Agora temos um pequeno ícone para associar a nossa marca. 11. 11 sobre a página de contato: Página razoável para o seu site. Então seu site precisa de uma página sobre. Um link para a página Sobre deve ir no menu principal na parte superior ou no rodapé na parte inferior do seu site D A página Sobre é sobre o site. Não é sobre você. Você deve incorporar por que você pessoalmente tem a autoridade para escrever este site, mas ninguém se importa com você de página dupla, é como o que é este site sobre? Então, de qualquer forma, vamos em frente e criar uma página sobre. Então vá adicionar novo. Certo, então novamente, como você pode ver, gosto de dizer algo como bem-vindo ao site, et cetera, et cetera. Então deixe-me ir em frente e fazer isso. Bem-vindo ao café. Ok. Tudo bem. Então, agora queremos ter certeza de que o documento é o que diz sobre. Não queremos que seja uma URL longa. Nós só queremos mudar isso para ser sobre, ok? Ok, então vamos em frente e clicar em Publicar na verdade. Então eu quero mostrar a vocês um par de configurações diferentes. Então vamos abrir. Tudo bem, então agora, por padrão suas páginas têm uma barra lateral. Eu pessoalmente, É totalmente até você se você quer ou não ter uma barra lateral nas páginas, Eu pessoalmente não teria. Assim, com o Azure, você pode criar cada página personalizada da mesma forma que fez com a página inicial, que eu recomendaria pessoalmente apenas seguir o mesmo processo. Então eu venho aqui para atributos de página, por exemplo. E você quer vir aqui para a barra lateral. Você pode ter que não ser barra lateral, Ok, Em seguida, cabeçalho transparente, você deseja ativar o cabeçalho transparente. E então isso, você quer desativar o título exatamente como fizemos, exatamente como fizemos para a página inicial. Então desative o título, ok, então venha aqui, clique no sinal de mais. Vá para a cobertura. Agora vá para nossa Biblioteca de Mídia, por exemplo, vamos usar essa imagem que usamos anteriormente. Certo, vamos clicar nesse. E novamente, vá para isso, vá para cheio com um anexo, diga como bem-vindo ao café. Ok. E então, você sabe, voltar aqui, talvez eu possa mudar essa sobreposição para algo um pouco diferente ou como uma cor verde ou o que seja, apenas dar às pessoas assim que elas estão em uma seção diferente do site, Talvez um pouco mais de laranja, algo assim. E assim, e então ele aqui embaixo, podemos continuar adicionando no texto, como o texto vai, vai aqui. E vamos clicar em Atualizar. Tudo bem, e então deixe-me abrir esta página. Agora podemos dar as boas-vindas ao café e seguir o mesmo processo que fizemos para a página inicial. Agora recomendaria fazer isso para cada uma de suas páginas, como sua página sobre, página de contato, etc. Porque você pode torná-lo realmente bonito, impressionante olhando site rapidamente e facilmente, fazendo isso uma página de contato para seus sites. Então eu fui em frente e já meio que pular o cabeçalho para nossa página Fale Conosco. Mais uma vez, basta seguir este passeio para a página inicial. Enviando a imagem, etc. Então o que precisamos fazer agora é eu quero adicionar um formulário aqui que as pessoas podem simplesmente preencher rapidamente e facilmente. E como fazemos isso? Primeiro, vamos passar pela página de contato. Então, a página de contato, você absolutamente precisa de uma página de contato. O ponto de uma página de contato é fornecer uma maneira para as pessoas enviarem uma mensagem para você. Então você deve vincular a sua página do Facebook ou Instagram. Você dá uma biografia rápida sobre o que as pessoas devem esperar. Você deve fornecer um formulário. Todas essas coisas boas devem ir dentro da página de contato e também a estrutura de URL. Eu, pessoalmente, deixaria como contextos cortar contato. Ok? E então voltamos aqui de novo. Então você pode de novo, então eu tenho o título da página escondido e vamos passar aqui para permanente, então tudo bem, apenas mude e faça com que diga contato. Agora você quer ter certeza de que você vem aqui e ajustar suas informações conforme apropriado. Então eu mudaria isso para algo como a página de contato da cafeteria. Então eu posso colar separado como se eu precisasse entrar em contato, interrogação, qualquer coisa assim. Então vamos em frente e atualizar isso. Ok. Então, quando você é apenas seguir junto, sentiu configurar esta página como apropriado. Ok, então vamos adicionar um formulário bem abaixo aqui. Tudo bem, então para fazer isso, eu vou ter que navegar de volta para WordPress. E vamos para Plugins e, em seguida, adicionar um novo plugin que eu quero instalar é chamado WP formulários. Ok, então formulários WP, é bom instalar. E vamos clicar em Ativar. Fantástico. Ok, então vamos criar nosso primeiro formulário. E queremos entrar em contato simples. Crie um formulário de contato simples. Ótimo, agora podemos editar cada uma dessas seções. Vou mudar isto e tornar isto simples. Ok? Não há necessidade de ter nome e sobrenome. Vamos manter isso simples. Eu gostei do jeito que parece, que parece bom para mim. Tudo bem, então você deseja navegar para onde ele diz Configurações, e então você deseja navegar para notificações e notificações aqui, envie para o endereço de e-mail. É aqui que você pode alterar o e-mail que é enviado para você. Então agora ele é enviado para, enviar para o e-mail de administrador. Se você quiser, mude isso no mouse, basta pular aqui e alterá-lo como quiser. E é basicamente isso. Então fazer é clicar em Salvar e ir para incorporar. Tudo bem, então agora formas wb de tem isso, esses dois pãezinhos meio que você passa por isso. Acho que é um pouco irritante. Eu, pessoalmente, apenas gosto de usar um código curto. Então clique em Usar código curto. Lá vamos nós. Temos o nosso código curto. Botão direito. Copie isso. Certo, então vamos voltar para nossa página de contato. Podemos ir para a página de edição aqui. Tudo bem, então aqui novamente, eu daria alguns contextos como hey, obrigado, obrigado pelo seu interesse no site, et cetera, et cetera, et cetera. Ok, então agora queremos clicar no sinal de mais e você deseja digitar o código curto. Agora, código curto. Em seguida, clique com o botão direito Tão simples. Clique em Atualizar. Certo, então vamos recarregar essa página e ver como isso está parecendo. Tudo bem, ótimo. Então, você sabe, novamente, desenvolva isso um pouco mais apropriadamente e então o formulário parece bom e funciona. Então, novamente, deixe-me apenas mostrar-lhe a página de contato para um site criar produto com. Novamente, isso é apenas manter super simples desde que eu tenho amigos, blá, blá, blá. Você também pode entrar em contato conosco através da nossa página do Facebook. Perguntas, afiliados, parcerias de afiliados, etc Aqui está o formulário, Philadelphia, e você está pronto para ir. Você poderia fazer a mesma coisa aqui. Então, você sabe, novamente, tipo, se você é como, Hey David, tão perto do topo, como eu, novamente, você tem que adicionar em seu espaçador. Ok, então nós iríamos para o espaçador, então bum para cima, bem ali. Ok, então se você quiser ter um pouco mais de espaço para respirar entre seu parágrafo de texto nesta imagem aqui. Você pode fazer isso rápido e facilmente assim. E é assim que eu abordaria a página de contato. Basta seguir o exemplo. Parágrafo de introdução rápida ligado ao Instagram, Facebook, qualquer outra maneira que as pessoas podem entrar em contato com você. Seu e-mail, número de telefone, o que achar importante. E isso é tudo. Isso é tudo que você tem que fazer para entrar na página de contato. 12. Design de rodapé 12: Ok, então agora foi ajustar o pé ou em nosso site. Então, o rodapé é uma seção onde como divulgações ir, política de privacidade Termos de Uso, esses tipos de páginas. Então vamos entrar nisso. Então, primeiro, o que é clicar em personalizar? E quando você clica em Personalizar com Astra, você realmente tem um monte de opções diferentes para o seu rodapé. Então, primeiro, temos widgets de rodapé. Então agora os widgets de rodapé estão desativados. Mas se quisermos ligar os widgets de rodapé, podemos ir em frente e fazer isso. Então aqui você pode adicionar itens diferentes se você está tipo, whoa, de onde diabos isso está sendo controlado? Pessoalmente, você tem que ir para widgets de aparência e, em seguida, uma área de widget de rodapé 12341234. Então, se você quiser ir em frente e adicionar coisas aqui, você pode ir em frente e fazer isso. Eu, pessoalmente, não vou estar usando widgets por apenas quero instruí-lo. Então você tem controle total e opções sobre o que quer fazer. Ok, então vamos para o rodapé Bar. Agora. Eu gosto disso, você sabe, eu pessoalmente os guardo. Novamente. Eu tudo o que eu mantenho meu rodapé é simples quanto possível. Então, primeiro, quero mudar este fundo. Então eu não sou um barco louco. Quero que seja uma bela cor preta. Está bem. Não quero que seja uma cor estranha. Preto, cinza preto. Tudo bem, então aqui em cima é onde podemos mudar as coisas. E então vamos voltar atrás. Vamos nos livrar de todo esse C. Veja, para que possamos dizer direitos autorais. Podemos dizer direitos autorais, cafeteria. Está bem? E então o que eu pessoalmente quero fazer é adicionar na minha política de privacidade Termos de uso todas essas páginas ilegais diversas. Então nós temos que navegar de volta para nossas páginas e nós temos que ir em frente e criar essas páginas. Mas eu quero criar esses links para essas páginas primeiro. Então deixe-me entrar aqui e vou digitar a política de privacidade. Eles vão termos. Lá vamos nós. E diremos assim, fechamentos, o que for. Tudo bem, então vamos em frente e destacar isso e eu vou dobrá-lo. E então vamos adicionar um link e vamos criar um novo link. Está bem? Então você pode simplesmente adicioná-lo em nossos sites. E vou chamar esta página de privacidade. E então eu vou fazer isso novamente para esta página bem aqui, negrito, e então estes termos. Lá vamos nós. E o último é a divulgação. Incrível. Lá vamos nós. Certo, agora temos nossas ligações. Então agora chegamos aqui e queremos editar como HTML. Lá vai você. Então você apenas leva isso para cima. Lá vamos nós. Lá vamos nós. Lá vamos nós. Ok, copie BOM, volte aqui, cole. E lá vamos nós. Então agora temos um rodapé bonito onde tudo é adicionado sutilmente. Parece bom. Talvez possamos entrar aqui e nos livrar desse separador ali. Tudo bem, então sim, eu acho que parece legal. Então, agora temos nossos termos de política de privacidade em divulgação. Vamos em frente e clique em Publicar. E lá vamos nós. Então, para um novo blog, isso é o que eu definitivamente recomendaria começar, eu vou apenas criar algo rápido e simples ao ponto como seu site se desenvolve ao longo do tempo, se você quiser saltar até que eles possam criar vários widgets e tem uma variedade de páginas diferentes links no rodapé, você pode ir em frente e fazer isso. Mas para um novo site dentro que não tem um monte de conteúdo. Eu faria algo assim. Mantenha-o super-duper, simples. 13. 13 páginas legais: Suas páginas legais. Então, agora que definimos as páginas legais no rodapé, você realmente tem que ir em frente e criar essas páginas porque ele vai aparecer como página não encontrada. Então, estas são realmente páginas que você precisa entrar e publicá-lo. Então vá para Pages, bom, Adicionar novo. E então eu só quero que você se certifique de que a página que você vai adicionar. Então, por exemplo, vamos para, vamos para a política de privacidade aqui. Ok, Então, por padrão, WordPress vem com seu próprio rascunho de política de privacidade padrão. E então o link que eu uso era privacidade no rodapé bem aqui. Então vamos em frente e mudar isso. Volte para fora o URL Slug, torná-lo privacidade. E então podemos deixar assim. Vou clicar em publicar. Lá vamos nós. Ok, então por exemplo, agora recarregue para dizer e nós temos uma política de privacidade, ok? E então você só precisa passar e fazer isso para cada uma dessas páginas. Você definitivamente precisa de uma política de privacidade em uma página de termos e termos de uso. Ok. E assim, o objetivo das políticas de privacidade apenas para divulgar como seus sites coletaram dados e informações. E então os termos são como, quais são os termos de serviço que as pessoas concordam em cumprir ao visitar seu site. E então a divulgação deve ser sobre qualquer coisa que, você sabe, como seu ensaio ganha dinheiro, por exemplo, com quaisquer conflitos de interesses, esse tipo de coisa iria sob as divulgações. Mas, no mínimo, você definitivamente precisa de privacidade em termos. Isso é praticamente tudo. E então você tem que entrar aqui manualmente cria essas páginas você mesmo. Ok? Então, novamente, volte e entre aqui, Adicionar novo, e novamente, verifique o link, verifique o link que criamos. Então isso se chamava termos, certo? E assim é chamado de termos lá. Então você pode coletar termos, termos de serviço, ok? Termos, condições do traço. As pessoas também chamam esta página, seja lá o que for. Ok. Então você tem que criar uma página. E eu tenho outro guia no meu site, criativo pro que você pode conferir apenas páginas legais do Google, web say criativo, bro. E você deve ser capaz de encontrá-lo, como escrever suas páginas legais e o verdadeiro guia para iniciantes, novamente, eu não sou um advogado e que definitivamente quero consultar com um especialista jurídico à medida que seu negócio cresce. Mas só para ajudar você a começar, você sabe, isso apenas cria algo. Novamente, não é tão importante com um novo site que não tem conteúdo, mas a longo prazo, é algo que você definitivamente precisa cuidar. Só quero que esteja ciente disso. 14. 14 design de blog: Ok, então agora é hora de editar nossos blogposts e a página de arquivo do blog. Então eu fui em frente e adicionar, basta adicioná-lo a página sobre e a página Contato para o menu e ir em frente e fazer isso também. Então isso parece bom. Então, de qualquer maneira, vamos pular para a página do arquivo do blog. Certo, então este é o nosso arquivo do blog. Eu acho que parece muito bom apenas por padrão, mas há algumas coisas que podemos mudar. Por exemplo, como este texto aqui chegando. Então, de qualquer forma, vá para personalizar. E sob personalização você tem a seção ou bloco, ok? E assim você tem arquivo em postagens individuais. Então Archive significa como você é barra página blog. Então vá para o arquivo. Aqui é onde você pode mudar as coisas. Então, por exemplo, se você não quiser que a categoria seja exibida, basta clicar nela. Autor. Você não quer que o autor seja exibido, basta clicar nele e lá vai você. Ok, e então postar trecho de conteúdo, conteúdo completo. Infelizmente, você tem que exibir um trecho que é este. Não há outras opções, trecho de contorno super completo. Então eu vou deixar como um trecho. E é basicamente isso. Ok, e então vamos em frente e clicar em publicar. Lá vamos nós. Incrível. Tudo bem, então agora podemos editar esta página específica. E agora estou editando a página do blog de barra. E por isso aqui temos diferentes configurações Astra. Então, se você quiser, novamente, se você quiser ter, desativado o cabeçalho ou você deseja remover a barra lateral, você pode fazer isso. Mas, pessoalmente, eu gosto do jeito que parece nativamente fora da caixa. Eu acho que parece decente para um blog não precisa ser super-duper complicado. Agora, esta seção está sendo alimentada por sua seção widget. Então, novamente, vão para aqui e vão para Aparência e cabras, vocês widgets em vermelho aqui, barra lateral principal, aqui é onde vocês têm tudo por aqui. Então, o que deve ir na barra lateral? Bem, nós definitivamente não precisamos de um botão de login para o nosso site aqui. E então nós só queremos ir aqui e nós só queremos remover um par de coisas diferentes. Realmente, a única coisa que eu pessoalmente, ao incluir a barra lateral, seria fazer links para suas páginas de arquivo, páginas de categoria. E isso é um recente post categorias e, em seguida, qualquer tipo de exibição publicidade um e-mail opt-in formulário. Está bem. Esse tipo de coisa é o que eu incorporaria. Então deixe-me ver como isso parece agora. Certo, então lá vamos nós. Assim, você pode ter suas categorias estão em suas postagens recentes, e-mail formulário de aceitação ali mesmo, e publicidade, o que você quiser. Então isso é mais ou menos como você ajusta a página do blog. Vamos adicionar pão ralado ao nosso site. Então, migalhas de pão são realmente úteis para postagens de blog. Ele dá uma arquitetura de site agradável para o seu site, ajuda aranhas motor de busca tipo de rastreamento e indexar páginas diferentes e apenas ajuda as pessoas a entender onde eles estão em seu site. Então, por exemplo, site criativo pro.com aqui, isto, estes são pão ralado, ok, então é apenas útil para o usuário final e não é tão difícil de adicionar. Então, de qualquer forma, vamos adicionar pão ralado a uma postagem de blog. Então, a primeira coisa que precisamos fazer. Vamos voltar para a guia do CEO. Tudo bem, então eu quero ir para a aparência de busca. E queremos ir às migalhas de pão, e queremos habilitar migalhas de pão. Lá vamos nós. Tudo bem, então mostre a página do blog, Sim, negrito, última página, negrito, sim. Taxonomia para mostrar em pão ralado. Quero mostrar as minhas categorias, está bem? Então eu quero que as categorias apareçam, ok? E assim as categorias aparecem lá. E agora podemos ir em frente e clicar em salvar alterações. Agora, se voltarmos para nossos posts e recarregá-lo, você vai notar que nada muda. Isso é porque nós realmente temos que adicionar a migalha de pão. Então, ok, então vamos para migalhas de pão Yoast tudo se o Google usar pão ralado deve ser a primeira página de resultados. Tudo bem, agora a coisa que só precisamos pegar é o código curto, certo? E assim aqui, WP SEO, osso de pão ralado, clique com o botão direito Copiar. Tudo bem, então vamos em frente e adicionar um novo plugin. Então é boa aparência. E vamos para Plugins. Vamos adicionar novo. Tudo bem, então vamos para PY, RC agora PRC, onde vamos RP, por que CWP? Lá vamos nós. Então vá em frente e clique em Instalar. Lá estamos nós. E vá em frente e clique em Ativar. Fantástico. Então o que isso faz é adicionar uma pequena seção logo acima das postagens do blog. Então vamos para configurações e, em seguida, PR, YC, WP. Agora constante no topo, copie e cole em nosso código curto. Lá vamos nós. Tome isso como P-I-C-O estava pulando para aqui. Boom, lá vamos nós. Ok, e clique em salvar as alterações. Tudo bem, então vamos dar uma olhada rápida. O que é recarregar a página. Tudo bem, então isso parece bom. Então vamos nos livrar de todas essas outras coisas. Então agora eu vou para personalizar. Oh, bem dentro. Então eu quero ir para o blog e eu quero ir para Single Post. E vai dizer que quero esconder a categoria. Digamos que quero esconder o autor. Quero esconder os comentários. Lá vamos nós. Então isso parece, que parece muito bom. Ok, então vamos em frente e clicar em Publicar. Ok, bom. Tudo bem, então agora estamos prontos para ir. Então agora nós também podemos adicionar em Lake uma divulgação. Se você quisesse fazer isso. Você vê alguns sites que estão envolvidos em marketing de afiliados sempre têm como uma divulgação no topo, você pode dizer algo como, nós somos suportados pelo leitor, links suportados, links para o produto que podemos ganhar, como pode, podemos ganhar com links para produtos. Obrigado por ler mais, ler, ler nossa divulgação para mais. Você. Algo tão simples como isso. Vamos em frente e clique em salvar alterações, e vamos em frente e recarregar o mesmo. Ok, então isso parece terrível. Então, como nós, como ajustamos isso? Ok, então primeiro as coisas, queremos ter algum espaço, então queremos usar algo chamado intervalo. Br Slash. Então, só temos que acabar com isso. Isso é chamado de “tag break”. E então vamos em frente e clique em salvar as alterações. E vamos recarregar o site. E o que isso faz dá-lhe um pouco mais de espaço. Certo, então podemos adicionar mais um. B são cortados. Lá vamos nós. E um por baixo também. Br Slash. Lá vamos nós. Br Slash, lá vai você. E clique em salvar as alterações. Vamos olhar para isso e ver como isso está saindo. Ok, então eu não sei se está bem. Então eu meio que gosto que este seja um pouco mais perto. Vamos clicar nisso. Lá vamos nós. Ótima. Ok, então agora eu meio que quero que este texto seja um pouco menor, para que possamos adicionar algo chamado uma pequena etiqueta, ok? E então nós apenas fazemos isso pequeno e, em seguida, fechamos a tag com barra pequena. E o que isso faz é que ele torna o texto menor para que ele não se misture com o parágrafo. Temos lugar. Isso parece muito bom. Ok, então agora é como, bem, está tudo fora para a esquerda. Há qualquer maneira de fazer o centro de tudo como, claro, sem problema. Então, novamente, que é uma cabra lá em cima e nós digitamos o sensor. Está bem. Em seguida, chegar ao fim e fechou a coisa toda com sensor. Então, corte no centro. Lá estamos nós. Está bem. E, em seguida, clique em salvar alterações. E então podemos recarregar. E lá vai você. Então agora você tem um pouco de migalhas de pão agradável, adicioná-lo ao topo, dá e eu digo arquitetura, e você tem essa pequena divulgação. E então, novamente, é como se você quiser vincular a sua página de divulgação, como você faz isso? Bem, você tem que usar HTML aqui. Não muito difícil. Está bem, acabei de te mostrar, só te mostrei a todos como se faz. Então ele iria apenas para páginas. Está bem. Você simplesmente pula em páginas. Opa, errado. Está bem, deixa-me ir adicionar novo. Tudo bem, então vamos por aqui. Podemos digitar como este fechamento. Tudo bem, deixe-me ousar é destacar isso. Está bem, deixa-me colocar o meu site. Lá vamos nós. Boom. E, em seguida, clique aqui, edite como HTML. Lá vamos nós. Então podemos levar isto aqui. Só não precisamos do parágrafo, só precisamos disso. Ok, a seção forte bem ali. Lá vamos nós. Oh, tudo bem, lá vamos nós. Copiar. E então nós podemos vir aqui e nós podemos apenas apoiar esta divulgação e copiar e colar tudo em osso. Então você tem uma marca forte bem ali. Lá vamos nós. Então clique em salvar as alterações e recarregar. E agora a nossa divulgação é uma ligação adequada à nossa página de divulgação. Agora, por favor, enfatize não copie o P o parágrafo das pinturas. Não precisamos disso. Não copie isso. Copie apenas esta seção do meio. E lá vai você. Certo, então não é muito técnico. Há um pouco para ele, um pouco de coisas que você meio que precisa entender o que as marcas de quebra e centro. Agora é super complicado, mas como uma vez que você está feito, você está feito. E agora isso parece muito bom. Então temos migalhas de pão e temos uma boa divulgação que diz, hey, você sabe, qualquer coisa, você sabe, você sabe, para cumprir quaisquer leis e regulamentos. E lá vai você. Certo, algumas postagens no blog, dicas. Então eu quero apenas terminar esta seção com apenas cobrindo amplamente falando, o que, como abordar o seu blog. Certo, primeiro, você tem uma página de arquivo de blog. Eu definitivamente recomendo exibir a imagem do recurso na página de postagem do blog. Agora, adicionar uma imagem de feição é muito simples. Vamos para Edit Post, e vamos entrar no assunto. Tudo bem, então vamos minimizar tudo isso para que seja muito fácil de olhar. Ok? Então agora embaixo aqui você tem algo chamado imagem de feição. Aqui é onde você pode carregar uma imagem de feição e o que a imagem de feição faz. Ele associa a imagem com a postagem do blog. Agora é muito bom fazer isso dentro do blog, ok? Porque isso torna mais visualmente interessante e mais fácil para as pessoas navegarem pelo site de forma rápida e fácil com essas imagens específicas. Também é útil porque na parte inferior direita aqui contra você tem imagens sendo exibidas ou imagens de recurso. Mas como você me notar, para mim pessoalmente, Eu não tenho imagens de recurso sobre o pedaço real de conteúdo e eu recomendo que você faça o mesmo, porque você sabe que este o post do blog. Quero dizer, se você quiser, é totalmente com você, mas eu pessoalmente não gosto de ter a imagem porque apenas empurra todo o conteúdo para baixo, não é particularmente útil. E então, novamente, podemos entrar e ir para a postagem do blog. E então bem aqui, você pode ir para configurações astro e você pode desativar, desativar a imagem do recurso, ok, clique em atualizar. E então o que isso vai fazer é que é apenas Oculto, ok, Ele só é atingido e quando as pessoas realmente abrir as postagens do blog, mas ainda está disponível quando as pessoas estão na página do blog barra. Então temos um arquivo visual agradável e atraente do blog. E quando as pessoas realmente abrem a parte do conteúdo, boom, elas entram diretamente no conteúdo também. Ok, então de qualquer maneira, agora é você ajustar os textos e qualquer coisa dentro de uma postagem de blog é simples. Ok, novamente, com um Azure, você tem que ir para personalizar. E então você tem que ir para a Global e depois topografia, ok? Então topografia base bem aqui. E assim aqui está o tamanho da fonte. Se você quiser aumentar o tamanho da fonte, você pode fazer isso. Se você quiser mudar a linha, pendure em coisas separadas apenas um pouco mais para torná-la demais. Só um pouquinho. Isso ainda é demais. Vamos descer até lá. Está bem. Algo assim, o que seja. Está bem. E assim você pode apenas brincar com a forma como o conteúdo parece como você quer. Então talvez eu faça 17. Ok, isso é bom e grande, legal e legível, etc. Então deixe-me ir em frente e clicar em Publicar o k. Tudo bem, então isso vai acontecer. Você ajusta o texto. Agora, com blogs, você tem que organizar tudo sob uma categoria. Definitivamente não recomendo sem categoria. E então, quando você publica um pedaço de conteúdo bem aqui, ele vem para cá. Categorias. Você pode adicionar uma nova categoria. Eu definitivamente recomendo com um blog. Basta começar com quatro categorias. É só para escolher quatro. Então eu entendo que este é um blog de café. Eu escolheria como, você sabe, comprar guias, guias de fabricação, fatos e então outra coisa, você sabe, nosso equipamento, qualquer coisa, você sabe, escolher quatro categorias que você pode preencher com constante rápida e facilmente. Você não quer, você não quer criar uma categoria diferente para cada postagem de blog. Isso é loucura. Sim, como com o site anseia pro.com, eu só tenho sete categorias sobre isso. Sites como construtores de sites, nomes de domínio , hospedagem web, conteúdo, marketing, esse tipo de coisa. Então coisas que são ricas em palavras-chaves e relevantes para o site, isso é o que você quer, ok, como uma ou duas palavras longas títulos de categoria. E isso é tudo que você tem que fazer. Ok? E então vamos apenas vir aqui. Vamos pular de volta aqui. Outra coisa que você pode fazer também é entrar em seus posts e entrar em suas categorias. E assim, bem abaixo das categorias aqui, é aqui que você tem todas as suas categorias e você pode adicionar novas categorias a partir daqui, bem como dentro da seção de postagem do blog. Então, de qualquer maneira, por exemplo, se eu tivesse como grãos de café, eu criaria uma nova categoria. E então eu vou chamar isso de feijão qualquer coisa. Clique em adicionar nova categoria. Eu posso abrir isso. E então, como aqui, eu posso entrar aqui como uma descrição pesada desta categoria específica, se eu quiser. E então aqui com Yoast, você pode mudar a maneira que isso realmente parece. Diga, arquivos de grãos de café. Isso está tudo bem. Então, como o melhor ick, tudo, todo o conteúdo, todo o conteúdo relacionado são tudo sobre, são todos sobre grãos de café, tudo o que você sabe, você pode dar um bom título de SEO. E então apenas sendo uma página de arquivo de categoria, blá, blá, blá, tipo muito robótico. Você tem um pouco mais de personalidade, ok? E isso é tudo o que você tem a fazer com relação às suas categorias, etc. 15. 15 estrutura de posts do blog: Então eu fui em frente e atualizei a categoria de grãos de café sem categoria. Ok, então o que eu fiz funcionalmente foi navegar, minimizar estilo, permalink. Lá vamos nós. Categorias, ok, Então eu só tê-lo marcado fora como grãos de café e também com categorias, certifique-se de adicioná-lo a uma categoria só você não quer adicionar um pedaço de conteúdo para 23 categorias, um post de blog para uma categoria. E agora, se clicarmos em grãos de café bem ali, boom. Ok, então agora estamos na página da categoria D para isso. Deixe-me apenas recarregar esta página. Lá vamos nós. descrição dos grãos de café vai aqui. Ok, então isso está sendo alimentado por isso aqui. E assim, você pode hipervincular as coisas como quiser, etc. E assim isso é realmente útil porque agora, quando as pessoas visitam o seu site, eles podem clicar nesta categoria do que há nesta página dedicada só está relacionado a esta categoria. E você pode criar uma boa descrição esperançosa para esta página de categoria aqui mesmo. Agora, em termos do conteúdo real para o blog, Não se esqueça, como você está usando o editor WordPress, então você tem acesso a todos os blocos diferentes que temos vindo a usar este tutorial. Então eu definitivamente me certifico de dividir seu conteúdo em seções diferentes. Ok, Então, por exemplo, eu faço isso um H2 bem ali e você pode verificar a estrutura de suas postagens de blog lá em cima, ver como ele diz título H2. Ok, e então finja que isso é outro pedaço de concentrado lá. E vamos apenas dizer que eu vou acabar com isso e fazer isso talvez sua própria pequena seção bem aqui. Então, tudo bem, eu vou levar isso e eu vou fazer isso um H3. Então, indo em seguida H3, ok? E então podemos dar uma olhada nisso para que você só queira ter certeza de que o esboço do documento tem uma estrutura lógica. Você não quer ter este H2, então este é um. Sabe, você não quer fazer isso. Então H2 novamente significa cabeçalho. Ok, então vamos em frente e atualizar isso. Vamos ver como isso parece. Eu recarrego a dizer, sim, lá vamos nós. Ok, então é assim que você meio que rompe as coisas com diferentes títulos específicos. Agora, porque nós instalamos empilhável, nós também temos acesso a um bloco de água realmente útil. Então deixe-me ir em frente e adicionar um daqueles blocos que eu realmente gosto. Então, chegamos aqui, você pode digitar algo chamado recurso, e então temos uma caixa de recurso bem aqui. E assim isso é realmente útil para como marketing de afiliados. E então eu vou apenas dizer como o título do produto vai aqui, então nós temos uma boa descrição e você pode adicionar uma imagem do produto ali. Então eu posso fazer este estilo básico. Podemos vir aqui e mudar as coisas como quiser. Ok, então venha aqui para a cela, deixe-me descer aqui para o contêiner. Lá vamos nós. Então contorno de sombra de raio de fronteira. E eu acho que isso parece muito legal. E então eu vou apenas clicar em uma imagem e vamos apenas adicionar uma imagem aleatória. Vou adicionar este. Ok, deixe-me ir em frente e selecionar isso. tudo bem, então isso parece bom. E nós viemos aqui para a imagem. Ok, então deixe-me fazer isso quadrado ou círculo ou uma bolha, o que você quiser fazer. Então, de qualquer maneira, deixe-me ir em frente e clique em atualizar. Está bem, é recarregar a página. Certo, então lá vamos nós. Agora temos uma pequena caixa de produtos. Ótimo para como recomendar produtos e serviços por ter algo realmente, realmente se destacar. Agora, uma última pequena coisa que podemos fazer é também adicionar em postagens relacionadas. E então deixe-me apenas voltar rapidamente para o seu site, criar um produto, vir e apenas mostrar-lhe o que eu quero dizer. Então, se nós formos aqui e nós apenas abrir este site construtor blog posts que eu tenho. Então, se chegarmos ao fundo aqui, este é um post relacionado no blog. Para adicionar isso, eu uso algo chamado jetpack, que é um plugin do WordPress. Então vamos apenas para plug-ins. E vamos adicionar um novo OSEP. Mochila a jato lá em cima é mochilas a jato ali. Jetpacks já ativos. Está bem. Portanto, certifique-se de que você tem jetpack instalado. E então nós viemos aqui e você vai ter que montar mochila a jato por conta própria. Então deixe-me ir em frente e fazer isso. Tudo bem. Então deixe-me ir em frente e aprovar. Está bem. Então, uma vez que você começa tudo configurar um jetpack, você só vai ter que criar uma conta WordPress. Você provavelmente será apresentado com uma página onde você pode gostar de upgrade pago, et cetera. Mas como uma vez que você acabou de criar uma conta, jetpack já está instalado. Então, de qualquer forma, você deve apenas navegar de volta para o seu site. mochila a jato está pronta para ir. E tudo o que você faz é clicar nas configurações. Ok, e então nós queremos ir, eu acredito que é tráfego. Lá vamos nós. Sim. Tráfego. Postagens em seguida relacionadas. Então você quer que ele apenas certifique-se de ligar isso. É isso. Ok? E então aqui vamos nós. O que realmente se opõe a quem vai aceitar isso? E queremos destacar postagens relacionadas. E também queremos mostrar a imagem da feição que acompanha. É isso. Está bem. Tudo o que você tem a fazer apenas instalado jetpack, navegar para o tráfego. Clique neste botão, clique nestes botões. E à medida que seu site cresce e tem conteúdo, isso será preenchido automaticamente sem que você precise fazer nada. Ok? E então você terá blogposts muito bonitos e atraentes localizados na parte inferior de suas postagens de blog. Ok, e isso realmente ajuda. Linking interno dá às pessoas algo mais para clicar, etc Agora, uma última pequena coisa que eu só quero trazer para cima é porque nós também temos um plugin adicional. Deixe-me navegar para onde é que estão as sessões, lá vamos nós. Pr YC. Uma coisa legal sobre isso é que nós também podemos apenas adicionar conteúdo para o fundo. Então, se você quiser jogar como um anúncio do Adsense aqui, então todos e anúncios do Adsense aparecerão na parte inferior de cada postagem de blog. Ou você pode adicionar um formulário de aceitação ou, você sabe, um anúncio de exibição de Associados da Amazon, seja lá o que for. Então, de qualquer maneira, deixe-me ir aqui e deixe-me apenas adicionar um formulário muito rápido só para mostrar como é. Então eu vou fazer inline. Tudo bem, então venha aqui, vou adicionar um Mills bem aqui. Ok, isso parece bom. Deixe-me ir para incorporar e deixe-me ir para HTML. Vá em frente e copie, pegue tudo bem, então deixe-me navegar até o fundo do conteúdo. Copie e cole isso. Literalmente assim, apenas o HTML. Vá em frente e clique em Salvar. Tudo bem, então agora se recarregarmos a postagem do blog, teremos um formulário de inscrição por e-mail na parte inferior de cada postagem do blog. E então é isso que isso, é por isso que eu amo esse livro. É muito, muito simples em subestimado porque é tão útil. Você pode colocar coisas, ler a parte superior e a parte inferior do seu blog com facilidade. E isto é, é em, é assim que eu recomendo que você vá sobre a personalização de suas postagens de blog de forma rápida e fácil. Então não há muito para isso. Ok, então é assim que você instala migalhas de pão. É assim que você adiciona essa pequena divulgação embaixo de h2, h3. Tags de título tirar proveito dos diferentes blocos que você tem com o seu editor WordPress e adicionar empilhável em postagens de blog relacionadas na parte inferior. E também é assim que você adiciona um formulário de aceitação por e-mail ou um anúncio na parte inferior das postagens do blog. 16. 16 a Console de análise e pesquisa: Está disponível apenas no Google Analytics no seu website. Então, o Google Analytics é o que vai dizer quais páginas estão sendo visualizadas, quanto tempo as pessoas gastam em seu site, etc. E uma vez que você tenha a análise instalada, então você é capaz de verificar o seu site com console do Search Engine onde ele está, ok? Assim, o primeiro passo é instalar o Analytics. Em seguida, você pode vir aqui e fazer login e verificar seu site e ele vai, ele vai, ele vai detectar que você tem analytics instalado. E então você será capaz de adivinhar que, com o Search Console, apenas certifique-se de usar o mesmo e-mail quando você está abanando suas análises que você está com o Google Search Console. De qualquer forma, agora eu não vou orientá-lo sobre como se configurar e analisar. Há outros tutoriais sobre agora, então nós vamos apenas ir e ir direto ao ponto quando você chegar a esta seção onde você realmente tem o script, você quer copiá-lo e então ele diz que você tem que colocá-lo na cabeça de cada página web que você deseja medir. Ok, então com Astra, como diabos você faz isso? Muito fácil. Temos que ir ao Plugins de novo. E o plugin que vamos instalar, o que vai adicionar novo. Ok, agora queremos digitar cabeçalho e rodapé, ok? Plug-in muito, muito simples. Lá vamos nós, mais 1 milhão de ativações. Lá vamos nós. É instalá-lo e clique em ativar. Tudo bem, ótimo, então navegue até as configurações e vá para inserir cabeçalhos e rodapés. E agora queremos inserir o script e o cabeçalho. Por quê? Porque nos diz literalmente. E então isso só vai nos permitir adicionar o Google Analytics. Lá vamos nós. Em seguida, vá em frente e clique em Salvar ali mesmo. E é isso. Ok, e então agora o Google Analytics está instalado, dê um pouco de tempo para ele começar a coletar informações, e então é isso. Ok, então você está pronto e você vai começar a obter dados do Google Analytics. E então você pode ir em frente e ir para o Google Search Console, ok? E depois de entrar no Search Console aqui, você pode clicar em Iniciar agora e, em seguida, tudo o que você precisa fazer é verificar seu site. Então você só tem que colocar no site e certificar-se de que você está logando com o mesmo e-mail. Basta colocar em seu nome de domínio aqui, ele vai detectar que você tem analytics instalado e, em seguida, ele irá verificar a propriedade que forma no Search Console é muito útil porque ele informa como seu conteúdo está classificando dentro do Google e o que, quanta impressões você está recebendo, etc. E por isso é muito útil. Então, é por isso que você quer ir em frente e instalar o Analytics. E então é isso. 17. 17 conclusão: Ok, é isso para este curso e como projetar um site e blog com o tema Astra. Espero que você achou realmente útil e espero que você tenha uma forte compreensão sobre como usar asteróides que criam qualquer tipo de site que você quer. De qualquer forma, eu só queria dizer um rápido obrigado por se inscrever e ter um bom dia. Tchau tchau.