Site de portfólio: Elementor e WordPress, web design sem código

1. Introdução: Somos todos criativos aqui. Todos nós temos grandes talentos e todos precisamos de um portfólio on-line para que possamos mostrar ao mundo essas habilidades incríveis Talvez você seja fotógrafo, ilustrador ou designer gráfico De qualquer forma, seu portfólio deve vir de você. Deve mostrar sua personalidade. Se você estiver usando o Wordpress, você pode começar com um modelo pré-construído, bem, isso vai perder todo o seu estilo pessoal. Porém, se você começar com uma página em branco, qualquer coisa que você queira que aconteça pode acontecer. Poderíamos fazer tudo isso usando o construtor de páginas elementares. Então, vamos dar uma olhada nesse. Sou John Wolfgang Miller. Sou designer profissional há 20 anos e estou aqui para ajudá-lo a criar seu portfólio on-line. O Wordpress pode ficar um pouco complexo, especialmente se você nunca o usou antes. Nesta aula, vou te ensinar como usar o Elemental Page Builder Esse é um programa on-line em nenhum conhecimento de codificação é necessário. Tudo se resume à diversão do design criativo. Ao final de tudo isso, você terá as habilidades necessárias para criar seu próprio portfólio e dar a ele seu próprio estilo pessoal. E, portanto, você terá o site com a aparência mais incrível do mundo. Vá preparar uma xícara de chá e sente-se comigo e vamos começar. 2. PROJETO DO CURSO : Seu projeto principal aqui hoje é criar um site de portfólio de página única. Vamos usar apenas a versão gratuita do elemental aqui, para que você possa aprender muito sobre como usar este programa sem ter que pagar nada Em seguida, começaremos com sua seção inicial de heróis, mostrando quem você é e do que trata seu portfólio. Em seguida, daremos uma olhada na sua galeria de imagens. Mostrarei como configurar uma exibição de galeria muito legal e também falarei sobre os elementais, as opções de animação e os pontos de luz da imagem Quando isso estiver concluído, você criará a seção de rodapé do seu site onde poderá incluir qualquer link de contato ou de mídia social Quando a versão desktop do site estiver concluída, mostrarei como é fácil fazer com que tudo funcione perfeitamente no tablet e no celular. Siga cada lição uma por uma e veja se você consegue construir cada parte sozinho antes de passar para a próxima. Se você gostaria de criar exatamente o mesmo site que eu estou criando aqui, apenas para desenvolver todas as suas habilidades. Ou você pode baixar as imagens que estou usando na seção de recursos aqui. Baixe esse arquivo inteiro e faça o upload de tudo para sua biblioteca de mídia. Ou se agora você se sentir confortável o suficiente com o elementor, use suas próprias imagens e me mostre seu próprio portfólio bacana com seu próprio estilo Nesta aula e em todas as minhas aulas, abordarei muitas coisas diferentes e mostrarei muitas habilidades diferentes. Eu recomendo que, à medida que você avança reproduza e pause os vídeos E se você precisar que eu repita alguma parte desta aula, basta pressionar este botão de 15 segundos, tempo suficiente para que você possa assistir novamente a parte inteira novamente se tiver algum problema com a qualidade do vídeo Você pode ver aqui no Skillshare, vamos apenas vir aqui e clicar neste ícone de configurações do Cog Ele está configurado como automático e, dependendo da velocidade da Internet, pode não aparecer com a melhor qualidade possível. Tente alterar isso para 720 ou 1080 pixels e você verá instantaneamente uma grande mudança na qualidade Quando você terminar a aula inteira. Certifique-se de fazer o upload de um link e uma captura de tela do seu site aqui na seção do projeto Eu lhe darei meu feedback imediatamente. Também adoro receber avaliações de todos os meus alunos para ver o que funcionou melhor para você nesta aula. Entre aqui e me deixe uma avaliação completa. Ok, vamos começar. 3. Configuração técnica: Aqui estamos em elementor.com. Este é o lugar que você normalmente visitaria para começar a usar o Elementor, mesmo com a versão gratuita Talvez você já tenha tudo configurado. Talvez você já tenha um serviço de hospedagem e já tenha o Elementor instalado Se você fizer isso, pode simplesmente pular para a próxima lição. No entanto, recomendo ficar por alguns minutos apenas para ter certeza de que tudo está configurado corretamente Para esta aula, estamos usando apenas a versão gratuita do elemental Infelizmente, ao criar um site, você também precisa configurar a hospedagem. hospedagem é basicamente a empresa que armazena seu site para você e a Elemental oferece esse serviço sozinha, no entanto, há um custo mensal envolvido na configuração Se você passar o mouse aqui até onde diz hospedagem e clicar em Hospedagem para WordPress, poderá descobrir mais Esse é o serviço que eles oferecem e, como você pode ver, começa com apenas 299 por mês Portanto, é muito barato, mas ainda é algo pelo qual você precisa pagar. Se você clicar em Planos C, como você pode ver, eles têm pacotes diferentes para isso a preços diferentes com base no tamanho do seu site. Mas não há uma versão gratuita, infelizmente, disponível no Elemental No entanto, há outro serviço que oferece hospedagem gratuita. E para esta lição, eu recomendo usar isso apenas para começar sem ter que entregar nenhum dinheiro. Aqui é WoZma. Este é o serviço de hospedagem gratuita que eu recomendo. É muito fácil de usar e pode permanecer gratuito para sempre. Se você experimentar este e ele não funcionar para você, dê uma olhada na seção sobre e veja quais outros serviços estou recomendando Então, acesse este site. O URL é Wosma dot IO, e então suba aqui até o topo onde diz soluções e escolha hospedagem para WordPress Então, quando você vê esta página, clique aqui, diz Deploy for free. Você chegará a esta página e é aqui que você pode descobrir sua configuração do Wordpress. E vou passar por cada etapa aqui, mas é muito fácil de entender de qualquer maneira. Em primeiro lugar, o nome do aplicativo aqui no topo. Ele já gerou um nome exclusivo para você. Mas você pode escrever seu próprio nome aqui, então vou chamá-lo de Wolfgang Em seguida, localização do servidor. Você tem duas opções: Bélgica e Estados Unidos. Escolha o que estiver mais próximo do país em que você está configurando o site Em seguida, clique aqui onde diz Configurar seu site Wordpress. E vamos dar um título ao nosso site. Mais uma vez, vou chamar esse de Wolfgang. O idioma é inglês para mim. Em seguida, nome de usuário e senha do administrador e e-mail do administrador. É aqui que você configura seu próprio login exclusivo no back-end do seu site. Então, aqui, vou escrever em meu nome. Aqui, vou inserir minha própria senha. Em seguida, adicionarei meu e-mail na parte inferior e clicarei em Implantar agora. Você acessará esta página. Seu site já está configurado, mas como você pode ver no topo aqui, ele diz que seu site ficará ativo por 1 hora para mantê-lo online, crie uma conta gratuita. Você não precisa fazer isso se não quiser mantê-lo ativo. Mas se você fizer isso, recomendo clicar neste botão aqui, inscrever-se gratuitamente e criar uma conta gratuita no WoZma Também estou usando os mesmos detalhes de login aqui e clicando em Inscrever-se. Agora você tem uma configuração de conta gratuita dentro do WoZma, e é aqui que você pode acessar o painel do WordPress e começar Seu nome de domínio está aqui, e isso é o que você inseriu na primeira página. Esse pode não ser o nome de domínio que você deseja usar para seu site, mas para testar e configurar seu site, continuaremos com isso por enquanto. Se você quiser adicionar um novo nome de domínio, mostrarei como fazer isso no final desta aula. Mas, por enquanto, vamos ficar com este. Então, para entrar e começar a criar seu site, clique aqui onde diz administrador do WordPress. E aqui estamos agora no painel do WordPress. Podemos começar a construir tudo a partir daqui. Se você nunca usou o Wordpress antes, falarei sobre algumas das configurações básicas Mas o principal a saber é que o menu de tudo está aqui à esquerda. A primeira coisa que precisamos fazer é instalar o Elementor. Elementor é um plug-in. Então, para fazer isso, venha aqui à esquerda, passe o mouse sobre os plug-ins e escolha Adicionar novo plugue Em seguida, na caixa de pesquisa aqui em cima, digite Elementor. Você verá o criador de sites Elementor aqui, clique em Instalar agora e escolha Ativar Em seguida, você verá esta página e precisará fazer login se já tiver uma conta elemental ou se inscrever em uma nova, se não tiver Basta clicar neste botão que diz entrar e, em seguida, fazer login aqui ou clicar em Criar uma conta, se você ainda não tiver uma. Em seguida, clique nesse botão para conectar o site. Você pode ver essa opção se já tiver se inscrito na versão pro do Alimental No entanto, não precisamos disso para essa classe. Estamos apenas usando a versão gratuita, então você pode até clicar, eu farei isso mais tarde. Em seguida, o Elemental fará várias perguntas, que você poderá responder se quiser, mas isso não fará nenhuma diferença no site que estamos construindo hoje Vou clicar em Ignorar e pular novamente. Ignorar Em seguida, você verá esta página, que indica que você deve configurar um tema para o seu site. Para criar um site dentro do Wordpress, você precisa começar com um tema. Vamos usar o tema Hello elemental, que é basicamente um tema em branco, para que você possa criar o que quiser Então, ao ver essas opções, certifique-se de que o olá à esquerda aqui seja aquele em que você certifique-se de que o olá à esquerda aqui seja aquele em que clicou e, em seguida, clique em Continuar com este tema Em seguida, o elemental faz várias perguntas para basicamente fazer com que você faça o upgrade para pagar pela versão profissional Mas, novamente, não precisamos disso para essa aula. Basta clicar aqui embaixo, no canto inferior direito, onde diz continuar gratuitamente. Agora você tem o Elementor instalado. Então, em primeiro lugar, você verá esta página. Ele criou uma única página de rascunho para você. Não precisamos nos preocupar com esta página. No entanto, ele fará essa pergunta. Como você quer começar? Basta clicar no site em branco aqui à direita e começar do zero. Então, como não estamos usando esta página, basta vir aqui no canto superior esquerdo, onde você pode ver este ícone do elementor, clicar nele e clicar em Sair para o WordPress Então você verá o editor wordpress. Novamente, basta ir para o canto superior esquerdo e clicar nesse ícone para sair. Agora, selecionamos o tema hello elemental nessa compilação, que às vezes é instalado automaticamente Nesse caso, aqui no lado esquerdo, você verá a palavra olá. Mas se ele não estiver aparecendo lá, isso significa que o tema não foi instalado. E se sim, clique na aparência e, em seguida, suba aqui até onde diz adicionar tema. Hello Elementor deve ser um dos primeiros que você vê aqui Nesse caso, basta passar o mouse e clicar em Instalar. Se não, venha até aqui onde diz pesquisar temas e digite a palavra Olá. E você pode ver algumas opções diferentes. Novamente, basta rolar para baixo até ver este que diz olá Elementor e clicar em Instalar Em seguida, clique em Ativar. Então, se não estava aparecendo lá antes, a palavra olá agora aparece aqui no lado esquerdo. Ao vê-la, passe o mouse sobre a palavra hello e clique em Configurações Só precisamos fazer uma configuração técnica de back-end para garantir que nossa página seja a mais limpa possível. Então, quando você vê esta janela, clique nesta aqui em cima que diz estrutura e layout. Em seguida, ele fornecerá duas opções aqui, e você precisará marcar as duas. Então, primeiro de tudo, vamos desativar o cabeçalho e o rodapé do tema. E então vamos esconder o título da página. Isso significa que começamos com uma página completamente em branco. Não haverá nada lá quando você começar a criar seu site. E uma última coisa para mostrar você vem aqui do lado esquerdo do Elementor, passa o mouse sobre Editor e acessa as Você verá muitas opções aqui, e a única que estamos vendo é esta aqui no lado direito que diz Editor atômico. Clique sobre isso. Esta página explicará um pouco mais sobre o editor atômico. É uma nova função que o elementor trouxe para ajudá-lo a criar um site No entanto, é mais um serviço de construção avançado, que pode ser um pouco técnico e um pouco complexo, e que não veremos nada nesta classe. Então, quando você clicar nessa guia que diz Editor atômico, basta rolar para baixo até o botão que diz desativar e clicar aqui Marque essa caixa e clique em Desativar. E é isso. Fizemos toda a configuração técnica. Agora podemos começar a criar seu site. 4. Elementor: introdução: Agora que está configurado, vá até as páginas e selecione todas as páginas. Como você pode ver aqui, algumas páginas vêm automaticamente com o tema. Não precisamos de nenhuma dessas páginas, mas essa está ativa. Isso foi publicado, como você pode ver aqui. Então, vamos desligar isso porque é apenas uma página vazia que não precisa existir. Então, se passarmos o mouse aqui na Edição Rápida, você tem algumas opções aqui, mas a que estamos vendo é o status Como você pode ver, ele foi publicado e você pode alterá-lo para um rascunho. Agora vamos criar nossa própria página ao vivo. Isso é muito simples. Clique em Adicionar novo. E você acessará esta página. Este é o editor normal do wordpress. Tudo o que precisamos fazer aqui é dar um título à nossa página. Então, role até aqui até onde diz adicionar título e digite o nome desta página. O meu será John Wolfgang Design. Em seguida, role aqui para a direita onde diz Salvar rascunho e clique nele. Em seguida, volte aqui à esquerda e clique em Editar com o elemental Antes de começarmos nesta parte da aula, só preciso mostrar que, desde que fiz o vídeo, a Elemental fez algumas pequenas alterações na seção do menu na parte superior Tudo o que eu falo ainda está lá. Tudo está em lugares ligeiramente diferentes. Então, vou te mostrar agora. Quando eu mostrei as configurações do site como estando aqui, elas não estão mais lá. Agora está no menu suspenso aqui, então basta clicar neste botão. Se eu mostrei as configurações da página nesta engrenagem na parte superior aqui, ela não está mais no centro da página É aqui à esquerda que você vê esse ícone. E se eu falar sobre estrutura em qualquer ponto, esse ícone costumava estar à esquerda, mas agora está aqui à direita, e pronto. Todo o resto ainda é exatamente o mesmo. E bem-vindo de volta ao elemento ou ao Editor. Como você pode ver, estamos usando a versão mais recente do menu. E é sempre bom entrar aqui e brincar com todas as configurações aqui, para saber onde está tudo antes de começar. Vou percorrer rapidamente cada parte da barra de menu na parte superior aqui. Primeiro de tudo, esse elemento ou logotipo, é um menu suspenso. E aqui, temos o tema Builder. Não se preocupe com isso. Esse é apenas um elemento profissional não estamos usando hoje. História. Bem, obviamente, se você cometer um erro, poderá voltar às versões anteriores e aos atalhos do teclado Isso é apenas fornecer todos os atalhos para acelerar todo o processo, eu acho Em seguida, o ícone de adição adiciona elemento. É aqui que você verá todos os elementos, todos os widgets que usaremos neste site E esse menu suspenso, que é configurado em diferentes subseções, contêiner de layout e grade É isso que usamos para começar a criar todos os elementos de cada seção do nosso site. Você tem o básico. Você também tem sua seção profissional. Obviamente, você pode ver um pequeno elemento de cadeado em cima de tudo isso, mas não se preocupe com isso Não podemos usar nenhum deles, mas nada disso é necessário para qualquer coisa que vamos construir hoje. Acabamos de usar a versão gratuita. Assim, podemos fechar essa parte, e então você obtém todas as configurações gerais, tudo o que você vai precisar aqui, carroséis de imagens, depoimentos, Então esses são os elementos. Em seguida, temos as configurações do site. É aqui que você pode alterar as configurações que funcionarão em todo o site. Portanto, se você estiver criando um site com várias páginas diferentes, qualquer configuração aqui será relevante em cada página que você criar. Então, se fecharmos este e clicarmos neste que diz estrutura, você verá uma pequena janela pop-up. Isso costumava ser chamado de Navegador. E se você estiver familiarizado com as versões mais antigas do Elemental, ele se chamava Navigator Agora é chamado de estrutura, mas faz exatamente a mesma coisa. E falarei sobre isso quando começarmos a criar seu site. E a seguir, esta é a seção responsiva. Isso é muito, muito importante, e abordaremos isso mais tarde na aula. É aqui que podemos selecionar diferentes dispositivos desktop, tablet e celular. E então esta aqui, pré-visualize as alterações. Isso é ótimo porque, ao trabalhar no site, você pode clicar em Visualizar alterações e ver como ficaria se todos os outros acessassem seu site quando ele fosse lançado. Então isso é tudo. Agora podemos começar a criar seu site. 5. Portfólio: herói: Vamos começar a criar a seção de heróis do seu site. O que vou mostrar aqui é como fazer um abridor de página inteira Role até aqui para ver o plus. Vamos escolher a caixa flexível como quisermos. 50, 50. Vamos escolher essa das duas colunas que caíram em nosso contêiner. Há apenas duas coisas que queremos mudar aqui, a altura e a largura. Em primeiro lugar, a altura, como você pode ver, ela se divide aqui, mas queremos que ela preencha a página inteira Vamos clicar nos pontos na parte superior e verificar se temos o contêiner de edições à esquerda Em seguida, vá para esta seção onde diz altura mínima. Em seguida, neste pequeno menu suspenso aqui à direita , onde diz x aqui, escolha H. H significa altura visual. Isso vem como uma porcentagem em termos da altura que queremos que ele preencha. 100% da página. Literalmente, basta escrever 100 aqui. Você verá que todas as seções caíram até o final da página. Classificamos nossa altura. Em seguida, analisaremos a largura do conteúdo novamente, aqui à esquerda, como você pode ver, ela está atualmente em caixa Não queremos que seja encaixotado. Queremos que seja de largura total. Como você pode ver aqui, você tem o tipo de linha pontilhada e , em seguida, um espaço vazio à esquerda e à direita Nós o alteramos para a largura total, ele vai para a largura total da página. No entanto, você ainda pode ver pequenos espaços entre eles. Essa é uma configuração padrão dentro do Elementor, onde ela adiciona automaticamente uma margem ou um preenchimento a cada contêiner que você coloca na página Para mostrar rapidamente como alterar isso, basta clicar com o botão direito do mouse em qualquer lugar da página e trazer de volta a estrutura. Em seguida, escolha o contêiner no qual você deseja retirar o preenchimento. Vamos escolher o principal aqui. Clique no nível superior aqui, o contêiner principal. Então venha aqui à esquerda para Avançado. Essas são as duas seções que estamos examinando aqui. É ao mesmo tempo margem e preenchimento. No entanto, eles são definidos com o elemento ou tamanhos padrão para eliminar essa margem. E esse preenchimento simplesmente coloca zero aqui E faça o mesmo no preenchimento Como você pode ver, quando eu mudo um deles, ele muda todos eles. E isso porque , como você pode ver aqui, os valores estão interligados. Se você precisar de quantidades diferentes em ambos os lados, basta clicar neste botão para desvinculá-las. E então você verá que pode adicionar quantidades diferentes, 50 na parte superior, 50 na parte inferior, mas ainda zero à esquerda e à direita, mas queremos zero no geral. Em seguida, você pode optar por fazer isso em todos os contêineres aqui, selecionando-os um por um. Agora vou adicionar três coisas diferentes. Em primeiro lugar, vou mudar a cor de fundo do contêiner principal. Em seguida, mostrarei como adicionar uma imagem no lado esquerdo e como adicionar o texto no lado direito. Primeiro de tudo, vamos começar com a cor de fundo. Vamos para o contêiner principal aqui na estrutura. Então aqui à esquerda, escolha o estilo. É aqui que você pode alterar o plano de fundo de todo o contêiner. Em termos de tipo de plano de fundo, você tem algumas opções diferentes. Clássico, seria apenas um gradiente de cor reto. Uma cor se mesclando outra cor, vídeo ou apresentação de slides, são várias imagens deslizando de uma para a outra Brinque com isso você mesmo. Veja o que funciona para você. No entanto, quero manter isso simples e usar uma cor clássica. Vou clicar nesse ícone. Agora você tem duas opções. Você pode escolher adicionar uma cor ou adicionar uma imagem inteira. Estou procurando uma cor nesta seção. Portanto, vou até essa caixa cinza que está riscada e mostra que nenhuma cor foi selecionada. Esse é o seletor de cores. Você pode escolher sua cor aqui ou inserir manualmente um código hexadecimal Primeiro de tudo, esse aqui em cima escolherá a cor e essa é a opacidade dessa Vamos definir essa cor para 100% da cor selecionada aqui. Bem, isso é preto, é por isso que ficou 100% preto. Se eu arrastar este para a esquerda e para a direita, ele me dará as diferentes opções acima. Agora estou procurando uma cor rosa e magenta. Vou arrastá-lo até este ponto. No entanto, você pode ver aqui embaixo ainda estou selecionando a versão preta dessa cor. Se eu pegar esse pequeno ícone e arrastá-lo para cima e para baixo, ele me permitirá selecionar por aqui e escolher a cor que estou procurando. Porque esse ícone está na parte superior. Agora eu posso brincar com este. Basta escolher uma cor que realmente represente quem eu sou e meu estilo. A outra opção é inserir manualmente um código hexadecimal aqui embaixo Você não sabe o que é um código hexadecimal ou precisa de alguns conselhos sobre como escolher cores onde procurá-las Deixe-me uma pergunta na seção de discussão aqui e eu entrarei em contato com você o mais rápido possível. No entanto, eu tenho uma cor favorita. O que eu vou fazer é colar isso aqui. Vou destacar todo o texto aqui. E depois cole na minha cor escolhida, que é 00f. Essa é a cor que eu uso com toda a minha marca. Meu cartão de visita teria essa cor. Meu logotipo teria essa cor. É importante que, se você escolheu uma cor, seja consistente. Agora vou adicionar uma imagem de fundo para o primeiro contêiner, aquele aqui à esquerda. Volte aqui para estruturar e selecionar esse contêiner. Agora, se você normalmente gostaria de adicionar uma imagem, da maneira que é feita quando você vem até aqui, escolha a seção de imagem aqui em Básico e a arraste e solte no contêiner que você gostaria que ela atraísse. No entanto, há um problema com isso. A imagem não preenche todo o espaço que temos para esse contêiner. Isso não é possível, pois será exibido em dispositivos diferentes, em tamanhos diferentes, etc Vamos excluir essa imagem, clique com o botão direito do mouse e escolha excluir. Então volte aqui para Container. Clique sobre isso. Em seguida, venha aqui à esquerda para editar o contêiner e escolher Estilo. Verifique se você está nessa seção de plano de fundo novamente. A partir do tipo de plano de fundo, escolha Clássico. É aqui que vamos escolher uma imagem em vez de uma cor como plano de fundo. Clique aqui no plus. Vou clicar aqui para selecionar o arquivo que eu quero carregar do meu computador. Nesta pasta, tenho duas imagens minhas. Eu gostaria de escolher este aqui e, quando for carregado, basta escolher Selecionar. Como você pode ver, isso colocou a minha imagem como plano de fundo do contêiner. Portanto, ele preenche todo o contêiner. Felizmente, porém, a safra não está certa, não é? É muito grande. Então , é cortar metade do meu rosto para editar isso. Venha aqui para a esquerda. Veja essas seções aqui. Posição, fixação, repetição e local de exibição. Primeiro de tudo, vamos começar com a posição. Está definido como padrão, mas é aqui que você pode escolher a posição. Se você quiser que seja a esquerda, a direita, a parte superior, a inferior, eu gostaria que estivesse no meio. Então eu vou escolher centro, centro. Bem, isso é um começo muito bom. Isso parece bom, então, em termos de repetição. Bem, isso significa que você pode ter a mesma imagem repetida várias vezes dentro da caixa. Eu não quero isso. Vou escolher não nesse momento a partir do tamanho da tela, esse é o mais importante. Você tem algumas opções aqui. Você pode escolher capa ou conter. Você escolhe, é isso. Isso significa que você pode ver a imagem inteira, e é por isso que você tem um espaço vazio na parte superior e inferior. Vou escolher a capa porque, como você pode ver, ela preencheu perfeitamente a caixa. A imagem agora vai para a parte superior e inferior da página e, em seguida, a única divisão está à esquerda e à direita. No entanto, eu posso ver tudo. Eu posso ver meu rosto, eu posso ver meu computador, meu braço, minha xícara. Está tudo bem, então vou ficar com esse. Agora temos isso feito. Bem, só uma pequena dica para você aqui. Eu recomendo que você continue salvando isso constantemente à medida que avança, porque se o computador travar, você poderá voltar ao que acabou de fazer Você não precisa fazer isso de novo para fazer isso. Vamos vir aqui onde diz Publicar. Clique nessa pequena seta suspensa e clique em Salvar rascunho que foi salvo. Ou seja, se o seu computador travar agora você ainda voltará exatamente ao que tem Ok, temos o lado esquerdo do nosso herói. Vamos trabalhar no lado direito. Vamos destacar esse contêiner. O que queremos fazer aqui é adicionar texto. Vamos até o ponto positivo, vamos escolher o título e arrastá-lo para dentro. Agora, isso acabou de inserir o texto padrão em todas as configurações padrão. Você verá aqui no lado esquerdo: Bem, primeiro temos o título, esse é o texto que aparecerá. O que eu gostaria de acrescentar aqui é meu nome. Então, vou colocar John Wolfgang Miller. Em seguida, vamos escolher a tag HTML. Clique nesse menu suspenso e você verá H 1h2h3 H significa cabeça. Essa é uma configuração por motivos do Google, por motivos de SEO. O que significa que H one é o título da introdução, o título da introdução da sua página. Em seguida, outros títulos que você tem seguirão abaixo para escolher H dois e H três se for um subtítulo, pois esta é a introdução à nossa página e a principal Eu vou escolher o H. E uma pequena dica para você, na verdade, só deve ter um H na página e deve ser a primeira coisa a aparecer. Qualquer dúvida sobre títulos, qualquer dúvida sobre títulos H one e SEO Novamente, inclua isso nas discussões e eu entrarei em contato com você o mais rápido possível Agora vamos dar uma olhada na posição desse texto dentro do contêiner. Vamos voltar aqui para o contêiner, clicar neste e escolher Layout. Aqui à esquerda, estamos analisando o conteúdo justificado e analisando os itens de alinhamento Antes de tudo, justifique o conteúdo. Isso escolhe onde ele aparecerá dentro do contêiner que já está configurado para começar Podemos escolher o centro ou podemos escolher o final. Vou te mostrar o final. É o fundo onde queremos. Queremos isso no centro. Vamos escolher isso então, uma linha de itens. Bem, isso significa, novamente, ele é automaticamente configurado para começar no final, naquele lado ou novamente no sentido. Vamos escolher o centro. Eu tenho a posição do meu texto ordenada. Vamos clicar no texto novamente. Ou escolha Heading up here in the structure. Na verdade, eu apenas clico no texto em si. Então venha aqui para estilizar. É aqui que podemos mudar a forma como esse texto aparece. Podemos escolher o alinhamento que queremos que seja alinhado à esquerda, centralizado novamente Podemos mudar a cor e podemos mudar a tipografia usada no momento, ela está alinhada à esquerda, e estou feliz No entanto, a cor, bem, eu não quero que seja preta em um fundo de agenda. Vamos clicar nesse. Vamos arrastar esse pequeno ícone até aqui, na extrema esquerda, que escolherá o branco puro. O branco puro é sempre representado por seis, seja qual for a cor que você selecionou aqui embaixo, o canto mais distante deste lado, e esse lado sempre será branco puro e preto puro Bem, eu quero branco puro. Em seguida, vou mover a estrutura cá para que ela não cubra meu texto. Então eu vou escolher esse ícone de caneta aqui. Para tipografia, é aqui que você pode escolher tudo o que quiser sobre a tipografia Você pode escolher a família. Aqui e você pode escolher o sistema. Esses são os básicos que você vê em todos os lugares. Os do Google, aqueles que estão livres do Google. Então, isso continua para sempre. Na verdade, há possivelmente outras configurações dentro disso, mas sim, como você pode ver, há muitas fontes diferentes aqui. Voltaremos a esse. O que eu realmente vou fazer é selecionar um que eu já conheça. Isso funciona da mesma forma que a cor que eu escolhi como plano de fundo. Eu escolhi uma fonte que uso em toda a minha marca. Se você quiser algumas informações sobre onde encontrar fontes, onde encontrar ideias para tipografia Novamente, basta me enviar uma mensagem nas discussões, mas vou escrever nesta que eu sei e sei que amo, chamada Bunge Essa é uma ótima fonte porque realmente me representa. É muito grande, é muito ousado e tem esse estilo dos anos 80 Com o texto em uma cor branca sólida, ele funciona muito bem sobre o fundo brilhante da Agena Vamos escolher a Bunge. Você tem algumas outras opções aqui. Esse peso, bem, é apropriado se você escolheu um que tenha vários pesos diferentes, algo como Futura ou Helvetica, eles terão várias opções diferentes de luz extra fina Este é apenas um único em negrito que deixará isso como está como padrão em termos de transformação. Bem, você pode escolher se seria maiúscula ou minúscula em maiúscula Isso significa apenas que a primeira letra de cada palavra está em maiúscula No entanto, como você pode ver, essa já é uma fonte maiúscula. Eu não preciso de nada disso. O único que vou ver aqui dentro é o tamanho. É muito pequeno no momento, o que vou fazer é arrastar este para a direita e torná-lo muito maior. Acho que sei o quão grande eu quero que seja. Eu quero que ele preencha muito espaço dentro desse contêiner. Como você pode ver, há um grande problema nisso, pois, bem, é muito grande para caber dentro do contêiner. O que precisamos fazer aqui é algo para o qual ele trabalha, meu estilo funciona para o meu nome. Vou dividir um pouco a palavra para fazer isso. Eu só vou te mostrar algumas coisas básicas de codificação muito simples, eu prometo Sem código, mas esse é um código muito simples que é bom que você conheça. Venha aqui para ver o conteúdo. Este é o título que temos aqui. O que eu quero fazer é dividir a palavra Wolfgang em duas palavras, Wolf e Para fazer isso, acabei de selecionar nesta caixa de título a palavra Wolfgang e clicar no meio dela Tudo o que vou fazer aqui é colocar algum código. Antes de tudo, no teclado, escolha esse suporte, o pontudo, que em um Mac book está na luz inferior, escolha o lado esquerdo Em seguida, escreva com essas duas letras R e escolha a do lado direito. Aí está. Você verá que ele dividiu Wolf e Gang em duas palavras separadas. No entanto, bem, isso é confuso , agora temos John e Wolf na mesma linha. Como vou consertar isso? Bem, primeiro de tudo, vou usar as palavras John e Wolf para tirar o espaço que já estava lá e depois adicionar outra pausa. Lá vamos nós. Eu realmente gosto disso. Isso funciona muito bem agora. John Wolf Gang Miller. Acho que até a palavra Miller não se divide tão bem, mas tem seis letras. Vou colocar uma pequena divisão entre o L e o L. Novamente, o mesmo problema entre a gangue e o Mill. Vamos fazer uma pausa lá. Pronto, John Miller. Isso realmente me resume, quem eu sou e você sabe o que? Acho que a exibição disso funciona muito bem. Uma pequena dica para você aqui. Essa pequena seta no lado esquerdo é um ótimo elemento ou configuração onde você pode ocultar o painel. Eu clico nele, todo o resto desaparece, incluindo a janela da estrutura Agora eu posso ver exatamente como isso ficaria para todos que visitam meu site, porque isso é o que eles veriam. Agora vamos clicar na seta novamente para trazer de volta todas as ferramentas. Então, vamos salvá-lo novamente. Aqui em Save Draft, agora temos uma seção completa de heróis. Vamos passar para a galeria do seu portfólio. 6. Portfólio: grade de galeria: Agora vamos adicionar outra seção abaixo do herói. Vamos rolar para baixo. O que vamos ver aqui são duas coisas, contêineres e grades. Basicamente, será uma grade dentro de um contêiner e, em seguida, contêineres dentro de uma grade. Mostrarei como usar esses elementos diferentes e isso mostrará uma maneira muito legal de apresentar toda a sua galeria. Vamos começar com um contêiner normal. Clique no sinal de adição, escolha a caixa flexível e, em seguida, escolha esta Uma única coluna apontando para o deck. Então, vamos até o ponto positivo. Vamos escolher a grade e arrastá-la para o contêiner. Isso é uma grade. A forma como uma grade funciona é que você pode escolher o número de colunas e o número de linhas em cada coluna. Tem sempre exatamente a mesma largura. Ele oferece um layout uniforme e agradável. Eu vou escolher quatro colunas. Quero que tudo isso seja exibido em uma linha. É assim que minha grade se parece. Agora, o que eu quero fazer aqui é inserir várias imagens diferentes para criar uma grade de exibição muito legal que mostre muitas das coisas diferentes que fiz na minha carreira da maneira que você normalmente faria. Novamente, você chegaria até o ponto positivo e colocaria uma imagem que colocaria uma imagem nessa coluna. No entanto, se eu tentar colocar outra imagem na mesma coluna, ela não ficará lá, ela passará automaticamente para a próxima parte da grade. Você só pode ter uma coisa dentro de cada coluna. No entanto, quero ter várias imagens diferentes. Isso é o que eu preciso fazer. Novamente, venha até o ponto positivo escolha um contêiner e coloque um contêiner na coluna. O que você pode ver aqui é um contêiner dentro de uma coluna da grade que está dentro de um contêiner principal. O que isso significa agora é que, com esse contêiner, posso colocar várias imagens diferentes lá. O que vou fazer é deletar essas duas imagens que estão aqui sozinhas. Vou passar o mouse sobre esse ícone rosa, clicar com o botão direito do mouse e escolher excluir O mesmo neste clique com o botão direito. Excluir. Agora, o que eu quero fazer é soltar uma imagem dentro desse contêiner, aqui à esquerda dos widgets, arrastar a imagem e soltá-la Então, se eu quiser adicionar outra abaixo dela, novamente, venha aqui para o sinal positivo, selecione a imagem e solte-a. Como você pode ver aqui, temos a pequena linha rosa que está acima ou abaixo. Isso significa que ele ficará dentro desse contêiner, acima ou abaixo da imagem que está lá. Vamos colocá-lo abaixo. Agora vamos, agora temos duas imagens dentro de um contêiner que fica dentro dessa coluna. Acho que quero três ou talvez quatro imagens dentro desse contêiner. Eu posso simplesmente ir até aqui para adicionar um elemento e adicionar outro. Mas uma maneira mais rápida de fazer isso é vir aqui para estruturar. Estamos dentro do contêiner e sabemos que temos esses dois elementos dentro do contêiner. Você pode ver que está configurado aqui com um pequeno menu suspenso onde as coisas estão definidas para mostrar o que está dentro dele. Tudo o que vou fazer é passar o mouse sobre a última imagem, clicar com o botão direito do mouse e escolher Duplicar Eu farei isso duas vezes. Agora tenho quatro imagens dentro desse contêiner. Agora, o que eu quero fazer é recriar isso mais três vezes. Novamente, isso vai levar muito tempo para fazer tudo manualmente. Tudo o que vou fazer é selecionar esse contêiner aqui. Vou simplesmente desligar a seta para não ver o que está nela. Então eu vou clicar com o botão direito sobre isso. Duplique essa data, que é isso que eu tenho aqui. Agora, se eu clicar na seta, tenho uma grade configurada e que mostrará todas as diferentes partes do meu portfólio. Vamos voltar ao editor primeiro. Bem, como você pode ver pelo espaçamento aqui, está encaixotado e é isso que queremos Na verdade, queremos um pouco de espaço em branco cada lado desse contêiner principal, porque, do ponto de vista do design, espaço em branco é muito importante. Isso ajuda a enquadrar tudo o que está dentro dela. Primeiro, eu só preciso brincar com o espaçamento um pouco dentro desse contêiner principal Obviamente, temos um pequeno espaço em branco à esquerda e à direita. Vamos adicionar um na parte superior e inferior. Vamos escolher o contêiner principal. Venha aqui para avançar novamente. Vamos brincar com a margem e o acolchoamento. O que eu quero fazer é desvincular os valores em ambos. Vamos colocar um preenchimento de 100 pixels na parte superior e 100 pixels na parte inferior Como você pode ver, agora temos um belo espaço em branco ao redor de toda a grade que parece ótimo. Isso só dá um pouco mais de espaço para respirar quando você tem várias imagens, o que é muito importante. Agora, a única coisa que está um pouco errada aqui, e olha, eu sou designer gráfico, eu sempre noto esse tipo de coisa, é que eu quero que isso seja uniforme. Você pode ver que o espaço entre essas duas imagens é menor do que o espaço entre cada coluna. Novamente, isso ocorre porque a configuração padrão em cada contêiner está dentro dessa grade. Vamos para o contêiner um, vamos para Avançado e vamos mudar tudo isso para zero. Novamente, você pode ver que tudo está alinhado corretamente. Em seguida, o que vou fazer é escrever para clicar na primeira cópia do contêiner e depois no estilo de estilo do contêiner restante. Agora, vamos lá. Isso é perfeito. Não tenho mais dor de cabeça de designer gráfico. Eu posso ver um espaço absolutamente uniforme entre as colunas e as linhas de. Agora eu só quero começar a adicionar cada imagem individual. Vamos ver a primeira imagem aqui. Clique no ícone do lápis, canto superior direito aqui no canto superior direito aqui à esquerda, onde diz Escolher imagem novamente, você verá apenas a imagem de posicionamento cinza lá. No início, não queremos isso, obviamente. Vamos clicar nessa imagem. Quando abro a biblioteca de mídia, posso ver todas as imagens que eu enviei. Se você quiser saber um pouco mais sobre o upload de imagens, acessaremos meu perfil no skill share e procuraremos este vídeo que explicará rapidamente o que deve ser feito quando enviamos imagens para o Wordpress O que importa é a proporção dessa imagem, o tamanho do arquivo e o nome do arquivo. Assista a este pequeno vídeo, você entenderá um pouco mais. Quando você tiver todas as suas imagens prontas para upload clique aqui e selecione Arquivos. O que eu tenho aqui são três pastas de imagens diferentes. Eles têm proporções diferentes, alguns deles são três por dois, alguns são dois por três e alguns são quadrados Basta abrir cada um deles para mostrar a você. Deixe-me mudar isso para uma lista em termos de três por dois. Cada imagem que tenho aqui está configurada com essa proporção exata, três por 23 por 23 por dois. Então eu tenho as mesmas imagens que estão todas configuradas para duas por três. Todos os pulmões. De qualquer forma, funcionou como dois por três. Então, a última escolha que tenho é o quadrado, um por um. Novamente, mesmas imagens, mesmo conteúdo, apenas apresentados de maneiras diferentes. O que vou fazer aqui é carregar cada uma dessas imagens. Não vou usar todos eles, mas me certifiquei de que todos os tamanhos dos meus arquivos de imagem sejam os menores possíveis, portanto, não ocupem muito espaço no back-end do meu site. Primeiro de tudo, vamos escolher todos os quadrados, leves, cada um deles. Escolha abrir. Quando todos tiverem sido carregados. Venha aqui para fazer upload de arquivos novamente, selecionar arquivos, escolher dois por três e fazer upload de todos eles. Em seguida, os 13 por dois finais. Carregue-os também. Quando todos estiverem carregados, basta escolher o primeiro que você deseja que apareça na sua galeria. Eu vou escolher um três por dois. Acho que vou escolher esse aqui. 51 Galeria de arte. Agora você pode estar se perguntando: por que eu fiz upload de proporções diferentes das mesmas imagens Bem, isso é só para ser um pouco mais criativo. Embora fosse importante ter todos os espaços intermediários, linhas e colunas iguais, não acho importante ter o tamanho ou a proporção das imagens iguais. Deixe-me te mostrar. Vamos escolher o número dois. Imagem número dois nesta coluna. Aqui, eu quero colocar uma imagem quadrada. Bem, esses foram os primeiros que eu enviei. Vamos escolher um desses. Talvez esse mergulho em Fiji. Então eu quero selecionar uma proporção de dois por três, uma imagem de retrato. Vamos clicar em Editar imagem. Escolha a imagem aqui em cima. Esses foram os segundos que eu enviei, não foram? Vamos rolar para baixo até um desses. Talvez esse aqui. Sim, isso é dois por três. E é uma garota vestindo uma camiseta que eu desenhei para uma empresa chamada Get. Vamos selecionar isso. Lá vamos nós. Agora temos um pouco de variedade em imagem, forma e tamanho. O que isso também significa é que nem sempre está alinhado por aqui, o que chama a atenção um pouco mais, faz com que uma coisa se destaque mais do que outra Olhando para isso, você sabe o que eu acho tenho muitos tamanhos diferentes nesta coluna, acho que três imagens provavelmente seriam suficientes. Acho que não preciso de quatro. Vamos descer e excluir este último. Clique com o botão direito no ícone e escolha Excluir. Agora, o que vou fazer é adicionar três imagens diferentes a cada coluna, imagens com proporções diferentes E então podemos brincar com a posição de todos eles e ver o que funciona melhor em termos de criação de uma grade criativa. Vou começar excluindo a quarta imagem de cada coluna Exclua esse. Eu posso mudar de ideia em algum momento. Talvez funcione melhor. Se eu quisesse que talvez 43 por dois imagens deixassem quatro nessa coluna, isso acontece. Não é um problema. Acabei de adicionar outro widget de imagem Mas agora vou selecionar uma variedade diferente de imagens que melhor mostrem meu portfólio de design gráfico. Experimente isso e tente escolher uma boa variedade de imagens. Alguns que podem ser um pouco mais distantes, alguns que estão um pouco mais próximos, alguns que têm pessoas, outros que não. É bom adicionar um pouco de variedade lá. Basta escolher o que você acha melhor. Mostra quem você é e seu estilo, seus elementos destacados. Você não precisa mostrar tudo o que já fez em sua carreira. Basta escolher as melhores partes. Agora, o que funciona muito bem nessa grade é que eu tenho um pouco de variedade. Se eu clicar na seta, tudo cabe dentro de uma única página de desktop. Gosto que, à medida que as pessoas navegam pelo meu site, vejam essa seção de heróis, onde veem a mim e meu nome. E então, à medida que rolam para baixo, eles podem ver tudo de uma só vez. Isso é muito legal. No entanto, acho que ainda posso brincar com a tela aqui, com a estrutura de tudo. Vamos clicar na seta. Acho que o que eu quero é que, como temos um alinhamento diferente na parte inferior de cada coluna, não acho que devemos ter o mesmo alinhamento na O que vou fazer é apenas centralizar o conteúdo em cada contêiner em cada coluna Vamos voltar à estrutura aqui. Mesmo que eu apenas feche o menu de cada um aqui, o primeiro 1.1 que eu quero fazer para todos eles, clique no Contêiner, venha aqui para Layout e escolha Justificar O conteúdo está novamente no centro. Em seguida, alinhe os itens novamente ao centro. Agora, isso não mudou nada, por quê? Porque está na grade. E essa é, na verdade, a coluna mais alta de todas. No entanto, clico com o botão direito do mouse nesse contêiner, escolho Copiar e, em seguida, escolho Colar. Nos próximos três, veremos o que acontece. Estilo de colagem. Lá vamos nós. Colar estilo A Style. Agora, se eu clicar na minha pequena seta do painel oculto, lá vamos nós. Isso parece muito bom. Isso parece um pouco mais criativo. Agora, quando alguém rola de cima para baixo, está vendo tudo exibido em um belo padrão da mesma forma que não está necessariamente em uma grade, mas em uma grade Se isso faz algum sentido criativo, basta clicar na seta aqui. Agora, só uma coisinha. Quanto mais eu olho para isso, eu não sei. Acho que está um pouco errado em termos de posicionamento de cada imagem. Acho que quero que seja mais alto nos dois do centro e depois um pouco mais curto nos da esquerda ou da direita O que vou fazer é mostrar o painel novamente. Tudo o que vou fazer é arrastar uma imagem de um lugar para outro só para brincar com ela. Primeiro de tudo, quero que essa imagem da garota fique na coluna dois no topo aqui. Tudo o que vou fazer é passar o mouse sobre o ícone rosa de edição da imagem Mantenha meu mouse pressionado e arraste-o até o topo acima da próxima imagem. Aí está você, ele é jogado naquele recipiente. Você pode ver aqui na estrutura duas imagens neste contêiner. Agora temos quatro, talvez. Vamos mover essa aqui para baixo, volta para o local onde estava a última imagem. Sim, lá vamos nós. Ok, estou muito feliz com esse layout agora. Agora, cada contêiner, bem , tem uma altura diferente, então eles não estão alinhados exatamente. Nenhuma dessas seções se alinha ? Eles sabem que não funcionam como um pequeno labirinto para seus olhos correrem Acho que é uma ótima galeria de todos os meus melhores trabalhos. Vamos voltar ao editor e salvar o rascunho. 7. Portfólio: animação de galeria e Lightbox: Agora quero mostrar mais duas coisas legais que você pode fazer dentro do elementor com suas imagens Vamos dar uma olhada na tela da caixa de luz. É isso que seus usuários verão se clicarem em uma imagem. Mas antes de tudo, vamos ver a animação. O que eu quero mostrar para a animação que você tem muitas opções diferentes para isso dentro do elementor O que podemos fazer é pegar cada elemento e fazer com que apareça de uma certa maneira. Começarei mostrando como isso funcionaria para toda a rede. Vou clicar na grade e depois vir aqui para avançar. O que estamos vendo aqui são efeitos de movimento. A parte que queremos ver é a animação de entrada. O momento está definido como padrão, o que significa que ele não fará nada. No entanto, entre, você tem menu suspenso e, na verdade tem muitas opções diferentes aqui. Basta escolher um aleatório ou algo assim. Esses são sempre engraçados. Buscadores de atenção Bounce significa apenas que a grade inteira aparecerá quando alguém rolar para baixo até aquela parte do flash da sua página. Na verdade, é muito bom Pulse, sim, há muitas coisas estranhas diferentes que você pode fazer com isso Isso depende apenas do seu estilo e do que você acha que melhor representa você. No entanto, embora eu goste de ser criativo, gostaria de mantê-lo bem simples e organizado O que eu sempre escolho para isso é um simples desbotamento e você pode ver que chegou bem rápido lá No entanto, você pode brincar com a duração da animação definida como normal. Basta configurá-lo para lento. Lá vamos nós. Essa é uma entrada muito melhor e mais lenta O que temos aí é uma animação para que toda a grade seja exibida de uma só vez. Mas o que eu quero é ser um pouco mais criativo e fazer algo um pouco diferente para cada imagem dentro do contêiner. Vamos apenas desligar isso. Para fazer isso, clique neste pequeno x aqui. E isso o leva de volta à configuração padrão ou você pode escolher não. Agora, a grade inteira não tem animação de entrada. O que vou fazer é mudar a animação de entrada de cada imagem. Vamos para o primeiro novamente, 51, clicar em Editar imagem, depois vir aqui para Avançado e rolar para depois vir aqui para Avançado e rolar para baixo até Efeitos de movimento E isso é apenas para essa animação de entrada de imagem. Mais uma vez, vou escolher fade in. Mais uma vez, vou escolher Slow. Agora, quando um usuário rola para baixo até essa parte da página, apenas aquela única imagem será exibida Eu quero que todos eles sejam exibidos. Se eu selecionasse todas as imagens e escolhesse exatamente a mesma coisa , todas apareceriam ao mesmo tempo. É exatamente isso que tentamos evitar da rede. Animação. Por exemplo, se eu fosse escolher a próxima , mergulhe em Fiji Entre aqui, escolha efeitos de movimento, entrada, animação, fade in e escolha Slow Vamos te dizer uma coisa, vamos dar uma olhada em como isso parece. Agora, para que os usuários façam isso, vamos até aqui, vamos clicar em Salvar rascunho. Então, vamos clicar nesse pequeno olho para visualizar as mudanças que me trazem para a página. É assim que todos os seus usuários verão seu site. Então, ao descer até a seção da galeria, você verá os dois desaparecerem lá Basta fazer isso um pouco mais rápido para que você possa ver. Vamos recarregar Lá vamos nós. Então, ambos estão desaparecendo, mas ambos estão desaparecendo na mesma velocidade Vamos voltar ao nosso editor. O que eu quero ver aqui é um atraso na animação, um pequeno atraso de quando a animação acontece. Podemos ver o primeiro aqui, 51, com um efeito de movimento. Esse pode ficar como está. Vamos mergulhar em Fiji. Vamos aos efeitos de movimento lento. Vamos colocar um atraso de 500 milissegundos. Vou te mostrar a velocidade disso em um segundo, depois verdadeiramente Oz. Vamos mudar isso, 12.750 milhões Vamos salvar a faixa e, em seguida, visualizar as alterações. Ao rolar para baixo, você verá que essas três imagens chegam em velocidades ligeiramente diferentes. Vamos recarregar a página inteira novamente. Lá vamos nós. Isso é perfeito. Essas três imagens aparecem em momentos ligeiramente diferentes. Tudo o que eu quero fazer agora é escolher um horário completamente aleatório para cada imagem, para que todas apareçam, mas nenhuma ao mesmo tempo Vamos voltar ao editor e eu vou mudar todos eles para uma velocidade diferente. Vou trabalhar em cada um deles super rápido, mas resolva isso sozinho. Brinque com velocidades diferentes para cada um. E continue reabrindo e recarregando a página para encontrar um bom equilíbrio que funcione perfeitamente para É assim que a galeria aparece agora. Quando eles rolarem para baixo, você verá que todos eles chegam em momentos ligeiramente diferentes. Esse é um estilo criativo muito legal que você pode adicionar ao seu próprio portfólio. Vamos apenas recarregar este. Aí está. Assim. Eles têm uma grade que é apresentada de uma forma meio legal, que também é animada de uma forma muito legal. Isso sempre chamará a atenção das pessoas. Agora, mais uma coisa a observar é a configuração da caixa de luz. Vamos voltar para o editor. Agora, eu gostaria de mostrar a configuração da caixa de luz. Isso é algo que você pode adicionar ao site do seu portfólio. Quando os usuários vêm nos visitar, eles podem clicar na imagem, vê-la muito maior e descobrir um pouco mais sobre o que você fez nesse trabalho. Isso é muito fácil de configurar. Venha aqui para sua primeira imagem e clique no ícone de edição de imagem. Depois, venha aqui para ver o conteúdo à esquerda. O que estamos vendo aqui é a seção de links. Eles têm duas opções. Nesse menu suspenso, você pode adicionar um URL personalizado se quiser enviar os usuários para um site diferente, talvez para mostrar o projeto em que você trabalhou. Mas o que estamos vendo aqui é a caixa de luz, então vamos escolher o arquivo de mídia. A caixa de luz está definida com as configurações padrão. O que isso significa é que quando alguém acessa seu site e clica na imagem, é isso que eles verão. Basta clicar na seta para ver mais. Você vê a imagem exibida quase em tela cheia com alguns ícones aqui. Isso é falha, exclua a tela, compartilhe e feche. Tem um fundo preto claro que parece muito legal e é uma ótima maneira de mostrar todo o seu portfólio. As pessoas podem clicar no que quiserem na galeria e escolher ver muito mais. No entanto, quero fazer algumas alterações nisso. Eu gostaria de mudar a cor do fundo. Quero que mais informações apareçam aqui abaixo da imagem, apenas para explicar o projeto em que trabalhei para todos os meus usuários. Vamos fechar essa na seta. Clique nessa imagem novamente, certifique-se de ter salvo seu rascunho antes de fazer isso. Então venha aqui para o painel da caixa de luz e clique aqui. Isso abrirá as configurações do site. É a caixa de luz dentro das configurações do site, que significa que tudo o que você alterar aqui mudará em todo o site. Você tem algumas opções que você pode escolher aqui. Esses são os quatro ícones que exibimos no canto superior direito quando vimos isso anteriormente. Então, amplie a tela, compartilhe, etc. Em seguida, você verá o título e a descrição. Isso é o que será exibido abaixo da imagem que já está configurada para exibição. O problema é que não configuramos isso para esta imagem ou qualquer uma das imagens. Eu vou te mostrar como fazer isso em alguns segundos. Em primeiro lugar, queremos mudar a cor do plano de fundo. Eu gosto desse preto claro. Mas como eu tenho um site muito ousado e brilhante, tipo uma cor mais brilhante e ousada, para entrar lá novamente, você pode vir aqui, clicar neste ícone e escolher sua própria cor. Ou uma maneira mais rápida de fazer isso, ou sobre a qual você tenha controle total, é clicar neste ícone aqui Isso mostrará as cores globais do seu site. Todas elas foram inseridas como configurações padrão. Elemento interno ou cor primária, cor secundária, texto, cor, acento. Se você clicar nesse ícone aqui, poderá alterar essas configurações. que significa que em qualquer lugar do site, se você escolher essa cor primária, ela mudará em todo o site. No entanto, por enquanto, estou muito feliz com essa cor azul brilhante e ousada, A Ion. Eu vou escolher esse então. Para ser honesto, não há mais nada que eu realmente precise mudar aqui. Mas você tem outras opções. Você pode brincar com eles sozinho. Tamanho do ícone de barra alta, vamos definir isso um pouco mais alto. Esses são os pequenos ícones que estavam na extrema direita. Eles eram um pouco pequenos, talvez. Vamos defini-los como 225. Salve isso e volte se precisar alterar alguma coisa ou voltar a ser como era antes. Vamos salvar isso e depois voltar para o editor. Então, vamos clicar nesse primeiro ícone e ver como é. Pronto, vamos clicar na seta. Agora vemos esse fundo azul muito mais brilhante e ousado. Vemos ícones um pouco maiores na parte superior aqui. Eu acho que eles funcionam muito bem. E é ótimo que estejam em branco porque acho que funciona bem nessa cor de fundo. O que você pode ver aqui embaixo, isso é o que vimos há um segundo, o título e a descrição da imagem que será exibida aqui embaixo. O problema é que não o configuramos para essa imagem. Vamos voltar para o editor. Vamos fechar esse aqui em cima. Em seguida, clique na seta e selecione sua primeira imagem. Então pule até aqui. Diz Escolher imagem e clique na imagem. Novamente, isso não mudará a imagem escolhida. Isso permitirá que você edite o título e a descrição. As informações de texto de cada imagem são sempre configuradas aqui, no lado direito. Agora, o título, isso é o que você já pode ver na caixa de luz, foi automaticamente retirado do nome do arquivo. Portanto, tem todas essas pequenas linhas entre cada palavra. Eu só vou tirá-los. O destaque, exclua e, em seguida, sua descrição. Bem, é aqui que você pode simplesmente escrever a descrição do que se trata a imagem. Isso é de uma galeria de arte chamada 51. Eu já escrevi minha descrição. Vou colá-lo aqui. Aí está. Uma sacola com o logotipo 51 mostrando a marca em preto e branco Perfeito. Agora vamos escolher Selecionar. Agora, quando eu clicar na imagem, você verá como ela está agora. Então, vamos clicar na seta. Temos o fundo azul brilhante e, em seguida, temos o título e a descrição. Isso é ótimo. Os usuários podem acessar o site, escolher uma imagem , clicar nela e descobrir muito mais. Clique na sua seta. Agora tudo o que você precisa fazer é examinar cada imagem e fazer isso para cada uma, porque obviamente a descrição é diferente para cada uma. Vamos clicar nesta imagem de edição aqui à esquerda ou no título da imagem. Vamos tirar esses traços novamente e depois escrever a descrição Embora fossem duas capas para mergulho em Fiji patrocinadas pelo Conselho de Turismo da BG E selecione agora, quando eu clicar nesse, você verá as informações completas abaixo. Agora, tudo o que preciso fazer é adicionar isso a cada imagem. Quando isso for feito, estamos todos prontos. Vamos salvar isso. Vamos dar uma olhada nas mudanças. Você verá o que temos. Temos o herói, temos uma galeria animada muito legal que aparece. E quando os usuários clicarem em qualquer imagem, eles verão essa imagem muito maior. E eles descobrirão muito mais informações sobre o trabalho que você fez. 8. Portfólio: rodapé de contato: Então, agora vamos adicionar o rodapé do seu site, o final da página inteira O fim do site, a aprovação. Acho que o que eu quero colocar aqui são links para minhas páginas de mídia social e um mapa para que as pessoas possam vir me visitar. Vamos começar por aqui. Vamos adicionar um novo contêiner. Vamos clicar no Plus. Vamos escolher a caixa flexível. O que eu quero aqui são duas colunas. Novamente. No entanto, quero que a coluna à esquerda seja um pouco menor, porque tudo o que eu gostaria nela são alguns ícones de mídia social. E então eu quero um mapa do meu escritório aqui à direita. Em vez de escolher o 50, 50, vamos escolher este primeiro, vamos mudar a exibição desse pé Queremos que ele se destaque de forma diferente do descrito acima. Obviamente, aqui em cima vamos do rosa brilhante para o branco. Eu não quero que o branco entre no branco. Eu preciso de algo separado, o oposto do branco, preto puro. Vamos clicar nesses pontos aqui. Edite o contêiner, venha até aqui para estilizar, escolha Clássico e, em seguida, vamos escolher uma cor. Clique neste novamente, como eu disse antes, se você arrastar esse pequeno sinal até o canto inferior esquerdo, ficará preto puro 00000 Isso é o que eu quero. Como você pode ver, os dois contêineres internos estão colocados lá dentro, mas estão até a borda. O que eu quero é mais acolchoamento na parte superior e inferior. O mesmo que eu tinha acima. Não estou aqui para avançar. Vamos para o acolchoamento. Vamos desvincular os valores e, em seguida, digamos que é 100 na parte superior e 100 na parte inferior Não, 100, não 1.000. Aqui estamos. Agora temos um pouco de espaço acima e abaixo do que vamos inserir aqui. O que eu gostaria de acrescentar aqui? Bem, eu quero apenas um pequeno título, uma pequena assinatura e, em seguida, alguns ícones de mídia social. Em seguida, adicionaremos o mapa aqui no lado esquerdo. Vamos até o ponto positivo, vamos embora, coloque isso neste contêiner. Eu quero ligar mais um aqui. Vamos mudar a exibição disso novamente. Então, vamos estilizar a cor do texto de fundo preto, você é branco. Depois, a tipografia, gostaria que ela fosse exibida da mesma forma que o cabeçalho na Clique no padrão, escreva em bunge, qualquer tipografia que você escolheu escolheu Lá vamos nós. Eu adoro isso. Uma última coisa. Venha aqui para ver o conteúdo. Novamente, certifique-se de que não seja um H1h2 Perfeito. Vamos deixar as coisas assim. Eu realmente gosto do tamanho disso. Não precisa ser muito grande, como essa aqui em cima, só mais aqui, ponto, ponto, ponto. Abaixo disso, gostaria de adicionar minhas mídias sociais, estou aqui para adicionar elementos. Então você pode encontrá-lo neste grande menu aqui. Mas é mais fácil digitar o widget que você está procurando por ícones sociais Novamente, o dragão caia abaixo do seu título. Certifique-se de ver a linha rosa abaixo. Lá vamos nós. Isso é descartado em todas as configurações padrão. Em primeiro lugar, o alinhamento é centralizado dessa forma. Deve ser alinhado à esquerda para que fique abaixo do m ou mais aqui. Em seguida, a forma é arredondada, tem uma borda curva. Eu posso escolher o quadrado, eu posso escolher o círculo, eu acho que o círculo. Então, em termos de ícones sociais, bem, eu tenho Facebook, Twitter ou X, como é conhecido agora, e Youtube. No entanto, quero mostrar três ligeiramente diferentes. Quero mostrar o trabalho do Instagram, das mãos e do Dribble em qualquer setor criativo Você entenderá o que são Hants e Dribble. Também existem ótimas maneiras de mostrar seu portfólio nas mídias sociais. Para alterá-los, vamos clicar no primeiro aqui, Facebook. Este é o ícone que foi escolhido para este link, obviamente o Facebook. Vamos clicar no ícone. Você verá a biblioteca de ícones do elementor. É aqui que você pode escolher qualquer ícone que gostaria de usar aqui, cobrindo a maioria dos canais de mídia social aqui. O que eu quero é o Instagram. Você não pode ver isso imediatamente. Novamente, basta digitar o nome aqui, Instagram, e escolher Inserir lá. Colocamos o logotipo do Instagram, Twitter. Clique no ícone Nz para o Youtube. Vamos mudar isso para Dribble. Aí está. Esses são os três que eu quero. Lá vamos nós. Isso mostra as três coisas eu gostaria que meus usuários vissem e clicassem. Em primeiro lugar, preciso adicionar o URL de cada um deles. Vamos começar aqui com o Dribble. Como estamos neste caso, você pode digitá-lo ou é mais fácil copiar e colar. Mas deixe-me digitar isso. Ao digitar, certifique-se de incluir HTPS, dois pontos e, em seguida, drible, ripple Em seguida, basta clicar neste pequeno ícone à direita que diz Opções de link. Certifique-se de que, para algo como mídia social, para o site de outra pessoa, ela sempre esteja selecionada para abrir em uma nova janela. Significa apenas que abrirá uma janela separada. Isso significa que as pessoas ainda estão no seu site. Isso não os leva embora. Deixe-me copiar isso. Https aqui. Design de barra do Hunt.com. Instagram. Soletre corretamente. Com slash John Todos os meus links e ícones estão configurados. A única coisa que eu quero mudar que estou feliz com os caçados e os movidos mostrando suas cores oficiais Mas para o Instagram não escolheu uma cor, por quê? Porque o Instagram não é realmente uma cor. É um gradiente com várias cores diferentes? Ele só tem essa cor de fundo preta que realmente não funciona em nosso fundo preto na seleção do Instagram. Aqui, vá para Cor, clique neste menu suspenso e escolha Personalizado. O que eu quero fazer, bem, eu posso escolher qualquer cor que eu quiser colocar aqui. No entanto, como este é o Instagram, e porque é o nosso canal no Instagram, vou escolher uma cor de agenda que escolhi na parte superior. Vamos trazer isso de volta. Vamos criar uma estrutura e, em seguida, ir para o contêiner no topo da página. Então venha aqui à esquerda para estilizar. Lá você verá a cor que escolhemos. Você pode passar o mouse sobre ele. Lembre-se de que a maneira mais fácil e fácil é clicar nela e fazer uma cópia rápida. Em seguida, vá até a parte inferior dos ícones sociais, Instagram. E o que eu quero mudar aqui é a cor primária. Vamos clicar nesse. Cole meu código hexadecimal, está ótimo. Basta clicar na seta aqui. Eu realmente gosto disso. Eles parecem muito legais. Acho que o único problema tenho com eles é que eles são um pouco grandes e não há espaço suficiente, na verdade, entre eles. Se você quiser mudar algo assim, é muito fácil, certifique-se de ter os ícones sociais destacados no. Aqui está um estilo, é aqui que você pode brincar com várias coisas diferentes. Tamanho, você pode simplesmente arrastar este para cima e para baixo para alterar o tamanho da coisa toda. Obviamente, o preenchimento é o espaço ao redor do ícone para que ele seja zerado ao redor dele Muito grande, talvez 0,5 de espaçamento. Isso é o que eu quero mudar: permita-me cinco pixels entre cada círculo. Vamos colocar um pouco, pressionar para cima e para baixo 15. Lá vamos nós. Acho que parece muito melhor. Então, uma última coisa que você pode fazer aqui, que é um ícone muito divertido. Clique nisso. mouse sobre a animação para que, quando um usuário acesse seu site e passe o mouse sobre esse ícone, ele possa fazer uma coisa muito legal Clicar no menu suspenso significa que eles crescem, diminuem. Que eles encolham Apenas brinque com todos esses, quero dizer, alguns malucos aqui. Vamos ver o que temos. Inclinar. Isso é muito legal, na verdade. Sim, basta escolher um aqui que você acha que combina com você e sua personalidade. Eu, assim como o psiquiatra, quero ser assim. Clique na seta. Sim, isso só mostra que eles se movem assim, isso não está ativo e as pessoas têm maior probabilidade de clicar nele. Ok, então essa é a nossa coluna do lado esquerdo ordenada. Agora vamos colocar um mapa aqui. Novamente, venha aqui para ver seu tipo de elemento mais um no mapa de palavras, Google Maps. É isso que vamos adicionar, arrastá-lo e soltá-lo em seu contêiner. Isso é configurado automaticamente para exibir um mapa do Google. Agora, acabou de escolher um local padrão, que é de última hora, Londres, mas queremos mudar isso para onde fica nosso escritório. Agora, para aqueles que já viram o filme Procurando Nemo, vocês conhecerão esse endereço na Austrália, que é 47 Wallaby Vamos colocar isso. Lá vamos nós. Foi escolhida a 47 Wallaby Street que fica em Blackwall, em Nova E o que você pode usar aqui é o zoom. Como você pode ver agora, está bem longe, o que mostrará em que lugar do país meu escritório fica. Mas vamos ampliar um pouco ou diminuir um pouco, ver o que acontece. Eu ampliei o zoom, mudei para 13 e isso acabou de mostrar onde meu escritório está, apenas mostrando as cidades que estão nas praias e toda a água e outras coisas Vamos ir um pouco mais até 15, eu acho. Sim, lá vamos nós. Então, podemos ver que é a Wallaby Street e podemos ver onde ela está em relação a qualquer outra coisa Agora, você também pode brincar com a altura disso, mas como eu não tenho muita coisa no lado esquerdo, eu realmente não quero torná-la muito maior do que é, quero ser honesto. Você pode simplesmente brincar com uma configuração de pixels. Na verdade, acho que é um pouco menor. Talvez 250 pixels. 150. 250, talvez 300, eu acho. Sim, acho que parece perfeito. Agora meu pé está mais organizado aqui, ícones de mídia social e um mapa de onde o escritório está localizado Vamos voltar aqui. Vamos salvar o rascunho e, em seguida, visualizar as alterações. O que você pode ver aqui agora é um site completo. Você verá como isso foi fácil e rápido de fazer. Tudo o que você precisa fazer agora é seguir o que eu mostrei aqui e recriá-lo em seu próprio estilo Sua imagem aqui à esquerda, escolha a imagem que melhor represente você ou seu trabalho. Escolha o título do seu site aqui, talvez o nome da empresa ou seu nome. Em seguida, escolha a exibição da galeria como você gostaria que ela fosse exibida, quais imagens você escolhe e, em seguida, seu pé. Escolha o que você quer aqui, basta ter os ícones de mídia social. Você pode incluir um número de telefone ou endereço de e-mail se quiser que as pessoas entrem em contato diretamente com você. Então, eu só quero que eles saibam onde fica meu escritório e então possam encontrar as instruções de como chegar lá. Do ponto de vista do desktop, tudo está resolvido. Agora, precisamos ver como alterá-lo tanto para tablet quanto para celular. 9. Design de celular e tablet: Temos a versão desktop do seu site ou do seu portfólio totalmente organizada. No entanto, precisamos garantir que ele funcione perfeitamente em computadores, tablets e dispositivos móveis. A forma como o Elementary é configurado é que o tablet herda as seções do desktop e celular herda as seções do Você precisa trabalhar nisso nessa ordem, mesmo que pense que o celular é o trabalho mais importante nisso. Um último significa que você faz tudo funcionar no desktop, edita para tablet e depois edita para celular. A área de trabalho está toda organizada. Vamos clicar nesse ícone aqui para alterá-lo para tablet, e podemos editar o Tablet. Você verá primeiro como tudo parece. Tudo o que ele fez foi copiar exatamente o que fizemos no desktop e alterá-lo para o tablet Acho que isso está quase presente forma como as pessoas veem as coisas em um tablet, seja em retrato ou paisagem. Acho que recriar o que fizemos no desktop funciona No entanto, há alguns problemas com o espaçamento e o tamanho Vamos começar com o herói. O principal problema aqui é obviamente o tamanho do texto aqui, certo? Vamos clicar nesse. Então vamos vir aqui para estilizar, ir para Tipografia. Clique nesse ícone e, em seguida, vamos alterá-lo. Está configurado para 130 pixels, o que é ótimo tê-lo. Aquele grande desktop, não tablet. Vamos talvez ir para cerca de metade desse tamanho, 65. Talvez um pouco maior. Você pode continuar pressionando esta pequena seção para cima e para baixo aqui. Talvez 90. Eu acho que isso funciona muito bem, não é? Acho que ainda gosto daquela divisão de 50, 50 da esquerda para a direita. E eu acho que isso se mostra muito bem. No entanto, meu rosto, uau, você pode ver isso. Mas um pouco, meu cabelo está cortado. Vamos apenas mudar a posição da imagem de fundo que, como você deve se lembrar, está dentro desse contêiner aqui. Clique no ícone cinza ou venha aqui para Estrutura. Em seguida, venha aqui à esquerda e escolha Estilo. Como você pode ver aqui, isso novamente herdou o que fizemos para desktop Agora o temos configurado para o centro central. Acho que centralizar é bom, mas vamos ver como é Centralizado à esquerda, isso perde muito mais de mim. Você pode ver meu cotovelo. Vamos tentar pela direita. Novamente, não é o suficiente. O que eu preciso fazer aqui é escolher a última seleção, que é personalizada aqui. Eu posso brincar com a posição X e a posição Y. A posição Y está boa porque vai até o topo da imagem. E na parte inferior da imagem, é apenas a posição X. Vamos brincar com isso. Arraste esse pequeno ícone da esquerda para a direita e pegue-o para ficar feliz com ele? Acho que talvez vamos chegar a um bom número, 350. Menos 350. Lá vamos nós. Eu clico na minha seta aqui. O morcego é perfeito. Estou centralizado Estou sorrindo e você pode ver meu nome à direita aqui no tablet. Perfeito. Agora, vamos rolar para baixo até essa tela. Agora temos algumas opções diferentes aqui. Acho que isso funciona como uma grade de quatro colunas. No entanto, você pode mudar isso se você mudar isso aqui, isso não mudará no Desktop. Se você vier aqui à direita e clicar em Grade, poderá ver diferentes opções para desktop, tablet e celular. Se quiséssemos que fosse para duas colunas, eu mudaria esse número aqui para dois. Então, se eu clicar na seta, você pode ver que ela está exibindo as imagens de uma maneira diferente. Passou de quatro colunas para duas colunas. No entanto, eu não acho que isso funcione muito bem, porque então você tem espaços estranhos aqui e espaços estranhos Acho que só funcionaria dessa forma se fosse de quatro colunas ou uma coluna. Vamos dar uma olhada em uma coluna. Bem, isso é incrível, realmente, não é? Está exibindo tudo em toda a largura. No entanto, não sei, acho que gostaria de adicionar quatro. Acho que vou colocar isso de volta. E acho que vou escolher uma única coluna no celular, como a temos agora. É o mesmo, está no desktop. Apenas um pequeno problema aqui é apenas o espaçamento entre a borda da tela Nós podemos mudar isso. Só precisamos de um pouco mais de acolchoamento. Vamos clicar nesses pontos na parte superior para editar o contêiner aqui e avançar novamente Ele herda o que configuramos para Se eu clicar neste e digitar um zero , volta para zero. Vamos desvinculá-los então. Panorâmica na parte superior. Bem, eu acho que eles deveriam ser um pouco menores. Talvez 50. Isso é bom. Os 50 piores. Eu só preciso de um pouco de preenchimento à direita e à esquerda Vamos talvez tentar 25 pixels para a direita, 25 pixels para a esquerda. Vamos clicar na seta ou adorá-la. Essa é uma ótima mudança do herói para a seção da galeria. E adivinhe, quando clico em um desses, ainda vejo a tela. Isso é automaticamente alterado para uma exibição de largura. No tablet, essa é a seção da galeria, agora é só o pé Acho que ainda gosto disso aqui. Mas talvez não devesse ter duas colunas. Talvez precisemos mudar isso para uma única coluna. Vamos clicar nos pontos aqui. O que vamos fazer é editar o layout das colunas internas. Somente no tablet, estamos no contêiner principal. Venha aqui para fazer o layout. O que você tem aqui é direção. Como você pode ver aqui, ele vai em uma linha horizontal, duas colunas, uma à esquerda e outra à direita. Se eu clicar neste, ele mudará para vertical. Agora está empilhado e funciona muito melhor em tablets Acho que só precisamos contornar o espaçamento de tudo aqui Primeiro de tudo, vamos para o contêiner principal. Vamos avançar novamente. Vamos fazer o que fizemos acima e brincar com as configurações disso. Na verdade, quero fazer exatamente as mesmas configurações de preenchimento. Vou escrever 50 aqui. Desvincule a alteração, a direita para 25 e a esquerda para 25. Agora temos o mesmo preenchimento que tínhamos acima, um bom espaço de 50 pixels na parte superior e na parte inferior de 25 pixels à esquerda e à direita No entanto, como você pode ver, bem, é como mudar as coisas ao redor do mapa, não ir até a borda. Então, quanto mais aqui, bem, isso está em duas linhas. Eu quero que seja em um único. A razão para isso é apenas o espaçamento dos dois contêineres internos Este foi definido para 33% e este foi definido para 66%, um terço, e 23. '. Agora que eles estão sentados um em cima do outro, porém, isso deve ser 100% para cada um. Se eu mudar isso aqui, não será alterado no Desktop. Vamos pegar esse primeiro contêiner. Clique na sua caixa cinza e aqui, em vez de pixels, altere esses 2% e digite 100 aqui. Agora veremos que a largura total desse contêiner é igual à largura do contêiner de retenção. Vamos fazer o mesmo com o mapa. Enviou 100. Isso parece muito melhor. Agora, eu prefiro muito mais essa tela. Como eu disse, entenderemos que tudo o que mudarmos aqui não muda. No Desktop, você sempre pode voltar e verificar isso. Clique em Desktop, ainda são duas colunas que vão da esquerda para a direita, enquanto no tablet elas estão empilhadas Essa é a nossa versão para tablet. Isso é tudo que um herói funciona. Obras de galeria Obras. Agora vamos dar uma olhada no celular. Novamente, isso herdou tudo o que fizemos no tablet É por isso que essas duas colunas agora estão empilhadas. Vamos rolar até o topo e começar com o aqui. Este é um pouco diferente. Por quê? Bem, porque é móvel. Portanto, uma coluna à esquerda e uma coluna à direita. Isso nunca iria funcionar, não é? É muito fino para isso. O que ele fez foi empilhar as duas colunas uma em cima da outra Tudo o que preciso fazer aqui é brincar com o tamanho e o espaçamento de cada um Primeiro de tudo, vamos mudar o tamanho desse texto aqui. Venha para a tipografia. 90 é muito grande para dispositivos móveis. Vamos talvez mudar para 50, talvez 60. Eu acho que isso é muito bom. No entanto, ainda acho que há muito espaço no topo e não há espaço suficiente para mim no topo. Eu clico na seta que mostra menos espaço lá. O que precisamos fazer é adicionar um espaçador. Esta é uma coluna vazia, essencialmente, não há imagem dentro dela. É apenas o tamanho dos contêineres ao redor, porque estão empilhados, por isso esse é muito menor que o que está abaixo Vamos adicionar um espaçador daqui ao elemento. Clique no espaçador mais escolha, novamente, basta digitá-lo aqui Se você não conseguir vê-lo e arrastá-lo cima da coluna aqui , é aqui que você pode brincar com o espaço. Vamos usar essa barra de arrasto aqui. Então, vamos colocá-lo no tamanho perfeito. Acho que talvez 260 pixels estejam corretos. Vamos clicar na seta. A imagem de mim mesma é muito melhor. E então o texto, bem, ainda está abaixo da imagem e você pode ver tudo de uma só vez. Ele ainda tem o mesmo impacto que vimos em computadores e dispositivos móveis, mas agora está apenas empilhado em vez de em colunas separadas à esquerda ou à direita Agora, vamos rolar para baixo até a seção da galeria. O que é feito aqui automaticamente é alterar essas quatro colunas para uma única coluna no celular. Isso é definitivamente o que queremos. À medida que rolamos para baixo, você verá como tudo isso funciona. Não há espaços aleatórios entre cada tablet. Ele tem a mesma configuração entre cada imagem. Isso funciona muito bem. Novamente, isso é herdado do preenchimento que configuramos para o tablet Vamos mudar isso para dispositivos móveis. Dê um pouco mais de espaço. Vamos rolar até o topo. Clique nesses pontos ou escolha aquele contêiner aqui na estrutura, se você souber onde está Como você pode ver, ele trouxe o 50 e o 25. Acho que é demais em todas as bordas. Acho que talvez uns 15 pixels ao redor. Sim, eu prefiro muito mais isso. Não acho que precise de um grande espaço na parte superior e não precisa de tanto espaço aqui. Fora, parece fantástico. Novamente, deixe-me clicar em uma dessas telas como essa. Agora temos a imagem na parte superior e o texto abaixo. Mas ele é convertido perfeitamente para uso em desktop, tablet e celular. Hero está procurando ótimas galerias, aparência fantástica, para ser honesto Acho que essa seção do Pota também está funcionando muito bem. Tudo o que vou fazer é clicar nesses pontos. Altere essa configuração para a que eu configurei para a galeria acima, apenas para obter uma consistência de 15. Acho que funciona muito bem à esquerda e à direita. No entanto, por ser o rodapé, acho que precisa de um pouco mais de espaço acima e abaixo apenas para dar ao texto e aos ícones um pouco mais de espaço para respirar Vamos desvinculá-los então. Vamos ver na parte superior, talvez mude para 30. O dobro na parte inferior, também 30. Lá vamos nós. Eu adoro isso. Era muito simples pegar tudo o que você fazia no desktop e alterá-lo levemente para tablet e celular. Vamos dar uma olhada em todos os três agora. Este é o Desktop, está ótimo. Novamente, nada mudou porque fizemos isso nessa ordem. Começamos com o desktop, depois mudamos para o tablet e depois para o celular. Isso é desktop. Isso também é tablet. Perfeito. Isso é móvel. Adoro isso. Então agora você tem um site de portfólio completo. Só mais uma coisa que precisamos fazer. Vamos fechar isso e publicá-lo. Vamos fazer isso ao vivo. 10. Lance seu site: Então, agora que seu site foi publicado, venha até o ícone do Elementor à esquerda e saia para o Wordpress Em seguida, clique aqui neste ícone do Wordpress. E então, uma última coisa para configurar, aqui para ver a aparência e escolher personalizar. Ignore o que você vê aqui à direita. Essas são apenas configurações básicas do wordpress. Essas são coisas que você pode fazer fora do Elementor, mas sua página não será exibida da maneira que podemos vê-la à direita Agora, a única coisa que eu quero mudar aqui é a identidade do site. Então clique neste. Como você pode ver aqui , está no título do site. Isso é o que eu configurei no Elemental anteriormente. No entanto, o slogan diz apenas meu blog WordPress. Isso meio que entrou automaticamente. O que eu realmente quero escrever aqui é apenas uma frase sobre quem eu sou e o que posso oferecer aos clientes. Então, vou colar esse aqui. E eu disse John Wolfgang Miller, estúdio criativo que trabalha com impressão digital e Basta se resumir em uma linha. Isso ajudará quando as pessoas estiverem procurando por você no Google. Depois, as duas últimas coisas, seu logotipo e o ícone do seu site. Novamente, esse é o logotipo da sua empresa. Ele não aparece no seu site no momento, mas pode aparecer nas pesquisas do Google. E o ícone do seu site é o pequeno, como você pode ver aqui, que aparece nas guias do navegador quando você está pesquisando na Internet Se você tiver várias guias diferentes abertas, será o pequeno logotipo que está ao lado do título do seu Então, para escolher isso, vou usar o mesmo logotipo para ambos. Clique aqui para selecionar o logotipo. Se você já fez o upload, escolha-o na biblioteca de mídia. Caso contrário, clique em Carregar arquivos e encontre-o no seu computador. Este é o que eu escolhi. Este é o logotipo da minha empresa que tem minhas iniciais nele. Então eu vou escolher isso, selecionar. Ignore o corte. Não preciso cortar a imagem. Tem a forma e o tamanho perfeitos. E então vamos escolher o ícone do site. Vai ser exatamente o mesmo. Só para esta, você verá que as dimensões sugeridas da imagem são 512 por 512 pixels Esse é exatamente o mesmo tamanho que eu defini para este. Em seguida, basta clicar em Publicar. Em seguida, clique aqui no ARL e acesse este chamado Configurações da página inicial É aqui que você escolhe qual página de todo o seu site será a página inicial O primeiro que todo mundo vê quando visita seu site. Então, aqui, escolha uma página estática e, nesse menu suspenso, escolha aquela que acabamos de configurar Então, aqui eu o chamei de John Wolfgang Design. É isso mesmo. Seus sites agora estão prontos para uso, clique aqui para publicar. E então feche esta página aqui clicando no X. Agora você tem um site ativo, e se quiser meu feedback sobre o site Build, basta usar o nome de domínio que WoZma lhe deu quando você se inscreveu No entanto, se esse é um serviço que você deseja disponibilizar para que todos no mundo vejam, podemos alterar o nome de domínio para um que você tenha comprado em outro lugar. Então, para fazer isso, entre novamente em sua conta WoZma e clique nos aplicativos implantados recentemente no site que acabamos E, em seguida, aqui embaixo, clique em Configurar domínios. Então é aqui que você pode adicionar um nome de domínio que você pode ter comprado de outro lugar. Um dos lugares mais populares para comprar um nome de domínio é algo como o Go Daddy Portanto, se você comprou isso, pode direcioná-lo para o site que acabou de criar. Então pegue esse nome de domínio e coloque-o nesta caixa aqui. E, em seguida, clique em Adicionar, você tem algumas opções aqui. Vá em frente com a versão recomendada no topo aqui, o que significa que ela funcionará com a versão WWW e sem a WWW E você chegou até esta página, e essas são as duas linhas de código que você precisa adicionar ao seu provedor de DNS Então esse é o provedor do sistema de nomes de domínio, então talvez o Go Daddy crazy domains, um desses serviços online Qualquer um desses que você esteja usando, se não estiver claro onde inseri-lo, envie-me uma mensagem aqui, e eu lhe direi, para esse serviço específico, como configurá-lo Então, temos que entrar e configurar esse código de registro A aqui e esse registro de nome C aqui. E quando tudo estiver pronto, basta clicar em Atualizar em ambos Pode levar até 72 horas para realmente funcionar, mas isso normalmente acontece em cerca de uma hora. Portanto, continue testando seu nome de domínio e, quando tudo estiver configurado, é isso que você verá. Ele levará os usuários ao site que você configurou usando o nome de domínio correto, e você poderá compartilhá-lo em todo o mundo, nas mídias sociais, contar a todos os seus amigos. 11. Obrigado: Obrigado por assistir toda essa aula. Espero que você tenha aprendido muito mais sobre elemental e agora tenha um portfólio incrível. Quando o site estiver pronto, certifique-se de publicá-lo aqui na seção do projeto abaixo. E eu lhe darei meu feedback imediatamente. Se você tiver alguma dúvida sobre alguma coisa na turma, poste isso em discussões e eu responderei o mais rápido possível. E clique no meu nome abaixo para ver o meu perfil completo do Skillshare. Agora você vai ver todas as minhas aulas, mais das quais são sobre elementar e também se perguntar sobre o upload de imagens para o seu site. E não se esqueça de me seguir. Então você descobre toda vez que eu carrego uma turma nova. Ok, isso é tudo. Tenha um ótimo dia.