Como criar um site pessoal/portfólio

1. Como criar um site de pessoal/portfolio - introdução: O que está acontecendo, pessoal. No vídeo de hoje, vou mostrar-lhe como fazer um site pessoal com WordPress. Vamos dar uma olhada no site que eu vou te mostrar como fazer. Eu projetei isso para ser o design perfeito de uma página para um indivíduo. Tem um efeito de paralaxe incrível. Eu também vou mostrar-lhe como mudar todas as fontes e suas cores, eu vou mostrar-lhe como alterar esses ícones e torná-los clicáveis. Vou mostrar-lhe como criar botões que podem ir para diferentes páginas ou eles podem saltar para diferentes áreas em seu site. Eu também vou mostrar-lhe como alterar o seu menu aqui em cima, como fazer este cabeçalho transparente e eu também vou mostrar-lhe como criar este logotipo de assinatura para o seu site e você não precisa de nenhum software para fazê-lo, você pode fazê-lo completamente para livre, modo que é muito legal. Também mostrarei como mudar todas essas seções diferentes para que não tenha que ser apenas filmes, fotos ou web design, você pode alterá-los para o que quiser. Vou te mostrar como criar uma galeria de fotos, colocar seus vídeos aqui, vincular seu Instagram e YouTube e Facebook ou qualquer outra mídia social que você tenha. Eu também vou mostrar-lhe como criar esta lista de ícones aqui em baixo, bem como criar uma página de contato completa onde as pessoas podem enviar-lhe e-mails e você também tem um mapa por aqui e a melhor parte é que eu fiz este site em um modelo que eu estou dando a você de graça. Você pode encontrá-lo indo para a guia Projeto de classe e olhando em Recursos. Eu fui de mais de um tema ao ar livre para o meu site, mas você pode mudá-lo para qualquer coisa que você quiser. Este layout do site como super versátil, e eu vou puxá-lo para cima no celular, no meu telefone. Aqui está o que parece. Incrível. Isso está ótimo no meu telefone e eu também vou mostrar-lhe como obter seu próprio nome de domínio, como eu tenho aqui, e como obter seu próprio plano de hospedagem. Sem mais delongas, meu nome é Dale M-c Ma nus, eu faço sites e também mostro como fazer isso passo a passo, quando vocês estiverem prontos, vamos começar. 2. Passo 1: obtenha um nome e hospedagem: Certo, então o passo número um, é proteger um nome de domínio e um plano de hospedagem. Um nome de domínio é apenas o nome do seu website.com. Um plano de hospedagem é coberto por uma empresa de hospedagem. Eles têm estes edifícios cheios de todos esses servidores, e os servidores iluminam ou alugam espaço na Internet, enchem com todas as suas fotos, vídeos e textos e assim por diante, e depois vão ao vivo. Sim, você poderia fazer um site gratuito, mas você vai ser limitado às seguintes coisas. Você não será capaz de rentabilizar um site gratuito com anúncios. Você não poderá instalar plugins úteis. Você não tem uma quantidade ilimitada de temas que você pode usar para personalizar seu site e você não terá seu próprio nome de domínio. Será algo como seu nome de domínio, .WORDPRESS.COM. Hospedagem é necessária para ter um site. Vamos começar. Vamos saltar para hostgator.com. Esta é a página inicial deles, então o que vamos fazer é passar para a hospedagem na web. Você pode ver que eles têm alguns planos diferentes aqui. O Plano de filhote é o que eu recomendo mais se você está apenas começando, eo Plano do bebê é se você pretende ter um monte de nomes de domínio. Se você sabe que você quer ter como dez nomes de domínio diferentes, vá em frente e obtenha o Baby Plan. O Plano de Negócios é realmente apenas se você está tentando ganhar uma tonelada de dinheiro com o seu site, como eu estou falando de centenas e milhares de dólares e você precisa de todos esses sinos extras e assobios. Mas para o bem deste tutorial, vamos seguir em frente e fazer o Plano de Filhote. Você pode ver que é o plano mais barato. Vamos em frente e bater Buy agora, e aqui é onde você vai obter seu nome de domínio. Esta é a parte divertida. Eu recomendo manter seu nome de domínio com menos de 15 caracteres, e também recomendo mantê-lo o mais simples possível. Para isso, vou fazer um site pessoal. Eu realmente já comprei dalemcmanus.com, que é o meu nome. Vou apertar enter e ele vai dizer que não está disponível, porque eu já o tenho. O que eu vou fazer é meu nome do meio começa com um N. Então eu só vou colocar um N lá e fazer dalemcmanus.com e Enter e lá vamos nós. Ele vai lhe dar um monte de coisas diferentes como, .club, .site, .net. Eu recomendo apenas ficar com o.com. Queremos que seja o mais legítimo possível. Legal. Vamos até o fim e você verá que a opção Adicionar Proteção de Privacidade do Domínio está marcada. Isso é bom, porque se você não tiver isso marcado, você será bombardeado com chamadas de spam de pessoas que estão pedindo para construir seu site e oferecer-lhe todas essas coisas se você pagá-los. É detestável. Eu cometi este erro uma vez no início quando eu fiz meu primeiro site de sempre, e foi terrível. Quero dizer, meu telefone provavelmente tocou seis a oito vezes por dia com advogados, então eu recomendo adicionar essa proteção de privacidade do domínio. Muito bem, a seguir, vamos descer e escolher o nosso Plano de Hospedagem. Escolhemos o Plano de Criança, o que é bom, e também vamos escolher o Ciclo de Faturamento. Como você pode ver, se você fizer 36 meses, você vai ter o mais barato por mês e no geral, 275 por mês se você se comprometer com 36 meses. 36 meses pode ser muito para alguém se comprometer. Minha próxima recomendação é fazer os 12 meses porque você está comprando seu nome de domínio por 12 meses também, faz mais sentido tê-los coincidir e ainda é um plano muito barato. Se você quiser, você só quer experimentá-lo por um mês e apenas ver se você gosta, talvez este seja o seu primeiro site, então você pode ir em frente e clicar em um mês. Depois de escolher seu ciclo de cobrança, criaremos um nome de usuário. Vou fazer o meu nome completo, que é Dalemcmanus e depois fazer um alfinete de segurança. Depois, vamos preencher as nossas informações de faturamento. Eu só vou em frente e fazer isso muito rápido. Tudo bem, legal. Uma vez preenchido, vamos apenas adicionar serviços adicionais, e a partir daqui, você tem um Certificado SSL gratuito. O que isso significa é, digamos que eu vá para Apple.com. Essa coisinha de segurança. Diz conexão para proteger, seu pequeno símbolo de fechadura aqui. Isso é o que isso é. Se você está vendendo produto em seu site, como se fosse uma loja de e-commerce ou algo assim, então eu recomendaria obter este Certificado SSL. Está incluído grátis aqui. Apenas deixe checado. Você pode ir em frente e desmarcar para proteger seu site contra hackers, sair, obter e-mail profissional desmarcado. Eu realmente tenho um outro vídeo inteiro mostrando como fazer isso de graça e, em seguida, também desmarcar backup seu trabalho duro. Há maneiras de fazer tudo isso sozinho, você não precisa incluí-las em seu pacote. Certo, então aqui está a parte divertida. Aqui é onde você vai economizar algum dinheiro. Na seção Cupom, provavelmente diz Shared 3600 ou algo desse tipo, vá em frente e exclua isso e vamos apenas colocar em createaprowebsite, tudo uma palavra. O que isso vai fazer quando você bater validar, você pode ver bam, o preço acabou de cair. No momento em que eu estiver gravando isso, isso economizará até 60% dependendo de quanto de um Ciclo de Faturamento você escolher. Este é o meu link de afiliado. Se você usá-lo, ele economiza dinheiro e me faz um pouco para que eu possa continuar a fazer isso o tempo todo e fornecer mais tutoriais. É uma vitória para todos. Mas se você não gosta de mim e não quer usá-lo, você pode tentar encontrar um em outro lugar. Eu garanto que este é o melhor negócio que você vai conseguir, porque eu liguei para o Host Gator e fiz este acordo especial puramente para os meus telespectadores. Vamos rever isto bem rápido. Você pode ver que temos nosso registro de domínio por um ano, que caiu de 15 para 5 dólares, o que é incrível. Nós temos o nosso plano de criação, que era originalmente $10,95, que caiu para 7,67, então nossas adições são apenas nossa proteção de privacidade, que novamente, eu recomendo muito. Vamos falar sobre, desculpe, nós realmente temos que concordar com os termos. Você leu e concorda, e então você pode clicar em checkout agora. Uma vez que isso esteja completo, ele vai apenas configurar tudo para você. 3. Passo #2: instale WordPress: Agora estamos passando para o segundo passo, que é instalar o WordPress. E o WordPress é basicamente apenas um construtor de sites. Na verdade, alimenta cerca de 30% da Internet, que é um monte de sites malucos. E é muito fácil de usar. E eu vou te mostrar passo a passo. Então vamos instalá-lo. Tudo bem, então vá até a guia de hospedagem aqui em cima. E então o que vamos fazer é descer para o WordPress, instalação com um clique. Então vá em frente e clique nisso. Tudo bem, então a partir daqui vamos apenas escolher onde queremos instalar o WordPress. Então vamos selecionar seu domínio, e eu vou selecionar meu domínio. Eu tinha um monte de opções lá. Você provavelmente só terá um. Então, basta clicar em Avançar. Tudo bem, então agora vamos dar um título e este será apenas nosso nome porque esta não é uma empresa. Este é um site pessoal. Então, se você tivesse uma empresa, você poderia colocar o nome lá. Usuário administrador, eu só vou fazer meu nome e primeiro nome, sobrenome. Novamente, muitos nomes excessivos para isso é porque é um site pessoal. E, em seguida, e-mail de administrador Então vamos fazer o nosso e-mail. Legal. E então concordaremos com os termos. Em seguida, clique em Instalar. Agora WordPress está instalando, incrível. E boom, assim mesmo, está feito. Então passo muito importante aqui é salvar os detalhes da instalação aqui. Então o que eu vou fazer é copiar estes e então eu vou apenas colá-los onde eu salvar senhas normais e coisas assim porque você vai precisar desta senha ridícula, este S71 yada, blá. Mas para começar inicialmente vamos precisar dessa senha maluca. Então, certifique-se de guardar isso. E, em seguida, basta clicar em login. Então você é trazido para esta página porque o Host Gator tem que enviar seu nome de domínio por todo o mundo que tem que se conectar a todos os servidores e dizer, “Ei, esse nome de domínio existe”, e esse processo é chamado de propagação. E dizem que pode levar cerca de 24 horas. Nunca tive que demorar tanto tempo. Geralmente é entre 20 minutos e 2 horas. Então, em cerca de 20 minutos, verifique de volta. E se você vir uma página que se parece com esta, então você está pronto para ir e podemos começar de novo com o tutorial. Mas tome como uma pausa obrigatória, vá pegar um lanche e volte logo. 4. Passo #3: faça o login e altere sua senha: Certo, assim que estivermos nessa página, podemos passar para o passo número três, que tem login e mudar sua senha. Porque não queremos ter aquela senha ridícula que guardamos mais cedo. Então vamos em frente e em vez de clicar no pequeno botão verde que diz login admin, a maneira que você deve se acostumar a entrar é indo até o seu nome de domínio e fazendo /WP- admin.Ao fazer isso, você pode entrar o tempo todo este pequeno botão verde não vai estar aqui uma vez que você publicar seu site. Então, vamos apertar Enter. Agora podemos fazer login. Assim, podemos usar seu nome de usuário ou seu endereço de e-mail. Vou fazer o meu nome de utilizador, que era só o Dale e depois vou fazer aquela palavra-passe maluca. Eu salvei o meu, então eu vou apenas copiar e colá-lo e, em seguida, clicar em login. Tudo bem, estamos no painel do WordPress e há um monte de coisas acontecendo aqui, então vamos torná-lo muito mais fácil de navegar e parecer um pouco mais limpo. Então vamos descartar isso e vamos acertar o X em praticamente tudo. Vamos apenas dispensar. Queremos que isto fique bonito e limpo assim. Não quero assustá-lo se esta é a sua primeira vez no WordPress. Certo, agora que fizemos login e limpamos nosso painel, vamos mudar nossa senha. Então vamos descer para os usuários e, em seguida, ir para todos os usuários.Em seguida, basta clicar no seu nome. Agora vamos até o fundo e vamos gerar senha e então simplesmente excluir aquela que não queremos outra senha louca, queremos fazer a nossa própria. Então vamos em frente e apenas colocar em qualquer senha que você quiser colocar dentro Agora clique em atualizar o perfil e lá vai você. É assim que você pode alterar sua senha e agora você pode fazer login com isso. Então você pode apenas usar seu nome como seu nome de usuário e você pode fazer login com sua nova senha a qualquer momento. E lembre-se, faça seu nome de domínio /wp-admin. Isso é como fazer login no WordPress para o seu site. 5. Passo 4: personalizar seu site: Certo, então a melhor parte, passo número quatro, é personalizar seu site. Então, primeiro vamos obter o nosso tema, depois vamos baixar alguns plugins que vão nos ajudar muito, e em seguida, eu vou dar a vocês um modelo que você pode usar que vai tirar muito do trabalho duro. Então você pode simplesmente arrastar e soltar e substituir as imagens que você deseja e substituir o texto e assim por diante. Eu queria tornar as coisas super fáceis para vocês. Então a primeira coisa que vamos fazer é pegar nosso tema. Nosso tema é realmente apenas vai ser usado para o nosso cabeçalho e nosso rodapé. Então vou te mostrar o que quero dizer. Vou até createaprowebsite.com, que é o meu site. Nós estamos indo apenas para obter o tema puramente para este cabeçalho aqui em cima, esta parte branca, e em seguida, o rodapé todo o caminho na parte inferior. Em seguida, o Page Builder, que é um plugin que vamos obter é chamado Elementor. Isso é o que vamos usar para realmente projetar todo o nosso site. Mas o tema que queremos obter apenas para esse cabeçalho. Então vamos voltar e passar para a aparência. Vamos passar aos temas. Agora, a partir daqui, basta rolar para baixo, e você verá este sinal de mais que diz “Adicionar novo tema”, basta clicar nele. Então nós vamos para “Pesquisar Temas ”, e nós vamos digitar “Ocean WP” Então você vai vê-lo aqui, o que diz, “Basta fazê-lo” Basta clicar em “Instalar” e, em seguida clique em “Ativar”, então agora que isso está ativado, nós também vamos instalar alguns plugins. O primeiro será Ocean Extra, que é apenas uma pequena adição, um pequeno bônus ao nosso tema Ocean WP. Então também vamos instalar um construtor de páginas chamado Elementor. Elementor é o que vai nos permitir arrastar e soltar e apenas construir visualmente nossa página. Então, para fazer isso , vamos para “Plugins” e depois para “Adicionar novo”. Em seguida, na parte superior, você provavelmente verá este tema recomenda o seguinte plugin, Ocean Extra. Você pode instalá-lo a partir daqui, ou você pode procurá-lo na barra de plugins de pesquisa aqui. Mas nós estamos indo para fazer começar instalar plugin aqui mesmo. Vamos apenas instalar. Vai dizer que está instalando Ocean Extra. Em seguida, agora ele diz plugin ativado com sucesso. Então vamos voltar para “Plugins” e depois ir para “Adicionar novo”. Agora vamos conseguir o construtor de páginas do Elementor. Então vamos para os plugins de pesquisa, e vamos apenas digitar Elementor se eu soletrar isso direito. Então os construtores de página Elementor, o primeiro aqui, tem mais de um milhão de instalações ativas. Então vamos em frente e clique em “Instalar agora” Em seguida, clique em “Ativar” para que agora ele irá levá-lo a esta pequena página de começar. Você pode assistir ao tutorial se quiser, mas nós vamos sair disso. Não precisamos disso. Então, antes de começarmos a personalizar nosso site, forneci um modelo que vamos instalar agora. Então, no seu painel, você verá a guia Elementor aqui. Basta ir até “Meus modelos” e em vez de fazer “Adicionar novo modelo”, é assim que você os cria, vá até o “Importar modelos” na parte superior, e então ele vai dizer “Escolher arquivo”, vamos apenas clicar em “Escolher Arquivo”, e os meus estão na minha área de trabalho. Mas se você baixá-los, eles provavelmente estão na sua pasta de downloads. Então vá para os modelos de sites pessoais, e vamos fazer o site pessoal primeiro. Então eu tenho o modelo de site real e, em seguida, eu tenho o modelo de rodapé. Mas agora, vamos fazer o modelo de site pessoal e clicar em “Abrir” e, em seguida, “Importar agora” Agora, vamos voltar para “Importar modelos” escolher o arquivo e também colocar no rodapé, “Abrir” e “Importar agora”. Agora temos nosso site e nossos modelos de rodapé aqui. Então vamos lá e fazer uma página inicial. Então, basta ir até a “Guia Páginas” e depois ir para “Adicionar novo”. Então, a partir daqui, apenas feche esse pequeno mundo maravilhoso de blocos, apenas feche isso e vamos chamar essa página inicial. Então, à direita, basta ir para esses menus suspensos aqui e clicar em “ Atributos de Página ” e, em seguida, mudar o modelo padrão para Elementor largura total. Isto é muito importante. Então, a partir daqui, vá até “Publicar” e ele dirá, “Você está pronto para publicar?” Ninguém está olhando para o nosso site. Esta é apenas a nossa maneira de salvá-la. Então, basta clicar em “Publicar”. Então vá até seu nome no canto superior esquerdo e clique em “Visitar Site” e abra-o em uma nova janela. A partir daqui, basta clicar em “Personalizar”, e o que queremos fazer é que acabamos de fazer esta página inicial, mas nosso tema, que é o oceano WP, não está reconhecendo isso como a página inicial. Ele ainda está nos mostrando este modelo de post Olá mundo, e queremos nos livrar disso. Portanto, queremos fazer a conexão com a nossa nova página inicial que acabamos de criar. Então vá até as configurações da página inicial e clique em “Uma página estática” e, em seguida, na página inicial, clique no botão “Selecionar” e, em seguida, clique em “Página inicial”. Então, se você clicou em “Salvar rascunho” em vez de “Publicar”, você provavelmente não verá isso aqui. Você tem que clicar em Publicar para que esta nova página inicial apareça. Então, agora que selecionamos a página inicial, você pode ver que temos essa página de largura total com a qual podemos jogar, e agora podemos adicionar nosso modelo a ela. Então, a partir daqui, clique em “Publicar” novamente, e então clique no “X” e vamos para “Editar página” Eu realmente vou fechar para fora desta janela antiga aqui. Então, a partir daqui, vamos fazer “Editar com Elementor”. Então aqui está a parte divertida agora que podemos começar a personalizar. Então, a maneira como Elementor funciona é, você pode simplesmente clicar neste botão de nova seção e, em seguida, basta selecionar uma estrutura. Vamos apenas selecionar o principal. Se você clicar neste pequeno símbolo de olhar Cubo de Rubik aqui em cima, agora você pode arrastar em todos esses widgets. Assim, você pode arrastar uma imagem se quiser, ou cabeçalho, que é apenas texto, e então você pode alterar o texto. Eu posso digitar meu nome, por exemplo, e então você pode editá-lo, mudar as cores, tudo isso. Mas primeiro, o que eu vou fazer é adicionar nosso novo modelo para que tudo seja feito para você. Só queria te mostrar rápido como tudo isso funciona. Então, primeiro, vamos para o “Adicionar modelo ”, que é este pequeno botão de pasta, e então basta ir até “Meus modelos” Então, você verá nossos dois modelos que importamos. Então vamos fazer o site pessoal um e, em seguida, basta clicar no “Botão Inserir”. Em seguida, ele dirá: “Você também deseja importar todas as configurações de documentos?” Basta clicar em “Sim”. Lá vamos nós, então agora temos todos os widgets que criei para vocês aqui. Mas arruinou nosso layout de página inteira. Então vamos voltar e mudar isso. Então, no lado esquerdo aqui, você verá “Layout da página” na parte inferior. Se você não vir isso, ele está na guia “Configurações”. Basta ir para “Elementor Full Width”, e agora ele acabou de ser atualizado novamente. Então é assim que deve parecer, nós vamos nos livrar desse pequeno título aqui em cima. Vamos fazer o nosso cabeçalho, tudo isso. Mas primeiro, vamos trabalhar nessas seções principais. Então eu tenho todas essas imagens de amostra aqui para você, que são todas preto e branco. Vamos mudá-los a todos. Vamos mudar o texto e assim por diante. Então, como você pode ver, vídeos, seção de fotos, apenas tudo o que você precisa página de contato. Então aqui é onde nosso formulário de contato vai ser. Vou te mostrar como fazer isso mais tarde. Então vamos até o topo e abrir de volta esta pequena barra lateral. Então é assim que você abre e fecha. Basta clicar em “Atualizar” agora que nós temos que importado, e nós vamos nos livrar deste pequeno título aqui em cima. Então vamos para essas três linhas, parece um hambúrguer, clique sobre isso, e então vá para “Sair para o Painel”. Em seguida, vá para visitar o site novamente. Você não precisa abri-lo em uma nova janela desta vez e, em seguida, basta clicar em Personalizar. Esta guia Personalizar é como nós personalizamos nosso tema e , em seguida, a edição com a guia Elementor é como nós personalizamos nossa página principal. Neste momento, este título aqui faz parte desse tema, por isso queremos livrar-nos disso. Vamos até a guia Opções gerais e, a partir daqui, vá para o título da página. Então nós estamos indo apenas para ir sob estilo e está no padrão agora, nós vamos mudar isso para oculto. Agora ele se foi, o que é incrível. Vamos clicar em “Publicar” e clicar no X e voltar a editar com o Elementor. Vamos mudar este quadro principal para um dos nossos. Se você está acompanhando comigo, eu também forneci uma pasta cheia de imagens de acompanhamento para você, que você pode encontrar indo para a guia projetos e procurando em recursos. Os únicos que não vêm com são fotos de mim mesmo porque este é o meu site, então você vai querer colocar uma foto de si mesmo nesta seção. Para fazer isso, basta clicar com o botão direito do mouse e, em seguida, clique na seção Editar e, em seguida, se passarmos para o estilo, você verá a guia de fundo. Se estiver fechado, basta abri-lo e então você pode ver as imagens aqui. Se você não tem nada aqui, provavelmente será algo parecido com isso e você pode simplesmente clicar em “Clássico”, “ Tipo de fundo” e, em seguida, basta ir para a imagem. Vamos carregar nossa própria imagem. A partir daqui, você tem sua biblioteca de mídia, que não tem nada nela agora. Bem, na verdade tem as amostras de fotos que eu dei com você, então você pode mantê-las lá dentro. Temos a nossa cabra de amostra aqui. Vamos voltar a carregar arquivos e enviar uma foto de nós mesmos aqui. Minhas imagens, e então eu vou apenas selecionar este de mim e clicar em “Abrir”. Em seguida, clique em “Inserir mídia”. Uma coisa a observar sobre colocar fotos em seu site é que se há muito alta qualidade, pode parecer fantástico, mas seu site vai levar uma eternidade para carregar, o que não queremos. Queremos que ele carregue dentro de um segundo ou dois. Para corrigir isso, o que você pode fazer é ir para Optimizilla. Aqui vamos nós optimizilla.com, ele tem um velho dinossauro. Você pode simplesmente clicar em “Carregar arquivos” e, em seguida, selecionar sua imagem e abri-lo eo que o site vai fazer é comprimir sua imagem. Ele fará uma compressão automática para você e, se você rolar para baixo, você pode ver a diferença. Eles parecem muito parecidos agora, se eu quisesse realmente comprimir, eu poderia trazê-lo para um 45 e você provavelmente vai ver um pouco mais de diferença, lá vamos nós. Você pode ver que ele é um pouco mais pixelizado, mas o que isso faz é economizar muito espaço no arquivo e ele vai carregar muito mais rápido. Eu não vou tanto assim. Eu diria que um 70 é uma compressão muito boa, em algum lugar por volta de 70 e, em seguida, clique em “Aplicar” e, em seguida, basta baixar essa imagem. Agora esta imagem que eu realmente já compactei, então eu vou deixar isso em meus downloads. Vamos voltar para Elementor. Novamente, este já estava comprimido, por isso deve carregar bem. O que você pode fazer para mudar sua posição de sua imagem, você pode ver que eu estou no centro agora, você pode fazer top center e isso vai mover as coisas um pouco para baixo. Você pode fazer o centro inferior, me coloca um pouco mais alto. Se eu estou olhando para a página assim, eu escolhi centro-centro originalmente porque ele apenas parece o melhor. Então temos esse efeito de paralaxe acontecendo agora. Sempre que eu rolar a imagem em si não se move. Se você quer que ele se mova, você pode clicar em Anexo e alterá-lo para rolar e que agora vai realmente se mover com essa página. Eu amo o efeito de paralaxe, então eu vou voltar para isso e clicar em “Corrigido”. Você também pode alterar o tamanho, agora ele está definido para cobrir. Você pode conter, o que parece ridículo porque você está apenas repetindo a imagem. Na minha experiência, a cobertura é o melhor caminho a percorrer. Agora, se você não quer que este bloco de imagem aqui seja tão largo, o que você pode fazer é ir até a guia de layout e, em seguida, você verá a altura, que é definido para a altura mínima. Se estiver no padrão, altere-o para a altura mínima e, em seguida, agora eu tenho ele definido para um 780. Você pode reduzir isso para algo assim e você pode ver que é muito menor agora se você quiser esse estilo. Eu amo essa primeira imagem grande, é o que mais diz sobre você. Estou muito ao ar livre, então tenho uma foto minha ao ar livre. Eu só vou voltar e mudar isso para 780, eu gostei do jeito que era. Agora eu mostrei a você como editar essa imagem principal. Se você queria, ou digamos que você queria que essas palavras se destacassem um pouco mais, o que você pode fazer é ir para a guia estilo e, em seguida, fechar a guia de plano de fundo e, em seguida, ir para a sobreposição de fundo. O que você pode fazer é definir uma cor para isso ou clicar no “Clássico”, que é um pequeno pincel. Clique em “Cor” nesta pequena caixa aqui e então o que você pode fazer é mudar a cor da sobreposição. O que você pode fazer é ir todo o caminho para o preto se você quiser e então a opacidade é quão escuro ou quão claro você quer que isso seja. Um é como um 100 por cento e então um zero é obviamente zero por cento. Se quisesses, podias fazer isso. Eu gosto que a imagem principal seja cristalina. Já consigo ver as palavras muito bem. Vou trazer isso de volta para uma sobreposição de fundo transparente e próxima. Na verdade, vamos fazer isso para estas secções aqui em baixo. Estes já têm sobreposições de fundo sobre eles. Mas para este, eu gostaria. Vamos mudar as nossas mensagens. Bastante simples. Basta clicar duas vezes e você pode editá-lo aqui mesmo na página. Eu poderia colocar meu nome e eu faço todas as maiúsculas, eu gosto de ser grande, ousado e importante. Ou você pode mudá-lo aqui, sob o título ou se você quisesse também você poderia colocar tudo à esquerda ou você poderia colocá-lo à direita e assim por diante alterando o alinhamento. O que está por baixo disto é um divisor. Só queria um espaço entre o meu nome e o que faço. O divisor, se você clicar nisso, eu vou ver se eu posso rolar para obter isso em um lugar melhor, lá vamos nós. Se você clicar sobre isso, você pode alterar a largura dele. Agora está em 41, você pode fazer todo o caminho para fora. Você pode fazer uma linha muito pequena, se quiser. Eu só vou voltar para 41. Você pode mudar o peso. Eu tenho que definir para um dois. Você pode torná-lo bem grosso, se quiser. Gosto da linha fina. Então agora vamos substituir este texto por coisas legais que fazemos. Eu tenho este conjunto para Itálico, então parece um pouco diferente do nosso título principal. Vamos colocar isso como cinegrafista. Tenho experiência em vídeo e fotografia. Eu gosto de viajar e fazer alguns filmes e coisas assim, então eu vou colocar um pouco disso no meu site. Vou fazer cinegrafista, mudar isto para fotógrafo. E então, é claro, o que estou fazendo agora, desenvolvedor web. E se não for itálico, ou talvez você queira alterá-lo de itálico, você pode selecionar tudo. E então esse pequeno menu aparece e você pode clicar nele ou desclicar, se quiser. Gosto dele em itálico. Então, se você gostaria de mudar a fonte, eu meio que esqueci esta parte, para o cabeçalho principal real. Digamos que você não queira essa fonte. Clique duas vezes nisso, ou na verdade, você pode simplesmente selecionar todo o próprio widget clicando nesta ferramenta caneta. E então vá para o estilo, e então vá para a tipografia, e você verá essa pequena ferramenta de caneta novamente. Clique nisso, e você pode mudar a família de fontes para o que quiser. Então eu tenho que definir como padrão. Vou selecionar um aleatoriamente. Vamos fazer isso. Então você pode mudar a fonte, mas eu vou voltar para o padrão. E então você pode mudar o tamanho também. Então está definido para 60. Você pode torná-lo enorme, você pode fazer um menor, pensei que 60 era um bom ponto par. E então você tem suas configurações habituais de edição de texto aqui. Então, vamos lá para baixo e vamos trabalhar nesta seção sobre mim. Então, vamos clicar nesta seção. Então a parte complicada aqui é, você tem uma seção que é o azul, que é a seção inteira. E então dentro dessa seção, você tem duas colunas. E essas duas colunas são definidas para largura total. Então pode ser um pouco complicado selecionar um ou outro. Então eu vou te mostrar um pequeno truque. Se você quiser selecionar a seção real, você pode clicar com o botão direito do mouse na área azul e clicar em Editar seção. Se você quiser selecionar a coluna, você verá este pequeno símbolo cinza. Parece duas colunas. Você pode simplesmente clicar com o botão direito do mouse sobre isso e clicar na coluna editar. Então, agora que fizemos isso, nós realmente queremos ter a coluna selecionada, ir para estilo, e então nós podemos mudar o plano de fundo. Então vamos excluir este, e vamos adicionar um novo. Então, eu vou voltar para carregar arquivos, selecionar arquivos, e então eu vou apenas selecionar esta foto minha. Então, novamente, estas são as duas únicas fotos que você não tem com você. Você deveria colocar um de si mesmo. Então, clique em abrir. E, novamente, não se esqueça de comprimir suas imagens. Então vamos para inserir mídia. Lá estamos nós. E, em seguida, a partir daqui, vamos clicar nesta coluna, para que você possa clicar nela ou clicar com o botão direito do mouse e clicar em editar coluna. Vamos voltar ao estilo, e mudaremos esse fundo também. Então apague isso. E vamos adicionar um novo. Vá para carregar arquivos, selecione arquivos e, em seguida, siga as imagens ao longo. Vamos clicar duas vezes sobre isso. E eu vou adicionar o deste deserto, eu gosto daquele deserto. Então eu estou indo para ir com este tema ao ar livre, e eu vou fazer um tipo de contrastes quentes e frios. Vou ter muitas fotos do deserto misturadas com fotos de neve. Então, a partir daqui, vamos apenas clicar em inserir mídia. E você pode ver que isso agora tem uma sobreposição de fundo em cima dele. Então vamos fechar isso. E se você quiser editar isso, basta ir para a sobreposição de fundo. E então você pode mudar a opacidade. Então, eu poderia tê-lo mais leve, mais escuro, e assim por diante. E se alguma vez fizeres alguma coisa e disseres “Merda, tenho de desfazer isso. Basta apertar o controle Z. e você pode desfazer. E novamente, você pode alterar a cor também dessa sobreposição. Tudo bem. Então edite este texto da mesma forma, você pode apenas clicar duas vezes. Se você for para o estilo, poderá alterar a fonte e assim por diante e a cor do texto. Já te mostrei tudo isso. Então aqui você apenas adiciona o que você quer sobre si mesmo. Eu só vou deixar isso. E agora o nosso botão. Então esta é uma parte divertida. Então, se você clicar no símbolo de caneta pequena aqui, ou clique com o botão direito e fazer editar botão. Vai nos levar para onde podemos mudar o botão. Então eu escrevi ver portfólio aqui. E você pode colocar em qualquer link para isso que você quiser colocar nele. Então, se você tem um link separado para o seu portfólio, você pode colocar isso aqui. Eu tenho esta configuração como uma âncora, para ir para a minha seção de filmes ou seção de vídeos que, se eu apertar o botão, ele realmente iria saltar para baixo para esta seção. Então, eu realmente vou deixar isso e eu vou mostrar a vocês como criar essas âncoras um pouco mais tarde. Mas este é o lugar onde você colocaria em sua URL. E se você quiser mudar tudo sobre o botão, como o estilo e assim por diante, basta ir para o estilo. Você pode alterar o texto do botão clicando na tipografia. E você pode alterar a cor do texto, a cor do plano de fundo. Portanto, a cor do texto é automaticamente definida como branco. Se eu quiser mudar a cor de fundo, eu posso. Então, se eu quiser lembrar desta cor, eu vou apenas copiar isso. Então agora, eu posso mudá-lo. Então, se eu quiser que ele seja verde e assim por diante. Para botões, eu recomendo coisas como laranja. Eu recomendo um tipo de azul claro e um verde. Eles se destacam muito bem, entre tudo o resto. E seus botões são sua maior chamada para ações em seu site. Então, se você está vendendo algo ou você quer que as pessoas cliquem em seu portfólio, ter esses botões ousados agradáveis é uma ótima idéia. Então, eu só vou voltar para a minha cor laranja original. E depois fecharei isso. E, em seguida, a cor do mouse, se você clicar na guia do mouse, esta é uma laranja mais escura. Então, sempre que eu passo por cima, você pode ver que eu estou crescendo e, eu tenho que ficar um pouco mais escuro. Então, digamos, eu quero deixar isso ainda mais escuro. Eu só vou trazer isso para baixo assim. E você pode ver agora que é um tipo de acastanhado, laranja. Tão perto que e, em seguida, a animação pairar está definida para crescer. Então você pode fazer o que quiser. Digamos girar, o botão inteiro girará um pouco, então você pode escolher o que quiser lá. Eu só gosto do crescimento regular, agradável e simples. E uma vez que você criou todos esses elementos, não importa se é uma seção inteira, ou apenas um botão. O que você pode fazer é clicar com o botão direito aqui e clicar em duplicado. E então você pode arrastar esse novo botão para onde quiser. Então, se eu quisesse colocá-lo aqui, eu poderia. Então isso é incrível. Então vou controlar Z. Livrar-me disso. Está bem. Então vamos descer e substituir esta cabra. Temos que nos livrar da nossa cabra de amostra. Então, se você apenas clicar com o botão direito sobre esta área e editar seção, vá para estilo, exclua-o. Vamos colocar o nosso novo. Então vá para carregar arquivos, selecione arquivos. E eu vou selecionar o deserto dois. Gosto desta foto épica. Na verdade, é uma foto que tirei, no Perú, do meu amigo Alex de pé nas dunas. Então, isso é fixe. Então vamos inserir mídia. E lá vamos nós. Isso também é paralaxe, então é legal. Ele vai de uma foto minha e depois, bam para ele. Então ninguém vai saber disso, não sou eu. Então vou fingir que sou eu. Novamente, se você quiser tornar isso menor, vá para a guia de layout e, em seguida, altere a altura mínima para cima ou para baixo, como quiser. Tudo bem. Então, eu tenho esses ícones aqui. Então vamos mudar isso. Então, o jeito que eu consegui isso foi de novo, ir até esse símbolo do Cubo Rubik. E estes são apenas ícones regulares, eles são caixas de ícones na verdade. Então, se você arrastar isso para dentro, é assim que você criá-los. Então vamos mudar isso. Então, vamos clicar nesse botão ou à direita. Vai continuar me dizendo, se eu sei como clicar com o botão direito do mouse, basta clicar. Peguei-o. De qualquer forma, editar caixa de ícone e você pode alterar o texto. Você pode mudar o título aqui. Então vamos mudar isso para filmes. Se eu posso soletrar direito, lá vamos nós, filmes. E você pode mudar o ícone. Então, vou clicar nisso. Vamos digitar o filme. E nós vamos pegar esta pequena tira de filme. Há um milhão de ícones aqui. Não é um milhão, mas há muito. Você pode escolher todos os tipos de diferentes. E eu também tenho este hover definido para ficar azul e crescer. Então, se você quiser mudar isso, basta ir para o estilo e, em seguida, passar o mouse. E você pode mudar essa cor e a animação. E se você estiver na guia normal, você pode alterar o tamanho do ícone, se quiser, e a cor também sob a cor primária. Então vamos mudar este para fotos. E vamos fazer um símbolo de câmera. E vamos mudar este para web design. E depois mude para um laptop. Agora, se você quiser ligar isso a coisas. Então agora, se você pairar sobre eles, é como ooh, eu posso clicar sobre isso. Então, se você quiser que ele vá para um link, há um pequeno botão que diz link para, ou desculpe, pequena seção que diz link para. E você pode simplesmente colocar em sua URL lá. E novamente, você poderia fazer isso como um botão de salto para outro lugar, que eu vou mostrar a você em breve. Na verdade, não, vou te mostrar agora. Então vamos fazer hashtag. Então você sempre tem que fazer hashtag se você estiver vinculando a uma parte diferente da mesma página. Então vamos fazer filmes de hashtag. E o que queremos fazer é apenas ter este salto direto para esta seção. E queríamos pousar assim. Então você não tem que definir isso. Tudo que você tem que fazer é escolher a seção. Então, se eu clicar com o botão direito do mouse nesta área azul aqui em cima, e editar seção, o que vamos fazer é passar para avançado, e é aqui que vamos criar um ID de classe. Então vamos chamar isso de filmes, sem hashtag. E o que isso faz é dizer, ei, esta é a seção de filmes. De modo que sempre que apertarmos esse botão, ele vai dizer, oh, eu sei o que é e então vai para baixo para ele. Deixa-me mostrar-te do que estou a falar. Então, clique em atualizar. E depois fecho isto e mostro-te. Então, se eu clicar nesse botão, boom, lá vamos nós. Então é assim que se cria um botão de salto. Muito fixe. Adoro desenhos de uma página. Então botões de salto são como meu melhor amigo. Então vamos abrir isso de volta e vamos fazer as fotos uma ir para #photos e web design vai para #web design. E eu vou descer e mudar isso também. Então seção de fotos, certifique-se de que você está na seção principal, não apenas uma dessas colunas ou widgets. Seção principal, vá para avançado, ID de classe, vamos chamá-lo de Fotos. E isso tem que combinar perfeitamente com o que você colocou como hashtag. E vamos até o web design, clique com o botão direito, avançado, web design. E enquanto estamos aqui, vamos mudar de contato também. Então clique com o botão direito do mouse em avançado e contato, e vamos apenas clicar em atualizar. Agora, se eu clicar em qualquer um desses, boom, me derruba. Estão todos a trabalhar. Vamos mudar nossos títulos. Eu não quero que isso salve mais vídeos. Vou clicar duas vezes nisso e vou salvar o Films. Eu tenho este conjunto onde ele só mostra dois vídeos. O que eu fiz para obter esses vídeos foi ir para aquele pequeno símbolo do Cubo de Rubik, e então é apenas o widget de vídeo e então você apenas arrastá-los aqui. Mas eu já tenho dois set aqui. Digamos que você queria quatro. O que você gostaria de fazer é ter duas colunas, da maneira que nós temos, e essas colunas têm widgets dentro delas. Há a seção principal, uma coluna e, em seguida, um widget, é este. Se eu quisesse, podia clicar com o botão direito e duplicar isso. Agora ele vai criar um abaixo e eu poderia fazer o mesmo aqui. Agora eu tenho quatro e minha página se abre automaticamente para criar esse espaço. Mas eu quero deixar apenas dois, então eu vou apagar esses. Eu só quero te mostrar como fazer isso. Eu vou me trocar. Primeiro, antes de mudarmos estes vídeos, vou mudar este botão. Vou clicar nisso ou clicar com o botão direito do mouse. Então eu quero ter certeza de que eu tenho o link certo aqui. Agora ele tem o link para o meu canal no YouTube. Se eu clicar em que ele vai abrir em uma nova janela. Vai para o meu canal de viagens. Como eu disse, eu gosto de fazer vídeos e eu gosto de viajar, então eu apenas colocá-los juntos e fiz este outro canal do YouTube, não tem muitos assinantes, mas agora se você quiser se inscrever, vá em frente. Vamos voltar e certificar-se de que o link é alterado.Então, se quisermos alterar esses vídeos, basta clicar com o botão direito do mouse em “Editar vídeo” e, em seguida, colocar em um novo URL. Eu vou apagar o automático que eles têm lá para mim. Eu vou voltar para o meu canal do YouTube e eu vou apenas pegar um vídeo.Este Perú é o meu mais popular. Eu vou clicar nisso e eu vou pegar o URL no topo. Vamos voltar e colocar isso e depois vamos embora. Tem o meu vídeo lá dentro. Você pode alterar um monte de configurações aqui. Você pode fazer com que seja auto-play. Você pode se livrar dos controles do jogador, você pode torná-lo loop, e assim por diante. O tamanho do vídeo dependerá do espaço em que ele está. Digamos que eu tivesse apenas uma coluna em vez de duas, e este espaço era duas vezes maior. Veio por aqui. Este vídeo pareceria duas vezes maior. É responsivo para se encaixar em certos espaços. Apenas mantenha isso em mente. Vamos mudar este. Vamos clicar com o botão direito na caneta, “Editar vídeo”. Vamos apagar isso e vamos pegar outro vídeo. Vou fazer o meu vídeo da Nicarágua. Lá vamos nós. URL, copie e vamos colocar isso. Incrível. Seguindo em frente, fotos, a mesma coisa. Você pode editar isso da mesma maneira. Se quisermos mudar essas fotos. Você pode ver agora que temos uma grande coluna e a razão é porque esta é na verdade uma galeria. Em vez de clicar em uma imagem individual, eu tenho esta configuração como uma galeria que é seu próprio widget. Se clicarmos em “Editar galeria de imagens”, podemos editar todo o widget e temos quatro imagens diferentes aqui. A razão pela qual eu não configurei dessa maneira é porque se você clicar em um, ele vai puxar para cima nesta pequena caixa de luz coisa. Vai tornar o resto do seu site mais escuro. Você pode clicar nas setas e percorrer imagens, o que é muito legal. Vamos editar isso. Vamos voltar. “Editar galeria de imagens.” Permite limpar essas imagens. Vai dizer, “Reset Gallery”. Vamos apenas dizer, “Apagar”. Vamos para “Adicionar imagens”. Em seguida, vamos para, “Fazer upload de imagens” “Selecionar arquivos”. Vamos pegar Machu Picchu, vamos pegar a catedral, o deserto e a cachoeira. Estas são, na verdade, todas as imagens que tirei nas minhas viagens. Vocês todos podem ter isso. Por favor, não os revenda. Se me der pelo menos uma parte do dinheiro. Certifique-se de que estão todos selecionados. Todos os quatro são selecionados. Vamos fazer “Criar uma nova galeria”. Em seguida, você pode selecionar qual imagem você deseja primeiro. Eu só vou mostrar que você pode mudar isso por aí. Vamos fazer Machu Picchu primeiro. Vamos para dentro da galeria. Lá vamos nós. Agora temos as quatro imagens aqui. Agora, se você notar, que diabos, por que este é maior que o outro? É jogado fora de todo o olhar. Isso não parece bom. Vamos consertar isso. Se você voltar para “Adicionar imagens” e, em seguida, vamos para “Editar galeria”. Vamos clicar nesta imagem de cachoeira. Era o que era maior. Na verdade, clique em um desses para que você possa ver o tamanho é 1920 por 1080, e a cachoeira é 2048 por 1365. Vamos mudar isso. Vamos para “Editar imagem”. Nós vamos para “Aspect ratio” e nós vamos mudar isso para 1920 por 1080. Então o que vamos fazer é arrastar. Você só vai clicar em qualquer lugar aqui e arrastar isso para cima. Agora isso tem a proporção perfeita de 1920 e, em seguida, basta selecionar o canto e arrastá-lo para que ele seja largura total e apenas certifique-se de que ele está posicionado onde você quer. Vou dizer algo assim. Em seguida, clique na pequena ferramenta Crop Image novamente. Agora acabamos de recortar a nossa imagem. Vamos apertar “Salvar”. Há alguns cliques para realmente fazer isso. Foi confuso a primeira vez que fiz isso, então certifique-se de fazer todos esses passos. Agora vamos apenas fazer “Inserir galeria” e agora essa imagem é corrigida. Então agora parece bom e limpo. Novamente, se clicarmos neles, podemos passar por todos eles. Legal. Seguindo em frente, próxima seção, “Site design”. Certifique-se de alterar este botão. Eu tenho este conjunto é azul. Só vai para os meus contactos. Consegui uma cópia. Digamos que alguém quisesse que eu fizesse o site deles, eu só queria que isso pulasse até a minha página de contato. Mais uma vez, vou mostrar-lhe como fazer um formulário de contato. Certifique-se de editar isso e se quisermos, para que você possa ver que estes são todos individuais. Estas são todas caixas de ícones. Se eu for para o pequeno cubo de Rubik e eu originalmente arrastado para dentro e caixa de ícones e o que eu fiz foi em vez de ter, estar para cima e para baixo assim, eu fiz a composição dos olhos e eu fiz a esquerda e foi assim que eu fiz parecer com isso. Você também pode fazer o certo se quiser colocá-lo no lado direito da tela. Mas vamos deletar isso. Eu só queria te mostrar como eu fiz isso. Eu também posso criar links para todos eles. Agora eu só tenho estes como símbolos só para mostrar o que eu faço e tudo isso. Posso escrever uma pequena descrição. Mas se eu quisesse, eu poderia realmente fazer com que eles se ligassem a diferentes seções colocando um link aqui. Então mais nesta coluna é apenas onde eu tenho exemplos de alguns outros sites que eu fiz que se vocês são alguns dos meus seguidores, que vem me seguindo por um tempo, estes são realmente tutoriais antigos que eu fiz. Você pode alterá-los também apenas clicando lá e, em seguida, fazendo “Escolher imagem” e colocando em suas próprias imagens. Eu realmente já esqueci, eu não mudei os fundos aqui, então vamos voltar para a “seção Film” e fazer “Editar seção”, vá para a “guia Estilo”. Vamos mudar esse plano de fundo. Apague esse. Vamos fazer uma foto da montanha. Quer misturá-lo um pouco e também ter esse conjunto para Fix, que é a nossa paralaxe. Vamos até a seção de fotos, mudar esse fundo para ir ao estilo, livrar-se da amostra de cabra. Em seguida, basta selecionar o deserto e fazer “Inserir mídia”. Em seguida, vamos descer para “Website design” e então vamos fazer “Editar seção”. Mude este para vamos para “Upload files”, selecione arquivos e vamos fazer o Space one. Clique em “Abrir”, “Inserir mídia” e agora temos nosso espaço, o que é legal. Então, por fim, vamos fazer contato, “Editar seção”, amostra de cabra e vamos fazer o upload do nosso último. O que ainda não selecionamos? As dunas. Vamos fazer isso. Em seguida, clique em “Inserir mídia”. Lá vamos nós. Antes de passarmos a colocar nosso formulário de contato, eu só quero mostrar se você quer mudar as cores de todas essas seções de títulos diferentes, basta clicar com o botão direito do mouse, ir para “Estilo” e depois ir para “Cor”. Eu tenho este conjunto como um cinza muito escuro. Preto completo é algo que você não quer colocar em seus sites. Preto completo, só não parece tão profissional quanto um cinza escuro, então muitas empresas vão fazer cinza escuro. Novamente, com um branco, você poderia fazer um branco completo ou você poderia fazer um cinza claro e então você poderia mudar seu título para preto. Isso só teve que mudar as cores dessas seções. Novamente, se eu quiser fazer algo realmente escuro, eu apenas faço 1_c, 1_c, 1_c. Este é apenas um cinza muito escuro. 6. Passo #5: configure seu formulário de contato: passo número 5 é configurar o nosso Formulário de Contato. Para obter o nosso formulário de contato, vamos apenas atualizar isso e, em seguida, vamos para este pequeno símbolo hambúrguer e, em seguida, ir para Sair to Dashboard. Em seguida, vá para baixo para Plugins e, em seguida, vá para Adicionar novo e, em seguida, vamos apenas ir para Pesquisar plugins e vamos digitar em Formulário de Contato 7 elementor e, em seguida, se descermos, você verá o widget Formulário de Contato 7 para elementor construtor de página. Esse é o que queremos, então basta clicar em Instalar agora e clicar em Ativar. Agora que um está ativado, vamos voltar para Adicionar novo, e vamos obter o plugin Formulário de Contato 7. Um era apenas o widget para elementor e o outro é o plugin formulário de contato real assim que instalar agora no formulário de contato 7 plugin e, em seguida, ativar. Ok legal. Agora que isso está feito, basta ir para este lado esquerdo e você verá a seção de contato. Basta clicar em Formulário de Contato e, em seguida, você vai ver que temos Formulários de Contato 1, o que é bom então basta clicar sobre isso e você pode mudar o nome se você quiser, então eu vou apenas chamar este Formulário de Contato do Dale eo que nós estamos indo fazer é ir para a guia Mail e, em seguida, a partir daqui você pode alterar o endereço de e-mail para o qual você queria ir. Agora ele está indo para o meu site criativo Pro Gmail, então isso deve automaticamente colocar seu e-mail em. Mas se isso não acontecer, vá em frente e coloque seu e-mail e então vá até a aba Mensagens e a partir daqui você pode mudar o que todas as mensagens dizem assim sempre que eles enviarem um com sucesso, ele dirá: “Obrigado por sua mensagem foi enviado.” Eu não sei. Ele foi enviado soa como Dwight astuto do escritório. É um pouco formal demais, então vamos torná-lo um pouco mais divertido. Digamos: “Sua mensagem foi recebida” Ponto de exclamação. Uau, eu não sei soletrar. Lá vamos nós. Sua mensagem foi recebida de forma legal e não foi enviada. Ocorreu um erro ao tentar enviar sua mensagem. Por favor, tente novamente. Nós não queremos que eles tentem novamente mais tarde, eu vou entrar em Por favor, tente novamente. então você pode praticamente editar todos esses como quiser. Uma vez que você faz isso, agora vamos para salvar e vamos realmente entrar e adicionar isso à nossa página. Vamos até Nosso nome e, em seguida, ir para Visitar Site e, em seguida, vamos para Editar com elementor. Agora vamos até o fundo novamente e é aqui que vamos adicioná-lo. Então, se você for até seus widgets aqui e você rolar todo o caminho até o fundo. Agora você deve ver o formulário de contato vazio 7 e basta arrastar isso para dentro e, em seguida, ele vai dizer selecione Formulário de contato e vamos apenas selecionar o Formulário contato de Dale ou qualquer que seja o seu Formulário de contato foi. Legal. Ele acabou de adicioná-lo e é transparente, então eu não posso querer corrigir isso. Eu queria ter fundos brancos aqui nestas linhas. O que vamos fazer é passar para Formulário de Contato Estilo e, em seguida, você está indo para ver todas essas pequenas seções onde você pode colocar em algum código curto. Mas vamos ignorar todos esses, exceto para a área de texto, CSS, e o texto do tipo de entrada. Daqui você pode ver que tem esta pequena sugestão. Diz que o fundo é vermelho, ele diz que isso é o que você pode colocar em mudança a cor do fundo. Se você apenas seguir o que diz, é muito simples então apenas digite fundo, dois pontos, e vamos apenas dizer branco e, em seguida, boom, nosso fundo é branco, o que é legal. Eu só vou copiar isso e eu vou colar isso neste também, que é a área de texto, que também é onde você coloca sua mensagem. Lá vai ele, é tudo branco. Isso realmente não era qualquer codificação não era muito assustador. Então vamos clicar em Atualizar para que queremos ter certeza de que estamos economizando de vez quando e se você gostaria de mudar a cor do botão, podemos fazer isso aqui também. Se você apenas rolar para baixo e você vai para o botão Enviar, você também pode alterar essa cor de fundo, bem assim, vamos apenas mudar que real rápido para que eu possa mostrar-lhe para que vamos fazer fundo. Digamos apenas vermelho, vai mudar para vermelho. Você pode fazer azul e não fica azul escuro. Eu vou fazer azul claro e ele vai ficar como azul claro. O azul claro é o padrão e, em seguida, você também pode fazer o cursor do botão, bem como, que é logo abaixo aqui. Mas, de novo, vou deixar como está. Agora podemos ir até aqui e você pode apenas clicar com o botão direito do mouse neste widget, que é sua lista de ícones e você pode editar seu número de telefone, seu e-mail e seu endereço. Esta lista de ícones você pode alterar todos os símbolos que você possa alterar o seu número de telefone e, em seguida, você pode alterá-lo para qualquer símbolo que você quer algum, talvez você quer o formulário com o quadrado nele, e assim por diante. Funciona como todos os outros ícones e você pode mudar sua cor indo para Estilo e, em seguida, indo para Ícone. Mas eu vou deixá-los como eles são e então o mapa, se editarmos o Google Maps, podemos colocar em qualquer endereço, então eu apenas coloquei no Vale do Silício, na verdade não moro lá e nunca estive lá. Soa techie, então foi por isso que joguei isso lá. Mas você pode colocar em seu endereço comercial ou se você nem quer isso, você pode simplesmente excluí-lo completamente. Além do cabeçalho e rodapé, este site está olhando fantástico. Praticamente tudo está funcionando corretamente. Todos os botões estão ligados. Nós estabelecemos nossas âncoras para que quando precisamos, nós podemos apenas clicar em algo e isso nos levará para onde precisamos ir. 7. Passo 6: adicione seu cabeçalho e Footer: Então agora podemos passar para o passo número seis, que é adicionar seu cabeçalho, e seu rodapé. Tudo bem, então vamos continuar para atualizar, e o que vamos fazer é, ir para o pequeno ícone de hambúrguer e ir para, sair para o painel de controle. Na verdade, vamos voltar, visitar o site. Desculpe por isso, e nós vamos para Personalizar. Legal, então aqui está o seu cabeçalho. Está super em branco e chato agora. Então vamos mudar isso. Então, vamos para a barra superior primeiro, e ir para Geral, e vamos apenas desmarcar, habilitar para barra, que é aquela pequena barra na parte superior do cabeçalho, diz, “Coloque seu conteúdo aqui.” Queremos nos livrar disso, então isso se foi, e voltar, e então vamos para Header, e então vamos para General, e então você pode mudar o estilo do seu cabeçalho. Então, se você quiser, você pode fazer um cabeçalho transparente, que eu acho que eu vou escolher. Então, agora você pode ver que isso se foi, é totalmente transparente, e o que você pode fazer se quiser é ir até o fundo onde ele diz, configurações de cabeçalho transparentes e selecionar a cor de fundo, e então basta rolar para baixo e selecionar qualquer cor aleatória vamos apenas dizer preto, que eu realmente não vou escolher, mas se você vai para o pequeno controle deslizante de opacidade aqui, ele diz um 100, você pode deslizar isso todo o caminho, e você pode agora mudar a transparência, o que é muito legal, mas eu vou limpar isso, eu só quero deixá-lo na transparência total padrão. Então agora o que vamos fazer é mudar o meu nome aqui. Então, muitas pessoas colocam um logotipo aqui se tiverem uma empresa. O que eu vou realmente fazer é colocar uma assinatura aqui mas se você tem um logotipo que você tem para sua própria marca pessoal, eu vou mostrar-lhe como colocá-lo aqui também. Tudo funciona da mesma forma, mas vou mostrar-lhe como fazer uma assinatura e colocar isso. Então, para fazer isso, basta ir até uma nova guia e digitar Sketch.io, e pressione enter e, em seguida, selecione Inglês, ou qualquer idioma que você fala. Então, Você será levado para uma página que se parece com isso, e normalmente você poderia desenhar aqui com uma caneta preta e obter uma assinatura, mas queremos que nossa assinatura saia branca. Então o que eu vou fazer primeiro, é ir para este pequeno painel de camadas aqui, e eu vou apenas excluir esse Fundo, então eu vou selecionar esses três pequenos pontos e eu vou dizer excluir. Então, isso se foi. Agora o que queremos fazer é ver o que estamos fazendo. Se escrevermos branco sobre isso, seremos capazes de vê-lo, mas não será tão claro. Então vamos passar para este pequeno sinal de mais que diz Novo, e vamos apenas adicionar um plano de fundo, mas vamos acabar excluindo-o, não se preocupe. Então agora basta ir até o botão de ferramentas aqui no canto superior esquerdo, e apenas ficar com a caneta de caligrafia, e ela já está em branco, se estiver em preto, você pode selecioná-la e mudá-la para branco. Então, basta manter a caneta padrão e apenas desenhar sua assinatura. Eu só vou fazer uma assinatura áspera aqui, você pode ter que fazê-lo algumas vezes. Não é o melhor, mas vamos ficar com ele. Tudo bem, então agora o que vamos fazer é ir para o painel de camadas novamente, e eu vou apenas excluir esse plano de fundo novamente. Eu só queria lá para poder ver o que estava fazendo. Então, basta excluir, e então agora que isso está feito, eu vou passar para o pequeno ícone de exportação, tipo de parece um disquete, seu símbolo de salvamento padrão, e nós queremos salvar como um PNG. A razão pela qual queremos o PNG vai ter este fundo transparente. Então, se você tem um JPEG, por exemplo, esse mesmo símbolo vai acabar saindo com um fundo branco, então o que vai acontecer é que nós vamos ter esse grande bloco branco, que parece nada. Então, um PNG, sem antecedentes sobre ele vai ser a nossa melhor aposta. Então, basta clicar em Salvar PNG, e então isso irá para sua pasta Downloads, e o que eu também quero fazer é obter uma versão preta das minhas iniciais, e eu vou mostrar-lhe o porquê em apenas um segundo. Então, primeiro vamos para as camadas, e vamos apenas excluir, todas essas camadas que eu fiz para minha assinatura, e vamos voltar para as ferramentas, e vamos mudar nosso contorno para preto, e se eu quiser, Eu posso aumentar o tamanho um pouco, torná-lo agradável e grosso, e eu vou apenas criar um DM, para Dale McManus, apenas assim, e agora ir para exportar novamente e depois salvar como PNG. Legal. Então agora nós podemos sair disso, e nós vamos voltar de Geral, e nós vamos para Logotipo, e então nós vamos para Selecionar logotipo, e nós vamos para Fazer upload de arquivos e, em seguida, selecione arquivos, e, em seguida, basta ir para seus downloads e, em seguida, selecione, sua assinatura, clique em Abrir, tudo bem, lá está, e, em seguida, clique em Selecionar, e ele vai perguntar se você deseja cortar, nós não podemos realmente vê-lo. Havia um pouco de espaço no meu, então eu vou apenas arrastar isso em um pouco, mas se você quiser, você também pode apenas apertar o botão pular cortar, mas eu vou apenas cortar esse pouco de final lá, então agora você pode ver que temos uma assinatura, e lá está ela. É enorme. Então vamos derrubar isso. Então, vamos para a Largura Máxima, e vamos levar isso para dizer 188, em algum lugar por aí, talvez 180, se você quiser estar no ponto certo. Incrível. Então, agora, se você quiser adicionar um símbolo aqui em cima onde este pequeno ícone de página é, isso é chamado de favicon ou uma identidade do site. Então eu vou mostrar a vocês como adicionar isso muito rápido, então vamos voltar, e depois voltar mais uma vez, e então ir para a Identidade do Site, e então aqui é onde você pode colocar essa imagem. Então nós podemos apenas ir para baixo para Selecionar imagem, e então eu vou para Upload Files, Select Files, e então eu vou obter minhas iniciais pretas, e então pressione Select, e então vamos pedir-lhe para recortar, e se você quer, você pode arrastar isso para baixo. Então eu vou fazer algo assim, e, em seguida, tocar Crop Image, e, em seguida,, há minhas iniciais caminho no topo lá. Então isso é legal, e enquanto estamos aqui, também queremos alterar o título do nosso site e nosso slogan. Então, agora, se passarmos sobre isso, ele vai dizer, “Dale McManus - só mais um site Wordpress “, isso é chato. Queremos que diga: “Dane McManus.” E podemos colocar, Videographer.Photographer.web desenvolvedor. Então, agora, se clicarmos em Publicar, isso mudará. Então vamos voltar, e se você quiser ver como isso parece completamente, você pode ir até Ocultar Controles, e é assim que vai parecer, vamos cancelar esses downloads. Eu amo o cabeçalho transparente, mas está faltando algo. O que precisamos é de um menu porque precisamos de botões aqui no canto superior direito, onde podemos clicar neles e saltar para diferentes partes do nosso site. Então o que nós vamos fazer é voltar para esta pequena seta para abrir nosso personalizador, e então apenas apertar a seta para trás, seta para trás novamente, e então nós vamos para Menus. Então vamos criar um novo menu. Vamos clicar nisso e vamos chamá-lo de Menu Primário e, em seguida, ele vai dizer onde você quer que este menu para aparecer? Desativamos o Top Bar, o que não queremos. Queremos o Main. Basta verificar o Main e, em seguida, role para baixo e pressione o botão “Next Button”. Agora vamos adicionar alguns itens a esse menu. Clique no botão “Adicionar itens” e vamos adicionar alguns links personalizados. Se você tivesse páginas diferentes, digamos, você tivesse uma página separada para contato que tivesse um formulário de contato nele, você encontraria suas páginas aqui neste menu suspenso. o qual ele reverte automaticamente. Mas eu vou fechar isso e eu vou apenas fazer um link personalizado e a partir daqui, eu vou colocar em um filme hashtag. Porque lembre-se que eu tinha aquela âncora na seção de vídeos que se chamava filmes. Queremos pular para isso. Eu quero que o texto diga filmes e eu vou adicionar isso ao menu e vamos fazer outro. Isso são fotos e vamos fazer fotos hashtag. Opa, eu esqueci a hashtag e o p. Adicionar ao Menu e então nós vamos fazer, o que mais temos? Web design. Vamos fazer hashtag web design e, em seguida, vamos apenas dizer web design, Adicionar ao Menu e, em seguida, nós também vamos fazer contato e, em seguida, vamos fazer link texto é contato, e em seguida, Adicionar ao Menu e, na verdade, vamos fazer um sobre mim enquanto estamos aqui em cima também. Vamos apenas fazer hashtag sobre. Chamaremos de Sobre Mim e teremos que voltar e criar essa âncora para essa seção. Não podemos esquecer isso. Basta adicionar ao menu. Legal. Agora, se você clicar nesta área, você pode ver que temos esses novos botões aqui em cima, o que é legal. Se você clicar em “Filmes”, boom, salta para baixo para Filmes. Funciona perfeitamente. Agora, se você quiser mudar a aparência desses botões, eu vou te mostrar como fazer isso. Basta voltar e depois voltar mais uma vez e então nós vamos realmente para baixo para Header. Em vez da seção Menu, vamos estar no cabeçalho, e então vamos para Menu, que está dentro da seção Cabeçalho. Um pouco confuso. Mas vamos descer e fazer as cores. Link Color, podemos mudar isso. Digamos que eu faça um roxo só para que você possa ver do que estou falando. Agora, o texto real mudou para roxo. Você pode selecionar qualquer cor que desejar. Digamos, um branco. Pessoalmente, não acho que o branco se destaca muito bem. Eu realmente gostei do padrão. Vou deixá-la no padrão. Mas você também pode alterar a Cor da capa do link. Digamos que eu queria mais como uma laranja. Vou selecionar isso e vamos colorir um laranja avermelhado. Lá vamos nós, o que é muito legal. Combina um pouco com o meu fundo. Eu vou deixar isso. Mas agora que isso está feito, vou clicar em “Publicar” para que possamos salvar nosso trabalho e vamos dar um tapa no rodapé. Se formos até o fim, acaba e diz todo o tema OceanWP do Nick. Nós vamos nos livrar disso. Vamos voltar e vamos voltar novamente e, em seguida, apenas ir para o rodapé inferior e, em seguida, o que vamos fazer é apenas desmarcar o rodapé habilitado. Vamos nos livrar dessa coisa toda juntos e lá vamos nós. Volte e, em seguida, vamos para Rodapé Widgets e é aqui que vamos adicionar o nosso modelo que eu lhe dei. Se você acessar Selecionar modelo, verá que não há nada lá. O que diabos? Onde está o nosso modelo? Nós importamos. Bem, você precisa adicioná-lo à versão Minha Biblioteca do Painel de Temas. Um pouco confuso. Vou te mostrar do que estou falando. Basta clicar em “Publicar” se você ainda não fez, e, em seguida, clique no “X” e, em seguida, voltar para o Dashboard e, em seguida, você verá esta pequena roda que diz Painel Tema e se você não instalou Ocean Extra no início como fizemos, então você não verá isso. Certifique-se de que está instalado e, em seguida, aceda a A Minha Biblioteca e, em seguida, aceda a Adicionar Novo. Vamos chamar esse rodapé, depois ir para Template e vamos fazer Elementor Full Width, como fizemos na primeira vez. Em seguida, clique em “Publicar” e, em seguida, vamos para Editar com Elementor. O que estamos fazendo é apenas construir uma página separada apenas para o nosso rodapé. Então vamos colocar isso na nossa página principal. Primeiro, basta ir até esta pequena pasta e já importamos esse modelo mais cedo. Podemos simplesmente ir até Meus modelos e, em seguida, você verá o rodapé que colocamos anteriormente. Basta clicar em “Inserir” e dizer “Sim” queremos colocar em todas as configurações de documentos, e boom, lá está o nosso Rodapé. Se ele mudar de volta para este layout caixa, novamente, basta ir para Layout de página e, em seguida, ir para Elementor Full Width. Em seguida, clique em “Atualizar”. Agora, que é largura total, podemos editar isso da maneira que quisermos. O que podemos fazer é clicar neste pequeno botão aqui e mudar isto para o seu nome, se quiser. Está definido para o meu. Você também pode alterar esses botões. Se formos para este widget, clique com o botão direito do mouse em “Editar ícones sociais”. Você pode mudar isso para o seu. Atualmente tenho eles como meu YouTube, Facebook e Instagram. Então, antes de sairmos, este botão de volta ao topo, vamos apenas clicar no botão “Editar”. Como você pode ver, eu tenho hashtag top. Este será um botão de salto que vai voltar para o topo. Vamos voltar ao nosso site principal e adicionar este rodapé. Vamos clicar em “Atualizar” e, em seguida, até este pequeno hambúrguer e, em seguida, clicar em “Sair para Dashboard”. Então vamos voltar ao nosso site principal novamente. Clique em “Personalizar”, então vamos rolar todo o caminho até o fundo novamente para que possamos ver nosso Rodapé. Vamos voltar para Rodapé Widgets e, em seguida, ir para Select Template novamente e você deve vê-lo lá e basta clicar em “Rodapé”. Agora, nosso rodapé está lá, mas parece um pouco estranho. Vamos consertar isso. Em primeiro lugar, nosso estofamento, vamos apenas ter certeza de que está definido para zero todo o caminho ao redor. Isso vai apertar um pouco as coisas. Em seguida, para se livrar deste ponto no lado, vamos apenas clicar no “Adicionar recipiente” para se livrar do recipiente invisível em torno dele. Agora é um rodapé de largura total. Agora podemos testar todos esses links, se quisermos. Vamos certificar-nos de que este botão funciona, o que funciona. Se você não excluiu esta seção principal aqui para criar o seu próprio, eu já tinha com um ID de classe chamado Top. Vou te mostrar o que quero dizer. Vamos abrir isto e eu vou clicar em “Publicar”, salvar o nosso trabalho e vamos acertar o “X”. Vamos para “Editar com Elementor”. O que podemos fazer é clicar com o botão direito nesta seção, ir para Editar seção, guia Avançado na parte superior e você pode ver ID Classe diz “topo”. Sempre que apertamos nosso botão na parte inferior e nosso rodapé, ele vai saltar para o topo. Desde que não tenha apagado isso, já deve ser assim. 8. Passo #7: edite para celular: Agora, o passo sete é editar para dispositivos móveis. Então, 52% do tráfego online global vem de um dispositivo móvel, então mais pessoas estão na Internet em seus telefones do que em desktops, um pouco mais. Então, é muito, muito importante que editemos este site para dispositivos móveis também. Queremos que ele seja responsivo para telefones e tablets. Então o que vamos fazer é abrir isso de volta, e vamos apenas certificar-nos de que tudo está bem no celular. Então, basta ir até este pequeno símbolo Desktop Computer e, em seguida, clique em Mobile. Então agora podemos olhar para ele, podemos rolar todo o caminho para baixo. Isto está parecendo muito bom. Se você quiser tornar este texto menor, você pode. Então você pode apenas clicar sobre isso, e então se você for para Estilo, vá para Tipografia. Então você pode ver esses pequenos símbolos. Se você estiver no modo Desktop, esta será uma configuração diferente da que está no dispositivo móvel. Por isso, se quiseres, podes mudar isso para o que quiseres. Vamos colocar em 50. Portanto, o que quer que você faça em uma configuração não será alterado em outra. Então vamos continuar rolando para baixo e ter certeza de que tudo está bom. Ignore esta pequena caixa aqui, ninguém pode realmente ver isso. E isso está parecendo muito bom. Então nosso botão está um pouco desligado aqui. Se quisermos, podemos clicar nisso e mudar o alinhamento para a esquerda, então é meio que em linha. Legal. Então vamos continuar indo para baixo, ter certeza de que tudo parece bom, o que parece. Olhando bem, parecendo bem. Nada parece estranho. Se você queria, se algo parece meio estranho, talvez seja muito largo, está ocupando muito espaço, o que você pode fazer é clicar com o botão direito do mouse nessa seção, ir para Avançado e dar um pouco de preenchimento. Então isso vai amortecer as coisas em um pouco, assim. Então eu dei um total de 15 na parte superior e inferior. Digamos que eu queira um pouco de espaço extra aqui, eu posso desmarcar este pequeno link, e abaixo do topo, eu posso dar-lhe, digamos mais como um 30. Vou dar ao fundo um 30, modo que dá um pouco mais de espaço no topo e no fundo. É assim que funciona, caso precise consertar algo. Então vamos continuar a descer. Tudo parece bom. Incrível. Então, agora vamos nos certificar de que tudo fique bem no tablet. Então vá para o Tablet. Então vamos checar duas vezes. Tudo está parecendo muito bem. Honestamente, acho que está tudo bem. Então, vamos voltar ao Desktop. E antes que eu esqueça, vamos voltar para a seção Sobre mim e vamos nos certificar de que clique com o botão direito do mouse, seção Editar, ir para Avançado e, em seguida, ir para ID de classe e vamos dizer, “sobre”, porque queríamos que esse botão no na parte superior, então clique em Atualizar. Queríamos que o botão na parte superior fosse para a nossa página Sobre. Então vamos nos certificar de que funciona. Certifique-se de clicar em Atualizar e, em seguida, desça para Pré-visualizar alterações, e agora estamos em nosso site. Então, se clicarmos em Sobre Mim, ele vai para nossa seção Sobre Mim, o que é ótimo. 9. Passo 8: publique seu site!: Oi caras. Então, por último, mas não menos importante, o passo número oito é publicar seu site. Vamos voltar para o painel e, em seguida, a partir daqui, na parte superior, você verá que seu site está exibindo uma página em breve. Quando estiver pronto para iniciar, clique aqui. Vamos apenas ir em frente e clicar aqui. Então foi assim que se criou um site pessoal. Espero que tenham gostado desta aula. Se você quiser mais livre, e dicas do site impressionantes e tutoriais, então por favor siga-me no compartilhamento de habilidades e check-out minha página do professor para mais aulas. Além disso, avaliações e críticas vão muito longe para mim como instrutor. Mas se você optar por não deixar um, tudo bem. Obrigado por assistir criar um site pro e eu vou ver vocês no próximo vídeo.