Como criar um site de portfólio de designer no Wordpress com ferramentas gratuitas em um dia

1. Trailer: como criar um site de portfólio no Wordpress com a versão gratuito do Elementor: nas pontuações. Vou dar-lhe uma visão em profundidade sobre a versão livre do elemental ou assim. Isso significa que qualquer um pode começar a trabalhar neste curso. Então, quem sou eu? Eu sou Reno. Sou designer da Holanda. Comecei a projetar há 10 anos e estudei design na Universidade de Ciências Aplicadas . Então demônios muito legais. Então esse é o meu passado. Agora. Eu também estou vendendo sites por, em média, 1000 a 5000 euros ou dólares. E eu também estou ensinando on-line o que são realmente desfrutar. Eu fiz um site que você pode ver aqui, onde eu usei quase todos os elementos livres fora da versão gratuita do elementary. Todo este site é feito dentro da versão gratuita do Elemental. Como você pode ver, há muito fora coisas legais acontecendo neste site e isso é feito com a versão gratuita . Então, neste curso, trabalharemos com este design. Caiu thes são quatro páginas e você não tem que ter um projetado para gostar deste. Aqui é Adobe 60. Você poderia apenas também trabalhar muitas vezes imagem, Mas eu vou mostrar-lhe como trabalhar a partir de oito design existente que você fez ou alguém fez e transformá-lo em um site real. E se você tem que habilidade, você será capaz de criar aqueles sites que você pode vender por centenas e milhares de dólares. E o site que vamos construir neste vídeo. Eu usei o site dele agora, então não é um projeto falso. É um projeto real em que você vai trabalhar. Então, o que faz essa diferença no curso? Bem, eu assisti muitos outros elementos ou cursos sobre DWhite. A maioria deles faz É eles apenas importar modelos pré-fabricados, que eu também vou mostrar-lhe como fazer. Mas você importou um modelo que eles editaram, e é isso. Mas não é assim que funciona no mundo real, porque com projetos reais você vai ter um design caído de outra pessoa, ou você projetou algo você mesmo, e você precisa transformar esse design em um site, Não o contrário. Então é isso que eu vou mostrar a vocês neste curso. Ok, então agora o que vamos cobrir neste curso no primeiro capítulo? Nós vamos ter certeza de que você tem sua configuração reprimida pronto para trabalhar com, em seguida, uma seção para nós estávamos indo para instalar um mentor e instalado os plugins que são importantes . Na Seção 3. Vamos projetar a home page dentro do Elemental ou um esperar um vídeo separado para cada seção nessa página que vai ser apenas naufrágio Viet e cair como eu não ia ser muito difícil e uma vez que você está familiarizado com elemental, ou vamos tornar o rosto de casa responsivo. Então, isso significa também bons poucos ervas no celular e tablet. E então vamos passar para as outras páginas, que será muito mais fácil porque agora podemos copiar coisas da nossa página inicial para as outras páginas. E depois, por fim, vou mostrar-te como podes colocar a vida do teu website em cópias de segurança instaladas e tornar a experiência do Pre um pouco mais agradável. E há também uma seção de bônus onde eu vou mostrar-lhe o que você pode fazer com elemento ou pro e como obter o seu site fazer o próximo nível. Então eu projetei este tribunal para pessoas que não sabem como ir, mas estão interessadas em ganhar dinheiro como um Web designer apenas a partir de seu laptop. Então, para ter certeza que você obtém um resultado de suas pontuações, eu forneci todas as imagens. Como eu disse no meu site em um link de download dentro. Claro, Então você também pode construir um site e você pode, mesmo se você quiser usar o meu design, mudar as cores, mudar o telefone, e usar esse design para o seu próprio site portfólio. Tudo bem. Espero vê-lo lá dentro, é claro. 2. Uma visão + o que você vai precisar saber: Tudo bem. Bem-vinda. Dentro do curso, você está oficialmente no curso. É super incrível você estar aqui agora. Vamos construir este site juntos. Você provavelmente já viu o site no trailer. Mas vamos mergulhar no que vamos criar juntos ou certo. Então, quando você entra no site e o site está carregando, uh, as seções vêm para colocar animação feminina. E há um vídeo em segundo plano que está a ser reproduzido. Você tem o efeito onda escola, tem mouse sobre efeitos quando você está rolando elementos é construído quando você percorrer o site. Hum, você sabe, eu testei algumas animações diferentes. Aqui está um temporizador ou um número animado, os depoimentos que vieram com um destino e, em seguida, algo com uma ligeira animação. E então há a seção de portfólio, e cada página tem essa animação agradável em animações. Há itens aqui, e como você pode ver, há um monte de mouse sobre efeitos. Estes podem ser links, mas o agora é apenas um texto. Há comida ou em cada página. A página sobre tem seções livres. Também estamos sobrepondo imagens com barras de toque legais. Aqui, há uma galeria de imagens. E então há o F A Q, que você pode abrir e fechar como quiser s. Oh, isso é muito legal. E, em seguida, na página de contato, temos um Google Maps e você pode definir este mapa para qualquer local ou mesmo rua específica ou casa ou escritório que você deseja. E, em seguida, aqui estão as informações de contato com um número de telefone e e-mail e mídia social Aikens. Tudo bem, então o que precisamos entender para fazer este site? Tudo bem, então este site é feito com elementar ou mas elementar funciona em vour pra Então, como é que tudo isso funciona em conjunto? Então eu fiz um pequeno esboço no iPad, que eu quero mostrar a vocês. OK, então todas as nossas páginas são construídas com l. Um mentor e elementar não pode correr sem uma equipe porque é assim que somos o trabalho de imprensa. Então, há uma equipe. Hum, e havia pris. Então nós somos imprensa tem uma equipe e um mentor está usando a equipe e nós vamos usar a equipe no site para criar este menu no topo, e todo este pacote tem que estar seguro em algum lugar na Internet para que todos possam acessá-lo. E é isso que vamos hospedar. Então hospedagem é usar um servidor em algum lugar na Internet, onde todos os seus fells ou armazenados e todos podem acessar o seu site 24 7 mortes eso. Para que serve a hospedagem? E, em seguida, para que as pessoas cheguem à sua hospedagem, você precisará de um nome de domínio. E um nome de domínio é apenas um nome. É que você também é, por exemplo, é o seu nome ponto com eo nome de domínio é apenas um link para todos os fells em sua hospedagem. Então, os espectadores podem ver as páginas que são públicas e você pode ver ver ver a imprensa. Certo, essa é a primeira coisa que faremos no próximo vídeo. Vamos nos certificar de que recebemos isso. Vou te mostrar a maneira mais fácil de fazer isso. E eles iam instalar sobre a imprensa naquela hospedagem para que pudéssemos começar. Tudo bem, então é você no próximo vídeo 3. Escolhir um bom nome de domínio: Tudo bem. Bem-vindo de volta Nesta segunda figura, vou mostrar-lhe como você pode obter seu próprio nome de domínio e hospedagem para o seu site. E essa é a única coisa que você tem que pagar se quiser um site, vamos usar ferramentas grátis do Onley neste vídeo. Mas você não pode ter a vida do seu site no ar. Você sabe, hospedar todo mundo no planeta Terra tem que pagar por hospedagem porque, como eu expliquei no vídeo anterior, seu site é um armazenado em um servidor e uma empresa está mantendo esses servidores on-line 24 7 Eles têm suporte se você tiver um problema. Então essa é a única coisa que você tem que pagar e eu vou te mostrar a maneira mais barata de fazer isso é porque você não quer gastar muito dinheiro quando você está apenas começando. Tudo bem, então vamos começar. Eu vou ao meu site porque eu fiz uma lista para você com todos os links que você precisa para projetar e construir sites. É no meu site vivendo com pixels dot com, e então você clica em links, ou você apenas vai viver com pixels dot com links barra. E eu também vou colocar esse link na descrição abaixo deste vídeo s O. Esta é a página que eu uso Teoh colocar todo o enxofre que são recomendados em meus sites e você sempre pode acessá-lo. E eu também coloquei algumas explicações em cada ponto sobre por que eu acho que este é o melhor. Então eu recomendo que você salve este link como um marcador em seu computador em seu navegador para que você sempre possa excedê-lo. Então nesta página, eu vou, você sabe, você sabe, colocar os melhores provedores de domínio de hospedagem têm uma inicialização, os melhores construtores de página. Eso você sempre terá um lugar onde todos os links são. Tudo bem, então nesta página, a primeira coisa que você verá seu terreno terreno terreno, é, é, na minha opinião e muitos outros uh, o melhor provedor de habitação do mundo eles são o número um recomendado pela repressão, que eu acho que é você sabe, que isso só diz o suficiente sobre como eles são bons. Eles têm suporte 24 7. Então, se você tiver um problema, eles podem ajudá-lo com telefone e jato. Eu transferi todo o meu site para o terreno do site porque eles têm apenas grande suporte e eles são super baratos em comparação com o que está lá fora. Eu estava sendo e provedor de hospedagem. Isso foi muito, você sabe, técnico. E eles tinham, você sabe, nenhum apoio Fiat ainda. E se você enviar um ticket de suporte, você teve que esperar dois dias ou dias livres, e isso não é o que você quer. E eu também estava pagando $5 por mês para cada site em, e eu vou mostrar como isso é barato, tudo bem, então este é um dos melhores do mundo e um dos mais baratos. E, você sabe, essa é também a razão pela qual eles são tão populares, é claro, mas é super legal. Também é super agradável é que você pode começar imediatamente com a maioria dos provedores de hospedagem. Quando você compra sua hospedagem, eles vão deixar você esperar, como um dia ou algumas horas, e você só quer começar imediatamente. Por isso, recomendo vivamente o terreno lateral. Acho que é o melhor agora do mundo. E se vou mudar de ideia, vou mudar esta página, mas por enquanto, corro todos os meus sites aqui em um super grande. Então vamos clicar na Psych Road Hospedagem e mistura intolerante. Isso é certo para você. Tudo bem, então aqui você pode ir para reprimir hospedagem, e eles têm pacotes grátis. Tudo bem, eu estou neste pacote, mas você não precisa começar com este pacote. Se você quiser fazer um realmente barato, você pode começar com este pacote. Mas o que é super legal sobre este pacote é que ele tem sites ilimitados em e com o site ilimitado. Você não tem que pagar, você sabe, $5 por mês extra por um novo site, como eu fiz com meu antigo provedor de hospedagem. Paguei uns 50 dólares todos os meses pela hospedagem da Onley, e agora só tenho 6 dólares por mês, e isso é super barato. E eles têm melhor apoio. Eles são mais rápidos. Então eu não vou voltar. Ok, mas se você é novo em dias e você não quer gastar muito dinheiro e você só quer seu primeiro site no ar, eu sugiro que você vá com este agora mesmo. Eu também vou usar este aqui para te mostrar a maneira mais barata de fazer isso. E este é o preço para a hospedagem. E você também precisará de seu próprio nome de domínio. Você quer ter seu próprio nome ponto com, por exemplo, Pode primeiro e sobrenome é reno de boer dot com. E eu não quero mais ninguém com um site que é, você sabe, o conselho é chamado porque é meu nome pessoal, mas isso é com você. Eu sugiro que você pelo menos pelo seu nome pessoal, você sabe, para a opção mais barata eso nós vamos ter este plano em que vamos clicar, pegar o plano e nós vamos inserir o nome de domínio aqui. Se seu nome é John Esteticista, você vai digitar aqui e então você pode na extensão. E se você quer ponto com, você vai continuar. E como podem ver aqui, John Peterson é, claro, o nome que mais pessoas têm. Então o ponto com não está mais disponível. Então você pode escolher um diferente ou apenas, você sabe, colocar algo atrás disso que você quer eso Agora eu tenho que escolher outra coisa, mas meu nome não é nervoso, Edison, mas eu só queria mostrar você, como, o que acontecerá se o nome não estiver mais disponível. Eso Agora, eu só vou com o sem portfólio ponto com, e eu espero que ele esteja disponível. Sim, fora. Agora, diz “ parabéns”. Reno portfolio dot com está disponível. Então isso é o que você também tem que fazer, como, escolher um nome de domínio. Se o seu próprio nome não estiver disponível, escolha outra coisa, e então você receberá esta tela onde você verá parabéns, e você precisará se sentir em suas informações. Então agora eu vou me sentir na minha informação, e então eu vou voltar para você quando eu preencher a informação. Tudo bem, tudo bem. Agora eu vim para a informação de pagamento. Você pode apenas pagar de carrinho. E eu vou usar o ideal porque eu estou na Holanda neste sistema de pagamento aqui, mas você pode apenas sentir sua informação de cartão de crédito. E eu vou usar o ideal porque eu estou na Holanda neste sistema de pagamento aqui, Ok, então agora aqui, você precisa escolher o que você quer. E eu vou te mostrar a maneira mais barata de fazer isso. Estamos na mistura mais barata, que é começar. O data center está na Europa. Mas você precisa mudar isso. Qual é o mais próximo de você? O período. Tudo bem. Este é um interessante, porque isso mudará o preço. Eles lhe darão um grande desconto se você, hum, se você comprá-lo por um período mais longo. Certo. Então, quanto mais meses você compra, mais desconto você recebe, o que é um ótimo sistema. Porque se você já sabe que você quer que você saiba, este seu site pessoal por pelo menos dois anos, você poderia apenas ir com 24 meses e, em seguida, você vai obter a hospedagem por 24 meses para este preço, e isso é Isso é muito barato. Então vamos colocá-lo em 12 meses e ver qual é o preço. Aqui você pode ver o preço, e isso é para um ano inteiro, certo? Aqui você pode ver o preço, e isso é para um ano inteiro, Então você está com essa pressão vai ter um domínio, e você vai ter a hospedagem por 12 meses, e se você, em seguida, ir para 24 meses, o preço será maior. Mas, sabe, se você calcular o preço por dois anos, vai ser mais barato porque você está recebendo 24 meses por dois descontos, certo, porque se você vai fazer 12 meses, Você vai pagar por, você sabe, quatro euros ou dólares por mês. Mas depois de 12 meses, você vai para isso. Se você sabe que você quer este site por pelo menos dois anos ou mesmo três anos no ar , é apenas um Teoh mais inteligente, você sabe, fazer esta opção. E então, sim, você terá algum investimento maior no início. Mas este é o preço para anos livres, então você não receberá a conta todos os meses. Mas se você acha que este número é muito alto para agora e ele acabou de ganhar um teste, Se isso é algo para você, você também pode optar por tentar um mês. Hum e então eles vão, você sabe, US $12 para a configuração, e então será apenas dólares sujos. Então essa é a opção mais barata que você pode obter. Mas lembre-se que será, ah, ah, preço mais alto se você não definir um período para 12 meses ou 24 meses. Então, para mim, este nome de domínio é apenas um teste para, você sabe, para o show de partituras. Vou fazê-lo com isto, mas para o meu próprio site. Acabei de comprar o T-36 meses. Então aqui você tem algumas outras opções. Você pode apenas verificar a privacidade do domínio. Será um pouco mais caro, mas isso permitirá que você esconda seu nome porque algumas pessoas terão um site que não é seu nome pessoal, como eu f aqui. E então eles não querem seu nome pessoal conectado ao nome de domínio. Então, se você quiser isso, você pode, você sabe, verificar isso e, um então, se você sabe que alguém vai procurar on-line para quem é o proprietário fora deste domínio, eles não vão encontrar Seu nome. E se você não verificar isso, eles são seu nome pessoal pode aparecer nos resultados. E eu não acho que seja um grande problema que eles saibam que sou eu, especialmente não porque este é um site pessoal. Então não vou comprar este scanner lateral. Também não vou comprar isso. Nunca a imprensa tem muitas ferramentas para fazer isso, então eu não vou usar isso, e eles também têm uma garantia de dinheiro de volta. Então, se você realmente não está feliz, você pode apenas pedir seu dinheiro de volta. Hum, então agora, eu só vou confirmar que eu li e concordei termos deci coroa, o que eu não fiz. Quero dizer, quem faz isso? Eu confio neles. E eu não gostaria de receber fora. Eu não gostaria de receber ofertas, e eu vou pagar agora. Tudo bem, acabei de pagar e eles agradecem por comprar. Sua transição foi completa. E agora eu preciso verificar meu e-mail porque eles me enviaram um e-mail. Tudo bem, então aqui está. Aqui está o meu e-mail do Site Ground. E agora eu acabei de receber outro e-mail deles com a minha sorte. E isso é bom. Isso é perfeito. E agora recebi outro e-mail deles recentemente. Você resistiu. Para garantir que seu nome de domínio permaneça ativo, clique no link a seguir. Certo, vou pegar o link, e você só precisa esperar. E então você precisa verificar se este nome de domínio é para você que eu vou clicar em verificar informações porque a informação é boa. Tudo bem. E agora foi verificado. Então eu preparei. E, em seguida, no próximo vídeo, estamos tipo de imprensa prateada em nosso site de insights de hospedagem, terra 4. Como instalar o Wordpress em um hospedagem e domínio: Tudo bem. Bem-vindo de volta ao episódio livre. Neste episódio, vamos instalar o WordPress no local eso. Vamos voltar para o nosso e-mail que recebemos e eu recebi muitos e-mails deles , mas eu só preciso deste e-mail informações importantes sobre o seu novo plano de hospedagem. Então aqui está a informação de login. Vou clicar no meu site com ponto, e depois vamos para o Logan, o nome de usuário. Tenho isso no meu e-mail. São só os meus e-mails. Vou estar morto, e vou apagar isto. Só o meu e-mail. Então eu vou para a próxima, e a senha está aqui em cima, a que você escolher durante a inscrição. Então meu google chrome jos uma senha para mim. Então vou usar isso. Mas é claro que você precisa escrever isso. Então eu vou assinar agora, e teremos algumas animações legais. E agora esta é a nova experiência de arrastar terreno local. É tão bom. apenas uma semana, Dave atualizou todo o sistema e parece tão legal. Eles têm as administrações da escola aqui, e é tão fácil agora insultar seu site. Então este é William. Procure na sua conta. Aqui você verá todos os seus sites aqui. Você pode ver suas informações de cobrança, mas agora vamos apenas configurar nossos primeiros sites. Então, vamos clicar no site de configuração, e então vamos, é claro, começar um novo site, e então algumas opções Bem, estará na parte inferior. E então vamos usar o Wordpress, certo? Se você já sabe que você também quer uma loja web com por imprensa, você pode escolher isso, Mas agora vamos apenas começar com WordPress, tudo bem? E agora precisamos criar nosso olhar ver pressionado em eso. Vou usar o mesmo e-mail e não a mesma senha. Vou fazer uma melhor palavra diferente para a nossa imprensa Le Guin. Eles têm que gerar opções. Então, eu clico nisso e vou copiar isso. E agora vou guardá-lo em algum lugar nas minhas anotações. Então sugiro que proteja isso. É ainda melhor salvá-lo em um gerenciador de senhas. Claro, eu tenho uma senha aqui, mas este é o log em seu nome e é a melhor palavra que você tem que seguro s Então este é o seu WordPress olhando certo? O olhar se nós apenas usado para bloquear Inish seu site chão olhando para a direita. Então agora nós vamos clicar, continuar, e então eles podem você sabe, eles ainda vão tentar te vender ainda mais. Mas não queremos isso. Então não vamos adicionar isso e vamos apenas clicar em terminar. E agora está criando meu site. Isso significa que no fundo agora, está na venda de repressão. Não temos que fazer nada. E isso é tão, tão fácil, como, antigamente, você terá que baixar um zip de reprimido em ork que você tem Teoh extraído em uma pasta blá, blá, Blá. E isso foi apenas alguns cliques. Basta escolher um nome de usuário e senha, e agora ele está instalando. Então vamos esperar por isso, e quando terminar, vamos para o próximo passo. Tudo bem, então agora está feito, e vamos clicar no site de gerenciamento. Então este é o lugar onde você pode adicionar contas de e-mail, por exemplo. Quero outro e-mail. Então, se eu quiser ter uma informação no portfólio de Torino dot com, eu posso criá-la aqui. Todos os fells são do seu site estão aqui. E aqui estão também algumas análises ah. Mas não vamos usar no final das pernas fora do local. Então agora podemos ir ao nosso site, que, que, no meu caso, é City No Portfolio Dot Com. E eles estavam indo para a imprensa de carga, que sempre é WP Dash Atzmon. Certo, agora vamos entrar com nosso nome de usuário, que é apenas meu e-mail e a senha que acabei de salvar. E agora vamos entrar. Vou guardar isto por agora, para não ter de o escrever o tempo todo. E agora estou no site do Rippers. Vou clicar em iniciar agora e agora o terreno do site quer que eu instale 18. Eles têm todo esse pacote inicial, mas você sabe, eles vão instalar um monte de coisas que você não precisa, então eu vou clicar em sair. Eu não preciso de tudo isso. E agora estamos à vista de er pré e dentro de um verbo como eles vão. Como você pode ver, eles instalaram coisas fora do ciclo em que nós não precisamos. Então, no próximo vídeo, vamos limpar isso. Vamos nos preparar para a imprensa para começarmos a construir nossas páginas. Está bem , vejo-te no próximo vídeo. 5. Noções básicas do Wordpress: Tudo bem. Bem-vindos de volta ao próximo vídeo deste vídeo, vou mostrar-vos o básico sobre o Presidente. Meio que limpe tudo isso. Então é assim que parece. Quando você olhar para eram imprensa, você vai ver. Você sempre verá este bar em cima e verá este bar aqui. E este é apenas um tipo de navegação rápida. Você realmente não usa isso. Às vezes você usa. Mas a maior parte do tempo você vai usar este bar. Eso Aqui estão todas as suas páginas aqui. Todos os seus barcos de bloco. Se você vai começar um quarteirão, seus barcos estarão aqui. Se você carregar uma imagem suas imagens, seu vídeo derruba seu Aikens, tudo isso estará aqui. Se você tem um bloqueio, você do atirador, vai estar aqui. Os pais aqui são os temas que você instalou e o menu. Então vamos usar esse e aquele e, às vezes, este, os plugins. Também é muito importante. Esse é o lugar onde você pode instalar plugins porque a imprensa é apenas uma estrutura, certo? Você poderia poucos onde pressionar como apenas um tijolo paredes de sua casa, mas os plugins, você apenas instala uma porta que você instala, uh, as janelas, hum, e tudo o mais. É assim que eu gosto do Teoh. Você sabe, explique. Usuários, se você tiver mais usuários, isso vai executar seu site. Além de você, você pode fazer isso aqui. Ferramentas. Não vamos realmente usar esse e as configurações. É a primeira coisa que vamos fazer agora. Vamos otimizar as configurações aqui, então vamos embora. Vamos começar, é claro, claro, com o General. Certo, então a primeira coisa que esse propósito fará é nomear seu site de propósito. Eso Diabo diz que se chama meu peito de trabalho. Mas você sabe que quer seu próprio nome aqui. Então, para mim sentado um portfólio e você também pode ver que ele muda aqui. Portanto, sabemos portfólio e o declínio também aparecerá em alguns lugares. Por exemplo, se você passar o mouse sobre seu navegador, às vezes ele aparecerá. Então, aqui eu também colocaria algo que é representado direito ble, e não apenas outro sobre site de imprensa. Algo como o meu portfólio de designers. Ok, então aqui você não tem que mudar nada. Sabe, você pode mudar o tempo se quiser, mas eu vou deixar assim. Então, vamos apenas clicar, salvar. Tudo bem. Então agora é seguro, e a última coisa que eles querem fazer é ir para suportar meus links, e então nós queremos mudar isso. Faça o nome da vangloria. Por que é isso? Porque se você fizer e você ambos e seus barcos de bloco, ele irá gerar um link super longo sobre. Isso não é realmente o que você quer. Você só quer limpar e simples. Então eu sempre mudei seu nome para postar. Então, quando você faz um post e você liga com ah Mei sabia ah website é apenas o seu site ponto com barra meu novo site. Então também é quando eu sempre mudo. Tudo bem, então é isso. E agora vamos nos conectar porque o site cresceu já instalou ah, muitas coisas em nosso site, o que não queremos. Então vamos desativar esse Blufgan, e vamos desativar esse plug in, e agora podemos voltar para o painel. Você vai ver que este é o wordpress normal. Você sabe, tela inicial que você quer. Você não quer toda a pelúcia. Então vamos voltar a ligar só para clicar no nome e vamos apagar esses dois. Então basta clicar no lead e clicar em, OK, Agora, também, também, para tornar as coisas mais fáceis, ver press está testando seu próprio tipo de construtor de página, que não é realmente bom ainda eso eu sugiro que você acabou de instalar a versão antiga que é chamado de editor clássico. Então estávamos apenas nos plugins. Eu clico em Adicionar novo e aqui é onde você pode adicionar e encontrar plugins para instalar em seu site Ondas Você pode ver cinco milhões de pessoas também decidiram que eles gostam do editor antigo sobre imprensa melhor do que a versão mais recente, propósitos certos também tentando inovar. Mas muitas pessoas gostam da versão antiga. Então eu sempre instalo a versão antiga nos sites que criei porque é mais fácil. Apenas confie em mim desta vez. Você sabe, cinco milhões de pessoas também fizeram isso então também o que você quer fazer é que você quer proteger seu site, é claro. Agora diz que não é seguro e algumas pessoas receberão este aviso vermelho na tela. Isso não é o que você quer. Então vamos instalar um bloqueio simples que irá torná-lo SSL. Isso só funciona problema se você estiver hospedando Provedor, claro, fornece SSL, mas você só quer que o pequeno bloqueio verde em seu site. Então, basta ir a um plug ins e em novo e, em seguida, basta digitar S S L como eles iam tornar o site seguro. Hum, este é o que é as super luzes e puxar plug em uso. Clique em instalar. Agora SSL realmente simples é chamado e você pode apenas clicar em ativar. E agora, se você clicar em Ativar como uma célula e clicar em Atualizar, você verá esse boom. Agora o site é seguro, você sabe, e isso também é o que é tão legal sobre o terreno local. Você sabe, com alguns cliques, seu site é seguro e às vezes você só tem que ir nessas configurações e blá, blá, blá. Então agora precisamos fazer login novamente. Eso nós tornamos nosso site seguro e um pouco mais fácil. E agora nós também queremos que o básico foram pressionar um direito de segurança porque nós não queremos que nosso site seja hackeado, então eu vou mostrar a vocês como fazer isso realmente fácil. Eles estavam indo para voltar para New Blufgan, e eu testei muitos plugins de segurança para WordPress. Mas o que eu acho que é o melhor são I equipes. Também é muito popular. Como você pode ver 900 mil notas abaixo. Há também um que é muito popular. Isso se chama “amigos do trabalho”. Eu usei isso por anos, mas está tornando seu site mais lento, e este também é super bom. Mas não é tão pesado. Então você quer uma conexão de segurança que seja rápida. Isso não vai atrasar seu site. E isso é cura, é claro. Então, vou instalar a segurança da equipe por enquanto, e vou ativá-la. Tudo bem, então você vai ter a coisa da segurança aqui. Alguns plugins vão, você sabe, em um pequeno bar neste processo de trabalho em Minbar. A maioria não o faz porque senão isso se tornaria uma bagunça. Mas plugging de segurança tem por isso basta clicar na segurança e, em seguida, você vai ter esta colisão para cima e você vai precisar para proteger o seu site. E se você clicar e protegido, então seu site está protegido. E lá você também pode se juntar DIY Network Bruce para proteção. Isso é super legal, porque com a proteção de força bruta da rede Net, eles só têm toda essa rede de sites diferentes conectados juntos que vão ajudar uns aos outros a proteger uns aos outros. Certo. Então é isso que você quer ativado. Então agora você simplesmente não pode clicar em fechar. Não clique neste porque já fizemos isso. Clique em Fechar e a última coisa que você deseja ativar é 404 detecção basta ativá-lo . Confie em mim que z bom. Tudo bem. E agora a última coisa que queremos fazer é tornar o site privado porque agora, se alguém pode acessar o site, é assim que parece, porque ainda não instalamos elemental e uma equipe, então é realmente artístico, mas todos podem acessá-lo agora. Assim como o que você não quer quando você está testando páginas. Então, quanto menos bloqueio vamos instalar por enquanto, IHS ligou para o meu site privado. Então nós vamos para a New plug in e, em seguida, meu site privado com este plug e nós podemos tornar nosso site privado para que as pessoas de fora não possam ver o que estamos fazendo na chamada. Então vamos ativar isso, mas isso não é suficiente. Você também precisa ativá-lo nas configurações do plug in. Então você vai para plugins e, em seguida, dois descendo do meu site privado, você rola um pouco para baixo, você clica em habilitar porque por padrão ele está desativado e você clica em seguro. Agora, quando alguém digita em reno portfolio dot com, eles vão obter isso para que eles vão ver que o site não é vida. Isso é apenas uma configuração básica que eu sempre faço. Antes que eu realmente começar a construir duas páginas porque agora seu site é seguro. Você tem SSL e ninguém pode olhar em seu site. Tudo bem, então é isso por enquanto. No próximo ano, vamos criar nossos primeiros Bages 6. Como instalar o Elementor e criar nosso menu: Ei, pessoal, bem-vindos de volta este ano vamos criar a nossa primeira estrutura do Bages Dominion, e vamos definir a nossa página inicial. Mas antes de criarmos nossas páginas, vamos baixar Element Or, e a versão que é usada é uma vida com pixels barra links. Então, se você for para esse link, você verá esta página, e, em seguida, se você rolar um pouco para baixo, vamos ver o elemento get off free. E se você clicar nesse link, você baixará Elemental grátis. Ok, então eu cliquei no link, e agora meu download vai começar, então eu vou apenas zip de segurança caiu para meus downloads. O Fuller. Volto a trabalhar peitos, vou para plugins, e vou clicar em anúncios novos porque vamos arrastar este fecho caiu para reprimir. Você não precisa extrair o arquivo zip. Você poderia apenas direcionar uma queda zip no WordPress. Qualquer um vai funcionar muito bem. Então, basta clicar no upload, plug in, e agora temos que escolher a opção caiu aqui. Se você estiver usando um Mac, pode arrastá-lo daqui. Engravatado é Aiken, e isso vai funcionar. Mas se você estiver em uma janela. Basta clicar em Escolher falta vai sua pasta de downloads clique na queda que você precisa e clique em abrir. E se você não clicar em instalar agora, em seguida, ver press vai começar a instalar o plug elemental em seu site e, em seguida, você precisa esperar até que ele diz Blufgan insultos com sucesso. Mas é , muito rápido, maior parte do tempo. E então você clica em Ativar Blufgan. Então, agora, elemento ou é insulto em nosso site? Então, se criarmos uma página a partir de agora, podemos adicioná-la com elementar imediatamente. Ok, então agora vamos criar nossas primeiras páginas. Então vá para a página é apenas clicar no texto fora das páginas. E este é um importante propósito ver Pequim, porque este é o lugar onde todas as suas páginas serão armazenadas. Então, se você criar uma página sobre uma página de contato, não importa. É uma página muito importante. Se você criar uma pose de bloco, por exemplo, essas são armazenadas aqui. Mas todas as suas páginas estão armazenadas aqui, então vamos clicar no novo em nossa primeira página. Então vamos dar o nome de casa. A página mais importante em nosso site, É claro. Então eu tenho em casa e agora eu clico em Publicar. E desde que fizemos nosso site privado, as pessoas não podem ver o show de debate. Não se preocupe com isso. Agora vamos adicionar outra página porque primeiro, eu quero adicionar todas as páginas que eu quiser antes de nós vamos preencher as páginas. Então, apenas em outra página, a página do portfólio e clique em Publicar. Agora vamos adicionar outra página, e isso é a página sobre e clique em Publicar. E a última página que eu quero é a página de contato. Então clique em, adicione novo novamente e clique no tipo de contato. Clique em Publicar. Agora, se isso não for, volte para as páginas de toque e você verá se você fez certo, você verá as quatro páginas que acabamos de criar aqui. Isso é o que você precisa ver antes de passarmos para o próximo passo. Então, se você tem isso agora, nós podemos ir e criar nosso menu. Então vá para a aparência e, em seguida, vá para menus. Precisamos criar um menu dentro de propósito, e mais tarde podemos usar isso dentro da equipe ou dentro l um mentor para fazer coisas diferentes. Então o que vamos fazer é chamar o menu de cima. Eu sempre vou parar o menu principal porque às vezes você terá menu diferente. Foram estruturas de navegação dentro de um site, mas o menu principal superior eu sempre ir superior principal. Realmente não importa o que você o nome que você chama. Então você apenas criar você clicar em criar menu, e, em seguida, você colocá-lo no primário. Essa é a seção superior de suas páginas, e também precisamos adicionar páginas ao nosso menu. Então vá para a esquerda aqui e apenas Glick todos aqueles bandidos e clique em adicionar ao menu. Agora temos todas essas páginas aqui, então nosso menu está pronto e para ver o que fizemos, vamos clicar em gerenciar com Life Brief, você cliquei nele com controle para que eu possa ver o que estou fazendo. E agora, como você pode ver, o menu está aqui, mas está na ordem errada, então volte para a página. E aqui podemos apenas rastrear os itens do menu em ordem que queremos. Se você segurá-lo assim e ele vai saltar em um pouco. Isso significa que vai ser uma subpágina. Então, se você tem uma estrutura de menu com drop down, vai parecer um drop down. Nós não queremos isso. Por agora. Só queremos quatro páginas. Então, primeiro eu fui para casa, depois eu quero dizer, portfólio sobre o contato. Então agora vamos salvar o menu e vamos voltar para o nosso bege e vamos clicar em Atualizar. Vamos ver se a ordem agora está correta. E a última coisa que quero fazer neste vídeo é definir o nosso lançamento. Então o que precisamos fazer é ir para as configurações e depois ler. E nós não te lemos. Você precisa dizer a ela orações como: “ Ei, Ei, esta é a minha página inicial. Automaticamente, WordPress faz o seu SPO mais recente para que o seu bloco postar sua base inicial porque WordPress originalmente é uma plataforma de blogs. Mas queremos outro Basij como nossa página inicial. Então, clique na página estética abaixo e, em seguida, defina a home page para home o salário. Mas você acabou de ser criado. Você também pode definir outras páginas como sua home page. Mas é claro, alcança queria a casa. Ainda não temos uma página bloqueada, então vamos deixar essa página vazia por enquanto e clicar em alterações seguras. E agora, se alguém sentir pouco nosso site, ele vai primeiro visitar nossa página inicial, que é o que nós queremos. Tudo bem. No próximo vídeo, vamos instalar nossa equipe uma equipe gratuita, então fique atento para isso. 7. Como instalar o tema gratuito: Bem-vindo de volta a este vídeo, vamos instalar nossa equipe gratuita que podemos personalizar. Neste momento, temos essa equipe padrão do WordPress que não é muito personalizável. Então eu vou te dar uma das minhas principais recomendações para uma equipe. Então, o que você precisa fazer para criar quero dizer, mudar sua equipe é voltar para o painel nunca pressionado. By the way, se você estava aqui e você quer voltar, você pode apenas passar o mouse sobre isso e, em seguida, ir para o painel de controle novamente. Feche este por agora e também fechou este. Ok, então o que você precisa fazer é ir para a aparição, e então você precisa ir para as equipes. E este é um dos propósitos de inver que você não enfrenta com frequência. Depois de instalar sua equipe, você não precisa tocá-la novamente. E é meio que isso. Então o que você precisa fazer é uma nova equipe, mas em mais de um ano, não vamos enviá-la, mas vamos encontrá-la. Então tipo oceano, WB aqui. Esta é uma das melhores equipes gratuitas que você pode obter muito personalizável. Hum e é de graça. Eu acho que há também uma versão isca, mas eu nem sequer usar a versão beta nunca porque as opções gratuitas são tão boas. Então basta clicar em, ativar novamente e esperar que ele carregue. Está bem? Já está feito. Podemos excluir este, então vá para os detalhes da equipe e, em seguida, vá para excluir e clique em OK. E isso vai manter o seu WordPress limpo. É assim que eu gosto. Não quero que meu site detalhado seja um monte de sangue. Ah, muito fora considera que eu não uso mais porque às vezes você vai receber e-mails deles como , hey, hey, dia em que Esteem precisa. Ah precisa de uma atualização, mas eu nem uso mais essa equipe. Então, qual é o ponto? Falando fora de notificações por e-mail, Eu esqueci de dizer-lhe no episódio número quatro Eu acredito que você também pode alterar as notificações para a sua segurança começa porque plugins de segurança são conhecidos por enviar-lhe um monte de e-mails. Então, o que eu queria mostrar a vocês é outra coisa antes de mudarmos a configuração da equipe então passe o mouse sobre a segurança, vá para as configurações, então, se você estiver aqui, você vai clicar no centro de notificações, clique em configure e role para baixo. E então isso é capaz para a segurança Joe, eu só você pode deixar todos eles, mas eu não gosto, você sabe, receber tantos e-mails, eles até querem te enviar como um e-mail de segurança diário. Eu não vejo. Eu realmente não vejo o objetivo disso. Então eu sugiro que você, uh, desmarque e clique em mudanças seguras, e agora você receberá menos e-mails deles. Ok, agora temos insultar uma nova equipe. Então vamos ver como a nova equipe se parece. E, como podem ver, esta é a nova equipa. Não há nada nele agora. Vai ser. Eu tenho. Já temos algumas categorias aqui. Não vamos usar isso neste site, mas isso já parece muito mais limpo, e é muito mais fácil de personalizar para obter um design parecido com este. Então é isso que vamos fazer nos próximos vídeos. Mas, por enquanto, vamos verificar se as configurações da equipe estão corretas. De com off site moderno é 1140 pixels. Então o que precisamos fazer é que precisamos dizer à equipe que queremos também menu D para ser 1140 pixels branco. Então role para baixo. Vá para opções gerais e Denko para configurações gerais. E então você verá aqui esta equipe por padrão é 1200. Então vamos mudar isso para 11. 40. E agora toda a onda fora do site será um máximo de 11. 40. E isso é bom por enquanto. Então basta clicar em publicar, depois voltar, depois voltar e mudaremos tudo isso mais tarde. Então, por enquanto, basta clicar no X e estamos prontos para este vídeo. Agora, precisamos fazer mais uma coisa antes de pular dentro do elemento ou começar a trabalhar com imagens e faculdade e todas essas coisas divertidas. Precisamos instalar alguns Blufgan. Então é isso que precisamos para dialogar no próximo vídeo. Então espero vê-lo lá. 8. Faça o download dos arquivos de exercício: Bem-vindo de volta, Capítulo 2. Vamos começar a jornada de design. Isto vai ser excitante. Eu facilitei muito para vocês. Eu fiz uma pasta que você pode baixar. Medo o link abaixo com todas as imagens do vídeo estado Eigen, meu logotipo, tudo o que você precisa para recriar essas quatro páginas que você está vendo aqui. Então Donald caiu. Vá para o link abaixo. Clique nele. Será um gole. Caiu. Pode abrir o zíper que caiu no Mac. É certo. Clique do mouse e, em seguida, extraia extraído aqui nas janelas. É a mesma coisa se não funcionar no seu computador. Você disse que deveria baixar algo. Uh, como o Vin. Zip em. Esta é uma dessas ferramentas gratuitas que você concorda. Oto, descompacte, mas quase computadores. Você pode apenas clicar com o botão direito do mouse em extrair, e você vai obter todas as imagens e vídeos que eu estou usando aqui. Então isso é para este passo. Você precisa fazer isso. Caso contrário, você não pode carregar as imagens em seu próprio teste de site. Então é isso. Você não precisa fazer isso se você já tem seu próprio design para seu próprio site. Claro Mas se você ainda não tem um site e você só quer praticar, esta é a melhor maneira de fazê-lo. E então, se você terminar, você pode simplesmente excluir todos esses Bages e criar seu próprio site. Mas quero tornar o Eddie o mais fácil possível para você, é claro. Então vá para baixo nesse link e clique no próximo vídeo. 9. Escolhi suas fontes e suas cores com Adobe Kuler. Salve isso!: Bem-vindos de volta ao vídeo, vamos falar sobre coleiras e fundos. Isso é muito importante que você preparou isso antes de começar a imprensa inver ou em um projetado para saber que tipo de fundos e cores você deseja usar. Vejo muitas vezes que as pessoas estão tão entusiasmadas que querem começar e criam uma página inteira e isso não parece bom. Então, o que você quer fazer primeiro? Se você quiser preparar todos os seus telefones e seus colares antes de começar a projetar, caso contrário, ele se tornará uma bagunça. Confie em mim. Então eu tenho algumas boas fontes para você que você pode usar. E a primeira coisa que quero mostrar é o Google Phones. Desde alguns anos, Google tem uma biblioteca muito agradável com todos com um monte de telefones que você pode usar quatro grátis em seu site. E a grande coisa é que l Um mentor implementou todo o telefone Google. Então, todos os telefones que você vê aqui bem criativos, muito estáticos em L.A mentor, e você não tem que pagar nada por isso. Telefones do Google é gratuito e elemental acaba de implementá-lo. Então, as mortes são muito boas. Agora eu quero dar-lhe algumas dicas para escolher um fundo. Primeiro de tudo, eu quero dizer que fora do curso telefones manuscritos são para peças mais criativas fora do seu site. Então, como eu tenho aqui em cima no meu cabeçalho, eu quero torná-lo um pouco pessoal, então parece que tem sido 100. E mesmo que seja, não é. E se você quiser encontrar esses fundos manuscritos, você pode ir a galerias aqui e você pode ir a galerias aqui e possuir Hendren ejetado de telefones antes de agora eu só quero me concentrar em serif e sans Serif. Então o que eu vou fazer é desmarcar todos esses. E a coisa mais importante que você precisa saber é a diferença entre San Serif e o serif normal. Ok, então vamos primeiro olhar para Sarah se você reconhece esses telefones, provavelmente de livros e do jornal impresso no dedo do pé do jornal, porque é fácil de ler porque esses telefones têm aquelas pequenas linhas abaixo ou em cima fora de cada personagem. Então todas as pequenas linhas que guiam seu olho na frase. Esses fundos são chamados de telefones Siri e Sunsari muito mais parecido com a versão moderna. E esses fundos não têm que Eles parecem mais modernos. Então, por exemplo, esta é uma falha serif música porque ela não tem essas linhas no topo ou na parte inferior dos personagens. Então este é um popular telefone Poppins. E como você pode ver, esses telefones são mais modernos, meio que descobri que eu uso aqui é chamado Monserrat, e você também pode encontrar isso aqui. Então, se você procurar por meses, você pode encontrá-lo aqui. E esta é a inversão do ladrão de ah. Mas há também uma versão mais ousada que você pode selecionar dentro do elemental ou então isso é o que eu quero mostrar a você antes de começar a projetar seu site. Só uma pequena gorjeta. Você poderia recriar meu site para testar. Mas se você começar a projetar seu próprio site, você quer preparar tudo isso antes de realmente começar a trabalhar elementos ou apenas um pouco mergulhado. Eu não quero te dar e isso é o mesmo para os colares. Eu usei algumas cores diferentes no site, e eu preparei esses colar aqui no meu Adobe X'd caiu Se você não tem um projetado para gostar deste adobe X T, isso é OK. Você pode acessar um site como o Adobe Cooler acha que é chamado. Agora chama-se Collar. OK, vamos para Color Dot Adobe Dot com. Este site irá ajudá-lo a criar uma paleta de cores. , Como você, como pode ver aqui, os colares na minha paleta de cores ou dentro da chuva roxa deveriam . Isto é o que você também pode fazer. Se você, por exemplo, metade de um site Corinne, você poderia apenas dirigido este controle deslizante e torná-lo um pouco mais eixo ou torná-lo mais difícil. E o que é bonito nesta ferramenta é que se você rolar para baixo, você pode ver a cor dos casacos aqui, escrevê-los ou colocá-los em um texto que caiu ou apenas fazer uma captura de tela lá. Então você sempre sabe a que cabra está conectada. Que Gahler. Porque se você copiar o código e ir para L.A mentor e você baseá-lo, você terá exatamente o mesmo colar. Então, isso é muito bom. Mas o problema analógico pode ver é que é muito semelhante em termos de cor. Então eu sugeri que você usasse Mono Gramick, por exemplo. Então você pode criar algo parecido com isso. Talvez algo como azul ou algo que eu fiz algo mais como isso. Ou se você quiser tornar seu site mais dinâmico em termos de chamadores, você pode escolher algo assim. Então você terá dois colares principais e um colar extra para torná-lo um pouco mais interessante. Então esta é apenas uma ferramenta muito útil que eu quero mostrar a vocês. Anote o fantasma ou faça uma captura de tela antes de começar a projetar ou construir seu site. Então, por enquanto, você pode usar a faculdade que eu tenho aqui. Então agora você pode usar os códigos de cores que eu tenho aqui. Eu também vou colocar dis caiu em meus downloads. Então agora você pode usar casacos de gola D que eu tenho aqui para criar este site. Mas se você tem seu próprio site direito no colarinho, casacos direita para baixo os telefones que você deseja usar, você não precisa baixá-los porque eles já estão dentro de L um mentor. Mas basta anotar os nomes e então você está feito. Ok, é isso por enquanto. No próximo ano, vou mostrar como você pode implementar esses estudiosos em um mentor. 10. Como preparar fontes e cores global com uma palete de cores cores com a: Bem-vinda de volta. No ano passado, preparamos os colares e nossos telefones. Então agora vamos implementá-los em L.A mentor. Então a primeira coisa que você quer fazer é ir para suas páginas dentro da imprensa dela, e então vamos editar a página inicial, clicar em editar, e agora clicar em Editar com L. Um mentor. E agora vai ficar em tela cheia. Nós vamos ver algo que se parece com isso neste vídeo. Só vamos nos certificar de que o elementary está configurado corretamente. Então não precisamos nos preocupar com isso. Nós vamos para o hambúrguer eu posso no canto superior esquerdo, e agora vamos para colares padrão nesta seção, você pode configurar seus chamadores padrão, e este é um desses recursos super agradáveis que ajuda a acelerar o seu trabalho flutuar tremendamente. Então o que você quer fazer é pegar os colares que estão aqui, e eu também fiz cair um texto que também está dentro da pasta de download que você acabou baixar com toda a costa. Ou você poderia simplesmente copiar aqueles caras. Quero dizer, aqueles casacos junto comigo, então o que eles querem dizer aqui é o cabeçalho principal. O texto secundário do corpo normal de Heather D. Então, os grandes blocos de texto e o sotaque, isso é para coisas como botões. Então agora eu vou te mostrar. Se você for para D nove Aikens aqui, por exemplo, você destrói um botão dentro sobre sua página. É verde, certo? Se você, em seguida, ir para dólares padrão e você mudar o verde, por exemplo para ler, você pode ver que todas as cores de acento vai mudar para o colarinho do pai. Será sempre a cor que você configurou aqui. Então a cor do sotaque que vou usar é esta cor roxa, então vá para a cor D. E aqui está o casaco. Você seleciona tudo e você baseou isso. Estou usando comentários, veja, e taxa comum. Mas você também pode, claro, apenas para a direita. Clique em Copiar. Agora, todo o meu texto é outro ouvinte. Agora todo o meu texto está descolorido aqui, então eu vou copiar o casaco e vou baseá-lo aqui agora para títulos D. Vou usar esta cor escura. Uhm eu vou usar o mesmo 40 primário e o secundário hum por causa do meu design, todos os títulos, chapéu ou branco ou preto, então realmente não importa. Então eu vou colocar o preto aqui e o outro preto ali. E, em seguida, se eu clicar em, aplicar tudo é Safed. Então agora voltamos e vamos para o seletor de cores. Infelizmente, eles não copiam os colares padrão para aqui, então precisamos colar essas cores novamente. Mas nós temos mais opções aqui, então eu tenho meu site tem um monte de dólares diferentes. Por exemplo, eu tenho dis Ah, colarinho de fundo roxo muito acinzentado. É este colarinho aqui. Então vamos pegar essa cor e colocá-la no 2º 1 A primeira coisa que eu quero ser eu só queria ser cinza claro branco. E então eu quero ter a versão preta. Quero ter textos corporais de chá, o roxo escuro, o roxo mais escuro. Tudo bem. E o último é o colarinho roxo claro. E agora vamos clicar em aplicar. E isso é muito fácil. Porque agora, se arrastarmos um texto, por exemplo, seletor de três cores já tem todas as nossas cores. Portanto, não precisamos verificar nossos códigos de cores o tempo todo, e isso é um pouco de trabalho, mas caso contrário você precisa verificar sua costa de cores com cada item importado. Então, é muito inteligente para apenas tirar um minuto e colocar isso em antes de seu design fora de suas páginas. Confie em mim. OK, então a última coisa que queremos configurar é também os fundos padrão na maioria das vezes. Rib Odo é o telefone padrão. É um belo telefone. Isso também é um filho Serra fundo. Eu vou mostrá-lo se você apenas arrastar um cabeçalho para a página. Costela de disco muito simples, Odo. Mas para o design do meu site, escolhemos Monserrat. Então isso é um Google encontrado. Então o que você quer fazer é ir para a manchete principal de telefones padrão. Você entra aqui e digita Moonshots. Se você pressionar a resposta, como você pode ver, de cabeçalho será alterado. A mesma coisa que você vai fazer na segunda manchete que você vai digitar Monster apodrece para o corpo do texto. Mesma coisa. Oh, isso está no bom molde. Surat. E para o texto extensão mesma coisa monstro apodrece o sotaque. Como você pode ver, essa mudança detecta fora do botão para o corpo do texto. Eu vou mudar o peso porque eu queria ser muito leve assim. É muito leve, Finn. Apaixonado. Isso é o que eu quero. Então, para o corpo do texto, eu vou usar 300. Então os grandes blocos de texto não parecem tão pesados. Tudo bem, então agora vamos clicar em aplicar. E sei que ainda não criámos nada, mas isto é muito importante. Antes de começar a projetar seu site, isso pode acelerar seu processo. Tantos minutos ou horas. Tudo bem. No próximo vídeo, vou mostrar-lhe como realmente trabalhar dentro do elemento ou assim ficar atento. E vejo-te no próximo vídeo. 11. Explorando o Elementor + editor: Estou voltando na “Ela, um pode te mostrar como construir uma página dentro do Element”. Ou assim, no último vídeo, preparamos nossas cores e nossos telefones, e já arrastamos alguns elementos dentro de uma espécie de eso rápido. Isso é o que vou explicar hoje. Qual é a diferença entre seções entre colunas? Isto também é muito importante. Muitas pessoas têm perguntas sobre isso quando estão construindo um site dentro do elemental. Quero dizer, todo mundo pode arrastar um bloco de texto como este, uh, para uma tela. É a coisa mais fácil de se fazer. Tudo bem, isso não é uma coisa difícil. Todo mundo pode fazer isso. Se você quiser um vídeo, basta arrastar um vídeo e ele estará na sua página. Muito fácil. Muito simples. Mas o que é mais importante é saber a diferença entre seções e colunas e como uma página é acumulada. Então, antes de eu ir e explicar todos os elementos dentro de L.A mentor, eu quero mostrar a vocês como uma página é construída e isso é muito importante. E se você tem esses designers, eu quase posso eu quase posso extrair qualquer base de site que você vê e você já sabe como ele está se acumulando. Então é isso que vou te mostrar agora. Este site não é o site mais fácil, hum, em termos de bloqueios. E eu fiz isso de propósito porque então você terá um pequeno desafio, mas também não é muito difícil. Esta página talvez leve como minutos sujos para configurar, então não é tão difícil. Mas o que você precisa entender é que na página é sempre construído por seções e seções já portos e blocos horizontais. Hum, isso construir uma página. Então, por exemplo, esta é uma grande seção, então também daqui até aqui. Essa é uma grande seção. Agora temos essa seção do meio. Então, o que há com essa seção do meio? Bem, o que você verá nos próximos vídeos é que esta seção é apenas uma parte desta seção. Mas este cruzamento, este bloco é direto para cima, então parece que está entre esta seção principal e isso significa seção comprada em cabra. É uma parte desta seção, então é isso que você precisa entender. Por exemplo, nesta seção, temos um plano de fundo em Este design é uma imagem, mas vamos usar um vídeo para que tenhamos um vídeo de fundo no topo. Fora desse vídeo é uma sobreposição de fundo que é um colar. Neste design é um colar roxo que tem uma opacidade, por isso tem transparência de 50%. Em seguida, em cima dessas duas camadas. Então, a camada de vídeo e a Blair roxa com transparência, temos a camada de texto. A camada de texto tem quatro partes. Temos que chamá-lo de dentro da coluna. Há quatro camadas de decks, como você pode ver aqui e no elemental. Ou você não pode usar uma seção sem uma coluna. Você sempre tem uma seção principal e uma visão. Essa seção é uma coluna, e, em seguida, dentro da coluna, você pode colocar um cruzamento, e, em seguida, dentro dessas interseções são coluna, por isso é sempre seção Gollum Section coluna Essa é a maneira em um estrutura uma página, e é assim que ela deve ser estruturada porque as colunas são verticais, então dentro de sua seção principal você pode ter seções verticais, por exemplo, esta grande seção tem duas colunas. Uma é a coluna da esquerda e esta é a coluna da direita, certo? Então esta é a seção principal que é deste tamanho. Então você tem uma coluna da esquerda com um monte de texto, uma lista, qualquer botão, e você tem uma coluna direita com quatro imagens. Esta é uma seção interna que faz parte desta grande seção com quatro colunas. Percepção desse cruzamento, e agora parece um pouco complicado com você, mas você verá que quando começamos a trabalhar com isso, isso é realmente muito fácil. Isto não é mais fácil. Um. É uma seção principal que é essa grande parte branca. Então você tem uma camada de texto, outra camada de texto. Isto é um título. Este é um texto normal. Então você tem bem neste design. É uma grande camada porque é uma captura , mas em L.A mentor, é uma instrução com colunas livres. Percepção desse cruzamento. E então há outro cruzamento que também tem coluna livre. Assim, as colunas são sempre verticais e as seções são horizontais e você pode ter interseções dentro de uma seção grande. Isso é tudo que você precisa saber por agora e depois cada pergaminho para baixo. Esta parte também é um pouco complicada. Esta é uma grande seção. Ele tem um efeito de onda na parte superior e o efeito de onda esta parte fora desta seção para baixo e a onda afeta esta parte fora desta seção. Então, dentro desta seção principal, temos uma camada de fundo. Temos um excessivamente um roxo com sobreposição roxa. Temos uma intersecção com a camada de texto na parte inferior. E temos outro cruzamento com duas colunas com imagens. É isso. E eu sei que isso é muita informação, mas você precisa entender como as páginas são estruturadas porque se você sabe, isso é muito fácil de construir uma página. Tudo bem, então o que eu vou mostrar agora é como funciona dentro de L.A mentor? Então deixe isso como está, basta clicar em atualizar por agora. Eu quero um pouco de espaço. Não preciso disto por enquanto. Então, o que precisamos fazer é ir para as configurações no canto direito para baixo e ir para o layout da página e ir para o elemento ou cheio com então tudo isso decidir barra vai embora e nós vamos ter apenas uma página inteira para o nosso site Zoom out um pouco. Bem, se você está tudo se você está em uma tela maior, você precisa fazer isso. Mas preciso diminuir o zoom. Caso contrário, posso ver o espaço em branco. Mas como você pode ver isso, essa grande coisa que você vê aqui, essa é a seção principal, esse pouco que eu posso ouvir que é chamado As colunas da coluna sempre têm essas linhas pontilhadas , e o seções são as seções sempre têm chá, luzes azuis, e se você passar o mouse sobre ele, você também pode ver que esta é uma seção, e esta é uma coluna para chamá-los. Então as colunas, como eu disse, são verticais. Então, se duplicarmos esta coluna, ela vai obter outra mais ampla em uma posição vertical. Então vamos tentar isso. Por agora. Vamos clicar com o botão direito e clicar em Duplicar. E como você pode ver agora, ele adicionou uma coluna vertical dentro da seção grande. Se duplicarmos a grande seção, ela terá uma duplicata horizontal com as mesmas coisas dentro dela. Então é assim que um bages estruturas de primeiro você tem para grandes seções e então você tem as colunas à vista. Se você quiser torná-lo mais complicado, você precisará usar seções internas. Então você tem uma seção principal. Você tem dois blocos principais, então você pode ter interseções. Então é isso que você adiciona. Aqui você vai aqui e você clica no cruzamento e você pode agarrá-lo e liberá-lo. E então você pode ter outras seções dentro de uma coluna. Mas uma coluna não pode estar diretamente dentro de uma coluna. Você sempre precisará de um cruzamento no meio. Então é assim que funciona. Isso é tudo que você precisa saber. Por enquanto, vou apagar tudo por enquanto. Apenas uma pista. Vou atualizá-lo. Isso é exatamente o que eu queria te mostrar. Então agora você está totalmente preparado para começar a construir a primeira parte do seu site real, que é o cabeçalho principal. Como eu disse, isto é o que vamos construir no próximo vídeo do próximo capítulo. Espero que estejas entusiasmado. Você estava totalmente preparado agora. Então vamos pular para o próximo vídeo e te vejo lá. 12. Construindo nosso fundo de cabeçalho em vídeo: Ei, pessoal, bem-vindos de volta ao número do capítulo grátis neste capítulo. Vamos desenhar a página dentro do mentor de L.A . Eu acho que este é um capítulo muito emocionante, porque agora você realmente começa a ver como uma página é construída dentro de elementos ou nós preparamos tudo. Primeiro neste vídeo, vamos fazer este fundo para a parte do vídeo. Então vamos projetar essa parte no próximo vídeo e, em seguida, nos próximos vídeos, vamos começar a fazer essa parte, e depois disso é muito fácil. Esta é uma parte muito fácil. Os números animados são muito fáceis de depoimentos, e isso é um pouco complicado, mas também muito fácil. Eu vou mostrar a vocês como você pode fazer as animações, os efeitos flutuantes de pairar. Mas primeiro, vamos começar com este vídeo de fundo. Então, vamos começar. Estou aqui na minha casa. Eu cliquei em editar esta página com L um mentor, e agora eu estou dentro desta página. A primeira coisa que eu quero fazer é clicar no plus. Então aqui Elemental lhe dará a opção de escolher um layout de coluna. Por enquanto, eu só preciso do layout de coluna única, e isso é apenas 11 coluna da altura. Eu sugiro que você use a altura mínima para que você sempre tenha um pouco de espaço dedo do pé trabalhar com. Então eu disse isso para 400 pixels agora, e o que queremos fazer é dar a esta seção um fundo, e vamos usar um vídeo para isso. Então aqui você verá que você sempre tem passos livres. Seu layout é dizer, e é muitas vezes. Às vezes aqui é Contin, mas o meio também é sempre ouvir você mudou decks, chamador para o tamanho. E em todos os telefones, você faz coisas como animações, camas de margem, o que significa como quatro elementos são uns dos outros. E no layout, você vai colocar coisas como um texto e mais como o continente fora da partida, na verdade editando. Então agora o plano de fundo é uma opção de estela, então você pode escolher um plano de fundo aqui. Se você vai para um colar clássico, esta torneira de colarinho da cidade, você pode escolher uma cor como fundo. Então, por exemplo, se eu clicar em um colar, você vai ver que toda esta seção vai ter um fundo colorido. Nós já colocamos nossos colares, mas para esta seção superior, vamos usar um vídeo. Então, não vamos usar isso. Vamos pairar também. Vídeo. Vamos clicar nele. E agora podemos basear em um link de vídeo aqui. Você pode usar um você incomodando um link feminino ou e MP quatro caiu link. Eles não têm um botão aqui onde você pode selecionar um vídeo que já está dentro de você pressionando. Então precisamos sair desta página, fazer upload do vídeo e copiar o link. Espero que eles mudem esse recurso e torná-lo um pouco mais fácil. Mas isso é o que precisamos fazer agora. Então o que eu quero que você faça é que vamos abrir uma nova torneira. Basta ir para o seu site novamente e ir para o link WP Admin. E agora você está no painel e, em seguida, clique na mídia. E como você pode ver, não há nada aqui porque nós não carregamos uma imagem, um logotipo, esse vídeo. Então o que você quer fazer é ir ao seu localizador e você quer encontrar o fundo do vídeo doméstico . Este é o vídeo de morte que você quer. Pergunte aos antecedentes. Então, de propósito é realmente fácil. Basta pegar um vídeo do seu localizador. Certifique-se de que você pode ver seu navegador atrás dele e você apenas rastrear. Ele caiu que você quer no WordPress e como você pode vê-lo agora, começar a carregar o vídeo. Uma coisa que é importante para você saber. Se você usar um vídeo MP quatro, seu site não se tornará super rápido. Mas a vantagem aqui é que ele vai jogar instantaneamente, certo? Então, se você arrastar e e antes do vídeo cair, isso é, por exemplo, o que é isso? Oh , são oito megabytes com isso. Isso não é realmente grande, Mas se você arrastar em um vídeo de, como 200 megabytes, seu site não vai se tornar muito rápido. Então, se você tem um longo vídeo que você quer colocar em seu site, eu sugiro que você apenas use um link do YouTube em vez de fazê-lo assim. Então, você só vai para a sua página. Você baseou um link do YouTube aqui, e está feito. Mas por agora, vamos usar o fim antes porque você precisa saber como fazer isso, você clica no vídeo. Se o upload for feito, então aqui está o link. Você clica nele algumas vezes. Ele irá selecionar segurando. Você copia o link, então venha e veja ou apenas copie assim. Você volta para L.A mentor e você baseou o link de vídeo aqui que era tão fácil de fazer. Agora, como você pode ver no design, há um fundo roxo escuro. Então isso é o que eles chamam de uma sobreposição de fundo. Então essa é uma camada em cima da sua camada de fundo. Então clique na sobreposição de fundo. Clique no Gahler normal, vá para seus colares e grande um roxo escuro que selecionamos algo assim. Ou talvez até a mais escura. Sim, algo assim. E, em seguida, aumente a opacidade para 1,7. Sim, você pode ver agora que fica um pouco mais escuro. Então, se colocarmos o imposto em cima do vídeo, ele ainda será legível. Essa é a razão pela qual eu tenho um conjunto este colar de fundo. Ok, então agora precisamos colocar no texto que preparamos aqui primeiro. Vamos começar com este título Então eu disse que eu crio e crio sites. Certo, vá para a dissecação. Vá para o cabeçalho. Arraste-o aqui e é isso. Não, há uma camada de texto dentro da coluna. Em seguida, basta digitar o texto aqui. Este é um grande título. Então usado o html h uma tecnologia. Sim, esse é o tamanho dos seus títulos. Isso é tudo que você precisa saber. Por enquanto, isso também é importante para sua classificação de pesquisa no Google. Mas por enquanto, saiba que o H é o maior. Ph. Sete é, uh, o 86 é o menor. DP é só uma mensagem. Mas, por enquanto, só queremos um grande título que vamos usar para ele agora. Se formos ao estilo, podemos trocar o colar daquele texto. Então, se você clicar na cor do texto, você pode apenas clicar no branco para que você veja f f f f. Esse é o branco. E como você pode ver, o texto ficou branco clicando chamador novamente. E então queremos aumentar o texto, clicar na topografia, e então você pode arrastar isso para cima para torná-lo maior. Vamos ver no meu projeto caiu é 54. Então você pode digitar isso aqui ou você contrai um controle deslizante. Parece muito grande agora, mas vamos colocar em duas linhas, então não se preocupe com isso. E agora basta clicar fora dele. Agora vamos pegar e não vamos. Então clique nos nove pontos aqui. Direto em outra direção. E isto é detects. Bem-vinda. Hum, Reno o apertado que aqui. Vai ter com a Stella outra vez. Vá para o estudioso do texto. E como você pode ver uma coisa, esta é esta coleira. Sim, cor clara roxa ASCI. Parece bom. Clique fora dele e você está pronto. Agora vamos adicionar distritos. Adoro visualizar ideias e manter ganhar vida em um site real. Indo apenas nove pontos. Clique no editor de texto. O editor de texto é um bloco de texto. Você baseia isso, e como você pode ver agora, é a cor que definimos como os textos padrão em um fundo escuro. Realmente não funciona, mas a maioria de nossas seções são brancas, então precisamos mudar o colarinho do texto. Apenas indexação baseada aqui. Ou digitar algo que você quer não significa que você importa. Vá para o estilo, estudioso do convés. Coloque no vento e então você está feito. Oh, não. Estamos acabados? Eu acho que isso é um pouco pequeno demais no meu projeto. Tem 16 pixels de tamanho. Então também é onde vamos usar aqui. Torná-lo um pouco maior. Isso é legal. E agora a última coisa que queremos é este fundo manuscrito. Na verdade, é bem fácil. Apenas copiado. O título que você tem aqui não basta clicar no lápis A. Eu posso clicar na cópia, em seguida, clicar na camada de texto abaixo e, em seguida, clicar no ritmo. Se você fizer isso, a coisa que você copiou será baseada que abaixo da camada, onde você clicar em colar e como você pode ver, não duplicar porque eu copiei este. Eu colei sobre este aqui para que ele seja colocado sob essa camada. Então é por isso que agora é cabelo do tamanho fora. Este é 52, então é quase o mesmo. Então, não veremos uma grande diferença aqui, mas, claro, precisamos trocar seus telefones primeiro. Vou mudar o título para o meu nome, então vamos para o Stell. Vamos à tipografia. E agora a família. Eles têm uma família porque com telefones, você terá muitas variações diferentes desse fundo. Então é como uma família fora dos telefones. É assim que chamam a família. Mas é só uma seleção de telefone. Você entra aqui e se quiser algo diferente do que o padrão encontrado que selecionamos , que são meses lidos, você vai digitar aqui para morrer. Hendron e fundo. Usei a Terra do Sr. Day Harvey. E como você pode ver, um, olha olhos reprodutores. Vou torná-lo um pouco menor. 50. Tudo bem, mas é uma figura, como você pode ver. Então é isso que fazemos em peso. Se clicar em Espera, vai colocar? Eu não sei. 500. Isso parece muito melhor. Ok, agora, basta clicar fora desta caixa e há mais duas coisas que queremos fazer. Primeiro, queremos tornar esta caixa um pouco menor, então haverá espaço suficiente para o vídeo em D aqui, e é isso que você faz com preenchimento e margem. Esse é também um conceito que você usará com muita frequência no Web design. Apostar é o espaço dentro de um elemento e margem é o exterior. Eu sugeri que você escrevesse em algum lugar porque isso pode ser muito confuso se você não sabe o que são essas palavras. Então, a margem é o exterior. Apostar é o interior. Então é tudo o que precisa saber. Por enquanto, vou pegar toda a seção. Quero dizer, toda a coluna. Eu sinto muito. Vá para o avançado e depois vá para o carinho porque isso é o interior fora da coluna deles. Queremos mudar a visão. Então, por dentro, queremos adicionar um direito. Mas se nós apenas clicar e começar a adicionar, a cama aqui vai adicionar dependendo de todos os sites em, e isso não é o que nós queremos. Mas isso é causa por causa dos links. Então, basta voltar, trazendo para zero desvinculado isso e então se nós adicionarmos à direita, você vai ver em algum momento sim, ok, ok, cerca de 400 isso começa a afetar. Detecta eso. Vamos apenas digitar um número aqui como 500. Isso não é o suficiente. 607 100. Algo como isto. Talvez até 750. Não, isso é demais. 730 Sim, algo assim. Isto parece muito bom. 740. É assim que vou deixar. E a última coisa que eu quero fazer é mudar as margens entre esses itens porque, como você pode ver, bem aqui, há menos espaço entre os itens aqui e elemento ou automaticamente adiciona 20 pixels abaixo cada elemento que você coloca. Por que eles fazem isso? Porque se você adicionar muitos elementos, há um espaçamento natural entre os elementos. E é por isso que se você tivesse um monte de impostos em cima do outro, você vai ver que há muita margem entre os itens. Isso não é o que você quer. Então, por exemplo, se você clicar neste texto, vai para avançado, você vai desvincular a margem. Você vai colocar um menos 20 no fundo. Então, como podem ver agora, isto é mais próximo. Também queremos fazer isso com este título. Então clique nele vai fazer avançado desvinculado este e, em seguida, em uma parte inferior como menos 20. Acho que é o suficiente por enquanto. Talvez também adicionado ao título, no entanto, entanto, para avançar em Lingus e, em seguida, adicionar um pouco de margem inferior menos. Hum, sim, é isso por enquanto. Isto é bom o suficiente. Vou clicar na atualização. Vou pressionar o Commons zero para chegar ao normal. Poucos clicam aqui. E como você pode ver, agora mesmo, nós fizemos a parte superior. Parece muito bom. O vídeo está sendo reproduzido. Existem algumas camadas de texto e o texto está corrompido à esquerda. Tudo bem, isso é para o vídeo prato. Se você não entende tudo o que eu fiz neste vídeo, não se preocupe. Nós vamos repetir todos esses passos muitas vezes neste curso, então basta continuar com vídeos, e isso vai começar a fazer sentido. Se você continuar com todos os vídeos, basta clicar onde eu clicar, e isso é tudo que você precisa saber por enquanto. Tudo bem, então eu espero vê-lo no próximo vídeo onde nós vamos projetar essa parte de serviços que se parece com isso. Tudo bem, 13. Barra de serviços Floating: Ei, pessoal, bem-vindos de volta. Neste episódio, vamos transformar esta seção em algo que se parece com isso um pouco maior. Mas a maior parte do vídeo, vamos nos concentrar em adicionar essa seção de serviços que você está vendo aqui. Ou como você pode ver aqui no meu projeto, caiu neste vídeo, vamos apenas criar esta seção, e então no próximo vídeo, vamos criar uma dissecação. Tudo bem, então vamos começar. Como eu disse alguns vídeos antes, esta parte é realmente uma parte fora desta parte. Certo? Então esta é a seção principal, e esta é uma seção interna nessa seção grande, e esta é também uma interseção naquela seção grande onde esses dois componentes estão. Então, primeiro, precisamos criar todas essas seções e as colunas que precisamos. Então vamos começar. Vou voltar para o meu elemento ou para casa, e vou abrir uma torneira aqui. Vamos diminuir um pouco e eu vou adicionar uma nova seção abaixo da seção de vídeo , certo? E dê-lhe um mínimo de altura que teremos algum espaço e agora vamos começar com o nosso primeiro cruzamento nesta seção principal. Acabamos de colocar o texto na coluna principal, mas agora queremos interseções na seção principal. Então vamos começar com os cruzamentos. É muito importante que você faça isso primeiro antes de começar a contar os elementos. Caso contrário, pode se tornar uma bagunça. Então esse é o meu conselho. Sempre comece com a criação de todas as seções e colunas que você precisa. A única exceção quando você não precisa fazer isso é quando você tem uma coluna e você está duplicando essa coluna muitas vezes. Então você não precisa das colunas vazias, é claro, mas agora nós é o que queremos. Então vamos direcionar o cruzamento para a tela, e o primeiro cruzamento é para Dis Spartan. E aqui vamos usar o truque de duplicar o de Gollum. Então vamos precisar de quatro colunas aqui, mas não é onde vamos fazer. Vamos deletá-los. Vamos preencher uma coluna e depois duplicar para que se torne quatro colunas agora para este espartano. Nós já vamos preparar isso, e nós vamos apenas precisar de um cruzamento normal ou colocar isso abaixo dele, e você terá um cruzamento normal. Agora, dê-lhe algum espaço. Então nós vemos, na verdade, o que estamos fazendo. Então clique na interseção inferior, vá para avançado desvinculado isso e em um, por exemplo, 60 pixels fora do topo marchando. Então a margem é o exterior. Queremos adicionar 60 pixels no topo do lado de fora, fora desta coluna interna. E esse é o espaço que está aqui que você está vendo aqui. Na verdade, esses direitos, então não precisamos mais nos preocupar com isso. Vamos trabalhar com este cruzamento. Primeiro de tudo, por que não quero mostrar-lhe é um bom truque para criar um Aiken e um texto. Muito fácil. Chama-se Aiken Box dentro do Elemental. Se você rastreou isso até o cruzamento, uh, Gollum, você vai ver que você vai ter um Aiken, você vai ter um título e você vai ter uma descrição. Isto é muito fácil? Se você, por exemplo, tiver serviços que deseja exibir com um título e uma descrição, poderá usá-lo. Mas agora, não vamos usar a descrição, então podemos apagar isso. Agora só temos um Aiken e temos uma mensagem. É isso. Se você quiser mudar o título para mim, é o design do site e eu posso. Queremos mudar o Ike e podemos fazer isso aqui em cima. Podemos ir para a biblioteca da ICANN e palavra elementar na nova versão. Eles têm um monte de Aikens que você pode escolher de graça, mas eu gosto de procurar o meu próprio. Aikens e eu também os preparamos. Chama-se Aikens em casa. Então, para este exemplo, eu vou usar esses Aikens. Se você quer ter seu próprio Aikens e você não vê o Eiken que você quer dentro da biblioteca elementar, isso é uma dica. Vá para fugir, eu conduzo com. Esse é um site que é sempre usado para obter. Meu Aikins é muito, muito bom site. Você pode digitar um prêmio chave, por exemplo, viver em casa, e então eles lhe darão muitas opções para Aikins. A maioria deles é grátis. Alguns deles são pagos do que se você adicioná-los ao seu balde ou a coleção chamá-lo. Você pode baixar o Aikens em, por exemplo, svg. SPG é Victor. BMG é BSD de Big Sal é loja de fotos. Claro, um E p s também é vetor. Se você está fazendo um site e usando Aikens, Eu sempre iria para a opção spg porque em um PS, você não pode carregar dentro de l um mentor. Bem, talvez você possa, mas não nesta opção e PNG s pixels. Se alguém ampliar, você verá pixels que não é isso que você quer sempre usar, SPG. Por enquanto, vamos usar os ícones que preparei aqui. Então não vamos usar o elemento ou biblioteca. Vamos fazer upload do nosso próprio SVG. Precisamos habilitar isso. E então podemos rastrear nosso primeiro Eichin que queremos no Elemental e clicar em inserir mídia. E como você pode ver agora, meu próprio Aiken, que é fato ou assim, não importa o quanto eu zoom, ele ainda vai ser afiado. Eu tenho meu próprio vetor, Aiken dentro do elemental. Então, por enquanto, o que vamos fazer é tentar obter este fundo escuro 40 coluna interna assim que eu fiz. Há essa seção principal que tem essa cor de fundo quase branca e essa interseção só tem uma cor de fundo. Foi tudo o que fiz. E depois há quatro caixas de Aiken. Percepção desse cruzamento. Então deixe-me mostrar o que eu fiz. Eu cliquei no cruzamento. Apliquei um fundo Gahler naquele cruzamento. Basta acender uma cor de fundo. Não sei qual deles é, mas como podem ver agora, acho que era esse roxo escuro. Agora todo este cruzamento tem um fundo. E como você pode ver, meu texto agora se foi porque o Texas tem a mesma cor que o fundo agora. Então é isso que vamos consertar. Por isso, basta clicar aqui e está perfeitamente bem. Agora clique no Eiken, vá para o estilo porque precisamos mudar o texto para branco. Aqui está a incontinência. Vá para o título, vá para chamá-la e selecione branco. E como você pode ver agora, nós quase já temos o design que você está vendo aqui. A única coisa que precisamos fazer agora é duplicar quatro vezes, mudar o texto e marchar. Primeiro de tudo, vamos duplicar quatro vezes. Então vá para a coluna porque a coluna era 40 duplicata horizontal. Então vamos aplacar a coluna. Como você pode ver agora temos que Aikens, duplicado novamente e duplicado novamente, Veja, foi muito fácil. Agora vamos para o cruzamento onde todas as quatro colunas estão dentro. E nós vamos adicionar um carinho porque nós queremos ter espaço no interior fora do fundo roxo . Então, dependendo era para o interior marchar para fora, certo? Então, se eu adicionar margem, vai adicionar espaçamento aqui. Se eu apostar que vai ser espaçamento no insight, eu vou te mostrar. Como você pode ver agora, ele vai adicionar espaçamento no interior para que a seção realmente se torne maior. Mas é isso que queremos. E como você também está vendo agora, ele tem mais espaço na parte inferior do que no topo. E no meu projeto, é isso mesmo que seja o mesmo espaço. Então talvez adicionar um pouco mais, talvez 35 do que desvinculá-lo e, em seguida, apenas remover um pouco de espaçamento da parte inferior. Mas você pode ver agora que este é mais parecido com o design que criamos. Veja como é fácil eu era muito fácil. Agora, se você quiser mudar o Eiken dentro dele, basta clicar nele, carregar seu próprio spg arrastando a segunda mídia inserir Aiken e Ben lá ele iss mudou o texto, e é isso. E eu vou fazer isso para os outros dois de D. E agora eu terminei. É isto. Certo, então o que precisamos fazer agora? Precisamos mover esta seção para cima, e precisamos para aquele efeito de onda e também faz de volta agora é branco. Nós queremos ter este roxo claro, grande dólar. Então também é isso que vamos mudar. E a última coisa que vamos fazer é a sombra que vocês estão vendo aqui porque toda essa caixa tem uma sombra aplicada a ela, porque agora é muito plana. Você sabe o que? Vamos começar com a Sombra, porque é uma coisa muito fácil de se fazer. Clique no cruzamento agora vá para o estilo, vá para a borda. E aqui estão os seus blocos de sombra. Não sei porque é que o Day colocou a sombra do bloco lá dentro. Se a fronteira realmente não importa, basta clicar nela. E como você pode ver já, uma sombra é aplicada se você aumentar o borrão se você vai ver que ele se torna mais embaçado. E o que eu sempre faço é também fazer a vertical um pouco mais alta. Começa a levitar um pouco e agora é muito intenso. Então eu diminuo a cor preta algo mais parecido com isso. E agora temos esta imagem flutuante. Quero dizer sombra nessa seção também. O que? Eu sempre faço isso em uma sombra flutuante. Então, se as pessoas pairarem sobre ele com suas bocas vão ver um pouco agradável efeito de pairar é que você está vendo bem aqui ela paira sobre a sombra torna-se mais intensa. Então é assim que se faz. Você vai pairar. Você também adiciona uma sombra de caixa e agora você faz quase o mesmo. Só limpe com suas bocas. Faça o borrão mais intenso. Torná-lo um pouco menos intenso. Eles vão fazer muito. Só um pequeno detalhe como este. E foi tudo o que fiz bem. No meu projeto final, eu também tive em um efeito dis pairar, Então você tem ah, sobre efeito para toda a caixa, mas também quarenta anos. O Aikins. É assim que se faz. Você clica no Eiken, então clique na edição. Eu posso clicar no ícone, clique em Hover e que Derek é animação pairar. E depois chama-se Crescer. Efetivamente usado. Você pode ver que seu Aiken não cresceu esta dúzia. Então, se você quiser copiar isso, é muito fácil, certo? Clique na edição Aiken. Clique em Copiar. Vá para o outro. Clique no estilo baseado. Depois vai colar o estilo. O que? Temos uma situação aqui. Nós vamos usar isso muitas vezes neste curso porque torna realmente fácil construir os efeitos em sua página muito rápido. Então, como podem ver agora, estes dois têm. Vá para este “L”, vá para este “L” baseado e como você pode ver agora, todos eles têm o salão da escola para efeito. E uma caixa inteira também tem um efeito de pairar. Efeito não é muito intenso, e isso faz com que não seja muito barato. Então, agora vamos apenas adicionar a cor de fundo que estamos vendo aqui. E também, vamos adicionar a onda. A cor de fundo é aquele roxo claro. Então vá para ainda ir ao fundo chamador e ela pode ver colarinho e, em seguida, escolher o seu foi? Acho que foi este. Sim, foi este. Como você pode ver, agora é leve. Muito leve. Roxo acinzentado parece muito bom e a onda é realmente uma parte fora desta seção. Parece que está separado daquela seção abaixo dela. Mas a onda é como um efeito de borda fora da seção acima dela. Então o que você precisa fazer é clicar na seção principal superior, rolar para baixo em estela, e então é divisor em forma de ouro. Vá para baixo porque nós vamos adicionar um efeito inferior, ir para digitar e então você tem diferentes efeitos de divisor de forma, por exemplo, como este seis segundos ela pode ver que a maioria deles são muito baratos. Isso não é efeito que você quer usar. Mas, por exemplo, usei ondas. Isso é muito legal. Como você pode ver, este é o efeito que eu usei. Você pode brincar com as configurações. Acho que tinha algo assim. Basta voltar para o seu design e tentar fazê-lo corresponder. Sim, algo assim parece bom. E agora ainda está branco. Então nós também precisamos para a cor para que o divisor de forma, mesma cor, como você pode ver. Boom! E agora parece que este divisor de forma é uma parte fora da outra seção. Agora precisamos adicionar algum esconderijo, porque esta seção é realmente pequena em comparação com o resultado. Então, basta clicar neste, ir para layout. Vamos aumentar a altura mínima, como podem ver aqui, torná-la um pouco maior. Talvez 5 50 algo assim. Certo, então a última coisa que precisa fazer é mover essa seção toda para cima. Então podemos fazer isso usando uma margem de menos, então ele vai subir se você usar uma marcha normal e ele vai cair. Então podemos fazer isso usando uma margem de menos, Se você usar uma marcha menos, as coisas vão subir. A primeira coisa que vamos fazer é mudar as configurações da seção principal. Então vá se deitar. E então Colin posição colocar isso em cima para que ele já salta um pouco mais alto. Agora, vá para o cruzamento. E a propósito, agora essas coisas estão muito no mesmo espaço, então às vezes é muito difícil clicar se você pode clicar, basta usar o navegador, então clique com o botão direito em qualquer lugar, clique no Navegador e, em seguida, você vai ver toda a estrutura fora de sua página de eles podem clicar sobre este um cruzamento e nesta interseção e, em seguida, ir para as configurações. Então, se você realmente pode clicar aqui, basta usar o navegador para encontrar o que você está procurando. Ok, então agora vamos fazer é usar Dietrich fora da margem menos, então apenas segure. E como podem ver, essa coisa começa a subir, e acho que preciso que Ele tenha algo assim. Vamos tentar salvá-lo. Clique em atualizar, volte para sua página. E como você pode ver agora, abra o zoom de volta ao normal. Dis parece muito bom, e um pequeno detalhe que eu quero adicionar é um pouco de marcha para os olhos do DCIS porque como você pode ver neste projeto, há um pouco mais de margem aqui do que no meio. Então é isso que vamos consertar. Clique no cruzamento novamente, vá para apostas e, em seguida, Atmore à esquerda e sobre os direitos e talvez algo como 60. E aqui, aqui também, 60 margens de mawr no site. Clique em e atualize novamente. Vamos ver os resultados. E como você pode ver, isso parece muito bom. Tem este efeito muito suave, suave, no entanto, suave, no entanto,e aqueles oferecem efeitos? Sim, estou muito feliz com este resultado. E no próximo vídeo, vamos começar a construir três próximas partes fora da página, que é esta parte. Está bem, vejo-te no próximo vídeo. 14. Seção de texto no checkbox: Bem-vindo de volta a este vídeo, vamos construir esta seção que você está vendo aqui. Se você terminar este vídeo e você tiver completado esta parte expulso da Ordem e a cabeça são parte, você sabe, maioria fora das partes difíceis. As outras partes que iam dio são muito simples se você compará-lo para fazer dese seções superiores livres . Então, se você sentir que você está começando a entender o quadro geral fora, como funciona elementar você está no caminho certo, porque esta é também uma parte bastante desafiadora. As outras partes são muito fáceis, então vamos terminar a página inicial bem rápido. Então vamos agora mergulhar nesta parte. E se você pode fazer isso, você também pode criar projetos muito exclusivos. Certo, então o que vamos fazer é voltar ao nosso resultado. Agora temos isto. E, hum, o que vamos fazer é diminuir um pouco e vamos usar as interseções, as colunas dentro da interseção que já preparamos no episódio anterior . E primeiro vamos trabalhar com algumas mensagens. Como podem ver aqui temos um título. Temos uma pequena linha. Chama-se divisória. Temos uma mensagem e temos um Aiken. Não, chama-se uma lista que acho que posso listar. Então vamos fazer isso primeiro ser muito fácil. Só arrastando um título. Boom, fazendo um H um porque é um grande. Talvez seja ainda maior. Esta pequena linha é chamada de divisória. Isso é por aqui. Basta arrastá-lo para dentro da coluna, não fora do cruzamento, apenas dentro dessa coluna. Boo E eles são a sua linha. Torná-lo muito menor. Vá para o estilo, dê um peso livre ou quatro, talvez dê um colar roxo profundo que queremos e faça a diferença como zero. É isso. É assim que se cria uma pequena linha. Agora vamos arrastar uma mensagem. Então Gravity editor de texto e colocá-lo abaixo de linha que acabamos de criar. Tudo bem, agora, apenas baseando um texto que você quer e agora vamos usar a lista Eiken de coisas que eu posso listar. Sim, chama-se “Eu posso listar”. Pegue-o, coloque-o dentro da coluna e boom. Lá está ele. Ele tem três ícones diferentes por padrão. Isso não é o que queremos. Nós só queremos t verificar Aiken para que possamos simplesmente excluir esses outros dois e, em seguida, duplicar o 1º 1 assim teremos um tipo de lista de verificação de estilo. Então, agora vamos para Stelle tudo isso. Então vamos primeiro copiar os decks que temos aqui. Eu fiz o título 36 pixels. Então vamos pegar isso e fazer 36. Biggs também novamente, a família dos telefones. É o tamanho que se formou agora está um pouco apertado. Então vamos criar um espaço entre as linhas. Aqui está no 44. Assim como o que vamos fazer. É altura da linha dourada. Esse é o espaço entre as linhas. Então, se o colocarmos em pixels e aumentarmos como você pode ver agora os espaços entre as linhas começam a se tornar maiores e isso parece muito melhor agora para distritos. Eu fiz 16. Então vamos pegar a topografia de novo e fazer 16. E o que estamos fazendo agora, podemos copiar destilação para todas as outras partes do site. Você não tem que fazer isso o tempo todo. Se você fizer isso bem para, você sabe, seção como esta. Podemos no próximo vídeo, podemos copiar isto, expulso da Ordem e enfrentá-lo aqui. Podemos copiar o texto e acelerá-lo aqui para que você não tenha que fazer o estilo o tempo todo . É por isso que as primeiras partes do seu site demoram um pouco mais. Está bem? Agora vamos vender esta peça, Aziz. Você pode ver que há outro tipo de fundo. Vou ampliar um pouco para ver o que estou fazendo. É uma chamada diferente. É um pouco mais grosso. Parece que vou clicar nele. Eu vou para o estilo, talvez obter um pouco mais de espaço entre ir para o Eu posso torná-lo roxo, o roxo que nós queremos. Vá para os textos, dê um pouco mais de espaçamento do Aiken. Torna-o um pouco mais agradável do que o estudioso de texto será que eu acho que nós usamos este aqui. Sim, isso parece bom. E agora vamos também verificar se ele está no mesmo tamanho 16 pixels. Não, não era do mesmo tamanho. Agora viveria muito grande. Acho que é por causa do espaço entre vamos manter assim. E o espaço entre isso, você já sabe como precisamos mudar isso. Glick em um de texto ir para fora telefones e agora em um menos 20 margem para a parte inferior, porque cada elemento tem menos 20 margem. Quero dizer, tem 20 pixels marchando na parte inferior. Então, como podem ver agora, se fecharmos isso, isso já se parece muito com o nosso design. Talvez os espaços entre eles sejam um pouco menos. Como você pode ver, isso talvez seja muito grande. Então talvez eu vá fazer isso menos autoridade. Sim, isso parece melhor. Como você pode ver agora, isso parece bom. Então eu vou adicionar um pouco de espaço no fundo aqui, então eu não vou fazer isso nesta seção. Claro, nós vamos fazer isso na seção principal porque o interior deste cruzamento e este cruzamento é parte fora do cruzamento principal. Então, se você quiser mais espaço na parte inferior, não no espaço para expulso s no espaço para toda esta parte. Tudo bem, então eu vou clicar no cruzamento principal e eu vou dar uma aposta porque nós precisamos de espaço no insight e nós precisamos de espaço no insight na parte inferior. Sugira onde vamos fazer, ir para o fundo, tipo, 80 ou algo assim. Salve-o e vamos ver o que fizemos. Como você pode ver agora, isso parecia muito bom. Talvez eu queira ainda mais espaço no fundo aqui. Mas, por enquanto, isso é bom. Eu posso apenas sentir no texto aqui e então eu estou acabado. Então, como eu disse, agora preparamos isso. Se estamos indo para criar outras partes do site, nós podemos simplesmente copiar isso para que nós realmente não precisamos mergulhar no estilo início o tempo todo. Então isso é muito legal. No próximo vídeo, vamos construir as imagens animadas, então fique ligado para a morte. 15. Seção de imagem animado: Ei, e bem-vindo de volta neste vídeo, vamos criar esta seção da escola. Se eu rolar para baixo as imagens, começar a animar em sua parte fora desta grande interseção, que faz parte da seção principal. Sim, é muito fixe. Tem um efeito de sombra. Ele tem um mouse sobre o tipo de efeito mosca. Começou, sabe, continua flutuando. E tem esses efeitos de acúmulo. Então, se você rolar para baixo as imagens, basta começar a deslizar, e parece muito legal. Então, vamos começar. Esta é a minha página de resultados. E este é o meu elemento ou página. Tudo bem, então são apenas quatro imagens separadas em nossa casa em um canto com alguns efeitos nele. É isso. Então o que vamos fazer é começar com uma imagem, então basta ir para a seção e pegar uma imagem, pegar a imagem dentro e selecionar a imagem que queremos. Ok, então eu preparei essas imagens fora do curso para você. Um acha que é um culto? Sim , são os exemplos domésticos. Hum, então apenas baseado. Estou aqui e depois selecione o que queremos começar. Quero começar com este. Então eu clico em inserir mídia, e como você pode ver, ele está agora aqui. Vamos apenas duplicar este muito fácil, duplicado mais uma vez para pegá-lo mais uma vez e agora apenas mudar. A imagem é muito fácil. Clique nele, clique em outra imagem e insira. Clique nele. Clique em outro em uma inserção, clique em outro e insira É isso. Agora vamos adicionar os efeitos para as imagens. Hum, vamos apenas assumir um pouco. Primeiro, o que vamos fazer é colocá-los em um lugar bem específico, e se você usar a margem, não vai ficar bem. Então o que vamos usar é algo novo, e é chamado de posicionamento personalizado. Então, clique na sua primeira imagem, e este é um recurso avançado. Vá para os telefones dos EUA ir para o posicionamento personalizado, abri-lo, e, em seguida, para o cheiro, clique em linha automática, e o que isso vai fazer é que ele vai fazer a linha azul. Assim, toda a seleção fora da imagem ele vai torná-lo apenas se encaixa na imagem. Então esta primeira coisa basta clicar em linha automática e como você pode ver agora ele está no canto , mas não podemos movê-lo. Então a outra coisa que precisamos fazer é ir para a posição e, em seguida, clicar em Absolute. E se clicarmos em Absolute, você verá que os outros estão se movendo para cima porque agora podemos mover livremente essa coisa como um design. Até você ver, isso é muito, muito bom. E isso parece super fácil. Mas eu não recomendo usar esse recurso com muita frequência. Uh huh, porque é muito difícil torná-lo responsivo. E o dia também o avisará. Mas este fing aqui que isso não é algo que você quer usar muitas vezes, mesmo que pareça tão fácil apenas mover as coisas ao redor. Mas você quer estrutura em seu site. Então para fez para esses tipos de projetos, onde é sobreposição é muito complicado para conseguir isso com margem apenas usado para posicionamento personalizado . Então é isso que estou fazendo agora. E antes de começar a fazer isso para todas essas outras imagens, quero aplicar alguns efeitos. Então agora é só pegar aqui para que possamos ver o que estamos fazendo, e vamos adicionar um efeito de sombra. Volte, faça Stell. E aí está ele. Sombra da caixa. Agora está dentro da imagem em vez da borda. Então vá para o desfoque, faça muito maior, movendo-se para a posição vertical e, em seguida, faça a capacidade mais baixa. Então vá para o desfoque, faça muito maior, Então não é tão intenso. Isso parece bom? Agora vá para o efeito de pairar. E na animação do pairar, vou usar o efeito chamado Bob. Esse é um dos efeitos mais agradáveis. Na minha opinião, há um monte de baratas aqui. Vou mostrar alguns como psiquiatra roxo como Olhe para isso é muito barato. Uh, ou este pateta foi para frente? Tipo, eu não sei quando você vai usar isso, mas Bob é muito legal e começa a voar muito, muito legal. Então esse é o efetivo que queremos usar. E, em seguida, a última coisa que queremos fazer é ir para avançado, ir para efeitos de movimento, e aqui podemos definir a animação de entrada e a animação de entrada é para como as imagens entram no quadro quando você rola até a morte parte do página. Então, pai, é o efeito que fará com que todas as imagens se animem em um momento diferente. Não é porque há um temporizador. É só porque eles estão em uma altura diferente na praia. Tudo bem, então o que nós vamos fazer é clicar sobre isso e nós vamos clicar em Destino para cima e você vai ver uma pré-visualização fora do efeito novamente. Desbotado não funciona. Em seguida, basta clicar em desvanecer-se e é isso que queremos. Esse é o efeito, pessoal. Então agora coloque de volta no lugar que você quer. Agora vamos copiar, copiar isso baseado em este, e então movê-lo para outro lugar na tela, baseá-lo em outro lugar, movê-lo em outro lugar e baseá-lo no último e mudar-se para outro lugar. E como você pode ver agora, essas imagens começam a ficar menores porque elas estão alinhadas à esquerda. Então, para esta imagem, o que você quer fazer é você pode clicar nos telefones, você quer voltar para o posicionamento personalizado e, em seguida, dizer que este também, certo? Então, ele permanecerá o tamanho original. Tudo bem, coloque isso aqui, faça o mesmo por esta imagem. Vá para o posicionamento personalizado avançado e, em seguida, alinhe-o à direita. E eu ia brincar com as imagens. Vamos olhar para o meu projeto. Oh, eu fiz que eu fiz isso errado. Preciso do Teoh. Precisa estar aqui, e isso precisa estar lá. Então só precisa ser deixado, como você pode ver. E isso precisa estar certo. E agora eu estou apenas movendo todas as imagens para o lugar onde parece realmente criativo e espontâneo. Algo assim parece bom. Então o que você quer fazer é que você quer mover este aqui para a frente. Inco é chamado de índice Z eso. Isso é o que você pode fazer aqui com antecedência. Então, clique em uma imagem que você deseja ir para ver Índice e, em seguida, colocá-lo em quatro , por exemplo, porque quanto maior o número, mais o elemento virá na frente de outros elementos. Então, se você colocar isso em quatro, você vai ver que ele vai aparecer para a frente. É assim que funciona. E agora isso é realmente o que eu queria. Hum, mas como você pode ver, está sobrepondo toda essa seção. Então vamos pegar a seção principal e adicionar uma roupa de cama no fundo. Basta dar-lhe 100 pixels mais algo como isto e talvez ainda mais. Talvez 202 120. Algo assim parece bom. Agora, o espaço aqui é um pouco pequeno. Então adivinha o que vamos fazer. Clique na coluna, clique quase fãs. Queremos espaço no interior. Então isso tem apostar no espaço Lingus à direita. Isso é o que queremos. 40 pixels por ele. Então não zero para 40 pixels. E como você pode ver, há um pouco mais de espaço, talvez até 50 60 algo assim. E agora esta parte está um pouco para baixo em comparação com esta parte. Então nós vamos fazer. Também queremos adicionar apostas ao topo para que tudo isso venha para baixo . Isso é apenas aos 40 e você pode ver que queremos que isso seja no meio daquele. Então talvez 60 70 algo como este 60. Isso parece bom. Vamos agora olhar para o que criamos clicando em atualização. Volte em um pergaminho para baixo e, como você pode ver, as imagens começam a se animar e parece muito bom. Estou muito feliz com o resultado que parece muito bom. Estou muito feliz com o resultado. Este é apenas um efeito legal. Não exagere esse posicionamento personalizado porque ele pode estragar um monte de coisas, mas este é realmente bom efeito. Vamos dar uma olhada mais uma vez. Vamos atualizar a página. E como você pode ver, ele começa a se animar em “Muito legal”. Ok, obrigado por assistir. E no próximo vídeo, o que vamos fazer é construir esta seção de clientes vai ser muito fácil. Vejo vocês no próximo vídeo. 16. Seção de cliente: Bem-vindo de volta a este vídeo nós vamos projetar seção que se parece com isso. É uma seção de clientes. Tem um efeito de pairar muito agradável. Você também pode usar logotipos que tenham cor. São apenas imagens cinzentas, mas é a mesma coisa. É muito fácil. Como eu disse em menos vídeos ou menos uso começar. Então o que vamos diligir é criar uma nova seção. Então vá para a parte inferior da sua página e crie uma nova seção como esta e dê a ela uma altura mínima. Então temos algum espaço para trabalhar. E isso é muito fácil porque temos esse título, que é o mesmo que este título, mas está alinhado no meio, e temos esse texto que é apenas distal, mas depois roxo. Então o que vamos fazer é usar copiar e colar. Clique nesta cópia. Certifique-se de que você vê isso antes de você direito, clique e clique em Copiar. Vá para aqui e peitos baseados e alinhe-o no meio. É isso. Então vá para este. Clique nele copiar. Clique neste, que o seu mouse esquerdo, clique com o botão direito e, em seguida, cole e vá para Stell. Meio. Alinhe isso. É isso. Então, o que é agora? Queremos dio-iss. Queremos pegar o texto. Então detecta seus clientes. Eu tive a oportunidade de trabalhar para ir para este texto baseado ele Ir para o título, mudou o título e vamos mudar este texto no estilo decks cor para roxo E isso é quase tudo o que precisamos fazer para os textos. E como podem ver, esta linha azul está cruzando o texto. Isso ocorre porque fora a marcha menos que nós adicionamos, basta colocá-lo em menos 20. Então não está cruzando seu texto e 40 se dirigindo, como você pode ver no meu projeto se continuar um pouco no interior , há um pouco de espaçamento, mas é claro, se você quiser menos espaçamento, enfraquecer, ir para áreas, configurações do telefone indo para a margem e em menos, talvez menos 10 através da parte inferior. Então o espaçamento entre isso é um pouco menor, mas agora precisamos adicionar as seções de clientes. Como vamos fazer isso é elemento muito fácil ou tem coisas blocos de ouro, mesmo na versão gratuita Há um monte de blocos que você pode usar. Então, se você não clicar no plus para criar uma nova seção e você clicar nesta, isso é como uma pasta com muitos designs que você pode usar, por exemplo, estes cinco de graça. Você pode até inserir uma página inteira. Mas como você pode ver, maioria deles são pro, e estamos agora na versão gratuita do Element ou e estamos projetando a página nós mesmos. Então o que nós vamos fazer é ir dois quarteirões e dentro de blocos você tem pequenas partes que você pode usar. Então, por exemplo, se você quiser usar se você quiser criar uma página sobre você vai para sobre e você vai ver um monte de inspiração para a sua página sobre, e alguns deles são pro, mas a maioria deles são gratuitos . Na verdade, estes são todos de graça. Whoa. Mas se você, por exemplo, ir para clientes, você vai ver que muitos deles são profissionais porque, por exemplo, nesta versão você terá um controle deslizante que você pode usar que não está lendo uma versão gratuita, mas aquele que está dentro. A versão gratuita é se vamos para os clientes porque essa é a categoria que vamos usar. Vamos rolar para baixo. Aqui está. É este aqui. Então, basta inseri-lo, clique em inserir, e as pessoas inserem automaticamente Ele criará um Colum. Tudo está perfeito. Então, o que podemos fazer agora? Podemos até apagar esta coluna e arrastar esses dois títulos para aqui ou contratamos o Leste para a nossa tecnologia. Então é isso que vou fazer agora. Eu vou rastrear isso e apenas trazê-lo para a minha própria seção e a outra, eu simplesmente não poderia arrastá-lo. E lá está, dentro da coluna principal. E agora vou apagar isto e agora estou quase a acabar. É super legal. O que eu preciso fazer é dar um tapinha na parte de cima e na parte inferior. Então, vamos para a seção principal aqui. Vá fazer isso. Os fãs vão para batendo desvinculados isso em 82 na parte inferior. Então um pouco de espaço aqui e 80 para o topo e como você pode ver, estavam quase terminados. Agora eu acho que o espaçamento entre esses dois é um pouco alto demais, e às vezes eles já aplicaram espaçamento nesses elementos que você dragar daqui , por exemplo, aqui está um pouco de espaço que é Não neste cruzamento. Então, se você clicar aqui, você vai ver nos fãs que eles têm. Eles já usaram uma aposta aqui, então nós vamos fazer isso menos talvez, tipo 20 algo assim. Agora, se você quiser adicionar uma boa animação, você já sabe onde ela está. Está em efeitos de movimento. Então, certifique-se de que você está neste cruzamento, e o que podemos fazer agora é, por exemplo, você vê desvanecimento. Então, se você rolar para essa parte da página, ela começa a desaparecer ou torná-la o mesmo efeito de antes. Mas eu recomendo não usar o mesmo efeito em toda a sua base porque, você sabe, se você faz muitas animações, torna-se um pouco infantil. Isso não é o que você quer dialogar. Eu sugiro que você misturar as animações, mas também não muito parecido com tentar encontrar equilíbrio neste. Então eu recomendo por dias, por exemplo, usado para o destino ir para este efeito de movimento avançado e destino. Tudo bem, vamos atualizá-lo e ver o que criamos. Vá para uma página de resultados em uma rolagem para baixo. Tudo parece bom. Isso qualquer companheiro dentro e lá está ele lentamente anima em. Se você rolar mais rápido, você vai ver a animação. Vamos subir e eu estou rolando festivo. Não, e aí você vê. Começa a animar nesta parte e os detentos primeiro, e então essa parte entra. Mas se você rolar muito rápido, vai acontecer ao mesmo tempo. Então é isso. É assim que você cria uma seção de cliente. Mas se você quiser alterar os logotipos, basta clicar no logotipo e clicar e escolher uma imagem. Carregue o seu próprio local, mas Onley usa imagens B e G com fundos transparentes gastos. Isso é importante. Então, se você tem trabalho para Coca Cola, por exemplo, você pode obter o logotipo da Coca Cola, mas então apenas procurou a versão PNG. Então, como você pode ver aqui, aqui está uma versão B e G, porque se você proteger isso para o seu computador, você vai ver que é um PNG. O PNG não precisa ter transparência. Mas PNG é a única forma de que pode ter. Transparência é uma pressa usando aqui. Esta é uma imagem transparente. Se você colocar isso na página aqui, vai ficar bem. Ah, e você não vê um fundo branco. Então isso é algo que você precisa saber antes de começar a adicionar os logotipos . Se você não conseguir um local sem um fundo branco, às vezes isso é possível. Então o que você precisa fazer é ir para dentro da coluna e tornar todas as colunas brancas como um fundo, não preto, branco. Hum, se você não tem imagens transparentes, então isso é realmente bom. Estou muito feliz com isso. E agora no próximo vídeo, o que vamos fazer é criar outro efeito legal, e esse é o efeito de texto animado. Então espero vê-lo no próximo vídeo 17. Seção de animação número: Oi, todo mundo. Bem-vindo de volta a este vídeo nós vamos projetar na seção de números animados que você está vendo aqui. Eso se você atualizar a página, os números vão animar em parece muito legal. E também é muito simples de construir. Então, vamos começar. Como sempre, o que vamos fazer é criar uma nova seção principal. Vamos dar-lhe uma altura mínima. Então, temos algum espaço. E sabes que mais? Para esta parte, vamos apenas começar com um fundo D porque esse é o psicopata chamador roxo escuro para ainda ir para o fundo e, em seguida, clique no clássico clique no colarinho e, em seguida, selecione o colar que você quer ou use decodificar sobre aqui, Como você pode ver no meu projeto caiu. Tem três colunas. Se este é um, este é fazer e este é livre para parecer idêntico. Então o que eu vou fazer é eu vou criar este aqui. Então eu vou criar este que eu vou duplicar este e, em seguida, mudar o último. É tudo o que estou a fazer aqui. Nós já temos que enviar texto a única coisa que precisamos mudar é a cor do texto. Tão fácil. Basta copiar o texto dos clientes e baseá-lo aqui. Agora não vemos porque é preto. Então vá para o estudioso do Stell Deck e depois vá para o branco. Muito fácil alinhá-lo à esquerda conteúdo uma linha à esquerda, em seguida, copiar o subtexto com base em nosso título. Vá para o estilo e, em seguida, alinhe-o à esquerda. Então diz “estatísticas”. Alguns números interessantes. Não são os melhores técnicos, Uhm, mas seus efeitos estavam indo para usar agora. Estatísticas. Ok, então agora precisamos criar a segunda coluna. Então o que vou fazer é duplicar esta coluna. Vou apagar tudo o que está lá dentro porque vamos usar algo novo. E é ouro. Oito, senhor, você vai. Você não vai usá-lo se tentar lutar. Número é ouro gounder porque é um contador animado. Se você arrastar isso em seu já vai ver se não é preto? Sim, é preto, por isso não o vemos. Então vamos primeiro mudar as cores para vermos o que estamos fazendo. Vá para ainda ir para o acadêmico de tecnologia, fazer isso branco, e também fazer o título leve e como você pode ver, agora temos o número da escola, ir para o conteúdo. E como você pode ver aqui, podemos brincar com as configurações. Então, por exemplo, podemos usar outro número aqui. 50 por isso vai começar. Começará do zero. Habilitar contagem para 50, mas também podemos começar em 10 e, em seguida, ele começa em 10 e ele e ele pára em 50. Então, por enquanto, eu vou colocar no número um e vamos fazer este 54. No meu projeto, eu tenho que estatísticas, sites projetados e clientes atendidos. Então, por enquanto, precisamos mudar. O telefone está aqui. Não sei se esta é a boa diversão. Parece que os bons sites de fundos projetados. Esse é um texto que você colocou aqui sites projetados. Vou à estela para a tipografia do título. Eu vou fazer este 16 e eu vou fazer o peso. 100 grátis? Sim, parece muito melhor. Talvez o número seja um pouco grande demais, então eu vou conseguir. Não sei, 54 algo assim que parece bom. Agora, antes de começarmos a duplicar, precisamos adicionar esse esboço. Esse esboço não é um Bart fora do número animado. Na verdade, é uma fronteira dentro da coluna. Então clique na coluna, clique em Stell, clique em Borda, e agora vamos usar uma borda alinhada. Sólido é quando há apenas uma chamada. Você também pode usar uma linha dupla. Eu nem sei o que é isso. Basta dar uma cor e ver o que ele faz vai fazer este roxo ao cheirar. Vamos fazer um pixel e não estamos vendo nada agora. Vamos apenas colocá-lo em sólido, por exemplo. Não vemos nada. Vamos apenas nos contentar com muito maior. Então vemos o que estamos fazendo lá ISS. Vamos deixar às oito por enquanto, mas vamos mudar isso mais tarde. Primeiro, queremos criar algum espaço entre a linha de borda e a coluna real, porque caso contrário não vemos o que estamos fazendo. Se estamos trabalhando, se estamos trabalhando com um pixel com borda, é por isso que precisamos ir para avançar. Normalmente você adicionaria apostas, mas como D Border é um bart fora da coluna, isso não vai mudar nada. Então, se eu aumentar a borda, como você pode ver, ele apenas indica coluna de estúdio conectado. Então não é isso que vamos fazer. Vamos aumentar as margens do lado de fora dessa coluna. Assim, a visão, que é onde está a fronteira, será desconectada. Eso, vamos por agora. Basta colocar em você sabe, cinco está tudo bem, então volte para Stell Border e então faça isso menor. Eu só vou colocar em uma. Isto é o suficiente. E como podem ver no meu projeto, temos mais algumas apostas no interior. Agora vamos usar apostas, voltar ao avançado, apostar. E vamos aumentar as apostas em todos os sites para torná-lo mais parecido com o meu design. E esse texto começa a subir. Por quê? Porque as configurações nesta coluna dizem que todo o conteúdo na coluna precisa estar sempre no topo. Então, vamos clicar nesta coluna, ir para colocar seu layout vertical T e, em seguida, colocá-lo no meio. E agora é só ficar onde precisa estar. Certo, então agora temos isso. É muito branco. Mas se vamos duplicar isso como vamos fazer agora, você vai ver que está quase pronto porque só torna menor. Então agora vamos mudar isso. Número 22 clientes atendidos. 22 clientes atendidos. Vamos atualizar nossa página, e vamos dar uma olhada nos resultados. Role para baixo. Role para baixo. Parece bom. Parece bom. Você vê, isso é muito bom. Eu quero um pouco mais de carinho na parte de baixo e o topo é que você pode ver bem aqui para que pareça mais importante. Então, a última coisa que vou mudar. Clique na seção principal, é claro. Vá para avançado e, em seguida, adicione mais preenchimento na parte superior e na parte inferior. Eso desvinculou isso. Vá para o fundo em algo como, Oh, isso é demais. 40. E no topo, algo como 40. Ah, talvez uns 20 e 20. É o suficiente por enquanto. Atualização do Glicken. Vamos ao nosso resultado. E como podemos ver agora, isso parece bom. Tudo bem. Isto é para este episódio. Como você pode ver, é super fácil de dio e parece muito legal. No próximo vídeo, vamos criar seções de depoimento em uma seção muito importante para seu site de portfólio . Muitos sites têm um pé posto. Quero dizer, desculpe, uma seção de depoimentos. Então é aí que vamos criar. Parece muito complicado com decente, não é? Mas l Um mentor tem um pequeno truque para ele, então eu espero vê-lo no próximo vídeo. 18. Seção de Testimonial: Ei, pessoal, bem-vindos de volta neste vídeo vamos desenhar uma seção de depoimentos D. Parece muito limpo, e também é muito fácil de fazer porque Element ou tem um recurso de testemunho embutido. Então não temos que mexer com colunas e seções para obter um design que se pareça com este. Também, se você atualizar a página, você vai vê-la. Ele tem essa pequena animação que também é onde vamos adicionar, mas este vai ser um tutorial muito fácil, Mas testemunhos são qualquer coisa que muitos sites precisam, então eu vou mostrar a vocês a maneira mais fácil de fazê-lo. Então estamos de volta aqui no nosso site, e eu estou tipo de clique em editar com L um mentor. Vou diminuir o zoom, está bem? E como sempre, a primeira coisa que vamos fazer é criar uma nova seção, dar uma altura mínima de 400. Isso está tudo bem. E a primeira coisa que quero fazer é nesses títulos. Já que já criamos títulos como este, vamos copiar e alinhar. É para a esquerda. Então isso vai ser muito fácil. O que eu quero fazer é pegar isso e baseá-lo aqui e alinhá-lo à esquerda. E também pegar isso com ferramenta de cópia e, em seguida, baste sob de clientes e também ir para estela e alinhar sua para a esquerda. O título é depoimentos. E o subtexto é o que os clientes dizem sobre o meu trabalho. E para criar um design como este, precisamos de colunas de árvore e para colocar três colunas e ao lado do outro precisamos de uma seção interna . Então essa é a primeira coisa que vamos arrastar. Então vá para os nove pontos e agarre o cruzamento e coloque-o sob o seu subtítulo. Então já temos duas colunas, mas agora só precisamos de uma porque vamos duplicar o 1º 1 Então a liderança, o 1º 1 então vá para os nove pontos novamente e digite o depoimento. Lá está ISS que também está na versão gratuita. Clique nele. E este é o padrão. Muito legal. Como você pode ver, já tem um texto, uma foto, um título e um nome. E você também pode alinhá-lo à esquerda. Então seria assim. Mas, como podem ver, não está alinhado à esquerda aqui. Então a primeira coisa que vou fazer é apagar a palmada interna desta coluna para que ela se alinhe perfeitamente. Então, clique em mais e menos, e então você pode ver que ele se alinha perfeitamente com o conteúdo acima dele. E antes de duplicarmos isso, precisamos mudar a estela. Então clique no seu Eu posso clicar na estela e no meu projeto final, ele se parece com isso. Então o nosso título é um pouco maior. Vamos ver quais são os tamanhos do título. São 20 e o subtítulo é 15. A propósito, são 20 e 15. Não sei se já disse isso, mas esse Blufgan é para o Google Chrome. Você pode verificar telefones em qualquer site. Chama-se que telefone? Por isso, aceda à Loja de extensões do Google Chrome e pesquise por ela. Se você também quiser usar isso. Ok, então 20 e 15 é o que precisamos. Então vamos para o nome. O nome será de 20 pixels tão digitado aqui e então um título em D será 15 e também o título é roxo, e não é tão grosso como é aqui. Então vamos colocar isso, acho que 300? Sim. E eu vou dar-lhe uma cor roxa. Isso parece bom. E por enquanto, vou colocar uma foto aqui para termos um rosto em nossos sites, ou vamos enviar uma foto de uma pessoa fora do curso. Eu preparei que está nos descarregamentos. E aqui estão rostos de árvore que eu preparei para você testar para que você possa atraí-los, selecionar a primeira imagem e clicar em inserir mídia. E como podem ver, neste momento, tem um rosto. Então agora estamos prontos para duplicar essas colunas então tipo de clique em duplicado uma vez na coluna e agora duplicado mais uma vez. Mas como você pode ver, dependendo não é realmente bom. Então vamos consertar isso. Precisamos de mais espaço entre duas colunas. Então o que eu vou fazer é clicar nas configurações da coluna, e então eu vou adicionar coluna à direita dessa coluna, certo? Então, a visão, e depois à direita, porque temos no espaço aqui. Então é aí que vamos fazer. Vamos clicar na autoridade. Talvez. Ou 20 talvez 20 é suficiente. Então agora isso é bom. Vou copiar para ficar aqui. Então copiou sua coluna. Stell, vá para a outra coluna e baseie-a. Vá para a outra coluna e baseie-a. Tudo bem. Agora, você pode simplesmente ir para o seu outro profissional, caiu, mudar a imagem e ir para o último e também mudou a imagem. Ok? E eu também mudei o texto. Então vamos apenas atualizar e ver o que fizemos. Algum tipo de clique nas mudanças de pré-visualização. Vou aumentar novamente para 100%. Eu vou rolar para baixo, e como podemos ver agora, isso parece quase bom. Mudamos mais algumas coisas. Então, volte. Clique em um sinal de menos novamente. E precisamos de mais espaço em todas essas seções. Ou clique na seção telefones de Pellicano. E, claro, vamos adicionar apostas ao topo e ao fundo. Então anúncio, por exemplo, 80 para ambos os lados. Talvez seja demais. 60 no top 80 na parte inferior, ou você sabe o que, 60 na parte inferior. Isso parece bom. E também quero um pouco mais de espaço entre os depoimentos e o título. Então eu vou clicar, e eu quero mais espaço do lado de fora. Então essa é a margem, e nós vamos adicionar, por exemplo, 20 pixels fazer o topo. OK, agora clique em atualizar novamente. Volte ao seu portfólio, atualize-o, role para baixo. E como você pode ver, isso parece bom. Bem, na verdade, o texto aqui é uma pequena marcha. Então essa é a última coisa que quero mudar. Clique em uma estela em Deke Continent Isso é conteúdo Kulti. Vá para a tipografia e talvez coloque em 15, por exemplo, ou 16. Isso é o suficiente. Oh, foi. Acho que foi no 18. Isso é muito grande. É um clique na cópia e baseado no East L nos outros dois. É fácil é que Salve novamente e vá para a sua página. Sim, isso parece bom. Então, como você pode ver, o recurso de testemunho é muito fácil de implementar. A única coisa que você precisa olhar para fora é que o texto fora de seus depoimentos não é muito longo porque, por exemplo, se este é muito longo e este não é, não vai ficar muito bom. Vou mostrar isso rapidamente para você. Se eu voltar para a minha página, eu só vou mudar o conteúdo e duplicar. Você vai ver que o alinhamento não é muito bom. Então eu sugiro que você mantenha esses depoimentos na mesma extensão. E se isso é impossível porque o depoimento é apenas mais longo, então o que você quer fazer é clicar na coluna e você quer colocar o conteúdo na coluna para o fundo. As fotos sauditas estarão sempre alinhadas. Então, se ele vai uma seleção vertical, quero dizer linha vertical e, em seguida, clique na parte inferior. Você pode definir todos eles na parte inferior e, em seguida, sua seção de depoimento. Vamos olhar pelo menos um pouco mais alinhados por enquanto. Eu não vou fazer isso. Eu só vou mudá-lo de volta. E quase esqueci antes de terminarmos. Eu também adicionei animação, Então eu cliquei no cruzamento, eu fui para efeitos de movimento, e eu adicionei ao destino em cima Então ele virado para cima. Se você rolar para essa parte da página, tudo bem, clique e atualize. E agora, no último vídeo em que vamos fazer, vamos desenhar na última parte da nossa página inicial . Oh, eu vou refrescá-lo ou você vai ver que há também um pouco de animação. E se você acabou com isso, você construiu sua própria primeira home page completa. Está bem , vemo-nos no próximo vídeo. 19. A chamada à ação com um botão: Bem-vindos de volta ao último vídeo, vamos terminar a nossa página inicial. Nós vamos projetar uma seção que se parece com isso e tem este bom pairar de fato. Ele tem um botão Devil Link Teoh. A outra página chamada Portfolio também faz onde vamos criar neste vídeo. Tudo bem, vamos voltar para o seu elemento ou base e fora do curso. Vamos criar uma seção. Vamos diminuir um pouco e, como sempre, vamos dar um minuto de ácaros mínimos. E primeiro vamos olhar para as colunas. Essa é sempre a primeira coisa que você quer dificar antes de começar a arrastar todos esses elementos. Então, do que precisamos? Precisamos de uma grande volta. É disso que precisamos. Precisamos de um cruzamento para o Bart. E quer saber? Eu também vou usar um cruzamento para fora da barra para que eu possa copiar dis tell para outras páginas facilmente em vez de ter que copiar cada camada individual. Então é isso que vou fazer. Vou criar dois cruzamentos com uma coluna aqui e duas colunas ali e em segundo plano. Tudo bem. Vou pegar os $9 aqui e pegar nosso primeiro cruzamento com que é tem uma coluna e então eu vou arrastar outra em uma seção que tem duas colunas voltar. E como você pode ver, a interseção inferior é uma linha para o fundo desta seção principal. Então, o que você quer dialogar é que você quer pegar toda a seção e colocar todo o conteúdo dentro da seção grande para baixo para o seu alinhamento vertical. E então vamos apenas apostar para o topo Teoh torná-lo caber. Então, alinhamentos verticais colocam isso no fundo e não vemos nada acontecer ainda porque temos uma altura mínima e não há conteúdo. Então o que vamos fazer é pegar nosso campo de imagem, e vamos basear em uma imagem. E como você pode ver agora e agora, ele tem altura suficiente, então ele começa a se alinhar ao fundo. Mas há apenas algumas apostas aqui dentro dessas colunas. Então é aí que vamos apagar. Então vamos consertar essa coluna primeiro, e depois vamos duplicar para não precisarmos dessa, mas vou mantê-la aqui agora. para que eu possa ver meus resultados finais antes de começar a duplicá-lo, porque este é um layout 50 50. Então primeiro, vou apagar o estofamento porque quero que isto seja uma luz no fundo. Vá para avançado desvinculado isso. E lá vai você também vai para a coluna principal porque o avançado e no link isso E lá vai você. Agora está perfeitamente alinhado ao fundo. E a altura mínima para esta parte não é realmente tão inteligente, porque se você começar a aumentar isso para aumentar a altura da sua coluna, ele vai criar um espaço em branco aqui porque toda esta seção principal precisa ter um altura mínima. É o que você está dizendo. Então não vamos usar esse recurso para dissecação. Vamos usar as apostas no interior de Coloque isso no padrão. Então sabemos que nossas imagens estarão sempre alinhadas na parte inferior, então vamos pegar o cruzamento das nossas já nele. Vá para o avanço, e eu vou adicionar apostas, também, para cima por dentro. Então vamos colocá-lo em 80, por exemplo. Oh, não 100 s, então teremos algum espaço no topo. Além disso, como você pode ver, há espaço entre esses itens. Então é isso que eu também vou criar. Voltar, ir para a coluna D e ir para a direita em um acariciar off 20 por exemplo, porque também vai estar pendente nesta seção, mas depois à esquerda, Então duplo, isso é o que vamos criar a lacuna que Você vai ver por aqui. Tudo bem, agora podemos usar imagens, então vamos clicar na imagem, e eu também preparei essas imagens. Eles estão nas pré-visualizações mais completas do portfólio. Arraste-os para dentro e vamos ver se, em nosso resultado, é primeiro, é contato com uma versão. Então eu vou clicar nisso, e eu já inseri uma sombra na imagem para torná-lo mais fácil para você. Então agora você vai ver que a preparação é realmente importante e vai realmente acelerar o seu fluxo de trabalho, mesmo que ele se sente como ele. Dezenas. Porque agora eu posso eu posso realmente facilmente preencher esta página. Tudo bem, eu vou duplicar isso as pistas que uma coluna grap D porque o espaço deles aqui , nós queremos isso aqui, ir para avançado, e nós vamos colocar o seu 20 na esquerda. E lá vai você. Altera a imagem para outra imagem. Clique nele, insira. E lá vai você. Agora, antes de arrastarmos nosso texto, que é branco, queremos definir nosso plano de fundo. Caso contrário, não vamos ver o texto. Então vou cagar na seção principal. Vamos dar-lhe um fundo. Isso é o que no estilo, clique no clássico, Selecione uma imagem. Essa é uma das fotos e as fotos estão no mapa de fotos, então eu só vou beber em todas as fotos para que eles já estão na minha biblioteca de mídia. Dedicado que usei no fundo é o meu rosto olhando para o botão disse Essa é a imagem que eu vou usar por agora eu vou clicar em inserir e agora não é muito bom porque eu não sentei posição cidade, certo? Acho que o configurou no topo do centro porque então meu rosto será viável. Sim, mas ainda não está visível porque precisamos adicionar conteúdo aqui, e então meu rosto ficará visível. Por enquanto, vamos continuar e em uma sobreposição de fundo, então vá para a sobreposição de fundo e selecione uma cor do nosso colarinho. Vai ser uma chamada escura e púrpura escura ou algo assim tão tarde e aumentar a capacidade para algo como 0,7. Ok, agora eu vou adicionar o conteúdo aqui, e nós vamos ver se nós já temos uma estela em nossa página que parece a mesma. Acho que vou pegar essa mensagem porque já está alinhada. E então só precisamos mudar os colares. Tudo bem, então volte para sua página. O que você deseja fazer é copiar o título do cliente, rolar para baixo e baseá-lo e, em seguida, copiar o subtítulo. Copie e encare. Vá para obsoleto e mude a cor para branco. Não. O que? Sem White. Ok. E também vá para o seu título e mude d cor dois brancos, todos os direitos. Agora queremos adicionar um botão, e mas também é muito simples. E porque preparamos nossas coleiras, ela automaticamente vai nos dar fundo roxo profundo, então certifique-se de que está dentro de sua interseção superior, então direcione isso, e já está roxo. Isso é porque já preparamos a cor do acento aqui. Tudo bem. Clique no seu botão novamente. Alinhe-o no meio e precisamos adicionar espaçamento entre este cruzamento e este cruzamento. Podemos dar a isso uma marcha inferior ou prato no topo. Realmente não importa. Vou para avançado no link. Este e eu vou adicionar algo como 40 ou talvez 60 ou 70 ou 82 Dietz up. E agora meu rosto ainda não está visível. Então eu vou brincar com as seções dessa imagem. Então, clique em sua seção principal, vá para o fundo, e nós vamos jogar com a posição. Talvez o centro inferior seja o que queremos. Sim, ou centro D. Centro é o que queremos. Então, como você pode ver, não era tão algum centro top. Ele vai centrar no centro. E agora isso parece bom. Então vou colocar o texto do título. Então eu mudei o conteúdo da camada de texto aqui e agora eu vou bloquear este botão primeiro. Eu queria que Teoh fosse nomeado portfólio A. Então você pode ver que isso é um parafuso de botão tigelas, botão de texto. Então eu vou para Stell, vou para a tipografia, e eu vou dar um peso. Isso são parafusos, sim, sim, que perdem bem. E agora eu também quero adicionar esta animação agradável pairar. E isso é o que você pode encontrar também nesta seção ir para pairar e, em seguida, sobre animação e colocá-lo em encolher porque, encolher, então você terá este efeitos agradáveis. Agora, se você quiser vincular este fundo a outra página, o que você quer fazer é ir para o conteúdo e há um campo chamado Link aqui . É que eles facilitaram muito. Você pode copiar o link dessa página e baseá-lo aqui. Mas você também pode encontrá-lo se você apenas digitá-lo aqui. Então você apenas digita o portfólio e então ele vai dizer, Oh, você quer dizer esta página? Sim. E se você clicar sobre isso, ele irá automaticamente gerar o link D. Agora, também, um pequeno truque clique nesta engrenagem. Eu posso e você pode abrir isso em uma nova janela. Isto não é o que você quer fazer para este tipo de botões em seu site. Mas se você tiver um botão no seu site que você deseja vincular a outro site, você não quer que as pessoas saiam do seu site. Então você vai verificar essa. Assim, seu site permanecerá aberto em uma guia do navegador e o novo site será aberto em uma nova guia para o seu próprio site. Isso não é realmente necessário. Mas eu queria te mostrar que ele está lá. E a última coisa que fiz foi editar uma animação, fazer esta seção inferior. Então eu vou para efeitos de movimento avançados e depois destino para a esquerda. Tudo bem, vamos verificar. Nosso trabalho teria. Nós fizemos. Vamos clicar na atualização. Vamos voltar ao meu portfólio. Vai refrescar. Vamos rolar para baixo. E como você pode ver, isso parece bom. Parece quase idêntico ao design que temos aqui se for retomado. Como você pode ver, talvez o fundo uh, roxo é um pouco mais escuro do que aqui, mas é o mesmo. Esqueci-me do efeito sobre as imagens. Vou mostrar isso para se você for para uma imagem, você vai clicar no Stell e você adivinhou. Está aqui em pairar. E depois há uma animação de pairar e a que usei o seu pendurar dourado. E isto é o oposto de Bob Worth, onde começa a flutuar como fizemos no topo. Esta é a versão inversa do Bob. Chama-se Hang e não copie a estela desta para esta. Porque senão vamos estragar as apostas que já montamos. Então agora precisamos clicar nesta imagem, ir para Stella novamente. Colligan pairar, pairar a animação e, em seguida, clique em Pendure. E agora essas duas imagens funcionarão. E o que você provavelmente já está pensando é por que já imagens vão para fora da página? Bem, isso é verdade. Mas isso não é um problema por enquanto. Porque em outro vídeo, nós vamos criar o restaurante de comida que você está vendo aqui e nós vamos certificar-nos de que o restaurante de comida está no topo desta seção que você está vendo aqui. Então as imagens só vão abaixo fazer comida. Então não se preocupe com isso. Por enquanto, basta clicar e atualizar. Volte, role para baixo. E agora sim, você pode ver que já há outra comida aqui, então isso também parece bom, mas nós vamos substituir essa comida ou por outra. Tudo bem, agora você terminou sua própria primeira página inicial. Espero que tenha aprendido muito. Vamos criar as outras páginas. Vamos redesenhar o menu aqui. Você já aprendeu muito. As outras páginas são relativamente simples em comparação com o que você já aprendeu. Eso Estou animado para os próximos vídeos chegando e espero vê-lo no próximo vídeo. 20. Como criar o rodapé: Todo mundo. Bem-vindo de volta ao último episódio Off Days capítulo, onde vamos projetar a comida. Er, o er comida não é realmente parte fora da página inicial, mas é parte fora de cada página na versão gratuita do Elementary. Você não pode criar um cabeçalho e um rodapé com em elemento ou você tem que fazer isso na equipe . Mas em um site simples como este, Eu só quero usar L um mentor para criar o er comida, porque isso não é muito fácil de fazer dentro de uma equipe, e é muito fácil de fazer em l. um mentor. Mas você não pode dizer como bem, este elemento precisa estar em cada página no piloto automático. Então o que precisamos fazer é criar essa parte e então precisamos copiar essa seção para nossas quatro páginas. E como este site tem apenas quatro páginas, isso não é um problema real. Se você tem um site maior, você quer elemental pro porque nós não fizemos pro elemental. Você pode projetar uma seção como esta e, em seguida, dizer Ok, esta comida ou precisa estar em cada página eo cabeçalho que vamos projetar mais tarde. Este tinha também precisa estar em todas as páginas. Sabe, este é um cabeçalho bem simples. Mas se você quiser criar uma adição mais complicada você certamente quer elementar pro para as pessoas que já estão interessadas e sabem que isso é algo que você quer. Vou colocar um link para o elemental pro aqui, mas também há informações no final do curso, então você também pode esperar por isso. Tudo bem, vamos agora começar com a comida, então este é o design que vamos criar. Então, o que é? É uma seção. É uma seção grande e há cinco colunas com texto e logotipo. Acho que já sabes como vamos fazer isto. Então nós vamos apenas ir para a nossa página, nós vamos clicar em uma nova seção e então nós não vamos dar em altura mínima como normal. Vamos avançar, e vamos usar a opção de apostas. Você vai clicar no link isso e então nós vamos adicionar flexão para o fundo para o topo . Então vamos agora, por exemplo, em 60 para o fundo e 60 para o topo. Isso deve ser suficiente. Acho que vamos dar a ele um estudioso de fundo que temos em nosso painel de cores como vemos aqui. Certo, essa é a cor certa. Parece bom, mas vamos voltar e ver se eu fiz isso. Certo. Como pode ver,precisa ser um pouco mais alto. Como pode ver, Então eu vou voltar para avançado, e eu vou aumentar dependendo de 80. Então o que vou fazer é arrastar um título. Vamos usar a função de título, e vamos em grande, vamos primeiro dar-lhe um colarinho branco. Então podemos ver o que estamos fazendo. Então escolha o branco, em seguida, vá para o conteúdo e o grande T html tech idade seis. Então será muito menor, e então é muito ousado. Então o que vamos fazer é ir para a tipografia, fazer com e ir para o normal. Agora, mude o texto, faça o que quiser. Por exemplo, estou no meu e-mail para estar aqui, e agora vamos simplesmente duplicar esta seção muitas vezes. Então, duplicado uma vez segunda vez e certifique-se que vai ser cinco fora dessas seções e em seguida, clique no meio, ir para os nove pontos, pegar uma imagem e colocá-lo em cima ou abaixo. Não importa, porque vamos apagar isso. Agora precisamos consertar o alinhamento. Como você pode ver, Clique na imagem. Vamos arrancar o nosso logótipo dentro dele. Onde está o meu logótipo? Não sei por que desapareceu. Então eu vou arrastar o meu logotipo. Hum, sim. Aqui está o meu logótipo. Vou rastreá-lo. E eu não sei se meus logotipos não estão mais aqui. Inserido. E, em seguida, vá para Stell, Clique em pixels para o tamanho e, em seguida, dar-lhe uma mistura. Uh, com algo como este 72. Isso é bom por enquanto. Mas como você pode ver, o alinhamento não é bom. Então, o que precisamos fazer? E, na verdade, eu precisava trabalhar antes, porque agora eu preciso aplicar a todas as colunas, mas nós vamos clicar na coluna. Alinhamento vertical precisa ser no meio, porque então ele será alinhado dois D logoed sempre vendo aqui. Então eu vou copiar. Vou basear o Stell sobre os outros da Judy. E há também mais um problema de alinhamento, que é que o texto está alinhado à esquerda. Mas isso está causando um problema aqui. Porque agora esta parte é muito maior do que esta parte. Então o que você quer fazer é clicar em um texto distante aqui e alinhar à direita. É e também fazer isso neste texto, certo? Alinhe-o para que ele crie mais foco em direção ao logotipo. Agora vou mudar o texto, e estou quase terminando. Ok, então eu adicionei algum texto dentro sobre o er de comida, e como você pode ver agora, isso parece bom. Então, se você quiser vincular esse texto a uma de suas mídias sociais, por exemplo, você pode clicar aqui e você pode basear o link do seu instagram aqui. Ok, então eu vou clicar na atualização, e nós vamos ver se foi ótimo. Então, vamos clicar em pré poucos. Vou fechar o velho pré. Se você fosse rolar para baixo, e como podemos ver a nova coluna, quero dizer, a nova seção já está sobrepondo a seção mais antiga. Então agora não precisamos consertar as imagens que estamos vendo aqui. Mas a última coisa é que nosso rodapé da equipe ainda está aqui. Então é aí que vamos desativar. Não podemos fazer isso. E nós não l um mentor. Então precisamos ir para a página real e precisamos clicar em personalizar Por quê? Bem, porque isso é parte fora da equipe. Como eu disse antes do cabeçalho e da comida, er, você só pode mudá-los dentro da equipe. Se você só quer fazer tudo dentro elemental ou você vai precisar elemental pro eso. Eu vou diminuir um pouco com comentários menos, e eu vou rolar para baixo para que eu possa ver a comida ou rolar para baixo neste menu. E aí está, comida ou bruxa, e vou desactivar isso. E agora só há este bar e que é ouro, a comida ou o fundo. Então, também podemos desativar esse perfeito em alguns vídeos a partir daqui, nós também vamos personalizar o cabeçalho para torná-lo parecido com o design que você vê aqui. Mas por enquanto, vamos terminar isso porque desativamos dois rodapés, vamos clicar em publicar e ver se funciona. Então, clique no X e feche a rolagem para baixo. E como você pode ver agora nós temos este rodapé e parece bom. Ok, então é tudo para o Chip. Liberte o número no próximo capítulo, onde vamos fazer é criar as outras páginas. Vamos fazer com que a página inteira responda. Isso significa que ele também pode ser visualizado no tablet e celular. Muito, muito importante. Se você está criando sites que você também faz o site bom para celular e tablet e nós vamos personalizar o menu para mudá-lo deste design para algo que se parece com isso. Tudo bem. Espero vê-lo no próximo capítulo. Se tiver alguma dúvida, me avise e te vejo no próximo vídeo. 21. Design de página móvel e Tablet: Ei, pessoal, bem-vindos de volta ao próximo capítulo deste capítulo. Vamos mudar o menu e fazer nosso site responsivo. E nós também criaremos as outras páginas sempre vendo aqui. As outras páginas não são tão difíceis. Esti tarifas home page, e vamos criá-los super rápido. Vou mostrar-lhe as maneiras de torná-los super rápidos, porque em cada site, sua home page, é provavelmente a página que você vai gastar mais tempo. Porque se você tem o banco de casa é muito fácil de copiar e basear diferentes estilos e seções diferentes em outras páginas. E se você praticar isso, você pode criar sites muito rápido. Isso pode te dar muito dinheiro se vender sites. O que vamos fazer primeiro é consertar nossos motivos para celular e tablet. L. Um mentor tem um ótimo recurso para isso, então se voltarmos para nossa página, eles têm, eles têm este botão aqui. É chamado de modo responsivo para as pessoas que não sabem o que é responsivo, significa que sua página responde ao dispositivo real que está usando. Então, um site responsivo é um site que é responsivo para fazer a tela. Então, por exemplo, se clicarmos no celular, veremos que nossa página fora do curso parece muito diferente agora. Não é bom em algumas partes. Na verdade, na maioria das partes, é bom. Por quê? Bem, porque elemental é construído com esse recurso em mente que com a maioria das coisas que vamos fazer, ele irá criar automaticamente um tipo de página responsiva. Por exemplo, na Web esta seção tem quatro colunas próximas umas das outras. Se você colocá-lo em um celular, elementos mod são automaticamente olhos como Oh, bem, você está agora no modo móvel. Vamos colocar essas colunas nesta ordem. Então é isso que está acontecendo aqui. É por isso que não temos que mudar nada porque já está tudo bem. Mas desta parte, não é bom. Por quê? Bem, porque temos usado um monte de roupa de cama em disco Ahlam quando criamos para chorar. Então vou te mostrar o que quero dizer. Se formos para a área de trabalho e clicarmos no acariciamento, vamos para avançado. Podemos ver lá 700 virando por aqui. Então, agora, se você voltar para Mobile, ele ainda vai dar 700 rebatidas, mas em um dispositivo móvel, não há nem 700 pixels com. Então é por isso que não está funcionando agora. E isso não é muito bom sobre Element ou eu acho, mas não diz 700 aqui. Não diz nada. Então você acha que não há nada aqui dentro, mas há. Ainda há as 700 apostas dentro desta coluna que estamos vendo aqui, e eu vou te mostrar se você desvincular isso, você vai ver que a página vai ficar boa. Então eu vou clicar nele. E como você pode ver agora é bom, certo? Tão profundo se você mudar, se você criar algo no WEP e você mudá-lo para o modo tablet ou móvel, as coisas ruins que você configurou e isso é importante para entender, a aposta disse que você configurou Benning e margens na Web também estar lá no celular e tablet. Mas você não os vê aqui no menu. Tudo bem, isso vai te poupar muitas dores de cabeça, então sempre redefina as apostas. 2 para 0 se você criar algo em chorou primeiro e depois ir para o celular. Ok, eu realmente queria enfatizar esse ponto. Caso contrário, seu site não vai parecer. Então vamos primeiro consertar essas coisas fáceis. Vou clicar neste também, também, e vou desvincular dependendo. E agora vai da esquerda para a direita. E isso parece bom. Precisamos consertar essa parte. E também, como podem ver,toda a seção da aliança agora é parte desta seção. como podem ver, Não é isso que queremos. , Além disso, as roupas de cama aqui não são muito boas. Isto parece realmente muito bom. E isso também não parece muito bom. Oh, e a comida, er também não parece muito boa. Então vamos consertar isso. E também uma coisa muito importante que você precisa fazer antes de começar a editar as colunas aqui. Se você acha que você deve ter um pouco de apostas à esquerda e à direita aqui , não apostar dentro de sua coluna ou dentro sobre suas camadas para torná-lo adequado. Não faça isso. Onley aplicou roupas de cama para decidir em sua seção principal. Por quê? Bem, caso contrário, você está apostando será em todas as colunas individuais e camadas, e vai se tornar uma bagunça em Leah apóstia em permanecer grandes seções. E então, se você quiser adicionar extra pendente para a coluna específica da morte, em seguida, vá para a coluna. Mas suas rebatidas principais devem ser adicionadas com a seção principal de Indy. Então, vamos clicar em nossa primeira configuração principal, seção principal. Desculpe, Gilligan. Vantado. Vou desvincular este. Agora vai apagar todas as carícias. Então nós também para que nós também não temos pendente no topo. Então vamos adicionar um pouco. Por exemplo, 40 ou talvez 60. Isso deve ser suficiente para agora e para os sites no celular Eu sempre recomendo em cada página 15 esquerda e 15 direita. Será um pouco de espaço em branco, mas não muito que seu conteúdo seja apertado. Então eu acho que isso é bom para cada página. Então vamos fazer isso em uma dissecação para então clique em sua seção principal e vá para avançar. Vou ligar isto. Vou adicionar 15 para d esquerda e 15 para a direita e você também pode usar 10 no celular. Mas eu sempre faço 15 em tablets uma espécie de história. Eu sempre faço 15 no celular e assim qualquer em tablets. E acho que esta é uma daquelas coisas que você atira nas suas anotações. Se você está projetando uma página 15 no Mobile e 20 no Tablet, então e ele sempre parece OK. Então, como estamos vendo aqui, adicionamos 15 aos sites. Mas agora há mais apostas nisso dentro, eu acho, porque eles estão gastando nesta coluna. Então vamos desvincular este e ver que sim, isso funciona. Então agora há 15 em ambos os lados nisso. Parece bom. Agora, também, toda essa parte que parece boa. Mas agora esta parte está uma bagunça. Então o que queremos fazer é agora queremos usar o Navegador porque agora há tantos botões que é difícil de clicar. Então clique em nenhum clique dentro do elemental, clique com o botão direito e clique no navegador. Agora abra o navegador. E agora podemos facilmente selecionar as colunas que precisamos. Então primeiro, vamos ver onde estamos. Vou clicar nesta lista. Certo, então estamos dentro deste cruzamento. A primeira coluna e o segundo estudioso na primeira coluna, Há todo o texto. E na segunda coluna há todas as imagens. Mas nas imagens usamos o recurso de mosca ou o recurso de posicionamento personalizado. É por isso que precisamos adicionar apostas dentro dessa coluna. Caso contrário, teremos um problema com a expulsão aqui com nossa seção de clientes. Então precisamos de um celular. Precisamos dizer, como, quantos quartos essas imagens podem precisar? Então eu vou para avançado. Nós vamos desvincular isso e podemos adicionar um monte de apostas para o topo na parte inferior. Algo como 700. Quero dizer, 202 100 no fundo, talvez até mais 50 e 2 50 no topo. E agora eu vou arrastar as imagens para cima para que ele vai ficar bom porque nós temos que posicionamento personalizado sobre esses itens. Vamos ver quais imagens são realmente visíveis. Clique neste. Vá para avançado, vá para Responsive. E nós não desativamos este para que possamos rastreá-lo até aqui. Isso parece bom. Eles foram incapacitados. Este vai para verificação avançada. Responsivo. Não, nós não desativado e qualquer imagem. Ok, então agora o que queremos fazer é desativar as imagens desta parte, caso contrário, ele vai se tornar demais. Então como você faz isso é, um, primeiro você vai escolher quais imagens você quer que apareçam. Então eu acho que eu quero que essas duas imagens apareçam. Então vamos colocar isso no fundo. Coloque isso aqui. Isso é apenas nos dar algum espaço para clicar. OK, então vamos desativar essas duas imagens no Mobil ou clicar na imagem real, ir para fundos responsivos o suficiente e clicar na altura em Mobile. Agora, você não vai ver isso em L.A mentor, mas se você visualizá-lo em um celular, você vai ver que funciona. Então eu sugiro que nesta etapa você vai colocar o seu iPhone ou outro telefone e você vai passar pelo seu navegador ou você vai fazer login, você vai testar a página. Isso é o que eu sempre faço ao projetar um site, porque eu quero ter certeza de que isso parece bom. Então, agora vá. Faça também a outra imagem que você deseja. É capaz de ir para responsivo e clique na altura no celular. E agora, se posicionarmos este que está visível e vamos clicar na atualização, clique em pré-visualização alterações tornar sua tela muito pequena. Role para baixo. E como você pode ver agora, apenas essas duas imagens estão aqui, mas no cromo, como em uma pequena janela que estou fazendo agora, você não vai ver o design real. Então eu sugiro que você pegue seu telefone e você apenas verifique como ele fica em seu telefone celular . Mas acho que há muito pouco espaço no fundo. Então eu vou adicionar mais enchimento ali só para ter certeza. Então eu vou clicar na coluna novamente e talvez aumentou este 12300 não 3300. E então eu vou clicar na atualização, e isso vai ser bom. E agora você está vendo por que, por Elemental não recomenda usar o dedo do pé de posicionamento personalizado como usamos nesta parte , porque no modo responsivo, é só um pé no saco, ser Honestamente. Então agora vamos continuar a recusar seções, então clique na seção principal e eu não sei o que esta margem à direita está aqui. Mas clique nessas vans e eu vou redefinir, dependendo daqui e redefinir. Isto, hum, talvez isto seja um dólar, ou isto é por causa dessas imagens. Sim. Está bem. Foi por causa dessas imagens. Agora é definido devido à direita, clique na coluna, e nós vamos fazer exatamente a mesma coisa. 15 pixels à direita e 15 imagens à esquerda. Acessos desvinculados e fazer isso. E agora vamos ver que temos mais pendentes aqui. Isso é porque também há pendentes nesta coluna. Então vá avançar e desvinculá-lo. Lá vai você. E as apostas extras que estão aqui, eu realmente não me importo com isso, mas eu quero um pouco de carinho no topo. Então eu também estou em um 60 acariciando aqui, ir para o fundo e também como algo como uma cama de 40 pat ou uma aposta de 60 salários na parte inferior. E agora a dissecação também parece boa. Como vê, é muito rápido. Você não precisa projetar todo o site em dispositivos móveis. É só mudar a roupa de cama na maioria das vezes um pouco. Então, novamente, clique na seção principal. Vá para o kit desvinculado avançado em 15 para a esquerda e a direita em 60 para o topo 60 para a parte inferior. E então parece que isso foi, aquele foi muito rápido novamente. Seção de depoimentos. Kits imortais. 15 15 60 60 Isso parece bom. Agora estão gastando aqui à esquerda. É por causa desta coluna. Clique neste. Avançado no Link. Agora parece com esta imagem, esta parte fora do texto. Então agora precisamos apostar ou margem no fundo de cada depoimento. E também há uma aposta na direita aqui. Não precisamos desse celular. Nós editamos que apostando na chamá-los direito. Nós editamos dependendo da coluna na Web. Então, vamos clicar na coluna porque precisamos redefinir que acariciando clique no desvinculado e agora detecta vai apenas ir para o final fora da coluna. E então nós vamos ah, você gastando no fundo. Nós também podemos usar a margem neste ponto da matéria de leitura, então eu vou adicionar algo como pureza ao fundo. Talvez 40 uh, 30 é bom por enquanto. Então agora e posso copiar para enrolar este, e eu vou copiá-lo para os outros dois assim. E agora esta parte também parece mercadoria. E agora, para a última parte, acho que vou esconder essas duas imagens. Esta é uma boa ação cultural para esta parte para facilitar. Vou desactivar isto. Então, clique em toda a seção, vá para avançar, vá para responsivo e vá para a altura na área de trabalho. Oh, eu sinto muito. E vá para uma altura no celular, ok? E 40 alimentos. Er, quando eu quero fazer é primeiro eu quero alinhar todo o texto. Então eu vou clicar neste aqui, clicar neste e alinhá-los todos no meio e, em seguida, também mudar a flexão aqui . Isso é demais. Então desvinculado este em 15 para a direita e para a esquerda. Sempre faça isso. Mesmo quando o Texas. Tão certo, Porque no futuro, se você quiser adicionar um texto mais longo ou recusou como um texto mais longo, ele sempre parece bom, certo? Então eu vou clicar no fundo em um gasto aqui algo como 40 e algo como 40. Isso deve ser bom. Então agora vamos crescer novamente e ver se você não perdeu nada. A única coisa que eu quero fazer é mudar o tamanho de alguns fora dos títulos porque este é apenas muito grande para celular. Então a beleza disso é que você pode mudar o site apenas para dedo móvel se você clicar na tipografia, você tem aqueles Aikens árvore aqui, e você só pode mudar o tamanho para celular. Então agora se eu fizer o tamanho algo assim, algo como 42 eu voltar para Teoh desktop, ele ainda vai ser 54 certo? Vou clicar em um celular, e agora são 42 para que você possa definir tamanhos diferentes para celular. E o que eu também sugiro que você anote é que você sempre usa os mesmos tamanhos de cabeçalho e corpo em todas as páginas. Então decida quando você está projetando que este site sempre tem 15 ou 16 pixels fora do texto principal em tamanho e que seus títulos, seus grandes títulos talvez sejam 52 você é menor. Títulos são caridade. Se escreveres isso , é muito fácil, Teoh. Crie o site e não será uma bagunça. Estagiários em termos de design. Agora sei que o grande título é 42 nas legendas. Quero fazer isso ainda menor. Então eu vou para o Stell. Eu vou estar acostumado a algo como uma caridade para isso é melhor. E depois a altura da linha. Eu também quero mudar a morte para celular e torná-lo algo ainda 32 36. Isso é bom. Ok, então agora você quer copiar a estela e baseá-la, mas não é isso que você deve fazer. Porque também há estelas em ah chorou que você pode mudar. Então você precisa mudar isso uma vez. E então, se você criar novas páginas, você só vai copiar e basear toda a seção e, em seguida, mudar isso. Mas você precisa fazê-lo uma vez para ter certeza de que tudo está bem. Então, agora, sujo para aqui e a linha se esconde. Não precisamos da altura da linha aqui, mas vou colocá-la porque se tivermos outro texto mais longo, já estará lá. A mesma coisa aqui. Vou estilo Clique na tipografia pressionado caridade Teoh, ir para pixels sujo quatro Quero dizer, 36. Hum e é isso. Ok, então agora eu mudei todo o título, então tudo parece bom. E agora temos uma página muito bonita. Vou checar o tablet. Se tudo parecia bem e fora do curso, não parece perfeito, mas quase já é bom do texto aqui. As coisas não são boas. Então eu vou clicar na coluna novamente. Desvincular isso. E como eu disse antes, precisamos mudar as apostas. Então também, desvinculado isso e vá para a direita. São 20 aqui e 20 aqui. E como podem ver, este é um belo espaço branco à esquerda e à direita. E também em uma aposta para o topo, talvez como, 80 e talvez até mesmo Mawr ou algo como 120 porque precisamos de um menu aqui no futuro . O espaço aqui é muito longo. Então isso é algo que você pode mudar no layout, e você vai mudar as alturas mínimas para algo que se encaixa no seu design. Então algo como 370 e agora eu vou usar exatamente a mesma técnica para as outras seções. Então o que eu fiz aqui é exatamente o mesmo. E é Winnie para a esquerda e 20 para a direita. E eu apaguei as apostas que não eram necessárias. E como você pode ver aqui, isso não é bom. Então precisamos adicionar um carinho ao fundo. Algo como isto. E isso parece bom. Também sobre esta seção I em seu 42 topo, a parte inferior e a esquerda e a direita. E também agora vejo que preciso apagar o desespero aqui. Tudo bem, parece melhor. Agora, nesta seção, o que você vai ver é que este design no tablet realmente não parece perfeito, porque isso vai ser em duas linhas. Então o que, você não quer fazer Você quer ir para a coluna aqui? Você quer avançar e você quer definir um preenchimento personalizado aqui. Então eu clico neste e agora você vai ver que o planejamento se foi. Clique na coluna, vá para layout, vá para alinhamentos verticais e vá para o meio. E isso deve funcionar por enquanto copiar e colar isso para o outro. Oh, agora não há pendente no topo e no fundo. Então nós precisamos para que apostar novamente, mas apenas para o topo na parte inferior e nozes para todos os sites. Então, aqui, como você pode ver, isso parece muito melhor. Tudo bem. Além disso, há muita aposta aqui. Por que é isso? Não vai por causa deste 40 é fora de curso por causa da altura mínima, não podemos vê-lo. Mas podemos mudá-lo aqui, então faça algo como 270. Então eu vou fazer exatamente o mesmo por essas partes. Mas na última seção, eu, é claro, não apostei no fundo porque eu quero que essas imagens estejam na parte inferior dessa seção. Então também pela comida ou o que vamos fazer é apagar isto. Isso é 22 o treinamento direito para a esquerda. Vou agir 60 e 60. Tudo bem, isso parece bom. Então eu acho que no tablet, eu também vou usar o recurso de empilhamento que todas as colunas serão pisadas umas sobre outras. Então eu vou clicar na coluna, e eu quero ter certeza de que é sempre 100% com então coluna com eu vou colocá-lo em 100. Então eu sei que vai ser sempre este comprimento total. E então, se eu clicar no texto e em um centro, alinhe-o. Eu sempre sei que parece bom, não importa o tamanho do tablet. Então eu vou usar fazer. Isso é para essas outras partes, também. Coloque-o em 100 não 1100, em seguida, alinhe o texto no meio. Ok, eu fiz isso agora e agora é um pouco grande demais, então eu vou diminuir dependendo do topo do fundo. É só que, você sabe, jogar um pouco com os elementos para ter certeza de que parecia bom. E se você praticar há mais, você vai ser mais rápido esperado. Mas agora toda a nossa página inicial parece muito boa. Eu posso mudar o texto nos títulos no Tablet, por exemplo, para torná-lo ainda um pouco entre celular e tablet. Quero dizer móvel e web, se quiseres, mas por enquanto, acho que isto parece bom . Tudo bem. Então este foi um episódio um pouco mais longo, mas é muito importante porque todo mundo quer um site responsivo. Você quase não pode entregar um site sem que ele seja responsivo para celular e tablet fora do curso. Espero que aprendas algo novo neste episódio, e depois vejo-te no próximo vídeo onde vamos mudar o menu de cima aqui. Isso agora é algo que se parece com isso, e isso é muito bonito. Tudo bem. Eu estava aqui no próximo vídeo. 22. Personalizar o menu: Bem-vindos de volta, pessoal. Neste episódio, vamos mudar o menu. Quero mostrar-lhe isso antes de criarmos todas as outras páginas porque com o conhecimento que já aprendemos, você pode criar uma página ou site bastante impressionante já. E talvez você só queira criar um site de uma página. Dívida pode ser suficiente. Então eu quero mostrar isso antes que o curso termine, mas também no final para as pessoas que realmente querem levá-lo para o próximo nível e realmente querem ganhar dinheiro com isso, eu sugiro que você espere e veja a minha explicação fora do Elemental Pro. Porque se você vai trabalhar para clientes, você quer elemento ou profissional. Mas não é disso que se trata durante anos. Agora vamos mudar o menu aqui porque este fora do curso parece muito feio. Então, vamos clicar em personalizado e o design que queremos criar está aqui. É um menu transparente. Parece muito bom. Sim, Então é aí que vamos dio e novamente, precisamos mudar esta configuração da equipe Indy porque não podemos fazer isso com a versão gratuita fora elemental ou então eu cliquei em personalizado e aqui está o site. Vou diminuir um pouco com comentários e depois menos para ver o que estou fazendo. E, na verdade, para fazer isto funcionar o Onley, uh, bar que precisamos é este bar. Então, primeiro, vamos apagar esta barra e esta barra para que fique enrolado e vá para as opções gerais. E sua primeira coisa que você deseja fazer é ir para configurações gerais e isso precisa ser em 11. 40 porque cada site elementar por padrão tem isso com e você não quer que o com fora seu menu na parte superior seja maior do que o seu conteúdo real fora do site. Então certifique-se de que isso é no 11 40. Isso é importante. Eso, é isso para esta parte. Agora vá para o título da página a próxima, e essa é essa. Alguns sites o têm habilitado. Eu só quero projetar algo eu mesmo. Então eu só vou para Stell e, em seguida, clique em Oculto, e então toda esta barra será escondida do site. E também, se você rolar a página para baixo, você verá um botão aqui. Eu acho que é um recurso muito bom para que você possa rolar para a página muito rápido. Se você quiser desligar isso, aqui, aqui, é o botão crescer. Por isso, se vais desactivar isto, não o vais ver. Se o seu pergaminho para baixo, Então você sabe onde ele está. E agora terminamos. Por aqui, voltamos e vamos para a barra superior porque também queremos apagar a barra superior, ir para o General e desativar a barra superior habilitada. E como você pode ver, agora, ele está desativado e já tem parece muito bom. Agora volte, volte novamente e clique em E d Header abra um general. E agora estamos nas configurações fora deste cabeçalho principal aqui podemos configurar a altura para que possamos torná-lo muito grande e o conteúdo será centrado. Não importa o quão grande você faz. Por enquanto, vou colocar em 80. Ou talvez até uma escola de morte maior na estela. Queremos usar a ISTEA? Transparente, transparente. Ainda nem toda equipe tem que fazer isso, mas estamos usando o Ocean WP agora. Então esta equipe tem essa opção transparente e isso é muito legal porque então seu menu estará no topo fora da primeira seção de cada página. Como você vê bem aqui. Não vemos isso muito bem agora porque precisamos mudar as cores e algumas configurações. Mas este é o recurso que eu usei para criar de menu. Ok, então primeiro que queremos fazer é desativar este fundo da fronteira. É por aqui. Se nossa borda inferior desativada primeiro, vamos inserir um logotipo, voltar e ir para o logotipo, e então vamos selecionar um logotipo da nossa biblioteca de mídia. Eso Você pode simplesmente inserir um logotipo e clicar em pular recorte porque eu realmente não vê-lo em branco em branco. E se você esperar um pouco, você verá que seu logotipo está agora no site e isso estará em todas as páginas. Isso é realmente ótimo sobre esse recurso que dis gerenciável agora aparecer em todas as páginas, então eu vou torná-lo um pouco maior. Vou colocar no 84. Acho que é o suficiente. Caso contrário, vai se tornar muito grande. Então, o pai parece bem. Já tem efeitos de pairar na escola. Nem sei onde estão as configurações, mas parece bom o suficiente. Nem sei onde estão as configurações, Agora volte e clique em Menu Scroll todo o caminho para baixo. E aqui está a opção para a pesquisa. O Aiken. Agora há uma busca Aiken aqui, mas este site realmente não precisa de uma pesquisa. Então Glick sobre os deficientes, e então sua busca Aiken terá desaparecido. Sim. Então agora só temos que estilizar este texto, e então terminamos. Tudo bem, então nós vamos voltar e nós vamos voltar, e nós vamos clicar na tipografia porque nós precisamos ir para a coloração fora da parte, tipografia. E então precisamos ir para o menu principal aqui. A família de fundos que queremos usar no meu site é Mont Sarette. E está lá dentro. Então eu acho que isso é apenas todos os fundos do Google. Então agora temos o mês certo, encontrado. Agora eu vou ampliar para fazer o nível normal porque eu quero ver o tamanho fora do texto real. Então eu não vou chegar a um grande deformado. Espere. Eu queria ser um pouco mais fic, algo assim. Não, algo como 600. Sim. E o tamanho do telefone? Quero aumentar isso para você. Algo como 15. 14. Vou colocar no 15 por enquanto. Ok, então agora parece isso bem legal. Então, se você quiser alterar as cores, as configurações estão realmente no cabeçalho e, em seguida, no menu realmente não faz sentido. Mas nesta equipa, é assim. Então, se você rolar para baixo, você verá que o colar ligado normal está agora em uma cor escura. Então eu vou colocar isso no branco. Como você pode ver agora, isso parece muito melhor. A ligação Gahler. Eu queria ser aquele roxo de novo. Estes não são os colares que montamos em L.A mentor. Porque estas são as configurações da equipe são agora você precisa voltar e obter o chamador fora do seu logotipo real. Mas eu tenho um simples plug in para isso então eu posso apenas usar isso Não obter d cabra. Muito agradável. E eu vou basear isso aqui e agora o efeito porto será uma cor, mas o que eu fiz no meu site final é que eu apenas torná-lo branco ou um pouco cinza. Muito pequeno detalhe. Mas eu uso um efeito subjacente que eu acho que parece muito mais legal do que isso. Hum assim, se você rolar para cima até o efeito de link agora, você pode clicar em Sublinhado da esquerda. E esse é o efeito que eu usei para criar esse efeito de sublinhado. E como você pode ver, bem aqui, parece muito bom. E agora podemos mudar a cor, fazer a cor real da minha equipe, e foi isso que eu fiz. E agora estamos feitos para o choro. Mas também precisamos mudá-lo para celular no tablet. É quase sempre o mesmo que um celular. Então, se você clicar no celular e você vai consertar isso, vai ser bom. Agora você pode ver que não há muita flexão aqui. Não podemos mudar isso dentro da classificação da equipe. Temos de voltar a L.um mentor e dar mais carícias à parte superior, por isso teremos espaço suficiente para o cardápio aqui. Mas não vamos fazer isso agora. Agora vamos consertar o cardápio. Parecia muito, muito chato. Não se encaixa na nossa equipe. Então o que nós vamos didio é que vamos voltar, vamos voltar, e vamos fazer Teoh cabeçalho, e então vamos clicar no menu móvel. E, em seguida, se nós rolar para baixo, ele agora está configurado para o estilo fora do CYP são. Se clicarmos no menu suspenso, ele vai criar um menu suspenso. Então isso parece muito melhor exibir o menu que o Texas detecta aqui. Não é isso que eu quero. Só quero o hambúrguer I de novo. E agora parece que isto parece muito melhor. Você pode até configurar um hambúrguer personalizado. Eu posso agora é apenas estética Aiken. Isso realmente não muda. Então, se você clicar em, por exemplo, Tratado X, isso é muito bom. Agora você tem esse efeito legal e ele muda em um X ou algo parecido com o Tratado X I. E então ele ficaria assim nesta equipe. Há muitos efeitos do teste. Parece muito divertido. Eu só vou manter isso assim. Realmente não importa. Uh, só que fazer isso Tiu, Tiu para queijo. Eu acho que talvez isso seja um pouco demais, mas é divertido. Quero dizer, é um site de designer, então você sabe, está tudo bem. Não vemos nenhum dos itens de menu porque o texto é branco. Eu não sei por que isso é porque a cor do link está aqui em preto. Oh, agora ele muda. Tudo bem, então queremos detectar ser apenas uma cor escura, algo assim, algo assim, e talvez a cor de Harvard Teoh seja o nosso, uh, uh, show de cores deem. Se você clicar no item fora do curso, não há um efeito sobre o dispositivo móvel. Mas se você clicar nele, você vai ver, tipo, tipo, um mili de segundo. Você vai ver o colarinho. Então isso é bom por enquanto. Não queremos procurar na barra, então vamos ver onde podemos. Sim, podemos desativá-lo aqui. Ok, então 90 menu parece bom o suficiente para isso, e se você clicar no celular, também vai ser bom. Mas como você pode ver, a margem não é muito boa. Então isso é algo que queremos mudar. E também na versão Web. Meus Aiken, como você pode ver, não estão muito espaçados do jeito que eu quero. Quero um pouco mais de espaço em branco entre os itens. Então essa é a última coisa que quero mudar. Se formos para o cabeçalho e, em seguida, clique no menu e, em seguida, Creek na esquerda apostando podemos mudar isso e disse que é para 15 por exemplo, ou mesmo algo maior. E isso parece bom. Vamos publicar por enquanto. Clique no X e veja como ele se parece. Então eu vou clicar no Common Zero. E como podemos ver agora, isso parece muito bom. Mas no celular, a margem aqui não era muito boa. Vou voltar para L.A mentor. Clique em qualquer página móvel e a margem aqui é muito pequena. Precisamos de mais espaço, então só precisamos adicionar mais carícias aqui no topo. Então, por exemplo, coloque-o em uma caçada, não 1100 e clique em uma atualização, e então ele deve estar bem no Mobile. Tudo bem, então edição e menu personalizador indie eu não gosto disso. É muito complicado. Tanto menus que você precisa procurar então Essa é uma das razões pelas quais eu uso elemento de pro , porque eu só não gosto de ir para o personalizador. Eu não quero usá-lo. Eu só quero usar elemento ou é muito mais fácil. Mas isso é apenas meus aluguéis para criar algo com solucionador livre. E este curso é sobre a criação de algo que software livre. Então, na verdade, criamos algo que é bonito. É muito bom para o que você pode fazer de graça. Ok, então é isso para este episódio. No próximo vídeo, vamos criar um outro Bages, e podemos fazer isso muito rápido agora porque preparamos tudo de uma maneira muito boa . Está bem, vejo-te no próximo vídeo. 23. A página de portfólio com itens de portfólio: Bem-vindos de volta a este episódio, e agora preparamos tudo. Bem-vindos de volta a este episódio, Então eu quero mostrar a vocês como criar uma página de portfólio profunda muito rápido. Se clicarmos em nosso portfólio agora, isso é o que vemos. Isso não é muito bom. Nós nem temos um botão para adicionar isso com L.A mentor. Então vamos consertar isso porque queremos que pareça assim. Se chegarmos à página, há que colocar itens de dio falso aqui com um título, um botão em apenas quatro itens de portfólio que podem vincular Teoh um site que você criou. Tudo bem, então o que queremos fazer é primeiro, precisamos ter certeza de que podemos editar esta página com elementos fora do curso. E então eu vou clicar nessa coisa de longe, e eu vou clicar em outro com elemental. E se tivermos clicado em que parte inferior uma vez, então podemos clicar na parte inferior do botão no resumo, Você fora da página. Então agora isso é tudo o que vemos. Então, a primeira coisa é, você clica em configurações no canto e você mudou o layout da página para elemental cheio com e com elemento de cheio com você vai obter o cabeçalho e o er comida que você instalou com a equipe ou com Elemental pro. Então agora temos esta página limpa, e nesta etapa, eu tenho minha home page aberta, então eu vou assumir um pouco. E a primeira coisa que quero fazer é criar essa Heather. Na verdade, é bem fácil. O que eu quero fazer é copiar o título que vemos aqui em cima. Vou copiar este cabeçalho. Vou ao meu portfólio e vou acelerá-lo. Eu nem vou fazer uma seção. Eu só vou conseguir e ele vai copiar tudo para esta nova página. Então isso é muito legal. O desenho fora da página final. Parece assim e só temos um título. Vamos copiar isso por enquanto. Então, se formos para esta página, podemos excluir isso. Nós podemos apagar isso e podemos excluir isso, e agora só precisamos fazer uma linha. Isto no centro. Há muita roupa de cama aqui. É isso que quer a elite. Então vamos para a coluna avançada e excluímos dependendo. É aqui que vamos ao texto. Nós enfrentamos o conteúdo, e a única coisa que precisamos fazer agora é mudar o tamanho do fundo. E vai ser algo como Ah, 40 para fazer parecer bom. Algo próximo conserta 50. Então 42 50 deve ficar bem no meu projeto final. Eu tenho um monte de flexão aqui e aqui. Então é isso que também vamos acrescentar. Nós não vamos nessa camada de texto de serviço, mas na coluna porque todos tinham mais itens dentro dessa coluna. Eles já estão dependendo, está lá. Então vamos para a esquerda em talvez 80 à esquerda e 80 à direita na. Isso não é o suficiente. Digamos que 14140. Isso já parece muito melhor. Mas também queremos fazer é certificar-se de que o conteúdo está alinhado no meio. Então, clicamos em toda a seção, então precisamos mudar isso para o meio. E agora parece assim. Mas tem essa onda aqui, então precisamos ter mais espaço no fundo. Então agora vamos aumentar dependendo do fundo para talvez 40 ou 60. Então parece algo como isso e você quer mantê-lo assim, que há mais espaço aqui em cima do que há aqui em cima porque nós temos um menu transparente. Precisamos de espaço aqui para o cardápio. O primeiro vai mudar o vídeo para uma imagem, e depois vou mostrar-te o que quero dizer. Então eu vou clicar em uma seção D, ir para estilo, e nós vamos apenas pegar uma imagem aqui. Então mudar o vídeo para uma foto clique em uma imagem que você deseja importar, e a imagem de um uso aqui é me beber café. Então essa é a imagem. Clique em inserir a posição da mídia. Vou colocar no centro. Vou clicar na atualização. Vou antecipar algumas mudanças. E como você pode ver, o menu está agora aqui em cima, mas há imagem dupla está acontecendo em segundo plano. O que é isso? Bem, isso é outra característica. Hum, você não vai vê-lo aqui porque você tem este menu aberto, mas é a opção de repetição. Você quase nunca quer colocá-lo como padrão. Você sempre quer colocá-lo em nenhuma repetição para imagens em um fundo branco e, em seguida, colocar isso em Gover porque então ele vai esticar não importa o quão grande a tela é, porque algumas pessoas têm telas muito grandes, e então seu site Ainda parece bom. Este é também um erro iniciante que novos Web designers fazem dia projetou o site em seu computador e, em seguida, site decente para um cliente. E o cliente diz: “ Bem, Bem, há muitas imagens repetidas na cabeça do que está acontecendo e os designers gostam, bem, não está no meu computador, mas não está configurado corretamente. Então é isso que você vai fazer aqui. Então, se você tem uma imagem em um cabeçalho como este para repetir em, nenhuma repetição porque você não quer imagens, mas, em seguida, certifique-se de que os tamanhos cobrir para que ele sempre vai cobrir o buraco com fora da página . Então, agora, se eu clicar na atualização, nós vamos voltar, nós vamos ver que ele se estendeu. Cobre todo o topo fora do site. Isso é o que queremos Agora vamos para a próxima seção. Então, que parte podemos realmente usar para criar a seção Morte? Vamos aos nossos resultados. E o que é isso são apenas algumas colunas. Para ser honesto, não é muito espetacular. Então, vou copiar para o Stell aqui. Sim, isso é o que eu penso. Eu vou diligir. Acho que vou usar uma dessas imagens e também vou usar alguns títulos aqui. Então, sabes que mais? Vamos usar a seção de depoimentos porque já existem colunas aqui e há um título. Então, vamos copiar em toda esta seção, vá para a nossa nova página e basta clicar com base. E agora temos esta página. Mas este fundo é um pouco mais cinzento do que este. Então essa é a primeira coisa que eu quero mudar. Vá para a seção, vá para o estilo para o clássico e vá para profundos francos Beck. Grande Gahler. Tudo bem, isso está configurado corretamente. E agora o que você quer fazer é preparar as colunas para o design e que você tem em uma página. Parece que você pode criar uma seção principal por dias e uma seção principal para outra linha. Isso é o que você pode fazer. Mas é melhor ter uma seção principal para todos os seus itens de portfólio e, em seguida, ter interseções para seus itens de portfólio reais porque então você não precisa vender um monte de seções principais. Você só tem que ainda uma seção principal e, em seguida, você pode duplicar as interseções se você tiver novos itens de portfólio. Então é isso que eu vou diligir. Vou voltar para a minha página e usar o atraso lá fora que estavam vendo aqui. Então vou apagar uma coluna porque só precisamos do Teoh dentro dessa coluna. Precisamos de um título, um subtítulo e um botão. Então é aí que vamos fazer dentro desta coluna. Precisamos de um título. Então pegue o título. Precisamos de um subtítulo como este que queremos outra cor. Então vamos colocá-lo em outro colarinho. Algo como isto. Queremos um botão. Então vamos pegar um botão, e com o botão aqui, isso é olhar, isso parece bom. Vamos apagar o nosso testemunho, e vamos adicionar uma imagem eso Agora criamos o bloco, mas antes vamos duplicar este bloco. Teoh as outras partes da página se refere Vou estilizá-lo. Por isso, certificamo-nos de que é isto que queremos. Isso mudou primeiro o título aqui. Eu quero fazer este um pouco menor, então eu vou colocá-lo no 22 ou 24. Algo como isto. E vamos colocar o Projeto Daido. Eu não sei o que o Texas vai colocar aqui, e esta será uma breve descrição sobre os projetos. Ok, isso é bom o suficiente por enquanto. Vou usar uma imagem para preencher esta área, e também me preparei para essas imagens. Então é assim que eles se parecem. Se você direcioná-los para onde pressione, você precisa esperar até que eles são carregados e simplesmente selecionar o 1º 1 Ou, na verdade, este é o 1º 1 item número um insere a mídia, e como você pode ver agora, esta parte parece Muito bom. Mas está alinhado no centro, então alinhe à esquerda para ter certeza de que está alinhado aos detectores. E o botão aqui e agora o que você quer fazer é ir ao Stell e colocar isso em 100% que ele se encaixe na imagem inteira. Caso contrário, você terá alguns pixels no site. Ok, então agora nós já temos que duplicar isso para a direita, então eu vou apenas duplicar assim. Vou apagar este, e vou mudar dependendo daqui para a esquerda. Então, clique na coluna, Ir para Avançado e Petesch 20 no site esquerdo. Então temos uma boa lacuna aqui. Altere esta imagem, então clique nela e vá para o item número dois e importado assim. Então agora criamos nosso primeiro cruzamento. E se vamos duplicar isto, será muito perto deste cruzamento. Vou mostrar-lhe se você clicar em duplicar em uma seção, ele irá duplicar verticalmente. Então vamos ver que é muito próximo do outro. Então o que, você pode dizer você vai para a parte superior e você vai avançar e você vai adicionar ah, marchar para o fundo. Somos um carinho. Realmente não importa para esta parte. Então eu vou adicionar 40 pixels para o fundo ou talvez 60 algo assim. Certifique-se de que parece bom. E agora também, quero acrescentar mais apostas aqui. Então é isso que eu também vou fazer. Sabe o que vou copiar para mim? Este e eu vou baseá-lo nos direitos do outro. E agora há espaço suficiente sob o nosso cruzamento. E se tivermos mais itens de portfólio no futuro, podemos simplesmente clicar em um cruzamento, clicar e duplicar, e então podemos ter outra seção. Também quero te mostrar um truque. Se você tem apenas três itens de portfólio, por exemplo, o que você pode dio. Se você excluir este, sua coluna será o todo com Isso não é o que você quer. Portanto, não exclua a coluna. Apenas apague tudo o que estiver à vista da coluna. Essa é a solução mais fácil que encontrei. O Teoh. Mantenha o design agradável e limpo. Certo, então não é isso que eu quero agora. Então eu vou duplicar de novo. Então, parece assim. Substitua as imagens, e agora estamos quase terminando com esta página. Vamos apenas verificar o que criamos algum tipo de atualização de clique. Clique em pré algumas mudanças e como podemos ver, e já tem uma animação com sua escola porque copiamos esta coluna, é claro, e isso parece muito bom. Esqueci de adicionar um botão de efeito de pairar antes de duplicá-lo. É por isso que você precisa manter tudo antes de começar a duplicar seu conteúdo. Caso contrário, você precisa alterá-lo em cada botão. Isso não é grande coisa em uma página como esta. São quatro pratos de, mas você entendeu o ponto. Agora temos de fazer para mudar as coisas primeiro. O design aqui está sobrepondo o conteúdo aqui. Então você provavelmente já sabe como vamos fazer isso. Não vamos mudar a seção principal. Vamos pegar o cruzamento e usar uma margem de menos para subir. Então, um menos marchando no topo. É isso que queremos usar. Então, clique neste cruzamento. Agora tem 20. Então você digita um menos. E então, por exemplo, em um, então será menos 120 ou 160, por exemplo, talvez até 180. E agora você quer usar o ampliado em versões de pressione zero comum. Então você realmente vê do que se trata. Talvez diminua a seção principal aqui em altura, então eles virão um pouco mais para o título. Algo como isto. Talvez aumentá-lo um pouco mais. Talvez menos 200. Sim. Vamos ver como isso parece. Vou clicar em uma atualização, voltar para a página do meu portfólio, e isso parece muito bom. Agora, a última coisa que precisamos fazer é na comida ou fazer esta página e verificar como o design móvel parece. Então, primeiro, vamos apenas verificar o nosso design móvel e o nosso modelo vai clicar no tablet. E como você pode ver, isso não parece muito bom. Então vou mudar o cruzamento e dar o título de um quarto. Se você executar link este, ele vai voltar para o nosso design normal. Então agora você vai adicionar a marcha de novo e fazer com que fique bem em um tablet. Algo como isto. Talvez não goste do tamanho deste título. Você pode clicar no título, em seguida, no modo tablet, alterar o tamanho do texto e também alterar as alturas da linha. Então, parece bom e sempre manter um espaço aqui para o seu menu. Então, no tablet, isso parece muito bom. Então talvez não a margem entre esses elementos. Então, sabes que mais? Vou clicar no cruzamento aqui, e vou dar-lhe uma margem inferior, algo como 40. E também neste, vá para avançado desvinculado este, vá para o fundo e aos 40 aqui. Então, se você estiver indo para duplicar este no futuro, ele terá que a mesma margem está certa. Isso parece bom no modo tablet. Agora, vá para o modo móvel, e isso não parece muito bom. Certo, Certo, vamos primeiro mudar o “ título “D” aqui. Clique no título, clique na topografia. Certo. E agora repetimos duas etapas tantas vezes, acho que você começa a entender o que estou fazendo aqui. É apenas o mesmo processo repetidamente. Há um monte de apostas aqui. Então é isso que queremos mudar. Vá para avançar. E isso não é. Não queremos 100 aqui. Talvez queiramos zero ou 10 com Sweeney. Talvez queiramos zero. É o suficiente para esta página. Tudo bem, isso parece bom. e também dependendo já é bom. Eu acho que isso é porque esta é uma cópia fora de algo em nossa página inicial onde nós já corrigiu as apostas fora da coluna. Então isso já parece muito bom. A única coisa que eu quero mudar é o site do título para clicar no título, clique em venda e diminuir o tamanho em Mobile e, em seguida, copiou Estelle e baseado em todos os outros títulos como este. Tudo bem. Além disso, eu quero uma boa animação sobre o botão. Então, clique no botão, vá para o estilo, vá para o pairar, e lá está a sua animação de porto. Vou colocar no psiquiatra. Copie isso com base na atualização do Glicken, e veremos nossos resultados. Copie isso com base na atualização do Glicken, Tudo bem, isso parece bom. Isto parece bom. A Marchionne parece boa. A animação de Harvard parece boa. E agora só precisamos adicionar comida da cidade no fundo. Então, volte para a sua página inicial. Role para baixo. Ga p a comida er Então toda a seção da seção principal. Copie isso. Volte para o seu portfólio. O elemental. Eu vou colocá-lo na área de trabalho por agora Role para baixo. Clique aqui. Clique com o botão direito e clique com base. E agora você acabou porque a comida já foi projetada para tablet e celular. Claro que sim. Então, se você clicar em atualizar e você vai voltar agora, nós também temos uma boa comida ou aqui. Muito simples. Então é isso para o portfólio, Bates. Você vê a rapidez com que criamos uma nova página? Eu fiz isso em um fio, certo? Uma página inteira em um vídeo. E isso é porque nós preparamos a home page de uma maneira muito boa. Então agora a página de contato não vai ser difícil, as páginas acima um pouco mais complicado, mas também não vai ser difícil. Então eu espero que você também abasteça um pouco mais confiante. Agora estamos indo um pouco mais rápido ouvindo lá. Mas estamos usando as mesmas técnicas repetidamente para fazer você entender a técnica. Mas estamos usando as mesmas técnicas repetidamente para fazer você entender a Então eu vou vê-lo no próximo vídeo, e então nós vamos criar a página sobre que se parece com este muito legal Tem um layout de coluna como o recurso de toque escola aqui, uma galeria de imagens e aquelas caixas legais F A Q que se abrem. Está bem, vemo-nos no próximo vídeo 24. O cabeçalho sobre página sobre sobre em sobre três seção: Ei, e bem-vindo de volta neste vídeo, vamos criar a página sobre. Acho que é uma página muito bonita. Ele começa com o cabeçalho de imagem enorme, e então há outra imagem que está sobrepondo toda a página tem este layout de três colunas . Esta é uma coluna dupla, e esta é uma única coluna. Então é uma árvore Teoh, e isso torna muito fácil de ler, não faz o texto para Branco em, e há títulos claros aqui à esquerda, e há algumas características agradáveis que você pode ver aqui assim. Clickable bloqueia uma galeria de imagens, mas você também pode usar para fotos e uma seção F A Q que você pode abrir e fechar. E isso também funciona perfeitamente no celular. Então essa é a página que eles iriam criar neste vídeo. Tem algumas novas técnicas que você quer aprender, então vamos começar. Estou aqui na minha página sobre agora. Eu não posso mesmo editar com elemental ou assim novamente, eu vou editar página, e então eu vou clicar em editar com Elemental, ou eu vou clicar em todas essas coisas longe, às vezes, onde a imprensa vai te dar um monte desses notificações e todo o olhar e dizer, Ei, você quer Brad-lo pela versão pro, você quer fazer destino que e eu sou como, Não, eu quero construir meu site, então basta clicar nele fora. Isso realmente não importa para Trump Luckett reservas adultos para, claro, mas basta ler e então, você sabe, então nós vamos clicar em elementos editados ou, como sempre, nós queremos para se livrar da opção da equipe. Então o que nós vamos fazer é ir para a configuração Bakley fora um tolo elementar com Tudo bem, agora, agora, nós temos uma página em branco. Vejamos nossos resultados e o que eu também fiz no campo do portfólio. Eu olho para um design semelhante. Talvez eu tenha feito algo que já parece que estou prestes a fazer. Acho que vou usar a página do portfólio que a criaria porque precisamos criar essas colunas de qualquer maneira, então vou copiar um cabeçalho da nossa página do portfólio. Copiá-lo, ir para a minha página sobre e baseá-lo. Então aqui está o nosso projeto final. Vamos começar com algo fácil. Imagem D. Então vamos para o estilo, clique na sua imagem e depois selecionamos a imagem que queremos para mim. É esta imagem e isso parece bom e eu quero começar limpo aqui. Então primeiro eu vou limpar o design aqui. Vou apagar isso e agora deixa uma coluna e vamos dar uma olhada na nossa página. Temos duas colunas aqui, então uma coluna para isso e outra para aquilo, e então temos mais duas colunas aqui, então não podemos usar uma árvore 12 porque esse layout é diferente e esse layout. Temos duas colunas aqui, então uma coluna para isso e outra para aquilo, e então temos mais duas colunas aqui, Então eu sugiro que você crie uma interseção para dis e uma interseção para dis, e então aqui será apenas uma coluna vazia para garantir que esta é uma linha corretamente. Então é aí que vamos fazer. Vamos para a minha página sobre e vamos inserir um cruzamento e certificar-nos de que temos colunas de tratamento aqui. Então vamos duplicar mais uma coluna, e agora temos uma coluna deleite Layout vai diminuir um pouco, e agora, antes de começar a duplicar fora do curso para primeiro tipo de exclusão dependendo. Então, tudo está alinhado em nosso logotipo em todos os outros elementos para ir para avançado na coluna principal e desligado isso, em seguida, ir para avançar sobre este e também desligado que copiar a venda off, este em sua coluna e, em seguida, colado em Os Autobahns. Você não vai ver nada porque não há conteúdo nele. Mas é aplicado. Então agora podemos duplicar esta interseção, então agora temos duas linhas. Mas como você pode ver, isso não é realmente duas colunas. É só uma coluna, então precisamos deletar uma delas. Mas agora nós o duplicamos, então sabemos onde alinhar as outras colunas. Se apagarmos este, ele vai para o meio e nunca vai rastrear isso de volta. Teoh torná-lo o mesmo que o outro, e provavelmente é uma árvore suja pontiaguda porque isso é perguntado fora 100 claro. Então, se deixarmos assim, criamos dois layout de coluna que queremos agora em elementos de cópia. Então agora precisamos encontrar algo parecido com isso. Eu acho que se eu for para a minha página inicial? Uh, sim. Só vou copiar. Destilar. Então, copie. A camada volta e a baseia em sua primeira coluna? Lá vai você. Vamos voltar para a minha página inicial também copiou a dívida 1. Vá para a página sobre e baseie-a. Vejamos o nosso design. O roxo está acima e é bowler. Então, destrua-o acima. Certifique-se de que está dentro da mesma coluna. Vamos primeiro mudar o estilo do texto. Então clique na topografia vai para esperar e torná-lo parafusos apenas assim. Agora há muita base. Então vamos para odores avançados já menos 20. Isso é estranho. Talvez também haja configurações em distritos. Vá para avançado. Não. Ok, então precisamos adicionar alguma margem de menos para ter certeza que esses textos estão mais próximos um do outro. Tudo bem, isso parece muito bom. Vou apagar a marcha de baixo. Além disso, precisamos deste texto. Vamos para nossa casa e ver se já temos algo parecido. Isto parece muito bom. Então, vou copiar este. Volte para a minha página sobre e clique com base. Alinhe-o à esquerda dentro do boom celular e, em seguida, coloque alguns textos Lauren Egípcio nele. Isso também é uma gorjeta. Se você não tem um texto normal de Ip Sum e você quer ter algum texto Philip porque você ainda não tem texto para o seu site, você precisa ir Teoh um site como este. Loadem emption dot nl para obter um imposto de amostra como este. Então eu vou apenas copiar isso, voltar para a minha página sobre e clicar no meu texto, ir para o conteúdo e sentir isso com algum conteúdo de preenchimento. Tudo bem, isso parece bom. Agora vamos voltar, e precisamos criar esta seção. Então, na verdade, é bem simples. Volte para trás. Copie este. Na verdade, precisamos torná-lo roxo, precisamos ir para a camada de texto e torná-lo roxo claro . Esse é o estilo que eu tenho em exibição A idade parece muito legal, então eu vou usar isso é dizer. Copie isso e coloque aqui e colado sobre o cabelo. E agora só precisamos adicionar um título. Então volte para os nove pontos, pegue a direção e certifique-se de que seja uma visão dessa coluna. Vá para o estudioso do convés de estilo. Torná-lo branco e estamos quase terminando com isso agora. Ah, proteção. Vamos ver se o espaçamento está correto. Não, não é. Talvez seja um pouco maior. Então, se você quiser fazer isso de uma maneira simples, basta ir para H. Du ou H ou H. um e torná-lo um pouco maior. Isso diminuiu na margem de menos aqui. Então vá para o financiamento adiantado isso e em um menos dois, o fundo algo como menos 10. E isso deve funcionar bem. Agora não há marcha entre esses dois cruzamentos, então eu vou clicar. Realmente não importa neste, por exemplo, por exemplo, e em um top marchando no topo. Então desvinculados isso e adicionar algo como 2040 anos ok, por agora para o topo e copiou este texto porque nós também precisamos dele aqui baseado base suficiente , del. Eu sinto muito. Baseado detecta e, em seguida, arraste-o para cima. Ok, a última coisa que precisamos fazer é adicionar algum espaçamento, fazer toda esta seção. Então eu vou pegar a seção principal, ir para eventos, e nós vamos aumentar a rebatida na parte inferior, talvez 160 também no topo, talvez 60. Muito bem, vamos guardá-lo e ver o que criámos. Informo você para as mudanças. E como você pode ver, isso parece muito bom. Nós só precisamos mudar o texto e até mesmo com mais espaçamento aqui, porque isso agora, como um pouco menos basing. Mas você tem o ponto aqui, você precisa preparar suas colunas antes que você vai se sentir no conteúdo. Tudo bem, então agora nós preparamos nossa seção superior fora da página sobre e o resto da página. Agora vai ser muito fácil, porque nós preparamos de colunas de uma forma muito simples. Então agora podemos facilmente no outro conteúdo aqui. Então eu acho que podemos terminar esta página em mais um vídeo. Hum, e então nós já podemos continuar para a página de contato, e isso também é muito fácil Page. E então estamos quase terminando. Nós só precisamos adicionar um pouco mais de detalhes ao site, e então nós terminamos. Então é muito bom. Tudo bem. Vejo-te no próximo vídeo. 25. Finalizando a página sobre: Bem-vinda de volta. Estamos terminando a página sobre. O que já criámos é isto. Agora vamos continuar e criar todas as partes que você vê aqui. Parece realmente complicado, mas é muito fácil porque elemental tem este construído em recursos. Então, o que? Eu vou dio eu vou ir para a minha página sobre, na verdade, a edição com elementos ou versão. Vou diminuir o zoom de novo. E como podem ver no desenho final, o fundo aqui parece branco, mas não é bem. É aquele colarinho branco quebrado, um pouco roxo um pouco roxoe acinzentado. Então é aí que vamos adicionar Vamos primeiro na nossa seção principal. Então vamos pegar nossa seção principal aqui. Vamos dar-lhe uma altura mínima. Esta será uma seção muito longa porque vamos usar esse recurso de interseções para criar todas as seções que você vê aqui. Bem, na verdade, é só que a árvore era na verdade quatro seções porque a imagem também é uma seção. Então é isso que vamos fazer. Volte e preencha o fundo da nova seção principal com esse ótimo colarinho, vá para o clássico vá para o chamador e depois agarre. Isso é ótimo colarinho. É F sete F sete F oito. Tudo bem, isso parece bom. Agora esses dois parecem conectados. Então a primeira coisa que eu quero fazer é na imagem aqui, e a imagem aqui tem o mesmo layout que este. Mas esta parte é simplesmente não tem conteúdo. E aqui está a imagem. É isso. Então nós vamos dio vai pegar o cruzamento superior. Então clique nele, clique em copiar, vá para baixo. E com base na primeira interseção aqui, agora a liderança, todo o conteúdo que é a visão certa. Click e elites e vamos pegar nossa imagem. Então vá para a imagem e pegue a imagem Boom. Clique na sua imagem. Qualquer imagem que eu usei aqui é a foto sobre binge APEC clique nele. E onde, então, estamos quase terminando em casa, e é o mesmo truque que eu usei em outras páginas. Vou pegar no cruzamento e dar uma margem de menos para sair da seção principal dele. Então vamos para o avançado desvinculado isso e vamos dar-lhe uma margem de menos. Então, por exemplo, menos 100 que é mesmo para pouco ou menos 140. Algo assim parece muito bom. Menos 150. Parece muito bom. E quer saber? Eu vou dar toda essa animação de imagem, porque isso sempre parece bom. Então eu vou clicar na coluna, ir para efeitos de movimento avançados, e eu vou pegar o destino em cima. Tudo bem, isso parece muito bom. Então vamos apenas ver o que se nós criamos até agora Glicken atualização Ir para o seu pre poucos e boom lá ele iss parece muito legal. Tudo bem. Próxima seção Derris Também pequena fada espaçador na parte inferior. A primeira coisa tão desesperada que quero consertar vou para a seção principal “Culpado “, avançado. E queremos mais espaço no interior. Então desvincule isso e dê algo como 80. Então temos um pouco de espaço aqui. Ok? Agora, para a próxima parte, o que vamos fazer é criar a seção de fluxo de trabalho dele. Então é o mesmo layout dessa interseção, mas tem ocioso, e depois um texto e outro bloco que vamos criar. Então volte. Pegue a interseção superior que já criamos cópia é ir para baixo, e agora é muito difícil de colar aqui. Então, o que eu sugiro é que você clique no cruzamento que está acima dele e, em seguida, clique em baseado , porque então ele será sempre baseado em que o cruzamento. E como podemos ver agora, precisamos Primeiro de tudo, precisamos de espaçamento porque isso não parece bom. Então eu vou adicionar um pouco de espaçamento no topo e no fundo de cada cruzamento. Então, sempre que duplicamos, já parece bom. Então, vamos avançar, e vamos dar-lhe um espaçamento superior e inferior, como 20, talvez 20. Isso é bom. Não, isso é muito pouco. Talvez 44. Este. Sim. Isso já parece melhor. Certo, primeiro 4 vamos mudar as cores. Clique no texto, vá para o estilo, vá para a cor do texto e dê um colar roxo escuro. Acho que isto parece muito bom. Tudo bem. E também para o título, clique no início do título ir para o colarinho e, em seguida, escolheu o branco ou sim, eu acho que não, quero dizer branco. É quase preto. Isto é roxo escuro. Isso parece bom para distorcer tutorial. Não vou mudar o Texas muito facilmente. Como você sabe, você pode simplesmente clicar sobre ele, ir para o conteúdo, e você apenas alterar o texto aqui. Eu só vou mostrar a vocês como você pode criar as adaptações aqui, e é muito fácil é muito legal que é construído na versão gratuita . Você vai clicar aqui, você vai rolar para baixo. E aqui está um recurso chamado Taps. Se você rastreou isso, ele já tem o estilo que preparamos. E é quase isso. O que você pode fazer para preencher os passos com Mountain, você vai clicar no conteúdo e, em seguida, você vai tocar e, por exemplo, você vai digitar um título aqui Esse é o título do seu que você vai ver aqui, e este é apenas um texto no interior. Então, se nós apenas duplicar o texto, por exemplo, agora nós já temos o conteúdo diferente aqui parece realmente bom. Se quiser mais de duas torneiras, o que vai fazer é fechar isto e aqui está um Aiken duplicado. Então, clique nisso. E, em seguida, temos toque número congelar sobre exemplo. Vamos dar a isso um design de texto e também tornar esse texto um pouco diferente. E depois temos as profundidades de tratamento aqui. Vejamos nossos resultados salvando-os e volte para nossa página de pré-visualização. Certo, role para baixo. E como podem ver, vamos aumentar o zoom. Parece absolutamente bom e incrível. Eu não verifiquei o celular, então é o que eu vou fazer antes de começar a duplicar esta seção. Então, vamos clicar no Modo Responsivo. Vamos clicar em Mobile. Acho que já está muito bom. Sim, esse recurso parece muito bom. Estas imagens se sobrepõem. Não é isso que queremos. Então nós vamos para avançado desvinculado isso, e também toda esta seção precisa ser maior. Então é aí que eu vou consertar. Primeiro, vou clicar na seção principal, ir para avançado e, em seguida, em um petting para o topo, algo como 60 porque precisamos de espaço ou até mesmo e 80 para o menu e na parte inferior. Também precisamos de algo assim. Acho que 80 deve estar bem. Não está muito bem. Precisamos ainda de mais. 140 Que tal isso? Isso é muito melhor. Além disso, quero mais espaçamento entre isso. Então o que eu vou fazer é clicar na coluna para avançado e em uma margem superior nessa coluna apenas para celular. Então algo como caridade e isso parece bom. O que você também vai fazer, a propósito, é também o que eu quero mostrar é que você pode mudar a onda do Mobil que talvez você ache que esta onda é muito móvel. Você também pode mudar isso. Então você vai clicar na coluna principal, rolar para baixo para que você possa vê-lo. Clique no estilo, Desloque-se para baixo, Ir para divisor de forma porque é onde você configurar a onda. Este é o divisor de forma inferior. Então clique na parte inferior e lá está. E agora você pode definir suas próprias configurações para, hum, a versão móvel. Então talvez torná-lo um pouco menos intenso, e então você também pode, se quiser, sobrepor esta imagem com esta parte, mas então você não vai ver a onda. Mas se você quiser isso, claro que você vai adicionar uma margem de menos algo como este menos 120 então ele vai se sobrepor. Então, agora o design móvel parece muito bom. Não há margem nesta parte. Então, se vamos duplicar isso, você vai ver aquilo. Oh, há margem. Certo, isso é perfeito. Pensei que não havia margem, mas agora há. Então isso é muito bom. Vamos verificar em tablets antes de seguirmos em frente e em frente. Tablet. Parecia o mesmo que na área de trabalho. Sobre A imagem também está sobreposta detecta aqui. Então é isso que também vamos consertar. Desvincular isso. E como podemos ver, precisamos de muito mais espaço nesta parte. Então clique na seção principal, Culpa para avançar, e nós vamos dar um talvez 100 na parte inferior. Isso é suficiente? Não, nem sequer é o suficiente. Precisamos de mais do que isso. 140 ou mesmo 150. Você sabe o que? 160. Isso deve ser suficiente. E, novamente, clique na interseção fora da imagem e dê uma margem de menos, então ele estará sobrepondo o conteúdo. E como você pode ver, eu só estou brincando por aí para torná-lo adequado e também em todo o cruzamento principal. Queremos que as nossas apostas sejam à esquerda e subscrevam, por isso temos sempre algum espaço em branco à esquerda à direita. Assim como onde também vamos configurar antes de seguirmos em frente. Então eu vou clicar sobre isso em Swinney. São 20 aqui agora. Isso é mais do que 20 porque há também apostar em e que coluna novamente clique no clique na coluna e os leads que apostando para que ele será alinhado a 20 pixels dos sites. Tudo bem, agora vamos criar as duas últimas seções, então vamos voltar para a área de trabalho , diminuir um pouco. Iam duplicar todo este cruzamento. Apenas leite duplicado. Ir já parece bom. Voltar ao nosso projeto principal e é na verdade o mesmo. Só mais um texto e nós substituímos. Isso ladra com a Galeria de Imagens. Uma galeria de imagens também é uma característica muito agradável com em L. Um mentor. Na versão gratuita, você não tem muitas opções, mas é muito bom para uma galeria simples. Então eu vou excluir o recurso de profundidade aqui, ir para os nove pontos rolar para baixo e lá está ele. Chama-se galeria básica. Então, se você arrastar isso dentro dessa coluna e deixá-lo agora, você pode selecionar imagens que você quer, então eu não inseri meus logotipos ainda. Então, se você for mais suave eu uso, inseri alguns logotipos que você pode usar dentro desses sites de teste , e você verá essas caixas de seleção aqui. Se clicar nele, não será selecionado para a galeria. Assim, você pode selecionar várias imagens aqui para sua galeria. Se você clicar em criar uma galeria, você verá todas as imagens que serão importantes na galeria como uma espécie de verificação dupla. Você vai inseri-lo e lá vai você. Agora você vai ver que essas imagens estão cortadas da nossa colheita. Isso não é o que você quer. Então, se você clicar no tamanho da imagem e você vai dar-lhe 300 por 300 então, por alguma razão que eu realmente não entendo, vai ficar tudo bem. E não entendia tudo, pessoal. Eu sou mais como um designer e, em seguida, um desenvolvedor, hum, também no design final. Eu usei um layout de três colunas para que você possa configurar isso aqui Colunas. Se você clicar em três, você vai ver que agora é uma coluna Doubletree. Lee desligando. Então essa é a opção da galeria 40. Você não tem muitas opções aqui. Você pode configurar uma caixa de luz, se quiser. Então, se você tem um monte de se você tem uma galeria de fotos, você pode destacar uma foto aqui. Tes são BMG para ter transparência. Mas se você adicionar fotos aqui, você vai ver esta noite Nice lightbox aparecendo. Ah, muitos clientes vão pedir-lhe para criar uma caixa de luz. Então, isso é o que você pode fazer com o recurso básico da galeria. Tudo bem? E agora, para a última parte, nós vamos criar um F A Q. Então, novamente, eu acho que você já sabe o que eu vou fazer. Vou copiar dis em uma seção com um recurso duplicado, e agora vou excluir a galeria de imagens, e vou inserir um novo recurso. E isso é chamado de alternar ou Accord Young. Uh, eu realmente não entendo por que eles têm esses dois recursos porque eles são tão parecidos. Eu mostro-te se começares. Vá. Parece com isto. E se você usar nossa corte jovem, é assim. A única diferença que eu posso ver é que eles são Corcione. Você só pode abrir um toque e o outro fechará automaticamente. E com o Targo você pode simplesmente abrir vários itens. Então eu recomendo para um F A Q como este que você usou a alternância. Então vou apagar o acordeão. Por enquanto, é o mesmo que para o recurso de toque. Se quiser ter mais perguntas, vai duplicar. E então você pode abri-lo e mudar o título do título aqui. E você pode mudar a descrição aqui. Além disso, o designer que eles usam aqui, só tem uma linha na parte inferior. Isto parece muito limpo, por isso vou mostrar-lhe como fazer isso. Se você vai para a Stele, você pode configurar um cenário aqui antes de tudo, a fronteira com isso é o cheiro da fronteira. Eu só usei eu acho que um pixel. O espaço entre é o espaço entre os diferentes itens. Então, ele só vai rebater no topo de cada item como você pode ver. Então, se você também quiser adicionar apostas na parte inferior fora todos os itens vamos colocar isso em 15. Por enquanto, você precisa ir para o título e depois em um preenchimento para a parte inferior. Então, se você clicar sobre isso e você vai clicar no fundo, você vai adicionar apostas para o fundo como você pode ver algo como 20. E se você voltar e eu vou aumentar o espaço entre, volte para o título. Aumente isso. Você pode criar um design que se parece com o design que eu tenho também o Aikin Eu alinhei que um para a direita, então detecta aqui, está alinhado com o texto, parece muito bom. E também para o conteúdo que você pode configurar dependendo aqui. Então, se você quisesse ser alinhado em ah, a coluna, a coluna, você poderia apenas definir isso como zero e, em seguida, em um preenchimento inferior para dar-lhe algum espaço em direção a uma linha. Algo assim permite que você veja o que criamos. E agora vou clicar na atualização, vamos voltar à minha página sobre. Eu vou fazer zoom em dois D nível normal. Vou rolar para baixo. E como você pode ver, as torneiras aqui estão funcionando. Hum, as caixas de luz funcionando. Mas eu não vou habilitar isso para este site. Quero dizer, para esta parte, porque não é realmente relevante. E também, nosso menu de alternância está funcionando muito bem. Eu só quero adicionar um pouco mais de espaçamento aqui, e a última coisa que vamos fazer fora do curso é copiar nossa comida. Er, então nós vamos copiar é da página inicial. Volte para a página sobre e, em seguida, baseá-la aqui. E agora, se você salvar esta página, você está feito. Como você pode ver, estou usando as mesmas técnicas várias vezes. E esta página foi criada muito rápido. Apenas adicionando rebatidas, duplicando coisas, trabalhando com colunas. E é assim que você desenha um site. Muito rápido. Então agora a última coisa que precisamos fazer é criar a página de contato como vamos ver aqui. É também uma página muito fácil. Ele tem um mapa do Google que é sempre característica que seus clientes vão pedir quase sempre e também alguns ícones de mídia social que você pode ver aqui. Então é isso. Espero vê-lo no próximo vídeo. 26. A página de contato fácil: Ei, e bem-vindo de volta neste vídeo, vamos criar a página de contato agora mesmo. Não há nada na página de contato. E se vamos olhar para o nosso design final, eu realmente atualizar a página porque então você vai ver as animações. Então esta é uma animação da esquerda, e o mapa virá de baixo. E depois há o texto aqui. Hum, fora do curso. Vamos usar o layout como já criamos na página sobre para que possamos criar esta página muito rápido. Eu acho que esta será a página mais fácil para você criar porque nós preparamos tudo. E essa é a beleza do elementar. Ou se você criou algumas páginas e configurar apostas mais antigas e tudo isso vai ser muito fácil, Teoh, construir as outras páginas. Então eu vou manter isso aberto, e eu vou para a página de contato e ter certeza que podemos editores com um mentor. Então clique na página de edição e, em seguida, clique em um é com Allah Men's ou Então. Agora, se você vai clicar em configurações e você vai clicar no completo com nós podemos trabalhar com a página inteira, e então nós precisamos de um título. Isso se parece com isso. Acho que já temos uma página que parece a mesma, queestá fora da página do portfólio da Kirsty. Acho que já temos uma página que parece a mesma, que Então eu vou começar copiando um cabeçalho de dívida, e eu vou baseá-lo aqui primeiro. Vou mudar a imagem, ir ao Stell, clicar na imagem, e vamos mudar a foto. Ok? Esta é uma foto minha olhando para o futuro. Então eu tenho uma mensagem procurando por um novo site. Eu posso te ajudar. E isso também é o que você poderia fazer agora, Vita. Caminho fora do curso. Uh, defesa de direitos. Há mais carícias nos sites aqui, então, fora do curso, vamos adicionar isso primeiro. Então, vamos clicar na coluna, e já há um carinho aqui. Só precisamos aumentá-lo para talvez 180, por exemplo, ou talvez até 200 Swen t. Sim, parece muito melhor. E agora o nosso rumo está feito. Então vamos atualizá-lo, e vamos abrir-te antes de alguns. E isso parece bom. Oh, nós esquecemos as animações de ir para clicar na coluna, ir para efeitos de movimento avançar, e eu quero que um para entrar pela esquerda, desaparecer na atualização Glicken esquerda, e então o animação é isso. Ok, então agora o que precisamos? Precisamos de um mapa. O mapa, esta parte fora desta grande seção com uma coluna. Depois há um cruzamento com duas colunas. E então há isso em uma seção com três colunas onde esta está vazia. Então, fora do curso, vamos voltar para a página sobre porque é onde está o layout da nossa coluna. Vou diminuir um pouco, e acho que vou usar a imagem aqui. Eu vou substituir isso pelo mapa porque ele já tem essa animação, e ele já tem essa margem de menos, então ele será alinhado ao topo. Mas não vou copiar este porque precisamos de uma secção principal primeiro. Então não se esqueça disso. Prepare sempre sua seção principal. Primeiro clique na seção principal, clique e tapetes e eu ia copiar tudo isso para esta nova página. Então vá para a página de contato, não para pré poucos. Sinto muito pelo elemental. Clique em baseado aqui. E então temos todo o mesmo conteúdo que a outra página. Então vamos apagar aqueles aqui. Deixe este aqui. Apague este. E agora temos que substituir este pelo mapa. Thean Imation está na coluna. Como você pode ver aqui em um Fonz. Sim. Então, precisamos excluir esta coluna para que ela esteja cheia com. E então precisamos substituir a imagem pelo mapa. Você não pode substituir as coisas como eu estou dizendo, mas você pode apenas rastrear em um mapa. Então, se você rolar para baixo Harry Days Google Maps, certifique-se de que ele está dentro da mesma coluna que tem essa animação. E aí está. É um mapa do Google. Clique na sua imagem, clique com o botão direito e elites. Então, há um mapa do Google. Se você vai clicar no mapa do Google, você pode dar-lhe uma altura, para que ele será maior. Então faça algo assim. Coloquei no 480 agora, e então você pode colocar sua localização. Então, para mim, essa é a cidade fora de Roterdão, e você pode colocar um endereço aqui agora capaz de exibir cidade. Mas você também pode simplesmente colocar em uma rua. Então, por exemplo, legal, único objetivo e isso é o que ele vai parecer. Ele vai dar este pop-up com o endereço espirituoso. Então, se você tem um escritório ou você quer colocar em sua casa ou um endereço comercial, você pode colocar isso aqui. Além disso, você pode configurar o zoom porque algumas pessoas querem que ele seja ampliado em nossas próprias ruas. Depende do tipo de negócio, mas você pode configurar o zoom aqui mesmo. Você não pode fazer muita coisa aqui. Você não pode alterar o estilo de para Google maps porque este é um mapa muito básico do Google. Mas é só um trabalho, certo? Então, se você vai para ainda, como você pode ver, você realmente não pode fazer nada aqui. Então é isso que você poderia fazer com a versão gratuita do Elementary. Então agora precisamos criar as outras partes. Acho que isto já é o que queremos aqui. Sim, a única diferença é detecta. Isso está nesta página. E agora precisamos criar esta página. O que vamos fazer é olhar para a nossa página sobre e ver se temos algo parecido. Acho que vai ser expulso da Ordem. Só os colares são diferentes. Então olhe para esta parte. Sim, é onde vamos usar. Então eu vou pegar dívidas. Cruzamento. Certifique-se de que copiou o cruzamento. Volte para sua página de contato, clique nesta interseção e, em seguida, baste para que ele seja baseado na outra interseção. Então podemos mudar as cores aqui. Ou podemos facilitar para nós mesmos e copiar a camada aqui com base nessa aqui . Apague este. Vou mudar um título e depois duplicado, por isso vou mudar a cor deste texto para um roxo escuro. E então eu vou duplicar esta coluna e excluir a última coluna. E então temos o mesmo layout que você pode ver nesta página. A única diferença é o espaçamento entre o título. Então foi isso que me esqueci do Dio. Então vamos avançar para fora do título e excluir o espaçamento inferior e agora o duplicado novamente e excluir o último para que não tenhamos que adicioná-lo o outro. Tudo bem. Então, que tipo de conteúdo temos aqui? Este é apenas um número de telefone e um e-mail, então isso é muito fácil. Vou clicar sobre isso e mudá-lo, Teoh um número de telefone e isso e então nós temos t social Aikens. Vá até aqui e digite social. Você vai pegar o Aiken Social. E como eu expliquei, o que você pode fazer é alinhá-lo à esquerda. Vou mostrar de novo. Você pode torná-lo quadrado ou arredondá-lo. Mas o que eu sempre gosto de fazer é ir para a Stele, e eles não são usados como ouvinte oficial. Mas você vê colarinho personalizado para que você possa torná-lo mais adequado em seu site. A chamada secundária. É a cor do verdadeiro Aiken. Então, se você fizer que a cor dos sites sobre exemplo o roxo agora parece muito nojento. Então, o que você precisa fazer é ir para sua cor primária, selecionar qualquer cor Não importa. Eu sempre grande cinza ou algo assim e, em seguida, colocar capacidade em zero. Agora os Aikens são redondos o que você precisa fazer se você quiser mudar os ícones X clique no Eu posso ir aqui e procurar outro Facebook. Acho que eles têm outro facebook. Aiken, não. Sim. Se você clicar aqui, verá que há outro Facebook que eu posso aqui que parece muito melhor. Não queremos o Google. Além disso, porque ninguém usa o Google. Além disso , você pode adicionar algo mais como se fôssemos seios. Ou talvez o seu instagram está ligado. E então, é claro, queríamos Alinhar o Aikens Teoh no lado esquerdo daquela coluna para que pudéssemos fazer isso. Nós não fizemos. A Estelle. Se formos a apostar, vamos cavar definir para zero porque ele automaticamente tem uma aposta que você não vê, mas está lá. Então você precisa colocar essa aposta em zero. Então certifique-se de vê-lo zero aqui e, em seguida, aumentar o espaçamento entre o Aiken ea última coisa que você pode fazer então é eu posso pairar e adicionar uma boa animação. Eu sempre em uso Aikens crescer porque isso parece muito legal. Então os Aikens começam a crescer. Se você pairar sobre ele. Você também pode mudar a cor se você quiser que para o seu Aiken. E a última coisa que fiz foi mudar o texto aqui. Esta é apenas uma edição de texto muito simples. Então fui para o texto, e eu baseá-lo aqui. E então o que eu fiz foi copiar a comida ou novamente fui para a minha página e colou, e eu salvei. E agora terminamos. Quase. Precisamos adicionar mais alguns detalhes, mas a parte principal do site está pronta. Olhem para isto, pessoal, é o que criámos em poucos minutos, vamos actualizar isto. Ele anima tem uma animação muito legal. Tem um mapa, e tem esta secção de contacto aqui. Preciso de mais espaçamento aqui, mas você entende o ponto. E é assim que se cria uma página como esta. Tudo bem, agora que terminamos com este capítulo no último capítulo, vou mostrar-lhe como criar um Aiken fora do seu site porque agora ele tem. Justiça é mundos chatos. Eu posso. Você pode montar seu próprio Aiken. Como você pode ver aqui, quase todos os sites têm. É isso que vou mostrar. Vou mostrar como você pode projetar o interior do seu WordPress. Então, se o seu cliente bloqueado em seu site ou para si mesmo, você terá uma boa experiência e mais alguns detalhes para obter a vida do site e pronto. Espero vê-lo no próximo vídeo. 27. Como adicionar seu site/fav: Ei, pessoal, bem-vindos de volta ao último capítulo deste capítulo. Vamos terminar o site, e vamos dar vida a ele. Mas primeiro precisamos adicionar um pouco mais de detalhes como se eu puder e que você vai ver aqui. Isso é chamado de Pfaff. Aiken é f um V que você pode configurar para cada site. Por exemplo, Laura Ipsen site tem este pequeno Aiken, mas o nosso site não tem um Aiken. Então, na verdade, foi muito fácil. Vamos personalizar. Vamos esperar até que esteja carregada, e tudo o que vamos fazer é ir para a identidade do site, e vamos rolar para baixo. E ali está uma visão. Aiken, acho que este é um termo melhor para isso. S o nunca vai clicar em Aiken selecione. Eu preparei que caiu no logotipo da pasta para que você possa apenas tentar dívida e carregado para a sua repressão. Se você clicar em selecionar, você vai clicar em pular recorte. Você verá alguns pré poucos ali. E como podem ver agora, vamos publicar isto e todas as nossas páginas. Se atualizarmos, terá isso, Aiken. Então eu vou clicar de distância sobre este aqui, e como podemos ver agora, ele tem isso eu posso se você atualizar elemental ou você não vai sempre vê-lo. Mas se você visualizar a página ou enviar a página para outra pessoa, você a verá. É muito simples. Então o que eu sugiro que você faça é não usar um logotipo enorme, fazer uma versão muito pequena fora do seu logotipo ou apenas um pouco de Aiken, algo que você pode reconhecer se ele é realmente pequeno. Então eu não sou. Eu não tenho um logotipo grande, mas eu nem estou usando isso. E eu fiz uma versão muito pequena como você está vendo aqui. Além disso, não use coleiras muito leves em seu FF que eu possa. Caso contrário, você não vai ver todos os navegadores porque diferentes navegadores têm a mesma aparência . Mas a maioria dos navegadores tem apenas um fundo branco ou acinzentado. Então é isso. É um vídeo perdido, provavelmente o mais fácil de toda a Siris. No próximo vídeo, vou mostrar como você pode instalar backups. Muito importante, porque se algo der errado em seu site e você não tem um backup enquanto você precisa começar de novo e isso não é o que você quer, então eu vou vê-lo no próximo vídeo. 28. Como instalar backups automáticos: Tudo bem. Como eu disse neste vídeo, vamos insultar backups em nosso site. Hum, existem diferentes maneiras e plugins para fazer seus backups. O que eu sempre uso são golpes de corrente de ouro. Tem uma classificação muito boa. Então, se você quiser instalar isso, você vai para o seu painel, você vai clicar em, hum, plugins e clicar em anúncios Novo. Se você procurar por correntes de ar, você vai vê-lo aqui. Updraft mais foram mais WordPress. A Becca liga-se a dois milhões de activos instala muitas mortes. Isso é muito que é quase tão popular quanto o próprio elementar. Então é um Blufgan muito famoso. Se você vai clicar em instalar, você pode ativá-lo, e então ele lhe dará este menu. Você pode pressionar aqui para começar. Ele irá para as configurações, e você verá toda a configuração fora de seu backup olhando para cima aqui. Basta clicar aqui fora ou terminar a turnê. Não precisamos disso. Ok, então você precisa configurar isso. Algumas pessoas pensam que se você instalar um backup olhando, então ele é feito e seus backups serão feitos. Mas não é assim que funciona. Uma vez, quando trabalhei com os clientes, eles instalaram um backup lambendo e brigaram. Havia reforços, mas não havia Becker. Porque você precisa arrumar o cobertor. OK, então para fazer backup, apenas peito, você pega. Mas agora, mas é claro, você precisa dizer onde você quer salvar dois caíram, e é isso que você vai fazer em cenários. Além disso, o que é muito bom é que você pode colocar isso em uma freqüência regular. Então, por exemplo, você pode dizer ao sistema que ele precisa criar um backup todos os meses, então isso é bastante incrível. Então eu sempre em quase todos os sites que eu faço pelo menos mensalmente e também para o banco de dados. Então você precisa de seus fells e seu banco de dados da natureza, e então você pode dizer aqui quanto sobre as versões do site você quer proteger. Então, por exemplo, se você vai salvar seus backups em dinheiro de arrasto, você não quer salvar todos os backups, porque se seu site funcionou no mês passado, você não precisa de um backup fora há um ano. Mas costumo guardar seis cópias de segurança, por isso vou pôr este número no 6 e no 6. Então, seis meses de folga, meu site estará de volta. Mas você também pode fazer isso aos 12 para que seu ano inteiro seja de volta. Mas também depende do tamanho que você tem no Dropbox ou no Google Drive. Seja o que for, eu sempre uso o Dropbox. As maneiras de conectar esses recursos diferentes são diferentes porque os recursos são diferentes. Mas vou mostrar-lhe como fazer o Dropbox. Se você tiver desvantagens. Tenho uma conta DROPBOX. Eu pago $10 por mês para Dropbox s. Então eu tenho um terabyte, e isso é suficiente. Mas você também pode configurar uma conta gratuita do Dropbox para dois gigabytes. Acho que é grátis. Mas você também pode clicar aqui para enviar e-mail, e então eles vão enviar para backup para o seu e-mail ou para o seu FTP, que é a superfície. Se você entender o que FDP é, você pode configurá-lo aqui mesmo. Mas eu sempre uso o Dropbox, mas você também pode usar o Google Drive. Google Drive, eu acho que dá 15 gigabytes de armazenamento gratuito. Mas vou mostrar-te como fazer a retirada. Boxer, você vai clicar no Dropbox para garantir que estes são mensais. Vou salvar seis backups de seis meses e rolar para baixo e apenas clicar em salvar alterações. Hum, então você está quase terminando. , esta é a minha senha propósito, esta é a minha senha. Então você não tem essa janela agora você precisa clicar no acesso de olhos de autoridade porque ela precisa dar a este bloco de autoridade para dizer coisas dentro de sua caixa de depósito. Então, se você já está bloqueado no seu Dropbox, você receberá esta mensagem e você só vai clicar na configuração completa e, em seguida, está feito. Mas talvez se você não tem uma caixa suspensa, você não vai ver que, Claro, Claro, Então você pode usar um fora dos outros métodos para fazer seus backups, e agora está feito, e você pode iniciar um backup direito Agora. Então eu vou fazer isso porque eu quero um backup com esta versão fora do site. Então, se eu vou clicar no backup, ele vai carregar meu backup. E isso pode levar um poço, dependendo do tamanho do seu site, é claro. Mas agora ele está salvando todos os golpes no meu Dropbox, então eu sempre tenho uma versão fora do meu site quando meu site é lançado. Oh, e também, se você não tem um espaço de amor de, por exemplo, você vai usar o Dropbox, certo? E você só tem dois gigabytes em seu Dropbox. O que você também pode fazer é colocar esse número em dois. Porque, então, se houver dois backups e um novo backup, ele é edita o último backup enquanto na verdade d todo esse backup será excluído automaticamente dessa pasta do Dropbox. Então isso é um método. Se você realmente não tem uma conta e não quer pagar pelo armazenamento, sugiro apenas criar uma conta do Dropbox. Você vai ter que gigabytes, eu acho, e colocar isso em um ou dois. Então você sempre tem um mês ou dois meses de folga. Então eu vou esperar, lidar com isso feito, e então ele vai dizer que está feito, e então está tudo bem. E foi isso para o vídeo prato. No próximo vídeo, vou mostrar-lhe como projetar seu propósito. Chamado. o Comoologotipo que eu tenho aqui. Isso é muito bom. E também minha sorte na experiência como você vai ver aqui eu tenho meu próprio logotipo. Quando olho para dentro, isso é muito legal. Então é isso que vou mostrar. E depois disso, vamos colocar a vida do site, por isso vejo-te no próximo vídeo. 29. Tornando o início do Wordpress mais er no Wordpress: Bem-vindos de volta, pessoal. Neste vídeo, vou mostrar a você como criar seu painel e você está procurando experiência. Isso pode ser bom para você ou para o seu cliente. Se você está entregando um site, é um Blufgan muito simples. E então você pode ter seu local aqui. E se você olhar para dentro, então é isso que eu vou te mostrar. Se você vai para plugins e que em novo, você vai para White Space Label Space CMS, você precisa para esses espaços porque caso contrário você não pode encontrá-lo. Pelo menos eu não podia. Então, se você vai clicar em instalar e depois ativar, você vai usar esta reserva. E esse Blufgan realmente não melhora seu site. Mas é apenas uma boa experiência. E também, se você está trabalhando em um monte de sites para clientes, também é bom que eles são o logotipo fora da empresa é aqui em cima. E se você criar outro usuário para seu cliente, ele também verá o local. Então, parece que parece mais que você realmente personalizar um painel WordPress para empresa desafio . Parece muito profissional, e seus clientes vão adorar isso. Então, o que? Você vai fazer isso uma vez instalado, você vai para as configurações. E aqui está. Está sob as configurações. Então clique em White Label CMS. Ele vai fazer algumas perguntas sobre desenvolvedores. Uh, nós não precisamos disso. Ela vai clicar no Skip. E agora a primeira coisa que quero mostrar a vocês é a sorte no recurso, porque agora, se olharmos para fora, eu vou olhar para fora por um segundo. Você vai ver que este chato foi logotipo pressionado. Não é isso que queremos. Então, vamos voltar para as configurações White label CMS, clique em Ignorar novamente e, em seguida, vá para o bloqueio. Então, a primeira coisa que eu quero fazer é em um logotipo de registro. Então eu vou clicar no upload, e eu vou ficar com uma cor escura. Claro que sim. Onde está o meu logótipo? Por que meus Locos desaparecem? Então eu vou fazer o upload do meu logotipo novamente porque ele desapareceu por algum motivo. E então eu vou clicar em, hum, fazer upload, e então eu vou clicar em seguro, e nós vamos ver se funciona. Então vamos olhar para fora e sim, funcionou. E você pode fazer upload de qualquer logotipo. Claro que sim. Aqui certifique-se de que você vai usar um PNG. Portanto, não importe um logotipo com um fundo branco, porque caso contrário você verá um plano de fundo amplo. Não é grande coisa, mas isso parece fora do curso, melhor. Então, também, nós vamos no logotipo aqui, então volte para implantar gin nas configurações e, em seguida, sob branding, você vai rolar para baixo, não para mim. E bar esta é a barra de administração, e este é o menu do site. Tudo bem, então se você quiser usar um baixo, se você quiser ter um local aqui em cima, você precisa ir para o menu do site e você precisa para um logotipo aqui. Mas se você vai apenas adicionar um logotipo como este ou a versão branca, sim, você vai clicar seguro. Você vai ver que isso vai encher o buraco com. Então o que eu sugiro que você faça é não usar um logotipo que é apenas cortado em ambos os lados, mas você vai usar um logotipo. Eu já preparei isso para você com um pouco de espaçamento no site, e então ele vai parecer um pouco mais profissional. Mas você também pode apenas carregar um local como este, mas eu sempre gosto de você em um pouco mais de espaço branco aqui em que sendo G. Eu fiz isso na loja de fotos. Mas você pode fazer isso em um monte de outras ferramentas como Baines ou ilustrador realmente não importa . Então, agora, se vamos clicar no cofre, você vai ver que parece muito legal. Você também pode configurar uma imagem de fundo que também é muito legal sobre isso, Blufgan. Então eu também vou mostrar que se você for para a imagem de fundo, eu não vou fazer isso para este site. Mas eu vou apenas mostrar-lhe se você vai clicar nesta imagem, por exemplo, você vai clicar em inserir post, clicar em seguro, em seguida, voltar. Teoh sua tela Le Guin. Se você olhar para fora, você vai ver que você vai ter um fundo e às vezes vai parecer legal. Mas eu realmente não quero usar isso algumas armas de elite que por enquanto. Mas há uma coisa que quero mostrar a vocês, que é o colar do botão de entrada. Você pode mudar isso aqui, então temos essa cor fora do meu logotipo. Então, se vamos pegar essa coleira com a nossa boa tomada. Vamos pegar o colarinho, e então se você rolar para baixo, você pode até colocar o colar fora da sua sorte no botão. E agora é só esse colarinho azul. Se quiser igualar o Brende, não vá ao fundo. Cor do rótulo do formulário estudioso, sem formulário, cor do botão. Agora podemos colar na cor aqui e também mudar a cor do pairamento. Basta usar as mesmas configurações. E então se clicarmos no cofre e olharmos para fora, você verá que também temos um fundo roxo. Mas ainda há uma sombra azul, então é isso que preciso deletar. Caso contrário, isso não parece muito bom. Acho que preciso mudar o formulário. Mas no colarinho de texto, um, muito branco, por exemplo, e também o pairar para branco. E se eu guardá-lo e eu meio que olhar para fora, você vai ver que este chamador combina com a nossa marca. Você precisa dele? - Não. É legal? Sim. Então é isso que eu só queria te mostrar. E eu não encontrei uma maneira de mudar todas as cores com a imprensa Denver. Com este sangue dentro, você é limitado. Mas é bom. Ok, então agora nós tornamos o painel um pouco mais agradável. E no próximo vídeo, vamos colocar a vida do site. Isso também é muito fácil de fazer. E, em seguida, como um bônus, vou mostrar-lhe o que você pode fazer com elemental pro. E se você é realmente sério sobre a construção de sites para outras pessoas e você quer ganhar dinheiro com isso, são realmente sugerir que você assista esse vídeo bônus porque elemental pro é muito, muito, muito poderoso. Está bem, vejo-te no próximo vídeo. 30. Como colocar o site ao vivo: Ei, pessoal, bem-vindos de volta. Finalmente vamos colocar a vida do site. Vamos apenas dar uma olhada no que criamos porque você pode se orgulhar se você fez isso. Até agora no curso, criamos uma página inicial muito agradável com um fundo de vídeo, um monte de animação legal. Temos efeitos de pairar. Criamos números animados e criamos uma seção de dio falso quadro. Quero dizer, é muito legal o que criamos em poucas horas. Tudo bem, então eu só queria dar uma olhada no que nós criamos até agora. É, é muito bom. Tudo bem, então agora vamos colocar essa vida no site porque agora, se você vai procurar o site em, uh, incógnito, por exemplo, ele ainda vai ficar assim porque Nós definimos este site privado, Blufgan. Então vamos desativar isso, e então precisamos também configurar a página inicial. Então, basta ir para o seu painel. Vamos nos conectar e depois instalar plugins instalados, e então vamos desativar os sites privados do poder. E agora precisamos verificar mais uma coisa porque às vezes outra página é configurada como sua home page. Então você precisa ir para configurações e, em seguida, ler porque essas configurações artistas para como as pessoas podem ler o seu bloco direito, porque onde quer que ele está lendo preto forma abençoado e aqui você precisa ter certeza de que sua página inicial está definido para o que criamos porque, às vezes, ela é configurada para uma página de exemplo e, em seguida, sua página inicial não está mostrando a imagem inicial. Você precisa dizer a sua imprensa como, Ei, esta é a página inicial, tudo bem, e então a última coisa que você pode fazer é salvar suas alterações aqui e verificar se todas as suas páginas são públicas. Então volte e clique nas páginas e depois no suco. Certifique-se de que nenhuma de suas páginas está em privado ou que é uma senha. Você pode verificar que se você clicar no clique em edição rápida e você pode ver que esta página base publicada. Mas mesmo que esteja no rascunho, por exemplo, você vai vê-lo neste título. Então eu só queria mostrar que você pode colocá-lo no rascunho, e então as pessoas não podem encarar isso decidir? Então, se você estiver testando com uma página e quiser adicionar outra página, mas você não quer que outras pessoas a vejam, você vai colocá-la em rascunhos, e então você sabe que ninguém pode acessar esse site. Isso é uma coisa importante que eu também quero mostrar a vocês. Ou você pode até definir toda a base como privada para que ninguém possa acessá-la. Mas no Lee, você está bem? Então, vamos clicar em uma atualização. Então nós estamos agora nós vamos ver um incógnito se nosso site está funcionando. E sim, agora nosso site é vida. Parabéns. Este é sempre um bom momento que todo o seu site é verificação de vida. Se todas as outras páginas estão trabalhando nossos lançamentos portfólio trabalhando, nosso sobre cadelas trabalhando e nossa página de contato está funcionando, isso é muito legal. Então agora você terminou a parte principal fora do curso. Mas eu quero dar um pequeno vislumbre do episódio bônus porque, por exemplo, por exemplo, em uma página de contexto, seus clientes muitas vezes perguntam se você pode configurar um formulário de contexto. Um formulário de contato é algo que você não pode lidar com na versão gratuita de L.A mentor e também Desportivo Dio Page. Por exemplo, seus clientes querem um site onde possam. Eles podem adicionar a seus itens de portfólio. Agora só é possível adicionar um novo item de portfólio se ele for para o editor elemental. E você não quer que seus clientes entrem no editor porque eles podem estragar as coisas . Então é por isso que você quer recursos dinâmicos para que eles possam em itens de portfólio ou projetos ou bloquear posts dentro do backend, por exemplo, e também o que eu digo com Heather eo er comida, sua não um monte de opções sobre este é apenas uma duplicata em cada página. Então eu sugiro que você assista o próximo episódio bônus, onde eu vou mostrar-lhe todos os recursos para o elemento de proceder. Se você realmente quer ganhar dinheiro com um site que vende sites para outras empresas ou pessoas, é realmente vale a pena assistir esse episódio porque você realmente quer usar elemento de pro . Confia em mim se ias construir websites para outras pessoas, por isso espero ver-te no próximo vídeo. Se você não vai assistir o próximo vídeo e ele só vai construir este site para você mesmo . Então quero agradecer-te por teres assistido a este curso todo. Se você pode deixar um re alguns policiais, deixe-me saber o que você acha sobre o curso. E se você tem outras sobre mim, outras sugestões ou você quer que eu faça outro curso sobre outro assunto, por favor me avise. Você pode entrar em contato comigo pessoalmente no meu instagram em Reno, o boor. Então eu vou colocar esse link lá embaixo. E eu também vou colocar tráfico de elementos ou pro down cara. Então você pode verificar isso por si mesmo se você não tem mais tempo para assistir o episódio bônus . Mas espero vê-lo no próximo vídeo. E se não, muito obrigado. Sim, foi isso para este capítulo. E, uh, sim, é isso. Este é o fim. Espero que tenha gostado. E, hum, sim, sim. Não sei o que dizer. Certo, lute. 31. BÔNUS: por que você quer Elementor Pro: Ei, pessoal, bem-vindos de volta ao episódio bônus. Se você chegou até aqui no curso, você está seriamente interessado em L.A mentor. Então eu quero mostrar a vocês o que a versão pro tem para oferecer. E isso é o que é viver com pixels Brent. Trata-se de permitir que você crie sites construídos e projetados para outras empresas. Então eu vou te mostrar o porquê. Eu acho que é uma necessidade absoluta se você vai construir sites para outras pessoas. Então vamos começar. Vou bloquear este site, e também estou preso ao meu outro domínio neste domínio, que é uma cópia exata do site. Mas é um pouco diferente porque esta é a versão pro. Então, no meu site pessoal 13 do resultado do quadro, a versão pro off elemental não é soul. E na versão que usamos, a versão gratuita do Elemental está instalada. A primeira coisa que eu quero mostrar a vocês o que eu acho que é uma obrigação absoluta é a capacidade adicionar um contexto para Ok, então eu estou aqui na página de contato nos elementos ou editor e agora esta é a versão gratuita . Não há como fazer um formulário. Mas na versão pro há porque se eu digitar o formulário, você vai ter essa opção aqui. E, por exemplo, você pode adicionar um formulário por exemplo, você pode adicionar um formulárioaqui embaixo assim. E esta é uma saudação nab deve se estamos construindo sites para outras pessoas, porque quase todos os clientes querem um formulário de contato na página de contato. Então esta também pode ser a razão pela qual você quer elemental pro. Oh, a propósito, o link para Element of Pro fez página que nós vamos olhar para ele neste episódio. Mas o link está abaixo eso o que você pode fazer neste formulário de contato, que é, você pode adicionar perguntas que você pode realmente projetar o formulário como você quer que ele. Assim, por exemplo, você pode adicionar uma pergunta e você pode, por exemplo, em um recurso de upload caiu para que as pessoas possam escolher uma dívida caiu e fazer upload e enviá-la para o e-mail real que você vai configurar também nestas bruxas. Então esta região é uma das coisas que você definitivamente quer. Se você está bem construindo sites. Outra característica que você definitivamente quer é o controle deslizante thes lá para opções de controle deslizante em elementos de pro. Há um slide normal que você vai usar para o seu grande cabeçalho. Sh. E ali está o carrossel de imagem. A célula de capa de imagem pode ser ótima para exibir logotipos, então, na versão gratuita, nós só tínhamos a galeria de imagens como usamos na página sobre, que se parece com isso. E não há muitas coisas que você possa fazer aqui. Mas na versão pro, você pode adicionar um carrossel de imagem, então, por exemplo, você pode arrastá-lo. E se você não selecionar alguns logotipos, por exemplo, algo assim, você pode ter quatro logotipos mais leves de um minuto. E este também é o recurso que você vai usar com bastante frequência se você estiver construindo site. Você também pode fazer isso para fotos para que você possa criar diferentes tipos de galerias, como você pode ver aqui. Então, se um cliente quer adicionar um monte de fotos para uma página, este é um recurso que você quer, eo outro recurso é o ligeiro, Como eu disse. Então talvez eles queiram adicionar um controle deslizante para os sites, e é apenas um desses recursos que, na minha opinião, é uma necessidade absoluta. Mas agora, agora vai ficar interessante, porque se você está trabalhando com clientes, você não quer dar a eles acesso ao seu editor, Theo Elementary editor, porque se eles podem mudar o site, Eles podem estragar tudo e então vai ser um problema, porque você vai acusá-los de novo? Então o Elemental Pro tem um ótimo recurso para isso, e é ouro para o gerente de função. Estou aqui no site profissional. Se você não for ao Elementary and Roll Manager, você pode dizer ao sistema aqui que todos os editores deste site só podem editar o continente. Se você acessar isso e você vai adicionar um usuário para o seu cliente e você vai torná-lo um editor, eles não podem alterar seu design e arrastar coisas em novos elementos ou seu design. Eu vou ficar o mesmo e eles só podem adicioná-lo detecta e as imagens. Por isso, é também, na minha opinião, uma característica muito importante. Se você quer trabalhar com clientes também uma grande característica que eu queria mostrar-lhe esses fundos personalizados . Claro, eu mostrei que os telefones do Google na maioria dos casos é a solução perfeita para a maioria dos sites que você quer. Você tem um monte de opções aqui que são gratuitos e já são importados em elementos. Ou também acontece que você está trabalhando com um cliente e eles dizem, tipo,“ tipo, Ei, nós temos nossa própria culpa. Pode usar isso? Se você está usando uma versão gratuita de elementos de pro, isso não é possível. Mas qualquer versão pro de elementos. Ou você pode simplesmente baixar um telefone de qualquer site, e você pode adicionar um fundo personalizado aqui, que você pode então usar em suas páginas. Eu tive isso algumas vezes, então também muito, muito útil recurso. Ok, e agora a principal razão pela qual você quer Elemental Pro é por causa de seu construtor de equipe principal foram imprensa é uma plataforma de bloqueio. Foi assim que começou. Então, o que acabamos de fazer com L. Um mentor re editou o insight de uma página direita, mas enfraquecer. Não foi possível adicioná-lo. O cabeçalho eo er comida que precisávamos para ir para as configurações da equipe para editar o título, por exemplo, mas um elemento de pro Você pode projetar seu próprio Chapeleiro e comida, er, o bloco, a loja web, tudo sobre isso. E isso é muito justo, muito importante. Se você tem um cliente que tem um bloco que bloqueou Post, por exemplo, ou tem uma loja Web com um bloco, por exemplo, um site pode ter, como, 20 ou talvez 100 até Mawr ostenta de bloco. Então, seus barcos de bloco estarão bem aqui. E por toda a vangloria do bloco que você vai adicionar aqui. Você quer, é claro, o mesmo design. Você quer o mesmo layout para todas as suas postagens de bloqueio. Então, o que os elementos são pro permite que você crie um único layout gabar-se. Isso significa que você pode dizer que este design precisa ir para cada bloco. Vanglorie-se que o cliente vai adicionar no acenado aqui ou você vai adicioná-lo. E isso é essencial, claro, porque se você tem 100 barcos de bloco, por exemplo, e você acabou de criar todos esses posts de bloco aqui com a opção de páginas e os clientes como hey, Eu quero Teoh metade do título em cima da imagem, por exemplo, você precisa mudar 100 páginas. Então não é isso que você quer? Você quer três capacidades dinâmicas para dizer, como para todos os barcos de bloco ou para todos os meus projetos. Quero este desenho. Vou mostrar-lhe um exemplo. Estou aqui no meu nome de domínio profissional e criei um toque aqui. É uma carteira de ouro de novo. Isso não está na versão gratuita. Como você pode ver, nós só temos posts e páginas. Então agora, neste site, eu tenho um portfólio aqui. Eu criei este passo. E se eu clicar neste portfólio, eu tenho alguns projetos dos meus clientes já dentro daqui. E o que posso fazer agora é clicar em anúncios novos. Posso dar um título fora do projeto. Eu posso adicionar imagens e apenas um pouco de texto, como você pode ver aqui e, em seguida, se eu clicar em publicar, o design que eu criei para todas essas páginas será o mesmo. Então, por exemplo, eu vou clicar neste projeto, e como você pode ver aqui, esta é a página que eu fiz. Mas eu não fiz esta página com a opção de páginas Eu fiz esta página com um tipo de post personalizado . E então eu disse, para cada projeto que está aqui, eu quero o mesmo layout. Assim também, para um projeto como este, por exemplo, ele tem exatamente o mesmo layout, mas apenas as imagens e o Texas é diferente. E se você tem um site de bloqueio, certo, você tem uma reivindicação que tem um bloco. Você também quer exibir todas as postagens de bloqueio na página Una e quando o cliente vai adicionar uma nova postagem de bloqueio, você quer que essa nova publicação de bloqueio fique no topo da lista. E isso é o que você também pode fazer. Um profissional elemental. Você pode simplesmente inserir esse recurso e, em seguida, exibir a publicação mais recente do bloco automaticamente. E, como eu disse antes do cabeçalho e um rodapé é também o que você pode agora projetar no elemento de pro , então você não precisa mais tocar nas configurações da equipe. Você pode apenas criar seu cabeçalho dentro do elemental pro. É o mesmo para a sua comida, ou você só vai inserir um desenho. Vai ser muito fácil. E se você não é realmente bom um design, você pode até escolher um de seus cabeçalhos pré-fabricados ou alimentos ou modelos, você pode simplesmente inseri-los e editá-los, então você já sabe que ele fica bem se você não está realmente em design. Falando fora de design, você também obter um monte de modelos, um modelo de página e modelos pro que você pode usar para cada página. Isso é verdade para os blocos que cobrimos em episódios anteriores, então você vai ter uma tonelada mais bloco. Então, por exemplo, você está criando um sobre Paige. Você só vai para os blocos profissionais. Existem 10 designs diferentes para uma página sobre que você insere enquanto você alterá-lo um pouco e você passar para a próxima página é um fluxo de trabalho muito rápido, então também um recurso muito valioso. Se você quer construir sites e você quer ter um bom fluxo de trabalho agora para as lojas da Web para loja Web, você pode pedir um monte de dinheiro porque é um pouco mais complicado por causa do sistema de pagamento que está conectado. Mas a imprensa tem um plug gratuito que é chamado de rumores, então você pode criar uma loja na Web muito facilmente. Ah, mas com elementos ou pro, você pode projetar a página do produto e a página de arquivos lida em L. A Masculino ou então você pode dizer OK, o título precisa estar aqui para comprar. Melhor precisa estar aqui. A imagem precisa estar aqui, então você tem controle total sobre como sua página do produto e você é nosso pessoal. Página para debates onde todos os seus produtos são olha, e isso também é muito, muito bom. E eu acho que os recursos que acabamos de falar já são mais importantes, mas o que também é muito bom é que você tem recursos MAWR aqui. Se você clicar nos nove pontos, esses recursos já básicos que já vimos. Mas agora eles adicionaram esta seção pro. Já falamos sobre alguns desses, mas também coisas como a manchete animada. É apenas um belo dedo do pé tem isso. Parece muito, muito profissional. Coisas como o flip bark para que você possa adicionar uma imagem, e quando as pessoas pairam com a boca sobre a imagem, ela vira. Parece muito legal. Você pode fazer uma célula de carga de depoimento. Por enquanto, acabamos de colocar depoimentos de árvores em colunas de árvores, mas você pode adicionar uma célula de cobertura com esse Richard. Então, se você inserir que você pode ter mais depoimentos como aqui, e automaticamente anima olhar muito legal. Você tem algumas opções de design, então isso também é bom se você quiser ter um controle deslizante testemunho, mesa de revolta. Além disso, para alguns sites que esta é uma obrigação Facebook botão Facebook Commons. Isso também é muito legal para enfrentar a página do Facebook. Este também é um recurso que muitos clientes querem, então você pode simplesmente arrastar no Facebook Richard como este. E como você pode ver agora, este é um Facebook totalmente funcional, que se você acabou de colocar o seu próprio nome de usuário aqui e, em seguida, ele é inserido muito legal . E, em seguida, o último recurso fora da versão pro Isso é absolutamente um recurso incrível é a opção de modelo D. Isso também é uma obrigação. Se você está trabalhando em um grande site, eu vou te mostrar um dos sites que eu fiz para um cliente recentemente. Este é um site de bloqueio. É um site muito grande, grande bloco. É para uma revista. Então, como você pode ver, se você clicar em uma postagem de bloco, por exemplo, eles têm o mesmo layout que você pode ver porque este é um site de bloco muito grande. Mas não era isso que eu queria te mostrar. O que eu queria mostrar a vocês é o recurso templates. Então este bloco é um bloco cinza que você vê aqui. Isto é um modelo. Eu salvei todo este bloco como um modelo neste site, e isso significa que eu posso exibir este bloco em um monte de páginas diferentes. Então, por exemplo, se eu for para D beber categoria EUA aqui, você vai ver esta página, e o mesmo bloco é aqui. Então, se você tem um bloco que você quer em 10 páginas, por exemplo, e o cliente vai dizer como, Ei, você pode mudar essa imagem? Você não quer entrar em 10 páginas, então você apenas salvar um pouco fora do site como um modelo. E então você insere esse modelo em todas as páginas que você deseja e o que você pode fazer é ir para seus modelos seguros no acenado. E aqui está. Eu fiz mais modelos neste site, mas esta é a barra lateral da revista. Então, se eu quiser editar a imagem, por exemplo, em todo o aparador de todas as páginas. Eu só entro aqui. Eu só tive isso com o elementar. Eu guardo e é seguro. Todas as páginas também muito, muito, muito importante característica. E então eu quero mostrar a vocês duas características menos que eu acho que são também muito agradáveis. E este é o pop up para lojas na Web. Isso é usado com bastante frequência que quando as pessoas movem o mouse para fora da página, um pop-up aparece e é como, Ei, há 10% de desconto ou algo assim para que você possa criar um pop-up e depois dizer: um pop-up aparece e é como, Ei, há 10% de desconto ou algo assim para que você possa criar um pop-up e depois dizer: este pop-up para exibir em toda a minha postagem de bloqueio ou apenas na página inicial ou em todo o site e eu queria aparecer após 40 segundos, por exemplo. Então este também é um recurso muito poderoso. E, em seguida, o último recurso divertido que eu quero mostrar a vocês é a emoção afetar recurso recurso desmissivo que você vai usar em um site muito criativo. Talvez se você estiver trabalhando um dia para um cliente que ganhou algo realmente criativo, você pode usar esses efeitos de movimento. Teoh, faça algumas partes se moverem quando você rolar para a página, ou quando você passar o mouse sobre uma determinada área, algo acontecerá. É apenas uma boa característica de se ter. Parece absolutamente incrível. Eu usei algumas vezes, mas nem todo mundo quer site ofensivo como esse, claro, mas é bom que ele está lá na versão pro. Então agora o que você quer fazer é ir para o link abaixo e você vai ver a página. E como você pode ver nesta página, há pacotes de árvore que você pode escolher. O primeiro pacote é para uma licença de site único, Então, se você quiser apenas testar elemental ou você pode ir para o primeiro pacote, é apenas US $49. E se você não gostar, você pode pedir seu dinheiro de volta porque eles têm uma garantia de 30 dias de dinheiro de volta para novos clientes. Então, todos os preços são por ano. Eu tenho a bagagem mais cara porque pacote de 40 minutos, você só recebe três sites, ou talvez se você só quiser testá-lo para um ou dois site, você pode escolher estes pacote do meio. Mas eu simplesmente amo elemento ou muito, e eu usá-lo todos os dias para um monte de projetos. Então é por isso que eu tenho essas grandes bagagens. Eu acho que este é o melhor negócio porque você pode usá-lo em sites quase ilimitados. Quero dizer, 1000 sites. Isso é muito. Então você pode ativar isso em seu site e você pode até mesmo cobrar seus clientes se você quiser, como US $10 por mês para 10 euros por mês para usar para sofrer. Porque este é um preço anual, certo? E não é que se você não pagar depois de um ano que o site vai cair, você simplesmente não recebe as atualizações. Mas o site vai funcionar fora do curso. Problemas podem ocorrer, mas porque em um site detalhado há muitos plugins fora. Então, se você está falando sério sobre isso fora do curso do que isso, bagagem é um grande negócio. Mas se você só quer testá-lo e você quer testar, se é algo para você, sugiro que você pegue um desses pacotes e veja se ele funciona para você. Se você tiver alguma dúvida sobre o elemental pro, deixe-me saber abaixo. Fico feliz em responder suas perguntas porque entendo que, claro, se você vai comprar isso, é um investimento. Você precisa pensar sobre isso, mas eu acho que é um grande negócio. Se você sabe o que você pode pedir para um site, você pode pedir centenas de milhares de dólares para cada site que você entregar e com a velocidade que você pode usar elementos ou pro. É absolutamente inacreditável quanto dinheiro você pode ganhar se você dominar esta ferramenta. Então esta é a minha perspectiva sobre por que eu acho que prós elementais e absolutamente deve. Se você está falando sério sobre a construção de sites, é o melhor do mercado. Quero dizer, há uma razão para este ser o construtor de páginas número um no mundo. OK, então novamente, se você gostou deste curso, por favor deixe um recife. Eu adoraria ver o que você lutou sobre isso. Se você tem alguma idéia, o que eu poderia melhorar ou o que meu próximo curso deve ser sobre, Talvez sobre elemental pro? Talvez seja uma boa ideia. Então, sim, é isso. Espero vê-lo em algum lugar na internet. Podes seguir o meu instagram pessoal, se quiseres. Isso também é lá em baixo, e eu quero agradecer muito por assistir caras bem por