O Elementor Masterclass 2022

1. Introdução à Elementor do curso: Tudo bem, então seja bem-vindo oficialmente ao curso. E antes de começarmos, lambdas dão alguns pontos, tem e dicas sobre o que esperar ao fazer o curso. Agora, este será o site que construiremos juntos. Chama-se nossa viagem de passaporte. É para uma agência de viagens fictícia. Eles basicamente ajudam os turistas a planejar suas férias de sonho, se você quiser. Então, como você pode ver agora na página inicial, temos o logotipo à esquerda, o menu principal à direita. Também vou ter a banda de fundo agora se misturando no cabeçalho. Aqui temos uma imagem estática. No entanto, mostrarei uma alternativa sobre como usar o vídeo, nosso plano de fundo em vez disso. Se você preferir usar vídeos, mostrarei como fazer isso. Para o resto da página inicial, terei seções diferentes com diferentes tipos de conteúdo. Terei a seção Serviços. Haverá uma seção de galeria com imagens de todo o mundo, uma seção de blog destacando posts tilde lithos do blog. Mas também teremos que fazer algumas seções de pacotes que usamos a seção. E, finalmente, teremos o rodapé. Também vamos construir duas páginas adicionais. Além da página inicial. Vou mostrar a você como construir os limitadores da página do blog, obtenha tudo aqui. Temos todos os artigos adicionam a página do blog. Aqui você vai ter as postagens do blog. Então, vou te mostrar como criar esse tipo de design onde você tem, vamos supor dois e por cima. E então você terá as diferentes postagens das diferentes categorias. E, finalmente, também mostrarei como criar a página de contato que terá um formulário de contato muito simples. Deixe-me mostrar a você. Este será o formulário de contato. Então, inicialmente, vamos usar a versão gratuita do elementar e porque ela não tem muitos recursos que a versão paga do elemental tem. Vamos fazer uso de três plug-ins adicionais como compensação. Um deles será o elemento ou Cabeçalho e Rodapé por força de brainstorm para construir nosso cabeçalho e nosso rodapé. Faremos uso dos plugins de complementos essenciais para nos fornecer alguns elementos adicionais que serão usados para criar certos tipos de conteúdo. E, em seguida, também usaremos o plug-in de formulários WP para nosso formulário de contato. Mas assim que usarmos o pool elementar, não precisaremos mais de nenhum desses plug-ins. Com o pool elementar, podemos fazer tantas coisas e mostrarei como fazer uso delas. Além disso, não se trata apenas do estilo e do Zan. Vou mostrar-lhe como tornar o site responsivo também. Para que, se ele for visualizado em um dispositivo móvel ou em um tablet, ele será responsivo. Como você pode ver, isso é para dispositivos móveis e é responsivo. Agora também vou oferecer todos os vídeos e imagens que usei. E, de fato, todas as imagens, com exceção desta, eliminadas agora. Todas essas outras imagens, essas imagens que eles realmente me levaram porque eu faço muitas viagens. E se você quiser fazer uso das imagens, você pode. Mas se você vai usá-lo para fins comerciais, por favor indique que ela poderia então para minha conta do Instagram, minha conta do Instagram é escolhida Xander, eu tenho um seguimento muito, muito pequeno, mas eu estou tentando aumentar meus seguidores no Instagram porque acho que muitas fotos. Então, se você gosta de viajar pelo mundo, são algumas fotos de todo o mundo. Certifique-se de me seguir nas pás Instagram de Sandra. Bem-vindo mais uma vez ao curso. Espero sinceramente e acredito que você aproveite este curso sobre elementar. E o curso é dividido em várias seções, como eu disse, a primeira seção. Na verdade, antes de entrarmos na própria propria elemental, assumirei que você é novo na construção sites e não sabe nada sobre hospedagem na web de domínios da web. Na próxima seção, vou mostrar como você pode obter um host da web e o domínio da web também. Se você já tiver ou estiver familiarizado com este tópico, pule esta seção e vá direto para a seção onde começaremos a construir o site usando a versão gratuita do Elementor. E, em seguida, na próxima seção, vamos nos concentrar no design responsivo, como torná-los responsivos. E então teremos a versão paga do pool elementar elementar. Além disso, você como trabalhar com o pool elementar para melhorar a funcionalidade e o design do seu site. E então a última seção deste curso conterá as atualizações são conteúdo adicional onde especificamente escolher diferentes tipos de elementos de diferentes tipos de características do elementar. E expanda e mostre como a caminhada até o sabão mais completo. Mais uma vez, eu realmente espero que você goste e ame este curso. Muito obrigado por assistir. Vamos agora começar. 2. Primeiros passos: Tudo bem. Então, as primeiras coisas primeiro, antes de começarmos, há algumas coisas que eu gostaria que você fizesse. Primeiro de tudo, e a primeira coisa aqui é que eu quero que você instale um tema chamado tema halo. Este é um simulador. Na verdade, é por Elemental de si mesmos. Seremos bem-vindos com esse tema. Então, por favor, vá em frente, instale e ative o tema. E então o que eu quero que você faça é ir em frente e criar algumas postagens que vão entrar com elas. Eu já criei cerca de nove posts aqui, você pode ver que tenho três categorias diferentes da Ásia, Europa e América do Sul. E cada uma dessas categorias tem três postagens diferentes. Agora, na verdade, vou fornecer para você o arquivo XML. Eles conterão todas essas postagens. Você pode simplesmente importá-los para o seu site. E também para as imagens, também fornecerei provavelmente um link para o Dropbox. Você terá acesso a todas essas imagens que você pode usar. Muitas dessas imagens realmente para minha própria conta do Instagram, mas você é mais do que bem-vindo para usá-las em seu próprio site. A única coisa que eu peço é que, se vamos usar minhas imagens em seu site e você está ganhando dinheiro, site engraçado, por favor, mencione que você tem essas fotos da minha conta do Instagram, então, por favor faça isso. Bombine Levite para você todo o conteúdo das postagens através de um arquivo XML e também as imagens que usei. Agora também criei algumas páginas também. Eu tenho a página Sobre, a página Artigos, que seria como a página do blog, uma página de contato, um pombo em destaque, é claro, a página inicial. Também. Quando terminar, venha aqui para Configurações, vá para ler e defina sua página inicial para a página inicial. Então, basicamente, escolha uma página estática aqui. E então disse homepage para estar em casa. Por último, mas não menos importante, também criei um menu. Vá até Menus de Aparência e, em seguida, crie seu menu principal. Posso dizer que tenho meus muitos, muitos sem nome chamados MainMenu. E eu adicionei a casa sobre artigos são apresentados e contatos. Então essa é uma pequena tarefa para você fazer. Novamente, fornecerei para você o arquivo XML para as postagens e páginas, bem como um link para o Dropbox para as imagens que estão sendo usadas. 3. Instalando Elementor e configurações gerais: Então, agora que você adicionou todo o conteúdo necessário à sua ciência, agora é tentar instalar alguns plugins. E, claro, o primeiro plugin que vamos instalar será elementos de antes de fazer isso, eu tenho três plugins já ativos no meu site, otimizador Saigon e segurança porque estou hospedando com SiteGround. E então importador do WordPress, se você importou o arquivo XML que eu forneci para você no vídeo anterior, provavelmente você teria usado a entrada do WordPress nosso plugin. Então eu fiz exatamente a mesma coisa por mim mesmo. É por isso que eu tenho o plugin ativo lá. Mas vamos fazer agora é que vamos adicionar três plugins diferentes. E o primeiro obviamente será elementar. Esse é o plug-in principal com o qual vamos trabalhar. É o único aqui. E, claro, é a versão gratuita do elementar. Mas como é a versão gratuita do Elementor, ela é um pouco restrita em termos de recursos disponíveis. Para compensar isso, vamos instalar mais dois plug-ins no primeiro aqui está ao lado do elementar. São os átomos essenciais para elementar pelo desenvolvedor do WPF. Vou ir em frente para instalar o plug-in também. E, finalmente, vamos instalar o aqui embaixo, que é o acúmulo elementar de cabeçalho e rodapé por força de brainstorm. Então, vamos em frente, instale o plug-in. E sim, vou em frente e agora para plugins instalados. Isso vai continuar e ativá-los um de cada vez. Ativa o construtor de cabeçalho e rodapé e ativa Adams essenciais para o ar. Mentor. Agora, depois de ativar os átomos essenciais para o Elementor, você pode ver uma página. Na verdade, deixe-me ir em frente e clicar no link aqui. Porque esta não é a primeira vez que instalo o plugin de átomos essenciais na minha página. Você não está, não estou vendo a página de boas-vindas. Portanto, é muito provável que você tenha visto uma página diferente, onde eles dirão: Ei, bem-vindo. Escolha com quais elementos você quer caminhar. Basta clicar em Next, Next, Next, Next, Next, eles também oferecerão a atualização para pagar a versão paga dos átomos essenciais. Apenas ignore isso. Basta clicar em Avançar, Avançar, Avançar e depois em Concluir. E então essa seria basicamente a página que você veria. Mas mais sobre isso um pouco mais tarde. Vamos dar uma olhada nos elementos são antes de tudo, configurações. O que exatamente temos aqui? A primeira coisa aqui será os tipos de postagem. Se você estiver trabalhando com tipos de postagem personalizados, terá a opção de verificá-los aqui também. Mas só estou trabalhando com posts e páginas. Então, vou manter isso para verificar. Agora ele diz cores padrão desativadas. Marcar esta caixa desabilitará as cores padrão dos elementos e fará com que o elementar herde as cores do seu tema. Agora, se você estiver usando um tema avançado, como digamos Astra ou oceano, WP e assim por diante. E você quer usar as cores do seu tema. Você desmarcará essas duas caixas aqui. Mas porque estamos usando o tema halo, que é um tema muito, muito leve, a Elementor fará todo o trabalho pesado para estilo, design e funcionalidade. Então, o que vou fazer é verificar essas duas caixas. Sinto muito. Vou desmarcar essas duas caixas porque, de fato queremos usar as cores padrão fornecidas pelo nosso elementar, então vou manter essas duas caixas desmarcadas. E finalmente melhore o elemento. Ou se você quiser contribuir com o Elementor, você pode entrar aqui e marcar o gráfico da caixa. Não vou fazer isso. Vamos passar para o estilo. Falaremos sobre isso um pouco mais tarde. Na verdade, integrações se você estiver trabalhando com Google Maps e precisar instalar a chave da API, é exatamente aqui que você a instalaria. Além disso, se você acabar instalando outros plug-ins, como digamos PayPal ou Stripe ou coisas assim. E você precisa integrá-los ao elementar. Será nesta página onde você encontrará as opções para fazer isso. Você tem a guia Avançado. Não precisamos mudar nada aqui. Basicamente, a maioria deles é para segurança e para nossa velocidade. Se você notar um problema com elementar, talvez seu site esteja se tornando muito, muito, muito lento. Você pode entrar aqui agora e alternar o método de impressão CSS de arquivos externos com incorporação interna. Mas só faça isso se você estiver tendo problemas com sua velocidade. E não é porque você está usando algum outro plug-in inchado ou seu host não é bom o suficiente ou coisas assim só mudaram isso como último recurso. mesmo acontece com o switch, nosso método de carregador de editor. Se você quiser solucionar problemas em seu site, você entraria aqui e habilitaria isso. O arquivo não filtrado carrega elementar tem um tipo de segurança embutida onde se você tentar carregar imagens para o sistema elementar, elementar, vamos dar uma olhada e ver se ou não o arquivo é, na verdade, um seguro para trabalhar habilitando esse recurso, que é habilitar uploads de arquivos não filtrados. Você quer o risco de fazer upload de arquivos em seu site. Então eu recomendo que você mantenha este desativado. Os mesmos objetivos com o Google Fonts são carregados novamente, você não precisa mudar nada aqui. Basta manter esse por padrão. Se você quiser trabalhar com Font Awesome For, você pode entrar aqui agora e ativar esse recurso. E então, finalmente, você tem experimentos. É aqui que você terá acesso a todos os recursos mais recentes nos quais o elemental está trabalhando atualmente. Você pode ver que o status da maioria deles está definido como beta, beta, alfa, beta e assim por diante. Na maioria dos casos, você deseja manter esse padrão. Mas há um comando acadêmico que você ativa. E, como o carregamento aprimorado de ativos, isso se destina a reduzir a quantidade de código em cada página construída com elementar. O que isso significa é que suas páginas normalmente carregam mais rápido como resultado, mesmo estando em versão beta, eu uso isso há algum tempo e parece estar funcionando. Então, vou seguir em frente agora e ativar o carregamento aprimorado de ativos. Também vou ativar o carregamento aprimorado do nosso CSS também, por favor até o futuro. Neste site em que você está trabalhando, você percebe que um problema que você pode querer voltar aqui e desativar isso também, mas acredito que deve estar tudo bem. Então, vou vir aqui e salvar essas alterações. Ok, mais uma coisa que quero mencionar muito rapidamente é que você tem gerente de regras. Se você tiver vários tipos de usuários em seu site com diferentes tipos de funções. Aqui, você pode determinar quem pode realmente usar um exemplo específico elementar. Você não quer que um usuário com a função de colaborador trabalhe com elementary common aqui para contribuir com todos e simplesmente não verificar nenhum acesso à ferramenta de edição. Com a versão paga dos elementos, você tem acesso a mais recursos. E então nossas ferramentas aqui. Este é realmente muito, muito, muito importante, regenerar CSS e dados. Se você fizer alterações como a cor do seu texto que diz se um texto que você salva essas alterações e você não está vendo essas alterações entrarem em vigor em sua ciência, desde que não haja cache do computador ou do servidor. Talvez você queira entrar aqui e tentar regenerar arquivos e dados. Bem, isso fará é que ele reconstrua a folha de estilos CSS e espero que isso resolva o problema e você consiga ver suas alterações. barra de depuração do modo de segurança da biblioteca de sincronização ignorará essa, por enquanto, substitua o URL. Se você for um link quebrado em seu site, você quer apontá-los para novos links. Você vem aqui no link antigo, vá para a segunda caixa, adiciona o novo link e eu simplesmente clico no URL da polícia. E você corrigiu o controle de versão do livro e do link. Se, por algum motivo, no futuro, você atualizar para a versão mais recente do Elementor e algo quebrar do seu lado, talvez seu site não funcione tão bem quanto o U22. Você pode entrar aqui agora e simplesmente reverter para a versão anterior. É para isso que o futuro dele está aqui. Se você quiser se tornar um provador melhor e trabalhar com o não oficial em versões oficialmente lançadas de elementais que ainda estão em andamento. Isso geralmente tem muitos pântanos e problemas. Então, se você estiver interessado em ser um chifres a granel são quatro elementos ou você pode entrar aqui agora e habilitar. E então o modo de manutenção novamente. Se seu site estiver em construção ou você estiver fazendo algumas alterações imediatas, você não quer que ninguém possa acessar seu site durante esse período. Você pode entrar agora e escolher em breve ou escolher a manutenção. E então você terá que criar uma página que Dolby exibida para manutenção ou comentários quando você escolherá esse modelo aqui. E, enquanto suas páginas na manutenção ou em breve, você pode escolher quem construiu para ter acesso ao seu site no momento. Então, finalmente, importe, exporte crianças. Você pode exportar seus kits de modelo para usar em, em, em outro site. Ou você pode até importar isso está implicado em um site XML, se você quiser. Então você simplesmente clica nos kits de entrada e, em seguida, aqui você poderá fazê-lo. Eu poderia te mostrar como fazer isso um pouco mais tarde no curso. E finalmente, finalmente, informações do sistema. Se você precisar solucionar problemas seu site e você para o suporte elementar da SEC e eles dizem: Ei, você pode nos fornecer as informações de sua configuração? É aqui que você pode fornecer todas as informações necessárias. Ele simplesmente vem aqui e baixe as informações do sistema, envia-as para apoiar caras no elemental e, em seguida, eles poderão ajudá-lo. Então, é essencialmente isso para as principais configurações do elementar. Obrigado por assistir e te vejo na próxima aula. 4. Visão geral do Elementor: Tudo bem, então com todas as coisas chatas fora do caminho, limão, mostrarei a interface do usuário para elementar da interface do usuário e como os elementos são realmente funcionam. Agora estou nas minhas páginas aqui e o que vou fazer é ir em frente e editar a página inicial. O que você vai fazer é o que você verá luz aqui. Você verá Editar com Elementor. Vai ser esse grande botão azul aqui. Então, vamos seguir em frente e clicar nisso. E o que acontecerá aqui é que o elemental será lançado para caminhar nesta página em particular. Certo, esta é a página inicial. Agora, à esquerda, obviamente você pode ver a caixa para elementar, a interface do usuário. O primeiro que quero mostrar aqui são os três botões aqui, o menu basicamente, você clica lá. Você terá acesso a coisas como as configurações do site, acúmulo de FIM, sobre o qual falaremos um pouco mais tarde. Mas muito rapidamente, vamos aqui para usar referências. E eu não sei sobre você. Talvez você goste do tema leve. Gosto do tema escuro. Então o que vou fazer aqui é para o tema da interface do usuário, vou mudar de forma, detectar automaticamente. Muito escuro. Eu prefiro apenas um fundo preto e o texto branco é muito mais legal. Na minha opinião, novamente, isso é inteiramente subjetivo, mas vou mantê-lo tão escuro. Vamos voltar. Aqui. Você pode encontrar algo dentro do elemento para qualquer lugar. De qualquer forma, elementos, se você quiser, você pode visualizar a página e, em seguida, você pode sair para o painel. Mas vamos voltar. Agora. Aqui, você tem elementos e depois tem global. Global só funciona com a versão paga do elemento. E é aí que se você quiser salvar seu bloco específico de conteúdo e usar esse mesmo bloco em outra página em qualquer lugar do seu site. É a isso que o global basicamente se refere. Mas não se preocupe, falaremos um pouco mais tarde. Mas esses são seus elementos. Você tem elementos básicos como sua interseção. Você entrará no editor de texto de imagem. Então, digamos, por exemplo, que você queria adicionar uma imagem à sua página. Você simplesmente clicaria no elemento da imagem e, em seguida, simplesmente soltá-lo dentro da caixa ali mesmo. E então, a partir daqui, você pode escolher a imagem com a qual deseja trabalhar. Então, apenas como exemplo, deixe-me escolher a imagem dessa garota aqui segurando a bandeira brasileira. E lá está ele. A coisa é a maioria dos elementos que será bem-vinda com normalmente 3,5 compartimentos principais. Se eu concluir superar, você terá a área de conteúdo. Nesse caso, é aqui que você pode adicionar textos, imagens, arquivos de vídeo, áudio e assim por diante. Então você terá estilo onde você pode fazer coisas como talvez mudar a lei do carvão, alterar o tamanho, adicionar uma imagem de fundo desde a altura e assim por diante. E então você terá a guia Avançado. Mas você pode fazer coisas como adicionar margens, padrões, sem espaçamento. Você também pode adicionar alguns efeitos de movimento, são algumas bordas e assim por diante. Então você geralmente, maioria dos elementos com os quais você está trabalhando terá essas três guias ou compartimentos diferentes. Então, voltando aqui e você clica no botão aqui, isso lhe dará acesso a todos os elementos. Então você pode ver que temos os elementos básicos aqui, botão Vídeo, espaçador e assim por diante. Agora, você pode ver aqueles em liberdade condicional sob a versão paga da galeria de portfólio de postagens elementares. Muitos deles. Então você pode ver agora, porque não estamos usando a versão paga do elemental, não temos acesso a todos esses elementos. Mas, felizmente, porque estamos trabalhando com o plug-in de complementos essenciais, temos acesso a muitos elementos adicionais gratuitamente. Você pode ver aqui nos átomos essenciais. Você tem coisas como acordeão avançado, call to action, botão criativo inferior e assim por diante. Então, vamos entrar com alguns desses elementos. Mas, voltando a elementos ou sob geral, também temos acesso a mais blocos. Estou apenas fechar essa coordenada. Então, o geral com a versão gratuita dos elementos aos quais temos acesso, mais elementos como a caixa de ícones, testemunhos, ícones sociais e assim por diante. Deixe-me fechar este. E então você tem site. Infelizmente, esses elementos só estão disponíveis com a versão paga do elementar. Você tem o WooCommerce, novamente, disponível apenas com a versão paga do elemental. Falamos sobre os átomos essenciais. Então este é o outro plug-in. Instalamos o cabeçalho e o rodapé. Este plugin nos permitirá construir um cabeçalho personalizado e o rodapé personalizado para o nosso site terá acesso a elementos como os elementos do Menu de Navegação, página, título do site, logotipo do site e assim por diante. E, por último, mas não menos importante, temos acesso aos widgets do WordPress, como suas páginas, áudio do Callender fez nossa pesquisa e assim por diante. Ok, isso é isso para os elementos. Agora, aqui em baixo, você tem acesso a mais algumas configurações. Pode parecer um pouco avassalador, mas não se preocupe, uma vez que você começar a receber com elementar, na verdade não é tão avassalador. Na verdade, é muito, muito fácil de trabalhar. Aqui em configurações. Aqui, você pode fazer coisas como alterar o título da página, alterar o status de publicado para Penn e revisar, você pode adicionar sua imagem em destaque. Você também pode optar por ocultar o título, o que, na verdade, vamos fazer isso. Certo, vou esconder o título. Quero dizer, quantas vezes você acessa um site e, em seguida, na página inicial, diz que trivalente em casa faz isso. Então, vamos apenas ir em frente e ocultar o título e, em seguida, o layout da página. Vou explicar isso um pouco mais tarde à medida que avançamos no curso. Então você tem o alarme, Desculpe, você tem a barra de progresso de leitura. Isso é fornecido pelo plug-in de complementos essenciais. Basicamente, o ponto aqui é que você pode ter visto em alguns episódios antes de onde à medida que começa a rolar para baixo a página, você verá como uma barra IDA se movendo horizontal ou verticalmente indicando quanto da quantidade de realmente lido e quanto mais conteúdo você ainda precisa comer. Então você tem essa inspiração futura. Vamos dar uma olhada nisso um pouco mais tarde. E então o Índice vá para o topo. Não se preocupe, falaremos sobre isso mais tarde. E então, sob estilo aqui, você pode mudar o tipo de corpo. Você pode adicionar uma cor de fundo, se quiser. Você vem aqui agora, escolha como a cor principal do azul e assim por diante. Mas, por enquanto, vou apenas ir em frente e desmarcar um. E, finalmente, você tem o avançado onde você pode adicionar sua própria fantasia, nosso código JavaScript ou algum código CSS personalizado, que infelizmente só está disponível com a versão paga de elementar. Certo, vamos seguir em frente. Ao lado da frase. Você, você tem o Navegador. Agora, a coisa sobre navegar TO é que, uma vez que você começar a adicionar elementos e conteúdo à sua página, a parte inferior do navegador permitirá que você veja basicamente toda a estrutura em um formato hierárquico de toda a sua página. Portanto, pode ser muito, muito fácil para nós procurar rapidamente um determinado elemento ou livro com o qual você queira trabalhar. Isso é o que a navegação ou a navegação é importante. Portanto, Next é a história. Então, se você fizer coisas como mudar a cor ou basicamente se você fizer alguma coisa, ela estará na guia Histórico e você poderá vê-la bem aqui, desde o início, quando começamos a editar, se mudarmos a preferência do usuário para o tema da interface do usuário de luz, do nosso automático, muito escuro, você pode ver que ele está bem ali. Adicionamos uma imagem, atingimos o título da página para que você possa facilmente entrar aqui agora e reverter qualquer uma dessas ações. E então você tem revisões. As revisões são um pouco mais, O que é agora? Um pouco mais robusto. Normalmente, nas revisões, é aqui que depois de atualizar e salvar sua página, você verá essas alterações em sua visão paradas. Então ele é um pouco mais robusto e ações. Então essa é a gordura. E então aqui, você tem o modo responsivo. Você clica aqui. Agora você pode escolher a visualização da área de trabalho, visualização do tablet ou a visualização móvel. E o fino é que você pode até se tornar muito, muito, muito específico com a largura da tela. Então, digamos, por exemplo, se eu escolhi a tabela aqui você verá essas alças para a esquerda e para a direita. Você pode realmente se mover para uma determinada dimensão. E, claro, OPIA, você terá a largura e a altura. Se você tiver um tipo específico de dispositivo que deseja ver como você definiu será semelhante no dispositivo específico. Nós dimensões muito especificamente. Você pode entrar aqui e alterar as dimensões da largura , bem como a altura. Mas vou voltar, mudar para a área de trabalho e depois dividir aqui. Você pode visualizar suas alterações depois de fazê-las. E, finalmente, você pode atualizar toda a luz em Opções de salvamento. Você pode salvar como rascunho ou salvar como um fio de modelo. Como modelo significa que você pode reutilizar exatamente o mesmo conteúdo em outra página. Então, isso é basicamente como um detalhamento de como o elementar caminha nos bastidores, a interface do usuário, como adicionar elementos. Novamente, não se preocupe se parecer muito, muito avassalador, o Azure começa a andar com elementar. Vai se tornar muito fácil para você trabalhar. Isso era basicamente um curso intensivo na interface do usuário elementar. Obrigado por assistir. Junte-se a mim na próxima aula, agora começaremos a definir nossas variáveis globais. Vejo você então. 5. : Eu só quero passar mais alguns minutos para orientá-lo pelos conceitos gerais de seções, colunas, bem como elementos e padrões e margens. Como eu mostrei a você anteriormente. Se você quiser adicionar um elemento, basta arrastar do lado esquerdo e seguida, ele simplesmente soltá-lo no slide. Agora a coisa é automaticamente sempre que você estiver adicionando elementos com Elementor, uma seção e economia serão criadas para esse elemento específico. Acabamos de soltar os elementos do editor de texto. E agora você notaria aqui em cima nós temos esta linha azul aqui. Esta será esta seção segurando a coluna que está mantendo a edição de texto. Tudo. Observe aqui, você tem esse botão marrom aqui. E se eu passar o mouse sobre ele, ele diz Editar coluna. Agora, esse é o elemento real em si, a ferramenta de edição de texto real. Mais uma vez, a forma como as caminhadas elementares é lá, você terá um elemento, seja uma imagem, vídeo ou botão. E então uma coluna será mantida, conterá esse elemento. Tanto na coluna quanto nos elementos estarão dentro de uma seção. É como uma coluna de seção de estrutura hierárquica , em seguida, o elemento real. Agora, assim como na edição, o elemento em que você terá acesso ao estilo de conteúdo avançado. Você também pode editar a coluna que contém esse elemento. Você pode ver que eu pairei na parte inferior aqui, diz a coluna Editar. Você clica lá. E então você terá acesso ao estilo de layout e avançado. Com o layout, você pode fazer coisas como talvez reduzir o comprimento da coluna. Você pode alterar o alinhamento. Você pode adicionar fluidos de tag HTML. Você pode estilizar a coluna e queremos adicionar um fundo preto como em um fundo vermelho. E você quer adicionar uma imagem, coisas assim. Para que muitas coisas você possa fazer tudo com a coluna. Agora, se você clicar com o botão direito do mouse no botão Editar coluna, poderá fazer coisas como adicionar uma nova coluna, coluna duplicada. Você pode até copiar e colar o estilo. Talvez você tenha adicionado um fundo preto, altere o estilo da fonte do texto e deseja reutilizar esse estilo, basta copiar o estilo e, em seguida, você pode perfurar o estilo dele em outro lugar. O mesmo acontece com esta seção aqui também. Se eu clicar no botão Editar seção aqui. Agora você vê que tenho acesso ao estilo de layout avançado. Como com o layout, posso mudar isso para largura total. Talvez eu possa mudar o tamanho ou o comprimento da largura nua, muito, muito ampla disponibilidade agora vou, posso mudar a altura também se eu quisesse. Posso fazer muitas coisas. O mesmo acontece com o estilo dele. Mais uma vez, posso adicionar uma cor de fundo. Se eu quisesse. Posso fazer várias coisas, como adicionar efeitos de movimento e assim por diante. Assim como no ambiente da coluna, clique no botão de edição da seção aqui. Você pode sentar e fazer coisas como seção de edição e eu posso duplicar. Posso até salvar como um modelo sobre o qual falaremos quando estivermos usando o Elementor Pro. Agora, deixe-me falar rapidamente com você sobre o conceito de margens e padrões porque isso vai ser muito, muito, muito importante. Agora, eu tenho uma seção aqui segurando este editor de texto escreve. O que vou fazer é adicionar uma imagem em outra seção. Lambdas rapidamente escolhe uma imagem para caminhar. Deixe-me ir à minha biblioteca de mídia. Deixe-me escolher essa imagem aqui. Agora, dê uma olhada nisso. Deixe-me adicionar uma cor de fundo à seção aqui. Não se preocupe, vou te mostrar tudo isso um pouco mais tarde. Tudo bem. O que exatamente são as margens? margens são usadas para adicionar espaço entre as seções. Então, neste momento, temos uma seção aqui segurando este editor de texto com o fundo vermelho teria outra seção aqui segurando a imagem. Se eu quisesse criar muito espaço entre esses dois, eu poderia realmente usar um elemento aqui chamado elemento espaçador. Você pode dizer espaçador conjugado e depois soltá-lo entre essas duas seções. Mas outra maneira de fazer isso seria ir para qualquer uma dessas seções. Vou para a primeira seção aqui. Vou para o Avançado e uma variedade de margem tem. Agora, observe que, por padrão, você pode adicionar margens e padrões a todos os quatro lados de uma seção à esquerda, direita, superior e inferior, direita. Agora, se eu fosse adicionar uma margem para cima ou inferior, você pode ver que eles estão acorrentados, que significa que o que você adicionar ao topo, ela também será adicionada à parte inferior. Se você quiser adicionar valores para um lado específico, você deseja começar de 0. Primeiro de tudo, Zero. Você vem aqui e então você pode ver que pode desvincular os valores. Então, agora, você pode simplesmente adicionar para cima são as margens direita e esquerda para elementar são definidas como auto por padrão, você não pode fazer um engenhoso lá. Mas agora observe que se eu começar a adicionar margens na parte inferior da primeira seção, observe que a seção segurando a imagem não está sendo empurrada para baixo. Isso porque estou criando espaço entre esta primeira seção e essa segunda seção. Além disso, se eu quisesse, eu poderia fazer o inverso para a segunda seção. Posso ir para a seção Editar aqui perto da segunda, ir para Avançado. O Unlink se desenvolve. E agora, em vez de um imaginado na parte inferior, posso adicionar no topo. Então agora você pode ver que estamos empurrando esta seção segurando a imagem para baixo a partir da primeira seção que diz o que as margens são úteis. Eles são úteis para criar espaçamento entre seções. Um dos padrões, porque eles têm padrões. Os padrões são usados para criar espaço entre um elemento e sua borda ou sua coluna. Por exemplo, vou usar o editor de texto aqui. Tudo bem, então vou entrar lá. Vou para o Advanced. E agora aqui, você pode ver que eu tenho o padrão disponível. Vou desvincular os valores. E agora, se eu começar a adicionar preenchimento aqui, você pode ver que estou criando espaço entre o editor de texto e sua própria seção aqui na parte superior. Eu posso ir para o fundo, fazer exatamente a mesma coisa também. Então você pode ver agora que estou basicamente criando espaço para meus textos, uma ferramenta dentro de sua própria seção. É para isso que os padrões são usados. Eles usam para criar espaço para elementos dentro de sua própria coluna ou seção. Isso é basicamente o que os padrões são úteis. Então essa é a diferença entre as margens são padrões. margens são usadas para criar espaço entre as seções. Os padrões são usados para criar espaço entre uma seção e o elemento contido dentro dela. Espero que agora você tenha uma boa compreensão do que nossas margens e redemoinhos aumentam. Mais uma fina rápida, você também pode reorganizar seções simplesmente clicando e arrastando. Se eu quisesse mover a seção segurando a margem, também estou segurando a imagem no topo. Basta clicar e segurar o botão Editar seção. Agora você pode ver que está me permitindo mexer. Eu posso movê-lo todo o caminho até o nariz. Aguarde até que o traço azul ou o BlueLine apareça e, em seguida, basta liberar uma introdução do dia da luz da imagem. Você tem essa opção aqui com elementos o que permite reorganizar nossas seções. Você também pode reorganizar colunas e eu estou duplicando rapidamente essa coluna aqui. Deixe-me mudar essa imagem rapidamente apenas para lhe dar uma demonstração muito, muito rápida, deixe-me escolher esta imagem. Então, posso simplesmente clicar onde você tem o botão Editar coluna. E então nós organizamos. Eles podem ver onde o alcance de volta como você pode ver. Então você tem essa opção disponível com elementar também. Portanto, não se preocupe quando começamos a andar com elementos ou você começa, ele começa a descobrir muito mais recursos e funcionalidades dos elementos. E obrigado por assistir. Vejo você na próxima aula. 6. Configurando os valores globais: Bem-vindo de volta. Então, agora que mostrei uma breve introdução à interface do usuário do Elementor. Vamos dar uma olhada nas variáveis globais e como você pode definir os tipos de famílias de fontes que deseja usar, as cores e assim por diante. Agora, na mesma interface da interface do usuário aqui, você vai para o botão Menu aqui e agora vá para as configurações do seu site. Certo? Agora aqui está o magro. Poderíamos definir cores globais, cores que podem ser usadas em todo o nosso site para fazer isso, clicar em cores globais. Agora, essa seria a cláusula padrão de que você teria um azul, cinza escuro, cinza claro e depois limão. Então isso seria para o seu primário nossa cabeça faz seus cabeçalhos secundários, seus textos, isso seria um corpo regular assume um sotaque geralmente é para links ou botões. Agora, o que eu vou fazer é mudar isso para algumas roupas que tenho aqui. Agora, para alterá-los, vou clicar dentro. E se for primário, vou com branco. Ok, então por que vai ser fff, FFF seis Fs é basicamente para White Album minha principal. E então, para o secundário, vamos realmente manter isso como está. Mas então, para mensagens, vamos com preto. O preto vai ser seis zeros. Então, 123456, estes são o que chamamos de valores hexadecimais. Ok, então seis zeros para preto, seis F's para branco. E, por último, para os acentos, que seriam para os links. Eu tenho minha cor aqui. Deixe-me pegar rapidamente a cor da minha outra tela. Venha aqui e cole isso. Então é um tom de laranja, é basicamente um DECA 570. Agora, você pode decidir adicionar suas próprias cores personalizadas também. Ele pode vir aqui, clique em Adicionar cor. Você pode nomear este como se qualquer coisa pudesse dar uma curtida ou digamos que a cor especial especial. Vou te mostrar como isso funciona um pouco mais tarde. Vamos chamar isso de colo especial. E aqui vou clicar na caixa. E vamos escolher algo avermelhado. Então eu tenho minha própria cor personalizada chamada coluna especial. Vou seguir em frente agora e simplesmente atualizá-lo. Definimos nossa cláusula global, que, que podemos usar em todo o site. Mas também temos acesso a fontes globais. As famílias de fontes são muito, muito, muito importantes. Portanto, verifique este item. Vou descer fontes globais. O primeiro aqui será primário. Isso seria para seus cabeçalhos primários. Agora vamos dar uma olhada na minha outra tela aqui, porque eu escolhi ir para a família de fontes de cidadãos ir com Oswald. Oswald é uma fonte específica do Google que eu gosto. Vou escolher Oswald para a família da fonte. O peso aqui vai ser 700s, haverá um pouco mais pesado. Então vou transformar esses dois maiúsculas. E então deixarei os outros altura da linha, espaçamento entre letras, que espaçamento, e assim por diante o deslizamento aqueles como estão para cima. O próximo será o secundário. E depois secundário de novo, vou com Oswald. Também tudo para secundário. E então o tamanho aqui, eu realmente vou usar nossos 20 pixels porque haverá pixels um pouco menores. E então os pesos aqui seriam nossos 600. E lá vai você. Isso é para o secundário. E, em seguida, texto, este será o nosso texto normal. Na verdade, vou mudar de famílias de nossas duas novas areias D2. Então, vamos procurar uma nova porta. Eu disse, desculpe, não é novo veto Nieto. Sinto muito. Até use meus óculos. Ainda não consigo ver corretamente. Milhões de sensores serão texto completo. E então o tamanho aqui seria 18 pixels e a largura será de 500. E isso é por último, mas não menos importante, nós temos os sotaques. Acents vai ser Roboto. Vamos ficar com Roboto para esse e depois esperar até que seja 500. Então, não estamos mudando nada aqui. Vou seguir em frente agora e atualizar. O ponto aqui é que podemos realmente usar essas famílias de fontes, essas cores de fonte em qualquer lugar do nosso site. Como exemplo. Deixe-me fechar isso e deixe-me ir em frente agora e adicionar um título. Então, vou clicar em arrastar, soltar a cabeça e os elementos aqui. Agora dê uma olhada nisso. Se eu fosse para o Estilo, tudo bem, aqui você pode ver que temos a opção de tipografia para escolher que tipo de topografia queria trabalhar com toda a cor do texto. Agora dê uma olhada nestes. Se eu clicar neste ícone aqui, neste ícone de aparência global, eu clico lá. Agora veja que podemos escolher entre as cinco opções, textos primários, secundários, sotaque e até mesmo a cor especial que adicionamos. É assim que você pode fazer uso da oitava causada global apenas definir as mesmas metas com o clique tipográfico aqui novamente. E agora posso optar por ir com os textos primários, textos secundários, textos regulares ou o sotaque. É assim que isso funcionaria. Mas deixe-me mostrar algo ainda mais interessante. Se eu voltar às configurações do site, logo abaixo do sistema de design, você tem seu estilo de tema. Se eu clicar em tipografia aqui, é aqui que agora podemos definir famílias de fontes específicas, cores, tamanhos para nossa tag H1 ou H2, h3 e assim por diante. Mas para que possamos usar esse sistema específico, precisaremos desativar as cores e fontes padrão na página de configurações. Lembre-se, deixe-me ir rapidamente em frente, atualize isso. Vou mostrar do que estou falando. Se voltarmos para o back-end, deixe-me vir aqui, vá para Sair to Dashboard. Se você voltar aos seus conjuntos elementares nas configurações do Elementor, aqui, teremos que desativar as cores e fontes padrão para fazer uso desse novo editor de estilo de tema. Então, vou marcar essas duas caixas. Salve essas alterações. E agora deixe-me fechar isso. Deixe-me atualizar esta página novamente. Agora dê uma olhada nisso. Se eu voltar aqui, vá para Configurações do site e acompanhe a topografia nativa. Agora eu sou capaz de definir uma cor de texto específica para o corpo, tamanho técnico, para os links e assim por diante. Além disso, se eu voltar, se eu voltar ao back-end do laboratório regular e depois fechar isso e depois adicionar meu título novamente aqui. Se eu for para o estilo, certo, você não vai para a cor do texto. Ainda tenho acesso às cores chateadas Alia. E também para a tipografia, ainda tenho acesso aos textos secundários. Basicamente, as mesmas opções. Eu disse que é, você terá acesso a eles. Tão litigioso básico. Volte para o set que mais uma vez e então eu só queria tratá-lo. Ainda tenho acesso a essas opções. Vamos voltar à tipografia do estilo do tema. Tenho minhas opções aqui que já defini. Então, o que vou fazer aqui é isso. Certo, vamos primeiro escolher a tipografia para o nosso corpo. Então aqui para o corpo, vou aqui para a coluna de texto. Vamos escolher nosso preto que será para o texto. Para a tipografia. Vou simplesmente ir com mensagens de texto. Lembre-se que dissemos textos newtonianos para areias, tamanho de 18 pixels e depois o peso de 500. Isso vai ser para o corpo. Bom. Agora, para o link. E basta verificar o que tenho aqui para o link. Vou com a cor, a tipografia da cor do sotaque. Vou com sotaque também. Agora, para a idade avisa, ok, isso vai ser um pouco diferente para os F1. O que eu fiz aqui é para a família chateada que eu quero dar o padrão. Mas o tamanho aqui será de 100 pixels. Muito, muito, muito, muito, muito massivo. E então o peso aqui será 600. Dificilmente vamos usar os H em nosso site, então não se preocupe com o tamanho enorme. Vou manter esse em 100. Agora vamos para o H2. Para H2, eu tenho o tamanho aqui. Vou clicar em tipografia. O tamanho aqui, eu configurei até 32 pixels. 32 pixels, e então eu tenho o peso aqui para ser 700. Basicamente, este é o cabeçalho principal com o qual vamos trabalhar. Na verdade, minhas desculpas, eu disse para 36, desculpe, seis por seis pixels para H2. Então, para os três anos, confira isso. Para os três anos, a cor aqui será a cor do acento, a cor laranja. Então o tamanho aqui será de 22 pixels. Então a família aqui será primária, que também seria antigo limite também disse a família de fontes primárias aqui para ser nosso Oswald Eu serei para o H12. Então basicamente h dois, teríamos 36 tamanhos e pixels, a família de Oswald. Haverá maiúsculas e depois 708 e esperas. E finalmente, eu também disse para o H4, mesma cor seria a cor axônio. E então o tamanho aqui será nossos 18 pixels. Ok, então vamos escolher Oswald novamente. Então o tamanho aqui seria nossos 18 pixels, do mesmo tamanho que nossos textos corporais. E depois mais um. O último, muito último será a idade de cinco anos, o que eu realmente não acho que vamos andar com esse múltiplo legislado H5 e, em seguida, a topografia seria a mesma secundária ou primária se você quero. E então o tamanho aqui seria de 16 pixels. Lá vai você. Então, vou seguir em frente agora e simplesmente atualizar isso. E é isso agora, eu sei que este foi um vídeo muito, muito longo comigo falando sobre empréstimos de carro e outras coisas. Mas isso aponta aqui é que em nosso site, se onde quer que adicione um H2 automaticamente, ele herdará os valores daqui. Então nosso H2 é agora, teria a família de fontes de Oswald, tamanho de 36 pixels e, em seguida, um peso de 700. E então o mesmo acontece com a idade de três, quatro e assim por diante. Mou basicamente configurou os valores globais caem ou eu bati em nós, bem como nossos textos corporais. Mas também, dissemos que as cores globais, que podemos usar repetidamente. Dissemos que cinco deles sotaque de textos primários e secundários, especialmente quando não uso o ecologista especial In, queriam mostrar como você pode áudio em cores personalizadas adicionais, se quiser. Mas, como basicamente estão configurando nossas famílias de fontes globais, cores e tamanhos. Alemanha, próximo vídeo onde agora começaremos a construir o cabeçalho cheio de site. 7. Construindo nossos cabeçalhos personalizados: Tudo bem, agora vamos em frente e construir o cabeçalho para o nosso site. E isso é exatamente o que parece agora, e não parece nada bom. Isso é o que estamos tentando realizar. Você pode ver o cabeçalho aqui, temos o logotipo à esquerda e, em seguida, temos o menu principal à direita. No entanto, mostre algo como se eu fosse para outra página, digamos que a página Sobre como exemplo, aqui você pode ver que o cabeçalho é diferente. Este tem um fundo preto, enquanto o cabeçalho na página inicial não tem nenhum fundo, é simplesmente mesclado com a imagem de fundo aqui, basicamente, precisamos criar 82 cabeçalhos diferentes. Um especificamente para a página inicial e depois o outro para o resto de nossas páginas. Agora, como fazemos isso? Antes de mostrar isso, deixe-me arrastar o site de demonstração para longe. Agora, antes de mostrar como fazer isso, quero mostrar outra coisa. Se eu fosse para Editar com Elementor, fui para as configurações do site. Além de poder definir seus telefones globais e suas cores e tudo mais, você também pode fazer alterações identidade do site aqui, temos Configurações. Se eu clicar dentro da densidade aqui, também podemos alterar o nome do site. Vou chamar minha viagem de passaporte. Esse é o nome do site. E então o slogan será quando viajar encontrar aventura. Para o logotipo, vou escolher o logotipo aqui. Vamos inserir esse. E então, para o Phi de ícone, vou escolher a imagem de TI com a que o fundo verde. Vou inserir isso. E lá vai você, temos a identidade do nosso site. Agora você também pode vir aqui para o cabeçalho e fazer diferentes tipos de alterações, você pode optar por ocultar o logotipo, mostrar o slogan, aumentar a largura do conteúdo ou reduzir a largura do conteúdo depende de você. Mas como vamos criar nossos próprios cabeçalhos personalizados, não precisamos mudar nada aqui. Então, vou seguir em frente agora e simplesmente atualizar. E então vou verificar isso. Certo, vou voltar para o backend Sair to Dashboard. E agora vamos criar nosso cabeçalho. Vou vir aqui para nossos pais. Aqui você verá elementos ou alimentos prontos são construtores. Isso é do plugin. Vou clicar lá. E agora vou clicar em Adicionar novo. E agora vamos chamar isso de cabeçalho da página inicial. Então aqui, onde você tem o tipo de modelo. Vamos escolher o cabeçalho, e então podemos escolher, ok, onde gostaríamos de exibir esse cabeçalho? Como será especificamente para a primeira página, vou escolher aqui você tem alvos específicos. Vou escolher páginas específicas e convidar aqui simplesmente digitar em casa. E lá vai você. Agora, neste cabeçalho específico, só será exibido na página inicial. E, em seguida, para funções de usuário aqui, você pode escolher, ok, talvez você queira exibir esses cabeçalho apenas para que os usuários conectados sejam usuários desconectados ou edições ou você tem muita flexibilidade. Só vou manter isso em branco porque queríamos ser para todos. Agora aqui, você tem esse layout habilitado para opção para nós modelo. Agora, a coisa com o Elementor é que, além do modelo padrão e um fornecido pelo seu tema, elementos, que oferece dois modelos personalizados. Um deles é chamado de dados da tela elementar, largura total, mais simples, significa que seu conteúdo pode se estender até as bordas da tela. Então, basicamente, vai a largura total que eu sou como se nenhuma margem fosse padrão. Elemental Canada como implementos que você não terá nenhum cabeçalho ou rodapé. É basicamente um elemento em branco ou nossos modelos, não vamos andar com um modelo de tela. Portanto, realmente não há necessidade de habilitar esse layout, mas vou escolher os elementos do modelo de largura total. Vamos em frente agora e clique em Publicar. Agora vou clicar em editar com o Elementor. Então, o que estamos tentando alcançar aqui é isso, deixe-me trazer de volta o site de demonstração. Basicamente, será uma seção com duas colunas. O da esquerda, a coluna esquerda teremos o logotipo, enquanto a coluna à direita, teremos o menu principal e também queremos que a coluna na luz que contém o menu principal tenha mais largura . Então confira isso. Certo, aqui, vou clicar no botão Plus aqui. E agora podemos escolher nossa estrutura. E eu vou escolher esta divisão aqui. Esta terá, a primeira coluna terá um terço da seção inteira, enquanto a segunda coluna terá dois terços. Então, aqui, já que estamos editando a seção, como você pode ver, para a largura do conteúdo, poderíamos realmente ir a toda a largura se você quisesse. Mas vou usar a caixa e vou escolher 1240 pixels. Esta é apenas minha preferência pessoal. Eu adorei 1240 pixels. Agora, aqui para a primeira coluna, vou clicar dentro. Vou rolar todo o caminho até aqui. E estamos tentando adicionar o logotipo. Então, vou adicionar o logotipo do site. Clique em, solte-o para dentro. E agora temos nosso logotipo. Agora você pode ver porque o logotipo tem texto branco e este é um fundo branco. Mas apenas tenha paciência comigo. Certo, vou escolher. O tamanho da imagem aqui eu vou ficar cheio por enquanto. Em seguida, vamos seguir em frente e clicar no botão Editar desta seção. Tudo bem, então eu cliquei lá. Vou voltar ao estilo. E então ele foi para onde você começou a digitar. Vou escolher o clássico. Agora vou escolher a cor preta. Então agora você pode realmente ver o logotipo, certo? Certo. Agora vamos para a segunda coluna. Vamos adicionar nossos elementos de navegação. Então, escrevendo no menu de navegação, clique em arrastar, drogue isso dentro. E então você pode ver o menu principal selecionado por padrão. No entanto, quando é para fazer um grande número de alterações, observe aqui que permanecerá no menu principal. O texto está em letras maiúsculas, está em branco. Também está alinhado à direita e também no centro. Então, precisamos fazer por finas. Vamos voltar aqui. A primeira coisa que vou fazer é ao editar o menu de navegação aqui, você tem layout clicando lá. E agora vamos escolher alinhar à direita. Como você pode ver agora, está à direita. Agora vamos passar para o estilo. E vamos vir aqui para tipografia. Clique no botão Editar. Com transformação não peluda, escolha maiúsculas. Certo? E, em seguida, para a cor do texto, vamos clicar no ícone global ali e, em seguida, escolher principalmente para Branco. Bom. Mas agora, como alinhamos os itens do menu no meio verticalmente? O que você quer fazer aqui é clicar no Editar potência da coluna aqui, neste botão específico aqui, você clica lá. E agora aqui você pode ver que temos alinhamento vertical. Vamos escolher o meio. Lá vai você. É isso. Mas ainda não terminamos. Para o logotipo. Vamos clicar no botão Editar para o logotipo do site. E então o alinhamento aqui, vamos para a esquerda. Como se você não conseguisse ver a diferença ainda, mas apenas fique comigo. Vamos escolher esse para a esquerda. Ok, vamos em frente agora e atualizamos. Agora vamos dar uma olhada no que temos. Veja a página. E lá vai você. Agora você pode ver nossa página inicial tem esse cabeçalho específico aqui, mas depois evolui para ir para, digamos que a página Sobre como exemplo, você pode ver que não temos esse cabeçalho. Se quiser ir para a página de contato. Como exemplo, você pode ver que não temos esse cabeçalho. Então, aqui, a página inicial agora tem esse folheto específico com o fundo preto, o logotipo e, em seguida, os itens do menu. Agora, para arredondar isso, eu realmente vou fazer algumas mudanças. Vamos voltar para a seção. Certo, e eu sei que disse que a largura do conteúdo era de 1240 pixels, mas fiz alguns testes adicionais, e acho que é melhor irmos com toda a largura. Então, vamos com largura total por enquanto. Então, esta coluna, a que está segurando o logotipo, vamos reduzi-lo para 2525% por cento. Enquanto a coluna segurando os itens manuais terá 75%. Então, vamos também fazer uma alteração no logotipo. Vou clicar em Editar logotipo. Vamos para o estilo. E então, para a largura máxima, vamos definir isso para 75%. E uma pergunta que você pode ter é por que, obviamente, a largura máxima e não a largura real. Aqui está a coisa. Quando você define a largura do logotipo, o logotipo sempre terá essa largura. Nós sem Deus, do tamanho da tela. Você está trabalhando com largura máxima. Você está basicamente dizendo: Ei, o logotipo nunca deve exceder essa largura. Em seguida, em situações em que o tamanho da tela não é grande o suficiente documentado, a largura total do logotipo reduz o tamanho da largura basicamente máxima é muito melhor para o design responsivo. E você sempre quer ser responsivo. Então, vamos definir isso para 75 pixels. E agora, se atualizarmos, se dermos uma olhada no nosso cabeçalho, você pode ver agora que ele se parece muito parecido com o que temos aqui no site de demonstração. A última coisa a fazer é duplicar esse cabeçalho para o segundo cabeçalho. Então, basicamente, ele tem o que vamos fazer. Ok, bem, vou voltar para o backend. Em vez de criar o segundo cabeçalho para o resto do site, simplesmente entraremos aqui e, em seguida, você verá duplicatas da EA ou esses são os átomos essenciais duplicados todos. Vou seguir em frente agora e simplesmente duplicar o cabeçalho da página inicial. Agora você verá rascunhos Elementor. Vamos em frente e clicarei em Editar. E então veremos algumas mudanças aqui. Vamos chamar isso de cabeçalho global. Você pode dar qualquer outro nome que quiser, mas vou chamar esse cabeçalho global. E então aqui, pep de modelos, Sim, é o cabeçalho. Em seguida, a exibição está ligada. Vamos com o site inteiro. Mas então, para estar no lado seguro, vou entrar aqui e dizer adicionar regra de exclusão. Estamos dizendo, Ei, não exiba este na página inicial aqui embaixo. Ele tem uma página específica. Vou entrar aqui e simplesmente digitar em casa, certificando-se de que esse cabeçalho nunca será exibido na página inicial. Ele só será exibido em todo o site. E lá vai você. Então modele largura total também. Vamos em frente agora e clique em Publicar. E lá vai você. Então, só para voltar aqui, vamos atualizar esta página. Então esse é o cabeçalho da página inicial. Mas agora dê uma olhada nisso. Ok, se eu fosse para qualquer outra página, digamos que a página Sobre como exemplo. Agora, você verá que o cabeçalho duplicado não está sendo exibido. Vamos para a página Artigos também. Você pode ver novamente, o cabeçalho duplicado não está sendo exibido, apesar do fato de termos dito que o cabeçalho duplicado para mostrar em todas as páginas, exceto na página inicial, o que exatamente está acontecendo aqui. E acredite em mim, levei várias horas. Apenas a China descobre exatamente por que isso não estava funcionando, mas eu descobri. O que você quer fazer é voltar para o cabeçalho duplicado aqui. Este é o hit duplicado a cada criado. O que você quer fazer é isso, ok, apenas tente iniciar, na verdade, deixe-nos voltar para o back-end para que você não fique confuso. Tudo bem, daqui, daqui, basta clicar em editar com Elementor. Edite com Elementor. E então o que você vai fazer é aqui, apenas iniciar qualquer tipo de mudança. Digamos que você adicione os elementos de cabeçalho aqui, por exemplo, ok, solte isso lá. Agora você vê que o botão de atualização está disponível? Certo, vou voltar aqui, fechar isso. O ponto principal aqui é que você deseja fazer algum tipo de alteração no cabeçalho para que este botão Atualizar descida seja acionado. Agora podemos atualizar. E agora ele deve funcionar. Então, se for solicitado a voltar para a minha página de artigos aqui e agora atualizar. Agora você pode ver que o cabeçalho duplicado agora está mostrando que volto para a página inicial, é exatamente o mesmo cabeçalho. Vou para a página Sobre. E, claro, é exatamente o mesmo cabeçalho também. Isso é exatamente o que você deve fazer sempre que tentar duplicar seus cabeçalhos e rodapés nas duplicatas. Basta entrar em editar com Elementor, adicionar qualquer elemento, remover esse elemento apenas para acionar o botão de atualização. Atualizar. E agora esse novo cabeçalho ou rodapé duplicado agora estará em pleno efeito. Então é isso para o vídeo que criamos nossos dois cabeçalhos. Obrigado por assistir e verei você na próxima aula. 8. Construindo nosso rodapé global: No vídeo anterior, criamos com sucesso nossos dois cabeçalhos, um para a página inicial e outro para o resto do site. Mas agora vamos criar nosso rodapé global. E a boa notícia aqui é que só precisamos criar um rodapé e isso é exatamente o que estamos tentando criar. Vamos ter essa imagem aqui à esquerda e, em seguida, algumas informações de contato, ícones de mídia social. E então o direito autoral lateral basicamente aqui embaixo na parte inferior. Vamos seguir em frente e fazer isso rapidamente. Vou clicar em Adicionar novo. E vamos chamar isso de rodapé global. Selecione a opção aqui será Rodapé e, claro, será exibida porque todo o site. E mudaremos o modelo para largura total. E lá vamos nós. Vamos em frente Publicar. E agora vamos editar com o Elementor. Agora, eu quero que você preste muita atenção a uma enorme diferença entre o cabeçalho e o rodapé e o cabeçalho que temos aqui. Basicamente, temos apenas duas colunas. Aquele à esquerda segurando o logotipo, o da direita segurando o código, o menu principal. Mas para o rodapé, observe que é um pouco diferente. Sim, ainda temos duas colunas, uma segurando esta imagem, a outra segurando as informações de contato. Mas aqui em baixo, esse texto de direitos autorais é, na verdade, uma terceira coluna. Não está abaixo desta primeira coluna aqui. Na verdade, é uma coluna separada por conta própria. Para criar esse tipo de seção de várias colunas, vamos fazer uso de um novo elemento chamado seção de e-mail no questionário. Na verdade, é o primeiro elemento que você tem, este aqui em uma seção. Vou clicar em arrastar e depois soltá-lo dentro. Ok, então primeiro as coisas, porém, é que vou seguir em frente e editar a primeira seção. Se você está tendo problemas para clicar na seção dos pais, basicamente, você sempre pode usar seu navegador aqui e você pode ver aqui mesmo que temos esta coluna de seção e depois interseção. Então, vou clicar na seção agora mesmo. Vamos alterar a largura do conteúdo aqui para largura total. E então a lacuna das colunas. vamos escolher nenhuma lacuna. A razão é que, se você prestar muita atenção, você pode ver agora a maneira como você tem a imagem, não há espaço, não há margens de preenchimento qualquer. A imagem está diretamente ali na borda da parte inferior. É aí que estamos escolhendo nossa lacuna de nós aqui. Não queremos ter nenhuma lacuna. O mesmo vai acontecer com a seção interna também. Mas antes de saltarmos lá, vamos adicionar uma cor de fundo. Vou para o tipo de plano de fundo. E é claro que vamos escolher são pretos. Então, vou ter um fundo preto para o rodapé. Em seguida, agora serão as seções ina. Vou clicar na seção interna aqui a partir da navegação para novamente, vamos ir para toda a largura. E, em seguida, colunas, colunas lacunas aqui. Vamos dizer que não há lacuna também. Tudo bem, incrível. Agora vamos seguir em frente e lidar com a primeira coluna aqui, que terá nossa imagem. Então, vou soltar o elemento de imagem lá. Escolha esta imagem aqui. E caso você esteja se perguntando que isso é realmente no Perú. É um lugar chamado Horeca kina ou que é Cocina. Não sei exatamente como é baseado em finanças, basicamente como uma área desértica. Você pode fazer a placa de som e, e assim por diante. Lugar incrível para conferir. E vou ir em frente e mudar este para tolo. Mas aqui está o mais fino, certo? Vamos mudar as larguras da coluna. Vamos fazer a primeira coluna aqui. Na verdade, vamos torná-lo um pouco mais amplo. Então, vamos até 63 pixels, 63% na verdade, então 63% e depois 37% para a segunda coluna. Mas vamos fazer uma alteração na imagem. A imagem é muito alta. Então, vamos em frente e edite a imagem. E então vamos aqui para estilizar e estamos aqui, vou escolher 450 pixels. Então, é quase alto o suficiente e grande o suficiente. Ok, essa é a imagem ali mesmo. Agora, estou apenas fechando o navegador. Para a segunda coluna, vamos adicionar uma série de elementos diferentes. O primeiro aqui seria o elemento de cabeçalho, e este será nossos contatos. Vou digitar tudo em letras maiúsculas. Contato. Vai ser um H2. Pelo estilo da sabedoria. Vamos para a cor do texto e simplesmente escolhemos primário. Agora vamos escolher outro cabeçalho. Mais uma vez. Vou deixá-lo logo abaixo do contato ali mesmo. Este vai ser um telefone. Mais uma vez, letras maiúsculas para telefone. No entanto, vamos fazer desta uma idade de três anos. Na verdade, vamos torná-lo um H4. Vamos torná-lo um H4 e vamos adicionar algumas informações. Então, o que vou fazer aqui é simplesmente clicar com o botão direito do mouse e , em seguida, simplesmente duplicar. E agora vamos fazer desta uma idade de cinco anos. O número de telefone real será um h5. Então, vamos mudar o número aqui para 090 espaço 645, espaço 3417. Esse será o número de telefone. E vou voltar ao estilo e à topografia. Na verdade, vamos escolher textos. Eu prefiro esse padrão de texto, então vamos escolher esse. Então também vamos duplicar o telefone. Mais uma vez, arraste-o aqui logo abaixo do número de telefone. Também vamos duplicar o número de telefone em si. Certo, e depois arraste o telefone NIF. Agora, opa, desculpe, isso foi até lá em cima. Vamos trazê-lo de volta aqui. Ok, agora vamos editar o telefone, o segundo telefone aqui. Vamos mudar este para e-mail. Isso é basicamente como andar inteligente. Basta duplicar sempre que puder e simplesmente faça as edições necessárias. Agora vamos editar o número de telefone. Vamos mudar o e-mail. Meu e-mail é Alex. As portas de passagem se tornarão não parecem corretas. Alex no passaporte travel.com. Certo. Sim. Isso está correto. E então, por último, mas não menos importante, vamos ter um endereço. Vamos também duplicar o e-mail, adicionando mais uma vez. Vamos arrastar, soltar isso aqui. Altere o e-mail também. Endereço IP. Agora, para o endereço real, vamos usar um editor de texto em oposição a um oculto, porque haverá várias linhas de textos que vão soltar o editor de texto ali mesmo. Eu tenho um endereço muito interessado aqui. Não sei se este é realmente um endereço real. Não me lembro. Mas cabe em r2, Emile Zola. Agora vou pressionar Shift Enter, não apenas anti, porque se você pressionar Enter você terá um espaço duplo, use a terá um espaço duplo, tecla Shift e depois enter. Então você tem um espaçamento de linha única. E agora vou digitar 609002, leon, Shift Enter novamente. E então vamos digitar na França todos k. e vamos passar para a tipografia de estilo. Vamos com mensagens de texto. E, claro, a cor do texto será primária. E lá vai você. E por último, mas não menos importante, teremos nossos ícones de mídia social. Muito, muito, muito importante. As mídias sociais estarão aqui em baixo no geral. Vamos adicionar uma mídia social. E, claro, para o Facebook, bem, vamos mudar a cor de código eficiente para personalizado. A cor primária aqui seria branca, a cor secundária seria preta. Basicamente, você terá o fundo branco e, em seguida, o ícone real em si será preto. Se este fosse um site real que você está construindo, é aqui que você adicionaria o link à sua página do Facebook. Isso é para o Facebook. Vamos fazer exatamente a mesma coisa para o Twitter também. Por que será o parâmetro cor preta como uma cor secundária. O último banal é o YouTube ou o traje de cor fúcsia. A cor primária é branca, cólon secundário é preto. E então a forma aqui, vamos mudar sua forma para circular, à direita, e depois alinhamento, eu realmente vou alinhá-la à esquerda. Estamos quase lá. Mas, em seguida, observe que há algum espaçamento, as informações de contato reais e, em seguida, a imagem. O que você vai fazer aqui é que vamos direto aqui para a coluna contém todas essas informações de contato, você clica lá. Vá primeiro, Vertical Align, vamos alinhar ao meio. Em seguida, vá para avançado e, eventualmente, você tem preenchimento. Vou desvincular esses valores juntos porque a coisa sobre isso é, por padrão, qualquer valor que você adicionar ao seu preenchimento, para a parte superior, direita, inferior ou esquerda. Ele duplicará um curso dos três lados restantes. Portanto, não queremos isso, queremos apenas adicionar preenchimento a um lado. Então, vou clicar neste botão aqui para desvincular os valores, caso você não saiba, Padrão basicamente é uma maneira de criar espaço entre seu conteúdo e sua borda. Vamos adicionar preenchimento à esquerda, como você pode ver, com uma aparência muito melhor já. E vou até 40 pixels. Estamos quase lá. Um deles que vamos adicionar agora será os textos de direitos autorais. Então, vou rolar todo o caminho até aqui. Então, aqui mesmo sob seu cabeçalho e rodapé elementar, você vê textos de direitos autorais. Clique em arrastar. E serei muito, muito cuidadoso. Não vamos soltá-lo nesta primeira coluna segurando a imagem. Estamos deixando cair em uma clínica separada considerada linha azul aparecendo, significando isso, ok. Isso vai ser uma coluna separada. Observe agora que o BlueLine só está abaixo da imagem, abaixo da coluna que mantém a imagem. Mas se eu arrastar meu mouse mais para baixo apenas um pouco agora você pode ver a linha azul se estendendo por ambas as colunas. Então agora vou deixar o texto de direitos autorais lá dentro. E lá está ele. cor do texto aqui obviamente será tipografia primária. Vamos usar o texto alinhado ao centro. E, na verdade, vamos passar para a tipografia, um ganho. E vamos tornar este um pouco menor do que o normal. Acho que 16 pixels estão quase certos. Mas também queremos adicionar algum preenchimento também. Então, vamos passar para o avançado. Mais uma vez, vamos desvincular os valores. Vamos adicionar preenchimento de 20 pixels para os dez principais pixels para a parte inferior também. Fizemos bastante. Vamos em frente agora e atualizamos. Vamos ver o que parece. Então, vou até aqui, atualizar a página. E lá vai você. Este é o nosso rodapé ali. Agora eu sei que você pode ver espaços em branco aqui, mas isso é simplesmente porque ainda não temos nenhum conteúdo na página inicial. É por isso que você tem esse espaço em branco. Já adicionei alguns conteúdos à página sobre. Então, isso é mais parecido com o que agora será. Você pode ver que não há mais espaço em branco em um int porque na verdade temos algum conteúdo na página, mas lá está. Agora temos nosso rodapé bem construído com a imagem do Perú, textos de direitos autorais, bem como algumas informações de contato. Obrigado por assistir e, claro , verei você na próxima aula. 9. Adicionando o Banner da página inicial.: Agora que construímos os cabeçalhos e rodapés, agora é hora de criarmos nossa página inicial. E a primeira seção que vamos construir será o banner que você pode ver aqui, temos a imagem de fundo com as árvores tropicais, palmeiras e a praia. E então, claro, os textos, estamos viajando com aventura e, em seguida o botão que diz nosso livro, sua viagem agora. Além disso, é claro, você teria notado que o plano de fundo basicamente se mistura com o cabeçalho. Como fazemos isso? Bem, vamos seguir em frente e editar a página inicial. Vou dizer Editar com Elementor. Bem aqui. Você pode notar que temos basicamente duas colunas, uma em cima, aquela que contém onde viajou significa aventura. E então teremos outra coluna contendo o livro de botões, sua viagem. Agora, o que eu simplesmente vou fazer aqui é isso. Temos um texto de cabeçalho aqui, mas caso você não veja nada, basta arrastar o elemento de cabeçalho e soltá-lo dentro da sua caixa aqui. E eu simplesmente vou dizer onde estamos viajando com aventura. Esse é o slogan principal do site All. E vou fazer este um a um. Mas vamos fazer algumas mudanças na topografia real em si. Então, vamos para o estilo. E para a tipografia aqui, vou mudar a transformação para maiúsculas. E também vamos fazer o peso 900 só para torná-lo muito, muito grosso. E então o estilo também o tornará itálico. Isso é isso para o texto por enquanto. Vamos seguir em frente agora e adicionar a imagem de fundo para esta seção. Então, vou clicar no botão Editar seção aqui. A largura do conteúdo, vamos manter esta caixa, mas depois a largura aqui faremos 1240 pixels. E nossa lista de verificação defende a altura, vamos defini-la para uma altura mínima de mil pixels porque realmente queríamos mostrar o máximo possível dessa imagem de fundo. Então deixe-me fazer isso mil. E agora vamos passar para o estilo, tipo de fundo clássico. E vou escolher a imagem. E vai ser, eu peço desculpas. Na verdade, tenho dois separados aqui por enquanto. Vou excluir a mulher que vai usar, vamos usar a versão grande. Este tem apenas 859 pixels de altura, mas este tem 1274. Então, vamos fazer uso deste. Então, vou inserir isso. E lá vai você. Agora, deixe-me mostrar alguns truques em relação ao posicionamento da sua imagem de fundo. Você tem diferentes tipos de posições no centro, centro, centro esquerdo, centro, direita e assim por diante. Portanto, cabe a você escolher os ângulos de posição ideais para sua imagem de fundo. O meu aqui que eu escolhi vai ser o centro inferior. Aqui você pode realmente ver as palmeiras, a praia também. Portanto, é familiar é a melhor posição. E então, para o tamanho, você tem várias opções aqui, eu vou com cava. A diferença entre Kovach e conter é o mostrador contêiner toda a imagem. conteúdo nem sempre é a melhor opção porque quando você mostra a imagem inteira, se a imagem não for grande o suficiente para toda a tela, ela começará a estudar repetidos. Você pode ver em segundo plano aqui que você meio que tem a imagem se repetindo novamente. Mas com o COVID, você basicamente, você está basicamente dizendo: Ei, tente garantir que a imagem cubra toda a tela. É por isso que escolhi são abordados aqui, mas também adicionarei uma sobreposição de fundo. Então confira isso novamente. Vou voltar na sobreposição. Vou clicar lá. Eu quero, vou fazer é ir para o tipo de fundo como de costume, vamos escolher uma sobreposição preta. E então a opacidade aqui, eu realmente fui com o 0.23. Claro que você pode mudar isso se não quiser usar Zope e 23. Mas agora vamos voltar aos textos reais. Vamos voltar aqui. E, claro, a cor do texto, vamos deixar este branco. E aí está, ok. Também vamos alterar o tamanho também. Então, vou até 120 pixels. E, novamente, isso é totalmente subjetivo. Você pode tornar o seu um pouco maior, um pouco menor. Mas também vamos mudar o alinhamento também. Vamos para o conteúdo. Vamos alinhá-lo ao centro. E aí está, estamos viajando com eventual. E então o que vamos fazer agora seria adicionar nosso botão. Vou arrastar o botão aqui, Element e vou pular logo abaixo do título. Claro que aqui, vamos dizer, reserve sua viagem. Agora. Claro, é aqui que você adicionaria o link para talvez uma página ou um site XNOR, como um dourado ou Booking.com. Se eu fosse sete, faça isso e poderíamos apenas dizer book kin dot com. Vamos fazer isso. Nós podem.com só pela diversão disso. E é claro que vamos alinhá-lo ao centro. O tamanho aqui será médio. Vamos adicionar um ícone também. Ok, então vou escolher a biblioteca de ícones aqui. Vamos procurar avião. Vou escolher muito, minha inserção de urso. Você tem a opção de alterar a posição do ícone para depois ou antes do texto. Queremos manter isso antes. E, em seguida, o espaçamento de ícones. Você também pode adicionar algum espaçamento entre o ícone e a imagem. Então, vou com a AIDS só para dar um pouco de espaçamento. Agora vamos passar para o estilo. É aqui que vamos fazer algumas grandes mudanças. Então, o primeiro que vamos fazer aqui seria a topografia, os pesos dos textos. Haverá 600 e depois se transformarão em maiúsculas. Agora, como este é um link, você notaria que existe a ideia sublinhada, mas não queremos essa. Então eu vou ao Estilo, vou, vou para a declaração e depois escolho nenhuma. Não queremos nenhum dos textos em nenhum dos textos subjacentes lá. Tudo bem, tipografia, cor, texto, cor aqui. Vamos com o branco. Tudo bem? Então, para o botão em si, você terá o tipo de fundo e vamos clicar lá. E nós vamos com a cor clássica aqui seria laranja. Agora vamos definir uma fronteira, bem como sólida. Então o que vamos fazer para a borda é que vamos mudar a cor da borda para a cor laranja também. E então vamos adicionar um raio de borda apenas para fazer os círculos, as bordas apenas um pouco circulares. Vamos com dez, desculpe, vamos com 12 pixels aqui. E é isso. Vou seguir em frente agora e atualizar. E vamos ver o que parece. Vamos sair para o painel. Vamos clicar aqui, ir para a página inicial e lá está. Então, viajando em seu eventual, é claro que temos o botão aqui que se vincularia à nossa booking.com. Mas então, como conseguimos isso? Onde você tem o fundo basicamente se misturando com a cabeça para a Alemanha. Próximo vídeo, onde mostrarei como fazer isso. 10. Misturando o Banner Header e Homepage: Como agora misturamos o banner da página inicial em nosso cabeçalho? Bem, assim como o que temos aqui, o que vamos fazer aqui é isso de novo, vamos voltar aqui e vamos editar a página inicial Hadar. Primeiro de tudo, o que vou fazer é simplesmente remover o fundo preto que não precisávamos mais. Então, vou ao estilo e, em seguida, basta clicar no botão clássico novamente para basicamente redefini-lo de volta ao plano de fundo padrão, que é basicamente a cor branca. Vou atualizar. Tudo bem, vamos ver a página. Vamos voltar ao perfil da página inicial. Tudo bem, agora aqui vou editar a própria página inicial. Então, vou clicar em editar com o Elementor, o primeiro link lá em cima. Agora deixe-me mostrar o poder das margens negativas para editar esta seção segurando o banner. Venha aqui para Advanced, desvincule os valores das margens. E agora vou simplesmente ir até menos 222 pixels. E lá vai você. Assim, conseguimos misturar no cabeçalho com nosso banner de página inicial. Deixe-me atualizar. Vamos ver a página apenas para garantir que ela esteja. Esse é o nosso novo banner de página inicial e Heather, assim. Então, esse é basicamente o poder de adicionar margens negativas. No entanto, deixe-me ressaltar que isso só funciona bem na visualização da sua área de trabalho. O problema é que se eu fosse para a visão responsiva, você verá que uma margem negativa começará a aparecer. E é muito feio. Aqui em baixo, onde você tem o modo responsivo. Se eu mudar este para tablet, é ainda ou ki, tipo, embora agora você possa ver que o menu, o ícone do hambúrguer aqui não está olhando para notas. Mas então, se você for para celular, fica muito, muito ruim. Você pode ver agora que você não vê. O logotipo é basicamente com a viagem de texto em fala e aventura. E você pode construir até ver o humilde tem muita alma. Obviamente, teremos que fazer várias alterações para o design responsivo. Haverá para mais tarde, mas por enquanto, o Dexter se aplica. Isso parece muito bom. Então, Alemanha, o próximo vídeo em que mostrarei um banner alternativo da página inicial. 11. Fundo alternativo para vídeo: Diz premissa, quero mostrar que um banner alternativo da página inicial não é exatamente um banner, é mais um vídeo. Então você terá um plano de fundo de vídeo em oposição à imagem de fundo tradicional. Por isso, é bem simples. Este é o vídeo que eu gostaria de adicionar ao plano de fundo. É um feito para mim, basicamente compulsão de si mesmo, minhas viagens ao redor da parede. Então, vou seguir em frente e simplesmente pegar este link aqui. E vamos editar esta seção. Agora, devido às margens negativas, talvez você não consiga ver o botão da seção de edição aqui. Ou o que você quer fazer é simplesmente usar o navegador. Ok, então venha aqui, clique em navegar PARA clicar na seção, e agora você pode editar a seção. Então, novamente, o navega todo o nosso botão sendo muito, muito útil. Vamos agora para o estilo de layout. E então aqui você tem antecedentes. Vamos com o vídeo. Você clica no vídeo e está aqui. Vou colar o link para o vídeo do YouTube. Mas você também pode colar o link do Vimeo também. E então você pode escolher a hora de início, a hora de término. Você pode optar por jogar uma vez ou celular habilitado para o modo de privacidade. Se você vai com o vídeo em segundo plano, eu recomendo altamente que você escolha uma queda de fundo. Então, para o fundo cair, vou simplesmente usar a mesma imagem. A razão é porque é um vídeo, às vezes pode não ser reproduzido e porque é do YouTube, talvez do YouTube como um problema ou por um motivo ou outro, o vídeo não é reproduzido. Elemental usaria o plano de fundo como opções de fallback. Vou seguir em frente agora e atualizar. Vamos dar uma olhada em nossa página. Chegando aqui, atualize a página. E lá vai você. Então agora você pode ver que temos o vídeo em segundo plano. Agora jogue um fim. Claro, não vou negar que os vídeos não são mais poderosos do que uma imagem. Obviamente, os vídeos são muito mais interessantes. Mas, por favor, note que os vídeos têm um inconveniente algumas desvantagens, ok, isso pode retardar seu site. Então, se você vai usar um vídeo, tente certificar-se de que o vídeo não é tão longo, máximo talvez dez segundos, porque quanto mais tempo o vídeo for, a longitude será carregada e isso diminuirá no seu site. Então, por favor, torne os vídeos muito, muito, muito curtos. Certifique-se de adicionar uma imagem de fundo como um recuo astuto caso o vídeo não seja carregado. Mas essa é a alternativa para sua página inicial. Mas agradeço por assistir e, claro, verei você na próxima aula. 12. Construindo a página inicial, parte 1: Bem-vindo de volta. Vamos continuar construindo a página inicial. E, como você pode ver, voltei para a imagem de fundo tradicional. Mas, como eu disse, se você quiser usar o vídeo, tudo bem. A próxima seção que vamos construir será a seção de duas colunas que terá alguns textos à esquerda, uma imagem à direita. E então a terceira seção aqui é muito, muito semelhante. São apenas as colunas invertidas. Na terceira seção, temos a imagem à esquerda e depois o texto à direita. Então, como exatamente vamos conseguir isso? Isso é muito, muito, muito direto. Vamos para uma página inicial. Vamos editar. E você pode ver agora que são basicamente duas colunas, 5050. Então, muito facilmente, vamos descer aqui, criar uma nova seção com duas colunas, 5050. Vou editar a seção, certificar-me de que ela fique toda a largura. E então as colunas GAAP dirão que não há lacuna. Tudo bem, então a primeira seção aqui, vai ter alguns textos. Deixe-me desenhar o editor de texto aqui. Lambda copie o texto fictício de Lorem Ipsum que tenho aqui. Deixe-me ir em frente e colar isso. E então também temos o cabeçalho. Deixe-me largar isso por desafio. É um h2. Aqui. Na verdade, não criei nenhum cabeçalho real, nenhum título real. Então deixe-me digitar. Adoraríamos viajar. Apenas alguma coisa. É isso. E então, para a segunda coluna aqui, vamos adicionar a imagem, e vou adicionar essa imagem que tirei em Istambul. Este foi um grupo de nossos estudantes universitários. Eu estava andando por aí e disse: Ei, você gostaria que eu tirasse uma foto dessa ideia? Então eu tirei a foto. Portanto, certifique-se de definir essa imagem para enganar. Porque, novamente, queremos que a imagem ocupe toda a largura e a altura de sua coluna. Mas também precisamos adicionar o botão Saiba mais. Então o que vou fazer, é claro, é voltar aqui, arrastar o botão, soltá-lo aqui. E então vou dizer aprenda, saiba mais. Então este link pode ir para talvez a página sobre. Então, vou simplesmente dizer barra para frente. E lá está ele. Vou me alinhar com o centro. Vamos fazer algumas alterações. Tipografia de estilo. Vou dizer transformar-se em maiúsculas. A declaração sobre não dentro do que uma integração. E, em seguida, a cor do texto. Vou mudar isso para preto. Agora, o botão real em si vai com uma cor de fundo de branco. digitação de fundo aqui será de cor branca. Mas então vamos definir uma borda de sólido para que possamos realmente ver o botão. E se você quisesse, você poderia adicionar alguns vídeos de borda também. Mas não vou fazer isso. Uma última coisa a fazer seria alinhar nosso conteúdo no meio. Então, vou clicar no botão Editar Coluna, comentários, Alinhar Vertical, define o meio. E então mais uma coisa que fazemos para ter algum espaço à esquerda e à direita é contra agora, o texto não está exatamente à direita da borda da coluna, então precisamos adicionar algum espaçamento. Então, vou voltar aqui. O que vamos fazer é muito, muito simplesmente, vamos avançar para a mesma coluna. Bem aqui. Vamos desvincular os valores para o padrão. E então vou dar 50 pixels por 50 pixels à esquerda. E lá está ele. Construímos nossa segunda seção com muita facilidade, já que a terceira seção é muito, muito semelhante em design, o que podemos fazer é simplesmente clicar com o botão direito do mouse na proteína da seção de edição e depois duplicar. E agora o que vou simplesmente fazer é arrastar esta primeira coluna aqui, arrastá-la até aqui, trocar as colunas. E agora de forma muito simples, vamos em frente e edite essa imagem. Vou escolher este que eu peguei na Argentina. suporte se encaixa em L, cor gordurosa. E então, é claro, para os textos aqui, eu adicionei qualquer coisa viajada para os melhores lugares como o cabeçalho, ok, então deixe-me trocar esse cabeçalho aqui e dizer viajar para os melhores lugares. Lá vai você. Tudo bem, vamos em frente agora atualizações. Digamos como a página se parece. Vamos, vamos. Tenha paciência comigo. Infelizmente, esses são os riscos ocupacionais de um instrutor, um professor. Às vezes, o incidente começa a bagunçar e , finalmente, ele é atualizado. Certo, obrigado. Agora, vamos ver a página. Vamos rolar para baixo e lá está. Certo, mais uma coisa. Assim como um bônus, poderíamos adicionar alguma animação para que as imagens talvez gostem, você sabe, este slide da esquerda e da direita. Então, o que podemos fazer é simplesmente voltar e verificar essa alegoria para a primeira imagem, aquela com os alunos aqui, vou editar a imagem. Vá para o isqueiro avançado, você tem efeitos de movimento. Vou dizer animação de entrada. Vamos deslizar das luzes. Ok, tão ligeiramente da direita, então cortando da direita. E então para esta imagem era simplesmente fazer o slide oposto da esquerda. Efeitos de movimento. Diminuiu, informa ou amou. Certo, isso foi meio estranho. Não sei exatamente o que eles fizeram. Deixe-me fazer isso de novo. Certo. Por algum motivo, a janela da imagem para a segunda coluna. Não sei por que isso aconteceu, mas tudo bem, vou apenas ir em frente e atualizar. Lá vamos nós. Vamos ver a página. Vamos rolar para baixo. Faz deslizar da esquerda, enganado e deleite, e lá está. E assim, nossa página inicial está começando a entrar em vigor. Então, junte-se a mim no próximo vídeo, onde agora vamos dar uma olhada em como vamos construir a próxima seção, que seria o design de viagem exclusivo. 13. Como criar a página inicial, parte 2: Tudo bem, então estamos seguindo em frente. E a próxima seção será a única seção de design viajada, que parecerá um pouco complicada, mas não é tão complicada. Basicamente, temos uma seção muito grande com várias colunas. Uma coluna manterá o cabeçalho. Design geral exclusivo e vamos ter o elemento divisor terá o elemento divisor terá alguns textos e, em seguida, teremos um elemento de seção interna com três colunas, com três cabeçalhos diferentes, diagramas e alguns textos. Então, vamos em frente e edite a página inicial mais uma vez. E vou rolar todo o caminho até aqui. E o primeiro nó é simplesmente fazer é apenas arrastar o cabeçalho aqui. E adicionarei a edição que diz todos os de viagens exclusivos e exclusivos. Claro, vou alinhar este para decenter. Como agora temos conteúdo em nossa seção, vou seguir em frente e editar esta seção. Vamos definir a largura para 1240 pixels. Em seguida, estilo, vamos adicionar uma cor de fundo de FATF oito. Então é esse tipo de cor branca acinzentada. Eu realmente não sei a cor exata, como é chamado. Mas o ponto aqui é que estamos tentando diferenciar a seção logo acima dela da nova seção que estamos criando. Portanto, uma das melhores maneiras de diferenciar e diferenciar seções é adicionando diferentes planos de fundo coloridos. Então eu acho que o design de trufas, vou voltar para avançar também. Adicione um pouco de preenchimento. Portanto, 50 pixels no topo, 50 pixels na parte inferior também. E lá está ele. O próximo elemento serão os elementos divisores que caem logo abaixo do nosso design de viagem exclusivo. Olhe para o centro de Atlanta e, em seguida , a largura aqui seria aproximadamente, vamos com 50%. Talvez seja um pouco demais. Que tal 40%? Tudo bem, então para o percentual, próximo será os textos aqui, fechaduras onde não é sobre as estrelas realmente roubaram esses textos de algum site. Não me lembro, mas não inventei isso com esse texto. Certo. Eu não sou muito, não sou tão inteligente, então vou soltar o editor de texto logo abaixo do divisor e colar esse texto ali mesmo. E é claro que vamos alinhá-lo ao centro então, por último, mas não menos importante, temos nossa seção de três colunas aqui. Então, vamos usar a seção ina. Vamos andar de forma inteligente novamente. Basicamente, cada coluna tem exatamente o mesmo design. Você tem um diagrama, você tem um cabeçalho e, em seguida, você tem alguns textos. Então, vamos simplesmente fazer é, vamos projetar a primeira coluna da imagem Jabbar aqui. E é a imagem com o plano mundial pode ofensores um aqui, inserir essa mídia, torná-la em tamanho real. Em seguida, vamos adicionar um cabeçalho. Basta mover a imagem. Vamos fazer deste um h3. Eu tenho algum texto aqui e é chamado, este tem que ser destaque. Destinos, que serão os principais destinos futuros. Vamos fazer uma mudança. Ok, vou me alinhar ao centro, mas, para o estilo, vamos mudar a tipografia de maiúsculas para apenas luz normal. E, por último, mas não menos importante, teremos a ferramenta de edição de texto. Vamos arrastar isso para lá. Então deixe-me pegar este texto aqui. Semelhante o texto fictício Ipsum. Vou seguir em frente e colar isso. Eu acho que na verdade são exatamente os mesmos textos, diferente, tolo eu. Certo. Bem, o estilo dele, isso se alinha ao centro. Aí está ele. Então, o que simplesmente precisa fazer agora é entrar aqui, clicar com o botão direito do mouse no botão Editar Coluna e simplesmente duplicar, e depois duplicar mais uma vez. E então entraremos aqui e excluiremos a quarta coluna. É. Então isso virá aqui agora, mude essa imagem para o shopping com o mapa. E eu tenho os textos aqui que dizem guias de viagem. Assim, além de poder apresentar determinados destinos para seus clientes, ofertas de viagens de passaporte também são guias de viagem. E então o último aqui, vou mudar a imagem para aquela com os bilhetes de avião. Eu tenho o cabeçalho aqui que diz acessível. Mais bool. Para obtê-lo é. Lá vai você. Então, vou seguir em frente agora e simplesmente atualizar isso. E vamos ver a página. E design de viagem iônico voila. Lá vai você. Então, espero que você tenha gostado desta lição em particular, Jimmy, na próxima, onde continuaremos a construir nossa página inicial. Vejo você então. 14. Adicionando a Galeria da página inicial.: Vamos em frente agora e adicionar a galeria à nossa página inicial. Agora eu sei que em um site de demonstração aqui, você pode ver que eu criei uma seção de serviços, mas de repente não fazer a mesma coisa porque na verdade é muito, muito simples e eu não quero desperdice muito tempo ensinando a mesma coisa repetidas vezes. Basicamente, se você quiser construir esse mesmo tipo de seção, você terá seu fundo branco e terá três colunas. A primeira coluna aqui seria toda manchete ou serviços. Você terá a próxima coluna que usará o elemento de seção interna para as três colunas. E então você pode simplesmente repetir a mesma seção para as colunas monetárias aqui embaixo. Agora, o elemento que usei que tem a imagem aqui, o título, é a caixa de informações. Você o encontrará nos complementos essenciais da ONU. Portanto, é o único aqui nos complementos sociais e que você verá em caixa cheia. E é a única variedade, então você simplesmente arrasta, solte-a para dentro. E agora aqui você pode escolher sua imagem. Você adicionará a ferramenta de maré, o conteúdo lá dentro e assim por diante. Então você pode pensar nisso como uma tarefa se quiser construir uma estrutura semelhante. Mas vou seguir em frente agora e criar nossa galeria em vez disso. Para a galeria, na verdade não é uma galeria, mas mais um carrossel de imagens. Então, vou para o general aqui. E então você vê que temos o carrossel de imagem aqui. Clique em arrastar, solte-o dentro. E vou escolher imagens. E então eu tenho seis imagens que selecionei. Deixe-me dar uma olhada rápida na minha outra tela aqui. Eu tenho essa imagem, essa imagem, essa imagem aqui também, esta que é quatro. Eu também tenho este da Cengage e este do lote Verbit J ou K. Deixe-me ir frente agora e criar uma galeria. Agora, o truque aqui é que todas essas imagens têm exatamente a mesma altura de 800 pixels que você pode ver, e também a largura de 1200 pixels. Portanto, sempre que você estiver adicionando imagens à sua galeria ou carrossel, certifique-se de que elas estejam o mais próximas possível em termos de dimensões. Eles não precisavam ser exatamente, mas não deveriam diferir em mais do que, digamos cinco ou dez pixels, dar ou receber. Então tente fazer com as imagens tenham o mesmo tamanho o máximo possível. Então, vamos inserir isso na galeria. E vamos escolher um tamanho completo. Escravos para mostrar seriam dois de cada vez. fatia para rolar também seria duas. Você não quer esticar imagens porque isso pode levar a que elas fiquem desfocadas. Então, vamos manter isso em nenhuma hora de navegação endossada? Sim. Ou você poderia simplesmente ir com pontos. Eles vão aparecer aqui, o que também é possível. Em seguida, o link que você pode vinculá-los a um arquivo de mídia, se quiser. Mas não vou vinculá-los. Vou deixá-los acesos. A legenda acompanhará os títulos. Portanto, haverá os títulos de cada imagem sendo exibida. E lá está ele. Tudo bem, então vou editar esta sessão agora. Escolha uma largura total e , em seguida, espaço de colunas, sem espaço. E lá vai você. Vou seguir em frente e simplesmente atualizarei. E vamos ver nossa página. Posso rolar para baixo aqui. E lá vai você. Essa é a nossa luz da galeria lá. Uma coisa que você também pode fazer, você pode pensar nisso como uma tarefa. Você pode adicionar a parte inferior para o Instagram. Então, basicamente, o que você poderia fazer é novamente, você vai aqui para editar com o Elementor. Se você tem uma página do Instagram no link do Instagram, você pode simplesmente vir aqui. Basta arrastar seu botão, soltá-lo aqui e, em seguida, simplesmente personalizar e dizer ver nossas fotos no Instagram. E então, se puder adicionar o link ao Instagram se você quiser fazer isso. Então, novamente, você tem a opção de fazer isso também. Vamos seguir em frente e excluir. Mais uma coisa só para garantir é que o seu carrossel de imagem aqui, você terá as opções adicionais para reprodução automática. Pausa em Havas, pausa na interação. Então, faça uma pausa ao passar o mouse. Você pode escolher saber para isso apenas para garantir que as energias sejam sempre dois pontos por. Claro, você pode definir seu loop infinito. Sua direção pode ser esquerda ou talvez ir para a direita. Em vez disso. Você tem todas essas opções e é realmente tudo muito subjetivo. Ok, então vou ficar com a esquerda, apenas atualizações. E lá está ele. Então é isso para adicionar nossa galeria Alemanha. Quando o próximo vídeo estiver disponível agora, adicione nosso blog. Vejo você então. 15. Adicionando a seção do blog: Vamos em frente agora e adicionar a seção do blog em nossa página inicial. E você pode ver que isso é o que estamos tentando realizar. Teremos nosso título, divisor e duas postagens no blog, que terão a imagem em destaque, o título do post, o trecho, bem como um link para ler mais. E, em seguida, a parte inferior leia mais posts , na verdade, vinculada à página do blog. Mas aqui está a coisa. Deixe-me arrastar o mesmo site de demonstração aqui, mas com o back-end você verá que tenho acesso a certos elementos aqui, como a grade de pulso, bem como a linha do tempo do post. Mas se for solicitado a ir ao meu próprio site aqui. E se eu rolar para baixo até a seção de átomos essenciais, você verá que não tenho acesso a esses elementos e você também não os verá. E isso porque precisamos ativá-los no back-end. Do que estou falando? Deixe-me, em primeiro lugar, arrastar esta página para longe. Vamos para o back-end, o backend real do WordPress, e você verá complementos essenciais aqui. Vá em frente e clique nele. E agora aqui, onde você tem elementos, você clica lá. E você aqui, é aqui que você pode ativar ou desativar elementos que você andará em largura. Então, vamos fazer isso. Ok, eu realmente irei em frente e desabilitarei cada elemento ou uma aldose, ativarei alguns, aqueles que provavelmente usaríamos. Vou ativar o elemento de depoimento aqui e, em seguida, aqui, sob seus elementos de conteúdo dinâmico, vou ativar a grade de postagem, bem como a linha do tempo da publicação. Vamos seguir em frente e salvar nossas configurações. Agora vamos voltar para a edição da página inicial com Elementor I. Se eu rolar para baixo até a seção de complementos essenciais, você verá que agora temos acesso a apenas alguns dos elementos que não mostro. Ainda estamos enquanto você ainda pode ver um pagamento melhor, trabalhos fáceis, páginas de operadora, elementos, não sei por quê, mas está tudo bem. Pelo menos agora, temos acesso à grade de postagens, bem como à linha do tempo da publicação. Então aqui está exatamente o que vamos fazer. Primeiro de tudo, vamos arrastar nosso cabeçalho, o que diria visitar nosso blog. Então, vou arrastar o título aqui. Então, vou dizer que visitas ao blog. Vamos alinhá-lo ao centro. Em seguida, será o divisor. Então, vamos adicionar também. Vou me alinhar ao centro com uma largura muito, muito curta de cerca, digamos que 20% deva estar bem. Agora, aqui vai ser o principal. Vamos voltar. Vamos fazer uso da grade de postagens, postar cronograma. Vou mostrar como isso funciona quando construímos na página do blog. Mas vou arrastar a grade dos pólos aqui, logo abaixo do divisor. Vamos deixá-lo lá dentro. Certo. Agora, postagens por página, vou mudar este para dois. Só temos duas páginas aqui. E um pouco é que você pode obter por talvez o autor. Você também pode escolher especificamente por categorias, bem como simplesmente entrar aqui e digitar o nome da categoria cujas postagens você deseja mostrar. Então, você pode compensar por talvez uma postagem que você possa encomendar até a Data decrescente, e assim por diante. Você tem acesso a todas essas configurações. Mas o principal deles que realmente quer caminhar será as configurações de layout aqui. Aqui, você tem apenas um layout de modelo, que é o padrão aceso, o que é bom. Mas então as colunas vão fazer isso também. Agora, aqui, o tamanho da imagem, vamos ir com a totalidade. E lá vai você. Então, agora as coisas estão começando a parecer muito melhores. Mas é claro que também podemos fazer coisas como o show ao nosso Senhor mais se você quiser. Então, quando você ativar isso, você verá esse botão aqui que carregará mais postagens no blog também, mas não vamos fazer isso. Você tem acesso a um estilo de grade, o que não é muita diferença entre o bem e o missionário. Eu acho que, quando você, quando você está atirando mais postagens e seja bem-vindo com mais colunas, é aí que você verá que a bola de diferença seria levada com alvenaria por enquanto. Certo. Mostrou um título? Sim. Queremos mostrar o título. Se eles aceitarem sim, mas vamos estender o, exceto para 50 palavras. Ok, então lá vai você, 50 e depois 50 letras em vez disso. E então aqui no show nós tínhamos o botão Mais, sim, queremos fazer isso. Mostrar os termos da publicação. Podemos mostrar isso. Seriam coisas como suas tags, suas categorias e assim por diante. Mas não vamos fazer isso, então vamos apenas ir em frente e esconder isso. Agora. Mostrar medidor. Isso será para o autor, a data em que foi publicado. Vou em frente e esconderei isso. Mas, novamente, é claro que isso é inteiramente subjetivo. Você é mais do que bem-vindo para exibir. Você precisará das informações se quiser. Tudo bem, links aqui. Você pode fazer coisas como o Target em branco para suas imagens não estejam cheias disso seria para fins de SEO, são e assim por diante. Tudo bem, vamos ao estilo e vamos ver o que temos aqui. O estilo de grade de postagem padrão, você tem estilo, que teria as datas. Você tem o estilo três aqui, que não terá a data que é semelhante ao padrão. Acho que não havia muita diferença. E é claro que aqui você pode fazer coisas como alterar a cor de fundo das postagens, adicionar mais espaçamento se quiser. Vamos vir aqui para colorir tipografia e estilo. Então, aqui mesmo quando você passa o mouse sobre o título, você pode ver aqui, ele tem essa cor aqui. Podemos simplesmente mudar isso para preto para que não haja mudança, é apenas basicamente um link. Isso não vai mudar. Mas, novamente, muito, muito subjetivo. Você pode adicionar um link por dia se quiser lidar com o estilo. Vou descer aqui à tipografia. Para a declaração. Podemos ir com nenhum, então não está na linha, mas novamente, até você subjetivo ou estilo, podemos ir com lâmpada itálica. Vou ficar com o padrão. Tudo bem, isso é o que uma tipografia. E então aqui embaixo, você tem o estilo de corte de pairar. Agora, quando você passa o mouse sobre a imagem em destaque, você tem tipo de animação, essa animação desvanecida. E então, com o fundo preto, você pode clicar lá. É aqui que você pode alterar a animação. Então, em vez de desaparecer e você pode fazer talvez como um zoom em que ele amplia. Ou você pode fazer um slide para cima, para que você possa ver isso. E então é claro que você pode mudar a cor de fundo estava bem, talvez torná-lo algo menos escuro, algo assim. Você também pode alterar o ícone, Eles serão exibidos. Você tem todas essas opções disponíveis para você. Mas vou deixar isso como está. Acabei de mudar a cor volta para algo um pouco mais escuro. E tudo bem, está perfeitamente bom. E é isso. Tudo bem, então, por último, vamos fazer é simplesmente adicionar o botão Leia mais postagem. Então, vamos arrastar um botão aqui. E direi que leia mais. E agora este link irá para a página do blog, assim por diante. Blog grande alinhado ao centro. E vamos fazer algumas mudanças tão boas no estilo. O plano de fundo. Para a parte inferior será a cor laranja e, em seguida, a cor do texto, é claro, seria branca. Vamos para a topografia que se transforma em maiúsculas. E, na verdade, digamos que leia mais posts. Leia mais posts, acredito que eles apenas dão uma olhada. Sim, diz Leia mais posts. Então, tínhamos mais postagens. E é isso. Vamos voltar ao estilo novamente. Para a tipografia, vamos voltar aqui estilo, a curadoria não. Portanto, não temos nenhum botão na linha lá. E é isso. Você pode adicionar suas fronteiras e fazer outras coisas também, mas acho que isso deve estar bem por enquanto. Então, vamos avançar e atualizar. E é isso. Então você é mais do que bem-vindo para estilizar isso. De qualquer forma, você quer, você não precisa necessariamente usar exatamente as mesmas cores ou exatamente os mesmos textos e assim por diante. E é isso. Então, mais uma coisa, mais uma coisa que devemos fazer antes de eu arredondar isso é adicionar algum espaço entre a seção da galeria e um blog, bem como o bloco e o FUTA. Vamos voltar muito rápido. E é claro que vamos editar esta seção para o nosso blog e vamos adicionar algum preenchimento. Então, vamos aqui e sua seção vá para Avançado desvincular esses valores. Então, no topo, vamos adicionar 50. Em seguida, no fundo, vamos adicionar 15. E então isso deve ser suficiente. Vamos atualizar em frente. Mais uma vez. Veja a página. Role para baixo, e é isso. Então, construímos a página do blog, alemão vin, próximo vídeo onde construiremos a seção de ofertas e pacotes. 16. Adicionando nossa chamada à ação: Vamos em frente e adicione a próxima seção, que será as ofertas e pacotes. E isso será muito, muito simples, muito direto. Vamos fazer uso do botão call to action para os átomos essenciais. Então, por favor, vá para o backend de átomos essenciais. E você encontrará o botão e sua seção de elementos de marketing. Vá em frente e ative o call to action. Vamos seguir em frente e salvar as configurações. É isso. Vou voltar para a atualização da minha página inicial. Agora vamos rolar todo o caminho até aqui. Na verdade, vamos editar com o Elementor antes de rolar para baixo. Tudo bem, vamos rolar todo o caminho até aqui. E agora vou para meus complementos essenciais. E onde está nosso botão de chamada para ação está bem aqui. Chamada para ação. Vou deixar isso lá dentro. E é muito, muito simples. Tudo o que vamos fazer aqui é simplesmente mudar o estilo de conteúdo do básico para o flex grid. Então você agora tem o botão no branco e depois o texto à esquerda. E é claro que simplesmente mudaremos o título aqui. Duas ofertas, pacotes. Pacotes. Vou mudar isso para um H3 com os textos laranja. claro que você pode mudar isso para branco ou preto. E para a textura aqui, sinto muito, não vou fornecer nenhuma fantasia para x. vamos deixá-lo como está. E então o texto do botão em si, podemos mudar esse aqui, onde você tem textos de botão primário, simplesmente mudará este para nossa loja agora. Compre agora. E isso seria vinculado a um site externo ou talvez outra página em seu site também. Vamos passar para a luz de estilo. E então, para o estilo aqui, onde você tem o estilo do botão primário, eu vou clicar lá. O que você quer fazer aqui é que há um novo, agora mesmo quando você paira sobre Shop Now você pode ver que ele muda para o colarinho azul. Pessoalmente, não gosto disso. Então, o que vou fazer é passar o mouse sobre o seu estilo importante perm. Em seguida, uma variedade em que você tem a cor de fundo. Eu simplesmente vou mudar isso para laranja. Agora você pode ver que é laranja e não a cor azul. Então, estamos tentando nos manter consistentes com o padrão colo que temos do nosso lado. Essa é a única mudança que vou fazer. Vamos em frente agora atualizar. Vamos ver a página. Role para baixo. Lá está, ofertas e pacotes. Agora eu sei, é claro, que precisamos de algum espaçamento entre as ofertas em pacotes, bem como a lâmpada do rodapé. Ainda vamos adicionar a seção de avaliações. Então é aí que adicionaremos o espaço e é isso para adicionar as ofertas na seção de pacotes. Obrigado por assistir. Vejo você na próxima aula. 17. Adicionando a seção de depoimentos: Por último, mas não menos importante, vamos adicionar a seção de avaliações. E, claro, isso é muitas vezes uma parte muito importante de qualquer site porque clientes ou clientes em potencial querem saber que outras pessoas fizeram negócios com sua empresa e que gostaram do seu serviço. Então vamos seguir em frente e adicionar três resenhas do além sob o pecado, Vanessa Carlton e Raul Gonzalez. Agora, o problema é porque já ativamos o elemento depoimento com o plug-in Adams essencial. Temos duas opções quando se trata de adicionar depoimentos. A versão do elemental fornece um. Você o encontraria no geral, na ideia geral, você verá. Está bem aqui, depoimento ao lado das abas. Mas havia seus complementos sociais. Também temos o elemento depoimento. Então deixe-me mostrar brevemente a diferença com a dos complementos essenciais. Você tem acesso ao botão de espera aqui. O estilo é um pouco diferente. Você pode ver com o, este é o que a partir de uma versão gratuita do elementar. Aqui você pode ter a miniatura ou o avatar da pessoa que fornece o depoimento abaixo do próprio testemunho. Mas com aquele para átomos essenciais, é um pouco diferente. Furo. Você tem acesso ao botão escrito aqui e você pode fazer várias coisas como, não, é claro que não como de costume, alterar os alinhamentos de layout, modo que selecionará seu estilo. Você pode até ter coisas como o depoimento aqui no topo, você terá o ícone e depois a imagem. Você tem todas essas opções aqui. E isso lhe dá muito mais opções do que a fornecida pela versão gratuita do Elementor. Mas com isso dito, vou usar a versão gratuita do elemental apenas para obter exatamente esse mesmo tipo de estrutura. Ok, então vamos seguir em frente e fazer isso. Vou remover o elemento e adicionaremos um cabeçalho. E dirá resenhas, avaliações de clientes anteriores. E é claro que vamos nos alinhar ao centro. E vamos adicionar nosso divisor como de costume. Então, vamos adicionar o divisor. Acho que eles deveriam ter cerca de 25. Loops não são 25 volts, 45% para os 5%. Agora vamos adicionar o elemento ina, seção porque vamos trabalhar com três colunas. Então, vou deixar isso lá dentro. Assim como antes. O que foi simplesmente fazer aqui é que forneceremos a primeira forma de testemunho além de Anderson. E eles simplesmente duplicarão e mudarão os nomes, bem como a localização e outras tarefas para o resto dos depoimentos. Então, muito rapidamente, vamos até aqui, vá para o general. E vamos adicionar o primeiro depoimento aqui. E isso é além, além de Anderson. Agora, para a ferramenta de tipo, você poderia simplesmente adicionar o país que eles têm em vez disso, ok, Então, em vez do cargo da pessoa, você pode simplesmente adicionar o país. Então, além de Anderson é da Islândia. E aqui vou escolher a imagem. Enquanto nosso amigo além das áreas você pode ver que é tudo sorridente, muito, muito feliz. E lá está ele. Tudo bem, então você pode ver o tamanho do texto aqui é bem pequeno. Então, o que vamos fazer aqui para o conteúdo é que vamos para o estilo. E então onde você tem que progredir aqui. Vamos em frente e, em seguida, escolha o botão de topografia. Agora, para o tamanho, vamos com 18 pixels de distância. E o que mais? É praticamente isso. Então, vamos simplesmente seguir em frente agora e depois duplicar esta seção ou esta coluna e duplicar mais uma vez. Exclua a última coluna. E então sempre simplesmente fazer aqui agora é mudar além Anderson para lençóis Vanessa Carlton, que está sorrindo. Ela está muito feliz. Vanessa Carlton. E Vanessa é dos EUA. E então temos nosso último testemunho aqui de Gonzalez e roll é sim, é meio que sorrindo exatamente, mas ele também não está com raiva. Então Gonzalez e ele são da Espanha espanol. Como você soletra girar? Spin é SPA IN? Certo. Aí está. Estamos acabados. Mais uma coisa. Vamos adicionar nosso preenchimento a esta seção. Tão avançado, vamos com 50 e top 50, inferior também. Atualizações. E voila, vamos em frente e ver a página. E lá vai você, ali embaixo. É praticamente assim que adicionar depoimentos ao seu site. Obrigado por assistir e, como sempre, verei você na próxima aula. 18. Revisão de página Principal: Bem, bem-vindo de volta, Felicitas Sian. Somos construídos com sucesso na primeira página, incluindo o cabeçalho e o rodapé. E espero que você esteja curtindo o curso até agora. Agora em frente, vamos construir mais duas páginas, a página do blog e, em seguida, a página de contato. E agora sei que no menu principal temos a página Recursos, bem como a página sobre, mas não vou construí-las apenas para economizar tempo. Eu não quero fazer esses custos muito longos. E também porque neste momento, você já tem uma ideia de como o elementar funciona. Tudo o que resta agora é apenas para você imaginar como você quer que sua página Sobre seja. Você quer ter um grande banner? Você quer ter uma seção com três colunas? Uma coluna tem uma imagem, outra tem alguns textos, uma outra tem um vídeo. Você pode fazer tudo isso. Então, vou desafiá-lo a criar ideias criativas de crédito para criar sua própria página Sobre da página em destaque fetal ou qualquer outro tipo de página que você possa estar construindo em seu próprio site. Mas vamos construir a página do blog especificamente porque ela é um pouco diferente das suas páginas estáticas tradicionais. A página do blog contém todas as suas postagens. Vou mostrar as diferentes maneiras como você pode criar uma página de blog. E então a página de contato será criada porque não envolve o uso de um plugin chamado plugin WP forms, que muitas pessoas não sabem como usar. Espero que, mais uma vez, espero que você esteja curtindo o curso até agora, você tenha uma maravilhosa página inicial. Não vamos progredir para construir o resto de nossas páginas. Vamos continuar. 19. Como criar a página do blog: Tudo bem, então vamos seguir em frente agora e construir a página do blog, que nomeamos a página Artigos no menu principal, mas na verdade é a página do blog. A primeira coisa que vamos fazer aqui é que não podemos editar diretamente com o Elementor ainda porque realmente precisamos editar a página primeiro do back-end, do trabalho tradicional é back-end. Bem aqui. Agora podemos clicar em Editar com Elementor. Isso agora nos dará acesso à interface elementar da página. A primeira coisa que vou fazer é vir aqui para sentar e simplesmente esconder o título da página. Então, simplesmente usaremos nosso próprio título. E chamaremos isso de nosso blog. Vamos vendê-lo como H1, ir para o estilo. Na verdade, vamos nos alinhar ao centro primeiro ir para o estilo. E então, para a tipografia, vamos defini-la como nossa principal. Se você não estiver trabalhando com as fontes globais, você pode definir isso para cerca 60 pixels ou algo assim. Certifique-se de que seja bem grande, certo? Em seguida, vamos adicionar nosso divisor para o blog e vamos alinhá-lo ao centro. Defina isso em ajustes que ele presente. Agora, confira isso. Ok, vamos adicionar postagens de diferentes categorias. Vamos fazer uso da nossa grade de postagens a partir dos complementos essenciais aqui. Agora você tem uma linha do tempo de postagem, que está realmente muito interessado o que está realmente muito interessado no que isso fará é exibir suas postagens em uma linha do tempo vertical e é um estilo diferente. Pessoalmente, não sou um grande fã disso, mas você tem essa opção se quiser. Mas não vou andar com isso. Vou simplesmente usar a grade de postagens. Tudo bem, então vou seguir em frente e arrastar a grade de pose, pular cumes embaixo do divisor. E agora olhe para isso. A fonte será nossas postagens obviamente, mas podemos consultar com base no autor, no imposto Fermat e assim por diante. Mas vamos acompanhar as categorias. Aqui. Vou digitar na Europa. Tudo bem. Vamos puxar postagens da Europa. A página pós-paga aqui seria definida como três e, em seguida, o layout é definido. Então, vamos com três colunas para o tamanho da imagem. Vamos com a totalidade, como de costume. Agora, você notaria que, como estou usando tamanhos diferentes de minhas imagens para as postagens, há um desalinhamento em termos de alturas. Como obviamente, a moda em Istambul tem a imagem mais alta. E então, por seus pecados em Pittsburgh e Glasgow, as postagens têm imagens mais curtas. Há uma maneira de contornar isso e você verá isso aqui. Você tem altura da imagem. Você pode simplesmente definir uma altura fixa para suas imagens. A única desvantagem disso é que às vezes você pode não ter os melhores ângulos. Como por exemplo, você sabe, se você fez isso mais alto do que, você pode perder o melhor ângulo em suas imagens e assim por diante. Então essa é a única desvantagem. Idealmente, você gostaria de usar imagens da mesma largura e altura quando se trata de imagens em destaque, mas isso não é um problema. Está tudo bem. Tudo bem, então nós temos isso. O que mais simplesmente fazer é adicionar um cabeçalho para indicar que, ok, estes são os nossos posts da Europa. Então, vou entrar aqui e dizer Europa. Tudo bem, agora vamos fazer algumas mudanças na pose real em si. Configurações de layout. Aqui. As palavras de aceitação que vamos com 15. Mostrar leia mais. Sim, mostre metta. Sim, Bot Loves. Vá para o estilo. O que vou fazer aqui é selecionar o estilo número dois. Este mostrará a data A2 garante o avatar ou o nome do autor. Então eu prefiro esse estilo em particular. Agora, de entender em si, vamos passar para a tipografia de cores e espaçamento. Ei, novamente, você tem a cor do mouse do título. Fizemos isso antes, vou mudar este para laranja. Então, quando eles passam o mouse no link das postagens, ele fica laranja. Então, para a tipografia, vamos fazer algumas mudanças aqui também. Vou tornar isso um pouco menor, só para que a majestosa cidade de Glasgow possa estar em uma única linha. O estilo, eu vou com decoração em itálico, nenhum. Para o botão Leia mais. Vamos também mudar para baixo também. Vou descobrir aqui em baixo com estilo do botão Mo, a cor do texto. Vamos com laranja só para manter as coisas constantes. E então, claro, para a tipografia, vou clicar aqui, ir para a declaração e depois sentar-me para nenhum. E é isso. Nós o configuramos. Europa, temos três postagens. O que mais eu quero fazer agora é simplesmente duplicar a Europa, duplicar o Postgres aqui mesmo. Vou arrastar a Europa, a segunda, soltá-la aqui acima, e depois definir esta para a Ásia. Essa será a próxima categoria. Agora, para o Postgres em si, vamos mudar as categorias aqui para a Ásia. Então deixe-me digitar Gia Lá está. Lá vai você. E então, por último, mas não menos importante, vamos fazer exatamente a mesma coisa novamente, duplicar, duplicar. Agora vou arrastar a Ásia. Mudanças queriam para a América do Sul, venha aqui para o Postgres. Mudanças, uma para a América. Lembre-se da América do Sul. E lá está ele. Então, mais uma coisa que poderíamos fazer é adicionar algum espaço entre as grades dos pólos. Então confira isso. Ok, eu vou para o meu trabalho de pós-graduação, qualquer um para a Europa, vou para avançar no link os valores e então eu definirei o padrão inferior. Digamos que 25 pixels. Nada muito drástico, fará a sentença para a Ásia também. Colocando o fundo 25 pixels. E então, por último, mas não menos importante, faremos para a América do Sul também, colocar 25 pixels inferiores. Vamos em frente agora atualizações. E vamos ver a página. Aí está ele. Ok, então vamos adicionar algum espaçamento para o próprio título do blog comprado. Dê uma olhada nisso. Isso parece bem arrumado e na verdade é bem legal. Deixe-me fazer rapidamente essa mudança rápida título do blog. Vamos adicionar um pouco de espaçamento. Então, vamos, na verdade, iremos para o botão de seção aqui, segurando todo o conteúdo irá para avançado no link e eles simplesmente definirão 50 pixels para a parte superior e depois caberão 50 pixels para a parte inferior como bem. Certo, ou portões. Agora, mais uma vez, vamos ver a página. E voila law, lá vai você. Essa é a página do blog criada. No entanto, quero desafiá-lo. Para tornar as coisas mais interessantes. Vou te mostrar um exemplo do que estou falando. Tanto com átomos elementares quanto com os átomos essenciais são plugins. Você tem acesso a tantos elementos para tornar suas páginas mais emocionantes, mais dinâmicas. Como exemplo, para os átomos essenciais ativaram outro elemento. E é o acordeão de imagem. Você o encontrará nos elementos criativos aqui você verá acordeão de imagem. Vá em frente, ative-o. Agora vamos voltar para a página aqui e deixe-me mostrar uma coisa que poderíamos fazer. Vou editar com o Elementor. Vamos fazer uso do acordeão de imagem. Agora confira isso novamente. Vou rolar para baixo aqui. São átomos essenciais. Temos o elemento acordeão de imagem aqui. Vou clicar em arrastar e soltá-lo logo acima de você. Tudo bem. Agora, antes de começar a editar isso, vou adicionar outro cabeçalho logo acima do acordeão de imagem. E podemos chamar isso de posts mais recentes. Assim como exemplo, na verdade, vou adicionar um pouco de preenchimento do topo. Vamos 25 pixels. Só para lhe dar alguma distância entre o título real do bloco e deixe-nos postar. E vou dar uma olhada nisso de novo. Vou ao meu acordeão de imagem e convidarei aqui. Podemos fazer tantas coisas pelo primeiro de acordo aqui, vou clicar dentro, mudar a imagem aqui para ser uma das postagens. Este aqui, os posts de São Petersburgo, vou escolher a imagem em destaque. Insira isso. E agora o escritor você verá torná-lo ativo. Sim, queremos fazer isso, eu não pude ativo para que ele realmente esteja vinculado às postagens aqui agora, vou mudar esse título. Duas visitas em São Petersburgo. Esse será o título. E então aqui estariam os trechos. Este seria o, exceto pelo texto, que podemos alterá-lo agora aqui, onde você permitiu que ela vincule, você quer mostrar isso e agora aqui, é aqui que você adicionaria o link para a postagem. Então deixe-me fazer isso rapidamente. Deixe-me ver a página rapidamente. Por dias em São Petersburgo. Então, aqui, vou pegar este link aqui. Novamente, observe que você não precisa copiar o nome de domínio em si. Basta ir com a barra e depois o nome da postagem ou o URL das postagens. Vou copiar isso. Vá aqui, volte para Editar. Clique no primeiro acordeão de imagem aqui. E agora aqui embaixo, link de título. Vou seguir em frente agora e simplesmente colar isso. Então, isso agora será vinculado ao post ou quatro dias em São Petersburgo. Mais uma vez, eu poderia fazer a mesma coisa pelo segundo. De acordo aqui também. Nossa lista escolhe aquela para a Rainbow Mountain. E, novamente, posso entrar aqui e mudar o título para a Rainbow Mountain. Um pouco rápido, Rainbow Mountain, e assim por diante. Isso é para o segundo em conformidade, o terceiro trimestre. E vou mudar este para aquele que Rapa Nui. E então, claro, o último, mas não menos importante, vamos com o da Turquia, moda e moda em Istambul. Insira esse. É. Vou seguir em frente e agora atualizá-lo. E agora vamos dar uma olhada na página aprimorada do blog. Agora olhe para isso. Você tem postagens no blog, por exemplo, em Pittsburgh, você terá esta montanha arco-íris. Eles podem clicar neste para Rapa Nui, este para moda e Istambul. E então, se eles não estiverem interessados, eles podem simplesmente rolar para baixo para ver as postagens da Europa, Ásia, América do Sul e assim por diante. Então, essa é de uma forma, outra forma como você pode tornar suas páginas mais interativas, mais dinâmicas. Você também pode adicionar animação, como você pode configurá-la para que talvez você esteja deslizando da esquerda ou da direita. Eu mostrei a você como fazer isso na página inicial. Então, tente ser criativo. Se você não está feliz com o quão estática sua página se sente, você sempre pode apimentar as coisas fazendo uso de elementos criativos, adicionando alguma animação. E você verá uma grande melhoria no quão dinâmicas são suas páginas. É isso para construir a página do blog. Muito obrigado por assistir. Vejo você na próxima aula. 20. Como criar a página em contato com o contato: Eu apenas criei a página do blog e agora deixei construir outra página muito importante, e essa será a página de contato. Agora, idealmente, é claro, na sua página de contato você quer ter algum tipo de formulário de contato, talvez até algum mapa do Google. Se você tiver uma localização física. Ou não temos uma localização física, mas vamos adicionar um formulário de contato. Agora, existem vários plugins por aí para criar formulários de contato. E, de fato, se você estiver usando a versão paga do elemental, você terá o elemento do formulário. Mas estamos usando a versão gratuita do elemental. Então, vamos instalar outro plugin. E esse plugin é chamado de plugins do WP Forms. Então deixe-me digitar formulários WP. E é o único aqui. Tudo bem, então vamos em frente, instalar. E agora vamos ativar o plugin. Tudo bem, então vamos seguir em frente e clicar em criar seu primeiro formulário aqui. O bom deste plugin em particular é que ele se integra muito bem com o elementar. Vou digitar um nome aqui. Então esse será o formulário de contato. Esse será o nome deste formulário. Formulário de contato está aqui. Você tem nossos diferentes modelos, escolherão o fator de forma de contato simples. Podemos ver a demonstração aqui. Você pode ver que esta é a demonstração aqui. Muito, muito simples. Você terá o nome, e-mail e, em seguida, campos de mensagem. Então isso deve se adequar aos nossos propósitos, vou seguir em frente e simplesmente clicar em Usar modelo. Isso é por si só, mas só vai fazer algumas alterações na forma como o plug-in funciona como estão aqui, você tem os campos disponíveis para você com a versão gratuita, há uma versão paga onde você tem acesso a esses campos extravagantes e aos campos de pagamento e assim por diante, mas não precisamos deles. Então o gengibre que vou fazer aqui seria editar o campo de nome. Então, vou simplesmente clicar no interior. E aqui você tem o formato. Eu prefiro o formato simples em que você tem apenas uma única linha para o nome. Mas você forçou o meio, último e o primeiro, o último, e assim por diante. No Avançado, você pode alterar o tamanho do campo para lançar dois pequenos, dependendo do seu gosto e do que você preferir. Você pode adicionar seus óculos CSS aqui. Você também tem lógica inteligente, que, opa, sinto muito por isso. Esqueci. Isso só está disponível com a versão paga de qualquer maneira, para as opções de campo. É isso. Assim, você pode voltar aqui e adicionar campos adicionais, como caixas de seleção suspensas. Se você quisesse. Em configuração aqui, sinto muito, nas configurações, seja aqui, é aqui que você pode alterar coisas como o próprio nome do formulário. Você pode alterar o texto do botão e influenciar aplicativos. É aqui que você pode configurar os tipos de notificações que deseja receber sempre que alguém enviar o formulário de contato. Queremos ser notificados aqui por padrão, o e-mail do administrador associado ao seu site WordPress estará aqui, mas você pode adicionar seus próprios elementos de e-mail personalizados. Mostre uma coisa, ok, bem aqui, onde você tem do nome. Por padrão, ele será definido como o nome do seu site, mas fará muito mais sentido configurá-los para o nome real da pessoa que envia a mensagem. Então, aqui, clico em Mostrar tags inteligentes. Basta escolher o campo nome, ou seu FirstName, LastName, dependendo do tipo de sensação que você tem para o nome. E, em seguida, o mesmo para o e-mail também. Simplesmente escolheremos o campo de e-mail. E vou seguir em frente e simplesmente salvar. Você tem as conformações aqui, bem como tudo bem, o que acontece depois que eles preenchem o formulário de contato? Eles recebem uma mensagem? Em caso afirmativo, é aqui que você pode editar a mensagem. Você pode mostrá-los em uma página específica e será uma beleza especial de todos criados. Você pode simplesmente redirecioná-los para um URL externo se quiser ir. Não vamos fazer nada disso. Vamos em frente agora simplesmente PARA economizar mais uma vez, feche isso. Agora vamos para a página de contato. Vamos em frente e editar a página de tudo a partir do backend do WordPress. Então, a partir daqui, vou clicar em editar com o Elementor para que agora possamos usar a interface Elementor e verificar isso. Tudo bem, opa, esqueci de fazer uma magra. Minhas desculpas. Precisamos habilitar os formulários WP são complementares para os plugins de itens essenciais. Então, vamos fazer isso rapidamente. Vou para átomos essenciais aqui. Vamos para os elementos. E então aqui você tem os elementos de estilo do formulário. Você verá o WP Forms. Vamos em frente e agora ativá-lo. Você pode ver que você tem acesso a outros tipos de formas, como formas fluentes, Gravity Forms, que na verdade é muito, muito bom Ninja Forms e assim por diante. De qualquer forma, vamos seguir em frente e salvar nossas configurações. E vou fechar isso. Vamos atualizar esta página mais uma vez. Ok, então a coisa sobre os formulários WE é que, mesmo com a versão gratuita do elementar, você terá acesso ao elemento. Depois de instalar e ativar o plugin, você pode vê-lo aqui no básico, você tem formulários WP por Elemental. Vou clicar em arrastar para dentro aqui. E mostrarei a diferença entre este e o fornecido por complementos essenciais. Vamos voltar, rolar todo o caminho até aqui. Vamos adicionar o dos complementos essenciais em uma seção diferente. Agora você vai ver a principal diferença, ok? Este é o único para os átomos essenciais. Vou escolher o contato para a taxa de mortalidade. Ele diz selecionar formulário. Vamos escolher isso. Agora, aqui. Compare este com o aqui em cima. Vamos com o dos elementos do primeiro. Vamos escolher o formulário de contato também. O problema é que você só tem acesso ao tipo de formulário a ser escolhido. As opções de exibição são boas. Você quer filmar o nome do formulário, descrição e depois avançado. Não há nada mais nisso. No entanto, para aquele com complementos essenciais, você tem acesso a muito mais. Você pode mostrar os rótulos da descrição, por favor, segure-a. Você ainda tem nossas mensagens de erro. Você quer mostrar mensagens de erro ou deseja ocultá-las? Por exemplo, se alguém não preencheu o campo de nome e, em seguida, pressionar Enviar, você deseja exibir a mensagem de erro ou não. Você tem acesso a muitas opções de estilo. Você pode adicionar uma cor de fundo do formulário. Você pode alinhar o formulário em suas margens de largura. Você tem todos os tipos de opções de estilo para os rótulos de título e descrição e assim por diante. Todas essas opções de tempo, você não as obtém com o elemento fornecido pela versão gratuita do elemental. É por isso que prefiro usar o fornecido por átomos essenciais. Então vou seguir em frente e fechar este pelo Elemental. Vamos caminhar sobre este. Muito, muito simples. Não vamos fazer grandes mudanças aqui, exceto que simplesmente esconderemos o título da lista telefônica. Todo mundo sabe que é um formulário de contato, então não há necessidade de mudar nada aqui. Uma coisa que faremos, porém, é ocultar o título da página. E depois adicionaremos nosso próprio título. Tudo bem, e vamos simplesmente escolher este aqui como uma tipografia de estilo H1 ir para o estilo, que é principal. E vamos simplesmente mais frio Cisne nosso Fale Conosco. É isso. Adicionaremos algum preenchimento aos valores do link da seção. Vamos com 50 no topo e depois 50 abaixo. Na verdade, pense nisso. O Fale Conosco é realmente um livro muito, muito grande. Tudo bem, vamos apenas alinhar este para o meio. E vamos apenas adicionar algum padrão para o formulário real em si. Vou clicar no elemento do formulário. Vamos para Avançado. E também adicionaremos algum preenchimento também. Basta dar-lhe alguma distância entre o título real e o próprio formulário. Então vá em frente e atualize. Isso é o que vou seguir em frente agora e ver a página. E é isso para a página Fale Conosco. Agora, novamente, você pode tornar isso um pouco mais emocionante. Você pode ir com talvez duas colunas oposição à seção. A primeira coluna você pode adicionar uma imagem de alguém que talvez ligue ou alguém envie um e-mail, coisas assim. Portanto, existem diferentes maneiras de modificar a página Fale Conosco e torná-la mais emocionante se você quiser. Mas isso é muito, muito simples, muito simples, e atende aos nossos propósitos. Então, obrigado por assistir e verei você na próxima aula. 21. Introdução ao Elementor Design responsivo: Tudo bem, é tão tecnicamente que terminamos de construir nosso site. Temos a página inicial, temos a página do blog e também teremos uma página de contato, e também teremos uma página de contato bem como o cabeçalho e o rodapé. Mas há uma coisa muito, muito importante que precisamos cuidar e que será um design responsivo. Lembre-se sempre de que tantas pessoas hoje em dia usam seus telefones celulares para navegar na Internet. E se alguém tropeçar, tropeçar em seu site no celular, você quer ter certeza de que ele parece bom. Então, o que vamos fazer no resto desta seção é que vou mostrar como você pode reconstruir o cabeçalho, a página inicial, o rodapé e as outras páginas para parecer responsivo. Para que, se ele for visualizado em um tablet ou em um dispositivo móvel, ficará bem. Lambdas lhe dá uma demonstração muito, muito rápida agora isso é para a visualização do tablet. Você pode ver que eu reduzi o tamanho da minha tela para o de um tablet. E você pode ver agora que ainda parece muito, muito, muito bom. Não temos problemas com espaço no cabeçalho. Parece bom. seção de notas de testemunho parece boa. A foto parece boa. Mas agora, se eu rolar até o menor tamanho de tela, que normalmente será o seu celular. Deixe-me voltar ao topo agora você pode ver que o cabeçalho parece diferente. Temos um fundo preto. Nós temos nosso logotipo. Temos o menu principal aqui, que agora é o menu de hambúrguer, que você já viu muitas vezes antes. E então, se eu rolar para baixo novamente, você pode ver que fica bem até o rodapé. Portanto, o design responsivo é extremamente importante. Então, chegando, vou mostrar como você pode fazer alterações em seu site para que ele fique bem em qualquer dispositivo móvel. Lambda também menciona rapidamente que, quando se trata de um design responsivo, existem alguns conceitos que devem estar cientes. Um envolveria fazer coisas como reduzir margens são padrões que você adicionou na versão para desktop. Por exemplo, você se lembra de lá com o banner da página inicial. Para esta seção, tivemos que adicionar uma quantidade ultrajante de margem negativa e acho que era menos dois a dois pixels quando se trata de versões móveis. Então, versões responsivas, você pode ter que reduzir esse tamanho ou Mabou, ou talvez até mesmo em determinadas situações aumentar o tamanho. Ajuste a imaginas ou padrões será necessário. Além disso, há momentos em que você só precisa ocultar tipos de elementos de configuração quando visualizados em um dispositivo móvel, pois ele pode ficar ótimo na área de trabalho. Um exemplo seria que um editor de vídeo ficará ótimo na área de trabalho. Mas em um dispositivo móvel, pode não ser necessariamente tão bom. A mesma coisa se aplica às animações também. E as medidas ficarão bem em uma área de trabalho, nas passarelas em uma área de trabalho, mas o celular pode ter problemas para exibir essa animação. Então, o ponto principal desse design massivo é o sacrifício. Você faz alterações, você remove determinados recursos para que quando visualizado em um dispositivo móvel, seja a grade Uber. Então é isso para a introdução rápida de indução ao design responsivo. Vamos agora começar com isso. 22. Responsive Header parte 1: Tudo bem, então vamos começar a projetar nosso cabeçalho para ser responsivo e o Lambda mostra os estados como está agora. A área de trabalho está praticamente pronta. Quando começamos a minimizar a tela do nosso navegador. Você pode ver agora que, neste momento essa seria a visualização do tablet. E você pode ver que o logotipo se torna muito menor. O menu também se transformou no tradicional menu de hambúrguer. E está tudo bem, mas definitivamente pode ser melhorado. Mas então, se formos um pouco menores agora você pode ver que é onde as coisas parecem muito, muito ruins. Esta é a visualização móvel, aquela para o celular. Então, precisávamos fazer algumas mudanças aqui. Vou seguir em frente. E, na verdade, antes de fazer isso, deixe-me mostrar o outro cabeçalho, o cabeçalho global. Vamos para a página de contato e você notará que este é um pouco melhor. Temos o fundo preto e, em seguida, na visualização móvel, mesmo que o menu de hambúrguer esteja desalinhado com o logotipo, ainda é muito melhor porque não temos nenhum espaço em branco no topo. Tudo bem, vou ir em frente e editar os cabeçalhos da página inicial. Vamos para Editar com Elementor e, em seguida, a página inicial para cima. Agora vamos mudar para o modo responsivo aqui embaixo. Modo responsivo, vamos alternar para a tabela primeiro. Agora, eu quero te mostrar algo muito rápido. Tudo bem, deixe-me voltar ao responsivo. Por padrão, seu menu principal ou um menu em destaque ativado se transformou no menu de hambúrguer na visualização do tablet , no entanto, note que você nem sempre precisa seguir as configurações padrão. Neste momento, se eu mudar para a mesa, como você pode ver, ela virou para o menu de hambúrguer. E isso porque se eu clicar e editar o menu principal no layout, você verá os tamanhos de tela de tablet de ponto de interrupção positivo dos EUA tamanhos de tela de tablet de ponto de interrupção de 1025 pixels e abaixo. Claro, o menu de hambúrguer borra. Se não quisermos fazer isso, vou mudar este para a visualização móvel, em vez disso. Uma visualização de tablet. Ainda teremos o menu principal mostrando e só nos transformamos no menu de hambúrguer assim que chegarmos à visualização móvel. Vamos atualizar em frente. E vamos ver o que essa pequena, pequena mudança fez por nós. Veja a página. Volte para a página inicial ou caso. Então, agora, neste momento, esta é a visualização do tablet. E você pode ver que na verdade não é tão ruim assim. Você não precisa mudar para o celular, para o menu de hambúrguer uma vez, que é tablets. Claro, se você tivesse muitos itens de menu, digamos 678 itens do que anos, obviamente você não terá espaço suficiente. Mas instituições onde você tem quatro ou cinco itens de menu, é perfeitamente bom para sua exibição. Eles como estão no modo tablet. Há duas mudanças que vou fazer aqui. Um seria aumentar o tamanho do logotipo apenas um pouco. E então também podemos tentar reduzir o tamanho dos itens do menu apenas um pouco. Vamos fazer isso muito rápido. Vou voltar para o cabeçalho da página inicial. Vamos mudar para responder SUV, tablet de ponta. Tudo bem. Vou clicar no menu. Sinto muito, o logotipo aqui no logotipo da UT vai para Estilo. Agora observe agora que a dimensão aqui foi configurada para tablet. Como você pode ver, é tudo tablet, tablet SASE. Então aqui vou mudar o tamanho para 100%. Vamos mostrar o tamanho total do logotipo. Agora, para o menu principal, sei que está tudo em branco. Você não pode ver, mas apenas tenha cuidado comigo. Vou clicar em editar, no menu principal, ir para o estilo. Então vamos à tipografia aqui. Agora, assista a isso, certifique-se de que o tamanho aqui esteja definido para tablet. Vamos fazer esses 114 pixels um pouco menores do que o normal. Vamos atualizar. Agora vamos dar uma olhada. Adicione o novo cabeçalho da página inicial e o modo responsivo. E lá vai você. Lá vai você. Então, até este ponto, está parecendo muito bom. Obviamente, vamos fazer algumas grandes mudanças na manchete do banner, o vencedor que estamos viajando, é aventura. Vamos reduzir o tamanho, mas apenas preste atenção ao cabeçalho real. Ok, parece bom até a visualização móvel, que agora terá que continuar. Mas, por enquanto, sábio, isso está parecendo muito bom. Vamos agora dar uma olhada no cabeçalho do cabeçalho global global. Vamos escolher uma página, vamos escolher a página Artigos. E a partir daqui vamos em frente para editar o cabeçalho global. Vamos lidar com o modo tablet primeiro. Então, vamos vir aqui para o seu responsivo. Vá para o tablet. Tudo bem, vamos lidar com os pontos do pão. Vamos mudar esse para celular. E isso só fará exatamente a mesma coisa para o estilo também. Vamos nos alinhar à direita, para o menu principal, alinhamento com o branco e depois o estilo. Vamos vir aqui para tipografia. Certifique-se de que isso esteja configurado para tablet. Então, vamos com 14 pixels também. E lá está ele. Ok, Next vai ser o logotipo. Não vamos esquecer, precisamos fazer o logotipo ou 100%. Certifique-se de que isso esteja configurado para tablets. 100%, ótimo. Agora vamos mudar para a visualização móvel. A única coisa que precisamos fazer aqui é delinear o menu de navegação para o centro. Na verdade, não deveríamos ter tocado nos alinhamentos no modo tablet, então está tudo bem, vamos simplesmente definir isso de volta. Vou para o Layout de conteúdo e, em seguida, o alinhamento aqui. Vamos apenas mantê-lo no centro. Acho que eles vão ser melhores. Tudo bem. É isso. Vou seguir em frente e atualizarei. Vamos dar uma olhada no que temos. Vamos ver a página. Vamos escolher a página Artigos. Reduza o tamanho. O que temos aqui? Tudo bem, é tablet, tablet está com boa aparência. E agora aqui esta será a visualização móvel, mas parece haver um desalinhamento com o logotipo e, em seguida, o próprio menu. Então, vamos consertar isso rapidamente. Vamos voltar. Precisamos tornar o logotipo, na verdade talvez um pouco menor. Acho que é um pouco grande demais também. Então, vamos fazer essas mudanças. Volte para o celular responsivo. Ok, vamos editar o primeiro alinhamento do logotipo aqui, vamos configurá-lo para o centro. Digamos que este seja um dissidente. E então talvez o tamanho, talvez um 100% seja um pouco grande demais, sem pensar nisso. Então, vamos reduzir isso para 75%. Vamos em frente e datas. E vamos ver como isso será. Vamos voltar a ver a página. Artigo. Eu minimizo, ok, muito melhor agora e agora você pode ver o alinhamento está no centro. E lá está ele. Então, parece muito melhor, muito melhor agora. Claro, ainda vai fazer mais algumas, mais algumas mudanças nos cabeçalhos, mas por enquanto pelo menos está parecendo muito melhor do que o que tínhamos inicialmente. Tanto o cabeçalho da página inicial quanto o cabeçalho global estão com uma aparência melhor. Vamos lidar com o espaço em branco no cabeçalho da página inicial no próximo vídeo. 23. Responsive Header parte 2: Bem-vindo à segunda parte de redesenhar o cabeçalho responsivo. E esqueci de mencionar em um vídeo anterior quando mudei os sinais dos itens do menu aqui, por algum motivo parece ter afetado a versão para desktop. Você pode ver agora que os textos e não mais maiúsculas, se algo assim acontecer, basta voltar a editar o cabeçalho da página inicial. O que você quer fazer é simplesmente ir para o elemento do menu. Então, vou clicar em muitos elementos aqui. Vá para Estilo, vá para tipografia aqui e basta clicar nela. Isso é tudo que você pode ver aqui. Diz Transformar em maiúsculas. Então estamos basicamente apenas reafirmando que, Ei, queremos que o Vamos ser maiúsculas. Então, vou avançar as atualizações novamente e vamos voltar, ver a página. Vamos para a página inicial. Certo. E lá vai você. Então, honestamente, não tenho certeza por que isso acontece, mas no caso de acontecer com você, basta simplesmente fazer o que acabei de fazer. Certo. Agora, anteriormente, conseguimos fazer com a visualização do tablet fosse assim, o que não é nada ruim. Mas agora é hora de darmos uma olhada na visualização móvel. E você pode ver agora que parece muito ruim é muito espaço em branco e o logotipo e o menu, o menu de hambúrguer online, mas precisamos consertar o espaço em branco. Agora, na verdade, esta é a segunda vez que estou gravando esse vídeo em particular porque no anterior, eu realmente consegui consertar o cabeçalho do celular para ter exatamente o mesmo tipo de estilo lá você terá o banner se misturando em segundo plano. No entanto, decidi ir com uma rota diferente e em vez disso, usar o mesmo tipo de cabeçalho que temos para o resto das páginas, como aquele aqui onde você tem o fundo preto, decidi usá-los cabeçalho para o cabeçalho da página inicial na visualização móvel. A razão é porque eu realmente queria usar essa oportunidade para mostrar um truque muito legal que você pode usar sempre que estiver trabalhando com design responsivo. Vamos voltar para a página inicial. E eu quero te mostrar algo, certo? Vou para Editar com Elementor editando o cabeçalho da página inicial. Aqui está a coisa. Ok, vou seguir em frente e duplicar esta seção de cabeçalho. Vou clicar com o botão direito do mouse aqui. Duplicados. Basicamente, agora temos dois cabeçalhos. A diferença é que vou entrar aqui, ir para esta seção Editar. Vou ao estilo, tipo de fundo, dar-lhe uma cor de preto. Ok, agora, confira isso. Vou para o Advanced, vir aqui para Responsive e, em seguida, convidar aqui você tem opções de visibilidade. Quando exatamente você gostaria de mostrar esta seção com base no tamanho de uma tela? Vou escondê-lo na área de trabalho. Sim. Ainda não queremos gravá-lo na área de trabalho porque ainda estamos usando o cabeçalho da página inicial no tablet. Também queremos escondê-lo até isso. Mas então queremos mostrá-lo quando chegar à visualização móvel. Como tal, agora vou para o nosso cabeçalho original e fazer o contrário. Vá para avançado, acalme-se hetero responsivo e, em seguida, esconda na área de trabalho. Ninguém quer mostrar, queremos mostrar até isso. Mas quando eu for para Hide on Mobile, deixe-me ir em frente e agora atualiza. E dê uma olhada nisso. Vamos em frente agora, veja a página. Vamos para a página inicial. Ok, então você pode ver que ainda temos o mesmo cabeçalho. Mas agora, para a visualização do tablet, você pode ver que ainda temos o mesmo cabeçalho, o mesmo cabeçalho no mesmo cabeçalho. Agora, uma vez que chega à visualização móvel, agora temos o fundo preto com a ideia do logotipo do centro e, em seguida, o menu de hambúrguer lá embaixo. E então temos o banner da página inicial. E lá vai você. Portanto, esse é um truque que você pode usar sempre que estiver trabalhando com design responsivo. Você pode optar por mostrar uma seção específica especificamente na área de trabalho. E você pode optar por mostrar uma seção específica especificamente, talvez apenas no tablet ou no celular. Uma pergunta que eu poderia ter ainda está bem, por que eu simplesmente não dupliquei esse cabeçalho específico e, em seguida, simplesmente usei esse cabeçalho na página inicial e simplesmente o escondi na área de trabalho e tablet e , em seguida, exibidos no celular. Você pode ter duas cabeças exibidas em qualquer página com elementar, pelo menos é assim que esse plug-in funciona. Ok, então se você está pensando, vou simplesmente duplicar esse cabeçalho e mostrar dois cabeçalhos na mesma página, esconder um em desktops ou eles não querem um celular, não vai funcionar porque na verdade, tentei. É por isso que eu tive que ir para o cabeçalho da página inicial. E, em seguida, nesse mesmo cabeçalho, crie uma segunda seção que agora será exibida especificamente na visualização móvel. Mas não terminamos. Na verdade, quero fazer outra coisa. Veja, você nem sempre tem que ir com este tomate. Você tem o logotipo e o centro no topo e, em seguida, o menu de hambúrguer ou abaixo dele. Ainda podemos usar duas colunas aqui. Como fazer logon à esquerda e ter o menu na luz. Deixe-nos fazer isso. Vou voltar a editar com Elementor, o cabeçalho da página inicial e paletes com para esta página carregar, ok, alguma edição. O segundo cabeçalho agora. Mas vou mudar agora para o modo responsivo. Vamos para a visualização móvel. Tudo o Kn tem exatamente o que temos. Bem aqui. Vou fazer isso. Vou clicar na coluna segurando o logotipo. Bem aqui. Vou dizer 50. Então eu irei aqui para a coluna do logotipo segurando o logotipo, desculpe, tudo no menu também. E então mude o para 50 também para que eles fiquem lado a lado. Agora, vamos fazer algumas alterações. Vou clicar no menu Editar, ícone, descer, acessar o layout. Vamos tentar alinhar com o branco. E então vamos torná-lo grande. Vamos passar para o estilo. Aqui embaixo você terá o gatilho do menu e clique no ícone de fechamento dentro. E agora Tamanho do Ícone, vou fazer este acima de 40 pixels. Keda deve ser grande o suficiente. E então, para o logotipo, vamos editar o logotipo também. O tamanho da imagem está definido como cheio, alinhado à esquerda. Vamos ao estilo máximo com 100%. Certo, vamos em frente agora. Atualizações. Na verdade, antes de fazermos, vamos segurar. Vamos também fazer isso. Quando você clica no menu de hambúrguer. Este vai ser o trabalho feito. Mas você pode ver agora que podemos ver o texto. O texto é todo branco, então precisamos fazer algumas alterações aqui. Aqui está exatamente o que vou fazer. Vou cair no menu suspenso do sinal aqui. E, em seguida, cor de fundo. Vamos com preto, cor de texto, vamos com branco. E isso deve ser isso. Não sei por que não o vemos aqui ainda, mas está tudo bem. Vou seguir em frente as atualizações. Vamos voltar, ver a página. Volte para a página inicial, minimize a janela. Tudo bem, então agora você pode dizer, Ok, temos o logotipo à esquerda, o menu no branco. Agora, se clicarmos no menu aqui, ele se abre. Bobby ainda não consegue ver o texto que está interessado. Certo, vamos voltar e ver o que pode ter acontecido. E isso vai estar muito interessado. Não sei por que não vemos os textos. Tudo bem. Não se preocupe. Vou entrar aqui para o modo responsivo, voltar para o Mobile. Clique no menu aqui, clique no menu suspenso. Por que não vemos o texto? Vamos para o estilo. Vamos descer aqui para tipografia e uau, eu não tenho certeza por que o tamanho aqui em vez de um, mas não deve ser um. Deve ser um pouco maior que um. Isso provavelmente é uma falha em pixels. Então, minhas desculpas, vou dizer ao problema por que eu um pixel, às vezes sinto que o elemento está tentando me impedir de fazer bons vídeos. Eu, honestamente, não sei o porquê. Dizia que não vai pixel. Isso é só, isso é simplesmente bizarro. De qualquer forma, você pode ver que pelo menos os itens do menu estão mostrando agora, Uau, isso é muito, muito interessado, estou dizendo que o web design pode ser uma ocupação muito estranha, muito estranha. Às vezes você sente, você sente que todos esses elementos têm em mente que eles não vão voltar. Tudo bem, então agora eu clico aqui. Lá vai ele. Agora você pode ver que eu tenho os itens do menu e, claro, agora você pode fechar. Então, é basicamente isso para redesenhar o cabeçalho responsivo. Na verdade, vou seguir em frente e fazer exatamente a mesma coisa para o cabeçalho global para a visualização móvel, onde farei a primeira coluna 50% e depois farei a segunda coluna segurando o item de menu são 50% também. E também faça o ícone do hambúrguer do menu um pouco maior. Então você pode ir em frente e fazer isso também. Mas é isso para criar os cabeçalhos responsivos ou para o site. Obrigado por assistir ao próximo vídeo do evento alemão , onde agora vamos dar uma olhada em redesenhar o rodapé para ser um pouco mais responsável. Então você. 24. Footer responsive: Agora vamos dar uma olhada no rodapé e tentar torná-lo responsivo. E deixe-me ir para a visualização do tablet primeiro. E daqui, na verdade, tem dois. Parece muito bom. Acho que não precisamos fazer alterações na visualização do tablet. Mas quando chegamos à visualização móvel, é aqui que temos um pouco de espaço e o problema pode ver o cabeçalho do contato está um pouco próximo demais da imagem. Se formos muito pequenos, então é a mesma coisa. Exceto que a imagem agora parece muito, muito azul. Talvez a melhor opção para nós na visualização móvel seja simplesmente remover essa imagem. Vamos em frente e edite com Elementor, o rodapé global. Vou mudar para o tablet responsivo antes de tudo, apenas para confirmar. Então, modo responsivo, eu era bom no tablet. Tablet parece bom. Parece bom. Eu não acho que precisamos mudar nada, exceto talvez, na verdade, você sabe o quê? A partir da visualização do modelo, a imagem Jody parece meio desfocada. Isso porque é um pouco alto demais. O que podemos fazer é isso. Podemos reduzir o tamanho da primeira coluna e aumentar o da segunda coluna. Então, vamos ver o que 50 faremos. São 50 e, em seguida , o da direita também será 50. Mas a imagem ainda está um pouco desfocada. Então isso não é tão bom. Tudo bem, vamos voltar aqui. Vamos tentar fazer alguns ajustes. Talvez faça este. Digamos que 66. Acho que 66 está bem e eles vão complementar a segunda coluna, 33 para que ela possa estar na mesma linha. Isso ainda está bom, eu acho. Mas e a visualização móvel ou a chave? Agora, ele pode ver que a imagem está muito borrada. E às vezes é melhor apenas nos mover e não ter certeza de certos tipos de elementos na visualização móvel. Então, sempre basta fazer aqui está tudo bem? Vamos clicar na coluna de edição da coluna irá para Avançado. E assim como fizemos anteriormente, vamos nos esconder no celular e pronto. Então, vamos avançar e atualizar. Vamos dar uma olhada no que vamos fazer com que esta veja a página. Vá para a página inicial. Vamos rolar para baixo. Ok, então a única coisa que precisamos fazer ANS para adicionar algum preenchimento para o cabeçalho do contato. Lambdas volte para voltar para a visualização do tablet, apenas para confirmar que está tudo bem. Então, sim, as visualizações do modelo estão boas. É a visualização móvel em que precisaremos adicionar algum espaço nos contatos do nosso botão. Então, vamos fazer isso rapidamente. Vamos voltar a editar com o rodapé global Elementor. Vamos apenas adicionar algum padrão ao, ao rodapé em si. Isso é o que simplesmente faremos. Tudo bem, vamos para o modo responsivo, móvel. Ok, então vamos editar esta seção aqui, editando a seção avançada. E vamos adicionar um pouco de preenchimento. Acho que o padrão dos 25 pixels superiores deve ser razoável. Não do topo, mas na verdade são do topo. Sim, do topo. Desculpe. Vá em frente. Página Bates. Página minimiza a rolagem para baixo. E isso é agora que a cauda de comida parece muito, muito melhor. Ok, então junte-se a mim no próximo vídeo, onde agora vamos dar uma olhada em tornar a página inicial responsiva. E, em particular, o banner da página inicial. 25. Página home responsivo: Tudo bem, então vamos dar uma olhada em tornar a página inicial ou responsiva. E na maioria das partes, na verdade não é tão ruim. Isso é para a visualização do tablet. Obviamente, podemos tornar o título um pouco menor. Faça a banana também um pouco mais curta em altura. Bem aqui. Claro, podemos adicionar um pouco de preenchimento à bola para a seção de viagens, bem como ensinável a melhor prosseguir seção também. Mas acho que isso é tudo o que precisamos fazer porque o resto é realmente muito bom. A seção exclusiva de design do canal parece boa. A galeria está boa. Visitas, nossa seção de blog está boa. Ele não empacota avaliações, tudo bem. No entanto, para a visualização móvel, que é o que chegamos aqui, obviamente, teremos que tornar o texto muito, muito, muito menor como você pode ver. Também adicione preenchimento aqui também para a seção de viagens. E precisamos fazer algo sobre o fato que temos as duas imagens para a segunda seção alinhadas uma ao lado da outra, idealmente deveria ser, eu adorarei viajar. Então esta imagem e, em seguida, nossos filhos , os melhores lugares e depois a imagem desta montanha. Então, vamos ter que fazer algo sobre isso também. Fora isso, o resto da página parece muito bom a considerar. A galeria agora é uma única linha, o que é bom. A seção do blog também é uma única linha. Quero 22 linhas, sinto muito. Em seguida, ele não empacota todas as revisões agora e a própria coluna separada e, em seguida, também produz como você pode ver, isso em. Tudo. Certo, então vamos em frente e começar a fazer as alterações. Então, vamos editar com o Elementor. Vamos lidar com o banner primeiro porque esse é o principal. Esse é o principal problema. Tudo bem. Tablets responsivos. O que temos aqui? Vamos seguir em frente agora e editar o texto. E o texto era de cerca de 120 pixels. Como você pode ver. Vamos ter duas grandes quebras, apenas um pouco mais pequenas. Então, digamos que 88 pixels de largura. Mas não se esqueça de que definimos uma altura para a seção. Vamos para esta seção agora. Temos a altura mínima aqui. Vamos reduzir isso o máximo que pudermos. Não se preocupe com o texto sobrepondo o cabeçalho por enquanto. Mas vamos tentar dar-lhe uma altura razoável para a mesa. E eu acho que 519, meu bebê, muito pequeno, digamos setecentos. Setecentos parecem bem o suficiente. Então, a partir daqui, não se esqueça de que também lhe damos margens negativas. Agora que reduzimos o tamanho de cento, dezentas para 700 mulheres, além de ir para o Advanced Convite aqui. Não se deixe enganar pelo fato de você não ver nada dentro das caixas de margem. Na verdade, ele está herdando as margens da visualização da área de trabalho. Então, aqui, vamos em frente agora e tentar reduzir isso. Desculpe, esqueci de desvincular. Vamos fazer isso 10. Tudo bem. Vou continuar subindo novamente. Isso deve ser sobre, deixe-me dar 150 menos, ok, eu não posso fazer isso. Deixe-me tentar isso. Menos 150. Certo? Acho que isso é um pouco demais. Vamos descer. Vamos descer. Ok, então deve ser cerca de 123 alto-falantes de lazer um vinte e cinco, vinte e cinco pixels. Agora, para o texto em si ou para o cabeçalho, poderíamos fazer isso um pouco menor novamente. E é isso. O que você acha? Acho que isso está bem. 80 pixels para o cabeçalho. Reduza a altura desta seção para 700 pixels, reduziu a margem negativa também. E eu acho que isso é bom, embora tenha cuidado, você vê agora que, se expandirmos a tabela para o tamanho máximo da tela, você pode ver que agora temos o espaço em branco aparecendo. Então isso deve nos dizer agora que tudo bem, espere um segundo. Precisamos aumentar as imaginas negativas, na verdade, isso é outra coisa que você deve ser um abastado. Sempre que você estiver aplicando margens negativas e modo responsivo, certifique-se de estar aplicando margens negativas ao maior tamanho de tela possível. Este é o maior conciso possível para a visão inclinada em 1024 por 878, vamos aumentar, ou melhor, neste caso, reduzir a margem negativa. Porque quando você é negativo, estamos reduzindo isso. É tudo 158. É, então agora, se dermos isso para o menor tamanho para tablet, ainda não veremos nenhum espaço em branco. E é isso. Certo, acho que isso é bom para o tablet. Vamos agora fazer algumas alterações na primeira ou na segunda seção. E isso dá agora, o que precisamos fazer? Para os tablets? Podemos adicionar um pouco de preenchimento. Tudo bem, vamos entrar aqui e é seção. Vamos para Avançado. E aqui, vamos adicionar um pouco de preenchimento. Podemos ir para os 25 pixels usuais e , em seguida, um efeito de pixels para a parte inferior também. Vamos esfriar aqui. Faremos exatamente a mesma coisa aqui também. Vou te mostrar algo muito legal. 25 pixels da parte superior e , em seguida, 25 pixels da parte inferior também. Eu, agora, se você olhar para isso, você vai perceber que na verdade não parece tão bom. Quero dizer, você tem uma imagem aqui bola, os textos, a coluna de textos é um pouco grande demais. É um pouco alto demais. Awesome também vai com a segunda seção. Então, o que exatamente podemos fazer? A coisa mais simples que poderíamos fazer seria simplesmente fazer com que cada coluna tenha 100% de largura. Então, em vez de ter duas colunas, terá que vir lado a lado. Teremos duas colunas uma sobre a outra. Então, como exemplo, bem aqui, se eu der essa primeira coluna aqui, vamos dar a isso um ou cem, cem. E então vamos dar esta coluna e também 100. E lá está ele. Neste momento, mesmo se expandirmos para o maior tamanho possível em um tablet, acho que parece tudo bem. Isso parece bom em uma dica, mas apenas certifique-se de que as imagens sejam grandes o suficiente. Uma mudança só precisaria fazer aqui seria adicionar algum preenchimento a este botão Saiba mais. Vou clicar lá, ir para o padrão avançado e os budistas adicionarem na parte inferior. Vamos adicionar um pouco de preenchimento aqui. Deixe-me dizer que 25 pixels podem ser um pouco demais. Nesse caso, talvez 15 pixels. 15 pixels estão bons. E lá está ele. Ok, vamos fazer exatamente o mesmo sintoma de tema aqui também. Vou clicar nesta coluna aqui. O goto, a largura da coluna. Vou dar um 100. E então a segunda coluna aqui também, 100. Certo, e então dê uma olhada nisso. Idealmente, queremos ter essa coluna aqui em cima desta coluna. Como fazemos isso? Bem, vamos fazer é simplesmente ir para esta seção, segurando essas duas colunas, vá para a seção, vá para aqui para Avançado. Qualquer aqui no responsivo. Você verá essa opção para reverter as colunas. Vamos fazer isso no tablet. Vamos fazer isso e celular também. Agora você pode ver que a criança, a melhor coluna versus agora está no topo da montanha. E é exatamente assim que fazer isso. Vou apenas ir em frente e adicionar um pouco de preenchimento ao botão do senhorio aqui. Preenchimento na parte inferior, 2515 pixels. Acredito que foi uma M&A está bem, então vamos voltar ao topo. Role para baixo. K. Temos muitos espaços. Tudo bem. Ok, parece bom, bom. Agora vamos tentar reduzir o tamanho para o menor e ver se há algo que precisamos fazer aqui. Parece tudo bem. Parece perfeitamente bom. E lá está ele. Certo. É isso para a visualização do tablet. E a visualização móvel? Vamos mudar para o celular. Tudo bem, então obviamente a banana aqui, vamos precisar consertar essa. Bem, eu só vou rolar rapidamente para baixo aqui e ver o resto da página. O resto da página parece realmente muito bom. Sim, isso parece bom. Tudo está agora em uma única coluna na qual usamos em uma coluna e, em seguida, na página Contato. Então, tudo o que precisamos fazer agora, seríamos lidar com o banner. Então, vamos fazer isso. Vou rolar para cima aqui. Vamos para a seção. Tudo bem, a primeira coisa que faremos agora é para as alturas. É uma altura mínima, 700 pixels. É claro que isso é herdado da visualização do tablet. Vamos ver se podemos realmente aumentar um pouco o tamanho. Na verdade. Acho que 879, vamos tentar obter algo um pouco, mesmo como 870 pixels talvez. Vamos tentar aumentar o tamanho um pouco para o maior tamanho para a visualização móvel. Agora você notaria que há um pouco demais de uma margem negativa porque você pode ver a linha azul e você pode ver o logotipo mostrado acima. Então, o que vamos ter que fazer agora é ir para o Advanced. E então, para as margens negativas, vamos tentar, na verdade, não precisamos disso em margens negativas. Na verdade, ia torná-lo 0. Sim, vamos fazer isso 0 já que temos um plano de fundo blecaute de qualquer maneira. Então, o que o McDonald's 0? Isso é para dispositivos móveis. Tudo bem, então a partir daqui, vamos reduzir as alturas. Vamos reduzir a altura da página agora do banner em vez de algo razoável. Vamos ver. Acho que 535. E quanto a 530? Acho que isso está bom. colina de cinco terços parece boa. Role para baixo. Certo. Sim. Acho que você ficaria bem. Isso é fazer são muito pequenos. E veja. Ok, então os textos podem se tornar, é um pouco grande demais na verdade. Então, vamos fazer isso. Vou voltar para editar a epigrafia do cabeçalho. Vamos fazer é tentar fazer isso tão pequeno quanto pudermos. E agora, se expandirmos o maior para a visualização móvel, o que você tem aqui é, ok, então isso nos leva a uma nova discussão. O silício está bem aqui no maior tamanho para celular, o Texas, seria muito pequeno. Se tentarmos aumentar o tamanho aqui, ele ficará bem no tamanho de tela mais alto possível para o celular. O problema que eu sei é que, se reduzirmos o tamanho da tela para o menor tamanho possível para dispositivos móveis, agora esse texto é um pouco grande demais, o que você pode fazer nesse tipo de cenário é mudar o estilo unidade de tamanho de pixels para a porta de exibição avaliada revise o VW ou a opção aqui, o VW é a largura da janela de exibição. O que tentaremos fazer é tentar ajustar o tamanho do texto com base na largura do tamanho da tela. Então confira isso. Vou mudar agora para a VW. E vamos tentar ir com um tamanho de dez. Para o mais alto. Este é o tamanho mais alto, tamanho de tela para celular. E então, se reduzirmos o tamanho para o menor, você poderá ver que o texto também está reduzindo. À medida que reduzimos o tamanho da tela. Essa é uma dica que posso dar agora, basta simplesmente mudar para VW em oposição aos pixels ou K. Então, talvez, talvez uma pequena coisa que possamos fazer. Uma última coisa que poderíamos fazer novamente será reduzir a altura um pouco mais. Digamos que 450 pixels. Essa deve ser a última mudança. Vamos tentar fazer com que este seja menor. E lá vai você. Ok, eu acho que isso é, tudo bem. Isso é bom neste momento. Tudo bem. Lá vai você. Vamos rolar para baixo, ver o que mais podemos fazer. É praticamente isso. Acho que estamos bem. Deixe-me fazer este realmente pequeno. Evidência, uma coluna. E aí está, ok, uma última coisa, última coisa que poderíamos fazer é talvez reduzir o tamanho do botão aqui apenas um pouco. Então, vamos em frente e edite o fundo aqui, vamos para o estilo. Na verdade, vou para o estilo. Então, para a tipografia aqui, vamos rapidamente na mistura de tamanhos deles. Claro, isso está definido para dispositivos móveis, e então vamos seguir em frente e talvez fazer este. Vamos ver. Falhas e pixels, talvez 14 pixels, ou o que mais podemos mudar? É claro que também podemos alterar o raio da fronteira. Vamos derrubar este, digamos cinco pixels. E lá está ele. Ok, agora aqui podemos tentar tornar o tamanho muito pequeno. Na verdade, não testei isso. Não tenho certeza se isso afetaria a visualização do tablet. Vai afetar a visualização do tablet e até mesmo a visualização da área de trabalho será sempre pequena. Isso depende de você decidir apenas fazer, tornar o botão pequeno. Todos os três são tamanhos de tela. Ou você poderia simplesmente ir com um meio. Acho que o meio ficará bem para dispositivos móveis. Tudo bem. É isso. Vou seguir em frente agora atualizações. E lá está ele. Construímos com sucesso em uma nossa página inicial responsiva. Obrigado por assistir e, claro, verei você na próxima aula. 26. Construindo o cabeçalho da página inicial, Elementor Pro: Tudo bem, então vamos começar a trabalhar com elementos aprovados reconstruindo nosso cabeçalho. E mostrarei como os modelos funcionam com elementos são profissionais. O primeiro que vou fazer é ir até o back-end e vamos seguir em frente e desativar o construtor elementar de cabeçalho e rodapé. Não precisamos mais disso. Então, vou desativar e vamos dar uma olhada no cabeçalho inexistente que não temos mais e, claro, sem rodapé. Agora você ainda pode ver as desventuras de uma pá e, em seguida, os textos corporativos aqui, este é o tema olá exibindo esses alimentos são para nós. Tudo bem, vamos voltar aqui. E depois de instalar e ativar o Elementor Pro, você verá aqui onde você tem um modelo no elementar LM, você verá o construtor de temas. Então vá em frente, clique aqui. E agora você pode ver os diferentes tipos de modelos que podemos construir. Vamos construir o cabeçalho. Então, vou clicar em mais para adicionar o cabeçalho. O bom do Elementor Pro é que você terá acesso a uma grande variedade de modelos que você pode usar. Você pode vê-los aqui. Estilos diferentes para o cabeçalho. Você pode ver alguns, você sabe, você terá o logotipo à esquerda, os ícones de mídia social à direita, o menu principal abaixo. Assim, você pode inserir rapidamente qualquer um desses modelos que correspondam ao tipo de design que você deseja. Mas vou seguir em frente e simplesmente nos construir do zero porque quero mostrar como isso funciona com o elementar por elementos. Então, vou fechar isso. Vamos simplesmente reconstruir como antes. Vou entrar aqui agora, criar nossas duas colunas. Seção. Um haverá cerca de 30%, o outro cerca de 70%. E agora, se eu for aqui para o backend elementar, e agora você pode ver que temos o logotipo do site aqui. Então, vou arrastar esse e soltá-lo para dentro. Outra coisa é que você pode notar uma alteração com o elemento elementar pro logo. Esse é o fato de que você realmente tem acesso às alturas. O logotipo no estilo com o elemento do logotipo fornecido pelo plug-in do cabeçalho elementar e do construtor de rodapé. Você não tem essas opções, então você pode realmente controlar a altura do logotipo daqui. Mas não vamos tocar nisso ainda. Vou até o back-end novamente, escolher os elementos do Menu Nav aqui, solte-o aqui dentro. E, claro, o Menu Principal escolherá. Vamos nos alinhar aos grandes pontos certos. Vamos definir este para celular. Lembre-se, vamos dar estilo à nossa tipografia. Vamos fazer isso em maiúsculas. Vamos voltar para a própria sessão principal segurando as duas colunas. Vamos fazer com que seja largura total. Para o logotipo, vou apenas ir em frente e adicionar um fundo preto. Então, pelo menos temporariamente, podemos ver o logotipo. Certo, muito grande. Vamos voltar aqui. Para a largura máxima, vamos apenas seguir em frente e escolher 75%, assim como fizemos anteriormente. Saiba, cortado para usar a altura neste caso, mais uma mudança. Vamos alinhar os itens do menu na vertical, alinhá-los ao meio. E lá vai você. E, claro, a cor também. Esqueci disso. Vamos mudar a cor. Carrapatos ClO2 primário. E isso é isso. Agora dê uma olhada nisso. Aqui em baixo você publicou. Quando você pressiona Publicar, é aqui que os elementos são pool e eu direi, ei, onde você gostaria de exibir esse modelo específico? Vamos adicionar a condição, não o antiácido porque isso vai ser para a página inicial. Vou entrar aqui agora e escolher o singular. E então, para singlets dirá, ok, todas as páginas individuais, não, queriam dividir especificamente na primeira página. Então, vou escolher esse. E isso é que vou seguir em frente e simplesmente salvarei e fecharei. E é isso. Vamos prosseguir agora e atualizar. E vou te mostrar algo muito, muito interessante. Tudo bem, deixe-me fazer uma atualização difícil. Então, aqui está uma linha mais fina. Você pode ver que temos os itens do menu aqui aparecendo. Oh, a propósito, o efeito de focalização que ele pode ver, o traço aparente no item do menu de idade que é fornecido pelo pool Elemental, menu, elemento de menu por padrão. Assim, você pode alterar isso no efeito de focalização se quiser aborrecer o gerente aqui agora é que não vemos mais o logotipo. Podemos ver os itens do menu, mas não vemos o logotipo. O que está acontecendo aqui? É aqui que eu gostaria de apresentar a você o conceito do índice Z. Agora vamos voltar aqui. Em primeiro lugar, movemos a cor de fundo para o cabeçalho. Não precisávamos mais. Mas dê uma olhada nisso. Vou passar para o avançado. Aqui você tem isso. Opção, mas muito, muito importante, muito poderosa chamada índice z. Vou dar a este um valor de duas atualizações. Vamos voltar aqui. Vamos fazer uma atualização muito difícil. E assim. Agora você pode ver o logotipo aparecendo. Diretoria. Espere um segundo. O que exatamente aconteceu? Veja esse valor de índice Z aqui. Sempre que você tiver um elemento, uma seção sobrepondo outra seção, talvez você queira ser capaz de dizer ao Elemental quais desses elementos você deseja mostrar primeiro basicamente, o que não vai. Você quer trazer na frente do outro? Neste caso, agora temos a imagem binária sobrepondo nosso cabeçalho. Queremos que o cabeçalho seja influenciado para que possamos ver o logotipo e o menu principal. Como tal, você terá que dar um número de índice z mais alto ao elemento que você deseja que apareça na frente. Desde que demos ao cabeçalho o valor do índice Z de dois. Deixe-me realmente ir para a seção segurando nossa banana. Então deixe-me editar com elementar. Vamos para a seção do navegador aqui, avançado. Você pode ver aqui que não temos nenhum valor para o índice Z para a seção que contém o banner. Mas se eu vim aqui agora e eu dou um valor de três. Agora você pode ver que não vemos mais o logotipo, também não vemos mais o menu principal. Isso porque o valor do índice xin desta seção que contém a banana agora é maior que dois. Mas se eu der um agora você pode ver que temos o menu principal e o logotipo. É exatamente assim que o índice Z funciona. Agora, uma pergunta que você pode ter uma pergunta muito boa é, Alex, espere um segundo. Antes de darmos o valor desse índice de dois para o cabeçalho. Como ainda podemos resolver o menu principal? Mas não vimos o logotipo. Serei 100% honesto com você. Não sei exatamente por que isso aconteceu. Suponho que talvez haja algum código dentro de elementos que sempre dá prioridade ao menu principal para sempre mostrar. Novamente, pode ser algo muito, muito simples que eu simplesmente estou perdendo. Não tenho certeza no limite. Peça desculpas por isso, mas eu gostaria de ser honesto com você. Mas apenas pegue pelo que é. Sempre que você quiser introduzir um tipo de situação em que você tem um elemento sobrepondo ao outro e você deseja que os elementos automáticos por trás do show na frente simplesmente dê a ele um valor de índice Z mais alto. Uma coisa que você deve ter notado é o espaço em branco repentino que não está aparecendo aqui no topo. E isso acontece porque elementar, por padrão, em muitos casos, adicionaremos um padrão de dez pixels ao redor dos elementos. Então, uma maneira de ignorar esse tipo de problema, é simplesmente editar a seção que tem o espaço em branco neste caso agora é meu cabeçalho. Então deixe-me ir em frente e editar o cabeçalho elementar. Vou para esta seção em si. Então edite a seção e, em seguida, convide aqui onde você tem a lacuna de colunas. Vou dizer que não há lacuna, nenhuma lacuna. Vamos atualizar basicamente dizendo que não há lacuna. Estamos dizendo: Ei, não queremos nenhum padrão em nenhum lugar. Agora, isso será lido no espaço em branco. Mas agora note que porque nós dissemos Não, sem lacunas. Agora, a coluna segurando um logotipo não tem mais nenhum padrão entre o logotipo e a parte superior da tela. Então, simplesmente vá para a coluna segurando o logotipo. Vá para o padrão avançado aqui, apenas damos a ele, digamos, dez pixels de preenchimento na parte superior. Atualizações que resolverão o problema ou incidências. Portanto, esses são alguns dos problemas muito pouco irritantes que você pode encontrar ao usar elementar e como ignorá-los. Mas quase pronto. Vamos seguir em frente e criar o cabeçalho móvel para nosso cabeçalho para a primeira página. E é exatamente a mesma coisa que fizemos anteriormente. Vamos entrar aqui agora, duplicar a seção inteira. E vamos sair, desça aqui para a seção de edição de cabeçalho móvel. Vamos ao estilo da cor clássica de preto. E então o que precisamos? O que mais precisamos fazer? Precisamos mudar para o modo responsivo. Vá para celular. E agora aqui, edite a coluna, vamos dizer 50%. Faça o mesmo para a coluna segurando o menu principal. E depois diga 50%. Podemos editar o menu aqui, alinhado à direita. Talvez o torne um pouco maior. Então, vamos para o estilo. Venha aqui até o botão de alternância. O tamanho, torná-lo um pouco grande. Para o logotipo também. Vá para estilo, largura máxima, 100%. Sim, também precisamos fazer o show hide ou opções, tão avançado. Vamos para o responsivo. Para esta seção e esta seção segurando o logotipo e o menu de demanda. Vamos entrar aqui para o Advanced e depois responsivo. Vou dizer esconder no convés, Pare, Oculte no tablet, mas depois mostre no celular. Vamos agora para o antigo cabeçalho original, edite esta seção. Vá para Avançado, vá para responsivo. Simplesmente se esconda no celular, e é isso. Então, vamos avançar e atualizar. Espero que eu não tenha esquecido de nada que voltou aqui. Atualize a página. Vamos ver o que temos. Certo, tão original à frente ou eu me atrevo. E esta é uma visão oblíqua parecendo boa. E agora esta será a visão móvel. E David é exatamente como fazer exatamente a mesma coisa no produto Elementor que fizemos com o cabeçalho e o rodapé Elementor são plugins. Uma última coisa antes de eu fechar este vídeo, vamos para o back-end. Agora nos modelos. Desculpe, sob o construtor de temas em vez de nossos modelos em um construtor de temas, é aqui que você verá o novo cabeçalho que você criou. Você pode clicar dentro para editar. Mais uma vez. Então, se você quiser mudar o nome, é muito, muito simples. Você vem aqui até o botão Configurações e, em seguida, aqui, podemos chamar este de cabeçalho inicial. Podemos chamá-lo de casa, casa, o cabeçalho inicial basicamente. E então podemos dar ao cabeçalho da ordem o nome global. Se você quiser alterar as condições para este plano, a cabeça ou talvez você queira usar o mesmo cabeçalho em uma página diferente. Aqui em baixo, você tem as opções de salvamento, você clica lá. Agora aqui você terá acesso à tela. Nossa opção de condições. É aqui que agora você pode entrar, agora talvez mudar para uma página diferente e assim por diante. E isso é basicamente para criar o cabeçalho da página inicial, tanto nas versões desktop quanto para dispositivos móveis usando o Elementor Pro. Obrigado por assistir. Vejo você na próxima aula. 27. Construindo a página de contato com o Elementor Pro: Illumina mostra como reconstruir a página de contato usando o Elementor Pro. E, especificamente, vamos trabalhar com o elemento elementar pro form. Vou para o backend. E antes de tudo, vou desativar o plug-in de formulários WP que não precisávamos mais. Então, vou desativar. E vamos voltar para a página de contato. E, obviamente, quando eles vão dizer qualquer formulário de contato mais. Mas vou para Editar com Elementor agora. Como é claro que estamos usando elementos são profissionais, temos o elemento formulário, que é absolutamente fantástico. Você vai encontrá-lo no profissional, você vê aqui mesmo formulário. Vou me deixar clicar aqui e realmente remover esse bloco porque não tínhamos mais as formas lipídicas. Mas não tome nenhum formulário e, em seguida, basta colocá-lo no título Fale Conosco. Assim como com o plugin WP forms por padrão, você terá um formulário de contato muito, muito simples que terá três campos de nome, e-mail, mensagem, aqui mesmo. Esses são os campos que você pode adicionar. Outro campo como você clicar em Adicionar item aqui, onde você tem o tipo, você terá diferentes tipos de combustíveis. Você pode adicionar hora do dia. Ele pode até adicionar uploads de arquivos. Portanto, se você quiser que seus possíveis assinantes ou clientes anexem arquivos para enviar para você, você tem esse campo. Você também pode integrar elementar com a captura do Google. E então você pode usar a versão recapture um e a versão três aqui para segurança. E então você também tem como o honeypot e assim por diante, não adicionando campos adicionais. Então, vou deixar esses três. No entanto, isso é claro muito subjetivo, mas prefiro não ter os rótulos. Eu prefiro que acabasse de colocar os detentores em vez de cada campo indicando que tipo de campo é esse. Então, vou em frente e esconder o rótulo. Então, basta ter uma mensagem de e-mail de nome. Agora, para editar os combustíveis reais, você clica dentro de cada um nome de amostra específico. Vou clicar em Nome e convidar aqui Eu posso alterar o rótulo em si, posso alterar o espaço reservado. E é claro que vamos fazer com que seja necessário. E então, sob avançado, você terá coisas como o ID, bem como o código curto que faremos uso muito, muito em breve. O mesmo acontece com o e-mail aqui. É necessário e, em seguida, a mensagem, é claro todos fazem a mensagem, se necessário, também. Você pode fazer com que esse campo seja menor ou maior dependendo dos seus gostos, e é isso. Certo? Aqui você tem o tamanho de entrada para a imputa real para cada campo. Você pode torná-lo pequeno, médio, grande. Cabe inteiramente a você. Você tem botões. Você quer fazer os botões de tamanho médio, tamanho grande, mas esse é apenas o botão de envio em si. Você pode alterar o texto aqui para o próprio botão enviar, e assim por diante. Agora, é aqui que as coisas ficam muito, muito picantes. Ações após o envio, o que acontece depois que o usuário clicou em Enviar? Bem aqui? Por padrão, as ações já foram ativadas. Colete envios, que mostrarei em apenas um segundo. E, em seguida, envie um e-mail, porque esses dois estão ativos por padrão, você clicou em envios aqui e depois tem e-mail. Agora coleta envios que você realmente veria no back-end. Deixe-me mostrar-lhe rapidamente. Você verá no back-end, assim que as pessoas começarem a enviar o formulário de contato aqui, onde você tem elementar em envios da UCI aqui, você pode ter envios. E é aqui que você começa a ver o nome da pessoa e assim por diante, fato, realizará um experimento muito, muito, muito em breve. Mas é isso para os envios. Agora, envie um e-mail aqui. Você deseja receber um e-mail informando que alguém enviou um formulário de contato em seu site. Aqui, você pode escolher o endereço de e-mail para receber identificação. Claro, vou colocar minha própria luz de e-mail de administrador lá. E, claro, por padrão, você tem que submeter nova mensagem do nome do seu site. Você pode personalizar isso, é claro. Em seguida, a mensagem conterá todos os campos. No entanto, aqui você tem o e-mail do, do nome que deseja usar ou escolher os dados fornecidos pelo usuário. Basicamente, o e-mail do deve ser o e-mail, todo o usuário. O que você quer fazer aqui é isso, ok? Você iria para os campos do formulário, acessaria e-mail, vá para Avançado e, em seguida, convidaria aqui, pegaria o código curto. Então copie o código curto, volte aqui para e-mail. E qualquer pessoa aqui por e-mail. Não era simplesmente colar o ID do e-mail para que você possa realmente ver o e-mail da pessoa e, em seguida, do nome também, fazer exatamente a mesma coisa, ir para o campo Nome Avançado e, em seguida, simplesmente pegue o atalho para o campo de nome. Volte para o e-mail e, em seguida, forneça aqui do nome. Basta colar isso. E então eles respondem para serem definidos para o e-mail, é claro, porque você gostaria de responder ao endereço de e-mail da pessoa. E é isso. Você pode adicionar seu CC, você é cego, cego, cópia e assim por diante. Você também pode adicionar os metadados aqui, como a página que você é uma pessoa real visitada, a data, a hora e assim por diante. Sin como HTML ou plano. Isso é muito, muito, muito subjetivo. Isso dependerá do provedor de serviços de e-mail. Se também tiver passos frase lambda squiggly, mostre o que é isso. Se você voltar para seus campos de formulário, talvez você queira criar como se talvez você formará é realmente muito, muito longo por algum motivo e você queira dividi-lo. Quando você estiver adicionando seu item no tipo, você terá uma etapa. Depois de ter o passo agora, você tem o próximo. Então, após a etapa, você pode começar a adicionar mais campos novamente. Então, o que acontece é quando eles preenchem os combustíveis falsos na primeira seção e clicam em Avançar. Ele os levará para a próxima seção para o formulário, isso é basicamente o que as etapas, como você pode ver, este é o primeiro passo aqui. E então você pode ver o passo dois lá à direita. É para isso que é usado. as etapas que são Configurações. E então você também tem as opções adicionais como Ei, você quer personalizar mensagens como, ok, o senso térmico com sucesso, você entrará em contato com você em 24 horas, coisas assim. Você tem essa opção aqui. Mas eles me deixarão esquecer de voltar para as ações após o envio, você tem muitos, além de envios clicados, e-mail, você pode ter e-mail para você pode redirecioná-los para um página separada. Você tem um webhook. E, claro, se você estiver usando um software de gerenciamento de e-mail como nosso Mailchimp, campanha ativa, você também pode conectá-los aqui. Você pode conectá-los ao Slack Discord, abrir também fornecer uma mensagem pop-up. Então você tem muitas opções para configurar. Turno alternativo. O que acontece depois que o usuário enviar o formulário? É basicamente isso. Vamos ir em frente e fechar esse. E isso é, vou seguir em frente agora e simplesmente atualizar. E, claro, vamos dar uma olhada na nova página aqui. Opa, minha internet está se comportando mal. Mais uma vez. Minhas desculpas. Certo. Isso agora você pode ver o novo Formulário de Contato construído com elementos de limão Pro Arte. Vou mostrar um exemplo dos envios. Vou pausar o vídeo e simplesmente enviar uma mensagem e então você verá os resultados aqui. Bem-vindo de volta. E como você pode ver agora, eu realmente enviei para formulários de contato, preenchidos para entrar em contato de um a sete navegadores. Um de John James e depois um de Bob Billy em yahoo.com. Agora, eu deveria ter apontado isso anteriormente. Para o formulário de contato, você pode alterar o nome aqui, onde você tem o nome do formulário. Então você pode ver que eu só vou ter que mudar o meu para o formulário de contato. E notei isso quando envio o primeiro formulário das academias John. Você pode ver o formulário correto, a nova forma de Nemo. É por isso que o novo formulário porque não alteramos o nome. Então, na segunda vez que mudei o nome para formulário de contato, enviei um novo formulário da mobilidade e é aí que agora pode dizer que o outono agora diz nosso formulário de contato. Então é basicamente isso. Você tem as IDs, você tem a página que o formal enviou. E, claro, você pode ver a mensagem real em si. Então você clica em ver aqui. Você pode ver o nome completo, o e-mail e, em seguida, a mensagem real do usuário e convidado. Você tem as informações de metadados adicionais quando a mensagem foi enviada, qual navegador foi usado e assim por diante. É basicamente assim que o formulário de contato com o Elementor Pro Walks. Obrigado por assistir. Vejo você na próxima aula. 28. Construindo o modelo único de Post: Agora deixe-me mostrar uma das coisas mais legais que você pode fazer com elementos de pro e isso é criar um modelo para suas postagens únicas. Antes de fazer isso, deixe-me mostrar rapidamente como você pode reconstruir a página do blog. Lembre-se de que usamos o elemento posts dos complementos essenciais para esta página. Ambos os elementos são profissionais, é claro, você tem os elementos especificamente para exibir suas postagens. Só estou te mostrando muito rapidamente como ele funciona. Você vai encontrá-lo em Pro, é isso aqui, postagens. Você o deixa lá dentro. E, claro, você pode escolher o número da pele de postagens, mostrar imagem, altura, imagem. Você tem todas essas opções lá. Você tem a consulta que deseja extrair das postagens que são vencidas nela, pool de uma seleção manual ou páginas. Você gostaria de incluir por termo? Dessa forma, agora você pode adicionar coisas como categorias, tags e assim por diante. Você tem suas opções de paginação. Você poderia apenas tentar e opções e todas essas coisas legais, mas não é para isso que estamos aqui. Deixe-me mostrar como construir as postagens de primeiro ângulo do modelo. Agora deixe-me escolher um postado aqui moda em Istambul. Isso é o que temos por padrão. E você pode ver que não parece bom. Isso porque o tema Olá é o que foi usado para exibir esta postagem. E é muito, muito, muito feio agora, eu fiz muito especificamente a área de conteúdo deste post muito, muito tempo quanto você pode ver. Mas há uma razão para isso. Vou te mostrar exatamente por que escolhi fazer isso. Deixe-me primeiro ir em frente e criar o modelo para nossas postagens. Então, vamos para modelos elementares, desculpe,. E então aqui, construtor de temas. E vamos adicionar o construtor para uma única postagem aqui, clicando lá. Nenhum modelo encontrado deseja criar um. Sim, então eu vou clicar em adicionar novo como eles são, é claro, com elementos ruins. Você terá acesso a uma grande variedade de modelos. Você pode vê-los aqui. Todas as quatro postagens individuais , tantas, mas vou seguir em frente e fechar isso. Vamos criar nosso modelo. Agora, por padrão, como estamos criando o modelo para uma única postagem, você terá acesso a esses elementos na única categoria. Estas são para suas postagens, portanto, obviamente, não exibirá o título da postagem, então vou deixar isso lá para o título da postagem. Agora, por padrão, o elemental irá extrair as postagens mais recentes para usar como amostra ao visualizar o conteúdo do modelo. Se você permitir que você altere a seleção, venha aqui para as configurações. Aqui você terá a frase anterior, você clica lá. E então aqui, posso simplesmente digitar na moda. E, em vez disso, será, porque este é o que eu quero usar todos escolhem moda em Instanbul. Clique em Aplicar e visualizar. Agora, o elemental usará o conteúdo desta postagem para nossa amostra. Ok, deixe-me fazer algumas mudanças. Os inaladores fazem estes e o H2 alinhados ao centro. Vamos tornar o texto um pouco maior. Talvez 58 pixels, 56 pixels tão bem. Vamos adicionar um pouco de preenchimento. Na parte superior, 25 pixels, dois pixels na parte inferior também. Tudo bem, Qual é a próxima imagem em destaque? Vamos arrastar isso para lá. Faça este f2. E, claro, você pode ver a imagem em destaque do pós-sessão e de Istambul. O que vem a seguir? Você tem as informações da postagem. Você pode deixar isso lá dentro. Por padrão, ele mostrará ao autor os comentários de data, hora. Não quero exibir o autor. Eu não quero exibir o nome e também a hora, então nós os movemos. Ele deixa data e comentários. Você pode modificar esses dois, é claro, basta clicar nos dados como exemplo e dizer, por exemplo, o ícone, posso simplesmente ir em frente e remover o ícone, preencher um. Você pode adicionar metadados extras, então você clica em Adicionar item. E então aqui, você pode fazer coisas como adicionar os termos como a categoria e assim por diante, fantasia e assim por diante. Tudo bem, vou ir em frente e fechar isso. Portanto, só temos data e comentários. Vamos voltar aos nossos elementos aqui. Da próxima vez que vamos adicionar será a postagem do nosso conteúdo. Então, vamos entrar no conteúdo da publicação lá embaixo, logo abaixo das informações. Deixe-me confirmar por que isso parece estar acinzentado. Estou bem. Ele está exibindo aqui que temos o conteúdo do post muito, muito, muito longo ou largo. O que vem depois? O que gostamos de exibir? Podemos exibir a navegação de postagem. Temos navegação de postagens. Vamos deixar isso lá dentro. Agora temos o post anterior, o próximo post, é claro que você pode estilizá-los o quanto quiser. E, finalmente, podemos adicionar nossos comentários de postagem. Então publique comentários ali mesmo na parte inferior. E é isso. Esse será o nosso modelo. Agora, por que eu fiz a área de conteúdo muito, muito longa. Quero mostrar como fazer uso de um novo elemento muito legal chamado rastreador de progresso. Você pode ter visto isso em algum blog específico antes de onde Você terá uma barra dizendo quanto do conteúdo foi consumido ou quanto conteúdo você ainda precisa ler antes de terminar o artigo. Esse é o rastreador de progresso aqui. Então o que eu vou fazer é isso, ok, vou deixá-lo no topo bem aqui, logo acima do título. Deixe-me apenas compartilhar como funciona agora você pode ver a ideia da barra de progresso se movendo, estamos nos movendo. Mas o problema é que, uma vez que a escola passou pelo bar, não o vemos mais. Qual é o ponto de ter isso se você rolar para baixo aqui e nem viu quanto do conteúdo resta. Bem, deixe-me mostrar um truque muito, muito legal. Vá para Avançado. Estamos editando o rastreador de progresso, a propósito, mercadorias para efeitos avançados de movimento. Aqui temos pegajoso. Diga que sim, vamos colocá-lo no topo. O que isso significa agora é que, uma vez que rolamos, você verá que o arco sempre estará lá. E você pode ver agora mesmo até chegarmos ao fundo, é quando a barra termina. Então é exatamente assim que fazer isso como um efeito muito, muito, muito legal. Você pode fazer isso para o fundo também. O que não acho que a dúvida funcionaria porque você realmente terá que rolar para baixo no ar inferior. Não, na verdade não funciona. Nunca tentei. Então, basta ir com o top. Vá com o topo. E, claro, no estilo, você pode mudar a lei de chamada de progresso. Você pode adicionar uma borda, você pode ter um raio de borda de ocultação e assim por diante. Para o verificador de progresso real em si, o progresso sempre será relativo ao conteúdo POSTAR. Então alterne isso para publicar conteúdo e não conteúdo de publicação anti-página. Você tem que verificar nossos tipos, chamados ou horizontais. Este é o estilo circular, que pode ver que eu pessoalmente não gosto disso, então vou apenas com a horizontal. Você pode adicionar porcentagem se quiser. Então, dirá vinte e cinco por cento, trinta e três por cento, e assim por diante. Você tem todas essas opções lá para você. É isso. Vou seguir em frente e agora clicar em Publicar. E assim como com um modelo, você terá que escolher onde você levaria para exibir esses modelos específicos. Vamos adicionar a condição agora por padrão, ele dirá tudo singular. Tenha cuidado que todas as horas se referem a todas as páginas únicas incluídas na sua primeira página. Portanto, não é tudo singular. Clique na seta suspensa aqui. Agora você verá postagens. Basta escolher postagens. É isso. É isso. Isso é tudo o que você precisa. Vai em frente e agora clique em salvar e fechar. E é isso. Então, vamos para a primeira página primeiro, apenas para confirmar a primeira página como ir para os artigos. E vamos escolher, digamos que a majestosa cidade de Glasgow terá que atualizar esta página. E lá está ele. Certo. Role para baixo. Role para baixo. Agora, obviamente, a barra de rolagem se move muito, muito rapidamente porque a área de conteúdo aqui é muito, muito, muito curta. Como você pode ver, é apenas um parágrafo ou dois parágrafos, basicamente. Talvez não seja o melhor exemplo. Vamos com a moda em Istambul. Mais uma vez, terei que atualizar esta página para limpar a moda do cache em Istambul. E eles você vai, esse é o modelo para nossas postagens individuais. Temos a ferramenta TI, temos a imagem em destaque, temos as informações sobre a pose que os dados foram publicados, número de comentários, a área de conteúdo, a navegação de postagem para o post anterior e o próximo post. E, claro, a seção de comentários. Então é assim que criar um modelo de postagem para suas postagens usando o Elementor Pro. 29. Dicas Elementor Pro: Tudo bem, então estamos praticamente no final do curso. E antes de concluir, lambdas lhe dão mais algumas dicas gerais e conselhos sobre como trabalhar com a versão paga do elementar. Agora você obviamente tem acesso a muito mais elementos profissionais que não podemos cobrir. Mas há um que eu realmente deveria ter adicionado nos modelos de postagem única, e esses são os botões de compartilhamento. Você o encontrará logo abaixo do índice por uma contagem regressiva extra e códigos de bloco, os botões de compartilhamento. O que isso faz é que ele permite que seus usuários ou seus assinantes compartilhem basicamente seus artigos nas mídias sociais. Então, quando você deixa isso lá, você pode escolher as plataformas. Talvez você queira que eles possam compartilhar no Facebook, no Twitter ou até mesmo por e-mail. Você terá essa opção lá dentro. É muito, muito fácil de usar, não deixe de conferir. Agora, com o Elementor Pro, você também tem acesso a coisas como salvar modelos e salvar widgets ou elementos como Global. Um exemplo aqui é esse. Certo? Digamos, por exemplo, para esta seção inteira, deixe-me usar o botão Navegador aqui. Para esta seção contendo a banana, bem como o título. Se eu quisesse reutilizar esta seção em outro lugar, eu poderia clicar com o botão direito do mouse e, em seguida, simplesmente salvar como modelo. Eu o salvo como modelo. Posso dar um nome, digamos que a bana global, só para reutilizar em outra página, posso salvar a página. E estará sob modelos, além dos cabeçalhos e rodapés que criamos antes. Mas agora dê uma olhada nisso. Ok, se eu quisesse reutilizar esse modelo em outro lugar, deixe-me ir em frente e ver esta página e abrir outra página. Então, digamos, por exemplo, a página de contato. Se eu quisesse reutilizar isso por não aqui, basta ir para Editar com Elementor. Em seguida, faça uso do elemento modelo, que você encontrará no pro na parte inferior, acredito que se não me engano, está bem aqui. Você verá o modelo aqui. Basta arrastar o trabalho desse modelo lá. E agora ele pedirá que você escolha o modelo que deseja usar, já que chamamos nosso banner global. Agora você pode ver global agora. Eu adicionei e lá vai você. Então agora você tem a ideia de cabeçalho ou que a ideia banal com o promontório onde viajar significa aventura. É assim que você pode reutilizar seções repetidas vezes em seu site. Mas também poderíamos salvar elementos únicos ou até colunas como widgets globais. Como exemplo, digamos que eu queria reutilizar, digamos esse particular, nosso chamado à ação ou ideia por essas ofertas e pacotes. Vou clicar lá dentro. E eu poderia clicar com o botão direito do mouse no próprio elemento dose e pacotes e depois dividir aqui você verá salvar como um global. Clique em salvar como global. E posso chamar isso de widget Call to Action. Assim como exemplo, posso salvar isso. Outra coisa é, se for solicitado a ir para outra página novamente, digamos que a página de contato mais uma vez. E eu queria usar exatamente esses mesmos elementos. Tudo apenas a fazer é ir para o global aqui. E agora você pode ver que as chamadas para realmente lê-lo já estão disponíveis. Eu posso simplesmente clicar em arrastar e depois soltá-lo de qualquer maneira, eu quero soltá-lo, então apenas pequenas seções de diferença. Você pode dizê-los como modelos e nós usamos, mas os elementos reais em si, você pode usá-los. Você pode vê-los como widgets globais. E nós os usamos em todo o seu site o quanto você quiser. Portanto, esses são outros recursos adicionais disponíveis para você com elementos do Probit, novamente, você tem acesso a tantos outros elementos muito interessantes, slides, galeria, até mesmo os elementos de login. Então você quer personalizar sua página de login com o Elementor Pro. Você tem o elemento para essa lista de aplicações de título animado. 30. Elementor para conclusão do curso: Bem, é isso. Até o final deste Courseware estão mostrando como criar um site totalmente funcional usando as versões gratuitas e pagas do Elementor. Foi um prazer. Espero que você tenha gostado do curso se você fez, por favor, construa, dado a ele uma avaliação de cinco estrelas, uma revisão por escrito, informe as pessoas quanto você gostou do curso mais tudo. Então, caso você não tenha comprado um elemento de sonda, o que é muito para fazer isso. Por favor, use meu link de afiliado. O que isso significa é que receberei uma pequena comissão. Quando você usa meu link para a Elementor, é uma ótima maneira de me apoiar e apoiar o que estou fazendo. Aqui. Finalmente, na próxima seção, faremos atualizações de conteúdo para o curso, nossos tópicos especiais, lições especiais. Então, se você estiver interessado em aprender mais sobre elementos ou não se esqueça de conferir. A próxima seção está abaixo. Meu nome é Alex, foi um prazer. Espero vê-lo em um dos meus outros cursos também. Eu penso tanto se tudo Perguntas ou comentários sobre qualquer coisa abordada neste curso, é claro, sempre sinto que me contatando. Estenda a mão para mim. Mais do que feliz em responder a todas as suas perguntas, cadeiras e tudo de bom. Vejo você em breve.