Build a Restaurant Website With WordPress + Elementor (Free Plugins)

1. 2 Intro: E bem-vindo de volta a outra incrível aula de web design em Wordpress comigo, Ken Messa Se é a primeira vez que você me vê, estou ensinando as pessoas a criar lindas páginas de destino e sites totalmente funcionais com Wordpress e plug-ins gratuitos do Wordpress. E nesta aula, mostrarei como criar um site de restaurante totalmente funcional do zero usando o Wordpress Elementor e outros plug-ins gratuitos Você não precisará pagar nada para ter seu site instalado e funcionando. Quando terminarmos esta aula, você terá um site que poderá começar a usar imediatamente para receber pedidos e reservas para seu restaurante. E todo o sistema de pedidos e reservas será integrado a um aplicativo gratuito para celular que você pode baixar na loja de aplicativos ou na playstore e começar a receber pedidos quando os clientes fizerem seus pedidos no site que você está criando no momento Mas antes de prosseguirmos, quero contar um pouco sobre mim. cerca de cinco anos, precisei de um site para mostrar e vender meus serviços de design gráfico Eu trabalhava como designer gráfico há alguns anos, mas queria trabalhar por conta própria. Então, eu queria criar um site por meio do qual pudesse vender meus modelos e serviços de design gráfico , como no Free Peek ou Shadow Stock Foi quando me deparei com o Elementor e, na imprensa, percebi que poderia criar meu próprio site e decidi experimentá-lo Mas eu mal sabia que essa descoberta não só preencheria minhas necessidades pessoais, mas também daria início a um novo capítulo em minha carreira. Depois de assistir alguns tutoriais do elemento e criar meu próprio site, algo mágico aconteceu Começaram a chegar solicitações de pessoas pedindo que eu criasse sites para elas Por isso, passei alguns anos trabalhando para clientes de web design, criando vários sites para várias empresas. Avançando até hoje, e aqui estou, não estou mais assumindo projetos de clientes, mas dedicando meu tempo a compartilhar minha experiência básica com todos vocês E, como mencionei, mais uma vez, abordaremos tudo o que você precisa saber para criar um site abrangente com o Wordpress. Desde a criação de uma página inicial acolhedora até a apresentação do seu menu compartilhamento da história do seu restaurante E até mesmo incorporando um sistema de pedidos e reservas totalmente funcional para que você possa começar a receber Imediatamente, mergulharemos aspectos práticos do Wordpress e do Elementor E vou guiá-lo passo a passo à medida que damos vida à presença on-line do seu restaurante. Ao final deste curso, você terá as habilidades necessárias não apenas para criar um site de restaurante, mas também para usar a web press para criar uma grande variedade de sites. Porque eu sei que alguns de vocês podem estar exatamente onde eu estava antes de eu saber como criar sites. Você quer saber como criar sites para si mesmo, em vez de pagar centenas ou milhares de dólares às pessoas para fazer isso. Porque você provavelmente tem várias ideias para diferentes sites e plataformas on-line, mas não sabe como fazer isso sozinho. Alguns de vocês podem até querer entrar no ramo de web design e ser pagos para criar sites para clientes. Então, quando terminarmos esta aula, você terá uma base sólida e adequada sobre como criar o site que desejar. Essa aula é para você. E, a propósito, esta aula é o cumprimento de um pedido feito por uma das minhas alunas, Bridget Xi Grite para Bridget por fazer esse pedido. Se alguém tiver uma ideia para um site que gostaria que criássemos na próxima aula, vá em frente e coloque-a na guia de discussão abaixo deste player de vídeo. Mal posso esperar para ver o que você criará. Então, se você está tão empolgado quanto eu, nos vemos na próxima lição. 2. Project Demo: Agora, queremos dar uma olhada em nosso projeto de classe. Uma das melhores maneiras de aprender uma habilidade é criando algo. Isso é o que vamos construir, este site aqui. Eu só quero levar você para um pequeno tour pelo site. Enquanto preparava essa aula, criei este site com antecedência. Eu o construí por um motivo, para que tenhamos algo em que analisar. Quando construímos a seção de heróis aqui, podemos dar uma olhada nisso e depois acessar Wordpress e começar a construí-lo. Ao analisarmos o que estamos construindo, temos um ponto de referência. Outros cursos ou aulas podem ter uma abordagem em que você está apenas improvisando Você está apenas construindo algo do nada. Você não sabe exatamente o que está construindo nesta classe. Teremos a chance de voltar a este site de referência, dar uma olhada na seção que estamos construindo, como ela está estilizada e voltar ao nosso editor Esta é a seção de heróis e, se eu a recarregar, você notará como ela está bem animada Cada elemento é animado , incluindo a imagem de fundo. E quando começarmos a rolar, você notará que temos um cabeçalho fixo que permanece no topo, independentemente de onde estamos no site, o que é um recurso interessante Você não quer que sua barra Nab fique escondida durante a rolagem Cada elemento aqui é animado. Se eu recarregá-lo novamente, vamos rolar até a parte inferior, até a parte inferior Vamos ver como fazer tudo isso. Acho que isso dá vida ao seu site para que ele não seja apenas um site estático. A outra coisa que quero mostrar é que esses botões abrem o sistema de pedidos e reservas Se clicarmos nesse menu aberto e fizermos o pedido, ele abrirá o menu e eu mostrarei como criar esse sistema. Um cliente pode vir aqui e escolher, talvez ele só queira um pouco de café. Eles selecionarão o café e poderão compartilhar algumas instruções especiais. Eu quero que tenha. Talvez eu esteja vindo com dois convidados, seremos três de nós. Podemos adicionar isso ao carrinho. E eu já estava fazendo alguns testes com ele. É por isso que tenho dois itens no meu cartão. Deixe-me remover essa pizza. O cliente pode fornecer todos esses detalhes aqui. Método de pedido, pegue, tudo bem. Economize esse tempo disponível o mais rápido possível. Podemos editar isso. Eu já os havia configurado durante o teste e é por isso que eles já salvaram nossa forma de pagamento. Aqui, será dinheiro ou cartão no balcão de coleta, guarde isso. E agora estamos prontos para fazer nosso pedido. Se eu clicar, por favor, pegue um pedido. Estou fazendo meu pedido agora no meu telefone, aqui mesmo. Este é o aplicativo sobre o qual eu estava falando. Você terá esse aplicativo se estiver operando o site do restaurante. Aqui está o pedido pendente. E eu tenho um botão verde aqui para aceitar o pedido. Mas eu também deveria poder ligar para a pessoa e confirmar com ela. Talvez se eu quiser que eles paguem antes de aceitarmos o pedido, possamos fazer isso. Se eu aceitar aqui, sou obrigado a fornecer o tempo de entrega ou o tempo de espera de talvez 30 minutos, tempo de coleta, o que significa que eles devem vir buscá-la após 30 minutos. Agora, como eu aceitei esse pedido, é isso que o cliente verá na plataforma. Retirada confirmada do pedido em 30 minutos. Deixe-me fechar isso. Também temos as reservas de mesa, número de pessoas, talvez a data de amanhã para três pessoas. Digamos que estamos chegando às 10:30 da manhã, temos uma reunião, talvez tenhamos alguns comentários especiais. temos uma reunião, talvez tenhamos alguns comentários especiais Em seguida, gostaria fazer o pedido com antecedência e ter sua comida favorita pronta na chegada? Sim, faça o pedido agora, para que eu possa fazer meu pedido. Talvez café, instruções especiais. Seremos três de nós para adicionar ao carrinho e, em seguida, podemos ir até o carrinho e repetir as mesmas instruções aqui. Reserva de mesa. Guarde isso. Não, espere. Reserva e pedido de mesas. Tamanho da mesa para três pessoas, 1030. Economize esse método de pagamento em dinheiro. Agora podemos fazer nosso pedido. Há uma mensagem no aplicativo mais uma vez. E lembre-se de que este aplicativo é 100% gratuito. Vou voltar e ver o pedido pendente e posso pressionar aceitar aqui, no botão verde. Eu posso ir em frente e aceitar isso. Agora, aqui na tela, o cliente verá que seu pedido, sua reserva foi confirmada. Vamos fechar isso. Agora, à medida que rolamos até aqui, é claro, veremos como criar cada seção desta página. Temos um pequeno menu aqui, estamos exibindo alguns dos alimentos que temos. E eu vou te mostrar como criar esse menu usando um plugin incrível. Esse é o mesmo botão para carregar esse menu para permitir que o cliente faça um pedido. Este é o mesmo botão de reserva para fazer uma reserva. Agora, eles são chamados de call to actions. Toda página de destino precisa ter chamadas à ação, porque esse é o propósito de uma página de destino. Para fazer com que o usuário realize uma ação. Nesse caso, é fazer um pedido ou fazer uma reserva. E aqui temos uma galeria. Podemos clicar em Abrir galeria. Ele abrirá em uma nova guia e eu mostrarei como fazer isso. Seremos redirecionados para a página da galeria aqui. Teremos imagens de diferentes atividades. Podemos visualizá-los em diferentes categorias, funcionários, mesas de cozinha ou todas. Lá vamos nós. Temos a página sobre, basicamente, isso é tudo sobre layout. Também veremos como criar essa página. Ele tem os mesmos botões de call to action porque são importantes. Temos um formulário de inscrição no boletim informativo aqui se eles quiserem acompanhar o que está acontecendo com o restaurante. Claro, deixe-me mudar para a página de contato. Eles podem entrar em contato com a gerência ou o administrador do site. Este é apenas um site básico, mas tem tudo o que você precisa em um site de restaurante para administrar seus negócios com sucesso. Eu tenho dois objetivos com isso. Quero ajudá-lo a criar um site real que possa ser usado em seu restaurante se esse for seu objetivo. Mas também vai equipá-lo com habilidades necessárias para criar sites em Wordpress Você entenderá o Wordpress e o fluxo de trabalho elementar para criar sites. Essa é apenas uma visão geral rápida do projeto em que trabalharemos. E depois de concluir seu projeto, não se esqueça de fazer uma captura de tela da sua página de destino e compartilhá-la com o resto da comunidade aqui Basta ir direto abaixo deste player de vídeo até a guia Projetos e Recursos. Aqui está um exemplo de uma das minhas aulas anteriores. Essa é a guia Projetos e Recursos. E aqui estão alguns exemplos de alguns dos projetos que os alunos publicaram aqui. Portanto, sinta-se à vontade para fazer uma captura de tela da sua página de destino e compartilhá-la com a comunidade Receba feedback de colegas e de seu professor. E acredito que, ao fazer isso, todos seremos capazes de crescer juntos. Então, se você está pronto e animado para começar, vamos falar sobre a compra um domínio e hospedagem para seu site, porque seu site precisa residir em algum lugar on-line. Te vejo em breve. 3. Buy Hosting and Domain Name: Bem vindo de volta. Agora você viu o que vamos construir. É hora de falar sobre onde seu site será hospedado. Cada site que você visita ou vê on-line é armazenado em algum lugar em um servidor. É por isso que o site está disponível para pessoas de qualquer lugar do mundo. Se eu clicar em um link que me leva ao seu restaurante, as páginas da web do restaurante serão carregadas a partir desse servidor fornecido pelo seu host. É a casa do seu site. Estou aqui no site do WordPress.org e estou especificamente na página O Wordpress tem seus hosts web recomendados. Vá em frente e leia esta página. É a hospedagem simples do WordPress.org. Como você pode ver, temos três webhosts recomendados pelo WordPress.org Temos o Bluehost , temos o Dream Host e temos o WordPress.com. Se abrirmos o Bluehost, aqui estamos Bluehost tem hospedagem Wordpress. Deixe-me clicar nele, ou talvez ir até aqui. Wordpress, hospedagem Wordpress. Aqui estão os preços dos diferentes planos que a Blue Host tem. Isso é 5,4 $5. Por mês, você tem 40 GB de armazenamento SSD e você pode hospedar três sites Sob esse plano de hospedagem, você pode ter três sites diferentes no mesmo plano de hospedagem. Vamos dar uma olhada no Dream Host. Vamos para a hospedagem Wordpress, a imbatível hospedagem Wordpress Vamos dar uma olhada nos preços, 2,95, vá para mais recursos e especificações de texto Número de sites : aqui você pode obter um por 8,95. Você pode obter sites ilimitados Você pode ter sites ilimitados nesse serviço de hospedagem para esses outros, é apenas um. Vá em frente e passe por tudo isso a seguir. Vamos dar uma olhada na terceira opção que eles oferecem é o WordPress.com Agora não confunda WordPress.com com o WordPress.org O WordPress.com é uma plataforma que permite criar um site em cima dele e cuida da o WordPress.com com o WordPress.org O WordPress.com é uma plataforma que permite criar um site em cima dele e cuida da sua hospedagem. Ele hospeda seus sites para você. WordPress.org é a organização que fornece o Wordpress que você baixa para o seu Por exemplo, se você estiver criando um site no Bluehost, precisará baixar e instalar o Wordpress Você o obtém no WordPress.org Se formos para a página inicial, você pode ver Agora, se eu quiser criar o Wordpress no meu host local que está aqui na minha máquina apenas para fins de desenvolvimento, para experimentar, antes de encontrar um host, posso baixar o Wordpress aqui. Mas se eu quiser criar um site e lançá-lo on-line, preciso ter um host. E quando eu compro um plano, o host me dá acesso ao painel. Cada host da web fornece um painel. E é dentro do painel que você instalará o Wordpress, e eu mostrarei como fazer isso. Também temos um serviço que não está listado pelo Werepress.org porque lembre-se essas são Mas existem muitos outros hosts da web que são incríveis. Pessoalmente, tenho alguns sites hospedados com o nome Chip. Agora vamos para a hospedagem compartilhada. Tudo bem, então se você está apenas começando e está apenas testando seu site, esse é o plano que eu uso quando estou começando uma ideia de negócio e quero testar as águas. Stella mais 2,98 por mês. Em primeiro lugar, você recebe um nome de domínio gratuito e site ilimitado. Isso significa que você pode ter Mike.com Você pode ter Ferguson.com Novo site de academia. você pode ter vários sites hospedados sob você pode Vamos supor que esses sejam apenas sites que você está testando. Você não precisa ter planos de hospedagem separados para testar ideias. Você pode simplesmente testá-los todos em um plano de hospedagem pelo qual está pagando 2,98 por mês Então. Quando um deles realmente começa e começa a funcionar muito bem, agora você pode obter uma hospedagem dedicada para ele separadamente. Isso é o que eu faço. Isso é o que eu recomendaria pessoalmente. Mas você é livre para escolher qualquer outro host que quiser dentre esses outros. Isso é tudo sobre hospedagem na web. Eu teria tido uma aula separada sobre a compra de um domínio. Mas comprar um domínio é bem simples. Você acabou de vir para Name Chip. E eu não tenho nenhuma afiliação com o Name Chip. Eu não estou recebendo nenhum dinheiro deles. É apenas o serviço que eu uso pessoalmente. Você pode acessar domínios, pesquisar nomes de domínio e pesquisar seu nome Digamos que Bebistra.com Se eu pressionar Enter, ele me dará opções diferentes e E eu posso adicionar ao carrinho e comprar o domínio que eu quiser. Você pode obter domínios muito baratos aqui. Seja criativo com seus nomes de domínio se o que você deseja for muito caro, como Betbstra.com, como você pode ver, é um nome de domínio premium e custa 34 Isso é muito dinheiro. Mas digamos que, como você pode ver, esse não seja um domínio premium. São apenas 10.28 Seja criativo e procure maneiras de conseguir um nome de domínio barato com o qual você possa conviver Basicamente, trata-se de comprar hospedagem na web e um nome de domínio para o seu site. Na próxima lição, vamos falar sobre como instalar o Wordpress dentro do seu painel depois comprar sua hospedagem na web e um nome de domínio. Te vejo em breve. 4. Install WordPress: Bem-vindo. Agora é hora de instalar o Wordpress dentro do nosso painel. Agora, independentemente de qual postagem na web você decidiu usar, se você não estiver usando o chip de nome, a instalação do Wordpress é praticamente a mesma. Temos que acessar o painel e, em seguida, entrar em nosso painel e instalar o Wordpress lá para que eu possa acessar meu painel. Dentro do chip de nome, preciso primeiro fazer login no meu chip de nome, fazer login. Agora, basta entrar em sua postagem na web. Preciso verificar isso. Deixe-me verificar muito rapidamente. Tudo bem Envie isso. Aqui estamos. Vou diretamente para minha lista de hospedagem. Essa é uma lista dos diferentes pacotes de hospedagem. Como você pode ver, eu comprei apenas um. Eu vou para o painel de. O motivo pelo qual entrei na minha conta com chip de nome foi para poder entrar no meu painel clicando aqui. Seu host pode fornecer uma maneira de acessar a página de login do seu painel C para que você não precise acessar sua conta de host. Mas é assim que eu fiz. Agora, voltando ao meu painel, independentemente do seu host, seu painel C terá a maioria desses recursos aqui. E um desses recursos é esse Wordpress. Ele estará no instalador do Staculus Apps. Vou clicar em Wordpress e serei redirecionado para o serviço Softaculus Como você pode ver, este softaculus será levado diretamente para a página de visão geral do Wordpress Agora, essas são minhas instalações atuais. Como você pode ver, eu tenho uma instalação do Wordpress sob este domínio. Podemos instalar um novo. Vou prosseguir e instalar. Agora eu tenho alguns nomes de domínio, um deles sendo VFX Port.com e esse é o que vou usar no menu suspenso Se você tem um certificado SSL, pode escolher HTTPS e eu gosto de ter esse prefixo de Clique fora, ele verificará e confirmará que você tem um certificado SSL. Como você pode ver, esta é a versão do Wordpress que temos atualmente. Obviamente, vou deixar esse espaço em branco porque não quero que meu nome de domínio tenha uma extensão de wwwfport.com Vai ser apenas vifport.com. Em seguida, vamos dar um nome ao nosso site Vou lhe dar um restaurante. Vamos dar um breve slogan ou descrição. As melhores refeições da cidade. Essas são as credenciais de login que você usará para fazer login diretamente no painel do Wordpress se não quiser acessar o painel C. Então, tudo o que você precisa fazer é acessar o login do seu domínio e você será direcionado para a página de login. E então esse é um e-mail de administrador padrão gerado por espetáculos Neste e-mail administrativo, você receberá todos os alertas ou notificações do sistema, do seu host sobre o seu site, talvez alertas de segurança ou qualquer coisa desse tipo. Vou deixar todo o resto intacto, mas podemos abrir a guia avançada e, se você quiser fazer backup do seu site de tempos em tempos, deixe isso Por padrão, você pode dizer talvez uma vez por semana, rotação de backup, talvez duas cópias. Isso significa que, a qualquer momento, você sempre terá duas cópias do seu site, uma versão mais antiga e a versão com backup mais antigo. Com isso, eu também quero conferir esses. Esses são plug-ins que serão pré-instalados com o seu Wordpress. Não preciso de nenhum deles porque existem alternativas melhores quando começamos a instalar os plug-ins e , em seguida, você pode fornecer um e-mail para receber uma notificação quando a instalação terminar. Mas isso não é uma massa , é uma instalação opcional. Aí está, agora temos o Wordpress instalado. Como você pode ver, esse é o nosso domínio, esse é o nosso URL administrativo. Isso nos levará ao painel do Wordpress. Se eu clicar nisso, aí está. Agora instalamos o Wordpress com sucesso. Como você pode ver, esta é a versão 6.4 0.2 e agora estamos prontos para começar a usar o site Te vejo na próxima aula. 5. Install Elementor: Agora é hora de instalar o Elementor porque estamos construindo o site com ele Vamos diretamente para os plug-ins. Começarei clicando em plug-ins para que possamos ser redirecionados para a lista de plug-ins já instalados Quero selecionar os dois marcando essa caixa aqui. Excluir Aplicar. Não precisamos deles. Agora temos uma folha em branco. Vou adicionar. Seremos redirecionados para o Wordpress. Conecte o diretório aqui, vou pesquisar o elemento, é claro, é o primeiro da elemento.com com mais de 5 milhões de instalações ativas instaladas Agora, se você é novato no Elementor, como você pode ver, temos outros plug-ins criados para ampliar o poder do Elementor São empresas terceirizadas como WP Developer Unlimited, a WP Royal. Esses são desenvolvedores terceirizados que criaram mais elementos para adicionar gratuitamente ao seu plug-in Elementor E usaremos vários desses plug-ins à medida que avançamos com o elementor instalado Vou clicar em Ativar e serei redirecionado para o assistente de configuração do elementor Agora, se você quiser aproveitar alguns desses benefícios, pode criar uma conta no elemento.com Mas você não precisa criar uma conta para usar o elementor, vou pular Você pode optar por continuar com o tema hello, que foi criado especificamente pelo element, pela equipe do elemento para trabalhar com o elementor Mas vamos usar um tema Wordpress muito melhor chamado astra E vamos instalá-lo na próxima lição. Vou pular isso. Esse é o nome que demos ao nosso site quando o criamos. Não precisamos alterá-lo, mas se você quiser, pode alterá-lo agora mesmo. Vou clicar em seguida. Você pode adicionar um logotipo agora mesmo, se quiser, mas faremos isso mais tarde. Vou pular agora. Nós terminamos. Você pode editar uma tela em branco com o editor elementar, escolher um modelo criado profissionalmente ou importar modelos que você já criou em um projeto diferente Mas também podemos clicar em Ignorar ou fechar esta janela. Deixe-me clicar em Ignorar, mas ainda seremos redirecionados para uma página do elementor em branco Seu editor, como você pode ver, o elementary está carregando. Agora, esta é uma página em branco. Vamos excluí-lo. Mas, por enquanto, vamos dar uma olhada no que temos aqui. Desbloqueie o poder do elemento I. Isso nos fornece recursos de IA. À medida que construímos nosso site, podemos aproveitar os recursos de IA. Vamos continuar e dizer que continue. Aqui vamos nós. Como mencionei, esta é apenas uma página em branco. Vamos até aqui e diga “saia”. Se dissermos sair porque não publicamos esta página, talvez nos digam, talvez nos perguntem se realmente queremos sair. Agora, aqui mesmo, podemos escolher para onde queremos ser redirecionados toda vez que clicarmos nesse botão de saída E eu gosto de ser redirecionado para o painel do WP porque esse é o único lugar que eu gostaria de ir Sim, vamos deixar isso, porque não queremos salvar as alterações. Sempre fomos redirecionados para o painel do Wordpress partir de agora, quando clicarmos no botão de saída, nosso editor será redirecionado para o painel, que é o que queremos Agora, como você pode ver, temos Elementor e modelos. Esses dois foram adicionados a essa lista após a instalação do Elementor Se formos ao elementor aqui, temos integrações, recursos avançados Você realmente não precisa tocar em nenhuma dessas configurações. Pessoalmente, não faço alterações em nenhuma dessas configurações. Eu simplesmente vou em frente e começo diretamente. É assim que se instala o elemento. Na próxima lição, vamos ver como instalar o tema Astra Te vejo em breve. 6. Install a WordPress Theme: Agora é hora de instalar um tema do Wordpress. Toda vez que você quiser trabalhar em qualquer projeto do Wordpress, você precisa ter um tema instalado. Agora, fazemos isso examinando os temas de aparência. Por padrão, toda vez que você instalar o Wordpress, ele terá um tema pré-instalado e o tema terá o nome do ano em que você instalou o Wordpress. Este ano, temos 2024 como tema ativo. No ano passado tivemos 2023, e no ano anterior tivemos 2022. Mas esses não são os que vamos usar. Entramos em adicionar um novo tema e seremos levados ao diretório de temas. Assim como fomos levados para o diretório de plug-ins. Como mencionei, o tema Astra é o nosso tema preferido. Ele vem com alguns recursos muito interessantes que eu realmente gosto de usar. E você verá por que o Astra agora está instalado, mas ainda não está ativo Clique em ativar. Lá vamos nós. As agora está ativado. Comece com o modelo pronto, blá, blá, blá. Não, vamos fechar isso porque vamos construir tudo do zero. Não vamos usar modelos pré-fabricados. Tudo bem, agora, como você pode ver, Active é o tema Astra Basicamente, é assim que se instala um tema Wordpress. Na próxima lição, vamos começar a trabalhar na página inicial. Te vejo em breve. 7. Elementor Workspace Overview: Agora que instalamos nosso tema e instalamos o Elementor, vamos ter uma visão geral rápida do espaço de trabalho do Elementor Vamos diretamente para o Pages. Esta é a lista de todas as páginas da web que temos. Agora, quando instalamos o Wordpress, ele veio com duas páginas da web pré-instaladas. O rascunho da política de privacidade, como você pode ver, é um rascunho e um exemplo de página da web que selecionará esses dois, acesse esse menu suspenso e vá para a lixeira Em outras palavras, exclua-os. Agora, temos uma página de amostra de elemento que foi gerada durante o assistente de configuração do Elementa Esta é uma boa página para ver a visão geral do espaço de trabalho elementar Agora, para ir ao Editor de elementos, temos duas opções. Podemos clicar em Editar com Elementa aqui, ou podemos ir para Editar aqui Você encontrará a mesma edição com a opção elementor. Vou clicar aqui, serei redirecionado para o front-end, onde agora podemos dar uma olhada no espaço de trabalho elementar aqui É aqui que nosso site está. O que quer que estejamos construindo estará aqui. É como nossa caixa de ferramentas. Tem tudo o que precisamos. Esses são elementos que podemos arrastar para o nosso site para usá-los. É por isso que se chama Elementor. Ele nos fornece elementos. Agora temos painéis contendo elementos diferentes. Se eu derrubar todos eles, deixe-me fechar isso. Esses são todos os painéis que a Elemento nos fornece. Se os expandirmos, esse é um elemento de contêiner porque, no ano passado, o elemento mudou para um sistema baseado em contêineres para criar suas páginas da web E veremos como usar esses contêineres. Se eu derrubar isso, teremos o painel básico. Isso tem os elementos mais usados que você pode encontrar em qualquer site. Temos um elemento de cabeçalho. Se o arrastarmos para lá, como você pode ver, é um título e podemos clicar duas vezes e editá-lo. Deixe-me fechar isso. Temos um editor de texto, um botão, um divisor, temos um espaçador Veremos como usar a maioria deles. Se fecharmos o painel básico e expandirmos o painel profissional, você notará que esses elementos têm uma pequena trava no canto superior direito. Isso basicamente significa que eles não são gratuitos. Você não pode arrastá-lo e colocá-lo aqui. Quando você tenta arrastá-lo, ele abre um pop-up para solicitar que você atualize. Agora, o bom do elementor é que lembre-se de que, quando estávamos instalando o elementor, vimos outros plug-ins de terceiros que fornecem elementos extras Você não precisa se preocupar em não ter acesso a esses elementos profissionais. Você ainda pode acessar elementos que podem fazer a maioria dessas coisas instalando os complementos relacionados a elementos de terceiros que vimos quando estávamos instalando o elementor E veremos como fazer isso porque dissemos que usaremos alguns desses plug-ins de terceiros. Se eu fechar o painel profissional, teremos o painel geral. Isso aqui tem coisas gratuitas, pode arrastar e soltar coisas aqui. Deixe-me desfazer isso, deixe-me voltar aqui. Claro, vamos dar uma olhada em tudo isso e você vai ver como os usamos. Agora você percebeu que se, por exemplo, eu arrasto isso aqui, isso muda para as configurações do elemento específico que você acabou soltar ou do elemento que você selecionou atualmente no seu espaço de trabalho Se selecionarmos, ainda será o título de edição porque é um título. Se eu selecionar isso, lembre-se de que era um carrossel de imagens, isso muda para editar carrossel de imagens Isso significa que essas configurações são para esse carrossel de imagens específico Se eu duplicar isso clicando com o botão direito do mouse, duplique e selecione essas configurações para esse carrossel de imagens específico Se eu selecionar, essas configurações são para esse carrossel de imagens específico Agora, quando tivermos essas configurações exibidas aqui e quisermos adicionar mais elementos, basta clicar nesse ícone e isso abrirá a lista de elementos novamente. E você pode arrastar o que quiser para lá. Observe que isso mudou para o botão Editar porque acabamos de soltar o botão. É o elemento ativo no momento, outra coisa que eu quero que vejamos é um Navegador Se eu apertar o controle, temos um Navigator aqui Isso é basicamente uma visão geral do que temos aqui neste espaço. Como você pode ver, temos três contêineres. Temos esse contêiner, aqui está outro contêiner e aqui está outro contêiner. São três contêineres. No terceiro contêiner, temos um carrossel de imagens e um botão Como você pode ver, o carrossel de imagens e o botão. Neste segundo contêiner, temos apenas uma célula de carro de imagem. Se eu reduzir isso e expandir isso, teremos uma célula de carro com imagem. Aqui temos dois elementos de cabeçalho. Se eu fechar isso e expandir esse contêiner, teremos dois elementos de cabeçalho. Esse é o Navigator E você pode simplesmente fechar esse controle. Você pode fazer isso em qualquer lugar da tela. E ele flutuará pela tela para que você possa ver outras partes Aqui, deixe-me colocá-lo ali e fechá-lo. Aqui temos o ícone do modo responsivo. Esse é o botão em que costumamos tornar nosso site responsivo em diferentes tamanhos de dispositivos Aqui temos um histórico, uma lista das mudanças que fizemos em nosso site. E podemos selecionar um ponto no tempo e voltar a ele. Isso muda o estado do seu site para o estado em que estava quando você fez essa alteração. Ele remove todas as mudanças que vieram depois disso. Essa é uma forma de poder desfazer muitas mudanças que você fez e com as quais não está satisfeito Podemos voltar ao momento em que a edição começou e o site está vazio porque era assim que era na época e veremos para que servem todos esses outros. Basicamente, essa é apenas uma visão geral rápida do espaço de trabalho elementar à medida que progredimos . À medida que trabalhamos nas diferentes páginas da web, nas diferentes seções, você se acostumará a usar todas essas ferramentas na próxima lição Agora vamos começar com a seção de heróis. Te vejo em breve. 8. Hero Section - Background Image: Agora, acabamos de ter uma visão geral rápida do espaço de trabalho elementar, mas não precisamos mais dessa página Vou seguir em frente e acessar menu de hambúrguer e depois sair Diremos “saia porque não precisamos salvar as alterações. Eles serão redirecionados para o painel, conforme dissemos anteriormente Agora vamos voltar às páginas agora. Podemos excluir isso porque não precisamos dele. Agora vamos adicionar uma nova página clicando nesse botão. E vamos dar um nome a ele. Vamos chamar isso de página inicial. Agora vamos ao modelo e escolha elemento ou largura total Vamos entrar nas Configurações do Astra, porque estamos configurando a página e a aparência da página é determinada pelo tema que você está usando Vamos para as configurações do Astra. Essas são as configurações do Wordpress, mas essas são as configurações do Astra O que queremos é toda a largura aqui. Não se preocupe com essas configurações. Eles só se aplicam quando o layout está definido como normal ou estreito. Não nos importamos com eles porque os configuramos para largura total. O mesmo caso se aplica à barra lateral. Não queremos que nossa página da web tenha uma barra lateral, nós a configuramos como nenhuma barra lateral. Então, vamos entrar nos elementos desativados. Não queremos o cabeçalho ou rodapé do Astra, vamos criar nossos próprios cabeçalhos e rodapés para e rodapés E que podemos simplesmente deixar isso intacto ou simplesmente desativá-lo, mas isso realmente não importa Aqui, ele publicou, publicou. Agora a página está pronta. Agora podemos clicar em Editar com Elementor e seremos redirecionados para o front-end onde agora podemos começar a construí-lo Agora, lembre-se de que uma coisa que você disse é que o elementor agora usa um sistema de web design baseado em contêineres Vamos usar contêineres para criar nossas diferentes seções. Se você clicar neste ícone de adição aqui, ele terá algumas estruturas pré-fabricadas que você pode usar. Vamos usar este para a seção de heróis. Se eu mudar para cá, é isso que eu construí ontem enquanto o preparava. Aqui está a seção de heróis. Cada página de destino deve ter uma seção de heróis atraente com três elementos principais Um título resumindo o que é a página da web e o que é seu site ou empresa Uma breve descrição explicando o título, call to action Essas são as três coisas que você precisa ter em sua seção de heróis. O que queremos fazer é primeiro ter essa imagem de fundo em nossa seção de heróis e depois adicionar um título com esse texto e os botões. Vamos começar com a imagem de fundo desta lição. Voltando para cá, é isso que temos. E se eu selecionar isso diz editar contêiner, isso significa que estamos editando todo o contêiner. Vamos entrar no estilo, tipo de plano de fundo, selecioná-lo. E abaixo da imagem, vamos fazer o upload de uma imagem para usar como nossa imagem de fundo. Eu direi que os arquivos de upload Os arquivos selecionados serão redirecionados para essa pasta chamada Ativos do site Vou fornecer isso como uma pasta zip para que você possa acompanhar essas imagens que preparei especificamente para esta aula. Veja logo abaixo deste player de vídeo na guia Projetos e Recursos. Clique duas vezes nele e eu quero usar esta imagem da seção de heróis. É 1920 por 108 pixels, isso é full HD. Vou clicar duas vezes nele e agora está ativo. Eu direi selecionar. Agora está adicionado. Enquanto ainda temos o contêiner selecionado, precisamos vir e dizer “repita”. Não repita, para que essa imagem não se repita. Também queremos fazer com que seja uma capa. Para preencher todo o contêiner, precisamos voltar ao layout interno, alterar essa altura para VH e dizer 100 Agora ele preenche todo o espaço desse jeito. A segunda coisa que queremos fazer é adicionar essa sobreposição escura porque a nossa é muito clara Enquanto isso ainda estiver selecionado, vamos coincidir o estilo, recolher o plano de fundo e, em seguida, expandir o plano de fundo, sobreposição, o tipo de fundo e selecionar a cor Desta vez, queremos arrastar isso para o canto mais escuro. Podemos aumentar a intensidade do preto na medida que quisermos. Vou deixar em 0,77. Mas fique à vontade para brincar com a escuridão e dizer atualização Agora, isso nos dá a oportunidade de aprender sobre essas alterações de pré-visualização. Se quisermos ver o que temos, podemos visualizar as alterações e isso abrirá uma nova guia que podemos ver. Agora temos uma imagem de fundo muito boa em nossa seção de heróis. É assim que se adiciona uma imagem de fundo. Na próxima lição, vamos ver como adicionar esse texto. Te vejo em breve. 9. Hero Section - Text: Agora é hora de adicionar o texto da seção do herói. Vamos começar com o título, Refeições saborosas. E vou copiar tudo isso porque gosto do texto que usamos Se eu voltar aqui, vamos voltar para o nosso editor. Agora lembre-se de adicionar mais elementos. Tudo o que precisamos fazer é clicar nesse ícone lá em cima e ele revelará os painéis. E queremos adicionar um título. Vou arrastar e soltar um título ali mesmo. Como você pode ver, ele é alinhado à esquerda por padrão, então podemos alinhá-lo no meio, desse jeito Agora podemos mudar esse texto. Eu quero usar as refeições saborosas. Vou copiar isso. Refeições saborosas, clique duas vezes aqui e cole lá. Agora, o motivo pelo qual eu não cliquei duas vezes aqui e colei aqui é porque ele virá com qualquer formatação que tivesse no local de onde você o copiou Você não quer isso? Deixe-me desfazer isso Porque, como você pode ver, veja toda a formatação, tudo isso é CSS e você não quer isso Se eu fizer isso, se você colar aqui, ele não vem com a formatação que tinha Tudo bem, a próxima coisa que queremos fazer é adicionar um editor de texto que é basicamente um parágrafo. Como você pode ver, isso mudou para editor de texto porque esse é o elemento ativo. Em primeiro lugar, podemos entrar no estilo e alinhá-lo ao centro, sem mais nem menos Agora você notará que é cinza. Embora ainda estejamos na moda, podemos dizer a cor branca do texto. Deixe-me mudar para cá. Refeição saborosa de classe mundial. Deixe-me copiar esse controle C, e eu posso simplesmente duplicar isso Enquanto isso ainda estiver selecionado, posso clicar com o botão direito do mouse em Duplicar. E agora temos dois. Eu posso selecionar isso, entrar aqui, colar lá, atualizar isso. Agora, é claro, você notará aqui na seção final do herói que tudo está alinhado verticalmente no meio A distância entre aqui e aqui é semelhante à distância entre aqui e o fundo. Queremos isso neste sistema baseado em contêineres. Quando selecionamos o contêiner em si e acessamos o layout, agora podemos justificar o conteúdo Podemos dizer que queremos isso no centro. Como você pode ver, essa linha corta no meio. Atualmente, por padrão, isso é definido como o topo. Como você pode ver, a longa linha corta na parte superior. Podemos configurá-lo na parte inferior, central ou superior. Queremos isso no meio, sem mais nem menos. A próxima coisa que queremos fazer agora é estilizar nosso texto. Em primeiro lugar, vamos começar com estilo de classe mundial. Vamos à tipografia. Primeiro de tudo, vamos para a cor do texto, mude-a para branco. Expanda essa tipografia. A propósito, se você quiser se livrar de qualquer pop-up como esse, clique em qualquer lugar aqui, tipografia, queremos mudar Não me lembro do nome dessa fachada. Deixe-me rabiscar para baixo. É isso. Não é isso, mas podemos usar isso agora. Podemos aumentar o tamanho até talvez esse ponto. Vamos fazer algumas mudanças nas refeições saborosas. Selecione esse estilo, altere-o para a cor que você quiser. Eu vou mudar essa cor dourada, que é amarela em algum lugar lá. Esse é o código. Agora lembre-se de que, depois de definir esse código, é sempre bom permanecer consistente. Em qualquer lugar que você use essa cor amarelada, basta copiar esse código e colá-lo na outra configuração Agora que decidimos que essa é cor da fonte do cabeçalho, talvez algo menos gritante em algum lugar Agora vamos voltar ao tamanho da tipografia. Também queremos mudar a família de fontes para Montserrat, minha fonte favorita Vamos mudar os pesos da fonte para preto. Essa é uma ousadia muito ousada. Agora vamos aumentar ainda mais o tamanho, talvez até esse ponto. Agora você notará que aqui temos muito espaço. Enquanto isso ainda estiver selecionado, podemos ir para Advanced Break the margin. E então, no topo, vamos reduzir a margem até algum lugar lá. Também vamos fazer o mesmo com a parte inferior, para que possamos aproximar a descrição e atualizá-la. Vamos analisar as mudanças agora. Isso é o que temos. Vamos dar uma olhada em nossa referência. Acho que estamos bem próximos da referência. Na verdade, eu gosto ainda mais disso. Agora, veja como adicionar o texto na próxima lição. Vamos ver como adicionar e estilizar botões. Te vejo em breve. 10. Hero Section - Buttons: Agora é hora de adicionar os botões voltando ao nosso editor. Vamos entrar aqui, selecionar um botão e soltá-lo ali mesmo. Agora você notará, é claro que em nossa referência eles estão no meio e lado a lado. Como fazemos isso? Porque se simplesmente duplicarmos isso, estará abaixo desse botão Lembre-se de que este é um sistema baseado em contêineres, podemos usar um contêiner. O bom dos contêineres é que podemos escolher a direção dos elementos dentro do contêiner. Se eu entrar aqui e selecionar um contêiner e colocá-lo logo abaixo desse texto no contêiner, agora podemos ver esses dois elementos, agora eles me permitem arrastar isso e colocar os dois dentro desse contêiner. Se eu selecionar isso, como você pode ver este é o contêiner Ed, os dois estão dentro. Agora, como temos o contêiner ativo aqui sob direção, podemos dizer que não queremos que eles desçam , as direções sejam da esquerda para a direita Voila. E lembre-se de que também podemos justificar o conteúdo Agora podemos colocá-los à esquerda, à direita ou ao centro. Veja a longa fila que aparece bem no meio. Se selecionarmos isso, os colocaremos no meio. Agora vamos estilizá-los. Se eu selecionar esse primeiro botão, podemos primeiro mudar o que ele diz. O que diz isso? Abra o menu e faça o pedido. Vamos dizer, abra o menu e faça o pedido. Vamos selecionar o segundo. Reservas de mesa. Reservas de mesa. Lá vamos nós. Selecionando esse primeiro botão, você pode ir para estilo. Queremos dar a cor dourada. Lembre-se de que queremos permanecer consistentes. Escolheremos essa cor dourada aqui selecionando esse estilo de texto. Em seguida, copie esse controle ou simplesmente clique com o botão direito e copie. Em seguida, selecione o estilo Go inside e o controle de cor do botão V. Cole-o lá. E lá vamos nós. Para este, acho que é branco, preto com fonte preta. Vou selecionar essa cor de botão de estilo branca. E a fonte é preta. Cor do texto preta, sem mais nem menos. Para este, a cor do texto também é preta. Agora você notará que temos bastante espaçamento aqui da borda até o texto Também temos aqueles cantos arredondados para o raio da borda. Para os cantos arredondados, podemos simplesmente atribuir um raio de borda de 50, desse jeito Vamos fazer o mesmo com esses 50. Agora vamos aumentar esse espaçamento. E isso é tudo sobre acolchoamento. Vamos quebrar esse link à esquerda, podemos dar, digamos, 60 à direita. 60, últimos 20 e top 20. Vamos repetir o mesmo para isso. Vamos quebrar isso. Em primeiro lugar, vamos dar uma atualização 602.060,20 que visualize as alterações e pronto A seção de heróis agora está começando a tomar forma. Na próxima lição, vamos adicionar um cabeçalho. Esse é o cabeçalho. É composto pelo logotipo e pela de navegação ou pela barra de navegação Te vejo na próxima aula. 11. Header - Adding the Logo: Agora é hora de adicionar o cabeçalho ou a seção de navegação. A primeira coisa que queremos fazer é adicionar o logotipo de volta à nossa estação de trabalho Vamos sair daqui. Agora, não estamos adicionando o cabeçalho aqui dentro da página inicial que estávamos editando. Vamos sair daqui porque usaremos um plug-in diferente para criar o cabeçalho. Tudo bem, agora vamos sair. E agora estamos dentro do painel. Vamos entrar nos plug-ins, adicionar novos, digamos Elementor Lembre-se de que dizemos que temos desenvolvedores terceirizados que criaram complementos incríveis do Elementor que nos permitirão usar alguns recursos incríveis que não estão disponíveis com uma versão gratuita do element Um deles é o elemento que o Element adiciona. Como você pode ver, ele tem mais de 1 milhão de instalações ativas, uma prova de sua popularidade. Também vamos usar efeitos de cabeçalho adesivo para o elemento, mas vamos chegar lá Em primeiro lugar, vamos ativar o elemento Skit element Add, que adiciona esse menu a esta lista Podemos seguir em frente e dizer cabeçalho, seleção de rodapé. Isso será redirecionado para esse assistente de configuração. O que queremos é selecionar as configurações avançadas aqui, porque isso adiciona mais alguns widgets que estão atualmente ativados Se optarmos pelo Básico, direi Avançado, se eu quiser, como você pode ver isso desativado, eu digo Avançado, isso é ativado automaticamente. E também outras configurações aqui embaixo. Avançado. Em seguida, digamos que na próxima etapa, na próxima etapa, você pode compartilhar dados de diagnóstico não confidenciais. Em seguida, na próxima etapa, salve essas alterações. Agora estamos bem. Agora vamos entrar no rodapé do cabeçalho Agora, como você pode ver, não temos cabeçalhos ou rodapés criados Vou dizer adicionar novo, vou chamar isso. Você pode simplesmente dar qualquer nome e não precisa digitá-lo da maneira que eu digitei Você pode simplesmente dizer meu cabeçalho. Isso realmente não importa. Eu simplesmente gosto dessa maleta de camelo. É um cabeçalho. Quando estivermos construindo o rodapé, escolheremos rodapé Mas agora é um cabeçalho e queremos que ele seja visível em todo o site. Essas outras opções estão disponíveis apenas na versão premium. Digamos que queremos que ele esteja ativo quando você estiver fazendo alguma manutenção. E você quer que seu menu não fique visível. Você pode ativá-lo, mas agora queremos que ele esteja disponível, visível no site. Depois de fazer isso, podemos começar diretamente a editá-lo. Mas eu só quero salvá-lo antes de tudo, para que você possa vê-lo aqui. Quando construirmos outro pé ou cabeçalho, haverá uma lista aqui. Agora podemos continuar e dizer Editar. O mesmo pop-up aparecerá. Edite o conteúdo. Aqui estamos. Obviamente, como esse é o construtor elementar, ele ainda tem o mesmo construtor, mas agora estamos em uma área completamente diferente do site. Não estamos na página inicial, estamos no editor de cabeçalhos. Agora vamos adicionar uma seção e , desta vez, queremos adicionar essa estrutura que tem dois contêineres dentro dela. Este é um contêiner externo com dois contêineres internos porque é claro, como você pode ver, temos o Loco à esquerda e a barra de navegação à direita Esses são dois contêineres. Em primeiro lugar, podemos selecionar esse contêiner e dizer 50%. Queríamos ocupar talvez 30% Certifique-se de que esteja definido como porcentagem, não pixels, ou porcentagem de Ms, 30%. Isso significa que eles devem ser 70%, selecione essa porcentagem, 70% eles ocupam 100% do espaço que têm. Com isso, deixe-me selecionar esse sinal ou simplesmente clicar nele para abrir os elementos e a imagem. Vou prosseguir e fazer o upload da nossa pasta Assets. Aqui está o logotipo que eu preparei. Abra o Select e pronto. Você não precisa definir essas configurações do with manualmente selecionando isso e inserindo-as aqui. Você também pode simplesmente vir aqui e arrastar e redimensionar de acordo com sua preferência Atualize isso. Vamos analisar as mudanças. Aí está nosso logotipo, é claro, parece estranho porque aqui está em um fundo escuro, mas aqui está basicamente em um fundo branco É assim que você adiciona seu logotipo ao seu site. Mas antes de prosseguirmos, vamos voltar aqui e selecionar o elemento de imagem que é o logotipo aqui. Queremos transformá-lo em um link, URL personalizado, e eu farei dele o link do meu site. Agora, é claro, você copiará sua URL. Copie isso e cole aqui. Atualize isso, visualize as alterações. Lá vamos nós. Agora, quando você passa o mouse sobre ele, é clicável Quando alguém clicar nele, será direcionado para a página inicial Mas não definimos nossa página inicial. Fomos redirecionados para a página inicial padrão fornecida pelo Wordpress, que me leva à conclusão de que esquecemos de configurar essa página inicial Vamos mudar para essa página de pré-visualização e ir para as Ferramentas do painel. Sem configurações A página inicial de leitura exibe uma página estática que é a página inicial que criamos, salve as alterações. Agora, se eu voltar aqui e atualizar com o controle R e, em seguida, visualizar as alterações Se passarmos o mouse sobre isso e clicarmos nele, porque dissemos que nossa página inicial será redirecionada para a página inicial que criamos E é isso que queremos. Basicamente, é assim que se adiciona o logotipo e o torna clicável Ele redireciona alguém de volta para casa. Na próxima lição, vamos ver como adicionar a barra de navegação. Te vejo em breve. 12. Header - Adding a Navbar: Agora é hora de adicionar a barra de navegação. Voltando ao nosso editor, deixe-me fechar essa barra de navegação e essa parte, agora ficamos com isso Esta é a página de pré-visualização. Voltando aqui, vamos em frente e diga aqui, vamos digitar nav Você notará que aqui temos um menu de navegação, mas ele tem um cadeado porque vem com o painel profissional do elemento Mas agora, uma das razões pelas quais adicionamos o kit de elementos light foi porque ele tem um menu de navegação gratuito É por isso que mencionei que os plug-ins de terceiros criados para o elementor são incríveis Eles permitem que você tenha acesso gratuito aos recursos pelos quais, de outra forma, teria que pagar para usar com o elemento. Vou arrastar esse menu de navegação de elementos para lá e, como você pode ver, não há nada aparecendo aqui porque é o elemento ativo Isso muda para o menu de navegação do kit de edição de elementos porque estamos editando esse elemento Mas uma coisa que você notará no menu de seleção de conteúdo é que não temos nenhum menu listado aqui. O que significa que temos que criar um menu. Deixe-me atualizar isso. Agora eu quero vir aqui para esta página de pré-visualização. No entanto, esse direito de vazamento abre o link em uma nova guia porque eu quero deixá-lo intacto e ir para o painel para que possamos criar um E então viremos e exibiremos esse menu aqui. Voltando aos menus de aparência do painel, podemos dar um nome a ele, meu menu, desse jeito. Vamos torná-lo o menu principal, o menu Criar. Basicamente, o menu é uma lista dos itens que você deseja exibir como barra A. Esses são os itens do menu, a página inicial, a galeria e o contato. Em essência, essas são páginas da web que nos dizem que precisamos criar algumas páginas como você pode ver aqui, deixe-me fechar isso. O gerenciador de senhas, como você pode ver aqui, adiciona itens de menu. Os itens do menu podem ser páginas da web, acho que eles também podem ser postagens. Por exemplo, se você tiver uma postagem no blog ou um artigo, poderá transformá-la em um item de menu. Eles podem ser links personalizados. Elas podem ser categorias, o que você quiser, mas queremos usar páginas como itens de menu. Deixe-me selecionar isso por enquanto. Adicionar ao menu. Agora, como você pode ver, nós o adicionamos ao menu. Deixe-me salvar o menu. Agora, se voltarmos aqui e clicarmos com o botão direito em recarregar. Recarregue esta página, este editor. Se eu selecionar o elemento nav, abra novamente esse menu suspenso Agora temos meu cardápio. Porque temos um menu criado. Agora ele está exibindo apenas a página inicial, porque temos apenas um item de menu. Vamos atualizar isso. Voltando aqui, precisamos adicionar mais itens de menu. Vou entrar nas páginas, mouse sobre elas e adicionar uma nova página Vou clicar com o botão direito do mouse em Abrir link em uma nova guia. Abra o link em uma nova guia. Abra o link em uma nova guia. Essas são três guias do criador da página. Vou chamar isso de “Sobre Page”. Por enquanto, vamos publicar sem fazer nenhuma configuração. Esta é a galeria ph. Vamos entrar aqui e dizer que os contatos publicam. Agora, se eu fechar todas essas novas páginas e vir aqui e atualizar. Agora temos mais três elementos que podemos ver todos. Vou adicionar esses três. Adicionar ao menu. Agora temos três, você pode arrastar elementos como esses e salvar o menu. Deixe-me dizer aquele menu, feche isso. Agora, se voltarmos ao editor e controlarmos R, como você pode ver, agora temos todos esses itens de menu. Agora, eles precisam estar à direita. Enquanto isso estiver selecionado, podemos dizer a posição horizontal do menu, certo? Atualize isso. Vamos analisar as mudanças. Lá vamos nós. Agora, uma coisa que você notará sobre isso é que eles estão muito espaçados e parecem estar mais próximos das bordas Voltando aqui, o que podemos fazer é lembrar que estamos lidando com contêineres. Agora, se selecionarmos esse recipiente externo que os contém e digamos largura total ou porcentagem, 80%, é claro, vamos também dar as porcentagens corretas para esses dois contêineres Selecionando isso, vamos dar talvez 25%. Você deve ocupar 25% do espaço, e isso deve ocupar os 75% restantes, o que leva o menu até o final Mas agora isso é muito grande. Vou selecionar o elemento da imagem em si, selecioná-lo. Isso muda para Editar imagem e, agora, em estilo, podemos atribuir a isso talvez uma largura de 50% desse espaço, 50%. Voltando ao conteúdo, vamos fazer uma atualização de alinhamento à esquerda Vamos analisar as mudanças. Lá vamos nós. Tudo bem, agora voltando às páginas, só queremos ver a aparência da página inicial. Então, vou selecionar Exibir, e é isso que temos. Agora, é claro, você notará aqui em nosso site de referência não temos aquele fundo branco feio Como podemos conseguir esse fundo transparente? Quando você rola, ele fica preto. Como podemos conseguir isso? Isso é o que faremos na próxima lição. Te vejo em breve. 13. Transparent Sticky Header: Agora é hora de deixar nosso cabeçalho fixo e transparente. Assim como aqui. No momento, parece incrível sem aquele fundo branco feio. Vamos ver como fazer isso. Voltando ao nosso espaço de trabalho aqui, vamos ao painel que queremos instalar Apenas feche tudo bem, deixe-me entrar aqui, deixe-me ir até o painel. Adicione novos plug-ins de plug-in, adicione novos que queremos instalar. Mais uma vez, basta digitar Elementor. Ele trará todas as adições relacionadas ao Elementor. O que precisamos são os efeitos de cabeçalho adesivo para elementor Como o nome sugere, ele fornece efeitos de cabeçalho adesivo para seus cabeçalhos . Ative isso, agora está Agora, voltando ao rodapé do cabeçalho do kit Elements, temos nossa edição de cabeçalho com o Elementor Se eu selecionar o contêiner que contém o cabeçalho selecionado, vá para Avançado. Se você não conseguir selecionar nada aqui, lembre-se de que você sempre pode pressionar o controle para abrir o navegador e agora pode selecioná-lo aqui Posso selecionar esse contêiner apenas selecionando isso. Isso muda para editar o contêiner. Vamos aos efeitos de cabeçalho adesivo. Vamos habilitar isso. Vamos fechar esse navegador e atualizá-lo. Tudo bem, vamos apenas revisar as mudanças, mas não as mudanças. Eu quero selecionar. Em primeiro lugar, você notaria que eles foram empurrados até o limite. Nós vamos resolver isso. Eu sabia que isso ia acontecer. Agora, se escolhermos isso, se clicarmos nisso, como você pode ver, ainda não resolvemos isso Se eu voltar aqui, queremos dizer uma atualização de cabeçalho transparente que visualize as alterações. Agora, as mudanças são efetuadas. Se formos para a página inicial mais uma vez, agora temos nosso cabeçalho sem esse fundo branco, mas temos alguns problemas aqui. Em primeiro lugar, eles foram levados até o limite. Outra coisa, se recarregarmos esta página, você notará um fundo branco feio antes que esse lindo fundo antes que esse lindo fundo Mais uma vez, vamos selecionar isso. Espero que você tenha visto que não queremos isso, queremos algo assim. Vamos à nossa referência. Se eu recarregar esta página, recarregamento muito bom e sutil da Mais uma vez, é exatamente isso que estamos procurando. Voltando aqui, a primeira coisa que queremos fazer é resolver esse problema aqui. Vamos entrar aqui, selecionar este menu, este nome vai para o estilo Antes de tudo, queremos dar a esses itens do menu a cor certa. Eles precisam ir para estilo de item de menu, recolher, invólucro de menu, Expandir item de estilo de item de menu A cor do texto deve ser branca. Não podemos ver isso por causa do fundo branco ao passar o mouse. Queremos que seja dourado. Espero que possamos. Se quisermos editar esta página agora, podemos simplesmente ir até aqui. Qualquer página que você criou com o elementor pode ser editada acessando aqui Se for a edição da página, clique em Editar com Elementor Se for o cabeçalho ou rodapé, clique em minha edição de cabeçalho ou rodapé com A razão pela qual estamos abrindo isso é porque queremos pegar essa cor dourada. Vou selecionar aquela cópia em estilo de texto que pode até mesmo fechá-la. Agora, voltando aqui, lembre-se de que selecionamos a barra de navegação Fomos para o estilo normal do item de menu. É branco ao passar o mouse. Ele precisa ser de cor dourada ao passar o mouse. Agora, essa cor é dourada quando está ativa? Sempre que a página estiver ativa, ela também precisa ter essa cor dourada. Atualize isso. Agora, se visualizarmos isso, é claro que não queremos visualizar a barra de menu, queremos ir até a página inicial para vê-la assim. Agora isso parece bom. A outra coisa é que precisamos empurrá-los para dentro. Agora, lembre-se de quando definimos a transparência como. Ativo. Quando ativamos a transparência, elas foram automaticamente empurradas para o lado. Agora, o que podemos fazer, vamos tentar selecionar. Como você pode ver, está em 80%, mas ainda está tocando 100% da tela O que podemos fazer é adicionar um novo contêiner, adicionar um contêiner aqui na lateral. Agora temos três contêineres alinhados lado a lado, mas queremos arrastar esses dois contêineres para esse outro contêiner, para esse novo contêiner Agora, os dois estão dentro do novo contêiner que acabamos de adicionar. Agora vamos selecionar o novo contêiner e mudar a direção da esquerda para a direita. Agora é da esquerda para a direita, mas agora está em 100%. Queremos fazer com que seja 80% de porcentagem, 80% de largura. Em primeiro lugar, digamos largura total, depois porcentagem de 80%. Como você pode ver agora, ela está ocupando 80% da largura Claro, agora podemos alinhá-lo dentro desse recipiente externo selecionando o recipiente externo e indo aqui e alinhando o que está dentro com o centro, desse jeito Agora, isso está no centro do contêiner externo. Espero que você entenda que os contêineres agora ainda estão ocupando as porcentagens que lhes demos E isso é exatamente o que precisávamos. Atualizando essa prévia, as mudanças. Agora você pode ver bem situado, indo para a página inicial, exatamente o que precisamos. Mas agora mais um problema. Recarregue esta página. Ainda há aquele problema com esse fundo branco. O que podemos fazer é editar essa edição em segundo plano com elemento ou a própria página inicial, não com o cabeçalho Tudo bem, vamos selecionar esse recipiente externo. E, como você pode ver, não consigo selecioná-lo. Se eu apertar o controle, eu abrirei o Navigator E agora eu posso selecionar o contêiner. Agora está selecionado. Vá para Efeitos de movimento avançados. Queremos que desapareça. Assim mesmo. Atualize isso. Agora vamos analisar as mudanças. Isso é exatamente o que precisávamos mais uma vez. Agora vamos carregar isso. Exatamente. Isso nos leva ao final da lista de efeitos da barra de navegação Terminamos com a seção de heróis. A próxima coisa que queremos fazer é começar a trabalhar na seção corporal. Te vejo em breve. 14. Sticky Header Background: Agora é hora de trabalhar na seção do corpo, mudando para nosso site de referência aqui, como você pode ver, temos essa bela imagem, algum texto de título, algum botão de descrição. Esta seção de três colunas. Basicamente, o que queremos fazer é, antes de tudo, criar essas áreas básicas. Então, na próxima lição, trabalharemos nesse menu. Na lição a seguir, criaremos a galeria. Vamos começar com as partes básicas, como esta seção. Voltando à nossa área de trabalho, terminamos com um cabeçalho. Mas antes de prosseguirmos, lembre-se de que, se você olhar isso, tem um fundo preto. Quando começamos a rolar, olhe para o logotipo, ele encolhe Isso é algo que eu esqueci de te mostrar. Se selecionarmos o contêiner aqui e entrarmos em Avançado. Se selecionarmos o contêiner aqui e entrarmos em Avançado, vamos para Sticky header Effects, cor de fundo, a cor para a qual queremos mudar Quando começarmos a rolar, queremos que fique preto Queremos reduzir o logotipo. Vamos também reduzir o cabeçalho para 70% de seu tamanho, porque olhando nossa referência aqui, ele está diminuindo Vamos reduzi-lo para 70% E podemos reduzir o logotipo para talvez, digamos que 60% atualize isso Vamos ver se o que temos aqui, vamos carregar isso. Ok, agora não temos conteúdo suficiente aqui embaixo para ir além disso. Vamos editar esta página com elementor para que possamos ver se podemos continuar Rolando para baixo, vamos adicionar um contêiner de coluna dupla enquanto ele ainda está selecionado Vamos entrar no Advanced. Vamos dividir essa margem aqui e dar a ela uma margem superior de 100. Assim, podemos criar algum espaço entre esta seção e a seção 100 do herói. Agora temos esse espaço, atualize-o. Agora, se visualizarmos isso, podemos rolar. Como você pode ver, é isso que temos. Agora, isso não está alinhado corretamente. Vamos voltar às configurações do cabeçalho. Vamos selecionar o contêiner que contém o logotipo, esse contêiner aqui. Vamos alinhá-lo ao centro verticalmente conforme você o viu se mover Vamos fazer o mesmo com a barra de navegação. Vamos nos alinhar no centro, como aquela atualização. Agora, se carregarmos a página inicial e rolarmos. Como você pode ver, temos um cabeçalho adesivo bonito. Agora, com isso feito, acho que podemos chamar isso de lição e passar para a próxima lição, onde continuaremos trabalhando nas seções básicas. Eu vou ver. 15. Body Section - Basic 1: Você se lembrará que, na lição anterior, adicionamos uma seção e atribuímos a ela uma margem de 100. É daí que continuamos. Eu vou dizer editar com Elementor, mas antes de editarmos com Elementor, eu só quero fechar esse Deixe-me sair para o painel. Vamos deixar isso aí mesmo. Agora, vamos mudar para essa guia. Feche esse. Edite com Elementor Aqui vamos nós. Aqui está a seção que adicionamos à esquerda. Eu quero me livrar desse navegador. Esqueci de ativar uma ferramenta útil que sempre acho muito útil clicar no menu de hambúrguer Vamos até os identificadores de edição de preferências do usuário. Agora, quando eu passar o mouse sobre esses cantos, você notará que nada muda Mas se habilitarmos essas alças de edição, isso trará algumas ferramentas muito úteis que tornam seu trabalho muito mais rápido Em vez de clicar com o botão direito do mouse e excluir, posso simplesmente passar o mouse sobre ele e excluí-lo imediatamente E faça isso, pode não parecer muito, mas quando você começar a usar o elemento repetidamente, você perceberá que é muito útil. Resumindo, clicarei aqui e direi que quero arrastar um elemento de imagem aqui para dentro. Queremos ter uma alimentação saudável. Em vez de adicionar um novo elemento de título, posso simplesmente duplicar isso passando o mouse sobre ele. E depois isso. Em seguida, arraste isso e solte-o lá. Deixe-me copiar isso. Obviamente, você estará digitando porque não tem nenhum lugar para copiar e colar isso Agora, é claro, isso é muito grande. Enquanto ainda estiver selecionado, vou usar o estilo. Antes de tudo, mude para a cor escura que você quiser. Digamos 111, tudo bem. Clique lá para se livrar disso, então, tipografia. Vamos usar nosso lugar lá. Vamos para o conteúdo à esquerda, alinhe-o, vá para a tipografia de estilo Reduza a altura da linha, ela não está muito espaçada. Agora você notará que este tem as configurações de margem que tínhamos. Lembre-se de que reduzimos a margem na parte superior e inferior enquanto ela ainda está selecionada. Vamos para o avançado. Vamos transformá-los em zero, sem mais nem menos. Outra coisa que queremos fazer é selecionar esse contêiner para a justificativa. Vamos colocá-lo no centro verticalmente. Vamos selecionar esse elemento de imagem. Vamos colocar uma bela imagem lá. Usamos uma imagem vertical. É isso mesmo. Sim, vou clicar duas vezes na imagem dois. Claro que você pode usar qualquer imagem que quiser usar. Selecione isso. Lá vamos nós. Agora isso tem cantos afiados e isso tem cantos arredondados. Enquanto isso ainda estiver selecionado, vou usar o estilo do raio de borda 20, desse jeito Também vamos clicar aqui e arrastar um editor de texto ou um parágrafo abaixo do título. Claro, lembre-se de que precisamos de um botão aqui. Em vez de refazer um botão e estilizá-lo, em vez de adicionar um botão aqui e estilizá-lo novamente, podemos simplesmente vir aqui e duplicá-lo e arrastá-lo aqui Então, enquanto ainda estiver selecionado, podemos mudar isso para ler mais e atualizar isso. Agora, se você quiser um pouco mais espaçamento entre a imagem e o texto, basta selecionar o contêiner que contém os dois contêineres que o conteúdo diferente, esse contêiner e as lacunas, podemos dizer 50 Essa é uma lacuna de 50 entre esses dois contêineres Atualize isso. Vamos analisar as mudanças. Lá vamos nós. Está começando a tomar forma. A próxima parte que estamos criando é esse Y S. Isso é algo que podemos fazer muito rapidamente. Vamos entrar aqui. Claro, podemos simplesmente duplicar isso porque ele já tem uma boa margem na parte superior Não queremos começar a configurar novamente. O elemento permite que você não se repita. Depois de criar um elemento, você pode continuar duplicando e alterando Agora que duplicamos isso, ele tem essa margem. Mas nós entendemos, vamos nos livrar desse contêiner de imagens. Agora ficamos com apenas isso. Claro, podemos torná-lo 100% e o layout 100%. Como você pode ver, é menor. Selecionando esse título, primeiro, vamos colocá-lo no centro. Vamos à tipografia. Vamos dar talvez algo como 50. Em seguida, volte ao conteúdo. Por quê? Vamos selecionar esse editor de texto. Vá para style middle align. Esse mesmo caso se aplica ao botão, selecione-o e ao alinhamento do conteúdo Espere, não temos um botão aqui. Temos a seção de três colunas. Feche isso. Primeiro de tudo, vamos atualizar isso. Aqui. Podemos adicionar um contêiner logo abaixo do editor de texto. É um contêiner dentro do contêiner. Podemos adicionar mais três contêineres, ou seja, um contêiner dentro do contêiner. Podemos adicionar uma caixa de ícones assim. Agora, antes de estilizá-lo, quero mostrar por que adicionamos essa passar o mouse sobre o contêiner que ícones ao passar o mouse sobre o contêiner que contém o contêiner Vamos duplicar isso mais uma vez. Agora temos três contêineres dentro desse contêiner. Tudo o que precisamos fazer é selecionar o recipiente que os contém e mudar a direção da esquerda para a direita assim. Mas agora o que queremos é selecionar isso e estilizá-lo. Entre no estilo. Primeiro de tudo, queremos que a cor seja, eu não selecionei esse amarelo. Vou selecionar esta cópia de estilo de botão. Selecione este ícone de estilo, cole ao passar o mouse. Queremos que seja preto. Então, digamos que fosse 111, sem mais nem menos. Agora também podemos ir para a cor do título da tipografia, vamos manter essa cor vamos manter essa Também podemos adicionar o espaçamento entre os dois. E lá vamos nós. Agora cabe a você alterar o conteúdo disso. Podemos alterar esse ícone acessando Conteúdo, selecionando isso. Então, talvez escolhendo o que devemos escolher? Inserir. Agora podemos excluir esses dois, depois duplicar isso duas vezes e atualizar isso Agora você pode chegar a isso e alterar esse ícone para talvez algo como pimenta e economizar dinheiro ou algo desse tipo. Atualizar. Visualize as alterações. Aí está. Acho que vamos parar por aí para esta aula, só para não demorarmos muito. E continuaremos na próxima lição. Te vejo em breve. 16. Body Section - Basic 2: Bem vindo de volta. Agora é hora de continuar de onde paramos. Lembre-se de que, se mudarmos para aqui, agora estamos criando esta seção. Isso é muito fácil. Agora você deve ser capaz de criá-lo, mas vamos fazer isso. Voltando ao nosso editor de, vamos duplicar esta seção apenas para garantir que tenhamos uma margem uniforme na parte superior Você notará que aqui temos um bom acolchoamento na parte superior e inferior Vamos adicionar um pouco de preenchimento aqui, selecionando esse contêiner avançado Vamos quebrar esse preenchimento padrão na parte superior. Vamos dar 50, agora vamos dar 100, é claro. Vamos primeiro remover isso, voltando e selecionando esta seção, mais uma vez na parte inferior. Vamos também dar 100 enquanto ainda está selecionado, vamos ao estilo, tipo de plano de fundo, dar uma cor, talvez cinza assim. O que mais temos? Também temos esse texto. Lembre-se de que não queremos nos repetir. Podemos simplesmente duplicar isso, arrastá-lo para baixo e colocá-lo logo acima de Y S. Agora, enquanto ainda estiver selecionado, vou para a margem avançada Reduza a margem inferior desse jeito. Essa frase é deliciosa. Copie isso enquanto ainda estiver selecionado. Conteúdo, cole aquela delícia. Vamos também copiar isso. Controle de cor amarela ou dourada C. Selecione a cor do texto desse estilo e cole-a lá. Isso significa refeições saudáveis para todos. Copie isso, selecione este Y S. Cole-o lá. Isso é lorem ipsum. Então está tudo bem. Acho que nossos títulos são um pouco grandes demais. Se não me engano, vamos reduzi-los para algo em torno de 40 Agora, digamos que 45. 45 está bem. Selecione isso também. Volte para 45, eu acho. Agora estamos bem. Atualize isso agora, na próxima lição , trabalharemos no menu. Podemos exibir assim, mas antes de chegarmos lá, vamos criar essa seção porque ela é muito parecida com esta. A única coisa que precisamos fazer é adicionar essa imagem de fundo voltando aqui. Vamos duplicar isso. Vamos continuar e selecionar enquanto ainda está selecionado, Ir para estilo. Desta vez, não é cor, é a imagem que estamos adicionando de imagens de espaguete Vamos ver, onde está essa imagem? Podemos adicionar qualquer imagem. Acho que é isso, imagem 35. Lá vamos nós. Selecione isso. Incrível. Agora podemos vir aqui para posicionar e dizer no centro superior. Podemos dizer que não repito. E podemos fazer com que cubra desse jeito. Mas outra coisa que eu não mostrei é que, quando você está rolando, você pode fixá-lo em um só lugar para que, quando alguém estiver rolando, percorra Esse é um bom efeito. Esqueci de colocar neste site de referência. Vamos também mudar isso para branco, esse texto para branco também. Atualize isso. Finalmente, vamos selecionar novamente o contêiner externo e ir para a sobreposição de fundo e mudar a cor para preto Vamos aumentar a intensidade para fazer o texto se destacar. Atualize isso. Agora podemos adicionar outra chamada à ação. Duplique essa cópia e arraste-a. Vamos soltá-lo ali mesmo, alinhado ao centro. Isso diz reservas de mesa, atualize isso. Vamos analisar as mudanças. Rolando para baixo. Lá vamos nós. Como você pode ver, ele tem um belo pergaminho que exibe a imagem inteira à medida que você a percorre. que eu realmente gosto agora, voltando à nossa referência , como mencionei a seguir, vamos criar isso. Na aula. Depois disso, criaremos a galeria antes de passarmos para outras partes. vejo na próxima aula. Não vá a lugar nenhum. 17. Global Fonts: Agora, nesta lição, deveríamos trabalhar nesse menu. Mas lembro que não definimos as fontes globais. Agora veja o que temos aqui em nosso site. É isso que vemos, a fonte que temos no site de referência. Esta é uma Montserrat, que é a fonte que eu prefiro para sites Agora, para o que estamos criando, ele tem a fonte Roboto padrão que vem com o elemento Queremos mudar isso para Montserrat. Voltando aqui, podemos ir para cada elemento. Alterando a fonte para Monterat. Ao selecionar o elemento, vá para a tipografia de estilo, agora digite monat, e isso mudou Mas isso seria muito entediante porque envolve repetir e repetir a mesma coisa Mas, felizmente, o Elementor fornece uma maneira de definir fontes globais que, uma vez configuradas, sempre que você adicionar qualquer elemento baseado em texto, elas sempre que você adicionar qualquer elemento baseado em texto, terão a fonte que você definiu nas configurações do site do menu de hambúrguer Como você pode ver, temos cores e fontes globais. Eu posso definir a fonte primária para ser a fonte que eu quiser. Isso mudou para Montserrat. Clique em qualquer lugar lá dentro. Farei o mesmo com todos eles porque gosto que sejam Montserrat Clique lá, finalmente, Montserrat Vamos atualizar isso. Vamos voltar para o editor. Agora, todo fundo é Montserrat, exceto esses fundos elegantes que definimos explicitamente Como você pode ver, todos os nossos fundos agora são monerados. Se adicionarmos um editor de texto, por exemplo, aqui embaixo, ele ainda será Montserrat Deixe-me deletar isso. Isso foi apenas definir os fundos globais e agora você sabe como fazer isso. Nos vemos na próxima lição, quando estivermos criando esse menu. Te vejo em breve. 18. Food Menu: Agora é hora de criar um menu de comida, assim como temos aqui. Este menu de comida serve apenas para mostrar alguns dos alimentos que você tem. Porque lembre-se de que, quando um cliente está em seu restaurante e realmente deseja fazer o pedido, ele clica nesse botão e vê o menu real. Vamos esperar para ver, vamos lá. Esse é o menu real no qual eles podem clicar e fazer o pedido. Isso é para fins de exibição, é para estética em seu site Vamos seguir em frente e fazer isso. O que precisamos fazer é instalar um plug-in. Vamos aos Plugins. Adicionar novo. Vou procurar o menu de comida. Menu de comida. Aqui vamos ao Radius Theme Ele tem 3.000 instalações ativas agora. Há muitas opções aqui e você pode brincar com todas elas. Mas o que eu gostei é esse tema Radius. Para o propósito específico que acabei de descrever, exibindo um bom menu de quatro itens. Vamos prosseguir e instalar. Agora, como você pode ver, é compatível com esta versão da impressora. Alguns deles não foram testados. Vou prosseguir e ativar. Vamos lá, algumas descrições. Mas o que queremos fazer é comer todos os alimentos. Obviamente, não temos comida, então podemos adicionar comida ou refeição. Vamos voltar ao site aqui. Eu vou dizer frango grelhado. E você pode dar uma descrição longa aqui, mas não precisamos colocar essa descrição longa aqui porque não vamos usar esse plug-in para fazer nossos pedidos. Vamos usar um plug-in diferente para o sistema de pedidos e o sistema de menu real O que podemos fazer aqui é fornecer uma breve descrição de que essa galinha é suficiente para duas pessoas. Coloque isso aqui. A razão pela qual não estamos usando esse plug-in para o sistema de pedidos é porque, por exemplo, neste site de referência, se clicarmos nesse frango grelhado para ser redirecionado para a página em que devemos fazer nosso pedido, é Olha só, eu nem sei como editar isso, porque não foi criado com o Elementor Precisamos editá-lo com o Wordpress, Gutenberg. E não queremos fazer isso. Queremos esse menu que está sendo carregado aqui, onde quer que o botão esteja. Não precisamos dessa descrição, mas precisamos dessa breve descrição para fins visuais. Vamos colocá-lo em uma categoria. Adicione uma nova categoria. Podemos chamar isso de almoço ou qualquer categoria que você quiser. Depois de digitar isso, pressione Enter, podemos adicionar um recurso Esta imagem aqui, frango grelhado. Acho que é isso. Defina a imagem em destaque. Agora vamos publicar isso. Vou seguir em frente e criar mais três alimentos. Vou avançar rapidamente nesta seção, adicionar mais comida. Como você pode ver, criei três amostras de refeições e agora queremos exibi-las em nossa página aqui. Estamos exibindo-os logo abaixo dessa seção cinza. Deixe-me acordar, deixe-me duplicar este, sem mais nem menos. E então arraste e coloque logo abaixo. Como você pode ver, tem uma descrição em texto, nosso menu, vou copiar isso. Essas mudanças em nosso menu, então eu as excluirei. Na verdade, assim mesmo. Agora vamos deixar esse contêiner aqui. Agora, de volta aqui, vamos ao gerador de código curto, adicione uma nova postagem. Agora vamos dar um nome ao menu da página inicial que. Vamos também dar a ele um layout, selecione tipo de layout que queremos fornecer. Vamos continuar com isso. Vamos escolher categoria por categoria. Sim, vamos usar aquela grade Mason agora. Você pode brincar com todas essas configurações, mas o mais importante é saber como exibi-las. Depois de exibi-lo, você pode voltar e alterar algumas coisas aqui. Volte para a página, recarregue-a e veja como ela foi afetada pelas alterações nessas configurações de layout Vamos publicar. Agora que foi publicado, vamos escolher essa cópia curta do código. Vamos para o front-end. Aqui, vou selecionar um código curto, um elemento de código curto e arrastá-lo para o contêiner. Aqui vou colar o código curto que acabamos de copiar. Atualize isso. Vamos aplicar a rolagem para baixo. Vamos pré-visualizar as mudanças. Rolando para baixo, é assim que nosso menu fica. Como você pode ver, é diferente do que eu tenho aqui porque eu selecionei um layout diferente. Deixe-me selecionar isso. Atualize isso. Se você quiser atualizar essa página, selecione essa opção. Em seguida, aplique todas as alterações que fizemos aqui no back-end, rolando para baixo. Agora parece o que temos Ele continuará parecendo estar carregando quando você estiver nesta página de edição. Mas quando você visualizar as alterações, elas entrarão em vigor. Tudo bem, então vamos lá. Agora, é claro que você notará aqui em nosso site de referência que temos esse menu. Podemos simplesmente duplicar isso. Vamos descer e colocar isso logo abaixo. Agora queremos isso logo abaixo. Tudo bem, vamos rolar para cima. Vamos colocá-lo aqui por enquanto. Então eu quero carregar esse contêiner e colocá-lo acima do botão. Às vezes, é um pouco complicado colocar elementos onde você quiser colocá-los. Selecionando este botão, posso colocá-lo no centro da distância, aqui é muito pequena. Enquanto estiver selecionado, vá para Margem avançada, no topo. Digamos que 50. Então, vamos também alterar o conteúdo do menu aberto. Abra o menu, não se preocupe com esses botões, vamos substituí-los. Esses são apenas espaços reservados porque obteremos esses botões do plugue real que usaremos para o sistema de menu real São apenas espaços reservados, visualize as alterações rolando para baixo. Lá vamos nós. Temos um bom cardápio. Digamos também que, como você pode ver aqui, essa antena do cânion é um pouco menor que a outra. Acho que isso tem a ver com a imagem que usamos. Vamos mudar essa imagem. Se você usar imagens exatamente do mesmo tamanho, elas terão o mesmo tamanho que eu fiz aqui. Todas essas imagens estão quadradas. Eu os preparo como imagens quadradas do mesmo tamanho. Se uma das imagens que você enviar for menor que a outra, é aí que você terá esses artefatos como esses Deixe-me substituir essa imagem um tipo diferente de imagem do mesmo tamanho. Como você pode ver, 1234. Essas são as imagens que eu usei. Deixe-me selecionar a imagem em destaque do conjunto, atualizá-la. Vamos apenas atualizar esta página. Atualize-o. Lá vamos nós. Agora é a mesma coisa, certifique-se de que suas imagens tenham exatamente o mesmo tamanho para que possam ser exibidas sem essa diferença de tamanho. É assim que se cria esse menu de exibição. Mas mais uma coisa que eu quero fazer é desativar esse link. Acho que vi, acho que está em algum lugar aqui. Link detalhado para a página de detalhes. Desative isso. Vamos atualizar isso. Agora. Se recarregarmos esta página, ela não terá um link Isso é bom apenas para fins de exibição porque a funcionalidade real estará nesse botão. É assim que se cria esse menu. Demorou um pouco mais do que o resto das aulas, mas foi um bom desafio para nós. Na próxima lição, vamos criar esta galeria aqui antes de passarmos para a próxima parte. Te vejo em breve. 19. Gallery: Agora vamos ver como criar essa galeria aqui. Se você já fez alguma das minhas aulas anteriores, é claro que sabe como criar essa galeria. Mas se você está procurando uma atualização, vamos fazer isso Passando para nossa página, aqui estamos. Queremos voltar ao editor. Vamos continuar e duplicar esta seção. Vamos arrastá-lo e colocá-lo abaixo desta seção de fundo da imagem. Claro, vamos nos livrar desse menu. Vamos deixar esse botão aí, porque aqui temos um botão para abrir a galeria. Digamos que galeria. Agora, aqui estamos adicionando a galeria. Para fazer isso, precisamos adicionar mais um plug-in relacionado ao elementor Vamos voltar aqui e dizer que plug-ins, adicionem um novo elementor. É chamado de adições essenciais para o elemento. Como você pode ver, ele tem 2 milhões de instalações ativas. Vamos ativar isso. Em seguida, vamos usar o Advanced. Avançado basicamente significa que mais desses widgets estarão disponíveis para nós no front-end Em seguida, o que estamos procurando é essa galeria filtrável Em seguida, podemos dizer próximo. Aqui. Próximo. Não, obrigado. Agora terminamos a instalação. Agora, voltando ao front-end aqui e atualizando a página com o controle R. Sempre que você adiciona um plug-in adicional relacionado ao elemento, ele é adicionado aqui Se derrubarmos todos esses painéis, lembre-se de que adicionamos o elemento K, kit de elementos. Aqui estão os painéis para o kit de elementos e agora adicionamos complementos essenciais. Isso é apenas para mostrar onde você pode encontrar todos eles. Esses são elementos gratuitos que você pode adicionar, mas é claro que eles também têm elementos premium. Mas a galeria filtrável que estamos procurando está aqui Se rolarmos para baixo, podemos arrastar isso e soltá-lo lá Pronto, enquanto ainda está selecionado. Agora, isso muda para Editar galeria filtrável. Primeiro de tudo, seis itens para mostrar são suficientes. Vamos ver quais outros controles filtráveis, esses são esses itens aqui em cima, como você pode ver, temos mesas, funcionários, cozinha São como categorias de imagens que você tem. Categorias de fotos, talvez fotos da equipe, talvez os diferentes tipos de comida que você tem. Talvez uma viagem. Seja qual for a categoria que você deseja que suas fotos sejam colocadas. Voltando aqui, podemos criar controles filtráveis Vou usar apenas as mesas que usei. Estamos dizendo ao Element, categorize essas imagens com isso. O segundo aqui pode ser a equipe e o terceiro aqui pode ser o que era esse local. Atualize que o que há de errado com isso? Tudo bem, enquanto isso ainda está selecionado. Agora podemos criar os itens da galeria e essas são as imagens individuais, como você pode ver aqui, temos o item um da galeria. Se eu selecionar isso, posso dar o controle. O nome do controle aqui é o nome da categoria aqui em cima. Se dissermos que são tabelas, essa imagem só será mostrada quando selecionarmos o controle de tabelas. Deixe-me me livrar desse texto porque eu não gosto do texto, mas você pode guardá-lo se quiser. Eu também removo o botão de link. Assim, ficamos com um botão de caixa de luz. Isso apenas o abre para que você possa visualizá-lo em um modo isolado. Nós nos livramos disso. Agora vamos selecionar uma imagem para essa seção. Você pode escolher qualquer um. Esta é a tabela dois, por exemplo. Selecione isso. Lá vamos nós. Agora esse é o item um da galeria. Podemos chamá-la de talvez tabela um. Seja criativo com esses itens. Talvez, oh espere, isso deveria ser a equipe, esse talvez seja o chef. Vamos nos livrar disso. Vamos nos livrar do botão de link e selecionar o chef. Ok, vamos selecionar esse cara. Selecione isso e pronto. Vou abrir o item três da galeria. Primeiro de tudo, vamos selecionar, talvez estejamos falando sobre as premissas. Então vamos para a cozinha aberta, essa é uma imagem da cozinha. Vamos remover esses textos. Remova o link, diga que isso é controlado pelas instalações. Só deve ser mostrado quando o controle de instalações é o local ativo. Vamos chamar isso de atualização de cozinha. Vou repetir o mesmo para esses três, mas vou avançar rapidamente nesta seção. Acabei de criar todos os três restantes. Se visualizarmos a página, vamos até a seção. Aqui estamos. Se selecionarmos tabelas, ela mostrará a tabela um e a tabela dez. Se mostrarmos que a equipe terá a chef Kate, a garçonete, e Alex, o barman, é claro que, por exemplo, para Alex, o nome do item é Alex, o nome do item é Alex, e o barman se enquadra nesse editor de texto aqui Agora você notará aqui em nossa referência que temos cantos arredondados. Então, vamos seguir em frente e estilizar isso. Enquanto ainda estiver selecionado, vou entrar no estilo, vou até o raio da borda do item Vamos dar 20 agora que estão arredondados. Atualize isso. Se formos para a página de visualização, agora eles estão arredondados. Lá vamos nós. Você pode ir em frente e brincar com todas essas outras configurações. Agora que você sabe como adicionar essa galeria filtrável, queremos manter esta lição curta Mas nós realmente abordamos as partes mais importantes, as partes mais importantes. Vá em frente e brinque com todas essas configurações e veja se você pode melhorar sua galeria de filtros. Isso é tudo para esta lição. Na próxima lição, vamos ver como criar esse rodapé. Te vejo em breve. 20. The Footer: Agora estamos prestes a criar esse rodapé sem perder mais Vamos começar a mudar para o nosso site. Agora, é claro, da mesma forma que criamos o cabeçalho separadamente da página inicial, vamos criar o rodapé separadamente usando o elemento ski light É hora de sair daqui, mas antes de sairmos, vamos dizer atualização. Agora podemos sair. Tudo bem, vamos para o rodapé do cabeçalho do elemento skit. Agora, digamos que adicione um novo, você sabe o que fazer com meu pé. É claro que essas alterações no rodapé devem estar ativas e vamos continuar editando o conteúdo Aqui estamos. Agora , é claro, vamos adicionar uma seção de três colunas. Vamos adicionar isso aqui. Quero adicionar um elemento de imagem. Podemos colocar o logotipo aqui. Vou selecionar esse logotipo aqui. Vamos adicionar ícones sociais. E eu gosto desses do Elements Kit. Esses outros são da equipe Element, mas esses são do Elements Kit. Vou deixá-los aí mesmo. Como você pode ver, eles estão posicionados na parte superior. Se eu selecionar o recipiente que os contém, posso alterar a justificativa para centralizar assim Eu posso fazer o mesmo aqui com o logotipo, mas isso nem está visível. Agora, como você pode ver aqui, temos uma imagem de fundo, já sabemos como fazer isso. Selecione o contêiner, vamos para estilo, tipo de plano de fundo e, em seguida, vamos selecionar uma imagem. Queremos ter certeza de selecionar uma imagem grande, A grande. Sim, 19 1920 por 1080. Tudo bem, selecione isso. Lá vamos nós. Como sempre, entenda a posição, talvez no centro ou talvez no centro superior Digamos que o anexo padrão seja Repetir, Repetir. Digamos que uma capa para a sobreposição de fundo. Vamos dar essa cor preta. Vamos torná-lo mais escuro, sem mais nem menos. Agora, é claro, isso significa que não podemos ver os ícones sociais, selecionar os elementos, essas mudanças para editar ícones sociais. E temos Facebook, Twitter e Linked in. Você pode adicionar outro se quiser, mas vamos usar três Facebook. Agora vamos colorir em circunstâncias normais, a cor. Então, queremos escolher essa cor dourada. Quero editar a página com o elementor, selecionar esses textos, ir para o estilo, selecionar o controle amarelo C para copiar e fechar isso Venha aqui e cole. Agora é amarelo, mas na verdade essa é a cor do texto. Eu quero a cor de fundo branco. É isso que queremos: esse fundo amarelo exatamente ao passar o mouse Na verdade, normalmente, eu quero que o texto seja preto assim. Ao passar o mouse, queremos que o fundo seja branco, desse jeito Vamos repetir o mesmo para o Twitter. É preto por padrão, mas o fundo é dourado. E passe o mouse, o fundo precisa ser branco. Agora vamos também vincular o que deve ser preto, deve ser dourado em espera, branco. Atualize que, é claro, é aqui que você colocará os links para as diferentes plataformas sociais diretamente no seu perfil nessa plataforma. Cole aqui. Para Linked in for Twitter, você cola aqui. E para o Facebook, vamos ao estilo. Você também pode alinhá-los à direita. Você também pode selecionar o logotipo no rodapé e reduzir seu tamanho, talvez até esse ponto E alinhe-o à esquerda. Agora, aqui mesmo. Vamos adicionar um título de texto “Refeições”, como nenhuma outra cópia. Cole aí. Vamos mudar a cor da frente para branco. Vamos à tipografia. Vamos torná-lo preto. Vamos alinhá-lo no meio. E acho que estamos bem agora. Em seguida, também precisamos adicionar um parágrafo de texto ou editor de texto. Vamos colocá-lo ali mesmo, estilo, cor central, branco. Atualize isso. Agora é claro que temos um pouco de acolchoamento para cima e para baixo aqui. Preenchimento aqui e acolchoamento ali embaixo, seleção do rodapé em si, Vamos dar talvez 100 e aqui, 100. Atualize isso. Vamos também selecionar esse contêiner contendo o texto. Vamos alinhar tudo no centro verticalmente. Vamos reduzir isso. Selecione este texto, avance uma margem inferior para que tudo esteja alinhado corretamente Selecionando esse contêiner, mais uma vez, podemos definir uma lacuna, talvez 40, que é 440 Atualize isso, vamos pré-visualizar. Incrível, esse é o nosso rodapé. Podemos deixar isso um pouco mais escuro, voltando aqui, com uma sobreposição de fundo, mais escura Vamos também criar esse logotipo, um link, um link para um URL personalizado. Copie isso, vamos colar lá, atualizar isso. Incrível. E agora, quando clicarmos aqui, logotipo será redirecionado para a página inicial Há uma coisa que preciso que você observe à medida que nos aproximamos da página inferior, rolando até elas. Exatamente, parece muito bom Mas o que eu queria que você notasse é que não estabelecemos uma margem para a parte inferior desta seção fizesse alguma separação aqui. Agora precisamos editar esta página inicial, editar com elementor. Agora, rolando até a parte inferior, esta seção aqui que contém todas as seleções avançadas, tem uma margem superior de 100 Vamos também atribuir uma margem inferior de 100. Atualize essa prévia para que tudo esteja uniformemente espaçado. Tudo bem, rolando para baixo, exatamente. Agora temos um bom espaçamento aqui. É assim que se cria o rodapé com o kit de elementos. Espero que você goste dessa lição. Na próxima lição, vamos definir a imagem em destaque. Te vejo em breve. 21. Set Featured Image: Queremos fazer algo muito rapidamente, e isso é definir uma imagem em destaque para nossa página de destino. Tudo isso faz parte do SEO. Para o Wordpress, o que é algo muito importante. Você pode ter um site muito bonito. Mas se você não fizer o SEO correto, o site nem estará visível para o Google e outros mecanismos de pesquisa. Você precisa definir uma imagem em destaque. Voltando aqui, tudo o que precisamos fazer é acessar as páginas. Você seleciona a página, queremos definir uma imagem em destaque para edição. E aqui você notará que temos um conjunto de imagens em destaque, a imagem em destaque que queremos ser. A propósito, essa pode ser uma boa imagem em destaque. Defina isso como a imagem em destaque e atualize-a. Agora, quando alguém pesquisar nosso restaurante no Google pelo nome, se ele aparecer nos resultados de pesquisa do Google ou for um resultado de pesquisa, ele mostrará essa imagem em destaque Obviamente, isso é melhor do que apenas mostrar um breve texto descrevendo o que é nosso restaurante. Agora, se você quiser saber mais sobre por que as imagens em destaque são importantes e como configurar e otimizar seu site para SEO. Eu tenho uma aula completa aqui sobre compartilhamento de habilidades, mostrando tudo o que você precisa saber sobre SEO para Wordpress. Confira meu perfil e procure uma aula sobre SEO para Wordpress. Mas, basicamente, é assim que você define sua imagem em destaque. Na próxima lição, vamos ver como criar a página Sobre. Te vejo em breve. 22. About Page: Agora é hora de criar a página Sobre. Voltando ao nosso painel. Em primeiro lugar, deixe-me encerrar todas essas outras coisas em que estávamos trabalhando. Agora aqui estamos e esta é a página sobre. Eu quero entrar. Observe que quando você passa o mouse sobre a página inicial, ela tem edição com elementor, mas essas outras não editam com E isso porque ainda não começamos a editá-los com o element. Acabamos de criá-los e não fomos ao front-end para editá-los, mas quando começarmos a editá-los com o elementor, quando você voltar lá, ele terá essa opção Estamos aqui, estamos editando. Lembre-se de que não definimos aqui as configurações básicas que definimos para a página inicial. Vamos para o padrão. Vamos até o modelo e digamos elemento ou largura total. Vamos também entrar nas configurações do astra. Digamos largura total, barra lateral, sem barra lateral. Vamos desativar esses outros. Atualize isso, incrível. Agora vamos editar com o elementor. O que queremos fazer é se eu puder visualizar isso e, em seguida, ir para a página inicial. Quero que editemos com o Elementor. Queremos reutilizar algumas dessas partes que estão na página inicial Por exemplo, se eu rolar, podemos escolher isso. Eu posso simplesmente entrar e dizer, clique com o botão direito do mouse em copiar. Se eu voltar aqui dentro desta caixa, posso dizer Paste. Essa é uma forma de reutilizar elementos. Outra forma de reutilizar elementos é selecionar esse botão direito do mouse e dizer salvar como modelos Se eu salvar como modelo, posso chamá-la de seção de fundo da imagem, por exemplo. Agora está salvo nos meus modelos. Agora, se eu vier aqui, deixe-me deletar isso. Se eu vier aqui para adicionar um modelo e entrar nos meus modelos, posso dizer inserir. Isso me dirá que substituirá qualquer coisa que eu tenha criado aqui Eu direi que se inscreva. Lá vamos nós. A razão pela qual eu queria que escolhêssemos isso é para que pudéssemos criar algo assim. Em primeiro lugar, vou selecionar isso e, como você pode ver, não consigo controlar o contêiner. E lembre-se de que tinha uma margem superior de 100, de 100 de onde a escolhemos na página inicial. Queremos remover essa margem para que ela suba. Observe que também não temos todas essas coisas. Deixe-me me livrar disso, daquilo , mas quero manter essa breve descrição. Acho que parece melhor. Deixe-me selecionar o próprio contêiner e adicionar um pouco de preenchimento na parte superior Vamos fazer com que sejam 200. Tudo bem, primeiro vamos torná-lo zero depois remover o link. Assim, podemos editar apenas uma célula por vez. Eu quero que seja 200, digamos 180, são 1.800 na parte inferior Digamos que 50. Tudo bem, sobre selecionar esse texto, colar isso. E então podemos ter talvez apenas uma breve descrição aqui, sem mais nem menos. Atualize isso. Em seguida, vamos escolher nossa história. Vamos adicionar essa seção. Vamos adicionar uma margem de 100. Duplique isso. Vamos arrastar e colocar isso lá. Mude para essa cor preta, 111 para consistência. Vamos também escolher esse texto. Volte aqui. Editor de texto. Vamos colar isso aí. Ao colá-lo, use control shift V em vez do control V. Se você colá-lo com o controle V, ele terá qualquer formatação que tinha anteriormente Então, enquanto ainda estiver selecionado. Vamos alinhá-lo no meio. O que mais temos? Temos duas imagens logo abaixo disso, mas ainda dentro desse contêiner podemos adicionar um contêiner e, em seguida, dois contêineres dentro da duplicata Agora eles estão indo de cima para baixo. Vamos selecionar o externo. Vamos garantir que seja da esquerda para a direita. Assim mesmo. Agora aqui podemos adicionar uma imagem, selecione aqui uma imagem do seu histórico. Pode selecionar isso. Vamos dar a ele aqueles cantos arredondados dentro do raio de borda de estilo 20 Agora vamos duplicar isso. Vamos nos livrar disso. Vamos mudar isso. Vou usar uma dessas imagens, mas você precisa fazer o upload de uma boa. Pronto, Update. Vamos analisar as mudanças. Incrível. Agora, é claro, você notará que, se atualizarmos esta página, ela terá aquele salto ao recarregar E queremos que esse controle de carga gradual selecione os efeitos de movimento avançados do contêiner, digamos, fade in, atualize isso Vamos pré-visualizar as mudanças desse jeito. Em seguida, adicionaremos essa seção, como você já adivinhou Podemos selecioná-lo na página inicial porque criamos algo parecido com isso. Já o salvamos como modelo. Entrando aqui, é isso. Insira, aplique. Se rolarmos, lá vamos nós. Tudo bem, então assuntos de família, copie isso, selecione e cole, dirigido por Olivia e Lucas Cole isso aí. Copie isso, selecione isso, cole isso lá. E, claro, isso é um espaço reservado, teremos os botões reais usaremos aqui. Vamos deixar isso aí. Incrível. Vamos criar esta seção. Queremos uma seção de coluna dupla. Enquanto isso ainda estiver selecionado, vou para a margem avançada 100 na parte superior. Vamos adicionar uma imagem aqui. Tudo bem. Está à direita. À esquerda, podemos ter esse texto. E o editor de texto, esse é Lucas, esse é apenas um texto de espaço reservado, Lucas 111 A fonte é preta e provavelmente tem 45. Agora, é claro, selecionarei esse contêiner que o contém e, em seguida, alinharei tudo verticalmente no centro Selecione uma imagem de Lucas. Aqui estamos, abertos. Vamos embora. Incrível. Vamos estilizar o raio de borda 20 para obter esse canto arredondado Então, vamos selecionar esse contêiner aqui no layout. Vamos dar a ele um espaçamento entre colunas de talvez 40. Incrível. Agora vamos duplicar isso Agora está duplicado. Podemos arrastar isso e colocá-lo do outro lado. Vamos mudar isso para a nossa direita aqui, onde está uma boa imagem? Conheça Olivia, porque essa criada é dirigida por Lucas e Olivia. Selecione isso. Pronto, esta é a Olivia. Atualize essa prévia das alterações. Lá vamos nós. Super incrível. Estamos quase terminando a página sobre. Obviamente, precisamos criar essa seção de inscrição no boletim informativo, mas isso deve ser uma lição por si só. Vamos fazer isso na próxima lição. Te vejo em breve. 23. Newsletter Signup Form: Agora é hora de criar este formulário de inscrição para boletins informativos , retornando ao nosso editor. Por enquanto, vamos sair desse lugar. Assim, podemos acessar o back-end do painel e instalar meu plugin de formulário favorito para o Wordpress , chamado Forminator Vamos até a saída do painel. Vamos até Plugins Adicionar novos aqui. Vamos digitar Forminator. Pronto, pelo desenvolvedor do WP MU com 500.000 instalações , instale isso 500.000 instalações Este é um dos melhores plug-ins de formulário no plug-in do Wordpress no Reposit Agora, aqui estamos. Você o encontrará localizado quase na parte inferior deste menu. Se eu clicar no Forminator, serei levado ao painel do plug-in. Aqui estamos. Como você pode ver, podemos criar um formulário, criar qualquer tipo de formulário, ou você pode criar pólos, pesquisas de opinião ou algo assim Vamos, eu quero que criemos um boletim informativo. Formulário de inscrição, continue. Esse é um modelo que usamos. Formulário de inscrição, crie isso. Agora, é claro, como você pode ver aqui em nossa referência, eles estão lado a lado. O nome e o e-mail podem escolher isso , arrastá-lo e colocá-lo ao lado do primeiro nome. Se pré-visualizarmos, é assim que fica. Aqui está o botão Inscrever-se. Aqui vamos nós. Você pode alterar o que diz clicando nele e dizendo talvez junte-se a nós ou algo assim, Inscreva-se. Agora diz junte-se a nós. Junte-se a nós. Tudo bem, agora é hora de estilizar o formulário. Se eu clicar em Publicar, teremos um código curto. E lembre-se de como exibir um código curto no front-end. Se eu chegar a esta página aqui e disser editar com elementor rolando para baixo logo abaixo disso, vamos duplicar isso Na verdade, precisamos dos dois. Deixe-me me livrar da imagem. Precisamos dos dois contêineres, e deixe-me me livrar de tudo isso. Agora temos esses dois contêineres. Neste contêiner, vamos colocar um elemento de código curto, vamos colocá-lo lá. Agora, voltando ao painel, copie esse código curto e cole. Selecione isso e cole aqui. Lá vamos nós. Atualize isso. Vamos analisar as mudanças. Rolando, vamos lá. Vamos também obter a cópia mais recente que está disponível aqui. Deixe-me duplicar isso. Largue isso aí. O que eu fiz, controles para desfazer? Vamos pegar isso e eu colar isso. Deixe-me também escolher o texto, editor de texto que está lá. Vou colar isso, atualizar isso. Vamos analisar as mudanças. Incrível. Agora, vamos também adicionar uma margem abaixo aqui neste contêiner. A atualização avançada da parte inferior 100. Vamos revisar as alterações rolando para baixo. Tem um bom acolchoamento ali mesmo. Agora vamos estilizar isso para que fique melhor assim em nosso painel. Se fecharmos isso, temos campos posteriores, temos aparência aqui. Você pode escolher diferentes aparências para seu formulário. Eu gosto do ousado, mas quero mudar essas cores, cores. Vamos usar o personalizado em vez do personalizado padrão. A primeira coisa que eu quero mudar é o botão Enviar. Eu quero que seja dessa cor dourada voltando aqui. Deixe-me selecionar esse estilo, copiar esse código. Voltando aqui, selecione colar lá. Agora é aquela cor ao passar o mouse, eu quero que ela esteja em 111 em foco, embora isso não seja muito importante 111 vistas, vamos lá. Agora vamos tornar esses cantos menos gritantes. Entrada escura e área de texto para a cor da borda, quero alterá-la para esse cinza claro ligado, quero mudá-la para esse cinza levemente escuro On Focus, aquele cinza levemente escuro. Tudo bem. Prévia, vamos lá. Incrível. Mas agora queremos dar a eles alguns cantos arredondados. Eles são muito afiados. Primeiro de tudo, vamos atualizar isso. Agora, o formintor nos fornece uma maneira adicionar mais CSS personalizado aos nossos formulários. Se não tivermos a capacidade de fazer essas alterações usando esses recursos aqui, podemos usar CSS personalizado para edições adicionais Por exemplo, você percebeu que esse é um campo de entrada. Podemos definir como queremos que nossos campos de entrada se comportem em sua aparência na configuração CSS. Podemos entrar aqui e dizer que, para as entradas, selecione as entradas. Agora, esse é o seletor para todas as entradas. Queremos o raio de fronteira cinco. Queremos que o raio da borda dos campos de entrada tenha um canto arredondado de cinco pixels Se visualizarmos isso agora, eles têm um canto arredondado de cinco picelsf, digamos, por exemplo, 50 Como você pode ver, agora está praticamente arredondado. Vamos atualizar isso. Vamos analisar as mudanças. Queremos que seja 550 é muita atualização. Agora, também queremos fazer o mesmo com o botão, mas se você olhar aqui, não temos um botão de seleção. Eles são chamados de seletores. Não temos um botão de seleção. O que podemos fazer é ir para o front-end. Em primeiro lugar, deixe-me selecionar esse código curto e clicar em Aplicar. Só para aplicar o que fizemos no painel no back-end, rolando para baixo. Agora, como você pode ver, as mudanças entraram em vigor. Se visualizarmos isso, rolando para baixo, vamos lá Agora eu posso clicar com o botão direito neste botão e depois inspecionar. Em qualquer navegador, você encontrará um elemento de inspeção. Agora, como você pode ver, quando clicamos em Inspecionar, ele basicamente exibe todo o código , incluindo o seletor fornecido ao Agora, se você olhar aqui, verá que o botão está amarelo. É muito fácil dizer que esse é o botão. Ele tem uma cor de fundo amarela e é chamado de botão Formintor Enviar Se selecionarmos isso com o controle de pontos C e voltarmos aqui, podemos usá-lo como nosso seletor Colar, abrir e fechar o suporte. Agora podemos dizer raio de borda de cinco pixels. Agora, se visualizarmos isso, agora ele tem esses pixels. Atualize isso. Agora, é claro, parece um pouco feio com todo esse espaço deixado aqui Por que não a esticamos até o fim e a colocamos no meio Agora que já o selecionamos, podemos adicionar 100% Essa não é a grafia da largura Se o visualizarmos agora, ele terá uma largura de 100%. Atualize isso. Tudo bem, agora, se voltarmos para esta página e enquanto ela ainda estiver selecionada, podemos aplicar o que acabamos de fazer no back-end. Agora, se visualizarmos as alterações, deixe-me fechar isso. Vamos descer e lá vamos nós. É assim que se cria o inscrição no boletim informativo formintor. Na próxima lição, queremos trabalhar na página da galeria. Te vejo em breve. Não vá muito longe. 24. Gallery Page: Agora é hora de criar a página da galeria. Vamos abri-lo antes de criarmos a página da galeria. Aqui está. Acabei notar que não criamos esse ícone aqui, acima aqui na página sobre. Deixe-me procurar, vamos arrastar um ícone para lá. Isso é muito fácil, esses dois copos, ou podemos ter esses dois mais escuros. Inserir. E, claro, vamos mudar a cor para, deixe-me escolher essa cor neste botão. Copie isso e cole lá. Ao passar o mouse, podemos torná-lo 111 para obter consistência. Exatamente desse jeito. Atualize isso. Vamos analisar as mudanças. Lá vamos nós. Claro, se eu recarregar esta página, ela é animada, mas carrega muito rigidamente Não se preocupe, vamos trabalhar nas animações dos demais elementos do site Porque se você olhar nossa página aqui, recarregue o site de referência, tudo é animado Vamos trabalhar nisso, não se preocupe, voltando aqui. Agora temos nosso ícone e estamos prontos para trabalhar na galeria. Deixe-me mudar para a galeria. Como você pode ver, temos essa galeria de nomes aqui que parece feia no cabeçalho Isso porque essa é a página bruta que criamos, assim como a página sobre. Ainda não o editamos com o elementor e não definimos essas configurações básicas no back-end É por isso que é apenas a página padrão do Astra Wordpress. Se dissermos que a página de edição será levada diretamente de volta ao back-end, onde podemos definir configurações básicas, como o elementor do modelo A largura total pode estar dentro das configurações do Astra. Podemos dizer largura total, sem barra lateral. E, claro, vamos desativá-los. Atualize isso. Tudo bem, agora se dissermos editar com elementor, agora é uma página elementor Vamos em frente e vamos nos livrar disso. Como queremos usar essa seção da página principal, podemos torná-la um modelo ou simplesmente copiá-la em qualquer outra página que quisermos usar. Vou escrever, clique e copie. Entrando em nossa galeria, posso dizer colar, mas também direi salvar como modelos para que possamos salvar isso uma página para outra, porque também vamos usá-lo na página de contato. Não queremos ter que copiá-lo novamente. Lá vamos nós. Mude isso para galeria Awesome. A próxima coisa que queremos fazer é deixar eu atualizar isso. Prévia, as mudanças, aí está. A próxima coisa que queremos fazer é ir para a página inicial, porque queremos copiar essa edição da Galeria com o elementor Podemos rolar até o final aqui. Queremos copiar esta seção inteira, clique com o botão direito do mouse em copiar. Volte aqui, clique com o botão direito do mouse em colar. Vamos lá, porque já o projetamos. Já parece bom. Mas agora essa é uma galeria única. O que quer que façamos aqui não afetará a galeria na página inicial. Deixe-me fechar a página inicial. Volte aqui agora. Para economizar tempo, não vou adicionar mais imagens aqui. Mas se reduzirmos a página de configurações nos itens da galeria, você pode adicionar mais imagens aqui duplicando isso dentro E talvez rotulá-la como tabela oito, selecionando uma imagem diferente. Deixe-me pegar uma imagem aleatória aqui. Tudo bem, deixe-me selecionar isso. E agora, para economizar tempo, vou apenas duplicá-los e, e, em seguida, randomizá-los Chaveiro aqui, tabela dez, Alex atualize isso. Agora, adicionamos um botão separado aqui para abrir a página da galeria. Vou fechar isso e atualizar a página. Na verdade, deixe-me primeiro voltar à página inicial e editar com o elementor Vamos rolar até o final. Agora, esse botão aqui não tem um link e queremos que ele seja redirecionado para a página da galeria Vou copiar isso. Vá aqui enquanto estiver selecionado, eu vou colar isso lá. E, claro, a página da galeria tem a extensão da atualização da galeria que eu conheço. Porque se você acessar o painel e acessar as páginas, se você olhar a edição rápida da galeria, o slug é galeria, isso significa o domínio, esse Você também pode dar uma olhada rápida digamos que um advogado edite Se você acessar o URL, notará aqui que é a galeria de barras do VF export.com É assim que é uma galeria. Se você quiser abri-lo em uma guia separada, abra esta roda dentada, abra em uma nova janela, atualize-a Se eu visualizar a página inicial agora e rolar até o final. Se eu clicar em Abrir Galeria , a página da galeria em que estamos trabalhando agora será aberta. Deixe-me encerrar isso porque queremos voltar para a página da galeria em que estamos trabalhando . Agora, precisamos remover esse botão porque ele era destinado à página inicial. A galeria em si vem com um botão Carregar mais. Se eu fechar o botão Carregar mais de configurações, ele será carregado ali mesmo. Se você clicar em carregar, ele mostrará mais imagens que você tiver. Acho que tínhamos mais imagens. Oh, deixe-me encerrar essa versão de que deveríamos estar aqui. Se eu for até a galeria de colapso, botão Carregar mais itens, ele aparecerá aqui. E se clicarmos em Carregar mais, ele carregará o resto das imagens. Mas agora precisamos estilizá-lo de acordo com o estilo. Primeiro de tudo, vamos atualizar isso. Vamos atualizar esse controle de página R para que possamos vê-lo. Tudo bem, agora selecione esta galeria e vamos para o botão Style Load More. Primeiro de tudo, o espaçamento superior, vamos dar 50. Vamos dar esse acolchoamento. Vamos liberar isso. 60 para a esquerda, 60 para a direita até 20 para baixo. Vamos também atualizar o raio de borda de 50 também queremos dar a ela essa cor dourada Se voltarmos aqui, podemos selecionar copiar e colar lá. E ao passar o mouse , queremos que esteja em um. Para atualizar isso de forma consistente, vamos revisar as alterações. Incrível. Porque copiamos a própria galeria da página inicial Tem a margem que definimos na página inicial. É por isso que não precisamos mais adicionar. Se carregarmos mais, poderemos ver mais imagens. Isso é peso. Precisamos mudar esses textos. Digamos que nossa história em fotos atualize isso. É assim que parece. Como mencionei, vamos trabalhar nos efeitos de movimento. É assim que se cria a página da galeria. Na próxima lição, trabalharemos na página de contato. Estamos quase no fim, pessoal. Parabéns pela distância que você chegou. Te vejo em breve. 25. Contact Page: Agora é hora de criar a página de contato. Ao mudar para a página de contato, repetiremos as mesmas etapas que seguimos na página de edição da página da galeria. Se eu puder voltar muito rapidamente. No momento, como você pode ver, temos esse é o cabeçalho padrão de. Agora, esse é o padrão , entrando nessas configurações aqui Se formos para as configurações do Astra, é por isso que estávamos desativando o cabeçalho e o rodapé Agora, se desativarmos esses dois e atualizarmos a página, se visualizarmos a página, tudo bem, agora ainda temos esse título de contato que eu acho que é um título do Wordpress. jeito nenhum. Certo. De qualquer forma, vamos mudar o modelo para elementor full width astra. Queremos que seja de largura total aqui, sem barra lateral Vamos também desativar a área do banner e atualizar. Tudo bem, edite com elementor, é claro. Agora vamos adicionar o modelo que criamos, o topo da página, inserir, aplicar. Você pode alterar essa imagem de fundo aqui e isso não afetará as outras páginas em que usamos esse modelo no contêiner de controle Eu gosto desse estilo de contêiner flutuante. Vamos selecionar isso. Deixe-me selecionar isso, fechar aquilo. Esse é o contato. Entre em contato conosco, atualize isso agora, porque estamos criando um formulário. Vamos aqui. Entre em contato com o site de referência. Incrível. Como estamos criando esse formulário, é claro que precisamos usar o formato. Voltando aqui dentro do painel. Vamos voltar, vamos para Formuladores de Formuladores. Digamos que crie um formulário de contato. Continue criando isso. Ele tem alguns campos padrão aqui. Pré-visualização, este é um campo de entrada. Campo de entrada. Campo de entrada, e essa é uma área de texto. Lembra quando chegamos aqui para ver quando habilitar o CSS? Tínhamos o seletor para área de texto, mas só trabalhamos com entradas quando estávamos criando a inscrição no boletim informativo Também usaremos isso se precisarmos. Voltando ao Fields Preview, na verdade, devemos voltar à aparência. Vamos para Bold. Vamos até o botão Colors Submit, devemos dar aquele amarelo. Mais uma vez, copie isso. Vamos colá-lo. Deveria haver 11111. Lá vamos nós. Para a área de texto de entrada, queremos ter essa borda cinza clara ativada. Queremos ter essa cor um pouco mais escura. O mesmo caso se aplica a então o erro está correto. Visualize agora, está muito melhor. Feche isso, é claro. Lembre-se de que dissemos que você pode reorganizar isso se quiser, por exemplo, que o primeiro nome e o e-mail estejam na mesma linha Você sempre pode fazer isso. Você tem muita flexibilidade. Agora temos nosso código curto. Vou copiar esse código curto, depois volto para, esta é a página sobre e terminamos com ela. Vou voltar para a página de contato, diga adicionar. E eu quero que adicionemos uma coluna dupla. Seção, eu seleciono isso, vamos adicionar a margem superior de 100. Então, aqui, vamos adicionar um código curto, elemento de código curto. Vamos colar esse código curto ali mesmo, atualizá-lo. Vamos analisar as mudanças. Lá vamos nós. Agora vamos adicionar essa margem na parte inferior, selecionar esse contêiner, atualizá-lo, vamos visualizar as alterações. Sim, um bom espaço lá. Agora também precisamos ser consistentes e ter esses cantos arredondados. Então, voltando aqui, é claro, agora, como você pode imaginar, vamos entrar no CSS personalizado de aparência. Vamos selecionar a área do texto, raio da borda de cinco pixels Deixe-me copiar isso. Digamos que a entrada também precise ter um raio de borda de cinco soleiras de pico Pré-visualize isso. Incrível. E agora o botão, não me lembro do nome do botão, o nome selecionado, era Forminator Submit Copie esses cinco X. Lembre-se de que cinco X. também devemos dar a isso uma largura de 100% e pré-visualizar isso Pronto, atualize isso. Feito. Agora, se formos aqui e selecionarmos esse código curto e aplicarmos o que acabamos de fazer no back-end, agora ele estará visível. Vamos pré-visualizar isso e fechar isso. Aí está nosso formulário com uma aparência muito incrível. Agora, é claro, a única coisa que resta é que adoraríamos ouvir de você colar o título do texto, isso é uma soma decrescente Vamos usar um editor de texto. Vamos selecionar esse contêiner que os contém e justificá-los no centro Eles deveriam ter 40 anos. Sim, isso é Monserrat, mas queremos que seja preto. A cor também deve ser 111 A. E agora você notará que temos esse acordeão aqui Então, vamos adicionar um acordeão e acho que vou usá-lo por kit de elementos Precisamente. Tem três campos. Por padrão, vou expandir isso e dizer que me mande um e-mail restaurant.com Consultas, perguntas perguntas em restaurant.com Essa separação é muito grande, então eu pressiono a tecla Shift e pressiono Enter apenas para empurrá-la para a próxima linha Selecione os dois. Expanda isso e vamos dar a eles algumas balas. Isso se torna uma bala. Não, eu quero que sejam duas balas. Tudo bem, derrube isso. Expanda o segundo telefone. Mais 254-12-3458 254-12-3458 mais 1008002373. 254-12-3458 mais 1008002373. Agora podemos torná-los talvez ousados. Agora vamos derrubar isso e remover este. Aceite, sem mais nem menos. Coloquei isso de volta aqui e segurei a tecla Shift para empurrá-la para a próxima linha, sem mais nem menos. Agora você pode torná-los maiores ou menores, se quiser. Vamos expandir isso. Você pode alterar a cor aqui, se quiser. Vamos ver, o título três, é de bom tamanho. Vamos também selecionar esse contêiner e definir a lacuna 40. Atualize isso. Vamos analisar as mudanças. Lá vamos nós. Nossa página de contato já está pronta. Podemos derrubar esse acordeão. Agora estamos prontos para passar para a próxima etapa, que é adicionar os efeitos de movimento nas diferentes páginas e, em seguida, tornar as páginas responsivas em diferentes tamanhos de dispositivos, smartphones e tablets Já fica bem em um desktop, então estamos trabalhando nesses dois dispositivos. Então, nos vemos na próxima lição. 26. Adding Motion Effects: Agora é hora de adicionar efeitos de movimento a todos esses elementos. Se eu recarregar esta página, como você pode ver, esse cabeçalho é animado, enquanto carrega de uma forma muito rígida Vamos ver isso de novo. Como você pode ver, o que queremos fazer é animá-los para que pareçam artísticos Vamos começar com esta página, na verdade voltando até a edição da página inicial. Enquanto ainda estamos aqui, podemos dizer que, na verdade, vamos selecionar esse contêiner em que o texto vai para Efeitos de movimento avançados. Digamos que está desaparecendo. Gosto de pular para a esquerda, sem mais nem Esse outro está pulando para a direita. Efeitos de movimento avançados, saltando para a direita, atualizam isso. Vamos analisar as mudanças. Isso é muito melhor , como você pode ver. Tudo bem, agora vamos voltar para a página da galeria. Esse aqui. Digamos que edite com Elementor Tudo bem, se selecionarmos esse primeiro elemento, podemos ir para Advanced Motion Effects. Podemos dizer que você pode brincar com todos os outros, mas eu gosto de pular, seguido por esse outro também pulando para cima seguido por esse outro também Vamos tentar outra coisa. Ampliando para a esquerda Não, eu não gosto de ampliar para a esquerda, deslizar para a direita. Esse outro está deslizando para a esquerda. E então esse vai saltar para cima. Vamos atualizar isso e ver. Sim, eu gosto disso. Claro, isso não é visível e isso faz parte da galeria. Ele simplesmente aparecerá junto com a galeria. Vamos para a página sobre. Deixe-me encerrar sobre. Esses títulos devem ser amarelos. Eu acho que eles são melhores amarelos. Se eu abrir as guias que acabei de fechar, se eu selecionar essa cópia dourada acho que fica melhor assim O mesmo caso se aplica a essa atualização que, agora, de volta à página de contato, atualizo que eu fecho. E agora temos a seleção da página sobre. Isso pode ser avançado. Vamos aos efeitos de movimento. Saltando, tudo bem. Exatamente desse jeito. Basicamente, vou continuar brincando com os efeitos de movimento. Acho que agora você tem o truque. Vou acelerar este lugar enquanto estou começando a ser criativo com os efeitos de movimento, mas seja criativo, experimente todos esses efeitos de movimento que temos aqui e veja o que você pode criar. Você não precisa necessariamente fazer o que eu estou fazendo. Deslizando para cima. Finalmente, pessoal, terminei de adicionar meus próprios efeitos de movimento. Espero que você tenha demorado algum tempo e tenha adicionado de forma criativa alguns bons efeitos de movimento Como você pode ver o meu mais uma vez, deixe-me atualizar isso. Lá vamos nós. É assim que estamos indo. Exatamente. Eu fiz isso em todas as páginas. É assim que você adiciona efeitos de movimento ao seu site. Agora, na próxima lição, antes de tornarmos o site responsivo em diferentes dispositivos, vamos adicionar o recurso de menu. Te vejo em breve. 27. Ordering System Setup: Agora é hora de adicionar o sistema de pedidos, o sistema de pedidos do menu Vamos usar um plugin incrível da Oracle chamado Gloria Food Agora, esse plugin é incrível porque ainda fornece um aplicativo por meio do qual você pode receber pedidos de clientes. Vamos ver o poder desse plugue. Vamos, voltando aqui, eu quero ir para os plugins. Adicione aqui, vou pesquisar a ordem do menu Estamos procurando Gloria Food. Aqui vamos nós. Esse plug-in Gloria Food é o que queremos Ele disse isso, vamos ativá-lo. Incrível. Então aqui está, e aqui está, clicando aqui. Ainda bem que estamos adotando as diferentes etapas que precisamos seguir para configurá-lo. Você precisará criar uma conta Gloria Food. Como isso sugere, eu já havia criado uma conta Gloria Food enquanto trabalhava neste site de amostra Se eu puder fazer login no Gloria Food, deixe-me arrastar isso e colocá-lo aqui É assim que sua interface ficará. Você pode criar os alimentos que quiser. Como mostrei na visão geral do projeto, você pode criar os alimentos que quiser, mas primeiro precisa seguir essas etapas, precisa fornecer o básico, os serviços e o horário de funcionamento do restaurante serviços e o horário de funcionamento Pagamento e pagamento de impostos, impostos e pedidos legais, menu, todos esses detalhes. E então você pode aproveitar esse sistema automatizado. Isso também ajudará o aplicativo que você baixará da PlayStore ou da App Store a saber quem é e quais pedidos estão acontecendo Deixe-me sair deste perfil e sair porque vou ser redirecionado para criar uma nova conta Porque esse é um nome de domínio diferente. O que eu quero fazer é me conectar à Gloria Food. Vamos começar criando uma conta Gloria Food. Meu restaurante Money. Inicialmente eu chamo de Mr. Money Food. Vamos ligar para isso. Agora vamos embora. Vou usar um dos meus e-mails. Talvez esse primeiro nome, digamos, é claro, eu vou criar uma senha. Estou usando um gerenciador de senhas, vou usar essa senha. Não estou configurando isso para clientes. Crie uma conta, você pode compartilhar dados plugáveis não confidenciais ou decidir não compartilhar Em seguida, selecione as opções que você deseja configurar. Como você pode ver, você tem todas essas opções , exceto apenas uma opção aqui. Isso não é realmente importante ou necessário, mas você também pode decidir pagar por essa continuação. Quero mostrar por que esse plug-in é simplesmente incrível. Eu o descobri recentemente e acho que é simplesmente incrível. Tem mais do que você precisa. Agora você precisará acessar o administrador do Gloria Food para configurar o perfil do seu restaurante Depois de concluir a configuração, você pode voltar e adicionar os widgets ao seu site Agora somos redirecionados para a conta Gloria Food. Como mencionei, é uma empresa da Oracle. É de propriedade da Oracle. Já temos alguns detalhes pré-carregados. Agora vou mudar meu país para o Quênia porque é onde estou baseado em Nairobi Forneça detalhes precisos porque isso é importante. Este é um negócio que você está montando. Também preciso fornecer o número de telefone, nome da rua e número. Digamos que Moy Avenue. Como você pode ver, ele vai automaticamente para a Avenida Moy, em Nairóbi , em Lá vamos nós a seguir. Não, obrigado Não diga esses detalhes. Informe aos clientes sua localização exata. Agora posso mostrar no mapa exatamente onde estou na Avenida Moy. Digamos que a casa está ali ao lado. Site do restaurante. Você tem um site real? Sim, vamos usar o VFX port.com. Vamos fornecer isso Agora, a culinária que vou oferecer mostra mais. Claro, você pode escolher entre todos os. Você sempre pode editar tudo isso. Você pode até mesmo excluir qualquer um que você escolheu aqui e adicionar o seu próprio. Vou apenas adicionar café da manhã mexicano, americano. Temos chineses que mostram mais sushi chinês, indiano e Kb. Tudo bem, a seguir, os restaurantes mais bem-sucedidos selecionam de uma a três cozinhas. Oh espere, deixe-me remover o kebab. Deixe-me remover o indiano e o sushi. Deixe-me também remover o café da manhã. Agora, digamos, mexicano-americanos e chineses. Em seguida, valide seu endereço de e-mail. Tenho que abrir meu e-mail, entrar aqui e validar. Valide o endereço de e-mail. Estou na minha outra tela agora. Tudo bem Então, quando estou de volta aqui, é validado automaticamente Em seguida, você oferece coleta em seu local? Sim, meu restaurante oferece serviço de entrega. Sim ou não. Oferecemos entrega? Nós fazemos. Em seguida, comece a adicionar zonas de entrega. Entendi. Adicione outra zona de entrega. Ao clicar nele, agora você pode redimensioná-lo para expandir seu raio Entendi. Vamos apenas expandir o raio para a maior parte do CBD de Nairóbi. Tudo bem Digamos que o valor mínimo de CBD do pedido que você deseja fazer Talvez taxa de entrega de 2000, talvez 100 xelins. Precisamos transformá-los em xelins. Vamos mudar a moeda. Feche isso. Reserva de mesa? Sim, oferecemos reservas de mesa. Vou usar as configurações padrão aqui. Jante sob encomenda? Sim Quando alguém chega ao local, pode fazer o pedido imediatamente. Vocês oferecem pedidos? Sim Em seguida, como funciona para seus clientes, permita que os clientes peçam comidas e bebidas quando estiverem em sua localização. Tudo bem Em seguida, quando você estiver aberto, adicione horários. Vou escolher o padrão, mas certifique-se de definir seu horário de trabalho. Vamos ver exceções. Se você tem feriados e tudo o que permite que os clientes solicitem um horário de atendimento específico, Sim, você pode dizer com antecedência mínima , 1 hora, tempo máximo de antecedência, quatro dias Eles não podem esperar receber uma entrega antes do fim de 1 hora e não podem esperar receber o pedido se quiserem depois de quatro dias e tudo mais. Acho que isso é autoexplicativo. Vou continuar em seguida. Agora você pode aplicar impostos. Eu direi que os preços do menu já incluem impostos porque vou cobrar os preços do meu menu com os impostos. Tributação de vendas pré-carregada para taxa de entrega. Se você quiser adicionar impostos à taxa de entrega, talvez 16% ou algo desse tipo. Formas de pagamento, sim, aceito entrega e retirada. Você também pode aceitar cartões se quiser, mas acho que dinheiro é incrível. No próximo nome da empresa, insira seus dados oficiais para seu cliente saiba de onde está comprando. Registro da minha empresa de bistrô. Deixe-me adicionar esses detalhes. 00200 País, Quênia. Tudo bem Em seguida, meus termos e condições gerais , podemos criar a partir do modelo. Crie, que está pré-carregado. Também podemos criar a política de privacidade criada a partir desse modelo. Em seguida, agora é hora de instalar um aplicativo. 28. Ordering System Mobile App: Instalação do aplicativo. Próximo smartphone. Se você tiver um tablet, selecione tablet, vou inserir meu número em seguida. Incrível. Agora eles me enviaram um SMS com um link para fazer o download. Deixe-me esperar por isso. Acabei de receber a mensagem. Agora posso clicar nesse link para baixar o aplicativo. Fui redirecionado para a loja de aplicativos. Agora, é claro, isso é o que você está vendo. Se você está acompanhando, recebeu um SMS e pode baixá-lo agora, porque eu já havia baixado um aplicativo antes. Vou abri-lo em seguida. Agora, eu não sei o que isso vai me dizer porque eu baixei isso usando um número de telefone diferente. Tudo bem. Então, eu preciso sair para poder entrar com um e-mail diferente. Tudo bem, agora diz que eu conectei o aplicativo com sucesso. No momento em que você abre o aplicativo, ele se conecta automaticamente para que eu possa clicar em Avançar. Incrível. Esse é apenas o aplicativo fazendo todo esse barulho. E você pode fornecer esse número do supervisor de pedidos na rede do restaurante Como você pode ver, ele enviará um pedido de teste para que você possa ver o que receberá quando os clientes fizerem pedidos por meio de seu serviço. Tudo bem. Isso é opcional , então eu posso clicar em Avançar. Agora que temos isso, você tem seu restaurante configurado. Agora, voltando à nossa página inicial, vamos ver o que temos. Se eu voltar ao painel aqui e atualizar agora, esse é o assistente de configuração que deveríamos seguir Se eu disser configurar perfil de restaurante, é claro, nós já fizemos isso. Isso abrirá isso. Sim, tudo já está configurado. Por que está repetindo isso? E nós já fizemos isso. Vamos seguir as etapas. Não, eu não preciso fornecer isso. Vamos para a configuração do menu. Vou diretamente para o menu configurado aqui. Você pode configurar o menu do restaurante no futuro. Você pode alterá-lo em seguida, tudo o que você insere ou altera é salvo em tempo real. Sim. A seguir, é claro, você pode encontrar tudo para personalizar seu hambúrguer Você pode adicionar itens diferentes. Você pode adicionar opções extras a todos esses alimentos diferentes e aos diferentes tamanhos de alimentos que você tem. OK. Pule isso a seguir Tudo bem. Então, agora, se voltarmos aqui, terminamos? Não, ainda não. Então, voltando aqui, sim, já temos um site. Tudo bem. Então, vamos seguir essas etapas mais uma vez. Sim, oferecemos pedidos. Agora teremos que passar por todas essas etapas mais uma vez, acho que estamos apenas verificando-as. Sim. Todas as configurações que definimos inicialmente estão corretas. Métodos de pagamento. Tudo bem. Como você pode ver, temos esses carrapatos confirmando tudo Em seguida, recebendo pedidos. Você quer que a gente insira seu menu? Não, isso é opcional porque você será cobrado quando decidir fazer o upload. Aqui você pode criar manualmente, sem carregar arquivos. Isso é opcional. Vamos deixar as coisas assim. Publicação, vendas móveis, pagamentos, pagamento on-line, isso é um serviço pago. Vamos recarregar esta página. Configure um restaurante. Vamos dispensar todos esses outros. Agora, isso é um pouco estranho porque, quando eu estava configurando o site de referência, passei pelas mesmas etapas no painel do Gloria Food E isso foi verificado depois que eu passei por todas essas etapas. Mas, no momento, parece que faltam um ou dois detalhes na configuração, mas para economizar tempo, acho que não vou perder mais tempo tentando descobrir quais detalhes perdi, mas, por enquanto, temos todos os detalhes necessários para adicionar um botão de pedido em nossa página da web Como parte de sua lição de casa, acesse o Youtube e procure o canal oficial da Gloria Food E descubra como configurar cada detalhe em sua conta Gloria Food Painel do Gloria Food para que você verifique isso Mas, como mencionei, temos todos os detalhes de que precisamos. E na próxima lição, adicionaremos os botões de pedidos e os botões de reservas em nossas páginas Então, nos vemos na próxima lição. 29. Ordering System Buttons: Agora estamos quase terminando com isso. Vamos para as configurações. Agora temos esses dois botões. Se eu copiar isso, vamos ver se podemos exibir em algum lugar aqui no front-end. Esta é a página sobre. Deixe-me fechar isso. Vamos para a página inicial aqui. Edite com elementor, deixe-me fazer o Gloria Aqui estamos. Vamos adicionar um código curto ali mesmo. Vou colar esse código curto ali mesmo. Este é o código curto que recebemos da Gloria Food. Aí está. Agora, se atualizarmos essa página e clicarmos em Visualizar. Se clicarmos nele, conseguiremos carregar o menu? Bistrô Yami? Obviamente, esses são os alimentos que selecionamos. Lembre-se de que você sempre pode voltar e criar esses alimentos. Você pode fazer um pedido de brócolis. Você pode selecionar o que quiser aqui, maionese, alho, mostarda Se você tiver instruções especiais, estou com muita fome. E você pode selecionar a quantidade. Em seguida, adicione ao carrinho. Agora, depois de adicioná-lo ao cartão, você pode acessar o cartão e fornecer seus dados aqui. Se você seguir estas etapas aqui, receberá o pedido em seu telefone. Você terá a opção de aceitar imediatamente. Agora, o fato é que, depois de receber um pedido, você também verá um alerta informando o primeiro pedido. Talvez você queira confirmar com esse cliente ligando antes de aceitar o pedido em seu telefone. Ao clicar em Aceitar, você pode ligar para o cliente porque o número de telefone dele estará lá, exibido no pedido. Obviamente, como você pode ver no seu telefone agora, você pode ver o número de telefone depois de ligar para eles e confirmar se deseja pedir eles paguem antes de fazerem um pedido Você pode avisá-los por telefone. E então, se eles pagarem 50% ou 100%, agora você pode aceitar o pedido em seu aplicativo. Espero que isso faça sentido. Só porque você não pode aceitar pagamentos on-line, não significa que você não pode ligar para um cliente que fez um pedido e pedir pague antes de aceitar o pedido no seu aplicativo. Acho que é um sistema muito bom. Se você pagasse um desenvolvedor web para criar um sistema como esse, seria muito caro. Mas aqui você tem um site que está funcionando totalmente e também tem um aplicativo, um aplicativo para celular que está funcionando totalmente. Esse é um excelente sistema para o site do seu restaurante. Deixe-me fechar isso. Basicamente. É assim que se faz isso. Oh, espere. Antes de irmos, quero que estilizemos isso. Primeiro de tudo, vou selecionar isso, ir para o estilo, copiar esse código e depois voltar para este lugar. Personalizar. poderemos personalizar esse botão para a Agora poderemos personalizar esse botão para a cor. Podemos selecioná-lo e alterá-lo para X e , em seguida, colar nosso código ali mesmo. Ok, não podemos colá-lo. Eu não sei por quê. E09 cento 48 948 exatamente 48 948 exatamente . Agora podemos, também podemos adicionar um pouco desse raio de borda. Eram 50, como você pode ver. Agora está arredondado. Podemos dar esse preenchimento de, digamos, 20, digamos. Você também pode alterar o texto. O que o texto diz, defina, mencione e ordene. Agora, se atualizarmos esta página. Lá vamos nós. Agora, lembre-se de que mencionei que esses são espaços reservados, então esses são os botões reais que usaremos aqui Agora, uma coisa que você notará é que também temos esses elementos da Gloria Food Em vez de usar esse botão de back-end, podemos simplesmente arrastar esse botão de pedido aqui Selecionamos essa cópia, selecionamos o estilo de colagem. Agora vamos deletar isso. Agora, aqui temos nosso botão de atualização aberta. Se visualizarmos as alterações, se agora usarmos esse botão, ele funcionará totalmente porque é um botão elementar da Gloria Voltando aqui, também podemos selecionar uma mesa de reserva. Reserva. Selecione essa cópia, selecione isso, clique com o botão direito do mouse, cole o estilo, exclua essa atualização. Vamos pré-visualizar as mudanças. Agora vamos dar uma olhada nas reservas agora. Aqui estamos. simplesmente seguir em frente e fazer nosso pedido. Agora, esses botões são os mesmos que usei aqui. Isso é reserva de mesa. Podemos duplicar isso. Não sei o que coloquei aqui no site original. Deixe-me ir para casa. Aqui mesmo, tínhamos reservas de mesa. Sim, vou aqui e duplicarei isso. Carregue, solte aí mesmo. Selecione essa cópia, selecione isso, clique com o botão direito, cole o estilo e, em seguida, excluirei o inferior. Vamos analisar as mudanças. Você pode repetir esses botões de Call to Action em todo o site porque é sempre muito importante ter um call to action. Agora, para o menu aberto, acho que aqui eu tinha esse aqui, duplicado em uma landing page Você precisa chamar as pessoas à ação e chamá-las à ação adicionando botões em lugares estratégicos. Selecionarei essa cópia, selecionarei esse estilo de colagem e, em seguida, excluirei isso. Alguém verá essas poucas refeições aqui. Em seguida, eles clicarão em Menu e farão o pedido. Atualize isso. aqui e ver isso no menu de ação e na ordem. Lá vamos nós de novo. Agora, mais uma coisa que acabei de lembrar. Esse botão deve levar à página Sobre. Se eu selecionar isso, posso dizer seu URL Sobre. Em seguida, podemos abri-lo em uma nova guia, atualizá-la, vamos revisar as alterações. Tudo bem, se alguém quiser ler mais sobre por que você está comendo de forma saudável, pode clicar nele e ir para a página Sobre. O que você quiser colocar lá. Lembre-se de que aqui deveríamos ter aquele botão de reservas de mesa. Vá em frente e edite esta página. Você pode simplesmente copiar. Você pode vir aqui e dizer copiar e depois colar esse botão aqui. Esse é um exercício rápido para você, não é muito difícil, então vá em frente e experimente. E acho que isso é tudo que eu tinha para o sistema de pedidos agora. Acho que é hora de tornar o site responsivo em dispositivos diferentes Na próxima lição, vamos ver como fazer isso. 30. Responsive Header: Agora estamos prestes a terminar a aula. O site já está incrível. Terminamos de trabalhar no sistema de pedidos, no sistema de reservas , mas precisamos fazer com que o site tenha uma aparência incrível em dispositivos diferentes Ele já fica bem em desktops, mas precisamos ter certeza de que fica bem em celulares e tablets Para começar, vamos pressionar Control Shift. Controle a tecla Shift no seu teclado. Só para abrir as ferramentas de desenvolvimento do seu navegador. Estou usando o Chrome agora. É assim que fica no Samsung Galaxy. Agora, olhando para isso, como você pode ver, aqui está o nosso menu. Se eu clicar, fica muito feio. Tudo bem, é um pouco complicado trabalhar com isso aqui. Deixe-me usar o responsivo para que possamos expandir isso e voltar Basicamente, é assim que parece, como você pode ver. Aqui está meu menu, Togo, aqui está meu logotipo. O site não parece muito bom. A primeira coisa que queremos fazer é tornar o cabeçalho responsivo, a barra de navegação e o logotipo trocarem Quero passar o mouse sobre isso e dizer meu cabeçalho. Isso nos levará ao local onde podemos editar o cabeçalho. Aqui estamos agora, em primeiro lugar, clicarei neste ícone do modo responsivo e depois mudarei para telefones celulares Como você pode ver, lembre-se de que eles estão dentro desse contêiner, ou seja, dentro desse outro contêiner. Neste contêiner, ambos ocupam 100% da largura Se você olhar para este pequeno contêiner contendo o logotipo, é 100% e esse 100% . Se escolhermos o logotipo, voltarmos para o layout e dizermos porcentagem e deixá-lo ocupar 30%. Vamos também selecionar isso agora, ele deve ocupar o espaço restante. Acho que 70% escolhem por cento de células. Como você pode ver, 70% não está se alimentando. Se eu torná-lo menor, ele o empurrará para onde cabe. Pense em 60 ou algo assim. Vamos selecionar isso. Em primeiro lugar, isso deve ocupar 100%. Tudo bem, vamos atualizar isso por um segundo. Deixe-me selecionar este contêiner os dois avançados. Vamos quebrar as margens e o preenchimento. Deixe-me selecionar o contêiner que contém o menu. Vamos ver se 64% está tudo bem. Eu estou bem com isso. Tudo bem, então vamos lá. Agora, se voltarmos aqui e atualizarmos esta página e mudarmos para o Samsung Galaxy oito Vamos atualizar isso mais uma vez. Tudo bem, parece que afetamos esse controle. Esse contêiner contendo esses dois contêineres precisa ocupar 100% de atualização. Agora, se voltarmos aqui e controlarmos a tecla R para a atualização completa. Ah, espere, acho que é por causa desse texto aqui , como você pode ver. Antes de tudo, voltemos à página inicial. Vamos mudar para o celular. Deixe-me selecionar essa tipografia de estilo, vamos diminuí-la, atualizá-la e revisar a página Incrível. Sim, era o tamanho do texto que o fazia ocupar a metade porque o texto estava transbordando do Também podemos fazer isso menor. Não consigo selecionar isso. Deixe-me atualizar porque. O cabeçalho não entrou em vigor neste editor. Tudo bem, vamos mudar para o modo responsivo mais uma vez. Agora, como você pode ver , está incrível. E eu posso selecionar isso, a classe mundial também pode torná-lo menor. Podemos aumentar, oh espere a margem, as configurações sobre isso. Nas refeições saborosas, podemos redefinir isso, voltar aqui e aumentar o tamanho, mas também diminuir a altura da linha. Atualize isso. Tudo bem, agora vamos mudar para as configurações do cabeçalho. Selecionar esse elemento. O elemento. Vamos entrar na embalagem do menu. Antes de irmos a qualquer lugar, vamos mudar o estilo do hambúrguer, o estilo do hambúrguer Como você pode ver, temos o hambúrguer e perto está o hambúrguer tog, o Togo fechado é esse o Togo fechado Primeiro, vamos mudar esse tipo de plano de fundo. Vamos fazer com que seja colorido. Vamos dar aquele amarelo, aquele dourado selecionando aquela cópia, aquela coisa parecida ao passar o mouse Em primeiro lugar, também não queremos que tenha nenhuma fronteira. Queremos que o fundo mude para branco dessa forma. Mas agora queremos que a cor do ícone seja preta. Essas linhas internas atualizam isso. Agora, se voltarmos aqui e reiniciarmos isso. Atualize isso. Lá vamos nós. Agora vamos expandir esse menu. Para a embalagem do menu. Oh espere, nós deveríamos ter essa porcentagem agora. Podemos aumentá-lo ou diminuí-lo, porque não queremos que ele ocupe a tela inteira Agora podemos adicionar um logotipo para celular. Voltando ao logotipo do menu móvel de conteúdo. Vamos adicionar nosso logotipo ali. Lá vamos nós. Agora, se clicarmos nele, ele tem esse logotipo, mas parece esticado Então, voltando ao estilo, largura do logotipo do menu móvel pode reduzir a largura ou aumentá-la . E a altura. Acho que gosto desse embrulho de menu. Vamos torná-lo móvel. Embalagem de menu, fundo preto. Feche o invólucro do menu. Estilo do item de menu. Vamos mudar para branco. Ao passar o mouse, ele deve ter essa cor dourada quando ativo, ele também deve ter essa cor dourada Agora vamos finalizar com o hambúrguer fechado do Togo. Temos o Togo fechado, a cor do ícone deve permanecer preta Mas agora o hambúrguer, o tipo de fundo, aquela cor dourada Podemos alinhá-lo? Observação rápida, aqui mesmo. Ao editar este vídeo, percebi que, em vez de tentar alinhá-lo à esquerda, o que deveríamos ter feito era aumentar a largura desse invólucro de menu para que eles pudessem ser alinhados da esquerda para a direita, assim Então vá para a largura do invólucro do menu. E vamos aumentar isso com, até esse ponto, agora eles estão próximos um do outro. Na verdade, vamos ampliá-lo um pouco até esse ponto. Então, vamos atualizar. Como mencionei, estou gravando essa atualização enquanto edito esta lição. Isso significa que eu já havia gravado o resto desta lição e as aulas restantes e o menu incluído. As aulas restantes ainda serão desse tamanho e com isso desalinhadas Mas não se preocupe. Pelo menos agora você sabe o que fazer. Tudo bem, não podemos alinhá-lo à esquerda. Digamos que atualize, atualize esse clique para abrir o menu Agora, é claro, isso não está no site final que o usuário vê. Isso é para você como administrador, é por isso que está abstraindo isso Basicamente, é assim que se configura o cabeçalho para ser responsivo a diferentes dispositivos Vou mudar para o modo tablet. Claro, como você pode ver, não parece tão incrível. Espere, vamos mudar para o tablet. Aqui mesmo nas configurações do cabeçalho, eu quero selecionar este contêiner, também dar 100%. Agora, eles permanecerão lá. Atualizar. Agora temos que repetir as mesmas configurações para a versão para tablet. Vamos começar com o logotipo do menu móvel. Vamos reduzir a largura. Acho que é um bom tamanho. Isso parece bom, mas vamos torná-lo preto. Queremos ir até a embalagem do menu e torná-la preta. Em seguida, a cor do estilo dos itens do menu deve ser branca. Ao pairar, ele deveria ser aquele ouro. Assim mesmo. Atualizar. Pré-visualização. Tudo bem, vamos pré-visualizar aqui. Vamos ter certeza de que estamos vendo isso no iPad mini. Lá vamos nós. Assim, podemos aumentar um pouco o tamanho do logotipo. Se eu selecionar o elemento da imagem, você pode aumentar a largura, talvez até esse ponto, atualizá-la. Então, podemos atualizar isso e ver exatamente como fica. Acho que gosto do jeito que está agora. É assim que o cabeçalho responsivo em dispositivos diferentes Na próxima lição, vamos tornar o resto da página responsivo. Te vejo em breve. 31. Responsive Home Page: Agora acabamos de tornar o cabeçalho responsivo. Vou fechar esse editor. Agora ficamos com a página inicial. Lembre-se de que esta é a página inicial. Agora vou pressionar o controle R para atualizar esta página para refletir o novo cabeçalho Tudo bem, lá vamos nós. Agora vamos mudar para o modo responsivo. Vamos mudar para o modo tablet. É assim que o site fica em tablets. Se eu selecionar os textos que podem entrar no estilo, reduza o tamanho dessa forma. Eu acho que parece incrível assim. Também quero selecionar o contêiner que contém tudo isso. Vá para Avançado e, enquanto estiver vinculado, dê a ele um preenchimento de 20 rodadas Incrível. Em seguida, vamos passar para isso. Eu quero, vamos selecionar isso, vá para a tipografia de estilo Vamos fazer com que seja de 40. Vamos reduzir o tamanho para 1,1. Também podemos reduzir essa lacuna para 30. Digamos que 20 por rodada. Podemos dar a ele um preenchimento de 20. Selecione este contêiner, vá para Advanced 20 em todas as etapas. Eu acho que parece incrível, do jeito que está. Mas queremos fazer isso 40 para uniformidade. Vamos repetir o mesmo aqui, 20 ao redor agora à direita e à esquerda, mas 100 para cima e para baixo, 2.200 100 abaixo de 20, à esquerda No momento, 100 melhores assim. Vamos repetir o mesmo aqui. Avançado 20 em todas as rodadas. Avast, remova isso. Link 2.120, 100, 20: atualização geral que visualiza as alterações Eu acho que fica incrível no tablet. Agora, se mudarmos para telas móveis, é assim que fica. Acho que já fica bem com as configurações do tablet aplicadas acima das configurações do celular. Voltando aqui, vamos mudar para o Samsung Galaxy. É assim que fica em um Samsung. Eu acho que parece incrível. Mas agora não trabalhamos na foto, então vamos fazer isso. Eu acho que parece incrível. Agora, é claro, faremos a foto separadamente. Sim, vamos fazer a foto separadamente. Vamos chamar isso de lição. Te vejo em breve. 32. Responsive Footer: Como você percebeu, a página de destino agora parece incrível, exceto pela comida. Agora vamos fazer algo sobre o interruptor de alimentos. Não vamos lá. Vamos clicar com o botão direito aqui e abrir nova guia vinculada para abrir a página de destino em uma nova guia Agora, é claro, vamos passar o mouse sobre isso e clicar em Meus alimentos, porque queremos trabalhar na comida agora Como terminamos com isso, vou fechá-lo. Essa é a visão do nosso dispositivo. Aqui está nossa foto, pronta para edição responsiva. Selecionando o modo responsivo, vamos mudar para o modo tablet, e é assim que fica Em primeiro lugar, quero selecionar o logotipo e torná-lo 100%. Também quero selecionar o contêiner que contém todos eles e dar 100, 20 no topo, lado 120. Atualize isso. Acho que fica bem em telas de celular. Deixe-me fazer isso um pouco menor para que caiba assim. É assim que fica nos tablets. Vamos mudar para telas móveis. É assim que atualize isso. Mas precisamos selecioná-los e colocá-los no meio. Atualize isso. Agora, se mudarmos para essa atualização, vamos começar do topo Esse é o topo. Rolando para baixo. Ok, podemos colocar isso no meio, mas também podemos deixá-lo lá. Mas como esses outros estão no meio, eles também devem estar centralizados junto com o botão Faremos isso até o pé. Tudo parece bom, mas agora estamos com o pé no chão. Mas antes de terminarmos, deixe-me dizer uma prévia. Clique no logotipo para ir para a página inicial, edite com o elementor alterne para o celular e, em seguida, role para baixo aqui para selecionar o texto alinhá-lo ao centro Esse texto também se alinha ao centro. E o botão também vai para o centro. Todo o resto está alinhado ao centro. Se eu pré-visualizar essa mudança de controle, acho que agora parece incrível. É assim que o rodapé é é responsivo. E também fizemos esse ajuste na página inicial para uniformidade. E esse é o fim desta lição. Agora, um exercício rápido, porque você viu como conseguimos tornar a página inicial, a página destino responsiva e o cabeçalho e o rodapé Agora eu quero te dar um exercício rápido. Cabe a você tornar o resto das páginas responsivas usando os mesmos princípios que usamos para tornar a página inicial responsiva Esse é um exercício rápido que você pode fazer e ver se consegue finalizar este site Já fizemos as partes mais difíceis, agora essa é apenas a parte mais fácil Então, vá em frente e termine a galeria sobre as páginas de contato. Com isso dito, tenho algumas coisas cruciais que preciso destacar. Então, nos vemos na lição final. 33. Final Thoughts: Quero parar um momento e dizer parabéns por terminar esta aula, se você ainda estiver aqui. Depois de todas essas lições, isso significa que você realmente aprender a criar sites com o Wordpress ou leva muito a sério o site do seu restaurante. O fato de você estar aqui significa que você terminou de criar seu site. E eu só quero agradecer por escolher aprender comigo. Claro, se é a primeira vez que você me vê, tenho muitas outras aulas que você pode fazer apenas visitando meu perfil aqui no skill share. Você aprenderá a criar outros tipos de sites e poderá melhorar drasticamente suas habilidades no Wordpress Dito isso, também quero ressaltar que o site que construímos não é SEO. Otimizado. Seo significa otimização de mecanismos de pesquisa. E isso significa tornar seu site visível para mecanismos de pesquisa como o Google. E sendo que quando as pessoas acessam o Google e pesquisam sites de restaurantes perto delas, seu site deve ser capaz aparecer nos resultados da pesquisa. Caso contrário, você ficará invisível e não receberá o tráfego necessário para expandir seus negócios. Portanto, você precisa aprender como tornar seu site visível para os mecanismos de pesquisa. A boa notícia é que eu tenho um curso ou aula abrangente aqui sobre compartilhamento de habilidades que você pode assistir para aprender a otimizar seu site. Cobrimos tudo o que você precisa saber sobre Wordpress, SEO. E isso significa que, ao terminar a aula, você terá otimizado seu site. Mais uma coisa, eu só quero te pedir um favor rápido, que levará menos de 1 minuto. Isso levará cerca de 40 segundos. Você poderia reservar um momento e deixar um comentário sobre esta aula Por favor, deixe-me saber o que você achou da aula. O que você gostou sobre isso? Você também permitirá que outros alunos em potencial saibam o que esperar dessa aula. Outra coisa que acontece quando você deixa uma avaliação é que o algoritmo de compartilhamento de habilidades analisa as diferentes avaliações deixadas para cada turma e determina se a turma deve ser exibida para mais alunos Você ajudará esta turma a ser mais visível para mais alunos em potencial que estão procurando esse tipo de conteúdo que significará muito para mim Basta conferir abaixo deste reprodutor de vídeo, há um clique no botão de avaliação ou feedback que deixa seu feedback. Deixe-me saber como eu me saí e eu realmente apreciarei isso. Caso contrário, isso marca o fim disso.