Faça um site profissional em WordPress – Introdução ao Elementor e design da página inicial | Parte 4 | Robin & Jesper ✓ | Skillshare
Menu
Pesquisar

Velocidade de reprodução


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

Faça um site profissional em WordPress – Introdução ao Elementor e design da página inicial | Parte 4

teacher avatar Robin & Jesper ✓, Teaches Digital Marketing & Social Media

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.

      Introdução em Elementor

      8:22

    • 2.

      Configurações de Elementor

      14:00

    • 3.

      Pre-Design para home

      7:34

    • 4.

      Painel de Elementor

      15:23

    • 5.

      Configurar valores globais - Fontes

      9:53

    • 6.

      Combine seu menu - fontes de fontes

      5:24

    • 7.

      Define valores globais - cores

      9:49

    • 8.

      Combine seu menú - cores de rodapé

      9:05

    • 9.

      Anatomia em seções

      8:31

    • 10.

      Parte 1

      10:54

    • 11.

      Parte 2

      13:24

    • 12.

      Título

      16:11

    • 13.

      DESCRIÇÃO

      8:47

    • 14.

      Botão de CTA

      17:20

    • 15.

      Adicionar depoimento

      19:35

    • 16.

      Adicione o e-mail na versão 1/2

      11:36

    • 17.

      Adicione o e-mail de Opt-In versão 2/2

      10:04

    • 18.

      Opção de abertura 2

      11:57

    • 19.

      Seção de exibição, parte 1

      18:41

    • 20.

      Seção de mostra 2

      11:32

    • 21.

      Menu pegajoso

      14:00

    • 22.

      Análise de design de casa

      8:28

  • --
  • 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.

238

Estudantes

1

Projeto

Sobre este curso

Boas-vindas à segunda parte de "Construindo seu primeiro site de WordPress web".

Neste parte curso vamos continuar a configurar seu site do up usando o novo editor de Gutenberg Você também vai aprender a tornar seu site um de "convertendo em site, como todos os sites profissionais por ali por ali usando Elementor.

Vamos passar a passo a passo e aprender ....

Introdução em Plugins

Como usar Plugins

Backup do seu site

Proteja seu site

Análise de sites

Acelere seu site

Melhore a configuração de classificação, a configuração de classificação de pesquisa

Configuração de console do Google Search

Imprimer Ranks

Spam em bloco

Formulários de contato

Links de faixa e curte

Opt-In: e-mail de negócios

Opt-In: configuração

Opt-In: entrada: formulários e e-mails

Otimização e compressão

e... Lembre-se de se inscrever!

Vejo você dentro do curso.

Amor

Robin e jesper

Conheça seu professor

Teacher Profile Image

Robin & Jesper ✓

Teaches Digital Marketing & Social Media

Professor

We're passionate about teaching! There's no greater joy than watching beautiful testimonials of people achieving their goals and dreams. That's why we STRONGLY believe in full and constant support. With ALL of our courses you can expect:

If you're interested in learning Digital Marketing - Social Media Marketing or Creating a Something Awesome..

We're at your service!

Love

Robin & Jesper

Visualizar o perfil completo

Level: All Levels

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. Introdução em Elementor: oi e bem-vindo ao projeto com a seção elementar. Agora, se você tem seguido ao longo do curso, você terá aprendido a configurar um site WORDPRESS totalmente funcional, instalado todos os plugins essenciais e também entendeu a psicologia por trás da criação profissionais páginas em seu site. Agora é hora de aprender sobre eu mentor. Então, o que é L um mentor? L. Um mentor é a ferramenta de design mais profissional lá fora para nos fazer ir de designers Rukia para profissionais completos. Deixa-me mostrar-te o que quero dizer. Agora aqui estão um par de exemplos de pessoas usando elemental para o seu sinal juntamente com o tema WordPress WP oceano. Certo. Então dê uma olhada neste belo site. Agora a primeira coisa que vamos notar é que há uma grande, maravilhosa imagem em torno de toda esta área. Agora aprendemos que isso é chamado acima da dobra. Temos o nome da pessoa aqui e, em seguida, o slogan deles rolando para baixo. Vamos conseguir mais informações sobre o site sobre a pessoa. Mas o ponto aqui é que este é um projeto elementar. Isso está usando a ferramenta elementar e isso é extremamente profissional procurando porque é tão limpo. Agora a maioria dos designers um Web designers preferem usar elemental para o projeto porque é tão fácil. É tão rápido, e você pode criar um site totalmente funcional, bonito em apenas um par de horas. É incrível não precisar de codificação. Então, se olharmos para este site, percebemos que o tema é praticamente o mesmo. Temos uma foto grande e maravilhosa. Há um título aqui. Há um slogan aqui ou melhor, descrição. Nesse caso, rolar para baixo obteria um monte de informações. Isso pode ser qualquer coisa que seria uma venda de apostas mostrando o seu produto. Colocando seu e-mail muitas vezes dizia Ra, e você vai se lembrar que Pat Flynn fez algo semelhante com seu design. Agora isso é tão afetado porque você vai notar que há seção. Temos uma seção de tela cheia aqui, rolando para baixo. Temos outra seção, outra e depois outra, alguns sendo tela cheia, mas a maioria cobrindo toda a tela. Muito profissional. Agora, se dermos uma olhada neste site, que também está usando elemental com o oceano WP todos esses exemplos são você vai notar que eles estão usando um vídeo em segundo plano aqui. Agora eles estão claramente transmitindo o que eles são tudo sobre. E então há uma chamada à ação inferior chamada à ação. O que significa que você quer que as pessoas cliquem, cuidado para receber um e-mail, optar por obter seus produtos para comprar algo. Seja o que for, a prioridade da sua página inicial, lembra? Sempre definir a prioridade começaria aqui, o campo de casa tudo. Agora estes são o meu tipo favorito de peixe caseiro porque eles são tão limpos, seu direto ao ponto. E isto é o que vamos apontar também. Quando se trata de nossa decidir rolagem para baixo, você começa a colocar mais informações, ainda sendo muito limpo. Ou usando este tipo de meia tela ou tela inteira o sinal certo? E, finalmente, esta página tem um design semelhante acontecendo lá, cobrindo toda a tela aqui. Nós criamos a partir do sinal de organizações Branson pisou no estúdio Creative Digital. Agora, se eu pudesse enfraquecer, comece. Lembre-se, este é o começo aqui. Botão estavam sendo rolados aqui, então ele colocou todas essas informações valiosas na primeira página em um grande pergaminho longo, como você vai notar que a maioria das pessoas tem. E então, é claro, alguma prova social acontecendo mostrando os clientes. Agora, isso é apenas para mostrar que qualquer um pode criar esses belos sites graças a uma ferramenta como L.A mentor. Então vamos aprofundar o que é elementar agora. L. Um mentor é o que é chamado de construtor de páginas. Em outras palavras , ajuda você a construir páginas como você viu? E em que consiste o seu site? Bem, basicamente páginas diferentes agora. No passado, você precisava de habilidades de codificação para poder criar sites. Agora o WordPress simplificou. Ah, muitos plugins vieram depois disso. Muito simplificado. E agora temos um mentor para projetar para que pareça bonito. Se você é como eu, você saberá que eu não sou um designer de todo. Eu não tenho um bom olho para esta vez, mas graças a L.A mentor, tudo se torna super fácil. É uma ferramenta muito intuitiva de usar, e eles também têm outro recurso que realmente ajuda. Essa é a capacidade de ser capaz de projetar cal. Agora você vai notar. Nas palestras anteriores, quando estávamos criando nossas páginas que criamos a página e então fomos para a pré-visualização para ver como acabou. Agora, com L.A mentor, você começa a construir toda a página viva. Você começa a ver perguntar a você, colocando as diferentes funções, diferentes partes diferentes bruxas diferentes e ver como ele acaba. Live é um recurso incrível, e economiza muito tempo e ajuda através do design intuitivo agora novamente. Porque eu não sou um designer, eu realmente aprecio que este elementar é preenchido com modelos de página. Eu realmente preciso deles, e isso faz da minha vida uma Páscoa. Eu não projetaria um logotipo, mas ainda temos um ótimo logotipo, e da mesma forma, eu não iria em frente e projetar uma página. Mas graças aos modelos, podemos obter páginas realmente, muito boas e, portanto, muito bom site procurando, graças a esta ferramenta. Então, em outras palavras, se aprendermos a dominar essas ferramentas não só serão realmente proficientes quando se trata de construir sites, mas também projetar esses sites, seja para o seu negócio, ser um freelancer, ajudar alguém a construir o seu próprio negócio pode ser qualquer coisa, desde que você precisa para construir um site decidiu parecer profissional. Elementary é a ferramenta agora. Há também uma característica no elementary chamada Elementary Can Va. Basicamente, o que ele faz é que ele permite que você remova tudo o que está nesta determinada página, ou seja, a barra lateral The Rodapé. Se você gostaria que o logotipo do menu tudo e apenas torná-lo completamente limpo um Canadá para que você é capaz de colocar, por exemplo, um filme lá ou você poderia estar colocando uma grande imagem lá e então poderíamos começar o assinando. Mas alguns podem ser um menu no topo, seu logotipo, etc. Mas esse recurso torna tão fácil, porque se você pode começar de uma ardósia limpa com o elementar Canadá, projetar torna-se muito mais fácil. E aqui está a última loucura. Na verdade, é grátis. Há uma versão pro, na verdade, eu acho que há dois pro versão. Se você quiser usá-lo para vários sites que custam a você, eu acredito US $99 ou $199 por um ano fora atualizações atualmente, mas 90% disso é completamente gratuito, e 19% vai ser mais do que precisamos para o nosso propósito, certo? E se você deve, sempre por quaisquer ferramentas ou quaisquer plugins e Na minha opinião, se você vai comprar um plug in ou vai ser para a proteção do seu site para a restauração e backup fora do seu site no elemental conectando para decidir como um profissional. Mas mais uma vez, você vai notar que temos basicamente tudo neste construtor de páginas. E se você precisar de mais, você tem o orçamento para isso. É fácil atualizar e usar esses recursos para woo comercial. Por exemplo, se você quiser criar em um site de comércio e, vamos falar mais sobre isso mais tarde, e eu vou mostrar-lhe como construir um comércio e usando comers. Ok, Então, se você está tão animado como eu estou para começar a construir essas páginas que já preparamos sendo nossa página inicial sendo nossa página inicial aqui e, claro, sendo nosso recurso é página, então vamos começar passando por elemental desde o início, todo o caminho para obter o produto acabado. A coisa acabada, certo? Vamos começar a ver a próxima palestra 2. Configurações de Elementor: Muito bem, pessoal, vamos aprender tudo sobre o elementar, mas para fazer isso, é uma boa ideia começar desde o início. Então vamos começar do back-end do nosso site e passar para Elemental aqui. Agora, como acontece com a maioria dos plugins, eles vão ser um par fora de configurações e diferentes opções que vem com ele. Então, antes de começarmos e começarmos a usá-lo, vamos seguir em frente e sacudir o que tudo isso significa. E se precisarmos mudar alguma coisa, vamos em frente e fazer isso. Ok, então vamos começar em configurações aqui agora. A primeira coisa que temos nas configurações é onde você quer que o elementary seja aplicado, certo? Então agora nós temos para os tipos de postagem fora de páginas de postagem, e é isso. Mas também podemos aplicar elementar na página do poeta masculino ou na minha biblioteca. Mas isso não é nada que eles realmente precisem pensar agora. Só quero que saibas que estas opções estão aqui. Se você quiser personalizar a página do poeta masculino mais tarde, por exemplo, lembre-se, você pode criar páginas diferentes lá. O homem é página de assinatura, etc. Em seguida, também temos as cores padrão desabilitadas. Agora, isto é se você quiser usar as cores que vêm com seus temas principalmente. Então você pode verificar estes para desativar os coleiras padrão elementares e usá-los em vez disso e o mesmo com os telefones. Você pode desativar os fundos fora elementary para usar aqueles do seu tema. No entanto, nas próximas palestras, quando começarmos a projetar nossa home page, vamos realmente passar por quais colares e quais fundos usar para o seu negócio, dependendo do que você está fazendo com o seu site, o que se trata e que sentimento que você quer entregar a psicologia de telefones e coleiras. Realmente animado. Acho que vais adorar aquela palestra, mas, por enquanto, não vamos tocar nisto, certo? Vamos personalizá-los mais tarde. Em seguida, também temos a definição de elementos de melhoria, significa que se você quiser ajudar elementary, permitindo-lhes rastrear o seu uso. Agora, este é um dado de animus que eles coletam para melhorar seu plug in. E se você quer fazer isso, você pode realmente não faz muito. Eu não tenho tendência, porque eu não quero ter a carga de mim mesmo. Em outras palavras, pode abrandar as coisas um pouco. E eu não estou realmente a fim de fazer isso, mesmo que seja por uma boa causa lá. E então passamos para o estilo. E aqui temos o estilo de forma genérica. Nós temos o conteúdo com basicamente o estilo fora de suas páginas, este estilo eu ia olhar como ele vai se encaixar com os espaços entre etc. Agora, nós realmente não precisamos tocar isso agora porque nós realmente vamos misturar com isso quando estamos em l. Um mentor em si e com antecedência, nós temos coisas como método de impressão CSS e para nós mortais que não estão em codificação. Não precisamos nos preocupar com isso. Mude para o modo carregador do editor. Nós não vamos tocar nisso também, porque isso é para solução de problemas e não vamos fazer esse tipo de coisas . Isso é para usuários avançados. Isso não é nada que eu faça ou usando este plug ele, e então nós temos algo que é chamado de edição de alças, e isso é realmente um recurso decentemente recente. Agora, o que isso faz é que ele muda os blocos de edição Agora, eu sei que nós ainda não começamos com elementar, mas eu só quero mostrar a vocês o que isso faz. Se mantivermos isso escondido, significa que, para personalizar um bloco, temos trabalhado com o bloqueio de Gutenberg. Então vai ser familiar para você, a fim de personalizar um bloco, temos que clicar com o botão direito sobre esse bloco. Agora, se mantivermos isto para mostrar, ele vai usar lidar com este impasse clicando com o botão direito. E parece assim. Você vai em frente, você ativa isso para mostrar, e então, como você pode ver no bloco, você obtém este tipo de dobra para fora onde você pode copiar, você pode editar, você pode fechá-lo, etcetera. Agora isso é completamente com você, como você quer fazer isso. Mas geralmente, o que quer que você comece com o que você vai se sentir confortável, eu acho que esse recurso é principalmente porque um monte de pessoas que usaram elemental por um tempo eles ficaram desconfortáveis com a opção de clique direito. Mas se você está apenas começando com elemental, você vai se sentir confortável, provavelmente com o qual eu realmente gosto dos cliques certos. Vou guardar isto para esconder. Então vamos para baixo para rolar manager agora, assim como ele diz Roll Manager é se você quiser permitir que as pessoas para fazer certas edições em L.A mentor. Agora, por exemplo, se você quer que seu editor não tenha acesso a L.A mentor, você iria em frente e Kallick aqui. Agora. As diferentes funções em seu site vai ser muito mais importante para você Uma vez que seu site começa a crescer direito e você pode começar a assinar papéis diferentes para diferentes pessoas. Você pode ter vários autores se você tiver um blogueiro. Por exemplo, se você tem contribuidores alguém que leva aqui se você é um CEO, etc. Agora, se você quiser dar acesso a determinado conteúdo, você precisa se tornar profissional. Mas o que você pode fazer é que você pode limitar o acesso das pessoas ao que as pessoas podem adicioná-lo em L.A mentor, e você faz isso através do Roll Manager. Então vamos passar para as ferramentas. Agora aqui está realmente algo que você pode vir a usar algumas vezes, e isso é o CSS regenerado Agora, mesmo que nós realmente não trabalhamos muito com a CIA, diz que isso é realmente algo que é dito no estilo, e este estilo vai ser a vontade da sua página. Talvez o fundo dos colares, etc. Então, sempre que estamos atualizando isso e percebemos que as atualizações não estão realmente acontecendo , então as chances são de que há algo errado com os ossos do pulso. Por exemplo, Entre elementar e o tema que temos, temos oceano WP. Então, se algo está atrasando ou algo está faltando ou estavam presentes fazendo alguma falta com L. Um mentor, tudo o que precisamos fazer é voltar e clicar nos arquivos regenerados, e então vamos ter certeza que eles afundam e basicamente 99% do tempo, isso só faz funcionar, certo? Então, seja qual for a mudança de estilo que você fez, isso vai começar a funcionar por eles. As chances são que nós vamos usar isso um par de vezes como nós construímos nosso site usando L.A mentor, e então nós temos biblioteca pia, ea biblioteca vai ser muito mais útil mais tarde na seção elementar quando comece a usar modelos. Então, por exemplo, se você baixar um determinado modelo ou você salvar o seu próprio e você perceber que isso não é visível em seus modelos salvos, tudo o que eles precisam fazer é ir para ferramentas elementares e clicar na biblioteca de pia e Na maioria das vezes que vai resolver esse problema, e então temos o modo de segurança e os motivos de segurança. Se você quiser solucionar problemas ou algo especial no elementary, este é um recurso avançado. Não vamos usar isso, então não precisamos nos importar com isso. Isto é basicamente para os nerds. E mesmo que eu me considere um grande nerd, eu não tenho conhecimento o suficiente para entrar na codificação e desmontar o modo de segurança. Então não vamos usar isso. Nós também temos a barra de depuração agora a depuração. É semelhante se você quiser procurar problemas que dizem, nós não vamos usar isso também. Então, esses são todos recursos avançados que não precisamos para criar sites fantásticos. Então, seguir em frente para substituir você ou L. Agora, se você tem seguido o curso o tempo todo, primeiro lugar, isso é incrível. Bom trabalho. Em segundo lugar, você vai se lembrar quando baixamos um plug in para fazer backup do nosso site. Quando fizemos backup, nosso site foi capaz de migrar nosso site para outro lugar, certo? E o que podemos fazer então é que podemos migrar isso para longe e, em seguida, também migrar todo o nosso elemento ou configurar usando este substituto U R L Wright vai se manter verdade também. Se você está mudando o nome de domínio para um novo nome de domínio, você vai ter que substituir este u R l dois, mas novamente, assim como diz lá. Você realmente deve fazer backup de seu banco de dados antes de fazer algo assim, e felizmente, teria nosso backup. E sabemos como fazer o backup manualmente. Então, se você precisa substituir o seu antigo seu el ou sua migração, em seguida, vá em frente e volte primeiro e, em seguida, use este direito em seu antigo l e então você sabia e clique em substituir euro, e então passamos para o controle de versão. Então, eles devem lançar qualquer nova atualização com L Um mentor, por exemplo, e você notar que Hey, espere, Estes realmente quebrou meu site. Isso é muito raro, mas como todos os plugins, pode acontecer. Mas é muito, muito raro. Mas você pode fazer é ir em frente e reinstalar a versão antiga que sabemos realmente funciona. E, claro, temos o nosso site de backup, disse que seria qualquer perda Mas é aqui que vamos para a versão de reversão, a versão anterior para instalar os que realmente funcionou. Assim, podemos continuar editando nosso site e progresso contínuo com nosso negócio, e nós também temos se você quiser se tornar um testador melhor, se você habilitar este, então você terá a oportunidade de testar novas versões antes que elas sejam liberado. Se você gosta disso, isso não é absolutamente necessário adulto com ele para manter isso em deficiente. Então temos o modo de manutenção. Então, se você estiver atualizando seu site ou nesta determinada página, o que você pode fazer é que você pode ir e usar um ritmo em breve, por exemplo, ou uma página de manutenção. Assim, as pessoas que chegam ao seu site vão vê-lo em breve, ou uma página de manutenção que permite que você faça o que precisa fazer no seu site. Certo, antes que publique tudo. Portanto, isso pode ser ótimo para quaisquer atualizações de manutenção ou apenas para esses dias de inscrição. Se você quer apenas colocá-lo para baixo, atualize seu site em paz e, em seguida, liberá-lo com seu novo design bonito. Ok, então temos quem pode acessar seu site bem, pessoas logadas. Ou, se você quiser definir isso como um personalizado, que somente pessoas com determinadas funções possam realmente registrar em log. Uma vez que este sistema vem em breve ou manutenção, Eu prefiro apenas manter isso conectado. E então temos os modelos. Se você criou um modelo incerto para quando seu site está inativo, você pode usá-lo. Se você não tem um criativo, podemos criar um aqui mesmo. Agora tenho tendência a não fazer isso também. Se eu colocar o site para baixo, que eu basicamente nunca, nunca faço, eu iria em frente e usaria a parte de manutenção. Então temos informações do sistema. E aqui há apenas um monte de jargão técnico. Isso não nos ajuda em nada. Só se parece com isso. Não há nada fora da informação que possamos usar aqui, então não vamos passar tempo aqui. Temos uma guia de introdução aqui. Uma ondulação. Isso é realmente ótimo, porque L A mentor é basicamente ilimitado em seu potencial para a beleza da ciência. E há muitas dicas e truques que você pode usar a partir daqui. Agora, você não vai precisar muito disso porque eu vou ser seu editorial, certo? É por isso que você está aqui neste curso para tornar bela a ciência e maravilhoso site. Mas para aprender muitas dicas e truques, eles têm alguns tutoriais realmente entregues aqui. Pode verificar isso e, em seguida, obter o artigo completo. Agora, se você precisar de alguma ajuda, você pode clicar em, recebe ajuda aqui. Eles têm grande apoio para ter um perguntas freqüentes aqui pode ir em frente e verificar isso. Há tutoriais, etc., muito, muito bom. E então temos fundações personalizadas. Agora este é um recurso pro que você precisa morder, a fim de adicionar seus fundos de clientes e fundos personalizados significa se há qualquer telefone que você tenha baixado ou talvez até mesmo criado que você deseja usar para tornar seu site ainda mais exclusivo. Mas há muita diversão, como muitos telefones aqui que já podemos usar. E na próxima palestra sobre psicologia sobre, os diferentes fundos iam escolher um que vai se encaixar perfeitamente no seu negócio é que não precisamos nos preocupar com isso, e então nós temos as bundas GoPro. E se você quiser comprar a versão atualizada fora do curso elementar e fora do curso. Isso pode ser um benefício se você usar isso por um tempo e você tem vários sites e você quer usar bruxas adicionais e usá-lo em várias plataformas. Mas como eu disse na palestra anterior, isso não é necessário. Você ganha basicamente tudo por código aberto de zona livre, e nós vamos fazer o site Kick Ass usando a versão gratuita, certo? Você é a maioria das crianças. Você não vai precisar da versão pro. Mas se há algo que você deve por profissional para um plug in, vai ser o anti-vírus ou o backup ou a sonda elementar, na minha opinião. E então temos modelos aqui em baixo. Agora temos a nossa dizer que os modelos. Então, por exemplo, se eu decidir fazer páginas diferentes para diferentes cursos, eu poderia querer ter o tipo similar fora da página build. Então o que eu poderia fazer é fazer uma determinada página construída e salvar que como ele modelo e usá-lo e outra vez vai economizar um monte de tempo. E, claro, quando começarmos a baixar modelos, que vamos passar mais tarde, isso vai ser colocado aqui também. O construtor de temas é um recurso profissional, então não temos acesso a isso. Mas ele permite que você vá para o integrado, por exemplo, para editar o seu ah, cabeçalho seu er comida no l um mentor. Mas novamente, não há nada que precisamos fazer porque já sabemos como fazer isso lá fora. E eu vou mostrar a vocês como usar os diferentes recursos para tornar seu site incrível. Sem isso, temos pop ups e pop ups que todos conhecemos. O Papa está na sua tela. Você quer abrir um e-mail, por exemplo, ou se há algo que você deseja anunciar em seu site, isso é um recurso profissional. Mas honestamente, isso é bastante sensível. Eles podem ser usados corretamente, mas também podem ser muito irritantes. Mas isso não é nada que precisamos aqui. Podemos ótimos novos modelos, e aqui podemos colocar modelos em categorias, certo? Então essas são as diferentes configurações no elementar, então nós passamos por configurações função conseguiu sistema em todas essas coisas importantes e placas de Sam, que nós vamos passar pela morte de Maurin mais tarde. O que eu quero que você se lembre principalmente é que se você for para L.A mentor e ferramentas. Temos o CSS regenerado. Então, se há algo que não está atualizando em seu site, vá dizer a um mentor ferramentas e clique em regenerar arquivos. Na maioria das vezes, isso vai resolver o problema fora do seu tema, não atualizando seu estilo, não funcionando como deveria. Agora mesmo. Vamos passar para a próxima palestra e começar a usar elemental. Isso é realmente emocionante, os caras vêem na próxima palestra. 3. Pre-Design para home: Muito bem, pessoal, nesta palestra, vamos avançar e pré-desenhar a nossa home page. Agora, se você tem seguido ao longo do curso desde o início e você tem seguido os mesmos passos que eu, você vai apenas gostar de mim não tem uma página inicial agora porque anteriormente nós transformamos nossa home page em um começo página aqui. Então o que vamos fazer é ir em frente e ir para páginas aqui e clicar em adicionar novo e realmente criar uma home page que podemos estar usando. Então eu vou chamar isso de casa, e então eu vou clicar em publicar e depois publicar, e então eu vou voltar para todas as páginas. E se você rolar para baixo agora, você verá que o início aqui é nosso paciente na primeira página e página inicial, esses tipos de sinônimos aéreos. Então o que você quer fazer é clicar na edição rápida porque esta lesma você se lembra o que é a lesma ? Isso é o que aparece depois do seu nome de domínio. Então a lesma aqui é Robin e Jesper Dot com. Para a frente, barra para casa. Mas isso é muito confuso para os motores de busca porque nós queremos transformar isso em início aqui agora mesmo. A página inicial aqui deve ter começado aqui. lesma ácida faz muito mais sentido para a busca e ouvidos e humanos. Agora, sempre que você está escrevendo lesmas, você sempre quer usar letras minúsculas, e você sempre quer usar um traço quando você está fazendo qualquer espaço. Então, vamos em frente e clicar em atualizar. E agora vamos dar uma olhada em nossa casa. Se uma edição rápida semanal, você vai ver que esta perna é chamada de casa e depois arrombou você Nós só queremos que isso seja chamado de casa, e então nós vamos clicar em atualizar. Lá vamos nós. E agora vamos para as configurações e vamos para a leitura. E agora vamos transformar nossa página inicial aqui em casa e agora clicar em salvar alterações. Portanto, a página inicial não está definida atualmente em nosso menu, e é exatamente assim que queríamos. Queremos que a página inicial seja a primeira página. Eles vêem que o editor, mas você não quer que ele esteja no menu porque nós já temos no logotipo. Então o que vamos fazer é fazer isso em sua home page Pré projetá-lo removendo todos os fluff que não precisamos, e então vamos seguir em frente e tornar isso realmente profissional e bonito usando L um mentor. Quero dizer, é por isso que estamos nesta seção, certo? Então agora vamos para as páginas e clicar lá e depois vamos para a Hope, que agora é uma primeira página. Home é a nossa página inicial. Isso é incrível. E agora, pessoal, finalmente podemos clicar neste grande botão azul que nos olha nos olhos há algum tempo. Isso é adicionado com elemental. Ok, agora, no segundo que eu clicar sobre isso, isso vai transformar nossa página inicial em uma página elementar editado, certo e também vai estar abrindo a página inteira de Gutenberg que temos usado antes no editor elementar. Então é assim que o editor elementar parece. Você reconhecerá muitas das características de gota de dragão de Gutenberg, mas também com esta bela edição de vida. Agora, não se preocupe com tudo isso. Vamos passar pelo painel na próxima palestra. Mas agora para continuar com o nosso pré o sinal da página inicial. O que vamos fazer é descer aqui para as configurações, e isso vai trazer algumas configurações gerais para a página inicial, como eles querem alterar o título para o qual querem alterar o status. Quero adicionar uma imagem em destaque. Nós não vamos fazer isso agora, e então nós também podemos esconder os títulos. Agora, se olharmos para o título agora, ele diz “home” e a maioria das nossas páginas intitulou esse curso. Título assistente, claro, é sobre sangue blawg, etcetera para são projetados para tomar o próximo nível e olhar realmente limpo e realmente profissional. Não queremos mais usar títulos, certo? Quero tornar o site o mais limpo e direto ao ponto possível, então não precisamos declarar ao mundo que esta é uma página inicial. Nós só queremos entregar o propósito fora do nosso site, o propósito da nossa página inicial e falamos sobre isso anteriormente. Então o que nós vamos fazer é que nós estamos realmente indo para ir em frente, clique novamente em configurações aqui e nós vamos clicar em Ocultar título agora se isso não esconder o título para você, então as chances são que o tema que estamos usando não é Sincronizando completamente com elemental agora. E isso é porque às vezes eles têm o nome diferente nos códigos. Não precisamos saber sobre isso. Só precisamos saber como consertar isso. Então, se você clicar aqui e ele realmente não escondê-lo, lembre-se, esta é uma prévia ao vivo. Então deixe-me mostrar-lhe como contornar isso e esconder todos os quatro títulos porque isso não está funcionando Ocean WP agora. Então vamos em frente e esconder todos os nossos títulos em todas as nossas páginas porque não vamos mais usá-los. Então o que queremos fazer é certo. Clique no nosso logotipo aqui e clique em Abrir Link em New Tab. E então nós vamos para aqui e vamos em frente e clique em Personalizado. Se você estiver no back-end do seu site, basta acessar a aparência e personalizar. E agora vamos em frente e descer para as opções gerais e título da página. E aqui onde diz estilo, vamos realmente ir em frente e clicar de padrão para oculto. Então o que isso vai fazer quando você clicar em editor é que vai esconder os títulos de todas as suas páginas atuais e futuras. Vai nos poupar de muitos problemas. Então, foi publicado. Todos os títulos foram embora com apenas um pouco limpo nosso design. Incrível. Então agora vamos comprimir este aqui e voltar para L um mentor. Agora tudo o que precisamos fazer é ir em frente e atualizar esta página. Clique na licença, Paige, está tudo bem. E então o título da casa se foi. Todos os títulos dela desapareceram. Incrível. Agora, se formos em frente e voltarmos para as configurações aqui agora, esta é a parte realmente importante e interessante. Agora temos algo aqui que diz layout da página. Está bem. E eles estavam usando isso antes? Temos usado o elemental cheio com para remover a barra lateral. E se você tem seguido ao longo do curso com a gente, Eu recomendo fortemente que você vá em frente e você clique no l aumentar cheio com e nós vamos usar. Este é um design bonito antes de começarmos a projetar nossa home page. A razão para isso é porque eu amo este menu. Eu amo que temos o logotipo aqui, e é também o er comida que está contido aqui com nossa política de privacidade em termos de condições. Agora, se você tem apenas começar o curso e ir direto para L.A mentor, você tem um site. Mas você não tem todos esses recursos ou não se importa com esse recurso. Sempre que fazer tudo que você pode usar algo chamado tela elementar, e este é um recurso que em um monte de site, eu amo usar isso, especialmente para começar, porque olhar para isso. É uma tela completamente limpa, e podemos começar a construir o que quisermos aqui. Então, dependendo do seu design em seu propósito, você pode ir em frente e escolher se você deseja usar a tela elementar com o elemental cheio com. Mas se você tem seguido junto desde o início, eu recomendo que você costumava elementar cheio com. Isso é o que eu vou usar, e é isso que vai ser a base para começar a assinar a nossa página inicial. Então lá vamos nós. Eu só vou ir em frente e clicar em atualizações, e agora estamos todos feitos que têm pré-projetado ou home page vendo a próxima palestra. Rapazes 4. Painel de Elementor: Tudo bem, então vamos aprender um pouco mais sobre elementar passando pelo painel. Mas as primeiras coisas primeiro. Como chegamos a L. Um mentor do nosso WordPress da parte de trás e fora do nosso site. Agora, há duas maneiras de realmente entrar no editor elementar aqui. O primeiro 1 seria iniciar um a partir do seu painel, ir para as opções de tela e, em seguida, ativar o elemento ou revisão. Agora, lembre-se, nós clicamos isso em uma palestra muito mais antiga do curso. Agora, a partir daqui, você será capaz de criar novas páginas clicando aqui a partir daqui. Você vai notar que o paciente que estamos editando nossa página inicial, ele realmente diz elementar aqui embaixo. E tudo o que precisamos fazer é ir em frente e clicar em editar com L.A mentor, e vamos direto para um mentor começando a editar essa página. Ok, então aqui estamos nós. Agora, vamos passar por este painel aqui, todos os diferentes recursos. Agora, se você tem seguido junto desde o início desses núcleos, então isso é realmente incrível. Porque então você terá aprendido a usar o Editor Gutenberg que também tem que arrastar e soltar a função. Você vai reconhecer muitos desses recursos aqui porque se olharmos para estes, temos os elementos básicos aqui, que são as coisas como títulos,imagem do editor, imagem do editor, botão de vídeo, etc. que você pode simplesmente ir em frente e clicar, arrastá-lo para aqui e soltar, e nós temos um cabeçalho mais sobre isso em um pouco. Mas sua variedade é tudo. Aqui está o Dragon Drop. Então, o que? Temos todos os elementos básicos acontecendo aqui. E se nós rolamos para baixo ou simplesmente colapsamos, este básico , nós também temos os gerais, que são coisas como Galeria de Imagens. Você pode ter um cuidado imagem classificação estrela para que eu possa listar alerta código curto Soundcloud barra lateral. Leia o da mamãe. Há um tom off funções aqui é uma ferramenta tão incrível. E se desmoronarmos este também, também temos os widgets do WordPress que estivemos passando da área das bruxas mais cedo. Nós também podemos apenas clicar, arrastar e soltar assim muito, muito fácil de construir páginas desta forma. Agora, a próxima coisa que podemos fazer aqui o que vocês vão notar é que se eu abrir o básico e, por exemplo, eu quero adicionar um editor de texto aqui, então tudo o que eu vou fazer é arrastar o editor de texto para aqui, e eu vou pegar um pedaço do Texas assim como o editor de Gutenberg. E quando isso acontecer, vai abrir o editor de texto aqui. Então é preciso alguém para escrever e pode escrever isso aqui. Posso mudar o estilo, o alinhamento e tudo mais. É super parecido com Gutenberg, e então temos funções avançadas também, que vamos passar mais tarde. Mas tudo vai funcionar da mesma forma que quando você puxá-lo aqui, você arrasta e solta. Você vai entrar em um editor onde você pode editar suas funções diferentes. Agora, se eu quiser ir em frente e adicionar mais coisas, tudo o que eu vou fazer é clicar aqui no canto superior direito com todos esses quadrados, e eu vou voltar para aqui. Então, digamos que eu queria acrescentar outra coisa. Digamos que eu queira adicionar essa imagem. Eu só vou clicar nele e movê-lo para cima e você pode ter reconhecido isso. Você pode colocá-lo acima, ou você pode colocá-lo abaixo assim. Agora, se eu colocar abaixo vai acabar bem aqui, e se eu quiser apagar isso eu vou fazer é certo. Clique e clique em excluir. Agora, lembre-se, quando estamos nas configurações mais cedo do que a função viciada estaria aqui se adicionássemos no guiador. Mas agora vamos usar o botão direito para isso e simplesmente excluí-lo para que possamos adicionar qualquer coisa aqui. E este é um quadrado fora de si mesmo onde você pode adicionar um monte de coisas. Um monte de vídeos, botões, qualquer coisa. Você vai notar que podemos arrastar diferentes bruxas ou elementos. São basicamente sinônimos aqui. Assim, desta forma, você pode manter em diferentes seções com diferentes recursos. Certo? Então vamos dizer que eu queria adicionar meu próprio cabeçalho aqui. Eu posso puxar as coisas que eu quero puxar a partir daqui, arrastado aqui e criar um cabeçalho ou un acima do ritmo inicial dobra. Você se lembra do que acima da dobra significa que é tudo. Isso vai estar na sua tela quando você abrir a página. Então eu poderia fazer isso e o próximo quadrado aqui em baixo. Isso poderia ser as coisas onde eu coloquei, por exemplo abaixo do cheio, a primeira tela abaixo da dobra, e poderíamos fazer outra e outra. Tudo isso vai fazer muito mais sentido daqui a pouco. Agora, se eu quiser entrar em colapso em todo o quadrado, tudo o que eu preciso fazer é ir em frente e clicar no deletar aqui em cima. Boom! Tudo se foi agora. A próxima coisa que é tão incrível e tão bonito com este editor é esta função. Repare na vantagem aqui. Se eu clicar sobre isso vai adicionar em uma nova seção inteira, é tão fácil de lê-lo. Então, digamos que eu acrescentaria nisso temos quatro seções diferentes acontecendo aqui. 1234 E então você pode editar isso entre eles. Por exemplo, a altura dois coluna. Obter o transbordamento. Até mesmo a tag, que é muito legal, porque isso significa que você pode criar seu próprio cabeçalho. E os motores de busca vão reconhecê-lo como um batedor porque você mudou html para cabeçalho. Em outras palavras, Cabeçalho é para motores de busca. E o ainda mais sobre isso na seção S e o. Ok, então se voltarmos aqui onde temos todos os nossos widgets, eu poderia adicionar um título para este aqui. Realmente bom. Vamos voltar. Eu poderia adicionar um vídeo para este aqui. Vamos voltar. Eu poderia adicionar um Google Maps a este. As possibilidades de edição são infinitas aqui, e é isso que a torna tão incrível. É por isso que adoro isto. Você pode fazer esse site profissional facilmente. Quero dizer, em horas, uma vez que você aprenda isso. Então vamos remover o quadrado inteiro assim. Lá vamos nós. Agora, a próxima coisa que você pode fazer é ir em frente e clicar aqui. E esta é a próxima coisa de soprar a mente aqui. Vamos tirar um monte de modelos. Agora olhe para estes. São modelos de página, certo? Se você rolar para baixo aqui e vamos dizer Bem, este parece muito bom, tudo que você precisa fazer é clicar sobre ele e você pode esperar inspecionados, Veja como parece rolar para baixo com o mar temos este agradável, bonito cenário, cenário de vídeo. Eles têm uma mulher aparecendo. Nós temos a caixa que leva e o botão acontecendo. Muito simples, limpo e bonito rolagem para baixo. Temos estas pequenas coisas aqui onde podemos ligar. Temos o número rolando abaixo da dobra acontecendo. Temos todos os recursos fora do serviço, algumas fotos e, em seguida, mais algumas informações. Eu realmente gosto. Então eu vou seguir em frente e clicar em inserir e então nós temos esta página inteira. Olha, é tão fácil. Eu poderia ir em frente e escrever. Robin e Jesper começam a editar pequenas coisas, adicionando em nossos números, adicionando em nosso recurso e honestamente em algumas horas, eu estaria tendo um site chutando ass. Isso é tudo graças ao elementar tão fácil de usar. Agora, vamos apenas recolher tudo isso clicando na seção de exclusão aqui. Vamos apagar tudo dentro deste quadrado ou melhor, neste caso, era só o vídeo. E nesta praça, por exemplo, eles dividiram-no, então este número de telefone vai ser desmoronado aqui. E se eu segurá-la, posso ver que todo este quadrado vai ser apagado deste quadrado. Isso dividiu isso sobre isso. Então tudo depende de como você quer dividir todas as suas bruxas diferentes e seu próprio projeto, certo? Então, tudo o que estou mostrando aqui, vamos entrar em mais detalhes à medida que passamos e construímos nossa página inicial. Isto é apenas para executar através do painel e suas muitas funções fora Como funciona elementar. Ok, então se descermos, temos alguns recursos adicionais, como configurações. Agora, nós tocamos em configurações pouco mais cedo na palestra quando estávamos fazendo nossa configuração de pacientes em casa ou elementar cheio com aqui, nós também podemos mudar o estilo, o que significa que podemos ir em frente e clicar em fundo e adicionar uma imagem que significa que estaríamos adicionando uma imagem a este fundo acontecendo aqui. Nós também podemos usar o Grady no sentido de que podemos usar cores e fazer um certo chamador neste fundo. E as possibilidades de edição são infinitas aqui. E agora, se eu descer, também temos navegador. Agora, Navigator vai ser algo que, por exemplo, digamos que eu clique aqui, volte para bruxas e adicione o título aqui. Agora podemos ver o rumo no nosso navegador. Se eu voltar para os elementos e eu adicionar em um bundas e s bem, vamos colocá-lo para baixo. Aqui podemos ver que na mesma coluna temos o título e o fundo. Agora, se eu voltar aqui e adicionar um vídeo em um quadrado de natter, então vamos ver que este vídeo está na verdade em uma nova seção. Cada um desses quadrados são conhecidos como seções, certo? Então, se eu quiser acesso rápido a eles, eu posso apenas clicar neles e eu posso ver o mártir. Da mesma forma, se eu clicar para cima no canto superior esquerdo como este vai ser marcado no navegador, e então vamos apenas recolher cada quadrado, quadrado ou seção não importa o que você chamá-los e recolher este também e então indo para baixo. Nós também temos história agora histórias de recurso realmente útil, porque ele vai mostrar era tudo o que temos vindo a fazer. Então, por exemplo, acabamos de adicionar o vídeo. Então, se eu clicar aqui. Recuperamos tudo de quando temos o vídeo. Então, se você está cometendo algum erro ao longo do caminho você está preocupado com Oh, como isso vai parecer? Oh, eu fui longe demais? Posso desfazer isto? Sim, você pode. E essa é a coisa mais bonita sobre isso. Tudo está salvo aqui, que é realmente Austin. Nós ainda temos o nosso template quando adicionamos esse aqui. E, claro, se você quiser ir para o mais recente, basta clicar no topo e voltar. Também temos revisões. Agora, revisões é quando estamos fazendo essas grandes mudanças que devem dizer que eu tenho um minuto atrás 13 minutos atrás. Tenho andado a brincar um pouco com isto e da palestra que foi filmada. Então nós também temos aqueles salvando aqui pode clicar em que eu poderia aplicar e recarregá-los. Portanto, nunca há qualquer preocupação com algo que se perca no processo de edição porque tudo é salvo aqui em baixo. Indo para baixo. Nós também temos modo responsivo. Isso é realmente útil porque como sua edição ao vivo, o que é incrível em si, você pode ir em frente e verificar Como isso vai ficar no tablet? Como é que isto vai ficar no telemóvel? Assim, você sempre recebe feedback direto. E sabemos que a maioria das pessoas na Internet hoje estão usando seu celular. Precisamos ter certeza de que tudo está adaptado para celulares, certo? Se não, vamos nos encontrar em um monte de tráfego importante. Então vamos nos certificar de que estamos sempre de olho nesses quando estamos fazendo nosso design e então temos mudanças de pré-visualização. Então, sempre que eu fizer alguma coisa, vamos voltar para as bruxas aqui em cima. E então vamos adicionar. Vamos definir neste vídeo, por exemplo. Aqui está. Agora, se eu quiser ver como isso parece, eu poderia apenas clicar em pré-visualizar alterações, vai abrir em nova guia. Já vimos isto acontecer antes, e vai mostrar-me como está agora. Ok, então é assim que parece com o vídeo. Agora, se eu quiser editar ainda mais esta seção, eu posso mover meu mouse sobrecarga com esta seção de edição e você vai ter outro modo de edição aqui. E o mais bonito disso é que você pode decidir que quer encaixotar a seção , você quer ter alguma ligação em lacunas? Vai ser muito importante. Temos diferentes Chamá-los posição Contin, estouro tag html, estrutura tudo. Você pode mudar o estilo, tudo e isso está fora da seção. Se você quiser adicionar uma seção acima, por exemplo, basta clicar no plus e você vai adicionar uma seção aqui que eu recomendo quando estamos fazendo o design e você vai nos notar, vamos manter cada seção para cada conteúdo. Então, por exemplo, a primeira coisa que vamos querer fazer diz que o objetivo principal para a nossa página inicial que vai estar em uma seção que vai ser a seção acima da seção enganada agora abaixo . Podemos, por exemplo, quando eu tinha um e-mail, optar por adicionar um número de telefone ou qualquer coisa, talvez depoimentos. Seja o que for, vai haver abaixo do total. A primeira coisa que aparece quando você rolar para baixo que vai estar em uma nova seção na nova praça. Está bem. E para apagar estes Tudo o que precisamos fazer é clicar no X aqui. Vai clicar no X aqui. Esse também se foi e isso cobre todas essas funções e todas as bruxas. Agora também temos algo chamado Global. Agora, este é um pro recursos que faria o seu que é global. Não é importante Só queria mostrar o que é essa parte, mas não vamos usar porque é um recurso pro acontecendo. Sempre que você tiver feito algo que você está orgulhoso, você pode clicar na atualização e que vai atualizar. Também temos a mesma opção. Você poderia salvá-lo como um modelo que estávamos falando anteriormente pode ir para template e seguida, carregar que se você quiser ter um determinado modelo para determinadas páginas e também apenas salvar rascunho e, finalmente, subindo, sabemos que estamos indo Chegar às bruxas se clicarmos aqui direito, mas se clicarmos aqui, teremos um par diferente de opções acontecendo. Nós começamos a definir nossas cores padrão são fundos padrão são seletor de cores padrão, e então nós temos configurações globais, que vai ser coisas como o fundo genérico padrão, o conteúdo com o espaço widget etc. Além disso, temos luz da caixa de luz. Reservado é se você adicionar uma imagem que você clicar sobre a imagem vai aparecer para que você possa ver as imagens mais em tela cheia. É um recurso incrível que eles adicionaram aqui Clique aqui para voltar. Temos as configurações do painel, que é apenas essa parte que passamos anteriormente. Temos o “About Elementary “vai levar-te à página inicial deles. Temos o localizador, o que é muito legal. Se há algo certo que você deseja encontrar nesta página, você pode apenas procurá-lo e, em seguida, podemos ver a página ou sair para traço. Mas qual é o back-end do seu site? Ok, pessoal, agora na próxima palestra, nós vamos realmente ir em frente e decidir o tema em nosso site, ou melhor, o sentimento que queremos expressar. E vamos começar por decidir quais fundos padrão queremos usar para nossos cabeçalhos para nossos subcabeçalhos. Para o genérico, você tem que montar o texto. Dizia para decidir sobre o sentimento e entender que se você não é um designer como eu não sou um designer, é provável que você não seja. Mas há designers lá fora que entendem a psicologia fora dos fundos. Então temos que combinar a psicologia do telefone com a sensação de que você quer entregar aos seus visitantes. E eu vou mostrar exatamente como fazer isso, porque há muitos modelos lá fora que os sites em que telefone expressa, que sentimento Então vamos olhar para que serviço temos? Que sentimento quer expressar? Então, o que telefonou? Podemos decidir expressar esse sentimento e quais fundos combinarão com isso? Então vamos em frente e fazer o mesmo para o tema mais frio do nosso site. Há um super emocionante, tal integral em parte importante fora projetar seus sites, etc Na próxima palestra, caras 5. Configurar valores globais - Fontes: nesta palestra, vamos falar sobre a definição de valores globais. Então, o que é basicamente definir certos valores que l um mentor vai estar usando e outra vez sempre que você está projetando qualquer página. Certo, então vamos começar definindo os valores globais para nossos fundos. Então, enquanto estamos no elementar aqui, o que vamos fazer é ir para o canto esquerdo da ópera aqui, clicar ali e depois mudar para fundos padrão. Vamos passar por fundos antes de cores porque os fundos são tão importantes quando se trata da expressão em si fora do seu negócio fora do site para o seu restaurante, para o seu design ou seu sangue, o que quer que seja que você é criando agora. Então, vamos clicar em fontes padrão aqui. Como podem ver, temos quatro tipos diferentes. Temos uma manchete primária, manchete secundária, um corpo de texto e acento leva. A primeira coisa que vamos fazer é que eu vou colocar para fora quatro exemplos diferentes aqui que vai representar todos esses quatro tipos diferentes de texto. Então eu vou mostrar a psicologia por trás deles e como você pode encontrar uma expressão que vai se adequar ao seu negócio e, em seguida, também ferramentas para encontrar pares adequados para cada telefone. Agora, os fundos são realmente bastante sobre arte. Mas para nós que só queremos ter uma representação realmente boa fora do nosso site nos negócios, nós vamos pegar o atalho e ir para os modelos. Há definitivamente a coisa mais eficaz que podemos fazer aqui. Então, manchetes primárias, segunda manchete corpo leva sotaque leva nós vamos em frente e vamos para o qual não vai colocar isso para fora só para mostrar suas diferenças. Então este vai ser o título, e este vai ser o título secundário e este vai ser o corpo texto vai colocá-lo logo abaixo ali. E eu vou apenas ir em frente e escrever. Este é o texto do corpo que atingiu um baixo. Vou seguir em frente e centralizar estes também, que sejam mais fáceis de ver. E então vamos adicionar o sotaque. Takes vai colocar isso no fundo bem aqui. Então lá vamos nós, e então nós vamos voltar aqui e ir para os fundos padrão. É aqui que estabelecemos os nossos valores globais. Tudo o que vou fazer é abrir estes menus. Lá vamos nós. E é aqui que fica complicado e interessante, porque aqui é onde decidimos sobre nossos telefones e, como estamos falando, fundos anteriores são realmente sobre arte. Então o que nós vamos fazer é que nós vamos usar um guia de pode votar ponto com. Agora, nesse cara, eles têm um monte de modelos diferentes. Eles colocaram uma lista com diferentes pares de fundos que você pode ir em frente e ver o que John seu negócio e seu em verificar que para fora, olhar para seus pais telefone e apenas seguir o exemplo. E se tudo não existir no elementar, vou mostrar-te como encontrar alternativas. Ou se você só quer encontrar suas próprias alternativas de qualquer maneira. Então o que vou fazer é percorrer isto até encontrar algo que goste aqui e aqui. Encontrei esta primeira página. Agora estamos projetando nossa home page, primeira página, home page, que praticamente a mesma coisa. E olhando para isso, acho que parece muito legal. Estou gostando da sensação aberta aqui. Se eu rolar um pouco para baixo. Recebo uma explicação sobre como funciona e, em seguida, também um exemplo prático. E eu realmente, realmente gosto disso. Então, na verdade, eu vou seguir em frente e usar essa configuração, OK, então primeiro temos a manchete principal e isso é o open Sons extra arrojado. Então eu vou voltar e eu vou ir em frente e eu vou escrever sons abertos agora, notar que eles não têm os sons abertos extra ousados, mas o que eu posso fazer é mudar o peso porque o peso é outra palavra para negrito. Então eu vou passar de 600 para 800 nós podemos ver como isso muda toda a sua manchete aqui . E está começando a se parecer muito mais com este aqui, e eu estou realmente gostando dessa aparência. Então, vamos ficar com isto. Vamos voltar aqui. Fundos padrão. Então agora temos dito ou manchete primário. E o que é uma manchete primária? Bem, a manchete principal será quando formos para os nossos elementos ou widgets, e usarmos estas espadas fora dos títulos. Se eu clicar neste título aqui, você pode ver que ele pode ter a tag h um a seis anos Dave Span ou P. Agora realmente não importa qual deles você usa. Vai importar mais, não vai chegar à seção “S e o”. O que é importante aqui é que o título vai estar indo para qualquer seção que você está editando para o que quer que se encontre de tal forma que você queira dirigir para casa, certo? E se voltarmos aqui e voltarmos para os telefones completos, a manchete secundária não existe muito em L.A mentor. A segunda manchete. Vai ser, principalmente, certo, é por isso que estou usando essas bruxas como exemplo. Porque todas as manchetes diferentes aqui, se este h 2345 ou seis, todas são contadas suas manchetes primárias. Então, a segunda manchete, na verdade, vai ser usada muito, muito raramente. É só uma coisa boa de saber, , mas agora não conseguimos encontrar o Cooper Hewitt. Então o que eu vou fazer é ir em frente e procurar por sons abertos e tentar igualar isso indo para o peridot telefônico. Si o não. Tudo isso vai estar no recurso é tão aqui. O que eu vou fazer é procurar por filhos abertos assim e, em seguida, bater, entrar e, em seguida, em baixo, podemos ver um par de pares diferentes acontecendo. E a coisa legal aqui é que você pode apenas clicar sobre isso leva e direita em seu próprio bem, apenas para ver como ele se parece. E então rolamos para baixo até vermos algo que gostamos. Ok, agora, eu realmente acho que este aqui é muito legal. Baskerville deliberada. Estou gostando muito dessa. Então a casa de banho Liber, vou mesmo usar essa. Então, vamos voltar. Vou verificar aqui e procurar o bafo de chumbo, Bhaskar! E lá vamos nós. Lá temos ele. Libertem Baskerville. E depois temos a manchete. Acho que parece muito, muito bom. Agora, se formos para o corpo do texto, este vai ser a maior parte do texto que montamos em nosso site. Vão ser um valor global. Então, sempre que você estiver fazendo uma manchete, você vai tirar esses valores desses filhos grossos que nós selecionamos aqui e sempre que você estiver escrevendo e for preciso, você vai pegar esse corpo. Então eu quero escolher com muito cuidado e ter certeza de que fazemos nossos pares. Bem, agora vamos voltar para a lata de um guia aqui eles estão recomendando que usemos sons PT aqui, então e eu acho que parece muito bom também. Parece muito bom aqui, também. Então eu vou em frente e procurar por filhos do P. T. E aí está. Nós temos isso. Então, vamos ver como isso se transforma. Lá vamos nós. Pode parecer uma pequena diferença. Mas quando você começar a adicionar um monte de texto, isso vai realmente somar. Isto vai ser basicamente 90% do design fora do seu site no final, especialmente se você está blogando. Leva isso tudo patrocinador realmente tudo. Então eu estou realmente gostando dessa parte, e então eu vou ter um sotaque. Leve-nos bem o suficiente para o sotaque leva que vai ser em coisas como os botões como diferentes partes de sua barra lateral, etc. Não, eles realmente não têm uma recomendação para texto de acento aqui, então o que vamos em frente e fazer é ir para o par de fundos novamente, e nós vamos apenas continuar rolando até encontrar algo que combina bem com Filhos abertos. Porque essa é a manchete que estamos a usar. Então vamos para a brisa do mar Serif. Na verdade, estou gostando especialmente da bunda. Um botão pega, como neste caso. Então respire Serif. Vou verificar isso e ver como fica aqui. Congelar! Lá vamos nós. Vou clicar na Kim, e eles iriam embora. Certo, estou gostando muito disso. Então tudo o que preciso fazer agora é rápido e me candidatar. E de repente dissemos nossos valores globais para nossos fundos e isso vai decidir completamente como nos expressamos. Agora, lembre-se, aqui você pode ver que tipo de fundos você quer ter para a tecnologia, por exemplo, por exemplo, que tipo de sentimentos você quer ter por uma galeria de arte para convites e eventos? Quero dizer, todos esses telefones, eles estão expressando sentimentos diferentes. Portanto, é uma boa idéia social ir com os pais do telefone que são recomendados por designers profissionais . São pessoas a fazer pesquisas e estudos nisto. Recomendo que façamos o que funciona. Então, configuramos nossos telefones. Se quiser checá-los, Maurin Death, podemos clicar neles. E então podemos ir, por exemplo, para dimensionar e colocar isso em grande. Podemos até colocá-lo para XXL e ver como ele se parece. E eu realmente gosto disso. O Killeen. Olha, estou super feliz com essa escolha. Acho que devias fazer o mesmo. Confira o recurso é ir e encontrar o seu gênero Jordan ish. Encontre seus pares e depois vá para o elevador superior aqui. Vá para o padrão. Font ia ser seus valores globais. Então estes serão sempre aplicados e depois configurá-los. Acertar, aplicar. E então vamos passar para a próxima palestra onde vamos fazer a mesma coisa para as cores fora do nosso site cores também são super importantes, como podemos ver esta cor, certo? Só não vai ver na próxima palestra. Pessoal, 6. Combine seu menu - fontes de fontes: Muito bem, pessoal, antes de irmos em frente e decidirmos na nossa paleta de cores para o nosso site, dependendo das necessidades de vocês no John e do serviço que estão oferecendo, etc., vamos em frente e combinar com o fundos que acabamos de escolher em conjunto com o nosso menu e nossa comida. Er Now, se você optou pelo elementary can va e você atualmente não tem um menu ou um rodapé e você não planeja usar qualquer um, você pode ir em frente e pular esta palestra. Mas se você estiver, o que eu recomendo que você use o menu na comida ou fique por perto e nós vamos em frente e fazer isso. Ok, então a primeira coisa que queremos verificar são os nomes desses fundos que decidimos para o título principal O segundo Corpo Manchete recebe um texto de sotaque. Agora, o que nós vamos querer combinar é a manchete secundária que formou a família para o menu superior aqui. O menu principal. Está bem. E então vamos em frente e combinar o corpo leva para o texto de direitos autorais e também para a comida nossos links para a política de privacidade e termos e condições Ok, então o que precisamos lembrar aqui é a segunda manchete e o corpo do texto. Ok, então para mim, isso é trabalho Baskerville, MPT Sands. Então, vamos ter isso em mente. O que também podemos fazer é ir em frente e remover. Todos eles iam remover este quadrado inteiro, também conhecido como uma seção. Ao clicar aqui, eles iriam armar. E sempre que você fizer alguma mudança, lembre-se de clicar na atualização. Lá vamos nós. Então nós vamos clicar no canto superior esquerdo aqui e, em seguida, clique em Sair para Dashboard e isso vai nos levar para o back-end para o site, e nós vamos para a aparência aqui em baixo e clique em Personalizar. E então vamos para a tipografia no painel esquerdo, ouvir clicar ali naquela aba, e então vamos em frente e clicar no menu principal. Esse é o primeiro 1 com o qual vamos começar. Eles iam e então nós vamos clicar na família telefônica. Agora, o menu principal é este. Vamos clicar na família telefônica, e eu vou procurar o líder mano. E eles são este Libertador Baskerville. Então, se você der uma olhada no menu principal aqui e olhar quando eu estou clicando no basquete trabalhista , podemos ver a mudança que ele faz. E já sou fã disso. Estou gostando desse grande momento, na verdade. Então isso muda o nosso menu principal. Agora, se pudermos, também podemos mudar o tamanho assim. Se você quiser ter um pouco maior, podemos fazer com que seja igual a 16. Lá vamos nós. Ali. Nós temos 16 realmente realmente gosto dele em Ford. Visto assim, você também pode jogar com o espaçamento de letras. Mas honestamente, eu não faria, porque isso vai estragar a frente em si. E então vamos em frente e clicar na parte de trás, e vamos descer para fazer onde diz comida ou direitos autorais. Certo, e os direitos autorais, na verdade, esse copyright leva o que escrevemos aqui, e eu vou procurar por P. T. Sands. Todos, de fato. Waas clique no PT no meu teclado e ele vai saltar para P T aqui e eles teriam PT Sands. Então, se você ficar de olho neste pedaço de texto e nós podemos olhar para ele, mudar e lá vamos nós. Então não é um grande diferente, mas vai caber muito melhor com o design geral para o site, especialmente quando começamos a adicionar conteúdo a ele. Então o que nós também queremos fazer aqui, é jogar um pouco com este tamanho, certo? Isto é muito pequeno. Agora, talvez queiramos fazer isso um pouco maior. Eu realmente gosto muito de ver Ford aqui. Lá vamos nós. Talvez 30. Sim, vamos manter um 13 parece muito bom. Então 13 e tamanho. Eu realmente gosto deste design. E então vamos em frente e voltar e vamos mudar essas bundas. Bem, então só mudamos a comida ou os direitos autorais. Nós vamos voltar, rolar para baixo para comida ou menu, e nós vamos mudar o telefone. Família também para P T Sands. Ok, agora, dê uma olhada nisso. Mais uma vez, podemos ver a diferença. E lá vamos nós. Agora, algumas pessoas podem oferecer para combinar seu menu superior, seu principal novo aqui com seu rodapé. E você pode absolutamente fazer isso. Não há nada de errado com isso, mas eu pessoalmente, eu prefiro combinar o texto de direitos autorais junto com a comida ou assume tudo. Só acho que faz um design mais agradável e mais limpo. E então eu vou mudar esse tamanho lá. Então vai para aquele 12. Vamos ver. Terceira cena 14. 14. Parece muito bom. Nós vamos ainda. 13. Acho que é muito bom. E então eu vou clicar em Publicar, e isso vai publicar este para o menu principal, as tomadas corporativas e a comida ou menu. Então, foi publicado. Foi mudado. Gente incrível, não com ele. Combine com o telefone em nosso site. Nós definimos os valores globais, o que significa que quando começamos a criar conteúdo, começamos a adicionar cabeçalhos , fundos , equitação, tomadas que vai combinar com os telefones que já temos Escolhidos. Então o quê Vamos fazer o próximo? Está indo para as cores. Confira qual cor deve representar o meu negócio. Que paleta de cores vai caber com isso? E isso é o valor global para as cores, assim como fizemos com os fundos. Veja, na próxima palestra, pessoal 7. Define valores globais - cores: Muito bem, pessoal, nesta palestra, vamos falar sobre as cores. O que eles significam como usá-los corretamente para representar seu negócio e, em seguida, fora do curso, defina nossos valores globais. Agora, assim como com os fundos, podemos tornar isso tão fácil ou avançado que como gostamos de fazer isso agora, eu optei por quatro telefones. Ficará bem com apenas dois. Se você não quer ir muito fundo nele e as cores são semelhantes, você não precisa ir muito fundo nele. Mas eu quero mostrar onde você pode encontrar todo o recurso é fazer a exploração tão profunda quanto você gostaria, porque eu acho que isso é muito divertido. Agora, a primeira coisa que podemos dar uma olhada é o significado e simbolismo fora da cor. Este é um grande tutorial do Canadá. Vou pô-lo lá dentro. O recurso está agora aqui. Eles vão falar sobre o que cada cor simboliza. Então, o que você pode querer fazer é pensar sobre as cores que você tem pensado para o seu design. Veja o que eles simbolizam. Dê uma olhada através do editorial e veja se isso vai de acordo com seus pensamentos e idéias fora seu negócio. Agora, por exemplo, você pode não querer ter uma empresa que as vendas compõem, por exemplo, e usar principalmente preto e vermelho como cores. Porque estas cores de ar realmente agressivas, você pode querer ir com cores mais suaves lá dentro. Isto não está definido em pedra. Lembrem-se que não há certo ou errado aqui, mas há diretrizes sobre o que geralmente funciona melhor. Está bem. E para mim, eu prefiro seguir essas diretrizes, configurá-lo desde o início para que tudo seja colocado no lugar e, em seguida, mantê-lo simples durante todo o design. Agora, a próxima coisa que podemos fazer é realmente ir em frente e gerar nossa própria paleta de cores usando o gerador de paleta de cores de tela. E é isso que vamos fazer. Mas primeiro, vamos dar uma olhada em nossa paleta de cores atual. Então, se entrarmos em escritor elementar, eu defini estes de volta para que possamos verificar as cores diferentes. Perguntado. Eles mudaram. Você pode fazer isso também, se quiser, mas isso não é obrigatório. Isto é só para te mostrar o que a diferença vai fazer. Então, se formos para o botão de menu aqui em cima e, em seguida, passar para as cores padrão, você vai notar que aqui já existem paletas padrão. Então, se você quiser começar logo com isso, você pode clicar em um dos palácio aqui e você vai em frente e pegar o palácio certo? Você pode ver tudo muda instantaneamente, escolha qualquer paladar que você gostaria. Agora vou clicar no descarte aqui para voltar ao original. Isso está definido no momento. Então temos texto primário, secundário e sotaque que vamos mudar a cor agora. A primeira coisa que eu vou fazer, porque eu vou estar baseando as cores deste site fora das cores logotipo direito é uma maneira muito inteligente fora de correspondência com o design do seu site. Então, o que eu vou ir em frente e fazer é usar tela Kohler gerador que eu acabei de falar sobre clique na imagem de upload, e então eu vou rolar para baixo e realmente usar este logotipo que criamos carregado , e então eu sou vai ter uma paleta de cores desse upload que vai se parecer com isso . Agora tudo que preciso fazer é rolar para baixo. E como você pode ver aqui, eu vou ter esta linda paleta de cores baseada no logotipo que está aqui. Ok, então o que eu vou fazer é decidir qual destes eu quero usar e onde. E aqui estão algumas dicas e truques para o futuro design. Agora, se voltarmos aqui, você vai notar que o chamador principal vai estar fora de coisas como o cabeçalho. É também no número contador vai estar no próprio número, que é o símbolo principal fora desse widget. Então todas as coisas grandes, como cabeçalhos como, por exemplo, números em certos depoimentos, etc. Isso vai usar esta cor. Do mesmo modo, isso vai ser a utilização desse fundo. Decidimos para a primária agora secundária. O mesmo que com o fundo aqui. Temos uma cor secundária que está sendo mostrada abaixo do número aqui. E a segunda emergência não é muito comum quando se trata de L.A mentor, mas ainda existe, certo? Toma, Isso vai ser o takes que escrevemos em um sotaque que vai ser em acessórios coisas como botões e certamente Leste, e certamente só isso vem com ele. Então o que eu vou seguir em frente e fazer é realmente colocar o primário em preto. E a razão para isso é por causa de que esta ciência que vamos fazer vai conter Back Cross. Vai haver uma única cor ou uma imagem grande. E para isso, a coisa mais fácil a fazer é manter seus títulos e grandes tomadas em branco ou preto. Então essas são as duas cores primárias que eu vou usar no design para os cabeçalhos. Então o que eu vou fazer é que eu vou voltar para a paleta de cores e eu vou clicar na cópia aqui mesmo porque ele vai ser lidar com o tom preto do logotipo que estamos usando. Se eu tivesse um tom diferente de preto, ele teria escolhido isso, e eu teria usado isso em vez disso para combinar com o logotipo. Eu vou voltar, clique no primário aqui. Eu vou remover isso e então eu vou apenas ir em frente e colar isso dentro e então eu vou clicar fora assim e você pode ver que ele se transforma em breu preto junto com o número. Prefiro manter as cores bem simples. Então o que eu vou fazer é eu vou voltar e eu vou cozinhar este ótimo aqui. Eu vou voltar aqui e eu vou manter o mesmo cinza para secundário assim e para o texto apenas assim, porque eu não quero brincar com muitas cores. Da mesma forma com fundos, eu fui para quatro. Você pode ir com dois. Você pode ir com três. Prefiro manter um par de mais lá, mas cabe a você. Eu prefiro ir mais simples com as cores de design. E finalmente, o sotaque, vamos ser o botão e esse tipo de widgets. Eu vou estar usando este tipo de cor de tomate que é tirado diretamente do nosso logotipo porque isso vai ser uma bela combinação em todo o nosso site. Então eu vou ir em frente e eu vou clicar em Accent aqui, remover isso, colá-lo, e lá vamos nós. Vou clicar em aplicar. E agora vou clicar na atualização e escolhemos nossas cores. Super fácil, super legal. Agora, mais tarde, você também pode notar que há alguns chamadores como o azul ainda aparecendo quando eu sobre o meu mouse sobre o menu aqui. Então é disso que vamos tratar na próxima palestra. Agora, se você teve algum problema para extrair uma paleta de cores decente do gerador do Canadá, o que você pode fazer é usar este extrator Kohler aqui também está no recurso é. Tudo o que você precisa fazer é carregar o arquivo rolar para baixo, encontrá-lo Lá vamos nós assim, e então você passa o mouse sobre. E digamos que eu quero extrair esta cor. Você pode ver o Suman à direita aqui. Onde quer que eu segure minha boca, eu vou clicar nela e vai me dar o código de cor. Eu copio. Eu colei herdar elementar e você tem isso Super simples. Agora, se você realmente gosta disso, você quer mergulhar mais nas cores. Eu também vou ir em frente e adicionar estes para o recurso é não. Esta é uma paleta de cores de zona de pomba. Então, o que? Você pode fazer aqui é encontrar seu próprio colarinho que você gosta? Por exemplo, digamos, você realmente gostou desse vermelho? Então o que você vai notar é que muitos desses eles estão se movendo em uníssono quando você está movendo isso. Então, isso significa que se você tem um certo pastoral, todos os outros, eles vão se tornar um burro pastel. Bem, então perguntado, você encontrar uma cor agradável que você gosta, por exemplo, este vermelho. As outras cores vão estar combinando com elas. Então, se você realmente gosta disso e quer ir, quanto mais avançado você pode ir em frente e fazer isso, encontre sua própria paleta de cores. Em seguida, basta copiar colar os chamadores de baixo aqui e finalmente, para sua inspiração. Este é também o recurso está aqui. Vamos ter alguns sites de exemplo de como eles estão usando coleiras diferentes, a fim de projetar seu site. Você pode ver um monte de pessoas realmente ousadas com os chamadores aqui misturando muito correspondência. É realmente excitante porque este sinal é muito pessoal. Você pode projetá-lo do jeito que quiser. Eu prefiro ir um pouco mais simplista com as cores, mas no final, estas não são definidas em pedra. Nem a frente. Podemos sempre voltar, mudar os colares e mudar os valores globais sempre que quisermos ao longo do nosso design, como quisermos. Agora, na próxima palestra, pessoal, vamos seguir em frente e nós vamos ser trocados nas cores fora quando passarmos o mouse aqui no menu porque eles ainda são azuis, e eu quero que eles estejam no mesmo vermelho Este aqui. Agora, na próxima palestra, o que vamos fazer é mudar a cor. Quando pairamos nossas bocas sobre o menu aqui, você pode ver que ele se transforma em um azul. Eu queria me transformar no mesmo vermelho que temos em nosso logotipo e que temos definido para o nosso chamador de sotaque, certo? O mesmo acontece com o mais longe aqui em baixo. Você pode ver que se transforma em azul. Quero transformá-lo naquele vermelho. Portanto, mantenha seu site aberto ou onde quer que você tenha extraído suas cores para que possamos usar esse código de cor. Claro, Se você tem seu próprio curso ou códigos de cores diferentes, basta ir em frente e usar aqueles e este sinal livremente. É assim que eu faço. É suposto ser um passo a passo para ajudá-lo, mas você sempre tem mãos livres no final. Isso é o que é tão divertido com o design. Desde que estejamos fazendo os elementos importantes juntos, certo, então vendo a próxima palestra, pessoal. 8. Combine seu menú - cores de rodapé: Ok, pessoal. Então, nesta palestra, vamos em frente e combinar a paleta de cores que criamos ou simplesmente copiamos para o nosso menu principal em nossos links e em nossa comida. , Certo, porque você quer igualar tudo. Neste momento, temos a paleta de cores dos direitos do logotipo aqui. Mas quando eu passar o mouse sobre o menu principal, ele se transforma em azul claro. E isso realmente não combina. Queríamos combinar com as outras cores, como a cor do botão, por exemplo, para dar uma maneira mais legal decidido geral, muito mais profissional. Então o que eu vou fazer primeiro e acima de tudo no Leste, eu vou clicar aqui, e eu vou hiperligar este corpo para que eu possa mostrar a vocês qual é o efeito de pairar e qual será a cor se você não souber o que é um efeito de pairar, Vou te mostrar isso em um segundo. Eu só vou ir em frente e clicar no link inserir e escrever pontos do Google. Venha. Lá vamos nós. Então agora quando eu clicar sobre isso vai me levar para o Google, mas notei que quando eu passar o mouse sobre este link, ele se transforma em uma cor azulada. Isso é chamado de efeito hover. Quando algo muda a cor ou o tamanho, por exemplo, quando você passa o mouse sobre ele, então vamos mudar essa cor também. O que queremos fazer agora é que queremos ir para o canto superior esquerdo, clique no botão do menu distante e, em seguida, clique nas cores padrão. E nós só queremos deixar isso aqui para que tenhamos acesso rápido às diferentes cores . Em seguida, vamos clicar neste logotipo aqui, botão direito do mouse e clique em Abrir link na aba Nova. E a partir daqui, vamos em frente e clicar em Personalizar, e então vamos para Opções gerais e à esquerda aqui. E então vamos clicar no estilo geral à esquerda aqui. Então é aqui que elegemos nossas cores. E na primeira coluna aqui em cima, onde temos as cores primárias e principais da borda, é aqui que podemos mudar essa área. Então a primeira coisa que vamos fazer é clicar no Chamador Primário e ir em frente e mudar este colar. Lembra-te que te falei sobre o efeito de sobrecarga, por isso faz sentido mudar a cor do efeito do porto. Lembra-te que te falei sobre o efeito de sobrecarga, Você vai mudar essa variedade de chamadas aqui, mas por alguma razão, em Ocean WP, a cor primária será a cor de Harvard. Então isso engloba ambos. Eu não tenho idéia por que eles fizeram isso no design, mas atualmente, é assim que funciona. Então vamos seguir essas regras. Então o que queremos fazer é mudar esta cor esta cor clara azulada para este colarinho vermelho. Ok, então eu vou clicar neste colar aqui, e então eu vou voltar para o elementary na guia anterior. Eu vou clicar neste vermelho, ouvir a cor do acento, e então eu vou apenas ir em frente e selecionar este código. Eu vou ficar com ele e depois voltar aqui. Vou remover este código, e vou colar este código. Ok, então agora olhe o que acontece quando eu passar o mouse sobre o menu, certo? Ele muda para aquele mesmo chamador que estamos usando como um tema que está em nossa paleta de cores. Agora, se isso não mudar de cor instantaneamente, basta clicar assim para baixo, e então você pode clicar nele novamente. Isso geralmente irá definir o chamador, então isso parece muito bom. Mas se descermos para a cor do corpo aqui, podemos ver que isso fica vermelho também, o que é muito bom. Mas tem uma cor mais escura porque é hiperligada, certo? Também podemos ver aqui embaixo onde diz o que temos nosso aviso de cookies. Isto vai ficar vermelho. Mas a cor principal data cor natural é tão escura que não podemos nem ler este aviso de cookie . Da mesma forma, temos weiter e isso se transforma em vermelho também. Para que possamos mudar tudo isso. Pergunte. Nós desejamos. Agora o que eu vou querer mudar é na verdade esse chamador que ele muda porque eu não quero que os hiperlinks sejam neste tipo de cor acinzentada. Então você dificilmente pode dizer que é um hiperlink. Na verdade, eu queria estar em vermelho. Então o que eu vou fazer, é clicar este aqui para baixo e então eu vou para baixo. Vamos passar por isso em um segundo. Não se preocupe. Eu vou descer. Vou pular fundo do site porque vamos fazer isso em um mentor e eu vou descer para a cor do link, certo? Então, a primeira coisa é, o chamador em si vai ser a cor natural desligada. O link vai para todos os hiperlinks, incluindo este Isso vai para a nossa política de privacidade. E o que eu gosto de fazer aqui é realmente ir para a cor e usar a mesma combinação de cores que eu uso para o logotipo, o colar de sotaque, etc. E então eu vou apenas ir em frente e removê-lo, colá-lo dentro, e lá temos esta bela cor vermelha. Mas a coisa é que, agora, quando eu passar o mouse sobre, nada acontece. Então nós meio que queremos ter esse efeito pop como este parece muito bom que algo acontece quando você passa o pairinho. É muito profissional. Então, o que eu vou fazer é descer para o “Caller Hover “bem aqui, e eu vou inserir o mesmo chamador aqui também. Mas agora eu vou descer um pouco neste para que ele fique um tom mais claro fora do vermelho e clique fora assim. Então olha para isto. Agora você vê como ele aparece um pouco quando eu passo o mouse sobre o mouse, e isso significa que quando você passa o mouse sobre um link, algo acontece. E isso é um sentimento muito profissional de ter uma política de privacidade semelhante. Põe o rato por cima. Ele se ilumina. É uma coisa tão boa que você vai notar. O Hover Think está na maioria dos lugares em nosso site. Então olha para isto. Ok. Mas, Tom, por exemplo, se eu passar o mouse sobre o mouse notado que fica mais escuro sobre um mouse sobre a política de privacidade, ele fica mais claro. Temos a sensação de que algo acontece. Então temos a política de privacidade e os termos e condições, e tudo o que precisamos fazer é manter esses ativos é porque, honestamente, eu acho que isso parece muito bom. Então esta é agora a nossa cor primária. Estou muito feliz com isso. Então o que eu vou fazer é ir em frente e clicar em Publicar. Agora, também há algo aqui chamado “Chamador da Fronteira Principal”. Agora, a chamada de borda principal se é realmente esta pequena linha que separa o próprio menu superior . Então, se eu iria para a cor da borda principal e eu realmente pressionar isso em branco olhar aqui. O que acontece? Então eu clico em branco e você pode ver que a borda desaparece e agora isso derrete no site e isso pode ser uma boa vantagem se ele se encaixa no seu design, certo. Você quer colocar um menu em seu plano de fundo, Mas se você quiser manter o menu separado, você pode ir em frente e clicar de volta clicando no padrão aqui e você começa esta pequena linha que separa tudo. Agora, claro, eu poderia ir em frente e mudar isso e colocá-lo em uma linha vermelha também. Mas, na minha opinião, isto não parece tão bom. Na verdade, prefiro que isto tenha uma boa separação. O que também queremos notar é que quatro nosso menu superior que não teria praticamente editado completamente como queremos. Há algo aqui em cima que diz, Coloque o seu conteúdo aqui. Por causa disso, temos outro chamador da fronteira principal aqui. Então o que vamos fazer é realmente ir em frente e remover este chamado menu superior. Isso é chamado de parte do menu superior para que esta cor da borda nem sequer existe. Só vamos ter o mais baixo direito. Então nós vamos ter este efeito realmente agradável quando nós realmente rolar em nossa página inicial. Porque agora, quando somos brancos para brancos, temos o branco no menu e temos branco no fundo. Ele ainda separa esta cor da borda, separa o menu do plano de fundo. Nós removemos, ele não se separa. E eu gosto muito disso. Olhe para fora a separação para o menu. Então vamos em frente e remover este espaço de menu superior que podemos fazer um ajuste ainda mais agradável para o menu aqui. Menu superior, menu normal. Então eu vou em frente e clicar em editores. Certifique-se de que você sempre publica e salva tudo o que faz. E então eu vou clicar em volta aqui, e então eu vou clicar em volta mais uma vez, nós vamos para baixo para onde ele diz barra superior, certo? E depois vamos ao General e depois vou desactivar este bar Hope, e vais perceber que isto desaparece mesmo. Algumas pessoas chamam de menu superior. Algumas pessoas chamam de barra superior, mas qualquer taxa que você clique aqui para personalização topo são desmarcá-lo, clique em publicar, e temos um olhar muito mais agradável em nosso site e Onley uma cor borda principal. Então nós temos o menu nós temos o top muitos ou os Tope estão todos desaparecidos caras. Ótimo trabalho. Vamos passar para a próxima palestra. Nós ajustamos tudo. Veja lá. 9. Anatomia em seções: Ok, pessoal, nesta palestra, nós vamos aprender sobre seções o que eles são e como usá-los. Então esta parte em L. Um mentor é chamado de seção, e eu já estive me referindo a esses quadrados. Então, esses quadrados são conhecidos como seções, e uma seção permite que você adicione um monte de colunas diferentes neles para que você seja capaz de projetar praticamente qualquer coisa que você quiser. Então, para quebrá-lo, a primeira coisa que temos é a parte direita da seção que podemos arrastar qualquer coisa para dentro. Agora, dentro dessa seção, podemos criar uma coluna, e é dentro desta coluna que vamos adicionar em nosso elemento. Se você se lembra no Element , pode estar na imagem. Pode ser um cabeçalho. Pode ser um vídeo. Pode ser um texto, basicamente um contador. Qualquer coisa. Pode ser qualquer coisa que é chamado no elemento. Também pode ser um widget de qualquer tipo, direito de ser qualquer coisa. Então, neste exemplo, eu adicionei em uma imagem e aviso, porque eu tenho um elemento. Essa foto provavelmente vai cobrir toda a coluna. Se você quisesse. Eles estão dimensionando é completamente com você, mas o elemento cobre que o chamam agora. As colunas são completamente personalizáveis. Então, se você quisesse, você também poderia estar dividindo isso para chamá-lo. Então isso significa que se você pudesse alterar completamente a saída no que você está criando, por exemplo, você é capaz de adicionar dois elementos em vez disso. Então, em vez de ter uma foto grande, você poderia estar colocando uma foto para a esquerda. E então você poderia estar adicionando um pedaço de texto aos direitos. Certo, então agora temos um produto à esquerda e podemos ter uma descrição do produto à direita. E por causa dessas colunas, é tão fácil centrá-las e certificar-se de que tudo está no lugar certo em nosso site. Então, se você quiser adicionar algo adicional aqui, nós poderíamos fazer uma chamada para eles dentro desta coluna. Acho que chamam essa exceção de coluna. Brincando à parte, chamava-o dentro de uma coluna. Então isso significaria apenas que nós adicionamos em outra peça como esta. Ok, então, para a coluna direita, nós adicionamos em outra chamada em que podemos adicionar um elemento adicional e que poderia, por exemplo, ser um agora inferior. Pode ser qualquer coisa que queiramos acrescentar. Então, sempre que você está fazendo algo no seu site dentro da sua seção, você quer ter uma idéia fora? Quantas colunas vou precisar aqui? Qual é a perspectiva? O que é decidir que eu estou indo para porque praticamente o céu é o limite aqui, pessoal, porque você poderia muito bem ter tido quatro colunas. E dentro de todas essas colunas, poderíamos estar adicionando críticas. Por exemplo, poderíamos estar adicionando depoimentos ou um monte de produtos porque todas essas colunas vão conter elementos. E o que esses elementos são depende completamente de você, é por isso que elemental é tão fácil de usar. E uma vez que você entende as seções que os chamam um pouco de elementos para adicionar, todos esses sites realmente profissionais de aparência são de repente muito fáceis de recriar. Agora, se quiséssemos, todos esses comentários, depoimentos ou produtos poderiam ir de 4 a 6 e foram capazes de adicionar elementos em cada um desses e agora de repente poderíamos ter uma exibição de produto. Em vez disso, o céu é o limitado. Só saiba que dentro de cada seção haverá colunas. Um chamou-lhe várias colunas, não importa. Mas isso vai ser decidido pela forma como você quer colocar seus elementos. Se você tem uma galeria, por exemplo, você pode ter uma coluna e apenas uma galeria grande, ou você pode ter várias colunas e adicionar a imagem manualmente. Deixe-me mostrar-lhe um exemplo prático. Então, se olharmos para o site de Pat Flynn derenda inteligente e passiva, podemos ver que ele é renda inteligente e passiva, muito semelhante a nós ou melhor, nós muito parecidos com ele temos o nosso menu aqui em cima, certo? O mesmo vale para nós. Temos o nosso menu aqui. Então ele é um menu adicional. Mas não vamos precisar disso lá embaixo. Aqui ele tem sua primeira seção direita. É aqui que vamos projetar nossa página inicial para a primeira seção, arrastando tudo aqui agora quão grande você quer fazer suas seções? Isso vai ser completamente com você. Mas, na minha opinião, a solução mais prática e a forma como vou projetar a página inteira será dividindo a seção, dependendo do que estamos adicionando. Então, por exemplo, aqui temos o chamado acima da dobra. Se você se lembrar, isso é porque esta é a camada superior que você está vendo na tela. Então aqui ele adicionou, obviamente uma imagem de fundo de si mesmo que é completamente branca. Há uma foto dele e sua assinatura aqui à direita e à esquerda. Aqui ele adicionou em um cabeçalho. E brilhante, deixe-me ajudá-lo a construir uma renda passiva impulsionada negócios on-line abaixo. Este é um cabeçalho adicional é apenas um menor. Talvez no H três na h quatro. Vamos aprofundar o que eles são e o que significam mais tarde no curso. Mas basicamente H um é o maior. H seis é o menor. Hendrawan indo para a cabeça ou três para etc. E, em seguida, ele adicionou em um botão aprender mais aqui que tem um pairar sobre o efeito. E tudo isso agora, quando olhamos para ele, é realmente muito simples. Mas é tão eficaz e tão bonito. E este é o seu acima do design de dobra. Ok, então eu colocaria tudo isso em uma seção e então poderíamos adicionar as colunas, por exemplo. Poderíamos ter nos dividido. Eles o chamaram para aqui onde, como temos uma imagem de fundo dele e então um branco o chamou, ou poderíamos ter uma grande coluna onde isso é, na verdade, apenas uma grande imagem. Tudo depende da praticidade na imagem, no material, como você quer decidir. É a Sarah. Não há realmente nenhum certo ou errado aqui. Trabalhamos com o que temos, certo, mas depois queremos adicionar um cabeçalho, outra cabeça ou qualquer fundo para que possamos ver que talvez aqui queiramos ter uma coluna grande . E aqui nós queremos ter três colunas e vamos aprofundar mais em como isso funciona em uma próxima palestra, porque nós vamos estar projetando nossa própria página inicial, e nós vamos ter um olhar semelhante a isso com uma descrição com uma boa imagem de fundo grande e um botão, porque eu absolutamente amo isso. O sinal Então isso pode ser uma seção rolando para baixo. Temos a característica da prova social e diz que o New York Times, a Forbes Lifehacker Inc. blogueiro profissional. E isso é muito bom porque tudo que você precisa fazer é ter essa parte como uma seção criar um fundo preto, e então você pode adicionar em um texto ou um Hedren muito pequeno aqui e direito como destaque em. E então você iria apenas adicionar uma imagem aqui, uma imagem aqui, aqui, aqui e aqui e estas poderiam ser colunas. É assim tão simples. Então isso seria 12345 e seis colunas. É assim tão simples. E, em seguida, basta adicioná-los um ao outro em um papel como este. Então, há muitas estações de clientes diferentes que você pode fazer. Ou pode ser uma grande seção com um grande chamado com apenas uma imagem adicionada. Rolando para baixo. Nós temos o e-mail muitas vezes. Mesma coisa. Esta pode ser uma seção aqui, e então temos um cabeçalho adicionado abaixo. Temos um cabeçalho menor e, em seguida, temos o e-mail aberto e, em seguida, o fundo adicionado, e isso é tudo super simples por design. Mas a coisa linda é como profissionalmente limpo parece agora, se você quiser, você poderia ter isso e isso e isso dentro da mesma seção. Na minha opinião, isso não é prático, mas você pode fazê-lo para que não haja tanto certo ou errado aqui. É mais sobre praticidade e como você deseja dividir as diferentes colunas e os diferentes elementos com os quais você trabalha. Mas agora que estamos começando a aprender sobre a seção sobre as colunas sobre os elementos , e sabemos que tudo é apenas arrastar e soltar e nós fizemos o framework com o pré projetado com os valores globais, As coisas já não parecem tão difíceis, pois não? Então, o que vamos fazer é se vamos seguir em frente, continuar aprendendo e, em seguida, começar a projetar nossa própria página inicial olhando para a frente, os caras de hoje seguem ao longo do meu passo, e você também vai ter uma página inicial incrível em nenhum momento ver a próxima palestra 10. Parte 1: Tudo bem, pessoal. Então, nesta palestra, vamos começar a desenhar o fundo para a nossa página inicial. Agora, antes de irmos em frente e fazer isso, vamos querer ir ao menu aqui em um mentor e verificar o nosso seletor de cores. Agora, o seletor de cores será as cores padrão que você pode escolher quando estiver projetando. Então, nós já dissemos nossos valores globais, que significa que esses serão os valores primários quando, por exemplo,estamos por exemplo, adicionando uma guerra principal. Quando estamos adicionando um texto, por exemplo, um fundo, você se lembra dessa palestra, certo? Mas aqui está um seletor de cores. Então, quando estamos projetando isso, eles vão ser a cor primária para nós escolhermos. Agora, o que eu quero fazer é realmente adicionar um pouco de nosso palácio de cores aqui, por exemplo, eu quero ter o avermelhado em vez de talvez o azul, e eu também quero a versão mais leve fora. Ótima. Então eu vou voltar e ir para as cores padrão. Vá para o cinza aqui. Eu vou lidar com isso, e então eu vou voltar, ir para o seletor de cores e, em seguida, substituir um desses cinza por esse código aqui dentro assim. Ok, eu vou fazer o mesmo para a próxima. E eu realmente recomendo que você faça o mesmo bem para ter certeza de que você tem a paleta de cores . Pergunte a sua escolha padrão porque você vai nos notar. Se formos, vai ser muito diferente. Possível personalização é para nós, e eu vou remover este tipo de cor azulada que temos aqui assim e colá-lo e lá vamos nós. Então, agora, quando eu verificar o seletor de cores, eu adicionei as paletes que eu realmente quero ter lá dentro. Ok, pode ser mais pode ser menos para você. Então vamos começar a editar nosso plano de fundo para nossa página inicial. Agora, antes de começarmos, há algumas coisas que eu quero que você saiba sobre que vai decidir que tipo de imagens de fundo vamos usar especialmente para você, já que você vai ter o seu próprio site com seus próprios objetivos em seu próprio gênero, nichos, produtos, etc. Então, isto é, se olharmos obter o site de Pat Flynn renda passiva inteligente, que temos feito muitas vezes, porque é tão bom. Você vai notar que ele tem algo que é chamado de tolo com design. Então isso significa que sua imagem, sua imagem de fundo que acontece de ser branca. Aqui vai todo o caminho até os fins. Se rolarmos para baixo, aqui está outro widget aqui embaixo usando uma cor de fundo preta que vai até o fim. Agora o conteúdo em si é caixa. Você pode ver que este cabeçalho está em linha com este cabeçalho menor está em linha com este botão que está em linha com isso como destaque em etcetera, etcetera que é chamado de conteúdo caixa. Mas o fundo, as imagens aqui estão cheias. Agora, se olharmos para WP iniciante ponto com, por exemplo, você vai notar que eles têm tudo super encaixotado aqui e eles não estão usando o recurso completo com. Então este é um design completamente diferente. Então isso significa que para o nosso propósito, como vamos adicionar em uma grande e agradável imagem de fundo aqui, vamos querer que seja mais Horace Santel, a fim de ter este tipo de olhar cheio. E se tivéssemos em um olhar como este, por exemplo, poderíamos querer usar algo que é um pouco mais vertical. Portanto, esta é a primeira coisa que queremos saber antes de avançarmos com o nosso design. Então estes ar tanto grandes exemplos como sites. Agora, a fim de encontrar a nossa imagem de fundo a menos que você tenha a sua própria, vamos seguir em frente e usar picaretas obedecer porque há um monte de belas imagens de alta resolução aqui que você pode usar gratuitamente, não atribuição necessária. Claro, se você tiver o seu próprio, você pode usar isso. E se você não conseguir encontrar o que você está procurando, você pode usar shatter stock dot com. Vou adicionar isso em recursos também. Mas antes de seguirmos em frente de novo, há algumas coisas para pensar aqui. Queremos saber sobre o ponto focal da nossa imagem. Ok, então se você está usando uma foto fora de si mesmo, você quer saber que essa foto fora de você vai ser um pouco mais centrada, certo? E a razão para isso é quando começamos a torná-lo móvel e responsivo à mesa. Ah, muitos desses lados vão desaparecer da foto. Portanto, se é importante que você esteja na imagem, você quer ter certeza de que você tem um ponto focal claro nessa imagem. Semelhante. Se você tem um produto ou algo, ou alguém que você representa Agora eu vou ir em frente e procurar uma imagem que vai dar uma grande sensação quando eles vêm para o nosso site para o ponto focal não será tão importante. Mas eu digo que vou mostrar a vocês como fazer as versões adaptadas e responsivas. Ok, então a primeira coisa que vou fazer é procurar na imagem. Agora, a palavra-chave aqui pode ser qualquer coisa que sirva para mim e Jesper. Estamos fazendo cursos focados em negócios e marketing. Mas realmente o que eles estão fazendo, os benefícios desses cursos é realmente criar liberdade para dar resultados e inspirar as pessoas. Então eu vou usar uma das duas palavras-chave aqui. Haverá liberdade. Eu ia ser a inspiração que eu quero que o sentimento seja quando eles entrarem no nosso site. Então vamos anos de inspiração aqui. Eu vou escrever inspiração, e eu vou apenas ir em frente e procurar lá e então eu vou clicar na orientação e escolher horizontal porque nós vamos usar o completo com opção. E agora, pessoalmente, para mim, as fotos que eu prefiro e eu procuro, o tipo de imagens da natureza que eles vão fazer, natureza e paisagem vão escolher isso. E então eu vou ir em frente e rolar para baixo até encontrar alguma coisa. Agora, há algumas boas opções aqui, mas o que eu realmente gosto é desta aqui, ok? E a razão pela qual eu gosto tanto deste é porque eu já posso ver o esboço que eu vou estar usando para que eu possa usar um cabeçalho aqui. Eu poderia usar uma descrição de texto aqui e um botão em algum lugar por aqui. E porque muitas vezes lemos da esquerda para a direita, dependendo de onde você está no mundo, eu prefiro colocar o conteúdo à esquerda. Você poderia colocá-lo à direita ou no meio, por exemplo. Mas com esse cara à direita e a sensação que esse pregador produz, eu realmente quero colocá-lo nessa área. Então eu vou em frente e baixá-lo. Você sempre quer ter certeza da licença. Está bem? Não, atribuição Grande livre para uso comercial. Óptimo, porque isto é de uso comercial. Vamos em frente e clique no download gratuito e certifique-se de que você não está baixando a versão enorme. Porque em um mundo de sonhos, nós não queremos que nosso próprio site seja maior do que um par de megabytes movimento 345 megabytes. Porque quanto maior for o nosso site, mais há para carregar este tempo de carregamento do carregador. Pior sdo pior experiência do usuário. Então vamos escolher este tamanho em vez deste tamanho, porque olhe para a diferença de tamanho que é enorme. Então, e não haverá perda de qualidade usando isso. Então nós vamos para esta qualidade e nós ainda vamos ter Smush You tem seguido o curso para nos ajudar. Então eu vou ir em frente e clicar no download bem ali e então eu vou voltar. Então, aqui dentro, eu vou para os elementos. Agora a primeira coisa a notar é que não há nada acontecendo aqui. Para que eu consiga uma seção para trabalhar, eu realmente preciso usar um elemento digital e puxá-lo para fora. Largue isso. E agora, de repente, tenho uma seção que anda por aqui. Tenho uma coluna aqui e dentro. Chama-se ele. Eu tenho o elemento, e esse é o texto. Não, não vamos trabalhar no título desta palestra. Isso será para a próxima palestra. Agora, a fim de começar. O que nós vamos fazer é ir para o meio aqui onde ele diz e é seção e nós vamos clicar sobre isso. E agora podemos editar esta seção inteira. Então a primeira coisa que vamos querer fazer é mudar para o estilo. Há muitas opções aqui. Vamos passar por eles, mas vamos preencher o nosso propósito. Primeiro, vamos para o estilo e, em seguida, fundo e, em seguida, clique em Normal porque passe o mouse, lembre-se disso quando você colocar o mouse sobre Então nós vamos para o tipo de fundo normal e nós vamos clicar em Clássico, e então eu vou clicar no mais lá, e eu só vou fazer upload de arquivos e eu vou selecionar esse arquivo e carregá-lo e lá iria, Ele é carregado. Vou selecioná-lo e clicar em inserir mídia. Então, olhando para a esquerda aqui, podemos ver que esta é a imagem é realmente legal. Adoro a sensação que ela produz. Mas como você pode ver, não é realmente dar os resultados que estamos procurando, certo? Então a seção agora é muito pequena. Se eu descer e clicar nas mudanças de pré-visualização, podemos ver que praticamente dois rodapés e estes bem são supostos imagem de fundo são do mesmo tamanho. Eu não acho que isso seria justo para Bem, eu não seria um designer de site orgulhoso com este resultado. Então o que vamos fazer é que vamos voltar para o layout, e vamos aumentar o tamanho da seção para que possamos ter Esta é uma imagem de fundo . Em outras palavras, acima do fundo da dobra, este sinal. Ok, então nós vamos para a altura aqui onde ele se estende e depois vamos para nos esconder. E depois vamos mudar da falha para a altura mínima assim. E o benefício com isso é que você pode escolher a altura você mesmo, OK? Então, como você pode ver, mais eu rolava, maior ou melhor do que mais altura nós temos agora, a imagem ainda não é dimensionada, mas estamos recebendo mais altura para a imagem estar dentro desta seção. Então, eu vou com isso agora. Eu acho que há um pouco grande que eu vou ficar com 700. Normalmente é uma boa. Podemos simplesmente ir em frente e clicar em pré-visualizar alterações para ver como ele parece. Podemos ver que cobre tudo. Oh, tão bem, realmente amando isso. Agora podemos dizer que a resolução não é como deveria ser. Então nós vamos voltar e vamos mudar a resolução dele. Vamos voltar ao estilo aqui, e depois vamos para o tamanho, está bem? E vamos de padrão para capa, então veja a diferença que este faz agora a capa significa que vai cobrir a imagem vai cobrir toda a seção agora. Se estivéssemos usando algo como conter, então a imagem estaria se contendo, significa que manteria seu tamanho. E talvez não se desvanecesse também. É assim. Se eu usá-lo assim, você pode ver que ele tem está se dobrando abaixo da cabeça aqui porque ele está tendo uma solução diferente para. Então, basicamente, sempre que eu adiciono uma imagem de fundo, eu sempre vou com a capa. Sempre, sempre. E temos um visual muito bonito assim. Posso descer para pré-visualizar as mudanças, e podemos ver que as coisas estão realmente bonitas. Estou amando isso. Ok, então nós realmente temos um bom começo acontecendo aqui. Agora vamos passar por um par de opções diferentes. Vou dizer-te quais são, e depois vamos adicionar mais coisas para que isto pareça ainda melhor. 11. Parte 2: Então, se começarmos o layout, há algumas opções aqui. Vamos passar pela maioria deles porque vamos usar tantos “pedem “ que vamos de qualquer maneira. E então essa palestra seria de 50 minutos em vez de mantê-la um pouco mais baixa. Muito mais baixo. Esperemos. Então o 1º 1 é uma seção esticada. Agora, eu não fico com isso porque eu prefiro configurá-lo sozinho. E por que eu vou te mostrar daqui a pouco se movendo para baixo. Temos o conteúdo com a forma como queremos que o conteúdo seja. Ou poderíamos ter uma caixa. Poderíamos tê-lo cheio agora. Lembre-se que eu disse que ambos Pat Flynn e WP iniciante eles têm sua caixa de conteúdo, que significa que eles deixam um pouco de espaço no lado. Se olharmos para a pré-visualização, você pode ver que há um espaço acontecendo neste lado bem aqui. Certo? Então, se eu mudar isso para brincar e clicar em “Pode visualizar”, você vai ver que esse texto vai pular todos os pesos. Você é a esquerda aqui porque ele não está mais encaixotado. Então, o que eu prefiro fazer é usar imagens de fundo de tamanho completo, mas encaixar meu conteúdo. Então eu vou manter esta caixa para manter tudo mais na linha e mais profissional. Ele também vai transferir muito mais para a capacidade de resposta de tablets e telefones celulares. E então temos a lacuna chamá-los. Quer ter alguma lacuna nas nossas colunas? Podemos vir a usar isso como adicionamos em colunas mawr e mais elementos. Também temos a altura mínima. Poderíamos ter pés para examinar. Podemos ter a culpa. Agora, os pés para a tela geralmente não funcionam tão bem porque não combina. Então eu prefiro usar a altura mínima disse que eu mesmo e então nós também podemos clicar aqui, certo? Então agora eu também posso mover para baixo para a versão tablet e ver como o plano de fundo vai ficar . E é por isso que o ponto focal é tão importante que eu falei para vocês, porque se , por exemplo, esse cara também aqui fosse sem importância ou parte integrante deste projeto, então eu ficaria bastante desapontado ao saber que ele não é mesmo incluído na versão tablet. Portanto, é tão importante que você tenha certeza de que conhece seu ponto focal e certifique-se de que você pode centrá-lo mais para que possamos nos adaptar à versão tablet e à versão do telefone celular . Mas o que também podemos fazer aqui é torná-los mais responsivos personalizando-os nós mesmos. Agora, você pode ver que se você quiser a imagem completa, nós não podemos cobrir a tela inteira. Então essa vai ser sua própria decisão. Como você quer projetar isso? Talvez isso não seja importante, mas eu prefiro cobrir mais a tela. Então eu vou fazer algo assim. Então, ele ainda parece melhor do que o anterior, porque eles têm quase muito mais assumido em. Mas não mostra tudo, mas com este desde o ponto focal, ou a imagem é um importante além do sentimento que está completamente bem. Agora, nós também temos o celular acontecendo aqui. Você pode ver a tolerância. Veja, é um balão de ar. Não muito impressionante, revenda honesta capaz neste direito. Mas a imagem realmente parece muito bonita, mas eu ainda quero mudar isso um pouco agora. Se eu seguir em frente e eu fizer isso assim, você pode ver que o balão de ar tem um papel muito menos central agora. Você tem toda essa vista e tudo mais, você ainda tem a sensação. Portanto, é tão importante garantir que tudo fique bem no tablet e no telefone celular. E nós vamos pedir algumas dessas corridas. Vamos para a direita é uma parte tão importante do design. Então nós temos estes e, em seguida, nós também temos a posição da coluna. , Lembrem-se, esta é a coluna. Este é o texto. Vamos voltar para essas coisas. Lá vamos nós. Então agora é no meio e vamos mantê-lo lá porque não vamos estar brincando com o título ainda, mas podemos movê-lo para o topo vai bater bem lá em cima. Podemos movê-lo para o fundo. Vamos mantê-lo no meio agora. Também temos a posição de conteúdo exatamente onde queríamos estar. Se isso deve ser assumido em, por exemplo, se você queria focar no fundo do meio superior, etc, para ter certeza de que definimos quais são as prioridades, eu geralmente deixo isso por culpa. E então temos transbordamento e geralmente você não vai usar o transbordamento. Agora, o estouro será se você corrigir algum usando seus chamados valores fixos ou absolutos. Em outras palavras, se você vai colocar, por exemplo, um bumts aqui que vai ficar com você o tempo todo, não importa como você mover a tela ou qual plataforma você está agora, o problema com que às vezes é meio que quebra o tema ou a exibição. Quando qualquer tarefa é chamar overflow, ela pode se mover para fora da caixa de conteúdo, por exemplo. Então, se você esconder isso, normalmente vai cuidar disso. Mas isso é um recurso tão avançado que não vamos usar isso. Na verdade, acho que geralmente não contribui muito, certo? Então vamos passar pelo estilo aqui em cima, e já definimos nosso plano de fundo. Agora, há mais tipos de fins de semana de fundo que podemos usar um impacto ganancioso. Poderíamos estar brincando com as cores usar cores de ingredientes, que significa que usamos cores diferentes para desaparecer um no outro e também caras interessantes. Podemos adicionar um vídeo em segundo plano como vimos em alguns modelos anteriores. Agora é super fácil. Ou podemos ir em frente e adicionar um link de vídeo ou vamos para nossa biblioteca de mídia e pegamos o link de lá. Realmente não importa. E funciona exatamente da mesma maneira que quando usamos a imagem de fundo, a diferença é que vamos definir uma hora de início e uma hora de fim. E também podemos ter uma queda de fundo. E como você pode ver, descobrir qual substituirá a parte traseira do vídeo em dispositivos móveis e tablets geralmente porque eles não podem lidar com o vídeo, vai linguagem não vai ficar boa porque a resolução não se alimenta. Você já viu o que aconteceu com a imagem, certo? Então, vai ser uma chamada queda de fundo para trás, e então nós temos a opção de pairar é algo interessante vai acontecer enquanto nós colocamos nossas bocas sobre. Então, se você sabe como adicionar uma imagem de fundo é realmente o mesmo com um vídeo de fundo , você tem que definir a altura mínima. Você tem que ter certeza de que tudo está contido. Tudo parece bom realmente o mesmo e, em seguida, pegou um link do YouTube ou da sua biblioteca de mídia. Ok? E esse é o pano de fundo. Vamos voltar ao nosso clássico aqui, rolando para baixo. Temos a posição, certo? Podemos decidir. Queremos que a posição seja. Quando se trata disso, a seção poderíamos ter seu centro, centro, centro inferior. Podemos ficar com os melhores direitos, etc., etc. E isso vai ser importante quando se trata da exibição do seu produto. Quando se trata de sua, por exemplo, pessoa que você está representando aqui. Lembra-se? Eu estava falando sobre isso mais cedo. Então, se você tem, por exemplo, uma pessoa aqui no meio e você quer que essa pessoa esteja em foco e quando eu tinha um pouco de texto sobre o que você poderia fazer é verificar a versão móvel. Basta clicar aqui, entrar lá. E então poderíamos alterar essa exibição padrão. Talvez ir a este centro central e você vê, nós temos um olhar completamente diferente, certo? Podíamos dizer que este já parece muito, muito melhor. Poderíamos ter o canto inferior direito, e então pegamos aquele cara ou poderíamos ter o canto inferior esquerdo. A parte importante é que queremos conhecer o nosso ponto focal. Ok? Porque o ponto focal será onde estabelecemos esta posição para que o produto esteja sempre em foco independentemente do tamanho do discreto. Que dispositivo? Eles estão usando um tablet em seu desktop em seu celular. Você sabe, talvez sob oclock no futuro. Não sei o que é, mas queremos ter a certeza de que o que pretendemos mostrar aqui vai estar bem. E se não importa, como no nosso caso, podemos mantê-lo por defeito. Mas caso contrário, você realmente precisa mudar estes e combiná-los em. E depois temos o apego. Se quer ter um pergaminho, queremos consertá-lo como se fosse ficar parado o tempo todo. Isso não vai se mover como certo. Então, se eu rolar aqui, você vê que nós realmente estamos rolando dentro desta imagem. Mas se eu tê-lo no rolo como este, você pode ver que nós somos as imagens sendo com o pergaminho, por assim dizer. E então nós temos uma versão repetida e nós não vamos ter qualquer uso Self. Vamos deixar por culpa. Temos o tamanho que decidimos na capa. Nós também podemos usá-lo em conter ou personalizado ou ordem ou padrão. Mas realmente, se você quer ter uma imagem de fundo que cobre tudo, nós vamos com a capa e então nós temos o fundo Overly. Esta é uma característica tão incrível e interessante. Agora, o que podemos fazer aqui é colocar sobreposição sobre todo este fundo. Então, em outras palavras, podemos ter certeza de que estamos, por exemplo, fazendo uma imagem mais escura. Poderíamos fazer um isqueiro. Poderíamos até combinar fotos. Então nós temos este efeito agradável, desvanecimento ou como nós vamos fazer neste caso, nós vamos colocar em sobreposição lá vai combinar com a nossa paleta de cores do nosso logotipo. Então veja isso. Vamos em frente com o tipo de fundo, e vamos com clássico e eu não vou adicionar uma imagem. Eu só vou escolher a cor aqui, e então eu vou selecionar que a bruxa vermelha é nossa. E como você pode ver, torna toda a imagem vermelha. Mas veja isso. Agora, se eu mover todo o caminho para baixo, isso significa que nada é adicionado a partir da capacidade por favor. Mas se eu adicionar um pouco, podemos ver que atualmente, o tema é bastante azul. Mas se eu adicionar um pouco assim, você pode ver que as coisas estavam começando a ficar um pouco mais vermelho. E isso é uma coisa incrível, porque isso vai se encaixar com o nosso tema. Certo? Então dê uma olhada nisso. Parece tão natural conhecer a lista. E se eu remover este filtro agora, este fundo excessivamente, podemos dizer como escuro e soprado é como preto e azul. Então tudo o que precisamos fazer é adicionar uma pequena capacidade como essa parece sobrenatural. E de repente o site se torna muito mais profissional porque estamos combinando com nossa paleta de cores é onde a escolha de cores vem a calhar, bem como, porque nós podemos simplesmente ir e pegar a nossa cor que nós escolhemos no logotipo. Então isso é realmente perfeito. E essa é a sobreposição de fundo. Você também pode fazer com o pairar se quiser, e há mais coisas que você pode fazer. Você pode usar algo chamado Filtros CSS. Não vamos usar esse tipo de recursos aqui. Você pode usar um modo de mesclagem, que será como modelos para diferentes misturas. Nós também não vamos usá-los. Tipo, há um monte de opções aqui. Nós temos as fronteiras e as fronteiras serão basicamente as fronteiras em torno da seção si. Então, se eu adicionar uma chamada borda sólida como essa e, em seguida, eu adicionar o com para 50 agora estes são todos acorrentados juntos. Você pode ver que eu tenho esta prancha ou tudo por aqui e o que eu poderia fazer com isso é que eu poderia mudar a cor fora. A fronteira, por exemplo, colocou-a neste azul. Agora, isso não parece muito bom. Talvez se você quiser adicionar algum efeito de papel de parede algum efeito de imagem ou algo assim, Mas você só para que você saiba que você pode brincar com isso. Você também pode usar os efeitos de pairar para que quando você colocar o mouse sobre, você obter este pequeno. Essa pequena borda cria esse efeito três D, mas vamos passar por isso mais tarde, então não se preocupe com isso. Não vamos usar isto. Só quero que saiba o que são, para não se estressar com eles. Então não vamos ficar estressados com isso. Vou remover isto por rapacidade. Eles iam e eu não vou colocar isso em nada. Lá vamos nós. Não queremos nenhuma fronteira acontecendo. E com a fronteira, também temos uma sombra que não podemos. Vamos fechar este agora que temos algo chamado divisor de forma. Agora, as divisórias de forma realmente interessantes porque enquanto vamos, você vai notar que isso pode fazer seu site realmente parecer profissional e colocar um belo design. Pergunte a você a transição de uma seção do acima, o completo para algo abaixo da dobra. Então, por exemplo, podemos ir em frente e poderíamos usar nuvens. E agora estamos usando as partes de cima. Como você pode ver, este monte está derretendo nas nuvens está derretendo nesta seção. Cria um bom e bonito Bem, eles chamam de divisória, e há um monte de coisas diferentes que podemos fazer com ele. Podemos personalizá-lo assim. quanto queremos muito processar, pode não ser. É um monte de coisas que podemos fazer. Podemos mudar também . Certos triângulos, ondas. Há muitos efeitos diferentes. Podemos adicionar uma certa altura de cor. Podemos colocar um flip nele, certo? Inverter, traga para frente. É um monte de coisas que podemos fazer, e da mesma forma, podemos fazer o mesmo no fundo. E se você não quiser, tudo o que você precisa fazer é clicar em desconhecido e você não terá nenhum. Às vezes, com L.A mentor. Por alguma razão, o divisor de forma é olhado assim. Agora tudo que você precisa fazer é clicar na atualização para ter certeza de que você tem todas as suas alterações salvas, e então você atualiza a página e você vai ver que este divisor que você removeu realmente vai desaparecer. Então aí está. Desapareceu completamente. Então eu vou fazer é clicar aqui e ir para cima e terminou a seção aqui para continuar no estilo que temos passado através da divisão de forma. E finalmente temos a tipografia e não precisamos tocar na tipografia porque já definimos nossos valores globais para aqueles que estão certos, então nada faz. Precisamos fazer aqui. E finalmente temos os recursos avançados que você pode fazer um monte de coisas como você pode adicionar em certos efeitos emocionais que você pode adicionar em capacidade de resposta para se esconder em certas plataformas como você pode esconder certas coisas em seus telefones celulares, como certas coisas com um tablet, a fim de fazer o design parecer melhor. Mas vamos passar por essas bundas. Vamos mais perto na seção avançada. Então, agora estou super feliz com o passado. Acho que parece muito bom, limpo e profissional. E se descermos e clicarmos nas mudanças de pré-visualização ali mesmo, podemos ver que isso é o que adicionamos ao nosso site, e estou muito feliz com isso. Isso vai ser fenomenal e notei que essa sobreposição avermelhada está realmente gostando disso . Então vamos passar para a próxima palestra e começar a editar nossa manchete. Certo. Qual vai ser este? Veja o seu lá, pessoal 12. Título: Muito bem, pessoal, dizer esta palestra, vamos marcar o rumo para a ordem do site. Em vez do título que queremos bater mostrando aqui. Então, se olharmos para o nosso logotipo, ele diz cursos de Robin e Jesper para mudar sua vida para que não queremos usar esses cursos para mudar sua vida. Slogan de novo. Em vez disso, queremos ser mais descritivos. Sobre o que os cursos são. O que estamos oferecendo essa questão, Nique. Então deixe-me mostrar-lhe um exemplo aqui. Agora, se formos para Pat Fue e seu trabalho é um ponto com renda passiva inteligente? Podemos ver que ele escreve. Deixe-me ajudá-lo a construir um negócio online baseado em renda passiva. Então é isso que ele está oferecendo. Ele está se oferecendo para ajudar. Perdeste-me para construir um negócio online de renda passiva, direto para o ponche. Sabemos o que estamos recebendo aqui. Esse é o tipo de descrição que estamos procurando em nossa direção, certo? Se você vai para iniciante wordpress também, ele diz Guia do Iniciante para WordPress. Comece o seu WordPress Blawg em minutos. Isto é realmente impressionante. E isso é muito bom, porque eu sei o que estou recebendo. Sei do que se trata o site. Não há confusão. Então é exatamente isso que estamos procurando. Então, o que? Eu vou ir em frente e fazer aqui, e eu acho que você deve seguir o exemplo com o seu site e com o seu próprio título é clicar neste cabeçalho aqui. E então nós vamos mudar as tomadas e eu vou escrever algo como negócios feitos Fácil . Deixe-nos mostrar-lhe como. E agora podemos ver que tudo aqui está escrito seguidamente, certo? Porque só temos uma coluna e eles os chamam. É muito sábio. Tudo. Todo o texto sai por muito tempo assim. Mas eu realmente vou separar isso para que nós obtenhamos este pedaço de texto abaixo se ele parecer bom. Mas pelo menos por enquanto, é isso que eu quero fazer. Mas isso toma conta própria. O negócio é feito cartas fáceis mostrar-lhe como isso? O que estamos prometendo aqui é que queremos garantir que o negócio que estamos oferecendo aqui é fácil Negócios facilitados. Deixe-nos mostrar-lhe a casa. Estamos a oferecer-nos para ajudá-los a tornar os negócios mais fáceis. E acho que muitas pessoas por aí sentem que os negócios são complicados. negócios são difíceis e nos orgulhamos de pedir aos professores que simplifiquem as coisas complexas. E eu realmente espero que vocês sintam o mesmo. Então temos o nosso slogan que diz Cursos para mudar seus direitos de vida. Já sabemos que é sobre os cursos Robin e Jesper. E então temos negócios feitos cartas fáceis mostrar como, que é muito legal o título ou descrição fora do que estamos fazendo. Tentando resumir isso tudo em um. Então vamos começar a editar isso um pouco, certo? Então, a primeira coisa que vou querer fazer é tornar isto maior. Então eu vou clicar na dobra e eu vou clicar em X l para fazer desta maneira. Muito maior. Lá vamos nós. Isto já está muito melhor. E quando se trata de HTML tag, vou manter isso na idade de dois. E a razão para isso é se você mantê-lo em H um, que é naturalmente maior, isso vai estragar o motor de busca porque o motor de busca está procurando uma descrição do seu site de H um. É por isso que eu quero manter a maior parte do conteúdo na idade para ok, nós vamos passar pela seção de CEO desta manhã. Então você quer manter isso entre dois e seis anos? Vou deixar isto com dois anos e vou ter o alinhamento para a esquerda por enquanto. Isto pode mudar à medida que avançamos. Não há nenhuma preparação aqui em como vou fazer este título. Isto é o que vamos assinar, que é provavelmente o que você vai fazer com o seu site também ou com mais sites que podem vir em seu caminho. Então isso é muito educativo. E então podemos colar em um link aqui se quisermos vincular a algo. Mas não vamos fazer isso. Só queríamos ser descritivos. Vamos passar para o estilo aqui. Agora apareça com estilo. Vamos fazer algo importante. Nós vamos mudar a cor das tomadas agora, como você pode ver, temos um fundo bastante escuro, ok? E também temos essas sobreposição frontal vermelha, que é lindo, mas as tomadas pretas simplesmente não está funcionando. E é por isso que estou tão feliz que selecionamos são paleta de cores. Porque o que eu vou fazer é ir em frente e clicar aqui e então eu vou selecionar branco. Agora, veja isso. Os caras desse Papa, isso está parecendo muito melhor. E é por isso que os valores globais são ótimos e eles vão ser muito úteis quando estamos editando. Mas vamos mudar as coisas ao longo do caminho também. Então, como podemos ver, este branco leva ele parece bonito dentro e fazer as coisas pop grande momento. Estou gostando muito disso. Se formos para a tipografia aqui, não vamos mudar o telefone. Isso, quero dizer, é que já está definido. Mas não podemos mudar o tamanho assim se quisermos. Vou usar algo assim. Eu queria um pouco grande, certo? O peso. Essa será a ousadia que já definimos que eu não vou usá-la. Mas a transformação é realmente importante, pelo menos neste caso, porque eu quero usar isso em letras maiúsculas. Então olhe para este título e como usar letras maiúsculas. Você pode ver que este Papa é muito mais. Isso é muito mais fora de um título agora fora de um cabeçalho apropriado. Você também pode estar usando algo como minúsculas ou padrão normal em maiúsculas. Mas eu realmente gosto de usá-lo com a maiúscula. Temos estilo. Se você quiser usá-lo em itálico, por exemplo, você quer usar em um oblíquo Há um monte de opções diferentes que podemos usar no normal. Eu apenas mantê-lo no telefone porque o padrão é geral é o normal. Não quero fazer nada com isso. Eu gosto deste estilo bastante estável acontecendo aqui. Então podemos decorá-lo com uma linha. Mas não vamos fazer isso. Não vamos torná-lo fofo, certo? Gosto dele limpo. Podemos ir em frente e mudar o comprimento da linha aqui. Como você pode ver, estamos afetando a chamada que eles estão acontecendo. Só vou acertar o conjunto comum para reiniciá-lo, fazê-lo e então podemos brincar com o espaçamento das letras. Mas honestamente, isso geralmente destrói a fonte ou não vamos brincar com isso também. Eu vou clicar no comando e disse que por indevido Lá se vai eu vou pressionar este aqui para baixo. Estou gostando muito disso até agora. E então nós também podemos adicionar em um tiro de sombra. Queremos fazer isso agora. Eu geralmente não sou um grande fã de jogar com sombras e brincar com este tipo de efeitos . Se eu gostar do que vejo, o que eu faço agora. Então, na verdade, não vou fazer nada com isso. Se você quiser jogar com Sombra, você pode ir em frente e adicionar uma cor pode ser uma cor mais escura. Pode ser uma paleta de cores. E então vá em frente e brinque com o desfocado, o horizontal, o vertical. E você vai notar a mudança que ela faz no fundo bem aqui. Você pode ver isso acontecendo e dizer como quiser. Eu vou clicar em voltar para o padrão porque eu não quero usá-lo em tudo que temos o modo de mesclagem eo modo de mesclagem vai ser como modelos e nós não vamos estar usando no templo está acontecendo porque nós já disse ou na cor, Certo. Se eu gritar, por exemplo, isso vai adicionar um certo efeito para a diferença de uso, isso vai adicionar um certo efeito, eu vou mantê-lo normal, e então nós podemos avançar para avançado nele . É aqui que as coisas começam a ficar um pouco interessantes porque aqui podemos mudar as margens, como vimos anteriormente. Então, se eu dissesse que as margens para 50 eu poderia expandir esta coluna inteira. Então você obtém um pouco mais de opções, não só fora de como e onde você está colocando as tomadas, mas também para as outras colunas estão ao redor. Então, vamos brincar com este. Estamos terminando esta página inicial um pouco mais no final. Como queríamos parecer e depois temos o estofamento é que podemos mudar também, que tem um efeito semelhante. Nós também temos o dito índice CSS classe e isso é tudo para a codificação. Não vamos usar nenhum destes. E aqui temos coisas como efeitos de movimento e efeitos de movimento. Eles podem ser entregues, como você pode ver, se eu poderia enfraquecer, desaparecer aqui, por exemplo, nós vamos ter um certo efeito sobre este paus. Então, se eu clicar em desvanecer-se, vamos ter alguns efeitos. Se eu descer e visualizar, podemos ver o que vai acontecer quando o site for carregado. Então este é o anterior e este é o lugar onde estamos agora. E é assim que o texto aparece. Agora, o que eu não gosto com isso é que ele meio que tira a experiência do usuário. Na minha opinião, se ele se encaixa com o seu design, absolutamente use-o. Quero dizer, você pode fazer algumas coisas realmente impressionantes com isso, mas eu prefiro elas ou limpas. Olha, você quer entrar no site, você quer pegar a informação que você está procurando? Você quer ter uma boa experiência e seguir em frente com sua vida em geral, e na maioria das vezes, esses efeitos vão ocupar espaço. Então eu não vou brincar com eles aqui porque eu estou gostando deste olhar limpo e eu não sinto que eles vão contribuir. Não se limite. Jogue com eles o quanto quiser. Você vai ter um olho para isso. Definitivamente. Então eu vou clicar para baixo movimento para corrigir isso. Também temos antecedentes. E lembre-se, agora estamos trabalhando com essa coluna. Então, qualquer plano de fundo, por exemplo, cor de fundo que estou adicionando. Vai estar dentro desta coluna. Então esta é a seção Esta seção é realmente grande agora. Tornámo-lo enorme. E dentro da seção, temos a imagem de fundo e a visão dessa seção. Temos a chamada para eles. Já passamos por isso antes e dentro desta coluna. Posso mudar a cor. Então olhe para isso, por exemplo. Agora eu fiz a cor da cor de fundo da chamada Black parece terrível. Vou clicar em limpar, e não vou usar isso. Mas quero te mostrar que você pode. Então, o efeito Harbury. Também é muito interessante porque se eu usar o efeito porto, por exemplo, e eu entrar e adicionar uma cor, digamos que eu vou adicionar uma cor acinzentada como essa, algo assim. Então, o que agora? Eu pairo meu mouse sobre. Você pode ver que temos esses efeitos acontecendo, e isso não parece duas noites agora, mas você pode realmente fazer as coisas parecerem realmente agradáveis. Especialmente mais tarde nos tribunais. Quando começamos a adicionar na seção de cursos e você passar o mouse sobre, você quer ter esse efeito de pairar porque faz tudo parecer muito mais profissional . Mas não vamos usá-lo para a página inicial desta seção deste lugar. Então eu vou clicar, não claro, vou clicar neste aqui para baixo e eu vou recolher o fundo que temos Border e fronteiras como antes. Você pode alterar as bordas selecionando primeiro um como este sólido que podemos adicionar em um número e, em seguida, você obtém uma borda ao redor da coluna. Onde está antes? Temos uma fronteira ao redor da seção porque estávamos editando na seção, mas não vamos usar essa aqui. Vou empurrar este para não s Bem, mas a fronteira é muito parecida com essa. Então temos posicionamento personalizado, e agora estamos usando padrão, certo? Podemos fazer algo como cheio com, como, Eu mostrei a diferença com cheio com. Vai ocupar muito mais espaço e tornar as coisas muito diferentes. Mas também podemos usar o posicionamento, certo? Então a posição pode ser algo chamado absoluto. Agora, se eu usasse, é tão absoluto. Eu sou capaz de realmente arrastá-lo e soltá-lo por aí assim, e isso significa que ele vai ficar lá na tela. O problema com estes seria jogar com este tipo de absoluto e fixo que é que estes geralmente não são vai ser muito responsivo. Então eu prefiro apenas mantê-lo na culpa e não jogar com o posicionamento personalizado porque isso estragou tudo. A capacidade de resposta para o tablet, para o celular e para o seu site às vezes. Mas há também com a função de estouro vai manter isso de bagunçar demais . Geralmente, eu recomendo para mantê-lo simples e permitir elementar e permitir que o seu tema para torná-lo bom dentro das fronteiras. Isso é assim que vamos recolher posição personalizada e, em seguida, temos parte responsiva e responsiva é realmente interessante porque se olharmos agora e sabemos que estamos editando esta coluna direita com este elemento. Então, se eu clicar, por exemplo, em ocultar no laptop aqui e clicar nisso para ocultar e agora eu visualizar as mudanças, você verá que esse texto vai desaparecer, certo? Então ele não é realmente superior no editor, mas ele desaparece para a mudança final no modo de visualização, e eu posso fazer o mesmo nos tablets. Então, se eu usar um tablet e eu descer para responsável e eu ir para tablet. Isso não vai ser mostrado para aqueles com um tablet, mas vai mostrar para aqueles com um celular. Você não vê isso em elemental, mas esse será o efeito quando as pessoas entrarem no site pelo celular ou tablet como fizemos em uma prévia. Agora, o interessante, a coisa realmente boa com isso é que você pode editar as coisas para uma exibição muito mais limpa, certo? Então, se eu não gostar disso, não quero que isso apareça no celular. Eu poderia apenas clicar em esconder no Mobile e, em seguida, isso não vai mostrar para as pessoas que entram no site em seu telefone celular. Mas se você inseri-lo no tablet ou se você entrou na área de trabalho, ele vai mostrar a parte realmente, muito ruim com isso, no entanto, é que isso ainda vai carregar, certo? E o problema com isso é que, em vez de fazer alguma personalização para torná-lo bom, nós apenas removê-lo. No geral, ele vai apenas escondê-lo carregado, mas não mostrá-lo, que significa que ele vai atrasar seu site se você usar esta função muito. Então, se você adicionar uma enorme imagem agradável, por exemplo, para desktop em Lee e, em seguida, você clicar em Heightened Tablet e Mobile, isso significa que eles ainda serão carregados no Talbot e no celular. E isso vai diminuir o tempo de carregamento, mesmo que não esteja aparecendo. Então use isso com moderação, certo? E finalmente, temos o costume. Veja, ele diz, mas isso é um recurso profissional, e nós não vamos usar isso de qualquer maneira. Então, se voltarmos ao conteúdo, temos que voltar ao modo desktop, podemos ver que isso é o que parece agora. Então, se eu quiser ter este salto para baixo, eu só preciso clicar aqui e ele salta para baixo por si só. Então, se eu quiser que isso pule para baixo, eu só preciso clicar aqui e apertar Enter, certo. Então, se eu apertar Enter, você pode ver que eu sou capaz de criar espaços como este. Mas eu não quero ter esse espaço que eu realmente fiz aqui. Então vamos fazer isso mais uma vez e eu vou entrar no Enter aqui e agora temos um olhar muito mais bonito. Então você não quer entrar aqui como eu fiz. Isso é um erro de novato de digitar muito rápido. Você quer ir em frente e pressione Enter dentro da caixa para fazê-lo saltar para baixo uma parte. Então isso parece muito bom. Estou gostando disso agora. Não gosto da posição ideal para isso. Se você ir em frente e poderíamos vir pré-visualizar alterações, por exemplo, podemos ver que vai ser exibindo em algum lugar no meio Negócios facilitado. Deixe-nos mostrar-lhe como eu queria estar mais alto. Eu queria estar em algum lugar por aqui. Mas para conseguir isso, temos que fazer uma das seguintes coisas. Precisamos ir aos elementos e poderíamos usar algo como um espaçador. Se eu adicionar um espaço ou abaixo aqui, eu posso mudar o tamanho desse espaçador e eu posso colocá-lo na posição que eu quero. Mas a coisa é que nós vamos adicionar mais coisas lá dentro. Vamos adicionar coisas como podemos querer usar um subtítulo, vamos querer usar uma descrição, e vamos querer usar uma chamada à ação inferior. E todas essas coisas vão ser mudadas nas posições fora destes, por exemplo, fora deste cabeçalho fora da descrição do subtítulo, etc. Então, vou deixar isto aqui por enquanto. E à medida que avançarmos, vou continuar trocando as posições e adicionando elementos que pediram ao espaçador para torná-los neste lugar que eu quero que eles sejam. Mas mais uma vez, pessoal, é assim que parece agora, toda a personalização que realmente precisávamos fazer aqui era tornar o texto branco é criar um espaço no texto e, em seguida, certificar-se de que há um boas tomadas acontecendo aqui porque eu vou colocar isso em algo aqui em cima, e então eu vou ter a descrição e eu vou ter um plano de ação fundo. E eu poderia até aumentar o tamanho disso. Vamos ver como vamos, como ele se encaixa com o resto fora do design. Mas isto é o que eu me contentei até agora. Espero que você saiba como criar o título bem agora. E como sempre, se você tiver alguma dúvida, vá em frente e fale conosco. Estará no Q e A e um lembrete final. Não faça o que eu fiz e acerte o espaço aqui. Você quer clicar aqui e você quer bater o espaço aqui, certo? É assim que se salta corretamente. Desculpe por isso. Então, pessoal, vejo vocês na próxima palestra. 13. DESCRIÇÃO: Ok, pessoal. Então, nesta palestra, vamos seguir em frente e definir nossa descrição. Agora, uma descrição será o pedaço de texto que está embaixo do título ou do cabeçalho. Você pode usá-los de forma intercambiável. O que é que lhe chamas? Um título ou um título. Agora, se formos checar Pat Flynn mais uma vez, podemos ver isso. Sua descrição aqui está se apresentando, e ele está nos dizendo exatamente o que ele vai fazer. Fiz para te mostrar através dos meus próprios experimentos. Exatamente o que poderia parar de trocar tempo por dinheiro e começar a construir um baseado em que funciona para você. Estou aqui para te mostrar como funciona. Agora. Isso se encaixa tão bem. Também que ele diz oi, eu sou Pat Flynn porque ele tem uma foto fora de si mesmo. Agora o que queremos fazer é explicar mais detalhadamente, o que estamos fazendo e o que estamos fazendo. Mas, ao mesmo tempo, temos uma quantidade limitada de espaço. Ele já está usando um pouco de espaço ou um pouco de texto. E não esperamos que todos estejam lendo isso por causa do ponto de atenção. Então eu recomendei que nós diminuíssemos isso um pouco e então nós vamos deixar um pouco para ser descoberto. Por exemplo, ele está escrevendo. Estou aqui para te mostrar como funciona. Isso me faz querer apertar o botão que diz aprender mais, certo? Na próxima palestra, criaremos nosso próprio botão com uma chamada à ação. Veja, ta. Agora aprenda mais. Aqui está o chamado à ação porque você inspirou, mas leva Você quer aprender mais. Então o que vamos seguir em frente e fazer é ir para o nosso site que estamos criando e dar uma olhada rápida agora ele se parece com isso, e vamos colocar o texto abaixo aqui. Agora, enquanto continuamos construindo e adicionando mais coisas que vamos acrescentar sobre tênis. Bem, isso vai mudar de posição, que é perfeito, porque eu quero isso um pouco mais alto. Mas nós vamos fazer alguns ajustes, pedir para ir, e eu vou te mostrar como isso funciona. Então nós vamos entrar aqui e eu vou clicar e arrastar o editor de texto e então você pode ver onde está a linha azul que mostrou onde vai ser colocado. Por isso vou pô-lo aqui em baixo. Certo, então agora temos esse texto acontecendo. Agora, eu realmente tenho pré escrito algo aqui. Então, tudo o que vou fazer é certo. Clique e clique em colar e eu tenho Grã-Bretanha. Você está procurando construir ou expandir seu negócio, mas não sabe por onde começar? E as cartas mostram como literalmente. E o ponto aqui é que o tipo, claro, é que estamos fazendo esse tipo de tutoriais que estamos oferecendo vai estar na tela e mostramos a todos o que estamos fazendo passo a passo exatamente da maneira que estamos fazendo agora. Então isso é muito mais fácil de aprender e entender porque você vê o que estou fazendo e estou mostrando como funciona. E espero que você também sinta que isso é realmente simples de aprender. Pelo menos foi assim que aprendi o melhor. Então este texto, é muito enigma porque senão eles estariam aqui o dia todo. Não sou espontaneamente criativo, e vamos usá-lo, mas vamos mudá-lo agora. A primeira coisa que estamos olhando aqui é que estamos usando nossa cor padrão, que é ótima e faz uma chamada fina, mas não neste plano de fundo. Então eu vou em frente e ir para o estilo imediatamente. Vou ao texto Color, e vou mudar para branco. Vou clicar no branco aqui e lá vamos nós. Está começando a fazer muito mais agora, eu também vou descer para a tipografia para começar a mudar as coisas como este tamanho e tudo mais. Então o que eu vou fazer é puxar o tamanho aqui e apenas torná-lo grande. Você não é tão grande. Torná-lo maior. Talvez algo como por volta das quatro. Eles iam começar aos 40. 38 eles iriam. E também quero alguns espaços no meio daqui. Então eu vou colocar isso em frases. Eu vou clicar em cuidado e bater, Entrar e ele vai saltar para baixo, e eu vou remover este espaço. Eles iriam, e eu vou fazer a mesma coisa aqui. Vou clicar em entrar lá e depois vou remover esse espaço. Ok, então agora é assim. Agora, isso é um pouco grande demais para o meu gosto. Vou diminuir o tamanho. Vamos para talvez algo assim. Acho que 23. Eu acho que parece muito bom, mas eu não estou apreciando o espaço entre aqui, certo? Eu queria ser muito mais coletivo, então eu vou descer até a altura da linha e eu vou começar a brincar com isso e eu vou ter alguma coisa. O Mawr. Lá vamos nós. Acho que isso parece muito bom e natural. Certo. Então eu vou clicar nisso, e então eu vou odiar mudanças de pré-visualização, e nós vamos ver o que está acontecendo aqui. Então eles foram atrás. Acho que já parece muito melhor. No entanto, acho que é um pouco pequeno demais. Então eu vou em frente e mudar isso. Vou entrar aqui para a tipografia, e vou aumentar o tamanho, talvez 28. 27. Ok, eu vou apertar as alterações de pré-visualização mais uma vez. OK, então está parecendo muito bom. Agora, eu gosto disso porque é legível, o que é realmente importante. No entanto, eu gostaria realmente de um pouco mais de espaço. E eu gostaria de tornar o tamanho deste título maior em comparação. Então eu vou em frente, voltar para a tipografia e aumentar a altura da linha, ok? Algo assim. Lá vamos nós. Lá vamos nós. Acho que isso parece muito bom. Eu vou seguir em frente e clicar no título aqui, e então eu vou passar para a tipografia de estilo. E eu vou aumentar ligeiramente isso para, digamos, 45. Lá vamos nós. Vou clicar de volta neste. E agora vou aquecer as alterações da pré-visualização para que vejam o que acontece. Negócios facilitados. Deixe-nos mostrar-lhe. Como você está procurando construir ou expandir seu negócio, mas não sabe por onde começar? Deixe-nos mostrar-lhe. Literalmente perfeito. Estou gostando muito disso. Vou fazer mais uma diminuição no tamanho aqui e, finalmente, visualizar contra. Então este é o processo de concepção. Vai ser esses pequenos ajustes nos pequenos ajustes lá até que você esteja feliz com o que está vendo. Então, estou gostando muito disso. Na verdade, acho que ficou perfeito. Agora, o que eu não estou gostando é como o título está indo direto para a lua bem aqui. Está bem. Então o que podemos fazer é realmente mudar o posicionamento fora do fundo. Agora, lembre-se, nós vamos adicionar outra coisa aqui em baixo. Essa é a chamada à ação, certo? Íamos escrever algo, tipo, aprender mais ou começar aqui, algo assim. Mas vamos ligar esse fundo ao início aqui, página, que vamos construir mais tarde. Você está seguindo junto. Certo? Então, estamos explicando aqui em cima. negócio fez cartas fáceis. Vou te mostrar como, certo. Então, como eles vão nos mostrar? Estamos a explicar que estamos a fazer do negócio algo fácil. E queremos mostrar a vocês como fazemos isso e aquilo. Você está procurando construir ou expandir seu negócio? Bem, se você está no lugar certo, certo? Esse é basicamente o ditado subjacente. Mas não sei por onde começar. Vamos mostrar-lhe como literalmente. Realmente bom. É um incentivo para atingir as pessoas certas. E depois vamos ter que aprender mais. Mas para o fundo agora, mesmo que possamos ter que microchips, quero mostrar como você pode ao longo do caminho. A Micra. Só estas coisas. Eles parecem muito bons. Então o que eu vou fazer é ir para L.A. uma casa de mentor aqui, e eu vou voltar e clicar na seção de edição. E então, onde temos estilo, eu vou para baixo para a posição, você vê onde ele está? Padrão. E eu vou tentar. Vamos tentar no centro e ver o que acontece. Você vai ver que o fundo, a imagem em si. Ele muda um pouco porque está mudando o ponto focal na imagem de fundo. Então eu vou ir em frente e clicar em pré-visualizar alterações e olhar para a parte fácil lá e ver como ele se move. E agora temos a lua que mudou os negócios eretos facilitada. Deixe-nos mostrar-lhe. Como você está olhando para Bill para expandir seu negócio? Não sei por onde começar. Vamos mostrar-lhe como literalmente. Então eu estou amando isso. Estou absolutamente amando isso. Estamos ajustando todo o texto dentro do balão de ar e debaixo da lua, e isso vai aparecer de novo. Mas então nós vamos apenas micro no fundo para fazer tudo parecer legal. Então, na próxima palestra, pessoal, vamos construir que vai começar aqui ou aprender mais bundas dependendo do que você está interessado. Mas é assim que eu construo o título, a descrição e, em seguida, uma chamada à ação sobre isso. E então temos esse fundo certo? Há mais opções. Podemos jogar aqui dentro quando se trata do estilo fora da descrição. Mas pessoalmente, eu acho que quando você pregar o tamanho e quando você pregar o espaçamento das letras e nós não vamos brincar em um peso de decoração ou qualquer coisa, então você está tudo bem para ir para a direita. Parece perfeito. Não há necessidade de torná-lo mais complicado do que precisa ser. Vamos passar para a próxima palestra. Ótimo trabalho. 14. Botão de CTA: Tudo bem, então nesta palestra, vamos em frente e criar nossa chamada para ação Bottom. Então, em outras palavras, sabemos que se fizemos até agora, estabelecemos o negócio título facilitado. Deixe-nos mostrar-lhe como. Então fizemos uma descrição que vai, Você está pronto para construir ou expandir o seu negócio, mas não sabe por onde começar? Vamos mostrar-lhe como literalmente. Agora queremos permitir que eles tomem algum tipo de ação agora para isso leva um botão de ação que diz, por exemplo, aprender mais faria mais sentido para o seu serviço. Talvez você esteja oferecendo uma consultoria gratuita, pode dizer reivindicar a oferta. O Word pode dizer entre em contato conosco, ou pode dizer “subscrever”. Agora eles chamam à ação vai depender em primeiro lugar e acima de tudo o seu serviço. Mas também, é claro, o que você está escrevendo sobre o serviço, o que você está oferecendo em sua primeira página. Agora, a idéia aqui é explicar o que somos, o que fazemos, o que temos a oferecer e então criar esse botão de chamada à ação que vai levá-los a começar aqui agora. Poderíamos muito bem ter chamado este começo aqui, mas eu quero que eles tenham a capacidade de aprender mais, que oferecem algo diferente do que o começo aqui. Mesmo que seja a mesma coisa, certo? Porque estão interessados e querem aprender mais. Comece aqui. Isso significa mais uma tomada em ação. Eles estão começando algo, mas aprenda mais. Isso ainda é apenas por interesse em curiosidade. Então, é mais fácil para eles pressionarem esse fundo geralmente. Então vamos em frente e criar o botão, e não poderia ser mais simples. Pessoal, tudo que precisam fazer é clicar em suas palavras no botão dele, e vamos arrastá-lo e colocá-lo para baixo. Aqui e agora temos o nosso traseiro. Então vamos começar a editar isso para que fique bem e ele se encaixa no tema. Agora ele já faz, porque tem a cor de acento que definimos para ele, que combina perfeitamente com o nosso tema, então isso é realmente útil. Mas ainda quero mudar este agora. A primeira opção que temos aqui é o tipo. Agora não temos que nos preocupar com isso porque já definimos as cores e combinamos com isso e tudo. Mas aqui temos alguns modelos interessantes, se quiserem. Isso vai permitir que você, por exemplo, o verde para o sucesso. Avisando esses sucos de ar, você sabe, chamadores recomendados para esse tipo de sentimento ou perigo, que é a forma mais escura fora do vermelho. Agora vamos usar o padrão, que é a cor que enviamos nossa paleta de cores com nossos valores globais porque ele se encaixa nos temas muito bem. Então não vamos brincar com isso, mas o texto, mas o texto, é claro que vamos brincar, não vamos ter uma mensagem que diga “Cuidado com o Click”. Agora vou usar aprender mais para essas tomadas. Mas mais uma vez, o texto que você escolher vai depender do que você está montando. Geralmente, eu prefiro escrever Saiba mais em vez de começar aqui, especialmente se eu tiver um começo aqui. Aqui em baixo porque eu acho que geralmente é mais fácil para as pessoas clicarem, aprender mais em vez de começar aqui. Ok, agora, a próxima coisa que temos este link fora do curso, queremos que o botão faça alguma coisa. Então a idéia é que para eles aprenderem mais, vamos em frente e canalizá-los para o nosso começo aqui. Página. Ok, então o que nós vamos fazer é que nós vamos subir aqui para começar aqui, certo? Clique em e selecione copiar link. E então nós vamos apenas clicar aqui, remover este sinal direito, clicar e colar nele. OK, então agora se eu ir em frente e eu poderia enfraquecer as alterações de pré-visualização e, em seguida, eu ir para aprender mais e eu clicar lá vai me levar para o início aqui site que você pode ver. Quero dizer, já. Se você está comparando este projeto com o que estamos fazendo agora, é um nível totalmente novo, graças a l um mentor. Mas de qualquer forma, é aqui que vamos canalizá-los. E, claro, vamos mudar. Isto está bem, vamos redesenhar isto usando o elementar. Mas agora definimos o propósito para nossos botões. Então, vamos clicar aqui atrás. Agora sabemos que se eles pudessem enfraquecer, aprender mais, eles serão levados para a página inicial aqui, que é diferente desta página inicial que temos. E passamos pelo que eles fazem, como funcionam. Dizia: “ Espero que se lembre”. Então a próxima coisa que podemos fazer é mudar o alinhamento. Na verdade, prefiro tê-lo em linha como esta. Então, se você ver que temos o título, isso está perfeitamente em linha com a descrição. Isso está perfeitamente alinhado com o botão, e eu prefiro mantê-lo assim. Eu realmente gosto deste olhar limpo em linha. Então, por enquanto, vamos manter isso, e então nós podemos mudar esse tamanho e eu prefiro ir com um tamanho médio porque eu acho que ele Papas um pouco mais. Se virmos a diferença daqui até aqui. Só acho que tem uma aparência mais bonita. Prefiro um pouco mais de sites. Só se encaixa melhor nele. E depois vamos descer. Temos alguma coisa. Nós somos isso é legal. Podemos mudar o ícone para qualquer coisa. Podemos ver o livro de endereços, podemos ter o logótipo dos músculos. Se você gostaria deste hilariante que os madeireiros da Amazônia aqui, quero dizer, basicamente qualquer coisa maçã. Até há muito que eu venho aqui para escolher, mas honestamente, não para este tipo de botão. Eu realmente não recomendo se você está vendendo algo na Amazon. Claro, pode ser legal adicionar esse tipo de botão para comprar isso. E então você poderia ter um link de afiliado, etc. Mas não por isso. Eu não recomendo isso. E depois temos um I.D. mas não vamos dar a mínima ideia. Não precisamos fazer isso. Passando para o estilo de algumas coisas que eu quero mudar com isso. E o primeiro não é tipografia, e podemos ver que ele diz aprender mais. Eu quero que isso seja em todo o capital, e eu quero que isso seja um pouco mais grosso, um pouco mais gordo. Então eu vou descer. E a primeira coisa que temos aqui é família. E lembre-se, nós já centralizamos os valores globais. Já nos divertimos. Estou super feliz com isso. Acho que parece ótimo. E então nós temos tamanho, e nós já dissemos isso para médio. Mas se você quiser ter um olhar mais profundo e ser mais preciso, você pode apenas colocá-lo aqui. Mas médio é sobre a terceira cena 14 verões. Vou definir para 14 assim. Agora, a espera é a espessura do texto. Vou colocar muito ousado e você pode ver que fica um pouco mais grosso. E eu gosto muito disso. E então eu vou clicar em Transformar, e eu vou usar as letras maiúsculas. E basicamente, eu sempre uso letras maiúsculas em todos os meus botões. Eu só acho que parece muito melhor. Eu acho que Papas muito mais, e eu realmente gosto disso. Não vou fazer nada no estilo. Eu não vou fazer nada na decoração, e então nós temos a altura da linha. Não vou tocar nisso. Como podem ver, vai mudar a caixa assim um pouco, mas não vamos mexer com isso. Vamos mudá-lo de maneiras diferentes usando as margens, e isso é daqui a pouco. Então temos o espaçamento de letras e novamente ter cuidado com isso porque ele estraga a frente. Não vou tocar-lhe. Então lá vamos nós. Estou muito feliz com isso. O que também podemos fazer agora e isso é excitante. Eu realmente amo este é usar o efeito porto, porque se nós pré-visualizar as mudanças que teria feito apenas. Podemos ver que realmente parece muito bom. Estou gostando disso. Olhe grande hora, ok? Mas nada está acontecendo quando estou pairando o mouse. E para mim, quando há algo acontecendo quando eu passar o mouse sobre o que realmente implica um monte de qualidade e profissionalismo e também seus destaques satisfatórios. Significa que algo pode acontecer quando eu clicar lá. Portanto, eu sou muito mais propenso a clicar. Tipo de simboliza, Ei, clique em mim maneira realmente eficaz para obter as pessoas para clicar sobre ele e também para o design. Acho que parece ótimo. Então nós vamos voltar, e vamos ter certeza de que quando você pairar sobre ele, algo acontece. Então a primeira coisa que você quer fazer é olhar, pairar e então nós vamos para baixo para as palavras é animação pairar bem aqui? Há um monte de animações diferentes. E se você clicar nele, por exemplo, Bob e eu passarmos o mouse sobre, você pode ver o que ele faz, certo? Você pode ver o que é a animação. Inclinar. Eu clico nele ou eu sinto muito. Eu pairo meu mouse sobre ele. Você pode ver o que acontece Agora, quando se trata de botões, há apenas um Onley, uma animação que eu cada uso e que é a animação crescer. E parece assim e eu realmente gosto disso. Acho que dá um efeito pop profissional. E para ser honesto, eu não acho nenhum desses efeitos. Olhem bem, a menos que tenham uma boa equipa que anda de mãos dadas com ela. Quero dizer, todos esses efeitos estão sujeitos a como você usa em seu design. Mas geralmente eu só vou com o efeito de crescer. Agora, isso parece muito legal. Se formos em frente e visualizarmos essas mudanças e eu passar o mouse sobre isso, ele obtém esse efeito pop muito bom. Eu adoro isso, na verdade. Então isso é incrível. Estou gostando desse grande momento agora. Eu realmente gostaria que algo mais acontecesse com você. Então, quando eu passar o mouse sobre, eu gostaria que ele pop e também parecia que eu estava selecionando algo. Você provavelmente sabe o que quero dizer. Como quando você está selecionando algo, você pode ver que ele muda de cor como este ou este ou este, ou se você está trabalhando com arquivos ou mapas. Se você clicar nele, ele será selecionado. Então eu quero tipo de dar essa ética selecionada quando eu passar o mouse aqui. E a maneira que eu vou fazer isso é ir em frente e mudar a cor de fundo para que fique um pouco mais leve quando eu passar o mouse. Meu mouse é uma mudança sutil, mas causa um grande impacto. Dá um soco. Definitivamente. Então o que vamos fazer é clicar na cor de fundo, e aqui é onde podemos torná-la um pouco mais leve. Agora você pode ver que a cor que estamos usando , não está realmente aqui. Então o que vamos fazer é ir para o canto superior esquerdo aqui e vamos para as cores padrão. E eu vou clicar sobre isso, ler que eu estou gostando tanto e eu vou ir em frente e eu vou copiar este código de cor . E então eu vou descer e clicar neste botão. Lá vamos nós. E agora volto para cá. Vou clicar em passar o mouse mais uma vez, e então eu vou clicar na cor de fundo. Ok, então tudo que eu preciso fazer agora é clicar aqui, colá-lo no centro do hit, e lá vamos nós. Então o que eu vou fazer é puxar isso um pouco para baixo. Nada muito louco. E eu queria ir, você sabe, você sabe, super leve e, você sabe, você sabe, piscar toda a minha tela do computador ou ficar branco ou qualquer coisa. Eu só queria ter uma cor um pouco mais clara. Então, assim. Então, se eu passar o mouse sobre, é assim. Estou gostando muito disso. Então vamos verificar na pré-visualização. Então eu vou passar o mouse sobre, e nós podemos ver que ele fica uma cor clara agradável. Agora, para mim, isso ainda é um pouco leve demais. Então eu vou em frente e eu vou apenas aumentar isso um pouco. Eles iriam. Vou clicar em vir pré-visualização mais uma vez e passar o mouse sobre. E, sim, estou gostando disso. Então, como você pode ver, o efeito é bastante sutil, mas ainda dá um soco. Parece que estou selecionando isso agora, então estou gostando desse efeito. Certo, então vou ficar com isso. Não precisa se não gostar, mas é assim que eu gosto de decidir. Eu gosto de ter os efeitos de crescimento nos botões e também ter esse aumento na leveza. Então parece que estou selecionando. Acho que parece muito bom. Certo, então temos isso. Agora estamos aqui na fronteira. Ok, então há duas coisas que eu quero fazer com isso. O número um é que eu quero arredondar essas bordas um pouco mais, e eu também quero dar uma aparência mais ampla. E para dar um olhar mais amplo, vou diminuir o espaço na parte superior e na parte inferior e manter este tipo de espessura deste lado. Certo, então a primeira coisa que vou fazer é descer até a fronteira. Então, se eu aumentar isso, isso vai aumentar as bordas ao redor dele, então arredonda as bordas. Verifique isso. Se eu clicar sobre estes, você pode ver que as bordas estão mudando em torno deste widget. Certo, em torno deste elemento está ficando realmente redondo. Eu acho que isso é muito excessivo para este projeto. Eu estou indo para algo sela como, e então eu mantenho apenas cinco Vamos em frente. E Previ que isso é antes e isso é depois de um sutilmente grosso. Mas acho que está muito bonito. Você pode ver que há um arredondamento no canto, então eu realmente gosto disso. Então a próxima coisa que vou fazer é dar a ele uma sensação mais ampla. Ok, então eu vou em frente e aumentar isso. Então, se eu estiver brincando com isso, você pode dizer que é por agora que está mudando todos os elementos, certo? Todo o preenchimento ao redor do texto aqui e eles estão todos sincronizados. A esquerda, a direita, a cima e a parte inferior. Agora o que eu vou precisar fazer é clicar sobre isso que diz vincular valores juntos. Então eu posso ligá-los e eu vou mudar o top 215 certo? E eu vou mudar os dois últimos 15 também. Então eu vou ir em frente e visualizar essas mudanças e ver onde vamos chegar. Você pode ver que os livros mudam de tamanho. Encolhemos um pouco aqui, mas ainda mais aqui e aqui. Então eu estou realmente gostando deste olhar mais sela, mas ainda mais largo. Olhe para fora do botão. E se eu passar o mouse, você terá esse belo efeito de estourar. Estou gostando muito disso. Então, descendo para 20 sobre estes, nós também diminuímos o preenchimento. Mas eu realmente gosto desse efeito. Agora, se você quiser ter o botão que parece semelhante e isso é decentemente universal. Muitas pessoas gostam de ter um botão é deste tamanho. E com aproximadamente esse tapinha, tudo o que eles precisam fazer é ir em frente e manter o estofamento para o topo e o fundo em 15 direita e esquerda em 20. Eu realmente gosto desses valores. Certo, então não vamos brincar com o tipo de fronteira. Nada que precisemos fazer na seção avançada isso vai estar brincando com toda a seção, ok? E não há nada que realmente queremos fazer lá Agora, por exemplo, por exemplo, se eu começar a aumentar isso, você pode ver que eu estou aumentando o tamanho da seção e, da mesma forma, se eu descer para o fundo e dar uma cor aqui, por exemplo, eu clico na cor. Essa será a cor desta seção, e não vamos querer brincar com isso. Nós só vamos querer consertar o mas e torná-lo papa assim. Faça com que pareça bom. E não vamos adicionar efeitos para isso também. Certo, então vamos apertar a pré-visualização das alterações mais uma vez e conferir. E aqui estamos nós. Se eu passar o mouse por cima, olhe para este botão. E se eu clicar nele, eu vou ser levado para o início aqui. Page, estou muito feliz com isso. Pessoal, acho que está começando a parecer incrível. Para ser honesto, estou orgulhoso disso. Então o que eu poderia fazer agora é dar uma olhada em volta. Por exemplo, eu gosto disso O porquê vai tanto para a lua? Está tudo fora do texto. Legível. Por exemplo, você está procurando construir ou expandir seu negócio encontrar? Porque o branco vai bem neste fundo, esta parte vai bem também. E esta parte vai bem também. Mas se isso tivesse sido um pouco mais baixo e chegar a este amarelo aqui, isso não seria tão legível. Ok, então, por exemplo, se eu quisesse mudar por aí, se eu quisesse mover um pouco esse texto bem, eu precisaria fazer é ir aos elementos aqui e adicionar algo chamado espaçador. Agora, veja isso. Se eu adicionar o espaçador aqui, isso vai ocupar espaço. Isso é tudo o que faz. Ele ocupa espaço na seção e empurra isso para baixo. Então veja isso. Eles para pré-visualizar. Nós o temos aqui e agora ele é empurrado para cá. Você pode ver que isso está parecendo muito bom, bem, mas eu gosto de ter isso leva um pouco mais alto para cima. Então eu poderia Houston. Mas posso fazer algo como microgestão de verdade. Algo como quatro, por exemplo, modo que o porquê um pouco mais baixo da lua. Vou apenas pré-visualizar essas mudanças lá. Parece que eles são parece muito bom, mas podemos ver que o literalmente aqui agora, não é tão legível. Podemos fazer essa microgestão ridícula, e eu só mais uma vez. Este é o propósito do sinal. Isso é o que você prefere que vamos checar. Na verdade, ainda está um pouco baixo, então eu vou apenas ir em frente, direito, clique nele e clique em excluir. Lá vamos nós. Vou pré-visualizar as mudanças. E sim, isso parece muito bom. Então eu não vou usar um espaçador aqui, mas você pode querer fazer isso, a fim de se ajustar ao seu design, a fim de garantir que tudo isso fique bem em seu plano de fundo. Certo? Então, pessoal, se eu pudesse, eu daria cinco de vocês. Eu vou. Enfim, ótimo trabalho. Chegamos até aqui. Estou muito feliz com isso. Podemos ir embora. Este recurso está agora e passar para a próxima seção. Acabamos de editar a seção de dobra acima. Muito bom trabalho. Agora, se você tiver alguma pergunta que a polícia fizer na Q e A. Nós responderemos dentro de 24 horas. Vamos passar para a próxima palestra. Ótimo trabalho. Veja, ali 15. Adicionar depoimento: Tudo bem. Então, ter terminado de editar o acima a seção de dobra em nossa página inicial. Quão excitante é isso? Agora vamos avançar e prosseguir com a adição de conteúdo para o nosso abaixo as seções de dobra em nossa página inicial agora se você tem seguido ao longo do curso de mais cedo, houve uma palestra quando estávamos verificando outro site bem-sucedido verificando página inicial e tomando notas. Certo. Ainda tem essas anotações? Bem, eu faço se há no papel para você ou digitalmente como eu escrevi. Quero dizer, isto parece terrível, mas é muito eficaz e uma coisa que escrevi aqui foi o “So Show “provou certo. Eles precisam de provas sociais para que os visitantes possam confiar em você e saber que o que você tem para oferecer é fora de valor é a mesma coisa. Quando se trata de páginas do Facebook que mais gosta, maior é a probabilidade de confiar nelas, instagram ou qualquer site da plataforma. Eles funcionam de forma semelhante. É que você realmente não vê quantos visitantes eles têm. Vamos precisar adicionar este formulário à prova social para que as pessoas confiem em nós, está bem? E, claro, você se safa com mais. Se você tem um nome realmente grande, são realmente grande marca. Mas não somos grandes o suficiente. Você precisa ter um enorme e mesmo assim ainda quer a prova. Então o que vamos fazer é realmente ir em frente e adicionar um testemunho bem abaixo da dobra aqui. Então, o que teremos feito até agora é mostrado sobre o que estamos sobre e guiou-os para mais conteúdo em um site que vamos editar na seção Eles estavam no início aqui , mas queremos apresentá-los para ainda mais coisas sobre nosso site e construir sua prova social . Eventualmente, vamos fazer coisas como Adam E. Mail aberto, etc, etc. Então vamos começar a adicionar a prova social, informar um depoimento, e isso é realmente super fácil de fazer. Tudo o que precisamos fazer é rolar até o elevador, encontrar o testemunho. Nós vamos em frente e agarrá-lo e, em seguida, liberá-lo e eles terão um belo modelo de testemunho configurado já. Honestamente, Honestamente, é ridículo como é simples com o elementar. Adoro este programa. Então vamos começar a configurar isso pouco a pouco, e vamos fazê-lo juntos. Agora. A primeira parte é o texto em si e o texto. Vou usar uma crítica de um dos nossos alunos, certo? Então eu já tomei a liberdade de ir em frente e lidar com isso que leva de você é Dima curso? Então, vou colar isso. E o maravilhoso é que isso é realmente uma crítica. Isto não é falso de forma alguma. E ele tem algumas realmente belas e tipo de palavras que diz que este é o melhor e mais completo curso on-line sobre como expandir seu negócio on-line com frete drop. Ganhei mais de $1200 na primeira semana fora de vendas. Tudo graças à aula aberta dos Jeffers Monster. Agora, isso é prova social, se alguma coisa, certo. Então este é realmente um bom material para trabalhar, e isso vai ser muita confiança para nosso site para nossos cursos, que vamos apresentá-los para etc. Esta é uma revisão maravilhosa para usar. Então o que, nós vamos em frente e fazer agora é uma vez que nós adicionamos no conteúdo aqui, nós vamos descer e escolher a imagem ea imagem vai ser fora do revisor. Agora, eu já falei com este aluno e estou autorizado a usar a foto dele. Ele realmente me enviou uma foto, então eu vou em frente, pegar aquela e preparar aquela. Então eu vou fazer upload de arquivos. Vou selecionar arquivos e clicar em direitos aqui. Lá vamos nós. Agora você vai notar que este arquivo é realmente bastante grande. É um megabyte e você pode ver que os pixels são enormes é mais de 3000 por mais de 2300 nós só vamos usar isso para sites realmente, muito pequenos. Então, adicionando essa imagem enorme que tem esse grande tempo de carregamento, isso simplesmente não faz sentido, mesmo que seja uma imagem muito legal. Então, o que vamos avançar e fazer é realmente mudar o tamanho da imagem para miniatura. O que isso vai fazer é que o tempo de carregamento vai ser severamente reduzido. O tamanho da imagem vai ser diminuído em série. E ainda assim não haverá perda de citação porque estamos usando uma foto tão pequena, certo? Então isso está tudo pronto. O que vamos seguir em frente e fazer agora é apenas verificar, verificar na pré-visualização e ver como ele está agora. Então vamos rolar para baixo e podemos ver. Certo, aqui temos a mensagem. Aqui temos a foto. Acho que está muito bonito. E o nome dele não é John. Não é um designer, mas vamos mudar isso. Mas até agora, tudo, Lou, deve estes carregando super rápido e nós estamos realmente procurando por isso. Então vamos definir o nome dele. Você trabalha com Emeric, filho. E o título. E o que eu vou fazer aqui é certo, Fundador vai fazer uma marca de vírgula, e então eu vou escrever o site dele, que é a chave da loja de vídeo ponto com. Está bem, ele é o fundador desta loja maravilhosa a vender artigos boémios, mas não vou escrever o que fizemos num link. E eu também não vou escrever o link dele aqui, mesmo que você pudesse. O problema é que se as pessoas clicarem neste link, elas serão diminuídas do seu site. Agora você pode adicionar o link como um ling de saída. Então você ajuda outro com o CEO, mas eu não recomendo. Eu recomendo que suas pessoas baixas se concentrem em seu site. Mas se você decidir adicionar este link, vá para opções e clique em abrir em uma nova janela. Isso é muito, muito importante para ter certeza de que eles ainda estarão em seu site. Mas não vamos acrescentar o Lincoln aqui. Nós vamos apenas adicionar no título fundador direito e, em seguida, adicionar no site para que ainda estamos referindo lá. Mas não estamos nos ligando lá, certo? E então rolando para baixo. Temos a posição da imagem, que está de lado. Também pode estar por cima. Então, nós pegamos assim. Mas eu realmente não gosto disso. Eu gosto disso. É um espaço seguro quando está do lado assim. E acho que parece muito profissional. Então é isso para o conteúdo agora vamos passar para o estilo. Há algumas coisas que eu realmente quero mudá-la agora. A primeira coisa que quero falar é sobre a perspectiva atual aqui. Agora podemos ver que aqui estamos tendo um fundo mais escuro com texto branco. Ok, então o tipo de estilo que eu estou fazendo aqui, é um contraste. Agora eu vou preferir ter um fundo branco e depois ter um texto mais escuro. E eu realmente gosto da assinatura, o tipo de estilos no site quando você tem alguns chamadores no topo, e então você contrasta com a primeira próxima seção na parte inferior com a abaixo da dobra. Então vamos em frente e fazer isso agora para o conteúdo. Na verdade, quero mudar um pouco as coisas. Primeiro de tudo, eu não gosto que isso tem cor. Vou entrar aqui e vou selecionar. Lá vamos nós. Um cinza mais escuro. Acho que isso tira o Papas muito mais. Então vamos para a tipografia. Não vou brincar com a frente. Acho que a fonte é perfeita. Eu vou, no entanto, brincar um pouco com o tamanho. Vou torná-lo um pouco maior. Lá vamos nós. Vamos com 21. Eu acho que isso está parecendo muito bom, então ele aparece um pouco mais. Acho que está muito bonito agora. O peso. Não vou brincar comigo. Tenho certeza que 500 é padrão. Se eu clicar nele, nada acontece. Certo? Mas 600 vai torná-lo muito grosso. Vemos que quase se torna a bola assim. Então não vamos brincar com isso. Nós também não vamos nos transformar em um caso superior ou algo assim. Mas vamos torná-lo em itálico, porque olha para isto. Isso realmente muda toda a perspectiva do texto. Agora, sempre que estou adicionando testemunhos, sempre coloco em itálico. Eu só acho que é uma parte tão importante do tipo de design que leva o Pope. E também, as pessoas geralmente esperam esse tipo de itálico quando se trata de palavras de outra pessoa, certo, porque faz com que ele leva Papa em outras maneiras. Temos nosso próprio projeto, e então há um súbito itálico vindo de outra pessoa. Acho que parece muito, muito bom. Não vamos fazer nenhuma decoração. Não vamos brincar com a altura da linha ou o espaçamento das letras. Vamos pressionar isso assim. Então nós vamos passar para a imagem Agora o tamanho da imagem, eu acho que parece muito bom, mas nós poderíamos estar brincando com ele um pouco se quiséssemos. Vou colocar em 50. Acho que 50. É um tamanho muito bom. Não vamos ter nenhuma fronteira. E você saberá que a fronteira se enfureceu, mesmo que não mostre a ela que já o definiu. Porque se eu disser isso a zero, você vai notar que ele se torna um quadrado como a foto original é. Mas se eu colocar isso para 50 ele vai ter esta bela rodada porque muda a fronteira . Agora vamos falar mais sobre as fronteiras daqui a pouco. Ok? Então vamos desmoronar a imagem, e depois vamos para o nome. Agora. Eu quero mudar isso um pouco, também. Quando se trata do nome, eu realmente gosto dele. Vou pô-lo a preto como breu, mesmo que isto não faça qualquer diferença lá. Eu vejo. Então, estou realmente feliz com isso por enquanto. Mas isto por baixo, não estou a gostar disso. Acho que são duas luzes. Vou usar a cor do texto. Vou em frente e deixar isso mais escuro. E lá vamos nós. Acho que já parece muito melhor. Então agora nós combinamos o cooler para este texto embaixo e este. Então vamos em frente e conferir no modo de visualização. Então lá vamos nós. Até agora, tão bom seco. Acho que parece muito bom. Agora há uma coisa que eu realmente não estou cavando aqui, e isso vai ser um aspecto tão importante quando se trata de projetar seu site, e que é o espaço entre as seções. Agora você já pode ver isso. Daqui. Há um pouco de branco aparecendo abaixo que quase não há espaço entre o branco e o texto, então não há realmente muito de uma perspectiva. É como se você tivesse essa bela imagem aqui, o belo fundo que leva a mensagem, e então ela entra diretamente nisso. Isso está tão condensado agora, que eu queria ser mais espaçoso. Quero criar mais espaço entre estes e para as próximas seções, então vamos falar um pouco mais sobre como fazer isso. Então, para fazer isso, o que vamos fazer é ir em frente e clicar em Editar Seção para esta parte ali e então nós não vamos mudar nada aqui. Ainda queremos o conteúdo da caixa. Não precisamos esticar a seção porque a seção já está esticada aqui por padrão sobre o tema. Se tivéssemos um tema de boxe como este, poderíamos esticá-lo até o fim. Mas como você pode ver, já faz. Então não precisamos usar a seção esticada. Então o que nós vamos fazer é avançar, e eu vou mostrar a vocês a diferença entre margem e preenchimento o que eles são, como usá-los e o que eles significam. Agora, a fim de mostrar isso muito mais fácil, eu vou em frente e fazer o fundo fora desta seção Black. Isto é apenas para fins de demonstração. Que desta vez vamos usar vai ser branco. Mas eu vou para o estilo de fundo clássico mudou a cor para preto como breu. Lá vamos nós. E então eu vou para avançado. Ok, então vamos começar a falar sobre margens e estofamento. Então, com margens, Mas estamos procurando aqui é que por aumento na margem, estamos aumentando o espaço entre esta seção e esta seção. Lembro-me que nesta secção temos uma coluna. Você pode ver esse azul claro aqui. Essa é a coluna e a outra linha pontilhada aqui em cima. Essa é a seção. E então dentro da coluna temos o elemento, certo? Já passamos por isso antes na palestra de anatomia. Agora, se eu colocar 50 nisso, você vai notar que nós estamos realmente movendo esta seção para longe desta seção e entre ele, nós ficamos brancos, nós ficamos brancos puros. Então, se eu seguir em frente e eu visualizar as mudanças aqui, nós estamos tendo esse tipo de espaço no meio. E enquanto eu quero este espaço, eu ainda queria estar da mesma cor de espada, certo? E é por isso que eu mudei para preto, porque se eu mudasse para o quê, você notaria essa diferença. Então, o que estamos realmente olhando para fazer é mover os elementos do conteúdo para longe desta seção. Nós não estamos realmente olhando para mover a seção para longe da seção e a maneira de fazer isso ,é realmente voltando, , nós vamos redefinir estes e aumentando o preenchimento. Então, o que o preenchimento faz é que ele aumenta o espaço entre a coluna e esta seção. Certo? Então, se eu colocar 15 aqui, você vai notar que aqui ainda temos a seção A seção ainda está conectada com a seção anterior. Nada aconteceu, mas a coluna, esta é a coluna por aqui, eles os chamam, se afastou desta seção. E porque temos Joe alguém colarinho para toda a nossa seção, isso significa que podemos ficar com a pessoa que ligou. Então, agora, se eu for em frente e visualizar as alterações, podemos ver que o chamador é na verdade o mesmo. Essas seções ainda estão conectadas. Mas agora temos este belo, belo espaço entre nós que estamos procurando. Então eu estou realmente apreciando este design e isso vai ser tão importante quando estamos trabalhando com este tipo de cores diferentes na seção. Então, mais uma vez, apenas para recapitular aumentando a margem, você aumenta a distância entre as diferentes seções. OK, Ao aumentar o preenchimento, você está aumentando a distância entre a coluna e esta seção. E essa será a coluna ou colunas que você está editando atualmente. Lembre-se, nós estamos clicados na seção de edição, então eu espero que isso seja realmente claro e faça muito sentido. Margem é para seção e seção preenchimento é para chamado ele e direitos sexuais. Então vamos em frente e vamos para o estilo e remover este colar porque nós não vamos usar esse. E nós vamos em frente e transformá-lo em “porquê”. Lá vamos nós. É um bom Luke também. Então vamos em frente e visualizar essas mudanças. Então lá vamos nós. Acho que isto já está a começar a parecer muito melhor. Estou gostando desse espaço no meio. Observe também agora que vai ser diferente dependendo da resolução em sua tela, é claro. Mas para mim, eu tenho um pouco fora de uma listra branca aqui em baixo. E mesmo que eu desça um pouco, ainda é branco. E então vem esse texto maravilhoso e então temos a foto. Nós temos o nome e temos a informação acontecendo aqui. Esta é apenas uma seção e haverá mais, mais. Então nós temos, como, esta página inicial de rolagem. Mas este espaço ali é tão importante. Então o que vamos seguir em frente e fazer a seguir é realmente deixá-lo assim agora eu estou feliz com a edição da seção. Não há mais nada que eu queira mudar aqui. Mas o que eu quero fazer é realmente mudar isso e enfatizar algumas dessas palavras. Acho que eles caem um pouco. Então eu vou ir em frente e clicar aqui para voltar para a edição fora dos elementos do texto. Vou passar para o conteúdo. E agora, os rapazes vão ser a primeira vez que escrevemos o nosso próprio cone. Isso não entra em pânico. É super fácil. E isso é o mais longe que vamos com codificação. Então o que eu vou fazer aqui é realmente fazer algumas palavras ousadas, certo? Então o que vou fazer é escolher algumas palavras. Vamos ver se voltamos ao site aqui e rolamos para baixo. Podemos ver. Aqui vamos nós. Temos os 1200 dólares na primeira semana de desconto. Vou tornar esta parte ousada. Ele também parece tão bom porque ele começa na primeira linha aqui bem na segunda linha. Mas eu também vou ir em frente e fazer facilidade ousado neste 100% satisfação garantida. Quero dizer, honestamente, esse cara, ele está promovendo nosso curso tão bem com essas palavras maravilhosas. Então vamos em frente e enfatizar as palavras mais importantes Say, que também vai fazer esta seção se destacar mais. Então vamos começar por aqui. Vou clicar aqui com a minha boca. Então eu sou selecionado lá. Depois vou fazer este sinal, está bem? Agora, se você não sabe o que este sinal é, parece que este tipo de sinal é o sinal que está logo abaixo de um na palavra chave e à esquerda fora disse, OK, então nós vamos fazer este tipo de sinal e então eu vou escrever um B. Lá vamos nós. E então eu vou segurar o turno, e então eu vou clicar naquele sinal de novo. Então é quase como se estivéssemos colocando uma parede dentro deste letreiro. Notei que tudo está ficando ousado agora. Tudo depois disso está ficando ousado. Então o que nós vamos fazer é encontrar um lugar para parar os ousados na primeira semana fora de vendas. Lá vamos nós. Então eu vou parar o parafuso aqui, então tudo o que eu vou fazer é criar este sinal novamente, fazer uma barra e, em seguida, escrever um B e, em seguida, mudar e clicar no sinal contra. Então isso pára a ousadia. Então agora podemos ver que temos esse tipo de ousadia em Lee nesta parte onde diz $1200 dentro da primeira semana fora de vendas, e então vamos em frente e fazer o mesmo com 100% de satisfação garantida. Lá vamos nós. Vou escrever “B”. Como você pode ver, tudo está ficando ousado, mas eu vou acabar com isso aqui mesmo para Slash Beat. Lá vamos nós. Então isso está muito bonito agora. Está estourando um pouco mais. Vamos avançar e pré-visualizar essas mudanças. E se você acha que isso é complicado, não se preocupe. Vou em frente e definir o código. O recurso é que você pode ir em frente e pegar uma cópia colada, e eu vou te mostrar onde escrever seu texto. Você pode usar isso a qualquer momento. Certo, rolando para baixo. Atualmente parece com isso. Este é o melhor e mais completo curso on-line sobre como crescer negócios on-line com entrega. Realmente legal. Quero dizer, mais de $1200 na primeira semana fora de vendas nós temos isso. ousadia parece muito boa. Tudo graças a Robyn Ingerir Spurs classes monstro O passo prático como passo a passo tribunal E é muito fácil de seguir. Qualquer um pode fazer isso. Negrito ganhando 100% de satisfação garantida. Você é Kim Erickson, filho fundador, você armazena ponto com incrível. Incrível. Incrível. Estou amando essa seção. Até agora, estou feliz com tudo com ele. E eu vou ficar satisfeito com isso agora à medida que avançarmos e continuarmos a ser mais barulhentos com minhas semanas de dois centavos aqui em suas próprias coisas diferentes. Mas agora estou amando isso. E, como sempre, não se esqueça que quando terminar, quando estiver feliz com isso, clique em atualizar. Certifique-se de que está sempre a guardar o seu trabalho e de que está sempre a manter as coisas actualizadas . Mesmo que você esteja apenas salvando o rascunho direito. Sempre mantenha as coisas seguras. Então é assim que você cria um testemunho em sua página inicial. Agora, se este é o plano para o seu também, vá em frente e siga o exemplo. Caso contrário, continuaremos no curso e você projetará seu site da maneira que se aplicará a você. Veja na próxima palestra, pessoal. 16. Adicione o e-mail na versão 1/2: Tudo bem, então nesta palestra, vamos em frente e criar um e-mail, muitas vezes seção e fora do curso. Há inúmeras quantidades de ciência que você poderia fazer para sua seção aberta de e-mail. No entanto, vou mostrar-vos duas versões diferentes. E nesta palestra, vamos passar pela primeira vez, e esta versão vai ser a versão de capa completa, assim como fizemos acima. No acima, o design completo que estamos cobrindo praticamente toda a tela estavam oferecendo. É preciso uma explicação e depois um fundo. Agora vamos fazer um design semelhante aqui para o e-mail Upton, onde vamos usar praticamente toda a tela, e então vamos oferecer-lhes algo e, em seguida, ter uma chamada à ação e, em seguida, adicionar nosso e-mail esperado Informar. Ok, então vamos em frente e começar este projeto. Então, a primeira coisa que eu vou fazer é ir em frente e clicar no plus aqui porque para este projeto, eu vou adicionar duas colunas e a razão para isso é porque aqui eu estou realmente vai estar adicionando os elementos e a maneira que eu Eu vou estar fazendo isso é usando primeiro um cabeçalho, eu vou estar descrevendo a oferta que eu tenho, que neste caso, vai ser hacks de marketing digital. Curso. Então, vamos oferecer um cupom grátis para que eles possam obter nossos 10 pontos de corte de marketing digital quatro grátis. Se eles se inscreverem na nossa lista de e-mail agora, você sempre quer ter algo a oferecer para dar-lhes uma razão para se inscrever, certo? Então essa vai ser a primeira coisa agora lá embaixo. Vai haver um texto, escreve um texto que explica o que está aqui e o que eles vão receber e abaixo . Haverá o e-mail muitas vezes, e vamos usar o poeta masculino para isso, certo? Mas antes de acrescentarmos poeta masculino, sei que há muitas coisas acontecendo, mas tudo vai fazer sentido em um segundo agora antes de irmos em frente e acrescentarmos sei que há muitas coisas acontecendo, mas tudo vai fazer sentido em um segundo agora antes de irmos em frente e acrescentarmos : Vamos em frente e criar uma forma poeta masculina. Se você tem seguido ao longo dos tribunais. Você sabe que esta é uma parte essencial projetar os quatro tornando-o bom. Ok, então vamos em frente e fazer isso. Então, agora a primeira coisa que vamos fazer é ir até o poeta masculino e depois ir para a lista. , Lembrem-se, temos listas diferentes no porto masculino por razões diferentes. Por exemplo, temos a lista de assinantes comuns. Temos a lista da barra lateral, e agora vamos fazer uma página inicial. Marca digital recebendo lista de hacks. Lá vamos nós. E o ponto disso é para que quando as pessoas se inscreverem aqui, possamos seguir em frente e fazer uma sequência para garantir que eles recebam o código e o link para o nosso curso de hacks de marketing digital. Certo. Então, quando eles se inscrevem aqui, eles são adicionados a esta lista que podemos automatizar esse processo. E se não tiver, vá em frente e confira a palestra do poeta postal mais tarde no curso. Porque nós passamos por como fazer tudo isso lá dentro, e então eu vou apenas escrever. Incluir fez isso Mark recebendo hacks, curso mais link. E isto é só para mim. Para me lembrar do que está incluído nele o que vou fazer. E então eu vou clicar em Salvar. E agora eu vou subir dois formulários aqui em cima, e então eu vou clicar em Adicionar novo, e eu vou estar chamando esta página inicial. Hacks de marketing digital. Lá vamos nós. E eu vou selecionar a lista, que vai ser as páginas iniciais da lista de hacks de marketing exatamente assim. Ok, então agora nós vamos seguir em frente e este sinal, e a primeira coisa que eu vou fazer é ir para Fields e eu vou adicionar o primeiro nome e colocá-lo lá em cima. Quero que isto seja muito simples, certo? Então eu vou clicar na tela de edição, e eu vou ter o rótulo de exibição colocado dentro para economizar espaço. E eu também acho que é um design muito mais agradável. Então, em vez de ter o primeiro nome aparecer, ele vai aparecer aqui dentro, e o primeiro nome não vai ser obrigatório. Então olhe para isso parece muito bom. E então o e-mail que eu vou colocar a etiqueta dentro. E, claro, e-mail é sempre obrigatório, mas o primeiro nome não é. E depois vou em frente e editar a etiqueta para o botão de assinatura. Vou escrever algo como me enviar os hacks, algo assim, e clicar em Concluído. Lá vamos nós. E agora eu vou ir em frente e clicar em Salvar, então ele está salvo. Então vamos voltar para L.A mentor aqui. Agora, o que eu vou fazer é ir em frente e clicar neste e arrastá-lo para baixo. Lá vamos nós. Então agora eu adicionei os três elementos diferentes e este não é o formulário vai ser usado. Vou me trocar também. Pistões domésticos não marketing hacks forma parece um pouco diferente. É muito mais limpo tem muito menos coisas sobre ele. Lá vamos nós. Eles teriam me enviado os hacks. Isso parece muito bom. E eu vou remover o título, na verdade, e a razão para isso é todo o texto que vamos adicionar aqui que vamos fazer nós mesmos porque parece muito melhor assim. Então, aqui estamos nós. Agora é hora de começar a assinar isso. Está bem, mas antes de começarmos a desenhar isto, vamos em frente e adicionar a nossa imagem de fundo. Assim como acima aqui, lembre-se, nós fomos em frente e encontramos esta foto. Fizemos esta seção realmente grande, e então adicionamos os diferentes elementos e os projetamos juntos para que eles fiquem realmente bonitos e limpos agora. Da mesma forma, porque isso tem esse tipo de exibição e nós vamos tê-lo ao lado. Vamos querer um ponto focal de algo no meio, certo? Vamos querer um ponto focal de algo no meio, Porque vamos gastar todo o nosso conteúdo para a esquerda. É por isso que criei duas colunas para manter tudo isso à esquerda. E então eu vou ter uma bela imagem de fundo com algo está acontecendo, também no meio e ligeiramente para a direita. E o outro e-mail muitas vezes vai ter um discípulo um pouco diferente seguir por aqui vai parecer muito, muito legal. Então, pessoal, vocês se lembram de como fazer isso? Certo? Eu vou em frente e ir para a seção de edição e eu vou para o estilo aqui e agora é hora de realmente encontrar uma imagem de fundo. Então os picaretas obedecem ao nosso velho amigo. Vamos em frente e encontrar uma boa imagem de fundo que possamos usar. Então desta vez, lembre-se, antes eu tinha duas palavras em que estava pensando. A rede era inspiração e liberdade. E eu vou realmente ir em frente e procurar por liberdade desta vez porque essa é uma palavra tão poderosa de um sentimento tão poderoso que você quer dar e então eu vou mudar as coisas um pouco e ir para lá vamos orientação. Vou colocá-lo na horizontal. E então eu também vou ter certeza que o tamanho é pelo menos 1900 vezes 1000 porque ele queria ter certeza de que ele fica realmente largo, certo? Quero dizer, as demandas são altas quando estamos tendo esse tipo de imagem completa para que ele se encaixe corretamente, e então eu também vou mudar a categoria, e eu vou colocá-lo para as pessoas porque eles realmente querem que a pessoa aqui para fazer um pouco mais interessante. Então vemos algumas fotos diferentes aqui, e há muitas coisas diferentes que você pode fazer. Então aqui, por exemplo, o que eu poderia fazer é usar esta imagem e, em seguida, colocar todo o conteúdo aqui bem você vê , há este espaço aberto agradável e então há algo acontecendo à esquerda porque nós têm duas colunas e só vamos sentir uma coluna. Eu poderia fazer algo parecido aqui. Algo é semelhante aqui, no entanto. Está um pouco lotado e algo parecido aqui. E aqui você começa o ponto. Mas o que realmente se destaca para mim é esta, porque ela é colocada no meio ligeiramente para a direita. Há muito espaço aqui para o texto e honestamente, isto para mim é uma imagem de liberdade muito agradável. Então eu estou realmente amando isso. Vou em frente e baixá-lo. Então eu vou clicar no download gratuito aqui, e eu vou com este aqui. Você sempre quer ter certeza de que as fotos abaixo de um megabyte este lugar diferente e eu vou clicar no download e olhar para este gratuito para uso comercial nenhuma atribuição necessária. É perfeito. E depois voltarei para L.A. L.A. Mentzer. Vou clicar aqui. Vou em frente e selecionar o arquivo. Aqui está, e eu vou clicar em Escolher e aqui nós temos isso e ele já foi otimizado, então isso é muito bom. E eu vou clicar em inserir direitos de mídia. Então, como podemos ver, não há muita coisa acontecendo agora. Há algumas coisas que vamos querer fazer. número um é que vamos querer expandir toda esta área. Certo? Então vamos para o layout, vamos ajustá-lo para alturas mínimas, e então eu vou em frente e escrever em 700 porque eu lembro que esse é um número muito bom . Então lá vamos nós. Está cobrindo uma grande parte da tela com bom aspecto, mas a imagem não é realmente adequada, é? Então vamos para o estilo, e então vamos para o tamanho, e vamos para a cobertura. Então lá vamos nós. Isto parece muito bom. Na verdade, isso é perfeito. Isso é exatamente o que eu queria. Podemos ver que ela está ocupando esse espaço, e aqui podemos colocar nosso conteúdo e todas as nossas coisas, então isso é muito, muito legal. Por isso, estou a adorar isto até agora. Há algumas coisas que quero fazer porque, como podemos ver, há muita escuridão acontecendo aqui. Tem um monte de vermelho. Isto é branco. Adoro o contraste, mas ainda é uma noiva de fora. Então eu vou para a sobreposição de fundo. Eu vou em frente e ir para o Clássico aqui, e eu vou clicar na cor e então eu vou apenas escolher uma cor. Então eu fico com o vermelho. Isto não tem de ser exacto. Você poderia adicionar o código de cor aqui, mas isso não precisa ser tão preciso. Eu só queria que eles ficassem um pouco mais vermelhos, e então eu vou mudar a capacidade para que possamos ver que a imagem está ficando um pouco mais vermelha. Lá vamos nós realmente gostando disso. Então confira a diferença entre isso é uma super luz, e isso é um pouco mais vermelho acontecendo, dando-lhe mais contraste. Estou amando isso. Isso se encaixa perfeitamente com o nosso tema avermelhado. Obrigado. Então, isto é perfeito. Vamos verificar e ver como ele parece agora, eu vou ir em frente e clicar em pré-visualizar alterações. Então rolando para baixo, podemos ver que isso é realmente muito legal, mas ela não está se encaixando aqui da maneira que eu gostaria que ela fizesse. Então eu vou voltar aqui e eu vou ser o seu estilo. E então eu vou descer para a posição, e eu vou tentar algumas posições diferentes para ela. Então, o 1º 1 que vou tentar é central, está bem? E depois vou matar-te. Pode visualizar alterações e ver como isso muda as coisas. Rolando para baixo. Muito bem, muito melhor. Super feliz com isso. Para ser honesto, isso está muito bonito. Está cortando um pouco para comida aqui, mas na verdade, acho que posso viver com isso. Poderíamos ir em frente e mudar o layout um pouco. Talvez tenha aumentado as lágrimas altas. Então nós temos um pouco mais fora para talvez ir para 750 neste caso. Vá em frente e clique. As alterações de visualização de comunicação rolam para baixo e aqui vamos nós. Sim, definitivamente. Estou amando isso. Isso é super legal 17. Adicione o e-mail de Opt-In versão 2/2: Ok, então vamos começar a editar os outros elementos. Vou em frente e começar com o cabeçalho. Eu vou clicar aqui, e então eu vou escrever para obter hacks de marketing digital de graça assim porque isso é o que estamos oferecendo para o nosso apelo à ação. Certo? Então, se eles se inscreverem, eles vão ter nosso curso de hacks de marketing digital de graça, e nós vamos ter o endereço de e-mail deles, então eu quero mudar isso um pouco. Não estou muito feliz com isso agora. Eu vou em frente e ir para o estilo. Eu vou para a tipografia, e a primeira coisa que vou fazer é brincar um pouco com o tamanho, então eu não vou ser tímido aqui. Vamos fazer algo assim. Obtenha hacks de marketing digital gratuitamente. Eu acho que está bom, mas eu realmente quero remover este ponto de exclamação. Lá vamos nós. Eu estava olhando muito melhor, e então eu vou ir em frente e transformá-los em maiúsculas. Eu quase sempre faço maiúsculas. Quando se trata deste tipo de manchetes, obtenha hacks de marketing digital gratuitamente. Vamos avançar e pré-visualizar as alterações. Então isso está olhando realmente bom certo, Obter hacks de marketing digital gratuitamente. No entanto, eu gostaria de colocar os quatro aqui para que eles estejam juntos. E há uma maneira muito fácil de fazer isso. Nós poderíamos apenas ir em frente e puxar isso em sempre tão ligeiramente e francamente, visualização de comunicação muda e as chances são que neste tamanho, ele vai ser ter saltado para baixo, e ele tem, certo, então há um pouco menos espaço indo em direção a ela. Ela cobre mais fora da tela, mas podemos ter esse pop ainda mais então estou gostando disso agora. Vou resolver isso porque estou super feliz, mas acho que parece muito bom. Vou passar para este. E tenho que dizer que até agora, essa cor cinza claro não funcionou muito bem. Então o que eu vou fazer é que eu vou para o menu aqui atrás. Eu vou para cores padrão e eu vou para a cor do texto e eu vou torná-lo em este mais escuro leva cor assim e clique em. Aplicar direito. Porque já usamos o mais escuro leva cor também aqui. Então não vai mudar nada, então estou gostando muito, muito mais. E então eu vou seguir em frente e clicar aqui e começar a editar. Agora, eu já pré ler um texto. Vou colar isso aqui porque, pessoal,não sou assim pessoal, que eu possa escrever isso no local, mas aqui temos o texto que diz “Obter os últimos hacks para marketing digital”. Facebook, YouTube, instagram, AdWords, LinkedIn, Quora e S e O mais a máquina de criação de conteúdo. $99 de valor gratuitamente. Cadastre-se, abaixo, e enviaremos para você. Realmente legal. Então vamos brincar um pouco com esse estilo. A primeira coisa que eu quero fazer é, é claro, aumentar o tamanho. Lá vamos nós. Você quer ter direitos legíveis. Então vamos experimentar isso e clicar em pré-visualização, e então vamos rolar para baixo e verificar. Obter o mais recente mercado produtor hack do Facebook YouTube em haste. Lá vamos nós. Está parecendo muito bom. Agora, eu realmente gostaria que isso estourasse um pouco mais. Então o que eu vou fazer é aumentar o tamanho ainda mais então eu vou voltar para a tipografia, e atualmente é 22. Vamos com 24 ver o que acontece e visualizar as alterações. Então, aqui temos. Já está muito melhor. Agora podemos ver que por causa deste colar aqui, isso está derretendo um pouco demais para o meu gosto. Então eu vou ir em frente e colocar essa cor um pouco mais. Agora, eu vou para a cor do texto, e eu vou estar clicando neste padrão. Maior temos e apenas torná-lo um pouco mais cinza. Certo? Vou até mover isto mais para a área negra. Você pode ver que eles estão começando a estourar um pouco mais. Lá vamos nós. Então eu vou ir em frente e bater em pré-visualização mais uma vez, rolar para baixo. E isso é muito mais fácil de ler, não é? Estou gostando desse grande fã. Então, aqui temos agora. E aqui você escreve o primeiro nome aqui, você escreve o e-mail e então eles batem. Envie-me os hacks e ele vai ser enviado. Na verdade, acho que isto está muito bonito. Estou super feliz com isso agora. Quero mostrar-te uma coisa que possas acrescentar. Além disso, se você quiser agora eu estou realmente feliz com isso. Do jeito que parece, acho que é bom tê-los em uma fila como esta. Mas o que você poderia fazer é antes de tudo, você poderia colocar esses e-mails que ele vem para a direita aqui. Você também pode ir em frente e fazer o fundo para essas entradas branco. Ok, então eu vou seguir em frente e te mostrar como fazer isso. E para fazer isso, precisamos ir ao poeta masculino aqui. Ok? Nós vamos para baixo para palavras este estilo e há um grande monte de código aqui. Não se preocupe com isso. Vou guiar-te através disto. Na verdade, é super fácil. E aqui e isso vai estar no recurso é que eu tenho um pedaço de código que vamos usar. Então, como você pode ver uma parte disso, eu sublinhei, e este código subjacente, que é o código que eu quero que você copie. Está bem. Então eu vou continuar e copiar toda essa parte o resto desta parte que é só para mostrar que isso já existe. Isso já existe, e isso já existe. Agora, o que eu quero que você faça é adicionar a parte subjacente dentro disso já. Ok, então nós vamos em frente e procurar por poeta homem. Parágrafo sublinhado. E, em seguida, onde diz linha traço altura 20 PX. Nós vamos estar colando esse pedaço de código lá embaixo, então vamos em frente e fazer isso agora. Vamos seguir em frente e servir do poeta masculino parágrafo subjacente. Aqui está. Nos vertes para cima, você pode ver que diz linha traço alta 20 PX. Ok, então o que eu vou fazer é clicar aqui até o fim. Vou apertar Enter. Então nós temos uma nova linha aqui e eu vou colar este código em direto. Também vai apenas clicar lá e certificar-se de que estes estão em linha. Lá vamos nós. Então, o que adicionamos agora é um pedaço de código. Mudamos a cor de fundo e também a tela, certo? Então, se eu seguir em frente e clicar em salvar aqui agora e então voltamos para o nosso site e atualizamos e rolando para baixo, podemos ver isso agora. Em primeiro lugar, as caixas de entrada mudaram de posição. Então temos o primeiro nome aqui temos o e-mail à direita. Temos as bundas e por baixo, e elas também ficaram brancas, certo? Então, se isso não alimentar com o seu fundo, tendo o transparente como eles são, você pode adicionar neste pedaço de código. Adicione também neste pedaço de código para movê-los assim. E há coisas adicionais que você pode fazer Codificação é realmente surpreendentemente simples. Então, por exemplo, vemos a área de texto do poeta masculino aqui diz, com 200 pixels. Se eu iria em frente e remover aqueles e escrever 250 hit salvar e, em seguida, voltar e eu atualizar esta página, vamos ver que eles estão agora mais tempo. Então, há muitas coisas que você pode fazer mesmo sem entender o código, certo? Mas o principal é apenas ir em frente e usar este código, lidar com esta peça e colocá-lo sob parágrafo traço e, em seguida, abaixo linha traço alta 20 pixels, assim como eu fiz. E você vai ficar lindo. Boa exibição, certo? As pessoas podem se inscrever, e então vai ser fora do curso depois de você ir ao poeta masculino, configurar a sequência e garantir que seja o que for que você está oferecendo, eles vão ficar bem, então eu sou super Feliz com isso. Acho que parece muito, muito bom. E como podemos ver agora, as seções de ar realmente derretendo. Bem, temos esta espada fora de contraste acontecendo. Então aqui temos um tema vermelho. Temos este branco agradável indo direto para o ponto indo para baixo, temos o contraste fora do fundo branco, um texto mais escuro. E então vem essa bela parte. Estou gostando dos caras do design. Na próxima palestra, vou te mostrar outro e-mail, muitas vezes o sinal de que é muito popular hoje. Na próxima palestra, vou te mostrar outro e-mail, Ok, então, para fazer isso, eu realmente vou querer salvar isso para baixo, mas eu vou removê-lo para fins de demonstração. Então o que vou fazer é certo. Clique aqui e, em seguida, vá em frente e clique em Salvar como modelo. E então eu vou escrever e-mail em seção completa para que eu saiba o que é. E então eu vou bater em salvar. Então agora está salvo aqui. Eu posso clicar neste aqui para baixo, e sem ter um ataque cardíaco, eu posso realmente ir em frente e clicar neste de distância. Agora quero que você saiba de algumas coisas antes de seguirmos em frente. E o primeiro 1 é que se você decidir adicionar qualquer texto aqui, que podemos fazer indo para campos e usando um takes acostumados exatamente como fizemos quando tivemos o rótulo G d. P R, certo, não é obrigatório agora porque temos os cookies na política de privacidade. Mas se você está indo para ir em frente e adicionando em seu próprio texto aqui, ele vai ficar completamente branco e bagunçar com o design por causa do código. Nós adicionamos, Se você quiser adicionar em um g d. P r tex, Eu recomendo fortemente que você vá em frente e você usar um elemento editor de texto. Coloque-o em baixo e escreva assim em vez disso. Isso não vai falhar com ele. Agora, Elementary realmente tem um widget de formulário super fácil de usar, mas isso é para a versão pro. Mas como você deve ter notado superforte elementar, pode valer a pena investir nele se você não está tão interessado nele. Mas, por enquanto, vamos usar isso porque é mais do que suficiente. Vamos seguir em frente e fazer a próxima versão. Pessoal, vou clicar neste de distância. Eles iriam vê-lo na próxima palestra. 18. Opção de abertura 2: Então, nesta palestra, vou mostrar-lhe outra versão que você pode fazer para o seu e-mail. Muitas vezes projetar. Agora, novamente, há incontáveis fora da ciência lá fora, mas o projeto anterior era um projeto de seção mais completo. Esta vai ser uma secção mais pequena. Projetado vai ser mais direto ao ponto. E esse tipo de abertura tem se tornado muito popular ultimamente. Este tipo de abertura da ciência que é. Então deixe-me mostrar-lhe exatamente como eles estão olhando como eu faço. E então você pode decidir se você deseja usar a versão um ou a versão dois para a sua própria página inicial . Certo? Então nós vamos começar aqui, e eu vou começar por puxar para baixo um rumo aqui. Lá vamos nós. E então eu vou escrever, pegar o sabonete. 10 hacks de marketing digital assim. Eu vou ir em frente e centralizá-lo, e então eu vou passar para o estilo porque eu quero isso em letras maiúsculas. Mas também Biggers, vou transformar uma em maiúsculas como essa e depois vamos aumentar o tamanho. Não vou ser tímido com isso. Eles fazem algo assim. Certo, então temos essa parte. Estou muito feliz com isso. E agora vamos em frente e colocar o e-mail. O Upton. Certo. Então vamos rolar para baixo até encontrarmos o Wordpress. Vou abrir esta, e aqui temos correio Poeta 34. Posso pegá-la? E eu vou colocá-lo aqui embaixo, abaixo do cabeçalho. Está bem. E depois vou mudar para a que usamos na palestra anterior. Então nós temos esse tipo de versão mais longa fora dele, como aquela parecendo realmente agradável. Agora, a coisa é, não há muitas opções acontecendo aqui com o widget poeta masculino agora. Se você estivesse usando a versão pro de L um mentor, você poderia estar usando apenas a forma elementar. Você poderia estar adicionando isso manualmente. Podias estar a adicionar os rabos manualmente. Seria muito mais rápido e simples, e você apenas ligá-lo a academia masculina. Mas como não estamos usando a versão pro, vamos resolver isso. Então, se dermos uma olhada em como isso parece agora, eu vou pré-visualizar as mudanças e eu vou rolar para baixo. Podemos ver que está tudo à esquerda aqui. Agora, se eu quiser esse centro mais, há algumas maneiras de fazer isso. - Não. Uma das maneiras seria, por exemplo, que eu poderia ir para avançado para esta coluna e eu poderia mudar a margem, certo? Então essa seria a margem da esquerda. Vou no link. E eu poderia escrever, por exemplo, 50 ou apartamento mais como 200 lá atrás. E então eu poderia visualizar as mudanças e rolar para baixo, e seria muito mais central. Então isso está realmente bonito, certo? Essa é uma das maneiras de fazer isso. Agora, o problema com isso vai ser quando olharmos para o Motor Responsivo, vamos para a versão tablet. Podemos ver que temos este espaço muito estranho aqui, certo? Se você for para a versão móvel, bem, ele é apenas um caos, para ser honesto. Mas também podemos ir em frente e começar a adaptá-lo e personalizá-lo para dispositivos móveis e tablets. Especificamente, vamos ter que fazer isso de qualquer maneira. Mas vou oferecer-lhe uma maneira adicional e muito eficaz de centrar o seu conteúdo. Então veja isso. Tudo o que eu vou fazer é manter um direito de desktop aqui, e eu estou realmente indo para ir em frente e remover esta seção. Vou apenas clicar com o botão direito e descer para apagar. Certo? Então eu vou para a seção interna, certo? E eu vou puxar isso bem abaixo do cabeçalho. Então o que a seção interna faz é que ele permite que você adicione mais colunas, certo? E permite que você adicione mais colunas dentro desta seção aqui. Caso contrário, você teria que fazer uma nova seção. Mas queremos manter tudo em uma seção para que possamos fazer uma boa imagem de fundo para essa seção inteira. Faz com que tenhamos duas colunas agora. Eu vou clicar com o botão direito, e eu vou clicar em Adicionar Nova Coluna e adivinhar o que vamos colocar no meio aqui . Você adivinhou que vamos colocar o oped, informa que eu vou para Elements. Desça para baixo, poeta macho. 34 E eu vou apenas ir em frente e adicionar aquele no meio. Bem ali. Lá vamos nós. Então está assim agora e nós vamos para o nosso próprio país para que possamos ver como ele realmente se parece. Lá vamos nós. Agora, lembre-se, nós temos a versão longa e queremos manter a versão longa. Então isso só significa que isso está muito apertado agora. É tão personalizável e tão fácil no elementar porque você pode ir para a parede bem aqui e então você pode simplesmente movê-lo para a esquerda como este Muito, muito fácil de projetar assim. E eu vou em um membro, ponto final, dizer que talvez queira ir com 15%. Vamos fazer assim. 15%. E eu vou bater 15% aqui também. Vamos lá, lá vamos nós. Lá vamos nós. 15. 15. E agora eu vou ir em frente e visualizar as mudanças, ver como ele fica e rolar para baixo. E está completamente centrado. Eu amo isso agora. Eu não amo isso, então vamos removê-lo, mas eu amo o quão centrado é. Então nós vamos voltar e eu vou remover isso assim eles iriam. E agora, se você seguir em frente e olhar para o responsável e olhar para a versão tablet, por exemplo, podemos ver que isso está perfeitamente no centro. Está parecendo muito bom. E se olharmos para o celular, bem, pode ser um pouco de trabalho a ser feito aqui Ainda, mas ainda parece muito, muito bom. Estou apreciando esse design, então estou feliz com isso. Isto parece muito bom. Agora, o que vamos fazer é ir em frente e adicionar um fundo aqui. Já fizemos isso antes. Isto não é nada novo. Então nós vamos para a seção de edição aqui, e então nós vamos para estilo, e nós vamos para o tipo de fundo, clique em Clássico, e aqui nós vamos adicionar uma imagem. Então, para fazer isso, precisamos encontrar uma imagem, certo? Então os picaretas obedecem ao nosso velho amigo. Vamos encontrar alguma coisa aqui. E porque esta seção é mais direta ao ponto, eu vou com uma imagem mais abstrata, certo, porque é apenas uma linha. Você não quer imaginar que importa tanto, necessariamente. Pelo menos não com este design. Então eu vou ir em frente e escrever digital aqui, e então eu vou definir a orientação para horizontal, e então eu vou começar a rolar aqui para baixo e ver o que podemos encontrar. E, você sabe, a coisa que aparece para mim imediatamente é na verdade este aqui, porque este é apenas um projeto de lei absurdo tão abstrato, e isso vai funcionar perfeitamente como pano de fundo. Então eu vou seguir em frente e clicar neste, e eu vou fazer o download. É muito pequeno, também. Isso é legal. Então vamos fazer o download e tentar este, voltar para L.A mentor, clicar na imagem mais sua. E então eu vou fazer upload de arquivos e depois selecionar arquivos. E aí está ele. Vou clicar em escolher e inserir mídia e aqui vamos nós. Ok, então não é tão excitante agora. E a primeira coisa que vamos fazer como sempre fazemos é escolher a opção de capa, e quero dizer, é muito apertado, e isso faz sentido que seja porque nós realmente não mudamos o estofamento ainda. Então vamos em frente para avançado, e então vamos para o preenchimento bem aqui, e vamos ajustá-lo para 50 parecendo muito melhor. Vamos até com 17 desta vez. Lá vamos nós. E então vamos em frente e visualizar as mudanças. Basta ver como ele se parece agora rolando para baixo. Ok, isso está realmente parecendo muito, muito legal. Agora, há algumas coisas que eu realmente quero fazer. Quero tornar o fundo um pouco mais escuro. Acho que a cor deve ser muito agressiva. Quero mudar a cor do cabeçalho. Na verdade, os brancos que eu vejo olham para o cabelo bonito, e nós vamos assumir a partir daí. Vou começar com isso. Então eu vou para a edição da seção novamente, e então eu vou para o estilo, e então eu vou para a sobreposição de fundo, ok? E então eu vou clicar no clássico e agora cor. E eu vou usar preto assim porque eles queriam dar cores mais escuras. Eu só vou continuar e torná-lo mais escuro assim. Há algo assim. Velho é um pouco escuro, não é? Algo assim. Oh, isso é muito bom. Estou gostando disso. Ok, então é muito, muito mais escuro. E agora eu vou para o cabeçalho clicando nele. Clique na cor do texto aqui, e vamos torná-lo branco. OK, realmente apreciando este design, e então nós vamos pré-visualizar as mudanças. Então, a partir disso, Ok, eu gosto disso. Agora há um pouco muito ar e muito espaço é que eu vou mudar a posição fora da imagem de fundo aqui, então vamos em frente e fazer isso imediatamente. Então eu vou editar a seção mais uma vez, e eu vou colocar para fora, e eu vou para estilo aqui e, em seguida, a posição que eu vou tentar centro. Geralmente vai muito bem com o centro um, e eu vou comer mudanças de pré-visualização. Oh, eu estou realmente amando isso. Então isso é exatamente o que eu estou falando com esse tipo de fundo abstrato que realmente não significa nada, não chamou a atenção. Mas dá uma sensação agradável porque esta é a parte importante, certo? Obtenha os 10 melhores hacks de marketing digital. E-mail do primeiro nome, mande-me os hacks. Ele direto ao ponto mostra o que você quer e tem um design bonito. E este design também anda de mãos dadas com o que estamos oferecendo aqui, que é hacks, certo? Então eu estou realmente apreciando isso. O tipo de contraste em vermelho branco e ter o branco limpo completo acontecendo com o texto preto e, em seguida, sobre este. Muito, muito legal. Eu amo este design, mas eu realmente acho que uma seção completa vai caber muito melhor fora para este aqui. Então o que eu vou fazer, porque eu realmente amo este aqui. Ele disse: “ Vou em frente e clique com o botão direito aqui.” Vou clicar em Salvar como modelos e vou escrever e-mail, optar em seções menores como essa, e vou clicar em Salvar. Lá vamos nós. Por isso, está salvo. Eu posso baixar este aqui, e eu posso remover este agora mesmo sem ter um ataque cardíaco. Está bem. E agora eu vou ir em frente e clicar em modelos Addie. Eu vou para o meu modelo, e eu vou adicionar na seção completa de abertura de e-mail clicando em inserções. Sim, quando eu importar tudo e depois recuperamos este. Eu realmente aprecio este design. E, às vezes, enquanto importamos os modelos, recuperamos a barra lateral. Eu não sei por que isso é, mas tudo o que precisamos fazer é descer para definir as coisas aqui e depois ir para o layout da página e ir com o elemental cheio com. Se você estava usando a tela fora do curso, você vai com a tela, mas estamos usando o completo com. Então nós vamos apenas selecionar esse e tudo muda de volta exatamente assim. Então, vamos bater a pré-visualização e certificar-se de que tudo está bonito e bonito rolando para baixo. E lá estamos nós. Estou amando isso. Então o que vamos fazer é realmente usar a segunda versão do e-mail fora da coisa que acabamos de criar para outra página, provavelmente a estrela rasgada Patron. Vou querer colocar em outro e-mail muitas vezes. Então estou muito, muito feliz com esses caras. Ótimo trabalho. Se você tem seguido junto e, em seguida, decidir que tipo de decisão você vai querer para o seu site e você pode, claro, ter ambos porque você vai querer ter este e-mail muitas vezes mais de uma vez. Mas na maioria das vezes, você não quer ter o mesmo design repetido várias vezes. Então, se você tiver alguma dúvida, estará no Q e A. Vejo você na próxima palestra 19. Seção de exibição, parte 1: Tudo bem, então nesta palestra, vamos em frente e criar nossa seção de vitrine. E o que uma seção de vitrine é basicamente vai ser uma seção onde você mostra algumas ofertas que você tem em seu site. Agora, para nós, isso vai ser um par fora dos nossos cursos mais vendidos agora. Para você, isso pode ser uma oferta certa que você tem com o seu serviço. Podem ser certos produtos, etc., etc. Agora vamos aprofundar mais sobre como vender produtos na seção Wu mais calma, onde vamos aprender como transformar seu site em um site de comércio e. Mas, por enquanto, vamos criar nossa seção de vitrine, e eu vou mostrar a vocês como vou criar essa. Então a idéia é que a primeira coisa que eu quero fazer é criar um título. Então eu vou arrastar e soltar esse aqui, e então eu vou escrever no título cursos mais vendidos como esse. Vou centrá-lo e depois vou passar para o estilo e vou aumentar o tamanho. Vamos com Sim, vamos dizer que vamos com 50. Acho que isso parece bom. E então eu vou fazer isso em letras maiúsculas. Isso já parece muito melhor. Ok, então este é o básico parece muito bom. Agora o que eu quero fazer é mostrar três dos nossos cursos mais vendidos lá dentro. Então o que vou precisar são de três colunas, certo? Mas eu também vou querer ter um bom fundo ou uma única cor. Vamos ver como continuamos com o projeto aqui o que eu vou escolher. Mas isso significa que eu vou ter que usar um desses cruzamentos em vez clicar aqui. Porque se eu clicar aqui, eu vou ter uma nova seção, e então vai ser mais difícil usar o mesmo plano de fundo ou o mesmo chamador. Lembre-se, nós já passamos por isso mais cedo, então eu vou ir em frente e arrastar na seção interna e colocá-lo abaixo cursos mais vendidos assim. Então agora chegamos às colunas e eu quero 1/3. Então, tudo o que vou fazer é certo. Clique em e, em seguida, adicione nova coluna. E lá vamos nós. Ok, então para isso, o elemento que eu vou estar usando é na verdade um novo e é chamado na caixa de imagem . Ok. E a razão para isso é simples. Você vai ver exatamente por que eu vou usá-lo agora. Se eu arrastá-lo e soltá-lo aqui, você vai ver que este tem o design perfeito para estar mostrando um serviço de oferta de produto , o que quer que seja porque você pode adicionar em uma imagem fora dele aqui, escrever um cabeçalho e, em seguida, uma descrição que eu amo este conjunto de. Eu acho que é absolutamente incrível. Então vou começar a editar isso, mas antes de fazer isso, vou me arrastar para mais. Então vamos fazer mais um aqui e então vamos em frente e fazer mais um aqui. Lá vamos nós. Vamos começar a desenhar. Então, o 1º 1 aqui, vamos em frente e adicionar a nossa imagem, certo? Então eu vou clicar aqui, e eu tomei a liberdade fora, adicionando a minha imagem curso aqui de antemão já. Eu tive que procurar para encontrar esse, mas o 1º 1 vai ser o nosso curso de marketing digital. Então, vou inserir esse aqui. Lá vamos nós. E depois vou escrever marketing digital completo, está bem? E então eu vou adicionar uma mensagem de texto aqui, uma descrição. Eu vou escrever algo como, você está olhando para x expandir seu negócio com arte? Curso completo de marketing digital. Você tem mais de 40 horas de ensino de qualidade algo assim. Agora, isso é apenas algo que estou escrevendo sobre importações. Você vai querer tomar um pouco mais de tempo tornando um pouco mais eficaz em se relacionar com seu cliente e realmente transmitir a mensagem. Mas para esta demonstração, vamos ficar com isso. Na verdade, estou muito feliz com isso. E a próxima coisa que podemos fazer é ir em frente e ligá-lo aqui para o que quer que estamos oferecendo agora, seria algum produto certo aqui? Por exemplo, o que eu poderia fazer é ir em frente e passar para os cursos aqui. Eu poderia clicar com o botão direito do mouse em copiar este link, e então eu poderia apenas adicioná-lo aqui, certo? Patize esse link lá dentro. Então, quando eles clicarem aqui, eles serão levados para a seção de cursos. Ou podemos ir em frente para o nosso próprio caso, por exemplo, e ligá-lo diretamente para o nosso curso que você conhece . Certo? Então vamos seguir as pessoas também. Você é para mim Curso onde nós realmente estamos vendendo. Então vai ser onde colocamos o link, e então temos a posição da imagem. Podemos mudar isso quando uma exibição diferente. Mas eu realmente gosto do topo, da posição do meio, assim. Ok, então vamos passar para o estilo agora, algo que eu sou realmente um fã fora está realmente aumentando o tamanho assim. Então eu queria realmente estar saindo assim. Acho que está muito bonito. E não vou brincar com o espaçamento. Tipo, eu acho que parece bom em 15 por padrão. Nós também temos nossa animação pairar. Poderíamos usar crescer para isso, mas eu não vou usar isso porque eu tenho um design diferente agora, pelo menos em mente, e vamos ver como isso acaba. Ok? E então nós também poderíamos adicionar os efeitos do pairamento. Agora, antes de fazermos isso, eu realmente quero estender e colocar tudo isso para que eu possa ter um vislumbre de como isso vai parecer. Então eu vou em frente e clique aqui. Vou escolher a minha imagem. E aqui vou colocar o logotipo da Shopify. Lá vamos nós. E aqui, vou fazer a mesma coisa. Mas eu vou colocar o logotipo da Amazon. As cidades são todos cursos diferentes como este. Agora, isso é algo muito, muito legal, pessoal. E tenha isso em mente quando estiver projetando, porque vai economizar muito tempo. Então eu já fiz alguns projetos lá. Por exemplo, eu aumentei com fora da imagem. Agora, se eu quiser copiar todos estes estilos aqui para estes tudo o que eu preciso fazer é certo. Clique aqui e clique em Coping. E então eu entro aqui e clique com o botão direito do mouse e clique no estilo do ritmo aqui e você vê que eles vão se adaptar a esse estilo de enfrentamento imediatamente. É um pouso de tempo. Adoro essa função. Ok? E então íamos em frente e editávamos esses também. Shopify, drop ship sendo isso, escreva assim aqui. Vamos escrever a Amazon para B A. Lá vamos nós. Agora, é claro, vamos querer uma descrição também. Mas vou guardar isso por enquanto, é poupar um pouco de tempo. Então vamos ver o que temos agora. Vou antever as mudanças. Ok, então é assim que está parecendo agora. Ninguém realmente importante quando se trata desta assinatura e quando você está fazendo colunas como esta é certificar-se de que você tem a mesma quantidade fora do texto em suas linhas. Então, se você tem sua cabeça ou você queria estar em uma única linha, semelhante e semelhante e abaixo nós temos a descrição em três linhas. 123 E queremos mantê-lo assim porque se tivermos quatro filas enquanto os outros tiverem três, toda essa linha será deslocada, então isso vai ser um pouco menor ou maior do que o resto, e é só vai estragar todo o projeto. Então essa é uma dica forte para manter estes em linha quando você está projetando colunas e linhas como esta. Ok, então estou muito feliz com isso agora. Quero ir em frente e criar um pouco mais de espaço. Agora, você se lembra que falamos sobre isso mais cedo. Por exemplo, temos algum espaço entre esta e esta seção. Nós temos algum espaço entre essas seções, e eu quero fazer a mesma coisa aqui também. Então eu vou entrar aqui e editar esta seção. Vou para avançado. Então eu vou em frente e ir para a margem, e eu vou colocar isso, digamos, em 70 e ver como isso acaba. Então temos um pouco mais de espaço aqui. Também temos um pouco mais de espaço lá embaixo. Ok, eu acho que está muito bonito agora. Há muito espaço acontecendo no meio daqui. Lá vamos nós. Agora, eu também quero algum espaço entre essas colunas, que são os cursos e o cabeçalho em si. Então o que eu vou fazer é ir em frente e clicar aqui para editar esse certo chamá-lo de uma coluna, e eu vou para avançado aqui em cima, e então eu vou sentar partindo para digamos 50 certo? E eu vou fazer o mesmo por esta coluna. Vou clicar aqui em cima, ir para avançado. Defina o preenchimento para 50 semelhante aqui, clique em seu avançado e defina o preenchimento para 50. Então agora podemos ver que há um pouco mais de espaço lá em geral, alguns enchendo-o entre o cabeçalho. E também há algum preenchimento entre os cursos em si. Então vamos verificá-los, e então rolamos para baixo e isso já está começando a parecer muito, muito melhor. Estou apreciando este olhar limpo e agradável agora também podemos ver que há mais Rose acontecendo aqui que vai estragar o design um pouco. Vou querer adicionar mais mensagens de texto aqui. Vou fazer isso por enquanto, mesmo que seja uma demonstração. Então eu vou clicar aqui, e eu vou para o conteúdo e eu vou escrever Leve seu negócio para o próximo nível, e então vamos em frente e visualizar as mudanças e ver como ele vai rolar para baixo. E lá vamos nós. Então há 444. Lá vamos nós. Já parece muito melhor. Ok, então a próxima coisa que eu quero fazer aqui é realmente adicionar botões aqui. Ok, Então, se eu teria dito um link, por exemplo, o link que eu cozinhei mais cedo assim, podemos ver que a imagem fica clicável e o cabeçalho, mas o texto não fica clicável. E a boa notícia é que há muito espaço para clicar aqui, especialmente porque aumentamos a imagem. Mas também queremos ser super claros aqui, e é por isso que queremos colocar botões lá embaixo, certo? Então vamos em frente e fazer isso. E há realmente uma coisa muito legal que você pode fazer quando chegamos tão longe no curso, certo? E isso é que podemos rolar todo o caminho para cima e usar este bom botão que já gastamos tempo para terminar o sinal que podemos lidar com isso, e então podemos rolar para baixo. Podemos clicar aqui, e podemos realmente ir em frente e colá-lo. E isso é incrível. Agora perceba que vai ter todas as configurações fora do botão que usamos antes. Isso significa que vai dizer, aprender mais vai ter este link, etc, etc. Mas nós vamos apenas ir em frente e remover esse link. Vamos seguir em frente e definir este link aqui também, certo? E então nós vamos para as opções de link e vamos clicar em abrir na nova janela, porque quando você clica aqui, você não quer que as pessoas realmente saiam desta página, certo? Você quer que eles fiquem aqui enquanto vão para os seus cursos? Então você pode ter coisas boas mawr enquanto eles estão rolando para baixo. Vamos abrir isto numa janela nova, está bem? E nós vamos ter o mesmo para este, para que quando eles clicarem aqui, você vá para as opções. Isto vai ser aberto em New Window perguntou. Bem, então vamos em frente e configurar esses também com o “sem seguir” vai para opções de link. Eles podem abrir em uma nova janela lá, clique em abrir em Nova Janela. E lá vamos nós. Agora você deve notar que há um monte de coisas apenas aparecendo enquanto eu vou com o design. E é assim que a assinatura se parece. Você obtém as idéias, você cobre essas coisas, você obtém novas idéias, você as adiciona, você experimenta coisas. Isso é muito intuitivo, esta ciência. Eu não sei como isso vai acabar, mas eu tenho um bom pressentimento porque eu tenho um esboço básico com isso acontecendo, eu tenho um cabeçalho. Eu quero ter essas três colunas com os cursos e depois eu quero os fundos. Ok, então lá vai. Não, eu também quero enviar para isso para que pareça muito, muito melhor. E então eu estou muito feliz com isso. O que vou fazer é cobrir isto e vou pô-lo aqui também. Vou dar um passo nesse, e vou colar esse na aparência muito, muito legal. Até agora, estou realmente feliz com isso. Agora eu quero fazer mais uma coisa, e isso é realmente adicionar um não outro bumts e abaixo aqui. E isto vai ser uma vista. Todos os cursos no fundo. Então eu quero que eles tenham a capacidade de ver que estes são os nossos cursos mais vendidos que estamos oferecendo. Você pode aprender mais sobre eles e, em seguida, também ver tudo, é claro, ele aqui para ver mais cursos que temos mais de 20 agora perceber que isso não precisa ser aprendido mais. Isso pode ser, por exemplo, entrar em contato comigo. Isto pode ser agora. Isto pode ser qualquer coisa. Não importa como você escolher mostrá-lo. Agora, para mim, vou aprender mais, porque vamos mandar isto mais tarde para ti. Para mim, certo? Então eu vou em frente e pegar o link em você para mim e suco conectá-los aqui. E assim eles podem ir para a página de destino de você para mim e aprender mais lá. Agora, se você tem tudo do seu lado, você pode ter um agora, eles podem comprar o produto, ou você pode enviá-los para outra página. Então aqui temos isso, mas, hum, eu vou ir em frente e centrá-lo assim, e eu vou ir em frente e torná-lo grande. Eu queria ser maior que os outros, ok? E eu também quero que o texto seja ver todos os cursos que eles iriam, e eu vou para o estilo, e então eu vou para a tipografia porque eu queria ser um caso superior. Simplesmente assim. Parece muito bom. Eu queria ter os efeitos de pairar. Eu vou em frente e cobre este aqui, e eu vou colar o estilo. Ok, então agora ele realmente tem o mesmo tamanho bem, mas nós podemos ir em frente e voltar ao estilo, ir para a tipografia e apenas aumentar o estilo assim. Também fizemos um pouco mais, porque pegamos todo o estilo do anterior . Mas, na verdade, gostei muito desse olhar. Então vamos manter esse olhar. Agora, uma coisa que eu quero fazer é tornar isso um pouco mais redondo. Ok? Então eu vou com a fronteira e realmente configurar essas fronteiras para, digamos, 20 e as fronteiras. digamos, Como você pode ver, isso vai tornar as bordas mais arredondadas. Eu vou com 30. Lá vamos nós. Vamos dar uma olhada no nosso design atual. Você provavelmente está notando. Perguntado atrás que você está reconhecendo mais e mais opções e contanto que você conheça as opções e funções básicas , as opções deste sinal são infinitas. É muito bom. Então vamos rolar para baixo e verificar. Estou gostando muito disso agora. Eu gostaria de um pouco mais de espaço no meio daqui. Então vamos em frente e cuidar disso. Eu vou descer. Vou clicar no cuidado, avançar, e então vou colocar um pouco de estofamento aqui. Então vamos colocar como, é entre C ou algo assim. Talvez até terceiro. Você sabe, vivendo no limite. 30. Vamos tentar essa. Uma pré-visualização provável de comunicação novamente. Role para baixo. E sim, estou gostando muito, muito mais. Ok, pessoal. Então isso parece muito bom. Agora, há mais algumas coisas que eu gostaria de fazer aqui, certo? E a primeira coisa seria que eu gostaria que algo acontecesse quando eu mover meu mouse cá. Então, agora é bastante jogar é bastante chato. Há algumas ações no fundo. Podemos ver isso agora. Gostaria que acontecessem mais coisas. Então o que eu vou fazer é que eu vou para um mentor como este, e eu vou começar a adicionar a edição de fundos para essas colunas porque eu não quero o papa. Eu quero que todos esses dois tenham em ação quando você passar o mouse sobre. Então, o que? Eu vou ir em frente e fazer a seguir é certificar-se de que há alguma ação acontecendo quando eu mouse sobre isso fazer todo o site um pouco mais interessante e um pouco mais gratificante para passar o mouse sobre. Então o que eu vou fazer é realmente clicar na coluna aqui em cima. Então começamos a editar essa coluna, lembra? Temos 123 colunas diferentes acontecendo aqui. Vou para o avançado, e depois vou para o estilo, certo? E, em grande estilo, temos antecedentes. Vou passar a pairar e acabar com este pairar. Vamos ao clássico e depois a cor. Agora, aqui podemos brincar um pouco com a cor. Então, se eu apenas escolher estes grandes e eu verificar isso Bem, isso parece bastante terrível. Para ser honesto, não estou gostando disso. Eu não gosto disso. Então, se colocarmos o Green, o que está mais bonito? Poderíamos fazer isso. Está tudo bem, sabe, podemos fazer o grau de luz agora. Isto está realmente parecendo muito bom. Estou gostando dos efeitos disso. Então isso é muito bom. Agora, se eu ir em frente e eu escolher isso e apenas visualizar as mudanças para ver como ele parece. E então nós rolamos para baixo. Nós temos este efeito verde agradável quando estamos pairando sobre a mão que está realmente olhando muito bom. Estou gostando disso. Então o que eu vou fazer é realmente ir em frente e manter esta cor verde agradável acontecendo porque ele está olhando muito, muito agradável com esses efeitos. Agora podemos usar nosso vermelho clássico também. Eu não tenho a combinação de cores aqui, mas normalmente quando você tem tanto vermelho, você pode ver que ele vai estragar a grande cor fora da descrição. E também, não é muito convidativo quando você está oferecendo um produto e você está colocando este grande livrar por trás de seu agora, Red parece muito melhor para os botões como este geralmente. Então este verde claro que é muito mais convidativo. Então é exatamente isso que vamos fazer para realmente desfrutar deste design. Então tudo o que eu preciso fazer aqui é ir em frente e clicar na cópia e, em seguida, clique direito e colar estilo , clique direito e estilo colar. E olhe para isso agora, há alguns efeitos acontecendo. Vamos em frente e semanalmente vêm alterações de visualização rolar para baixo e podemos ver que há algumas coisas acontecendo aqui. Estou gostando muito disso. Muito, muito bom. Então, pessoal, isso é parte um Agora na próxima palestra, parte dois, vamos realmente mudar a cor, o fundo, o fundo, odiou três cores ou para um fundo. Vamos tentar algumas opções diferentes e ver onde aterrissamos. E então eu vou ir em frente e ter certeza de que os botões se encaixam com o tema de cores que escolhemos . E vamos completar isso e fazer com que toda a seção pareça muito, muito boa. Ok, pessoal, vejo vocês na próxima palestra para a segunda parte. 20. Seção de mostra 2: Tudo bem, pessoal. Bem-vinda de volta. Então vamos em frente e continuar com este projeto. É muito intuitivo. É muito empolgante. Vamos ver onde isso pousa. Ok, então o que eu quero fazer agora, é começar a brincar um pouco com o fundo bem aqui, certo? Então, a fim de fazer isso, nós vamos em frente e realmente escolher um fundo sobre escolhas um dia que vai ser branco, certo? Porque nós podemos ver agora que o branco realmente funciona muito, muito bem agora eu estou realmente apreciando este branco volta de, mas nós vamos ir em frente e usar algum tipo de imagem de fundo só para ver como ele funciona. Agora, lembre-se mais cedo, nós realmente definimos as margens com a edição aqui quando editamos a seção. Isso vai ser um problema se dissermos uma cor de fundo, uma certa cor ou uma imagem de fundo, certo? Porque só vai cobrir esta área de seção. Isto vai ser deixado branco. Isso não parece muito bom. Então vamos voltar aqui em preparação para usar uma imagem de fundo. Nós vamos clicar na seção de edição. Vamos remover a margem porque não podemos ter a margem e então vamos colocar um pouco de estofamento. E aqui temos duas opções. Ou podemos ir e colocar um estofamento como este, e isso vai tornar estes ainda mais longos e mais estreitos desta forma. Ou podemos ir em frente e não envergonhá-los e Onley colocar 70 no topo. Então nós temos esse espaço que originalmente tínhamos agora o quê? Vou seguir em frente e usar o link real para que todos fiquem envergonhados assim e teremos um grande efeito de preenchimento porque estamos dando tapinhas na seção, as colunas, etc. Então vamos em frente e ver como isso se parece, porque isso vai fazer estes mais longos quando estamos exibindo os próprios produtos, de modo rolando para baixo, podemos ver que eles parecem um pouco diferentes agora. E eu estou realmente apreciando este design. Parece muito mais sólido, muito mais estreito. Acho que parece muito bom. Vou ficar com isto. Estou gostando muito. Há mais espaço para o tamanho, mas isso só me dá um efeito mais longo e mais elegante. Então vamos em frente e encontrar uma imagem de fundo agora porque sabemos que o fundo vai ser bem grande, certo? E também sabemos que a cor branca é algo que se encaixa muito bem. Vamos em frente e usar algum tipo de imagem inspiradora que usaremos para a liberdade novamente porque acho que isso dá bons resultados. Mas também vamos mudar a orientação para horizontal. Vamos definir o tamanho para que seja pelo menos 1900 a 1000, certo? Para que seja grande, boa qualidade e tudo mais. E se for pequeno, isso geralmente vai ficar embaçado e não serve, e não parece bom. E esta é a próxima opção interessante. Podemos ir para a cor aqui e clicar no branco. Certo? Então, se fizermos isso ao clicar em quê? Só vamos conseguir esta bela imagem com um fundo branco. Então vamos pensar no nosso ponto focal agora. Então, com a nossa vez de assinar, temos essas três colunas acontecendo. Então nós olhamos para o nosso site, eles estão realmente cobrindo o meio fora da imagem bem ali, bem no centro. Eles estão muito no meio. E isso significa que não podemos ter coisas acontecendo no meio porque então tudo vai parecer caótico. Então o que precisamos fazer é procurar por algo que tenha uma imagem aberta e agradável. Então isso, por exemplo, não funcionaria. Este não funcionaria, e nem mesmo este funcionaria porque estariam cobrindo o pássaro. Vamos procurar algo que tenha mais espaço. Esta seria uma bela foto de você colocar as coisas para a direita. Você pode ver o potencial neste tipo de imagens. Agora, aqui está realmente algo em que estamos realmente conversando. Pessoal, olhem para esta bela foto. A coisa do Onley está acontecendo é isso. Acho que é uma criança balançando no balanço para a direita, e isso é lindo porque podemos colocar especialmente com todo o estofamento que fizemos, podemos colocar tudo tão centrado aqui se conseguirmos colocar nosso material aqui e isso é Não vou cobrir nada, por isso vou tentar este assunto. Provavelmente vai fazer download gratuito, lembra? Bem, sob um megabytes, isto confere , nós vamos baixá-lo, , nós vamos baixá-lo,e então nós vamos voltar e vamos editar a seção aqui. Isso não é otimizado. Não há margens no meio daqui, e vamos passar ao estilo. Vamos ao fundo, manter normal, manter normal, Quicken Classic, e depois clicar em Imagem. Agora vamos carregar esse arquivo de seleção de arquivo. E aqui está. Eu só vou clicar em escolher e, em seguida, clique em inserir mídia. Certo, então é isso que estamos recebendo agora, então não há que não pareça tão bom. Bem, parece decente, o bom, mas só temos essas nuvens no fundo. E não foi por isso que temos esta foto. Então o que eu vou fazer, é clicar no tamanho. Fazemos sempre isso e, em seguida, clique em Descobrir. Então isso está parecendo muito, muito, muito melhor. Estou agradecendo isso agora. Nós vamos em frente e clicar na pré-visualização para ter certeza de que nada realmente colapsa com o garoto para que as coisas não desmoronem um no outro, cobrir algum texto ou algo assim rolando para baixo. Podemos ver que isso está realmente parecendo perfeito. Uau, olha para isto. Os rapazes estão muito bonitos. Então eu estou realmente gostando desse design. Então, por enquanto, a coisa que eu realmente quero ir em frente e mudar é que há fundos vermelhos acontecendo aqui agora, e isso é muito bom, mas porque estamos usando o verde assim, eu gostaria de também colocar este verde na vista Todos os cursos, ok, porque isso vai dar um efeito diferente. Isso também vai fazer com que se destaque dos botões de pedido. Então vamos em frente e fazer isso. Vou clicar neste botão aqui. Eles iam e então eu vou passar para o estilo. Eu vou para a cor de fundo e eu vou definir a cor de fundo para este verde mais escuro aqui. Lá vamos nós. Vai ficar feliz com isso. E então eu vou clicar em Hover porque agora, quando eu passar o mouse sobre, ele ainda se transforma como ameaça. E isso não é muito legal. Então eu vou mudar o clique sobre isso e levado em prazer verde. Lá vamos nós. Então, agora, quando eu passar o mouse sobre ele aparece assim e ele também fica um pouco mais leve. Muito, muito bom. Então vamos em frente e visualizar as alterações rolando para baixo. Ok, isso está bonito, pessoal. , há Na verdade, hámais uma coisa que eu gostaria de fazer aqui, e que é fazer com que esses papa saiam um pouco mais. Gostei muito do olhar. Eu amo o fato de termos o garoto aqui embaixo e tudo está se alimentando tão bem, para ser honesto, mas eu ainda gostaria de mudar isso um pouco fazendo-os estourar. E a maneira que vamos fazer é realmente fazer o fundo dessas imagens branco. Então vamos voltar para a mesa de desenho. Clique aqui, e eu vou clicar na coluna. editor escreve aqui, e depois vou ao estilo, certo? Eu vou para o tipo de fundo, e eu vou selecionar o chamador e clicar em branco. Lá vamos nós. Então o que eu vou fazer é na verdade você fazer o mesmo por isso. Ligue para eles. Eu vou clicar em seu ir para o estilo de fundo cor disse que para branco. Da mesma forma, clique aqui neste. Lá vamos nós lá em cima. Clique neste. Ir para estilo definir o tipo de fundo de cor clássica e branco. Tudo bem, lá vamos nós. E então eu vou clicar, hum, pré-visualizar alterações, e vamos ver como isso acaba. Rolando para baixo. Ok, então o que eu estou amando é o branco Ok, o olhar branco, super duper NYSE. O que eu não estou amando agora é o fato de que eles estão todos juntos. Eu gostaria de um pouco de espaço entre estes, então nós vamos em frente e cuidar disso. Então, para fazer isso, eu vou ir em frente e clicar nesta coluna e editá-la. Vou para avançado, e podemos ver que já tem o estofamento. Certo? Mas se eu colocar alguma margem aqui como, digamos 25 nós podemos ver que ele começa a sair um pouco. Nós podemos até ir, você sabe, ir um pouco enquanto vamos colocar para 30. Lá vamos nós e podemos fazer o mesmo aqui também. Vamos a este. Vá para avançado. Vá para a margem. Ponha para 30. Vá para este. Mas você os chama de Margem Avançada 30. Agora fica ainda mais longo. E eu amo essa exibição longa e agradável. Então vamos verificar agora mesmo rolando para baixo e lá vamos nós. Pessoal, acho que isso parece super legal. Agora vemos o desespero insee também com a diferença no texto Ling Então você vai ter ser muito cauteloso em certificar-se de que o texto é perguntado por muito tempo. Agora, isso é um pouco estranho na arte, mas é Oh, tão importante. Agora temos um par de novos problemas, se você vai continuar aqui, o número um seria Temos que mudar este texto. Então essa é a primeira coisa que vamos fazer. Mas eu também olho, o garoto está coberto. Isso não é legal, mas vamos primeiro mudar esse texto de volta. Então eu vou clicar aqui. Isso vai e depois vai para o conteúdo. Vou tirar isto e ver se isto funciona. Role para baixo e lá vamos nós Agora eles são realmente praticamente, mas eles são completamente, até mesmo incrível. Agora há também um problema, claro, é claro, porque esses cabeçalhos são um pouco longos, mas agora eles são decentemente. Até nós podemos fazer isso melhor assim que eu começar a trabalhar e realmente colocar uma descrição adequada sobre isso também. Então, como você pode ver, o que temos aqui agora é que nós projetamos nossa página de vitrine onde temos nossos cursos mais vendidos e que para você pode ser qualquer coisa. Podem ser os seus serviços. Pode ser certos produtos podem ser certas ofertas. Seja lá o que tiver que queira mostrar. E estamos exibindo nossos cursos. Nós temos este efeito agradável pairando de verde. Quando eu passar o mouse sobre, nós temos este belo efeito papa que o fundo fora, todos eles. E também temos essa grande, bela vista, todos os cursos. Mas vou continuar aqui agora. A única coisa que me restaria para editar aqui agora seria editar a descrição desses para ir em frente e pegar os links e clicar neste e definir o link aqui com esses links. Defina esse link, então vá em frente para o botão Saiba mais e defina esse link também, certo? E então eu iria definir o link para ver todos os cursos para a seção do curso. Então pessoal É assim que você pode mostrar algo em seu site, especialmente usando várias colunas. Certo? Ótimo trabalho em chegar até aqui. Lembre-se, quando se trata deste sinal, é infinito. E uma última coisa para lembrar que quando você está criando espaço aqui em cima, você pode usar margens. Se você estiver usando um fundo branco e quiser mantê-lo branco do que tudo isso, bem. Mas você precisa usar o preenchimento quando estiver mantendo um plano de fundo como este ou se estiver mudando a cor do fundo. Caso contrário, você vai colocar este espaço no meio assim. E isso não parece legal também, lembre-se, lembre-se, essa margem é sobre Lee para criar espaço. E não é bom se voltares a correr para lá. Estou super feliz com isso, pessoal. Vejo-te na próxima palestra. 21. Menu pegajoso: Muito bem, pessoal, nesta palestra, vamos aprender a fazer o cardápio pegajoso. Em outras palavras, vamos fazer nosso menu ficar na tela mesmo que estamos rolando em nosso site. Então, se olharmos para o que parece agora, se eu rolar para baixo, o menu desaparece. Certo, porque o Lee está aqui em cima agora. E se eu rolar para baixo, como mágica agora, o que nós queremos fazer é que nós queremos fazer isso funcionar, certo? Então, quando estivermos rolando, ainda vai estar aqui em cima. Eles ainda terão acesso ao início aqui para o curso da seção. Tudo vai ajudar com a navegação. Parece muito profissional. Então o que nós vamos fazer é que nós vamos voltar, ir para o menu aqui, e então nós vamos sair para o painel de controle. Isso na verdade não é algo que vamos fazer um elementar, mas vai ser parte do sinal elementar d que nós criamos até agora. Então nós vamos em frente e ir direto para plugins aqui e clique em adicionar novo. Vamos usar um plugue para isso e é realmente uma luz com plugging perguntado. Bem, e então nós vamos procurar por um menu pegajoso como esse. E depois vais ter todos os vendidos aqui em baixo que dizem o meu menu pegajoso. Você pode procurar por isso imediatamente, também. É tudo uma palavra, meu cardápio pegajoso. Então, mesmo que não seja testado com esta versão, eu sei que ela funciona. É um plugue bastante simples em leve, mas faz o trabalho muito bem. Então eu amo este aqui. Eu vou ir em frente e clicar em Instalar agora e então eu vou clicar em Ativar. Tudo bem, então está instalado. Está pronto para ir, mas ainda vamos descer e entrar nas configurações aqui embaixo. Então, para alguns de vocês, isso vai começar a funcionar imediatamente. Mas para alguns de nós, vamos ter que fazer um pouco mais de edição antes de começarmos a funcionar. E isso é por causa dessa classe chamada de “stick it”. Agora temos um elemento de menu ou cabeçalho, geralmente chamado de barra de navegação Nab Bardem. Mas nem tudo tem a esses nomes. Se você estiver usando um tema como nós, por exemplo, ele tem um nome diferente. Isso não vai funcionar por padrão, mas se você estiver usando outro tema, ele pode ser. Então o que podemos fazer é ir em frente e entrar aqui e atualizar este site e ver se funciona. Eu vou ir em frente e rolar para baixo e não podemos ver nada acontecer. Então não está funcionando. Então o que precisamos fazer é mudar essa classe pegajosa, certo? Queremos o nome da identidade identidade fora desta seção. Assim que tirarmos o nome deste, vamos colocar o nome aqui, e então isso vai ficar na tela enquanto rolamos. Então, para conseguir isso, tudo o que precisamos fazer é certo. Clique aqui e clique em Inspecionar Elemento. Agora, se você não tem este elemento inspecionar e você está usando um Mac, tudo que você precisa fazer é subir aqui no safari e, em seguida, ir para as preferências e, em seguida, passar para avançado e cliquish diz mostrar, desenvolver menu na barra de menus, e eu acredito que para janelas é muito semelhante. Você só vai para suas preferências ou configurações, você vai para avançar que você deve ter um semelhante. Eu acho que você pode ser capaz de usar se 12 também. Mas caso contrário, ele deve estar na seção de opções como esta. E uma vez que você tenha tudo isso ativado, tudo que você precisa fazer é certo. Clique aqui e clique em inspecionar elementos. Então é aqui que o temos. Dave, sublinhado i d é igual ao cabeçalho do site Inner. Então este é realmente o nome que vamos ser inseridos lá. Então é local, traço, cabeçalho, traço interno. Nós vamos voltar, e então nós vamos fazer um site de marca hashtag, traço, cabeçalho, cabeçalho, traço interior. Eles iriam, e eu vou clicar em salvar alterações apenas para ver que isso está realmente funcionando. Caso contrário, isto vai ser uma péssima palestra, certo? E então eu vou voltar aqui e eu posso clicar este aqui para baixo. Eu vou atualizar os sites, e agora eu vou tentar rolar para baixo, e lá está ele. Então funciona. Funciona claramente, mas como podemos ver, há alguns problemas. Em primeiro lugar, parece horrível. E há razão para isso é a opacidade que podemos ver através dela. Nós não vamos querer isso com este design, é claro, você pode querer outro design, e também podemos ver que há uma cor diferente no logotipo. Então o que vamos fazer é voltar aqui, e depois vamos para o estilo, certo? E a primeira coisa que vamos fazer é mudar a opacidade aqui. 200. Isso significa que não vai haver “ver através”. E então nós vamos para selects color, e nós vamos apenas clicar em brancos. Vai ser completamente branco. Lá vamos nós. E então nós vamos rolar para baixo e clicar em salvar alterações e vamos voltar aqui e atualizar este site e ver o que acontece e rolar para baixo e podemos ver que parece muito, muito melhor, não é? Então eu estou realmente gostando desse design agora. Há realmente um problema com este, que é, como você pode ver, não há fronteira entre aqui, então isso é completamente branco, e nós também temos um fundo completamente branco sobre o que Quero dizer, uma fronteira entre o menu e o conteúdo aqui é que não há nenhuma linha indo aqui. Então, como um exemplo, Se formos para o chimpanzé correio, por exemplo, podemos ver que eles estão usando um menu. Aparece bem e isso é completamente branco e este fundo completamente branco. Mas há uma borda aqui que separa o menu do conteúdo do fundo. E eu realmente aprecio esta fronteira. Isso realmente mostra que aqui está o menu, e aqui está o que você está verificando e lendo. Então eu vou querer usar essa fronteira também. E agora, a fim de tornar minha vida e, claro, sua vida muito mais fácil, especialmente seus caras, eu realmente fui em frente e peguei um código para isso. E esse código, na minha opinião, parece um pouco mais legal do que esta fronteira porque esta é uma fronteira simples, e eu prefiro ter na verdade uma borda sombra. Então, parece que o menu está no topo do site. Vou mostrar-te o que quero dizer com isto. Então vamos voltar ao estilo e aqui temos alguns CSS, e não precisamos nos preocupar em nos codificar, mas podemos usar o código de outras pessoas que são muito melhores nisso, e eu não sou um programador e as chances são que você não pode ser. As outras pessoas estão, e podemos aprender com elas. Então este código aqui vai estar no recurso é que você pode ir em frente e pegar aquele. Tudo o que você precisa fazer é selecionar todos eles. Clique com o botão direito, clique na cópia. Então vamos voltar. Vamos entrar e eu vou bater em Enter. Então eu desço e vou apenas colar esta informação aqui, ok? Simplesmente assim. E então eu vou seguir em frente e clicar em salvar mudanças como essa. E como podemos ver agora, não há fronteira entre aqui entre o branco. Então, quando eu atualizar isso, deve haver uma bela sombra atrás de um olhar para aquilo. Isto está muito bonito. Agora. Eu realmente amo isso. Olha, honestamente parece que o menu está no topo do site. É um olhar incrível, na minha opinião. Então agora, quando eu tenho este branco contra branco, podemos ver que há uma separação clara, uma borda muito clara como esta, certo? Então, se há coisas adicionais que você quer editar aqui, há mais coisas que podemos fazer. Por exemplo, em vez de usar um efeito leve, podemos usar um efeito de desvanecimento. Agora, o efeito de slide funciona assim, que quando eu rolar para baixo daqui, você vê que ele desaparece. Mas então ele aparece de volta quando temos rolado para baixo o suficiente. Agora, se não quisermos usar o slide, podemos usar um fade como este. Eu posso ir em frente e salvar essas mudanças e eu posso mostrar a você como o destino parece e eu vou atualizar isso também. Então, agora, rolando para baixo, podemos ver que há um desvanecimento que acontece. Mas o destino, na verdade é tão rápido aqui. Então, não estamos tendo muito efeito. Não parece tão bom em tudo. Nós vamos ter que ir em frente e ir para o estilo e depois enfiar. Tempo de transição. Podemos ir em frente e mover isso até vamos colocá-lo em dois segundos e, em seguida, clique em salvar alterações. Volte, atualize este site. E agora, quando eu rolar para baixo, você pode ver que há um desvanecimento acontecendo. Mas você também pode notar algo mais escreve aqui este logotipo está realmente destacando. Certo? Então, agora, quando eu rolar até o branco, podemos ver que há uma bela fronteira aqui fora da sombra. Mas há algo aqui que não está certo, certo? A fronteira está sendo quebrada. E isso porque quando fizemos nosso logotipo, usamos um fundo completamente branco. E por causa disso, esse fundo branco está interferindo com a borda. Então o que vamos fazer é ir em frente e remover o branco na parte inferior do nosso logotipo aqui e garantir que esta borda parece bem. Agora, se você não tem um toque de c d como eu aparentemente tenho, você pode definir com isso. Mas na minha opinião, isso é o que separa você e dá-lhe um realmente profissional decidir quando tudo é apenas local e impecável. E aqui podemos ver uma pequena falha. E isso acrescenta caras. Então, o que? Eu vou em frente e fazer. Ele realmente mudou de volta para o slide, e eu vou voltar e mudar de volta para o tempo de transição fora 0.3. Agora, como você pode ver, há um monte de coisas que você pode mudar aqui e você pode apenas brincar com essas opções você mesmo, por exemplo. Você pode desativá-lo telas pequenas e telas grandes. Você também pode decidir quando deseja que ele fique visível. Por exemplo, você queria ficar invisível quando você rolar para baixo e Onley aparecer quando você rolar para cima. Há muitas opções diferentes aqui. Além disso, se você for para avançado, você pode decidir desabilitar isso em determinadas páginas. Mas mais uma vez, vamos revidar aqui e vamos garantir que esta fronteira quebrada seja reparada. Há uma fronteira completamente bonita aqui que parece impecável e 15 com o nosso design. Então o que vamos fazer é ir a um site chamado Luna Pic. Agora, Luna pic, É realmente ótimo porque eles permitem que você faça suas certas imagens transparentes. E este site vai estar no recurso também está. Então, o que? Eu vou em frente e fazer. É realmente carregar o logotipo que temos Lá estamos, e eu vou clicar em Escolher. E aqui está o nosso logotipo agora, honestamente, porque o link que o U. R L no recurso está já configurado para um fundo transparente. Tudo que você precisa fazer é carregar seu logotipo como eu fiz e clicar no fundo assim, e então tudo vai desaparecer. Agora você pode ver que há um pouco branco aqui, um pouco branco lá nas abelhas nestes, mas não importa. Honestamente, a parte Onley que nós realmente precisávamos remover e tornar transparente estava esta parte certa, porque nós vamos usar para projetar com o menu branco e oito logotipo branco, então é completamente descobrir que ainda há alguns brancos Deixou aqui dentro. Então o que nós vamos fazer é rolar para baixo e clicar em salvar aqui, e então nós vamos voltar aqui, e então nós vamos para a aparência que nós somos, e nós vamos riacho em personalizar assim. E para que você veja a diferença, eu vou ir em frente e rolar para baixo até o branco novamente. Aqui estamos nós. Nós podemos ver esta pequena quebra aqui, então tudo o que eu vou fazer é clicar aqui em cima sobre isso. Mas, hum, nós vamos chegar à parte do batedor de personalização, e eu vou clicar no logotipo de mudança. Eu vou fazer upload de arquivos, e eu vou selecionar esse arquivo. Eles eram é geralmente chamado imagem. Edite algo e, em seguida, clique em sapatos e selecione. E lá estamos nós. Esta é uma colheita perfeita, na minha opinião. E, em seguida, clique na imagem de corte. E já, agora podemos ver a diferença aqui, certo? Assim, podemos ver que não há nenhuma linha que está quebrando aqui. Temos uma fronteira de sombra perfeita acontecendo, e parece absolutamente impecável. Agora, se formos em frente e compararmos com isso que admitimos aqui, ainda há a quebra, certo? Não atualizamos este site. Ainda há a quebra em comparação com isso. Não há quebra. Então isso pode parecer um pequeno detalhe, mas honestamente faz isso, tanto isso, . Então eu vou em frente e clique. Venha publicado. , Pessoal, lembram-se quando fizemos o logótipo mais cedo? Você tem a opção de, por exemplo, se inscrever m bist off no Canadá. Se você se registrar lá, você pode baixar logotipos transparentes. E se você vai levar o seu site e o seu melhor para o próximo nível, isso pode valer a pena. Você também pode ir à fibra e pedir a alguém para projetar um logotipo muito bonito. E então você vai ter esse logotipo em um fundo transparente, assim você pode usá-lo em qualquer lugar. Mas se você estiver indo para ir com a mesma rota que temos, você precisa ter certeza de que o design aqui, por exemplo, se estávamos indo com preto ou roxo ou o que quer que fosse da mesma cor no logotipo que que estávamos usando no Canadá, tudo que você precisa fazer é realmente combinar os códigos hexadecimais como fizemos ao longo deste design . Então aqui estamos nós, pessoal, eu estou realmente, realmente apreciando esta página inicial agora. E ainda há 1.000.000 de coisas que você pode adicionar Shoot que você quer. Mas agora eu acredito que você entende como criar uma página inicial bonita, sabendo a próxima palestra que vamos passar e ter certeza de que nós completamos a missão fora para home page para que nós temos pregado a psicologia por trás disso e a razão para até mesmo tê-lo para ver na próxima palestra. Rapazes 22. Análise de design de casa: Muito bem, pessoal, fizemos um belo trabalho na página inicial até agora. Agora, você deve se lembrar da seção anterior que passamos pelo propósito, a psicologia e basicamente o raciocínio por trás da página inicial. Agora, nesta palestra, vamos em frente e nos certificar de que estamos andando na palestra, certo? Vamos nos certificar de que tudo se encaixa e que seguimos todos os passos. Então, se você se lembra, havia muitos pontos diferentes, certo? Se tivéssemos homens, você não está definindo seu propósito. Menos isso é mais entregar conteúdo e navegar para a página de conteúdo. Vamos passar por eles um por um e nos certificar de que os pegamos. O 1º 1 Queremos a página inicial no menu ou não? Agora, em nosso projeto, decidimos não optar por isso. Certo, porque já temos a página inicial no logotipo. Então nós não vamos definir nenhuma casa aqui, mesmo que possa haver algum visitante que realmente não sabe que você pode clicar sobre isso , mas ainda assim, a página inicial não é o principal patrono que as páginas mais importantes são na verdade o início aqui Página e a página do curso, certo? Porque para começar aqui, página é o que vai aquecê-los em direção a tudo o que vai certificar-se de que eles entendem o que somos todos sobre e basicamente mostrar-lhes que eles estão aqui com um problema e que nós somos a solução. Então podemos oferecer-lhes. O curso é que nós temos e ajudá-los. Eles têm seus problemas. Então, e é claro que conseguimos uma venda. É uma situação de vitória. Então, basicamente, para torná-lo uma linha do tempo aqui, primeiro temos a página inicial, que os envia para o início aqui que provavelmente vai enviá-los para os cursos. Certo. Então não haverá necessidade de colocar a página inicial no menu, pelo menos, não neste design. Então decidimos não usar um menu, uma marca enfraquecida que fora. Agora, o próximo ponto era definir seu propósito. Agora o nosso objetivo com a página inicial é apresentá-los ao nosso conceito, mostrar-lhes o que somos todos sobre, e, em seguida, oferecer um saber mais ou começar aqui botão. Eles são basicamente a mesma coisa para nós para que possamos fazê-los partir. Eu me pergunto como eles podem me ajudar com Ah, quente. Esta é a minha solução. Esse é o objetivo principal da nossa página inicial. E, claro, algumas pessoas ainda vão seguir em frente e rolar para baixo. Então a primeira coisa que adicionamos aqui é a prova social, e isso é enorme. Agora eles entendem que isso não é brincadeira, certo? Você pode até adicionar mais testemunhos, se quiser. Mas acho que isto é tão minucioso que estou mais do que feliz com este. E então nós passamos, estávamos realmente oferecendo algo a eles aqui, certo? Então, se houver rolagem para baixo, eles ainda não têm certeza se eles vão ficar. Se eles vão embora, então há algo realmente para eles aqui. Especialmente quando você vê que há um valor de US $99 e eles podem obtê-lo de graça e fora do curso chance de começar porque eles estão aqui. Eles estão interessados em marketing digital. Eles têm um problema com isso. E aqui você pode obter as últimas hacks para puxar o seu para a frente, levá-lo à frente da concorrência. É um design muito inteligente. E então, finalmente, quando eles são aquecidos o suficiente, nós temos nossos cursos mais vendidos bem aqui. Então, há um brincalhão maior. É um pensamento por trás de como estamos fazendo isso. Então, em outras palavras, definimos o propósito muito bem que queremos explicar o que estamos fazendo e depois enviá-los para o início para tornar o público ainda mais quente. Esse era o propósito. Aqui não era um restaurante. Talvez você quisesse exibir o menu e pedir algo. Se fosse um site de galeria, por exemplo, para uma sessão de fotos. Talvez você é um modelo e você quer mostrar do que o propósito seria mostrar instantaneamente mostrar o que você tem para oferecer. Esse não era o nosso propósito. Então nós podemos marcar este também, e então nós temos menos. É mais o que era para projetar que estávamos indo para, porque é muito popular e super afetado para remover toda a desordem. E na minha opinião, esta é a definição. Off menos é mais. Temos um belo fundo dando uma sensação de que temos um cabeçalho aqui que vai direto para o ponto de negócios facilitado. Deixe-nos mostrar como e então estamos nos conectando. Você está procurando construir ou expandir seu negócio, mas não sabe por onde começar. Vamos mostrar-lhe como literalmente. E depois aprendem mais. Então estamos dizendo a eles para odiarem. Você tem um problema com o negócio. Você quer começar seu negócio, nós facilitamos. Deixe-nos mostrar-lhe como facilitamos e podemos ajudá-lo. Super limpo rolagem aqui em baixo é uma prova social muito limpo. Aqui temos um e-mail. Muitas vezes temos todo esse espaço livre. Temos esta oferta aqui. Este é o primeiro nome Há um e-mail. Mande-me os hacks. Está tudo limpo também. E depois temos os nossos cursos. Só três. Confira um desses três. Você pode clicar, venha para saber mais ou ver. Todo o curso é incrível. Na minha opinião, este é um sinal muito limpo. E estou muito feliz com este. Então sim, menos é mais. E acho que neste caso fizemos menos e conseguimos mais com isso. Então vamos marcar este também. E, em seguida, temos que entregar conteúdo e, de fato, entregar conteúdo. Nós estamos certos. Então, a idéia para o aprender mais então realmente enviá-los através dela e entregar conteúdo para eles para torná-los em um público mais quente. Quando apresentei o que somos e como consolamos o problema deles e a única maneira realmente resolver o problema deles é entregando o conteúdo, entregando soluções ou sugestões para soluções que venderão os problemas que eles têm rolagem para baixo fora do curso. Também estamos oferecendo um curso totalmente gratuito com o escritório de e-mail. Estamos tirando o máximo proveito da página inicial e mais para baixo foram mesmo entregar esses cursos ou melhor, mostrando esses cursos que Ei, isso é realmente o que temos aqui. Agora, se você quiser realmente entrar no marketing digital, confira este Sul ou visualize a Shopify. Entrega de entrega, Amazon FB, etcetera, etc. Estamos entregando caras de conteúdo, então definitivamente verificar isso e, em seguida, finalmente, navegar para a página de conteúdo. E é disso que eu tenho falado o tempo todo, certo? Então nós temos o aprender mais aqui que vai navegar para o início aqui paciente. É aí que vamos ter um monte de conteúdo diferente e rolando todo o caminho para baixo todos esses ar indo para entregar a página de conteúdo agora, atualmente eu tenho essas configurações. Estes levam-nos directamente para mim, certo? Se eles clicarem aqui ou aqui, eles serão levados para você. Você é tímido? Page, onde temos nosso curso completo de marketing digital semelhante com a Shopify e, em seguida com a exibição, todos os cursos Isso vai continuar e ser vinculado aos nossos cursos. Página direita, para que eles possam ver todos os nossos cursos acontecendo lá, e esses cursos vão ser ligados a você para mim. Então, estamos definitivamente navegando para as páginas de conteúdo. Então vamos marcar este também. , Pessoal, muito bom trabalho de novo. Há uma quantidade infinita de coisas que você pode fazer em sua casa. Temos mostrado diferentes coisas que você pode fazer para personalizar manualmente sua página inicial usando diferentes planos de fundo, recursos diferentes usando elementos de widgets diferentes, etc. Agora, na próxima seção, vamos em frente e certificar-nos de que nosso site está otimizado antes de seguirmos em frente. Em outras palavras, queremos ter certeza de que ele carrega rapidamente porque acredite em mim, se seu site está carregando mais lento do que em dois segundos, eu acho que as estatísticas dizem que há como 30 ou 40% das pessoas vão sair e isso é caras enormes 30 ou 40% das pessoas. E acho que se for ainda mais lento, será ainda Mawr quem vai embora. Então, mesmo que você tenha o site mais bonito do mundo, qual é o objetivo? Se ninguém vai ficar por aqui para verificar? Então, na próxima seção, vamos nos certificar de que tudo está otimizado. Tudo está carregando rapidamente. Tudo ainda parece muito bom. E então vamos continuar fazendo e projetando nossa página de cursos ou começar aqui página sobre página, etc, etc. E eu vou mostrar a vocês como efetivamente usou os modelos que já estão no elementary porque agora você sabe como realmente usar os diferentes recursos fora de L.A mentor. Então, podemos simplesmente ir em frente e editar e personalizar os modelos que já estão aqui. Ótimo trabalho, se você tiver alguma dúvida, estará no Q e A, como sempre ver na próxima palestra e na próxima seção