Como Criar um SITE DE PORTFÓLIO com WordPress Elementor Grátis

Nesse vídeo você vai aprender todo o passo a passo de como criar um site de portfólio profissional do absoluto zero mesmo que você nunca tenha criado um site antes e pode ficar tranquilo que para isso não vamos utilizar nada de programação nem vamos gastar rios de dinheiro vamos utilizar apenas ferramentas gratuitas e acessíveis que são WordPress e o elementor e eu tenho certeza que nem curso pago ensina tudo Que eu vou te passar nessa aula aqui e de graça então fica comigo até o final porque vai valer a pena e antes da gente começar eu

tenho certeza que essa aula vai te ajudar muito então a única coisa que eu peço de você é que você deixe o like no vídeo porque isso também me ajuda muito e assim você retribui esse conteúdo gratuito aqui no YouTube beleza e também já se inscreve no canal caso você ainda não seja inscrito sem Muita enrolação vamos lá então para o nosso Passo a [Música] passo beleza pessoal vamos lá então já estou aqui com o site pronto e na sequência já vou mostrar o passo a passo aí do zero de como criar esse site aqui

antes disso eu tenho algumas observações zinhas aqui bem rápidas eu peço que você não pule essa etapa tá porque é muito importante pra gente se entender né para você entender exatamente o que que eu vou te ensinar aqui enfim para ninguém Ficar aí perdido tá só V aumentar um pouquinho aqui então como criar um site basicamente quando a gente fala de criar um site eu considero que três passos fundamentais tá isso aqui pessoal independente do site tá Independente se for um site de portfólio né que é o site que a gente vai criar ou se

for uma loja virtual ou um site mais institucional uma página de vendas enfim para criar qualquer tipo de site basicamente você vai seguir né esses três passos aqui o Nosso primeiro passo é configurar domínio e hospedagem o que que seria o domínio o domínio ele seria aí o seu endereço online então por exemplo eu tenho lá o meu domínio né aprendendos sites.com E você também vai ter aí o seu domínio com o seu nome pon com ou o nome da sua empresa P com o nome do seu projeto P com e também a gente vai

precisar de uma hospedagem Tá o que que seria a hospedagem a hospedagem vai ser basicamente aí o servidor né o local da Internet aonde o seu site vai ficar armazenado né Porque você pensa que na internet existem milhares de sites e cada site tá armazenado aí em um servidor tá então hospedagem é basicamente isso domínio é endereço e hospedagem é o servidor sem muito mistério aí o segundo passo Então dentro dessa hospedagem a gente vai fazer a instalação do WordPress WordPress hoje em dia aí é a plataforma de criação de sites mais usadas mais usada

no mundo Então cara praticamente 50% quase de todos os sites que existem utilizam WordPress então por isso que eu vou te ensinar como utilizar WordPress né como fazer todo o seu site através do WordPress porque através do WordPress também a gente a gente não vai precisar utilizar nada de programação enfim a gente não vai utilizar nenhuma linguagem complexa vai ser tudo muito fácil tudo de uma forma muito intuitiva beleza e o terceiro passo Então dentro do WordPress A gente tem inúmeras possibilidades nesse caso aqui eu vou instalar um plugin chamado elementor e o elementor ele

é um page builder ele é um construtor de sites de páginas tá e através do elemento que a gente vai criar o nosso site aí 100% personalizado do nosso jeito tá então basicamente são esses três passos aqui que eu vou ensinar na sequência e aqui também eu separei algumas observações bem importantes aqui sem Muita enrolação já Vou abrir aqui ó a primeira é que você não precisa ter experiência para seguir este tutorial Deixa eu voltar mais para cá e se for necessário Veja a aula mais de uma vez tá E por que que eu falo

isso porque se você vai criar um site pela primeira vez muitas vezes aí você pode ficar perdido ou enfim com medo de fazer algo errado então eu recomendo fortemente que se você tá com esse medo você veja essa aula aqui vai dar enfim mais de uma hora De aula aí mas veja a aula até o final para você entender como que as ferramentas funcionam enfim para você se sentir mais confortável beleza E daí depois na segunda vez que você ver o tutorial aí sim você vai pausando e vai fazendo aí tudo do seu jeito Beleza

segunda observação é que todo o conteúdo do que eu vou utilizar nesse site Ele É fictício de modo que ele pode ser adaptado a qualquer nicho então aqui no meu caso ó eu criei um site de portfólio Aí enfim como se fosse para uma agência de marketing digital de de criação de sites tá Porém isso aqui você vai conseguir adaptar ao seu nicho no caso aqui ó eu coloquei alguns sites aqui que eu mesmo criei ó como portfólio né Afinal o objetivo do portfólio é de alguma forma apresentar o teu trabalho e aqui tem mais

algumas observações enfim algumas algumas informações aqui tem um depoimento aqui você pode colocar logotipos de clientes aqui uma chamada Para ação no fim enfim é um site bem compacto né bem simples porém direto ao ponto que é ser um site profissional e mostrar aí o teu trabalho então esse site vai servir Tanto para você que trabalha com Web Designer com criação de sites assim como eu também vai servir para você que talvez seja fotógrafo para você que seja que é designer para você que trabalha com identidade visual para você que é social mídia enfim ou

qualquer outra profissão aí né o Objetivo é mostrar o teu trabalho tá independente da do nicho tá pode ser que ah você tenha uma uma Confeitaria Aí você faz doce tá você consegue fazer usar esse site aqui normal né Afinal o objetivo é o quê é mostrar o teu trabalho através desse portfólio apresentar o teu trabalho né e de claro que você vai pegar tudo que eu vou ensinar aqui na aula e você vai adaptar aí a sua necessidade tá então aqui você vai trocar essa imagem aqui de fundo Você vai colocar o seu logotipo

você vai colocar os seus textos você vai colocar suas cores nesse caso aqui tô usando um preto e esse tom de roxo aqui né as letras brancas Mas aí você vai fazer tudo do seu jeito vai colocar as suas imagens e pode adicionar mais informações aí porque você vai pegar bem a ideia de como que funciona como que cria um site e através dessa aula você não vai aprender apenas a criar um site de portfólio Mas você vai conseguir Fazer qualquer outro tipo de site depois tá então você vai pegar bem a ideia e vai

aprender beleza vamos pra próxima observação aqui ã terceira observação siga o passo a passo exatamente como eu mostro eu falo isso porque tem algumas pessoas aí que às vezes eh iniciam o passo a passo lá na metade enfim não fazem o passo a passo ali exatamente como eu mostro daí acaba que dá erro dá alguma coisinha errada então para você aí se certificar né que vai dar tudo Certinho siga exatamente igual mostro que não vai ter erro beleza quarta observação aqui é o único custo que teremos será de hospedagem Deixa eu voltar aqui em cima

nesses três passos né aqui eu falei então que a gente precisa configurar um domínio uma hospedagem dentro dessa pedagem a gente precisa instalar WordPress e dentro do WordPress a gente precisa instalar o elementor tá na sequência aqui eu vou mostrar para você como que a gente faz Para conseguir um domínio grátis Um Domínio totalmente grátis personalizado aí com o seu nome seja P com ou.com.br enfim eu vou ensinar também como que a gente vai usar WordPress gratuito tá detalhe que tanto o domínio ele é pago tá WordPress também tem a versão paga e aqui o

elementor também tem a versão paga porém eu vou te ensinar você como que você faz para conseguir tudo isso aqui de graça tá domínio grátis WordPress grátis e também o elementor Grátis A gente só vai pagar mesmo a hospedagem Que cara é um custo básico assim tá para você ter aí o seu site online é um custo que você vai pagar ou mensal ou a maioria das pessoas paga uma vez ao ano né então você paga agora e só vai pagar daqui um ano e é um custo bem de boa aí enfim bem tranquilo né

levando em consideração que você vai ter um site totalmente profissional um site online né E o principal é um site aí que que não vai cair né um site rápido né muitas Empresas aí fazem sites só que aí quando os os clientes vão acessar o site o site demora muito para carregar ou o site não abre o site tá fora do ar então a gente quer evitar todo esse tipo de problema tá então A ideia é realmente te ensinar isso aqui da maneira mais profissional possível mais assertiva possível e ao mesmo tempo gastando o mínimo

possível beleza Bele então agora a gente já vai aqui para o nosso primeiro passo que é a configuração de domínio e hospedagem e Nesse momento então eu peço que você acesse o primeiro link da descrição do vídeo e é o link aqui da hostgator Então você clica aí no primeiro link da descrição e você vai cair nessa página aqui e a hostgator é uma empresa que eles oferecem tudo isso junto hospedagem domínio tudo que eu falei aqui ó deixa eu aumentar um pouquinho aqui ó ã domínio hospedagem WordPress e elementor eles oferecem tudo isso aqui

junto para você aí com enfim poucos cliques sem Muita enrolação tá Então como que funciona você vai acessar o link da descrição vai ter um desconto exclusivo para você no momento da gravação desse vídeo eles estão aqui com 70% né até 70% de desconto porém dependendo da época que você veja esse vídeo sei lá você pode ver daqui um ano daqui do anos pode ser que esse desconto mude tá pessoal porém através desse meu link você sempre vai garantir o máximo de desconto possível na contrata de hospedagem e Vindo mais para baixo aqui eles sempre

vão ter alguns planos de hospedagem no momento que eu tô gravando a gente tem aqui o plano start plano P plano m e plano Turbo diferença básica entre esses planos é a seguinte no plano start e no plano p é para você que quer hospedar apenas um domínio ou seja um site no meu caso Ah eu quero só o site aí aprendend site.com beleza posso escolher isso aqui o plano m e o plano turbo já é para você você que quer hospedar mais sites por Exemplo ah você tem ali aprendendos sites.com mas aí depois você

vai querer colocar lá ã minha lojavirtual.com entendeu Você vai querer adicionar mais sites depois aí é interessante você já escolher aqui o plano m ou até mesmo o plano Turbo plano Turbo ele segue essa lógica aí você consegue hospedar sites e domínios ilimitados porém o plano Turbo né Como o próprio nome já diz ele tem mais performance né então se você vai fazer Um site principalmente para anunciar talvez aí na nas redes sociais e tal enfim um site que você sabe que vai ter grande volume de tráfego é interessante você já contratar o plano turbo

tá vale muito a pena e você pode estar contratando sem medo daí claro que aqui tem vários comparativos enfim eu não vou ler tudo aqui mas aí você pode ler com calma e ver qual deles que vai fazer sentido para você tá qualquer um desses planos aqui a gente consegue seguir aí Com a instalação do WordPress e criar o nosso site Ok vindo mais para baixo aqui você pode estar acompanhando todas as informações aqui da hostgator e uma das coisas que eu mais gosto da Host gator deixa eu ver mais embaixo é a questão do

suporte tá então se você tiver qualquer problema ou qualquer erro aí na sua hospedagem eles TM um chat online ali que funciona 24 horas por dia 7 dias por semana e são pessoas reais que estão ali para te auxiliar para tirar as suas Dúvidas Beleza então isso aqui é um grande ponto positivo para a host gator então por isso que eu recomendo muito a host gator né Principalmente para quem vai começar nessa área aí para quem vai criar um site pode ser muito desafiador a pessoa pode encontrar aí algum alguns problemas né porém eles TM

tudo aqui que você precisa né Inclusive tem o blog aqui com várias dicas aí e tal então vale muito a pena você contratar A hostgator tá eu vou vir até em cima aqui Nesse caso aqui ó Eu vou contratar o plano m tá porque eu acho que ele é o que mais vale a pena aqui desses planos seria o plano m é um bom custo benefício e você consegue adicionar mais domínios depois ó vou clicar aqui em começar agora esse próximo passo aqui você vai escolher o ciclo de pagamento então 3 anos 1 ano se

meses ou um mês que que isso quer dizer quer dizer que se você selecionar por exemplo 3 anos aqui você vai pagar a sua hospedagem agora e você Só vai pagar daqui a 3 anos novamente tá então se você tem um projeto mais a longo prazo já pode escolher 3 anos tranquilamente o mínimo que eu recomendo aqui é você colocar um ano porque daí você ganha um domínio grátis aqui em seis meses e um mês você não ganha o domínio grátis então acaba que sai mais caro aí para você tá contratando separado o domínio então

você escolhe um ano aqui e você vai ter tudo que você precisa hospedagem o seu domínio grátis Né E todas as ferramentas aí para você criar o seu site Então você deixar selecionado um ano e de Claro você seleciona o que mais faz sentido para você nessa próxima etapa aqui primeira coisa que a gente vai fazer é registrar o nosso domínio eu vou colocar só como exemplo aqui site do Rodrigo assim www.sit do Rodrigo e daí eu vou escolher uma extensão comom.com.br vou deixar P com que é a mais usada no mundo vou Clicar na

lupinha para ver se esse domínio tá disponível e você repete o mesmo processo aí com o seu domínio e beleza domínio disponível ou seja se eu quisesse registrar agora esse domínio site do rodrigo.com ele estaria disponível para mim registrar Beleza Aqui tem essa opção de você usar um domínio que já tem eu recomendo que assim mesmo que você já tenha um domínio registrado o que que acontece muito Às vezes a pessoaa já tem um domínio lá no No registro br né um um domínio brasileiro que acaba em pcom.br e eu recomendo você registrar mesmo assim

um novo domínio para você ficar com dois domínios por exemplo vamos supor que eu já tenha lá registrado o site do rodrigo.com.br aqui já que é grátis eu vou registrar também o site do rodrigo.com para mim ficar com dois domínios justamente para não acontecer de vir outra pessoa aí e acabar roubando o meu domínio né ficar com um domínio Parecido igual o meu tá então muito cuidado com isso também Beleza vou clicar aqui em adicionar domínio aqui tem essa proteção de domínio que vai basicamente proteger sua identidade Enfim vou deixar ativado aqui aqui tem todas

as informações do Plano Tem a parte aqui do e-mail né então quando você contrata hostgator você ganha um e-mail aí contas de e-mail ilimitadas de até 1 GB cada com e-mail personalizado grátis né que que seria Esse e-mail seria lá o contato @ seudominio.com suporte @seed domino.com financeiro @seed domino.com enfim esses e-mails profissionais aí que enfim passa muita mais credibilidade tá se você quiser contratar mais gigas aqui você pode estar escolhendo essa opção aqui e contratando aí separado beleza e aqui tem algumas outras opções adicionais e claro que isso vai enfim da necessidade de cada

um do gosto de cada um então Você pode estar lendo aqui se fizer sentido para você contrata senão não precisa tá vou clicar aqui em continuar para identificação nesse próximo passo agora você vai estar criando uma conta aqui na hostgator você vai colocar seu e-mail vai criar uma senha e vai concordar aqui com os t teros e política e tal então você pode estar lendo aqui essas páginas e concordando tá na próxima etapa também a hostgator vai pedir alguns dados seus né então vai Pedir ou seu CPF ou seu CNPJ enfim seu telefone celular esses

dados padrões aí para conseguir finalizar o cadastro e daí você vai fazer o pagamento aqui nessa etapa três onde eu tô com o meu mouse você vai estar fazendo o pagamento Eu recomendo aí você pagar por por cartão de crédito ou até mesmo pix porque daí libera já na hora tá e etapa quatro aqui é a confirmação então o e-mail que você cadastrar aqui você vai est recebendo vários e-mails aí na sua Caixa de entrada dizendo que deu tudo certo dando as boas-vindas e tal e daí não tem muito mistério beleza feito isso você vai

vir aqui no site principal da hostgator ó hostgator.com.br pode ver que aqui o desconto tá até 55% lá através do meu link tava 70% aqui você vai encontrar pelo portal do cliente aqui ó Portal hostgator para você acessar a sua conta daí você vai cair nessa telinha de login aqui você vai colocar seu e-mail a sua senha vai Confirmar que não é um robô e vai clicar em entrar e aqui então a gente vai est no portal do cliente nesse caso aqui eu tenho esse domínio canal aprendendos sites.com e eu tenho o plano M esse

esse aqui é um domínio só de testes tá pessoal que eu utilizo aqui para as aulas do canal beleza e É nesse domínio aqui que eu vou criar então o site Então nesse momento olha só a gente já tem domínio e Hospedagem agora vamos partir para o segundo passo que é instalar WordPress dentro dessa hospedagem que é bem simples também para isso então aqui no no portal do cliente né até eu esqueci de falar aqui você pode fazer toda a gestão aí da da sua hospedagem né então tem a aba aqui de e-mails que você

consegue criar mais e-mails aqui aba de domínios que você consegue contratar mais domínios hospedagens que você consegue fazer toda a gestão enfim tem Vários serviços aqui que você pode estar conferindo inclusive aba de cursos aqui que é muito interessante também tem o suporte aqui também para se você tiver qualquer problema tá você clica aí no suporte você fala direto aí com eles eles Enfim no geral resolvem bem rápido a as situações então é bem tranquilo tá aqui faturas e assinaturas você também consegue fazer a gestão aí os pagamentos e no geral é isso tá não

tem muito mistério aqui é tudo bem intuitivo é bem Simples aqui de você se encontrar beleza aqui ó você vai achar pela opção de cpanel tá geralmente vai estar do lado aqui do seu domínio Então você clica aqui para abrir o cpanel o que que é o cpanel cpanel é isso aqui cpanel é um software de gestão de hospedagem não precisa você se preocupar aqui com esse monte de informações aqui enfim tem alguns termos bem parecem né ser bem complexos e tal enfim a gente quase não vai usar isso aqui tá o CPN a gente

só Vai usar aqui pra gente instalar WordPress então aqui no CPN você vem até embaixo Aqui você vai procurar pela opção de WordPress ó aqui tem várias outras ferramentas né obviamente a gente vai utilizar o WordPress que é a ferramenta mais usada do mundo vou clicar aqui no WordPress e aqui no WordPress eu vou vir mais para baixo aqui e vou selecionar essa opção de instale agora nesse momento aqui eu vou selecionar o meu domínio então o domínio Que tá lá no meu portal do cliente né que é o canala aprendendos sites.com detalhe que se

você H enfim contratar ali uma hospedagem com mais domínios e tal você vai aparecer os domínios aqui né vão aparecer todos os domínios aí que você tem Inclusive eu tenho vídeo aqui no canal que eu ensino como adicionar novo domínio na hostgator vou est deixando o link desse vídeo na descrição se você quiser consultar ele aí posteriormente tá aqui eu recomendo você Deixar padrão https aqui diretório vazio e a versão do WordPress a última versão que que acontece aqui se você acabou de registrar o domínio há poucos minutos atrás Pode ser que dê uma mensagenzinha

vermelha aqui dizendo que não foi encontrado Um certificado SSL e tal isso é normal porque o domínio ele demora geralmente alguns minutos ou algumas horas para propagar na internet então é normal ter alguma mensagenzinha aqui mas você pode ignorar essa mensagem beleza Aqui você vai dar um nome pro seu site Vou colocar aqui só como exemplo portfólio mesmo e a descrição Vou colocar aqui aprendendo sites ó deixar assim daí você dá um nome aí enfim pro seu projeto uma descrição simples aqui essa parte aqui de com do administrador é muito importante tá são através desses

dados aqui que a gente vai fazer login no painel do WordPress aí você repara que WordPress ele é diferente da hospedagem tá a hospedagem Ali o portal do cliente era onde a gente estava antes da hostgator e agora aqui no WordPress é a ferramenta que a gente vai criar então o nosso site então aqui que que eu recomendo coloca aqui um usuário de administrador se você quiser pode deixar de mim ou coloca seu nome mesmo aqui na senha eu vou esconder aqui vou gerar uma nova senha coloque alguma senha aí que você vai lembrar e

aqui no e-mail do administrador aqui já vai vir por padrão esse admin @ o seu domínio Eu Recomendo que nesse caso você utilize um e-mail aqui que você tenha acesso né que você utiliza no seu dia a dia Como por exemplo o seu Gmail ou enfim outra conta de e-mail aí porque se acontecer de você esquecer a senha e tal você consegue recuperar facilmente através do seu e-mail Beleza eu vou deixar padrão mesmo assim porque é só pra aula vou vir mais embaixo aqui e de idoma vou deixar português brasileiro mas você pode deixar inglês

ou o idioma que você Quiser aqui nos plugins eu vou deixar todos eles desativados eu não vou deixar nada ativado aqui porque eu vou configurar junto com você lá feito isso a gente vai clicar em instalar e agora vamos aguardar aqui o processo de instalação demora apenas alguns segundos é bem rapidinho e beleza vai aparecer assim então ferramenta instalada com sucesso e você vai estar clicando nesse segundo link aqui ó no meu caso canal aprend sites.com bar WP tracinho admin Eu também recomendo que o você pega esse link e você salve ele aí no seu

Bloco de Notas ou nos seus favoritos porque é através desse link que você sempre vai acessar o painel do WordPress ó aqui eu coloquei o link e aqui já pedi Então o meu usuário e a minha senha tá abri aqui numa guia anônima só para mostrar e sempre vai abrir assim para você quando você acessar WordPress nesse caso aqui como eu já tô dentro da hospedagem quando eu clicar aqui já vai abrir Direto o painel do WordPress ó vou clicar tá aqui o nosso painel então do Wordpress e agora vamos voltar aqui a gente já

tem domínio hospedagem a gente já tem WordPress e agora a gente vai criar então o nosso site com o elementor tá antes de começar com a criação do site aqui só vou fazer algumas configurações importantes no nosso ã site tá vou vir aqui plugins no nosso WordPress aliás né vou vir em plugins instalados aqui aqui eu vou desativar Todos os plugins que tiverem aqui tá pessoal vou deixar tudo desativado vou clicar aqui ações em massa excluir vou excluir todos esses plugins porque eu vou utilizar só o elementor tá vou clicar em adicionar plugin você repete

esse mesmo processo aí vamos pesquisar aqui por elementor e tá aqui o elementor então o elementor como eu falei ele é um page builder né um construtor de páginas aqui dentro do WordPress a gente tem vários Plugins né que enfim tem essa mesma proposta de construir páginas e tal só que o elemento de longe ele é o melhor de todos ele é o mais fá da gente meendo mais usado né tanto que tem mais de 10 milhões de instalações ativas Então você vai instalar o plugin aí do elementor Plugin instalado Você vai clicar em ativar

assim que você clicar em ativar Talvez ele vai direcionar aqui para uma telinha pedindo para você atualizar ou criar Conta não precisa você fazer isso tá é só você clicar aqui no x e voltando aqui em plugins ó plugins plugins instalados aqui então o Element princípio o único plugin que a gente vai usar vai ser o elementor qual que é a dinâmica aqui dos plugins como você viu ali tem vários plugins cada plugin serve para uma coisa por exemplo Ah você quer colocar um um formulário de contato né pode ver que esse esse site de

portfólio que eu fiz ele não tem formulário de Contato né que é aquele formulário lá que a pessoa coloca o nome o e-mail o telefone ele não tem tá se você quiser colocar um formulário de contato você vai adicionar um plugin específico para isso Inclusive eu tenho aula aqui no canal onde eu ensina como inserir formulário de contato coisa rápida e 5 10 minutos você faz essa aula também vai estar aí na descrição para você ver posteriormente e tem muitas outras aulas também ensinando a como instalar botão Do WhatsApp a como instalar o Pixel do

Facebook a como colocar as tags do Google então WordPress é bem legal porque ele é bem completo você enfim tem uma infinidade de opções você consegue fazer Praticamente tudo aqui dentro do WordPress tá e muitas vezes você vai precisar instalar né adicionar plugins para fazer funções específicas entendido então eu vou est deixando aí na descrição todas as aulas complementares aí para você tá ã conferindo depois mas Eu vou nessa aula aqui eu vou entregar o que eu prometi né que é esse site aqui ó para criar todo esse site a gente vai fazer ele apenas

utilizando o elementor tá detalhe que o elementor aqui várias vezes talvez pode aparecer para você atualizar pro elementor pro e tal não tem necessidade tá a gente faz tudo aqui com o gratuito mesmo ok vou vir aqui em aparência temas tema o tema ele basicamente é a aparência aí do site que que eu vou fazer aqui eu vou vir aqui em Adicionar novo tema e eu vou instalar esse tema aqui Hello elementor se não aparecer você vem aqui em procurar temas e digita Hello elementor desse jeito assim tá aqui ó vou clicar esse tema aqui

por que que a gente vai instalar esse tema porque esse tema ele é desenvolvido pela própria equipe do elementor Então a gente vai ter aí um um tema né compatível com o plugin e o máximo de aproveitamento possível vou clicar em instalar esse Tema e vou clicar em ativar esse tema beleza ó vou clicar aqui em visitar site ó o nosso site ele tá assim ele tá totalmente em branco tá agora então que a gente vai começar a fazer aqui de fato o nosso site vou voltar aqui em temas esses outros temas aqui se você

quiser você pode estar excluindo eles porque a gente não vai precisar desses temas Ok então aparência tema Hell elementor e aqui nos plugins o elementor instalado Ah eu posso usar outro tema cara você Pode usar outro tema sim né Isso serve até para você que já tem Talvez um site WordPress e tá usando outro tema porém o elementor ele é o mais indicado Beleza vou vir aqui também em páginas todas as páginas aqui vem algumas páginas por padrão ó vem essa página de exemplo aqui ó aqui é só um exemplo mesmo texto eu vou excluir

todas essas páginas aqui todas não né só essas duas aqui ó V mover pra lixeira e vou aplicar beleza agora sim eu vou adicionar uma nova Página o nosso site ele não tem nenhuma página eu vou adicionar e aqui então eu vou dar um nome para essa minha página Vou colocar aqui ã minha página só como exemplo mas aí você coloca aí o nome da sua empresa o nome do seu projeto enfim como você quiser e a gente vai clicar aqui em editar com elementor e agora sim vai abrir o editor do elementor e a

gente vai conseguir criar aí o nosso portfólio de uma maneira bem intuitiva aqui ó tudo Que abri aqui de notificações e tal você pode estar ã fechando e esse aqui então é o editor do elemento num detalhe que de tempo em tempo isso aqui pode atualizar pode mudar né então se você vê esse vídeo daqui 1 ano 2is anos pode ser que alguma coisa esteja diferente né Por exemplo até um mês e pouquinho atrás esse botãozinho aqui de publicar ele era aqui embaixo ó que eu não tou com o meu mouse daí mudou ele foi

aqui para cima né algumas outras configurações também Né tipo essa engrenagenzinha era aqui embaixo agora mudou para cima então pode ser que vai mudando aí de tempo em tempo porém a dinâmica aqui a lógica vai ser a mesma Beleza então eu peço aí a sua paciência né se você ver esse vídeo no futuro e tiver alguma coisa diferente então você consegue fazer o tutorial aqui seguir o passo a passo normalmente tá porém Talvez algumas algumas posições dos botões e tal estejam em locais diferentes beleza mas o tutorial você Consegue seguir tranquilamente primeira configuração aqui dentro

do elemento a gente vai clicar nessa engrenagem das configurações Então você vai Localizar onde tá a gente vai vir aqui em layout da página e a gente vai colocar tela do elementor Ó vou clicar aqui e pode ver que já mudou agora tá tudo em branco e agora sim a gente vai conseguir fazer o nosso site aqui nessa tela em branco 100% personalizado do nosso jeito tá bom E aqui então não tem muito mistério ó a Gente vê que a gente tem esse maizinho aqui e aqui nesse painel esquerdo Ó tem vários elementos título imagem

texto vídeo botão divisor espaçador Google Maps ícone então a gente vê que não tem muito mistério né basicamente a gente vai pegar os elementos e vai arrastar para cá e vai estar criando o nosso site eu só vou fechar essas outras guias aqui para ficar mais organizado beleza bom tá aqui então isso aqui eu vou fechar também eu vou deixar aberto Aqui nessa guia ó o o site de portfólio Que Eu Já criei e eu vou criar outro igual aqui ou pelo menos o mais parecido possível beleza uma coisa também que eu esqueci de falar

eu deixei separado aqui no meu computador as imagens que eu vou utilizar Então aí nesse site Então deixei aqui por exemplo esse logotipo ó esse aqui é um logotipo tipo que eu só fui lá no canva e peguei pronto e salvei tá ele tá em png com fundo transparente Então você Pega o seu logotipo também da maneira que você quiser aqui tem algumas imagens ó são imagens que eu vou utilizar aí ao longo do site só para ilustrar beleza essas imagens aqui ó são as imagens aí de alguns projetos que eu fiz aí de alguns

projetos de sites que eu vou est utilizando também né para apresentar o meu trabalho você também salva aí suas imagens e projetos e tal Quando eu fizer um envio aqui de cada imagem eu vou est mostrando também o tamanho das imagens Separei aqui eh esses logotipos de de clientes ó que basicamente São ã esses aqui ó esses logotipos E fictícios então é bem tranquilo você vai separar aí as suas imagens aqui eu separei esse arquivo aqui no bloco de notas que é a minha identidade visual né então eu vou utilizar aqui um tom de roxo

fraco que é esse código da cor aqui né que é basicamente esse roxo aqui ó que a gente tá vendo aqui vou utilizar também um tom de de roxo forte que é Esse código aqui que a gente vai utilizar aqui vou utilizar o cinza né o nosso fundo aqui no nosso site Ele parece que ele tá preto mas na verdade é um pouquinho cinza e vou utilizar também o branco Então essas aqui são as cores que eu vou utilizar as cores da da identidade visual no caso desse site aí que eu vou criar beleza e

a fonte vai ser a fonte monerat e agora o que que eu vou fazer faz então eu vou vir aqui no elementor eu vou clicar aqui em Configurar aliás eu vou publicar aqui primeiro vou clicar aqui em configurações do site cores globais eu vou vir aqui em adicionar cor e aqui simplesmente eu vou colocar as cores da minha identidade visual ó vou dar um copiar aqui ó vou colocar esse Tonzinho de roxo e você repete esse processo copiar aqui esse outro tom de roxo esse cinza aqui e tô dando cont control c e cont control

V aqui tá Pessoal e o branco né que o branco padrão que a gente sempre vai usar ó Então são essas as cores que eu vou utilizar no meu projeto E caso você não tenha ainda uma paleta de cores definida caso você não saiba Quais cores você vai utilizar você pode estar seguindo o tutorial sem adicionar essas cores tá só que daí você vai ter mais trabalho porque você vai colocar as cores aí tudo de forma manualmente Tá agora quando eu tiver criando aí no no processo criativo Você vai entender melhor do que eu tô

falando então eu recomendo que você coloque algumas cores aí mesmo que são cores talvez que você quer mudar depois você consegue vir aqui e alterar a cor ã depois tá vou voltar aqui Fontes globais minha fonte primária Vou colocar aqui um Monte Serrat que é uma fonte que eu acho que fica aqui ã de fácil leitura Deixa eu só ver o tamanho que eu tô utilizando aqui ó mones errado de tamanho 43 deixar um 42 assim peso 900 altura da Linha aqui vai ficar assim enfim são as minhas configurações tá você pode fazer as suas

aí ou até mesmo copiar as minhas então essa fonte aqui vai ser a fonto que vai aparecer em todos os títulos ó vai aparecer nesse título aqui ó nesse outro título agora eu vou definir a fonte que vão aparecer nos textos ó são esses textos aqui ó deixa eu pegar aqui aqui meu navegador ó é mon Serrat também ã normal tamanho 18 Então vamos pesquisar aqui mon Serrat Tamanho 18 deixa eu ver o peso aqui ã tá enfim seria isso aqui mais ou menos altura da Linha vou deixar aqui 1.4 também assim assim ó essa

aqui é a minha fonte primária então a fonte para os títulos né Essa extensão aqui pessoal é o wat Font tá uma extensão aqui do Google Chrome que serve para mostrar as cores aí dos Sites as cores da enfim das fontes aqui né o tamanho a fonte as cores aí de qualquer texto em qualquer site Ok e essa fonte secundária tá aqui Ó é a fonte dos textos são essas duas fontes que eu vou utilizar claro se você quiser você configura aí mais fontes e tal no geral eu vou fechar aqui primeira coisa que eu

vou fazer eu vou clicar aqui no maizinho vou selecionar essa opção aqui de flexbox vou selecionar essa estrutura aqui com dois contêiners tá daí eu vou clicar nesse primeiro contêiner aqui vou vir em estilo plano de fundo vou clicar aqui em clássico e aqui eu vou selecionar uma imagem para Mim colocar como plano de fundo Então posso vir aqui no meu computador e pegar essa imagem aqui ó essa imagem que eu vou utilizar sobre as imagens pessoal aqui essas imagens São toda todas as imagens aí que eu peguei de banco de imagens tá então tem

lá o se você pesquisar aí no Google vão aparecer vários bancos de imagens gratuitos que você pode est pegando imagens tá então é bem tranquilo tem por exemplo o freepick.com ou enfim outros bancos de Imagens vou até abrir aqui o free pick só para enfim ninguém ficar perdido Ó você pode vir aqui no Free pick e fazer uma pesquisa aqui por exemplo Ah você vai criar um portfólio aí para para enfim social mídia tá você vem aqui você pesquisa aí vamos colocar aqui social mídia só para ver o que que aparece ó você pode estar

pegando imagens aí aqui desse banco de imagem para utilizar aí nos seus projetos Claro que tem algumas que são Premium né você tem que pagar Mas tem várias gratuitas que você consegue usar ã tranquilamente Beleza então são todas imagens aqui de banco de imagens eu vou pegar essa imagem eu vou arrastar aqui pro meu WordPress e essa aqui ela vai ser a imagem de fundo aqui então do primeiro cont né da primeira sessão do nosso site ela tá nesse tamanho aqui ó vamos aumentar um pouco aqui ó 1920 por 1080 pixels ela está desse tamanho

então então você pode utilizar Imagens desse tamanho para colocar de fundo tá Ah você não sabe como colocar as imagens nesse tamanho você pode vir aqui ó no seu computador no pint mesmo tá uso Windows aqui ó posso pegar essa imagem abrir com pint vim aqui ó em dimensionar e colocar o tamanho ó no caso já tá aqui né mas poderia colocar 1920 e dar ok e salvar que ela ia puxar aí o a largura 1920 Beleza então você pode estar fazendo aí esse mesmo esquema selecionar Beleza ó resolução da imagem completo posição eu vou

deixar centro anexo não vou mexer repetir não repetir e tamanho de exibição cobertura agora vou vir aqui nesse container no layout e aqui você consegue regular a altura dele ó nesse caso aqui eu vou deixar Zerado aqui vou vir avançado vou zerar o preenchimento e vou colocar eu acho que uns 150 pixels superior e un 150 pixels inferior se não fica legal eu ajusto aí no decorrer da Aula tá A ideia é criar o site aí realmente junto com você inclusive até cometendo alguns erros tá pessoal e a gente vai ajustando junto e fazendo junto

ok vou vir aqui em layout aqui você vai conseguir regular a largura eu vou deixar aqui uns 1200 de largura Mas eu posso mudar isso aqui depois vou vir aqui no maizinho vou adicionar por exemplo um texto para cá ó adicione o texto do seu título aqui aqui eu já vou pegar esse texto que tá pronto Ó vou dar um cont Crol C aqui vou copiar ó vou vir aqui vou dar um cont control V tá aqui o título posso vir aqui em estilo cor do texto Ó ali aparece já as cores ó então eu

posso colocar as cores que eu já selecionei nesse caso colocar um branco aqui que dá mais contraste e a tipografia ó minha tipografia secundária e aqui a minha tipografia primária aqui eu vou deixar ele em maiúsculo assim e nesse caso aqui esse texto como ele é o primeiro aqui do site Ele tá num tamanho maior que os outros aqui ele tá no tamanho 70 então a mes coisa que eu vou fazer aqui ó tamanho 70 assim ainda aqui eu vou deixar uns 1300 essa largura vamos ver como que vai ficar melhor aqui tá pessoal E

esse contêiner aqui ó eu posso aumentar ele por exemplo ó posso deixar 70% e esse outro aqui uns 30% ó assim mais ou menos ainda não tá igual vamos ajustar aqui vou reduzir um pouquinho o tamanho da linha dear 1.2 assim esse Tamanho eu V deixar un 60 assim PR ele ficar em três linhas Mas claro que daí você faz aí do seu modo do seu jeito vou clicar aqui no maisin também e vou adicionar um título embaixo que é aqui ó vamos pegar aqui esse textinho isso aqui é tudo texto fictício tá pessoal só

para ilustrar mesmo como que funciona ó cor branca tipografia secundária Beleza vou colocar também aqui um botão ó Marcar reunião e esse gatilho Zinho Aqui mais clientes mais de 100 clientes satisfeitos Então vou vir aqui no maizinho vou arrastar um contêiner para cá assim vou clicar nesse contêiner linha horizontal vou vir no maizinho vou adicionar outro contêiner e vou pegar esse contêiner aqui vou duplicar ainda nesse primeiro contêiner vou vir avançado e vou zerar a As Margens preenchimento Aliás Tá vou vir aqui no maizinho vamos adicionar aqui um botão assim vou vir no maizinho e

vamos Adicionar um texto ó esse botão aí você personaliza como você quiser vou colocar aqui vamos ver como que tá aqui quero marcar uma reunião Quero marcar uma reunião e aqui o link daí enfim vai a critério de cada um né Ah você quer colocar o link pro WhatsApp você pode vir aqui e colocar assim ó w. me Barrinha aí o código do seu país o código do seu estado e os nove números aí do do telefone né Nem sei quantos que Eu botei aqui 1 2 3 4 5 6 7 8 9 Beleza o

usuário vai clicar aqui vai cair lá no WhatsApp ou também se você quiser colocar alguma outra ferramenta aí de enfim pro usuário tá agendando uma reunião Ou você quer colocar um link aqui para outra página enfim fica o seu critério beleza vamos ver aqui no ícone tem opção de calendário aqui essa aqui ó vou inserir ó o iconz inho aqui você regula o espaçamento do ícone a posição vou vir aqui em do estilo agora e vamos Personalizar Vou colocar aqui minha fonte secundária assim Porém Aqui eu vou aumentar um pouquinho o peso Vou deixar um

tamanho 16 assim aqui na cor do texto vai ficar branco e aqui o plano de fundo ó posso colocar um efeito degradê né então posso colocar aqui esse Tonzinho de roxo e aqui na segunda cor esse outro Tonzinho de roxo e aqui eu regulo o ângulo vou deixar por exemplo aqui 90º ó daí fica assim e daí aqui quando o usuário passa o mouse eu Posso configurar cores diferentes posso vir aqui em plano de fundo colocar um degradê também Gradiente né só que aqui ó eu coloco primeiro ess essa cor mais forte e aqui depois

essa cor mais mais fraca e aqui no ângulo vou deixar em 90 e daí fica assim ó ó usário passa o mouse dá esse efeito aqui né claro isso se você quiser né sen não você deixa só uma cor ou deixa sem o efeito vindo mais para baixo aqui tem algumas animações também quando o usuário passa o mouse Enfim isso vai de cada um aqui em raio da borda eu deixei redondinho lá vou colocar aqui uns 50 pixels ó já ficar redondo aqui em preenchimento vou deixar assim uns 20 pixels aliás aqui eu posso zerar

posso colocar uns 50 pixels na direita e na esquerda uns 50 superior Vamos ver uns 15 inferior uns 15 enfim você ajusta aí né conforme a tua necessidade tá deixa eu só zerar aqui esse contêiner aí ó pode ver que eu zerei os preenchimentos Né dos contêiners e daí ele fica sem sem aquela marzin ali que tava esse outro testinho aqui ó eu vou fazer igual aqui ó mais de 100 clientes satisfeitos ó vou copiar aqui vou vir aqui vou colar aí vou vir em estilo Vou colocar aqui ele na cor roxo tipografia secundário posso

até aumentar um pouquinho o peso aqui assim mais ou menos posso vir nesse contêiner zerar aqui vir em layout e deixar ele assim aí esse primeiro contêiner aqui ó Posso deixar ele em uns 85% ó e esse aqui ele fica mais mais perto ó tá ficando assim então aqui nesse botãozinho de publicar ó de tempo em tempo você pode estar clicando aqui para você não perder o progresso aí que foi feito Não se preocupa porque essa enf esse site aqui que eu tô fazendo ele não tá aparecendo ainda no domínio principal tá depois vai configurar

ele com página inicial então você pode estar Publicando aí para você não perder ã nada tá aqui também ó tem essa opção de elementor e tem o histórico ó então se você sei lá fez alguma coisa errada pagou alguma coisa sem querer você pode vir aqui no histórico e tá voltando a um ponto anterior Beleza ainda aqui tem algumas preferências de usuário ã sair para WordPress aqui tem as configurações do site que a gente já viu aqui tem esse navegador nessa estrutura aqui que Basicamente você consegue também fazer uma gestão legal por aqui por exemplo

Ah você quer excluir um título ó ocultar você pode ocultar né para você ver ã depois tá então você consegue estar fazendo uma gestão por aqui também se fizer sentido h para você aqui vai aparecer o modo no tablet no celular aqui tá todo desconfigurado a gente já vai configurar aí ã enfim todo bonitinho tá e aqui eu quis fazer aqui primeiro esse esse essa headline né Essa Descrição esse botão porque é o principal agora vamos dar um toque aqui né você pode ver aqui no exemplo que eu fiz que aqui as duas primeiras linhas

do texto elas estão da cor branca e essa aqui ela tá nessa cor roxa né isso aqui eu utilizei um codigo Zinho CSS para fazer isso eu vou fazer aqui igual mas não precisa você fazer tá tudo que você achar difícil aí não precisa você fazer é opcional tá eu só vou aumentar tá aqui que vai ficar melhor a nossa Visualização tá então vou abrir essa tzin aqui e vou colocar desse jeito assim Style aqui em color eu vou colocar então o código da cor que é esse roxo fraco aqui ó vou copiar vou vir

aqui vou colar e vou fechar assim e depois do texto eu vou fechar essa tzin aqui para não dar nenhum problema tá Eu vai ficar dessa maneira assim então aí por exemplo Ah eu poderia mudar ó vamos pegar esse marketing digital vou dar um cont control x vou vir aqui vou dar um cont CRL V ó ficaria assim tá então você muda aí Conforme você quiser esse codigo Zinho aqui para não ter nenhum problema também eu vou deixar na descrição do vídeo aí e você pode tá conferindo ele beleza claro que como eu falei é

opcional daí se você vir aqui em estilo e trocar a cor ó ele vai trocar só a cor de cima tá a cor de baixo vai continuar ã daquele jeito ali Ok vamos vir aqui no maizinho vou arrastar para cá uma imagem também e aqui eu vou colocar o meu Logotipo Então vou pegar aqui no meu computador tá aqui o meu logotipo vou arrastar ele para cá e vou clicar aqui em selecionar nesse caso aqui eu usei um logotipo no formato png com fundo transparente e e o tamanho aqui da imagem né é 318 por

111 pixels não precisa você colocar igual né mas você pode colocar aí um logotipo aí em png num tamanho pequeno ó vou clicar em selecionar ele já tá aqui que ele vai abrir assim beleza uma observação Importante também você tem que cuidar pro logotipo aí que você colocar ele não ter bordas né pode ver que aqui ó ele tá cortadinho já bem do jeito certo tá então Cuidado para você não colocar um logotipo aí com umas bordas muito grandes né senão vai dar enfim vai ficar feio aí no seu site Tá vou pegar essa imagem

aqui vou deixar ela para a esquerda e aqui vou colocar um tamanho em pixels colocar aqui um 150 pixels assim Claro que vai dar tua necessidade aí de aumentar ou diminuir e tal beleza aqui eu coloquei esse esse gatilho Zinho aqui né Vamos conversar sobre o seu negócio né que é parecido com um botão aqui só que ele é meio transparente né como que eu fiz como que a gente faz isso então eu vou pesquisar aqui por lista de ícones vou arrastar para cá eu vou excluir esses dois aqui eu vou deixar só o primeiro

ó vamos conversar sobre o seu Negócio vou copiar vou vir aqui vou colar vou selecionar um comentário aqui assim mais ou menos esse aqui achei melhor assim não vou colocar link né porque enfim não faz sentido Não é a ideia ter um link aqui eu vou deixar assim mesmo o ícone vai ficar na cor branca o texto tipografia secundária e a cor branca desse jeito assim daí vou vir aqui em avançado borda tipo de borda sólido Largura da borda um e cor da borda branco Ó ficou assim então eu vou vi aqui em raio da

borda vou colocar uns 50 pixels aqui para arredondar vou vir aqui também em layout preenchimento vou colocar vamos ver como que ficam Unos 10 pixels assim ficaria assim 10 pixels vou vir aqui em estilo aliás aqui em avançado plano de fundo e o tipo de fundo aqui vou deixar um roxo só que eu vou diminuir a opacidade vou deixar assim mais ou menos Ainda aqui em avançado largura eu vou deixar personalizado Eu sempre gosto de colocar em pixels aqui ó euo deixar assim mais ou menos aí única diferença é que aqui aqui vou colocar uns

cinco aqui uns cinco aqui uns 15 e aqui uns 15 né como eu falei a gente vai ajustando aí Ao decorrer da aula tá aqui na borda vai uma borda assim ó bom fica assim então site aí a princípio bem apresentado né tem o seu Logotipo tem esse gatilho Zinho a headline a descrição o botão esse outro gatilho Zinho aqui do dos clientes eu vou clicar aqui nesse coner deixa eu ver e eu vou fazer dessa maneira assim ó ao invés de deixar um preenchimento padrão aqui eu vou zerar isso aqui eu vou vir em

layout altura mínima aqui eu vou colocar VH e eu vou deixar sem VH assim o que que seria sem VH seria 100% do tamanho da tela e eu vou clicar nesse contêiner aqui e vou Deixar o conteúdo justificado no centro dessa Essa maneira assim isso quer dizer que o usuário que ele entrar aí no seu site e ele abrir o seu site por exemplo em um monitor de 14 polegadas que é menorzinho vai abrir do tamanho da tela e o mesmo usuário que entrar no seu site num monitor grande de sei lá de 27 polegadas

por exemplo Isso aqui vai tá abrindo também do tamanho da tela tá então a gente tem que levar em consideração que existem vários tipos de Monitores de dispositivos diferentes e cada um vai abrindo uma resolução diferente então quando a gente deixa aqui o nosso nosso contêiner principal em 100 VH a gente garante que ele vai abrir do tamanho da tela tá se eu botar por exemplo 90 VH ele vai abrir ó 90% do tamanho da tela tá no meu caso eu vou deixar 100% porque eu acho que fica melhor assim OK sobre essa imagem aqui

que eu utilizei de fundo você pode ver que eu peguei uma imagem aqui que tem um Degradê preto no final né eu vou vir aqui nesse contêiner em estilo e aqui em sobreposição de fundo eu vou clicar aqui em adiante aqui eu vou deixar assim e aqui eu vou colocar uma cor preta ó para ficar um pouquinho mais preto ainda porque daí embaixo Aqui eu já vou emendar a nossa próxima nosso próximo contêiner tá que ele vai ser dessa cor preto aí também tá deixa eu só ver esse textinho aqui se eu consigo aumentar ele

deixar assim ó TAM 9 peso 900 tá 800 ó deixar assim então Beleza vou publicar então tá pronto aqui o primeiro contêiner né enfim uma das partes principais aí do nosso site né que é apresentação então aqui quando o usuário ele acessa ele já vê ele já entende né que se trata de um site de portfólio né então a gente tem informações Claras então é sempre bom você deixar tudo bem organizado bem alinhado tá mais ou menos igual está aqui OK Eu vou ver aqui no no modo Tablet ó ele tá abrindo assim no modo

tablet tá vamos ajustar isso aqui esse texto ele tá muito grande então no modo tablet ó você vê aqui no desktop ele tá puxando o tamanho 60 pixels aqui eu vou deixar uns 42 pixels desse jeito assim deixa eu só vi aqui nesse navegador Aqui tá o nosso contêiner principal e aqui tá esse outro contêiner ó esse contêiner aqui que é que tem as informações a largura dele eu vou colocar aqui em porcentagem Vou deixar 100% assim e esse outro contêiner aqui aliás esse aqui ó que não tem nada esse aqui eu vou deixar ele

em 100% também porém eu vou vir na direção vou clicar aqui no contêiner principal vou vir em layout a direção eu vou colocar assim ó dessa maneira Beleza vou clicar aqui também nesse contêiner no principal ainda né vou vir avançado e aqui vou colocar um preenchimento por exemplo de uns 50 pixels assim ó fica assim então no Tablet deixa eu ver se é esse aqui é esse contêiner aqui vou colocar ele para baixo assim ó fica melhor assim vou vir em estilo e vou justificar ao centro ó Então no tablet tá abrindo assim o nosso

site e pode ver que aqui não alterou ó uma visualização bem agradável no celular ele tá todo bugado aqui vamos ajustar porque que que ele tá assim porque ele puxa né O que a gente bota sempre no dispositivo superior né Então por exemplo aqui no tablet ó ó vou vim avançado eu coloquei 50 pixels aqui de preenchimento ó vou vi pro celular ele puxou esse 50 pixels claro que a gente não precisa 50 pixels eu vou reduzir aqui para uns 15 ou até mesmo para uns 10 pixels desse jeito assim esse texto aqui eu vou

clicar nele também ó ele puxou os 42 do tablet eu vou colocar aqui tamanho 30 eu acho assim gostei desse tamanho esse outro Aqui também eu quero diminuir o tamanho do texto colocar aqui deixa eu ver um tamanho tá ele não puxou ali eu já vou corrigir isso vamos só ver esse botão aqui primeiro vamos vir aqui no estilo do botão superior aqui vou manter uns 15 Opa coloquei errado direita vou manter Vamos colocar zero inferior uns 15 esquerda zero eu posso vir aqui ó e deixar esse botão na opção Esticar assim ó deixa eu

ver eu deixar assim no centro ó ele abriria assim então no celular é uma visualização enfim bem agradável também sobre essa imagem aqui ó você pode vir aqui em estilo e aqui você pode também mudar a posição da imagem ó colocar uma posição que melhor se adapte até mesmo colocar uma outra imagem separada ó eu gostei assim eu vou deixar assim no celular vai ficar assim no tablet e Assim no desktop Beleza agora eu vou clicar aqui em publicar pra gente não perder nada aí do que a gente tá fazendo esse elemento aqui por algum

motivo Ele não tá puxando aqui o que eu tô colocando né vamos ver como que eu posso corrigir isso aqui aqui ó ó tô diminuindo o tamanho e ali ele não tá diminuindo vamos clicar aqui em redefinir estilo vamos vir aqui no texto agora foi não sei porque que não estava dando Certo eu vou configurar ele de novo aqui primeiro no celular ó então vou deixar um tamanho 14 aqui para ele ficar bem pequeno mesmo e até já serve de dica aí pr enfim se você tiver fazendo algum algo parecido e não mudar é sempre

você vir aqui e você redefinir o estilo e tentar fazer de novo tá porque enfim às vezes pode acontecer aí alguns errinhos Ok vou vir aqui em avançado vamos adicionar aqui uma borda sólido ó el Já puxou ali que eu Tinha configurado antes assim plano de fundo vamos deixar assim vamos colocar ele mais transparente desse jeito assim a borda aqui eu esqueci do arredondamento assim e o preenchimento aqui vamos deixar botar personalizado aqui superior cinco inferior cinco direita três esquerda três posso diminuir ainda um pouquinho mais esse texto Assim para uns 13 daqu eu boto

cin e aqui boto cinco também largura personalizado ó vou deixar assim então esse degradê aqui esse degradê não esse esse fundo aqui vou deixar um pouquinho mais assim perfeito ó ficaria assim então no celular ó daí no tablet a gente tem que ajustar também e no computador também a gente tem que ajustar né Vamos ajustar rapidamente aqui então começando pela borda largura um deixar essa borda redondinha aqui no layout Vamos colocar Aqui um cinco um cinco um 10 e 1 10 e aqui ainda aqui no layout largura personalizado pixels assim perfeito Ó ficou perfeito agora

dessa maneira assim ó daí você repete esse processo aí e eu particularmente achei uma visualização bem agradável que ficou bem legal tá vamos ver agora as próximas eh próximos contêiners né aqui eu tenho ó Entenda como podemos te ajudar então basicamente um checklist aqui do que que você oferece dos seus serviços né como Exemplo aqui coloquei criação de estratégias identidade visual desenvolvimento de sites Mas aí você faz do seu jeito tá então vou vir aqui no maizinho vou adicionar um contêiner vou selecionar esse aqui vou clicar nele já vou definir aqui o fundo tá que

Aliás não é preto né essa cor aqui ó daí vou vir avançado e esse aqui eu não vou deixar ele em 100 VH eu vou colocar manual ent aqui um 150 pixels superior e um 150 pixels inferior desse Jeito assim aqui dá para ver que ficou um pouquinho diferente essa cor aqui deixa eu só consertar aqui ó a opacidade aqui ó vou aumentar a opacidade Agora sim ó pode ver que fica um efeito degradê aqui fica bem mais agradável do que tava antes tá aqui o que que acontece agora eu posso pegar alguns elementos que

já estão prontos né Por exemplo esse aqui ó Posso copiar posso vir aqui e posso colar e daqui eu posso Colocar serviços desse jeito assim vamos só ajustar isso aqui melhor vou deixar aqui como padrão ã deixa eu ver qual é que fica melhor aqui personalizado ele vai ficar inteiro eu acho que fica melhor padrão assim e aqui no alinhar-se eu coloco centro aí e fica assim desse jeito aí embaixo a gente tem uma headline né Então essa mesma aqui ó só Posso copiar ela aqui ó Colar vou centralizar e aqui sim vou colocar minha

tipografia primária Porém deixa eu ver transformação maiúsculas assim ó só vou copiar esse textinho aqui Entenda como podemos te ajudar podemos te ajudar vou dar um control x vou dar um control V beleza aqui ó esse textinho também Posso copiar posso vir aqui colar e deixar ele ao centro ó ficando desse jeito assim e agora aqui eu tenho esses boxes então aqui nos serviços Vamos só Mudar esse iconz inho aqui colocar esse aqui que eu acho legal ó vou vir aqui no maisinha agora vamos adicionar um contêiner vamos clicar nesse contêiner direção linha horizontal vamos

clicar no maizinho vamos adicionar outro e vamos duplicar ó três contêiners ok que que eu tenho aqui nesses contêiners Ten o ícone um título uma lista de ícones e um botão Então vamos colocar aqui ó um ícone um título uma lista de ícones Deixa eu pesquisar Aqui lista de ícones e um botão aqui ó são esses aqui os elementos agora a gente só vai personalizar então você vem aqui você coloca o enfim o que fizer sentido aqui né para que você tiver falando agora não lembro qual o nome dos ícones ali que eu coloquei porque

tem bastante ícones Tá mas enfim eu vou colocar aqui o que eu acho legal beleza esse ícone aqui eu vou deixar ele nessa cor e eu vou aumentar um pouquinho o tamanho esse texto aqui Vamos pegar aqui ó criação de estratégias copiar vamos vir aqui vamos colar eu vou deixar na cor branca tipografia primária porém eu vou diminuir deixar um tamanho 24 assim e aqui vou diminuir também esse ícone Deixa eu só colocar ele para cá assim e essa lista de ícones agora que tem uma flechinha e um texto vamos replicar aqui então aqui tá

o textinho enfim você Digita o seu texto aqui Vamos pesquisar por flecha acho que essa aqui beleza assim vamos só colocar aqui a nossa tipografia Beleza o ícone aqui vou deixar esse tom aqui de Cinza tá e eu posso estar duplicando assim ó aqui tem um do 3 4 ó vamos ver esse outro Tom esse aqui ficou melhor esse aqui mesmo beleza aqui é para dar mais Destaque aqui no no título mesmo né e no ícone Ok e aqui tem um botão ó então coloquei aqui ó eu quero uma reunião vamos copiar esse textinho aqui

e vamos colocar esse botão assim vamos colocar aqui uma flechinha também Arrow assim flechinha para cá beleza vamos ajustar primeiro aqui o fundo que vai ficar transparente o preenchimento vamos zerar a tipografia vai ficar aqui no Secundário assim a cor do texto assim ó fica desse jeito assim então aqui a posição vou deixar ele assim deixa eu só ver aqui uma coisa altura da Linha vou zerar aqui essa altura ó fica desse jeito então aí agora vou vir aqui nesse contêiner ó estilo borda sólido largura da borda vou deixar em dois vamos ver como que

fica e raio da borda vou colocar uns 25 e aqui no contêiner ainda vou colocar uns 50 de Espaçamento ficando desse jeito então aí tá mais ou menos parecido aí eu posso vir aqui ó excluir esses outros e duplicar esse ó eu só esqueci de regular aqui a largura eu vou deixar 1300 de largura Ó mas aqui você coloca uma largura que faça sentido para você eu recomendo não colocar mais que uns 1350 tá porque como eu falei antes cada dispositivo enfim cada monitor isso aqui pode abrir de uma maneira diferente tá então não colocar

algo aí muito Diferente Ok vamos selecionar aqui outra imagem outro ícone aliás né vamos ver colocar algum de imagem aqui aí colocar esse aqui mesmo só para esse aqui só para ilustrar e esse outro aqui vamos ver colocar aqui deixa eu só ver esse tamanho aqui tamanho 70 ó posso colar os estilos colar estilo aí daí você descreve aí cada cada serviço né No meu caso aqui ó colocar identidade visual e desenvolvimento aí daí você Coloca os izin também só vou aumentar um pouco aqui esse espaçamento para 40 ó ficando dessa maneira então aí a

segunda né o segundo contêiner aí do nosso site ó tudo desconfigurado aqui Vamos ajeitar bonitinho isso aqui então deixa eu ver como é que eu vou fazer isso eu vou pegar esse contêiner aqui aliás ó o principal aqui né que tá dentro do principal na verdade e vamos colocar a direção dele para baixo assim ainda que nele ó posso vi eu vou Vir avançado eu vou colocar aqui un 50 deixa eu ver é que você coloca a a ura que que você achar legal tá por exemplo 80 50 vou deixar em 50 beleza ó tá

ficando assim então vamos ver no celular ó Celular mesma coisa esse essa headline aqui Vamos diminuir deixa eu ver que tamanho que eu coloquei aqui que não lembro tamanho 30 vamos vir aqui tamanho 30 também a altura da Linha aqui eu vou colocar em 1.2 assim vou vir Aqui também nesse contêiner ó que puxou o eu coloquei ali no tablet e aqui eu vou deixar só uns 10 pixels assim e assim beleza aliás posso colocar até um pouquinho mais aqui uns 20 uns 20 esse outro contêiner aqui eu vou diminuir também puxou 50 vou colocar

uns 30 assim eu posso aqui vir aqui nos outros ó e colocar 30 também e vir aqui e Colocar 30 também ess aqui eu quero diminuir também um pouco ele colocar um tamanho 20 assim ó e posso estar copiando o estilo aqui e colando nos outros ó fica assim no celular essas bordinhas aqui eu vou diminuir eu vou colocar a largura um para ela ficar um pouquinho mais clean tá essa outra aqui também borda largura um e essa aqui também a borda largura um ó Então fica assim aqui no tablet vamos tirar esse preenchimento Aqui

vou deixar Zerado em inferir vou deixar 150 Ó daí vai ficar assim esse texto aqui vou colocar um tamanho 36 32 assim e esse aqui eu quero dar uma margzetta e tal vou deixar aqui uns 25 e 25 beleza esse botão aqui no celular Vamos só reduzir um pouquinho a fonte dele assim ó para um tamanho 14 beleza ó como eu falei né são ajustes aí que a gente vai fazendo esse aqui avançado Vamos reduzir um pouquinho também ó os serviços ó aí agora sim para mim tá bem mais organizado e para mim tá legal

assim Beleza vou vir aqui em publicar que que a gente tem agora agora vem talvez uma das partes aí mais importantes do nosso site que é a parte de portfólio né como eu falei aqui Eu vou colocar alguns projetos aí enfim projetos de sites aqui que eu mesmo fiz né com o meu caso eu trabalho com criação de sites então tô Crendo que um Portfólio enfim aí para mim paraa criação de sites e você vai colocar também os seus trabalhos aí da forma que você quiser né como eu falei Independente se você é um designer

é um social mídia você também trabalha com sites ou enfim você é um fotógrafo tá porém o que que eu recomendo aqui nessa nessa questão do portfólio tá justamente assim pro teu site ele não pesar muito né Eu recomendo você colocar poucos projetos cara eu penso particularmente Assim que muitas vezes menos é mais né então não adianta você querer colocar um monte de projeto fazer um site lotado de coisas né E às vezes você não não consegue enfatizar os seus melhores projetos então aqui eu coloquei cinco projetos ó como ess exemplo daí você coloca aí

seus trabalhos da maneira que achar melhor mas a minha dica é essa é não colocar tanto justamente por essa essa questão do do menos e mais né então você focar nos melhores projetos seus aí E também para não pesar muito site né Porque por mais que a gente tá utilizando uma hospedagem que é rápida uma hospedagem que é boa que enfim tá tudo OK mas quanto mais conteúdo tiver o seu site mais ele vai pesar não tem como fugir disso tá Então como que a gente vai fazer aqui como que eu fiz isso aqui eu

vou mostrar para você agora beleza eu posso pegar aqui inclusive não vou adicionar um novo aqui vou adicionar um contêiner novo vou Colocar ele aqui na mesma cor desse ó vou vir aqui no maizinho vou adicionar outro contêiner aqui esse contêiner Deixa eu ver se eu consigo duplicar aqui consigo vou adicionar um contêiner aqui e vou duplicar Opa aqui eu fiz errado pera aí vou voltar aqui no histórico aqui ó esse primeiro esse primeiro contêiner aqui ó eu vou colocar a direção dele horizontal daí ó eu vou duplicar o que tá dentro Ficando assim ó

dois contêiners esse segundo aqui também ó a direção horizontal ouv no maizinho vou adicionar outro contêiner ó e vou duplicar e vou duplicar ficando dessa forma assim né dois contêineres em cima e três embaixo que é exatamente o que eu fiz aqui mas é o estilo o que que eu vou fazer tá isso aqui é muito particular de cada um se faz sentido para você sei lá colocar 10 contêiners aqui um do lado do outro você pode colocar tá fica o teu Critério ou por exemplo também uma opção bem legal é você colocar um Carrossel

ó um Carrossel de imagens tá aí você consegue colocar várias imagens passando em carrousel beleza dá para fazer também deixa eu só excluir esse aqui ó como que seria na prática ó ó estão aqui os arquivos do meu computador ó vou arrastar todos eles aqui para WordPress detalhe que aqui eu coloquei essas imagens todas padronizadas tá deixa eu abrir aqui para mostrar melhor ó todas As imagens que eu coloquei aqui elas estão na resolução 960 pi de largura por 540 piels de altura tá isso aqui é um padrão você precisa fazer igual não é o

que fez sentido para mim beleza eu só recomendo você não colocar imagens aí que talvez ultrapassem os os 1000 2000 pixels para não ficar muito grande Tá porque não faz sentido colocar imagens aí muito pesadas Beleza então eu só recomendo que vocês sigam um padrão né Por exemplo ah colocou uma imagem que É 500 por 500 coloca todas as outras 500 por 500 para ficar tudo alinhadinho tudo bonitinho beleza ó tá aqui as imagens ó inserir galeria resolução completo Ó e daí Claro você faz as configurações aqui né você vem aqui deixa eu ver espaçamento

ó adiciona aqui um espaçamento posso vir aqui no contêiner também ó colocar ele 100% tamanho da tela assim ó você vai fazendo a gestão aí da maneira que você enfim acha melhor tá no meu caso eu achei melhor daquele Jeito ali porque eu achei mais bem apresentado aqui eu vou deixar 90% o tamanho da tela ok e vou colocar aqui para ver como que vai ficar então aqui vai ser uma imagem vou vir aqui vou selecionar Deixa eu ver essa aqui é a primeira vou selecionar essa imagem beleza aqui em legenda Ó você pode colocar

uma legenda personalizada para aparecer embaixo então aqui no meu caso eu posso colocar Landing page ou seja isso aqui é um Projeto de Landing page tá aqui no link você pode colocar o link do projeto né então no caso para você que trabalha com sites assim como eu você pode pegar lá o link do projeto lá do seu cliente e colocar o link aqui beleza vou colocar aqui jogo da velha só para ele reconhecer como link ó e da quando usuário clicar na imagem ele já é direcionado lá para o projeto tá bem importante também

você marcar a opção aqui abrir uma nova janela da o usuário Não sai aí do seu site resolução da imagem completo aqui no estilo eu vou deixar assim mesmo imagem no tamanho completo aqui no opacidade Ó você pode estar configurando uma opacidade no caso aqui vou colocar uns 80 opacidade e quando o usuário passa o mouse fica em 100 ó fica em um né Ó então dá esse efeito assim beleza mas aí você configura como você acha melhor inclusive você consigo botar alguma Animação aqui para aumentar e tal aqui na borda eu vou colocar uns

25 de arredondamento não sei se dá para ver direito aqui aqui é o arredondamento ó os cantos E aqui nessa legenda Vamos colocar essa legenda na cor branca e na minha tipografia secundária ó fica assim então agora eu pego isso aqui eu copio eu vho aqui e eu colo e eu venho aqui eu colo ó ficando dessa maneira assim daí eu só faço no caso a sub substituição né uma Configuração importante aqui que eu posso fazer vir aqui nesse contêiner principal ó zerar os espaçamentos vim nesse outro aqui também e zerar os espaçamentos ó eu

vou mudar aqui então Ó vou pegar esse outro projeto aqui vou pegar esse outro aqui vou pegar esse outro e aqui esse outro ó daí Ah eu quero mudar ó venho aqui e mudo ó esse aqui por exemplo é um blog esse outro aqui que por exemplo é um site você Segue essa mesma lógica aí Independente de qual seja o seu nicho você faz esse mesmo esquema beleza ó fica assim então o nosso portfólio que que acontece aqui nessa nessa largura eu deixei 1300 tá aqui daí fica o seu critério né Se aqui faria sentido

colocar um um tamanho maior tá pessoal então Sei lá posso deixar 1600 aqui ó ou como eu coloquei lá 90% enfim fica o teu critério daí o Ideal é que fique um pouco maior né justamente para destacar dar um destaque aí ainda aqui eu vou avançado e vou colocar um espaçamento inferior aqui de 150 desse jeito assim ó então tá ficando assim o nosso site de portfólio Ok deixa eu só ver se ele tá é tá mais ou menos parecido aqui o modelo vamos ver aqui no tablet ó claro que aqui no tablet eu vou

vir aqui aliás eu vou ter que selecionar aqui pelo navegador cara tem tanto contêiner Aqui esse é esse esse aqui é esse Vamos abrir esse aqui ó vamos vir em layout aqui colocar ele para baixo Ó daí vai aparecer assim os projetos tá vamos pegar de novo aqui ó esse contêiner e vamos colocar ele para baixo também ó daí vamos abrir a vai abrir assim no tablet e assim no celular ainda aqui no celular eu vou vir aqui e eu vou diminuir esse espaamento aqui para uns 100 pixels ó fica assim então no celular assim

no Tablet e assim no desktop vamos publicar aqui para não perder nada beleza bom o que que eu fiz agora aqui eu coloquei algumas informações né enfim Um textinho aqui com a imagem tal você pode fazer aí do seu jeito então vamos lá eu vou vir aqui vou adicionar um contêiner já vou definir aqui a largura dele 1300 aliás Talvez esse aqui eu tenha que colocar ele um pouco menor Enfim vou fazer aqui e a gente vê junto Tá vou vir aqui no maizinho vou adicionar uma imagem já vou pegar a imagem aqui do meu

computador tá aqui ela vou arrastar aqui para WordPress selecionar beleza resolução vou deixar completo E aqui nessa imagem eu vou adicionar um raio da borda de 25 também para ficar tudo padrão tá porque aqui Ó nesses Box eu adicionei 25 aqui também no portfólio adicionei 25 Então vamos manter padrões ok Pessoal eu vou vir aqui nesse contêiner e eu vou deixar 40% que coincide bem com o tamanho da imagem e esse aqui em 60 e daí eu posso pegar alguns elementos que eu já tenho pronto como por exemplo esse aqui ó de serviços ó vou

vir aqui vou colar daí eu substituo aqui ó por que nos escolher D um cont control V aqui aí vamos trocar aqui enfim vou colocar aleatoriamente mesmo aqui vamos só colocar isso aqui para aqui para a esquerda agora a gente Tem uma headline ó vou vir aqui copiar vou vir aqui vou colar vamos ajustar aqui esse texto Então vou dar um control V vou colocar el embaixo assim beleza vamos pegar esse outro textinho aqui também vou copiar vou vir aqui vou colar nesse caso a gente tem um texto maiorzinho aqui né vou vir aqui vou

dar um cont control V Beleza vou vir mais uma vez no maizinho Vamos colocar aqui uma lista de ícones assim vamos copiar esse textinho aqui Você coloca de um em um ó vou colocar esse outro Icone Zinho aqui de cheque né e vou duplicar aqui para aparecer quatro vezes desse jeito assim vamos começar aqui pelo texto a cor branca assim colocar um pouquinho mais pesada aqui a fonte para dar um destaque maior o ícone nessa cor posso colocar um pouquinho maior o ícone e a lista posso deixar aqui uns 20 pixels ou uns 15 e

tem um botão também esse mesmo botão aqui ó vou copiar vou Vir aqui e vou colar assim daí eu vou clicar nesse contêiner e vou justificar o conteúdo então ficando assim esse contêiner beleza e daí você vê que quando você já tem tudo pronto aqui né fica muito mais fácil de de enfim de você tá fazendo ó vamos clicar nesse outro aqui no tablet Vamos colocar linha Aqui para baixo esse aqui vamos deixar em 100% e esse aqui também vamos deixar em 100% posso vir aqui em Avançado colocar um 50 na direita um 50 na

esquerda essa imagem aqui deixa eu ver como que fica melhor fazer isso vou colocar aqui um 50 e uns 50 embaixo uns 20 essa imagem aqui no tablet eu quero diminuir um pouco tá muito grande assim ó posso deixar desse jeito assim no tablet inferior aqui vou colocar 150 ó fica assim então vamos ver no celular beleza aqui no celular vamos tirar essas margens aqui vou deixar só um 20 1 20 e nesse outro contêiner vamos Deixar também um 20 um 20 Vou deixar um 10 em cima aqui esse porqu nos escolher vamos ajustar aqui

a largura assim ó já tá tudo mais ou menos aqui pronto né só esse texto aqui eu vou diminuir para um 16 assim ó perfeito ficando assim então no celular assim no tablet e assim no desktop vamos clicar em publicar aqui para não perder nada vamos só adicionar aqui um espaçamento desse jeito assim beleza que que a gente tem agora Coloquei um depoimento aqui de um cliente é claro que você consegue colocar mais da maneira que você quiser ok aqui eu posso pegar esse mesmo contêiner ó que ele já tá pronto e posso estar duplicando

ele Aliás não posso não não posso vou criar um do zero aqui que fica melhor para mim explicar para você ó vou deixar assim vamos copiar aliás vou pegar esse aqui de serviços ó vou copiar vou vir aqui vou colar aqui no caso é ã resultados assim vamos colocar Aqui tá Colocar assim mesmo coraçãozinho a gente tem uma headline embaixo vamos pegar essa aqui que tá pronta vamos copiar vamos vir aqui vamos colar ela e vamos colar certinho o texto aqui desse jeito assim aqui eu vou colocar peso 900 que eu esqueci eu tinha colocado

800 esse outro aqui também peso 900 fica um pouquinho mais um pouquinho mais grossa a fonte eu acho que fica melhor tá ó igual ao primeiro agora aqui Embaixo aqui vai dois contêiners né então um contêiner vai aqui com o depoimento e outro com a foto aqui da pessoa ou enfim da empresa aí ó vou arrastar o contêiner para cá linha horizontal vou vir no maizinho Vou colocar outro contêiner e vou duplicar vou vir aqui no maizinho vamos arrastar uma imagem para cá vamos pegar a imagem lá no computador essa imagem essa aquela uma imagem

Quadrada Tá então você vê aí que durante o site eu Utilizei diferentes imagens né Essa aqui por exemplo ela fica mais na vertical essas outras elas ficam mais na horizontal e essa aqui ela é mais quadrada Beleza então você pode estar seguindo aí essa mesma lógica né aí da borda 25 posso pegar aqui ó esse ícone que já tá pronto já tá formatado vim aqui e colar aqui eu vou pesquisar por cote assim desse jeito aí eu posso pegar esse texto aqui ó vamos fazer de conta Que esse texto vai ser o depoimento ó tá

aqui depoimento aí vamos pegar outro texto Vamos pegar esse aqui por exemplo ó copiar vem aqui e vou colar esse aqui é o nome aí do da pessoa que tá dando o depoimento Vamos só reduzir aqui né um tamanho 18 mesmo posso estar duplicando aqui ó colocando a a função da pessoa também assim e aqui eu vou colocar na cor roxa e aqui eu vou aproximar ele dando uma margem negativa ficando desse jeito assim daí Nesse contêiner aqui vou deixar o conteúdo justificado ao centro ficando desse jeito assim deixa eu só ver Eu utilizei 1300

aqui esse aqui eu vou colocar 1300 também assim ficando alinhado aqui né com os outros itens vou publicar vamos ver como que está os outros dispositivos ó tablet vou fazer o mesmo esquema aqui ó ã já tá linha horizontal aliás nesse contêiner aqui linha Cola vertical assim posso colocar invertida assim ó e aqui vou Colocar aquela margem Zinha lá a imagem já pegou bem certinho aqui ó então vai ficar assim no tablet Vou adicionar aqui uma margzetta os logotipos aqui depois ó e a ideia dos logotipos é justamente ficar bem pertinho aqui desse depoimento o

celular Vamos só ajustar aqui para 20 e para 20 aí se eu quiser eu posso colocar esse textinho aqui até um pouco menor aqui no celular né para não não chamar muita atenção também esse outro aqui também Colocar aqui um tamanho 16 os outros vou deixar assim mesmo bom o que que eu vou fazer agora vou vir aqui no maizinho vou adicionar outro contêiner Vamos colocar aqui ele dessa cor assim o layout eu vou colocar ele largura total 100% porque eu quero que ele fique assim ó que que eu vou fazer agora vou vir aqui

no maizinho vou pesquisar por Carrossel de imagens vou arrastar para cá e vou selecionar aqui as imagens aqui dos logotipos tá que são Essas aqui ó eu converti elas agora agora aqui para que elas est muito grandes ó vou arrastar para cá aqui ó Então você faz o envio aí do enfim do logotipo aí dos seus clientes vou clicar aqui em criar nova galeria inserir galeria ó estão aparecendo ali os logotipos que que eu vou fazer aqui ã o tamanho da imagem vou deixar completo slides a mostrar aqui você pode configurar Quantos você quer nesse

caso aqui tá aparecendo cinco ó assim mas é Claro que cada caso é um caso né que eu tô usando logotipos mais horizontais né então isso aqui pode variar Então você coloca um número aí que faça sentido para você aqui deixar padrão esticar imagem não navegação nenhum link nenhum legenda nenhum se você quiser colocar algum link aí você consegue colocar aqui tem algumas opções adicionais de reprodução eu vou tirar aqui reprodução automática deixa eu ver aliás vou marcar esse loop aqui aí ó vou deixar sim Beleza vou vir aqui em estilo espaçamento personalizado Vou colocar

aqui assim mais ou menos ó vamos ver aqui no tablet aí no tablet geralmente vai ficar diferente né aqui no tablet eu vou colocar três logotipos por vez e aqui no celular aqui no celular colocar dois Talvez mas eu vou regular esse espaamento assim aliás é interessante deixar marcado aqui a reprodução automática Tá só vou tirar esse pausar aqui aí ficando assim daí no celular assim no tablet e assim no computador beleza vamos publicar aqui e agora vamos para o último contêiner aqui do nosso site então pra gente finalizar e aqui eu fiz uma chamada

paração né então é importante aí a gente já já apresentou todas as informações a gente fez tudo bonitinho mas não adianta o usuário ele rolar até o final e não ter nada né sempre tem que ter um botão aqui No final para ele tá entrando em contato aí com você então para fazer isso eu vou adicionar aqui um contêiner vamos configurar aqui 150 pixels superior 150 inferior vou colocar ele aqui na nossa cor padrão vou clicar no maizinho vou adicionar aqui um contêiner aqui esse contêiner eu vou colocar ele numa cor degr D assim ó

aqui você pode estar regulando o ângulo então vou deixar assim mais ou menos e esse contêiner Principal aqui ó eu vou diminuir vou deixar em uns 800 assim vou vir em estilo e vou adicionar uma borda também tamanho 25 aqui não tá aparecendo a borda ainda porque eu não adicionei nenhum elemento Mas eu posso pegar aqui ó esse textinho ó copiar posso vir aqui colar ainda assim não apareceu a borda vamos lá então raio da borda 25 aí agora apareceu cara Acho que eu cliquei Ah não Cliquei errado aqui ó vamos eu cliquei no container

principal ó que vou zerar Agora sim ó vamos pegar esse textinho aqui então vamos copiar vamos vir aqui vamos colar vamos pegar deixa eu ver esse aqui ó que já tá Centralizado no meio vamos colar ele aqui né no caso já tá aqui nem vou nem e vou mexer e vamos colocar um botão também pode ser esse botão aqui ó vou copiar vou vir aqui e vou colar o botão nesse caso o botão Aqui vamos deixar ele Centralizado aqui o fundo desse botão vou deixar ele transparente igual tá ali Então como que a gente vai

fazer isso aqui na cor do texto fica assim plano de fundo ó vou deixar assim transparente e aqui na borda vou colocar uma borda sólida largura da borda vou deixar em um cor da borda vou deixar Branco ficando desse jeito assim então aqui nesse container eu vou colocar uns 50 pixels assim preenchimento E aí tá Mais ou menos parecido né pessoal aqui posso colocar um pouquinho mais até uns 80 e uns 80 não vamos ver uns 100 e uns 100 aqui ó deu testinho Fiquei em três linhas e aqui no final vamos adicionar Um textinho

então que é aquele texto de todos os direitos reservados ou enfim Um textinho aí que você quer colocar o seu o seu CNPJ ou alguma informação importante tá que é bem o rodapé aqui ó vou colocar bem pequeno Aqui esse textinho tá pessoal colocar um 20 aqui assim ó para ficar bem baixo ali Vamos só ver aqui como que tá no tablet né como que ficou aqui tá perfeito Vamos só ajustar aqui esse preenchimento vou deixar assim aqui no celular vamos ver vamos ajustar aqui no celular aqui no celular vou deixar 100 superior na direita

vou deixar 20 vou deixar 100 inferior e na esquerda 20 daí nesse outro contêiner aqui a gente adiciona deixa eu ver uns 30 assim mais Ou menos uns 20 aí ficando assim Então olha o textinho embaixo beleza tá basicamente pronto aí o nosso site de portfólio vou vir aqui vou publicar ele agora eu vou vir aqui na minha página inicial de novo ó canalpro sites.com ó pode ver que aqui ainda não tá aparecendo nada tá é como se a se a gente não tivesse feito nada agora vou vir aqui no painel do WordPress vou vir

aqui em configurações leitura sua página Inicial exibe uma página estática você vai selecionar assim e aqui você vai selecionar sua página aqui aqui vão aparecer todas as suas páginas tá ali dentro do WordPress você consegue criar sei lá 10 20 páginas quantas páginas você criar ali todas elas vão aparecer aqui para você configurar como página inicial daí você vem aqui em salvar alterações vamos voltar aqui ó agora sim tá aqui então o nosso site de portfólio tá é claro que quando a gente fala de Criar um site é bem complexo né então não é só

fazer o site pronto a Às vezes tem muitas outras configurações aí que você vai precisar então aqui no canal eu ensino Praticamente tudo você quer por exemplo ah colocar um menu aqui em cima tem vídeo no canal ensinando como você quer adicionar novas páginas adicionar um menuzinho você quer inserir como eu falei antes lá um pixel do do Facebook você quer deixar o seu site mais rápido otimizar ele aí enfim usar algumas Técnicas de otimização tudo eu tenho vídeo aqui no canal tá vídeo ensinando também como criar p página de política de privacidade página de

termos de uso então Esso aqui é um canal Bem completo aí para você que quer aprender tudo sobre WordPress Beleza então peço até Desculpa aí se eu esqueci de alguma coisa né Por ser uma aula bem completa Às vezes a gente acaba esquecendo de algum detalhezinho ou de outro mas a ideia da aula era essa era te ensinar Como criar um site de portfólio bem completo profissional do zero então peço que se você viu essa aula até o final deixa nos comentários se deu certo e também na descrição eu vou estar colocando todos os links

complementares aí de aulas complementares para você tá assistindo beleza valeu e até a próxima [Música]