Figma para WordPress Elementor - converta o design do Figma

1. Introdução: E se eu lhe dissesse a ferramenta original que pega seu design Figma e o transforma em What press side em um segundo Neste curso, vou te ensinar como você pode converter seu design Figma em WordPress, lamentor, Greenberg ou Brick Speller com muita Este curso é perfeito para desenvolvedores web freelance, proprietário de agência, designer de figma, designer sites de sessões e qualquer pessoa interessada em converter Figma para Wordpress Neste curso, aprenderemos o básico do UIKE, o que é, como funciona e suas Em seguida, vamos fazer configurações como baixar e configurar o UIKi gratuitamente Recursos como modo de cópia O view, modo exportação e otimização, personalização de páginas de entrada e depoimentos, espuma, cabeçalho e rodapé Também são importantes páginas de blog, páginas de postagem e seções personalizadas , design de entrada com Gutenberg e Brick Speller, falhas corrigidas O interessante é que você receberá suporte e atualização vitalícios com base na demanda do público. No final deste curso, você terá a confiança necessária para transferir o design do frega para o site WordPress Se você é um iniciante completo, um freelancer experiente ou proprietário de uma agência, esses cursos simplificarão seu fluxo de trabalho Então comece agora a dar vida ao seu design com o Wordpres 2. O que é Uichemy, como funciona e quais possibilidades: Primeiro, eles veem o que é o UiKi IKE. Os plug-ins transformam o design Figma em site Wordpress editável e trabalham com Aleanor, Gutenberg e Bricks Builder para agilizar o design da web sem codificação transformam o design Figma em um site Wordpress editável e trabalham com Aleanor, Gutenberg e Bricks Builder para agilizar o design da web sem codificação. E está funcionando de forma muito simples. Primeiro de tudo, precisamos projetar a interface do usuário e o Figma. Então, só precisamos usar um plug-in como UIKBPlugin para converter nosso design Figma E se você analisar essa possibilidade , é rápido e fácil. Sem necessidade de codificação, personalização flexível e definitivamente, você economiza muito tempo . E é ótimo para 3. Como baixar e configurar o Uichemy gratuitamente (WordPress e Figma): Para baixar o UIKIPlugin, basta digitar aqui amd.com slash amd.com slash Em seguida, aparecerá nesta página e, no lado direito, você terá uma opção C, como, Ok, então se você rolar para baixo, você terá uma opção como grátis. Então, só precisamos clicar aqui neste botão gratuito, mas aqui, você pode selecionar o Pach Builder Então você pode literalmente selecionar aqui se quiser ir com Gutenberg, então você pode escolher Se você quiser usar o Bricks Builder, poderá selecionar o Bricks E se você quiser usar o elementor, basta selecionar o elementor Basta selecionar o Pig Builder que você gostaria de usar para criar um site, ok? Então, eu vou usar o elementor e, digamos, sem sábado. E agora, aqui, você só precisa ter seu e-mail e nome, sobrenome e clicar nesse padrão de download gratuito. Então, eu já tenho uma conta, então não vou criar uma nova, então vou entrar aqui primeiro. Então, como você pode ver, Hu é meu e-mail e primeiro nome, sobrenome. Então, vamos simplesmente clicar em Hu this, faça o download deste botão, e ele diz molhando. Vamos esperar um pouco. Tudo bem, então ele foi reproduzido com sucesso, e se você rolar um pouco, obterá essa chave de licença aqui que está aqui Basta copiar a chave de licença. Isso é principalmente uma necessidade. Vamos voltar ao nosso arquivo Figma, qual é o design que você gostaria de importar Então, no meu caso, digamos que eu queira inserir este. Então eu posso clicar aqui nesta opção na parte inferior, como plugar e simplesmente ir para plugar e WHAT e simplesmente pesquisar sua UICami Então você obterá esse plugue aqui. Basta clicar neste plugin. E depois de abrir este plug-in, você terá a opção de chave serial, basta urinar essa chave real que copiamos recentemente e clicar neste botão de ativação Tudo bem, então, como você pode ver, agora está ativado e pronto. Então, vamos clicar aqui, botão SkipT. E agora, como você pode ver, temos esse tipo de coisa. E agora precisamos acessar nosso site What Press, nos plug-ins e clicar em aqui nos plug-ins e clicar em Adicionar novo plug-in neste botão, e pesquisar aqui UiKi. Para instalar este e pesquisar aqui plugin do WordPress, você pode acessar os plug-ins dela e clicar em Adicionar novo, e você pode simplesmente pesquisar aqui UiKi e, em seguida, obter esse plug-in aqui, este Isso vem principalmente da Possumt e este é o logotipo. Basta clicar aqui neste botão Instalar para instalar este plugin. Ok. Agora podemos simplesmente ativar esse plugin. Mas o que acontece se você não está recebendo esse plugin, se você pesquisa, mas não está conseguindo, então o que você pode fazer? Você pode simplesmente voltar a esta página do Poch e, se rolar para baixo, obterá esse plug-in aqui, UIM be figment Esse é o plugin. Basta clicar aqui no botão de download. Então você pode literalmente baixá-lo. E então o que você pode fazer, você pode ir aqui, conectar Nt new e clicar no plugin Upload, e então você pode fazer o upload do plugin. Se você não descobrir o plug-in aqui, se pesquisar o plug-in e não o conseguir , o que você pode fazer simplesmente baixá-lo e fazer o upload aqui para o plug-in e ativá-lo. Então, eu não vou fazer o upload agora porque já conseguimos instalá-lo a partir daqui. Então, vamos ativar o plugin. E depois disso, temos um recurso extra aqui, UI CE no lapsit, clique lá E então eles estão falando sobre selecionar nosso Page Builder. Então, gostamos de selecionar o elementor, ir para o próximo e, novamente, clicar em próximo, próximo, próximo, e precisamos instalar e ativar aqui isso primeiro de tudo, para que eles instalem e ativem o plug-in E como você pode ver, agora ele está ativado e agora precisamos clicar aqui neste botão de ativação, e então precisamos ativar também. Vamos clicar na próxima opção e clicar em Concluir. Tudo bem Então, agora você pode ver que está pronto. Então, se você substituir esta página um pouco, poderá ver tudo isso agora com uma marca de seleção verde, como você pode ver. Tudo está quase pronto. Está bem? Agora, se você acessar a configuração lá, obterá um URL lateral e um domínio seguro Isso seria necessário mais tarde, quando importarmos o design. 4. Visão geral do plugin uichemy (Figma): Ah, agora vamos ver o plugue UIC Figma em cima de Então, para obter esse plug-in, precisamos clicar aqui na opção de plug-in inferior e, em seguida, ir aqui esses plug-ins e precisamos pesquisar aqui, UIKME Então, quando você pesquisar no UIKME você verá três plug-ins lá Um é como Figma relevanor. Outros são como o Brick Builder, os tijolos Figma e outros são como o Figma Então, basta escolher qual deles você gostaria de usar. Então, no meu caso, eu gosto de usar o Pigma Relevantor, então basta selecioná-lo E depois desta página, você verá a opção APK. Então, você só precisa fornecer a chave de licença. Não é a APAC, desculpe. É uma chave de licença. No último vídeo, compartilho com você como você pode obtê-lo, certo? Assim, você pode acompanhar o vídeo para obter essa chave de licença. Tudo bem. Então, agora, se você vai clicar aqui neste frigobar, então você tem mais algumas configurações. Aqui está o plugin malyhtpress. Se você quiser instalá-lo, se não instalar o plug-in What Press, poderá fazê-lo. E aqui está o plugin do Figma Gutenberg, Fick Se você quiser mudar, certo, então você pode fazer isso. E aqui temos um programa de parceria, preços, agende uma demonstração e Kastudy Então, o Booke Demo é muito bom. Eu acho que você pode literalmente reservar uma demonstração com eles, e eles vão te explicar como isso funciona. Em seguida, tenho uma opção de conversão, e uma opção como sempre que vou selecioná-la, como você pode ver, ela seleciona o nome da página e também mostra o design que vamos importar para o nosso site. E isso é como uma opção de modelo. Aqui tem uma opção múltipla. Coloque EI, kit de festa, tipo, um monte de coisas lá, como você pode ver. Então você pode literalmente verificar todos eles se você realmente quiser, então, sim. Ok, então isso sou realmente eu, isso é física, então há muitas coisas lá Você pode usar as crianças para importar o design do Figma para o Elementor. Sim. E o SPS é algo parecido com o deles. Se você quiser obter alguma peça específica, você pode fazer isso. Se você não tem nenhum design, definitivamente pode usar o POI Eu já tenho um curso sobre isso. Se você quiser , pode conferir meu canal no YouTube sobre isso. Ok, vamos para o conversor novamente. Então, depois de fazer essa conversão, temos duas opções lá. Um é como copiar e outro é como o modo de importação. Então, eu pessoalmente acho que se você gosta importar a página inteira, use o modo de importação, porque é muito melhor se você tiver uma página longa. Mas se você gosta de ir com a seção específica , acho que o modo de cópia será muito melhor. É fácil, basta copiar em uma seção específica e colar seu elementor, novamente, acessar o copiar e colar Mas se você quiser importar tudo de uma vez , use o modo de importação. Mas se você quiser apenas uma página inteira, se quiser copiar o modo e colá-lo , você pode tentar, definitivamente. E no modo Importar, aqui, só precisamos conectar nosso site de imprensa a esse plugin. Só precisamos dar a chave o último vídeo que compartilho com você, eu acho. Ou se eu não, mais tarde, compartilharei com você como funciona. Mas agora, pense nisso, no modo de cópia, é só copiar. Você pode literalmente copiar o design e simplesmente controlar V, então o design estará lá e no site da imprensa, e será necessário importar. Está bem? É isso mesmo. Tudo bem. Então, o próximo é como conversão otimizada e conversão expressa. Portanto, projete se você acha que seu design já está otimizado, use o Express Convert. E se você é iniciante, use este botão de conversão otimizado Vamos clicar aqui neste botão de conversão otimizado. Em seguida, temos mais algumas opções, compensação de otimização e, em seguida, tag de widget, gerenciador responsivo, configuração de conversão, estilo global e muitas Definitivamente, não fazemos isso. Se fizermos isso , nosso design será facilmente importado, certo? Mas se não fizermos isso, definitivamente será necessário mais tempo para importar, seu design pode falhar e não é exatamente que você receba um SEM no mesmo site da Wat Press. Se você não estiver fazendo isso, otimize seu design. Agora vamos até esse botão de conversão. Depois de fazer tudo isso como configurações , vamos usar a opção Canva Então, depois disso, como você pode ver, temos duas opções, como baixar Jason e essa entrada ao vivo Então, se você vai clicar em, então você precisa conectar seu site. Em seguida, você verá o que está importando e, em seguida, obterá mais algumas configurações Digamos que, como você gostaria de importar como página ou seção, como quiser, você terá a opção. E toda vez que você enfrentar algum problema ou disser não está funcionando ou como podemos fazer isso, definitivamente assista a este vídeo no topo todas as vezes. Então, por exemplo, agora, como você pode ver, temos um vídeo sobre como fazer a entrada ao vivo. É um vídeo de sete entradas. Mas, novamente, se você jogar xadrez, posso voltar, toda vez que você terá a opção Por exemplo, agora, vou fazer essa otimização e, como você pode ver, temos um vídeo completo lá. Além disso, se você quiser entender sobre camada de mídia Lock, faça um vídeo lá. Se você for para a próxima seção, qualquer uma desta seção, toda vez que você colocará o vídeo lá. Sempre observe cuidadosamente se eles têm um vídeo. 5. Visão geral do modo de cópia vs do modo de exportação: Agora vamos ver o modo de cópia e o modo de exportação. Então, para fazer isso, primeiro, vamos ao UIKEPlugin e seguida, você terá duas opções aqui Um é como o modo de cópia e outro é como o modo de importação. Então, no modo de importação, só precisamos adicionar nosso site, você sabe, como sit Key e ARL. Precisamos adicionar os dois. Mas no modo de cópia, não precisamos fazer isso de jeito nenhum. Basta copiar e colar, só isso. Ok, deixe-me te mostrar como é. Então, agora, como você pode ver , o modo de cópia está selecionado, eu selecionei a seção e vamos otimizar o design. Vou apenas clicar aqui nesta opção Converter. E agora, como você pode ver, está caindo na minha prancheta. E agora eu vou até Eleanor e simplesmente passo por aqui, Control V. Ou se você clicar aqui nesta peça do outro lado, clique E agora pressione Control V. Então, como você pode ver, agora está colando. Então, vamos molhar um pouco. Tudo bem. Como você pode ver, obtemos exatamente o mesmo que foi projetado aqui. Recebemos exatamente o mesmo que é. Agora, se eu não fizer isso neste modo, digamos no modo Importar. Depois, basta selecionar o design dela. Para otimizar a conversão, esse design já está otimizado. Vamos até Cat's, temos duas opções. Um é como o JCN e há uma entrada ao vivo. Então, no modo JaSN, como você pode ver, podemos simplesmente baixar esse arquivo como JCN então podemos ir aqui, e então podemos simplesmente importar o design como aqui, como aqui Podemos importar o arquivo no formato Jason. OK. Mas eu acho que esse é muito mais fácil. Vamos voltar. E essa entrada é muito melhor. Então, vamos clicar em Entrada ao vivo. Agora precisamos selecionar um site, então vamos adicionar nosso site. Então, vamos ao que pressionar, selecione EykeMe, selecione EykeMe, E agora vamos copiar o site. E agora precisamos colar aqui. Uma cópia do token e vamos conectá-lo. Tudo bem, então está conectado agora. E agora precisamos selecionar como eu gostaria de importar. Será um modelo de página ou elementor ou um modelo de futuro tentador . E se você for para este existente, então como você gostaria de importá-lo. Isso significa que se você já fez upload ou importa isso de uma vez e agora deseja atualizar o mesmo novamente, basta usar o existente. OK. E também tem a opção de substituir ou adicionar e, em seguida, o que você deseja, você pode ver selecionado. Então, mais tarde, veremos mais. Não tem problema. Agora, vamos explorar essa entrada ao vivo. Ok, agora vou para o novo e simplesmente gosto da página. Em seguida, clique em Importar A. E agora você pode ver que a importação está concluída. E agora você pode ver que é importante com sucesso, e agora só precisa alterar essa configuração de página, o layout da página para a largura total, e tudo ficará bem, eu acho. Agora, como você pode ver, temos a mesma coisa. Então, espero que vocês gostem desse modo de cópia porque é muito mais fácil. Não precisamos conectar nosso site. Não precisaríamos baixar nada, basta copiar, acessar o Elementor e colar Acho que isso é muito mais fácil de fazer, como copiar e colar. 6. Como otimizar a companhia (incluir tudo): Para otimizar esse design, basta selecionar a página Festival e, em seguida, clicar aqui no botão, otimizar e copiar. E então precisamos clicar aqui em Optim Magician e companheiro como este . Basta clicar lá. E então você terá muitas coisas que precisam, você sabe, como consertar. E toda vez, se você quiser ver como otimizar o design, você pode assistir a este vídeo na parte superior, como você pode ver. Ou se você quiser apenas empilhar em uma seção específica, digamos que você realmente não entenda uma mídia multicamada de bloqueio Você não está entendendo isso, como fazer isso ou o que é esse melli Então você pode literalmente seguir aqui este vídeo. Se você simplesmente clicar aqui, assistirá a um vídeo que diz Olá a todos. Falando sobre esse assunto, certo? Se você for para a próxima seção como Detalhes de otimização de quadros, cada camada, você receberá um vídeo como este. Você pode assisti-lo e aprenderá e poderá implementá-lo. OK. Tudo bem. Então, eu também vou compartilhar com você neste vídeo. Então, se você seguir com cuidado, você pode otimizar seu design, definitivamente. OK. Então, a primeira coisa, como você pode ver, temos uma opção aqui que é essa opção, como você pode ver no quadro, e também temos uma opção de destino. Basta clicar lá. Então, quando você clica nessa opção, como você pode ver, eles são redesenhados nesta seção da qual você está falando Ok, isso é o fato de que, uh, essa é uma mídia multicamada, então precisamos consertá-la Então, como você pode ver, isso tem duas camadas agora. Então, o que você pode fazer é simplesmente clicar nessa opção fixa para corrigir isso. Então, agora eles bloquearão essa camada e, quando você importar elemento, eles o importarão como um arquivo, não como muitos arquivos. Antes, era como vários arquivos, mas agora ele tem apenas um arquivo porque está bloqueado no momento. Ok, vamos para a próxima. É esse. Se formos lá, vamos novamente, ter duas camadas. Então, precisamos consertá-lo. E se formos para a próxima, é a mesma coisa. Então, vamos consertar isso. Vamos para a próxima. É a mesma coisa. Se você olhar para este lado esquerdo , obterá um S. Vamos corrigi-lo. Se formos para o próximo, isso também é meio que o mesmo. Então, podemos consertá-lo e vamos para a próxima. É preciso corrigir isso também. Definitivamente, é uma flecha. Precisamos ir até o botão. Corrija isso, vá aqui, este, e conserte. Então, há muitas coisas lá. Então, deixe-me fazer isso passo a passo. Preciso consertá-lo e ter certeza de que eles estão selecionando o correto. Porque às vezes eles estão fazendo algo errado. Então, se você perceber que eles estão fazendo algo errado, que não é necessário corrigir, basta clicar nesse padrão cruzado. OK. Mas toda vez que eles estão dando o correto, como você pode ver, isso também indica as coisas corretas, porque é uma camada múltipla, como você pode ver, então definitivamente precisamos fazer com que seja uma correção. Novamente, na próxima eu tenho duas camadas, então precisamos corrigi-las. Mas se você quiser fazer tudo de uma vez, basta clicar aqui. selecione tudo e diz 15 selecionados, você pode simplesmente clicar neste botão fixo e, em seguida, tudo será corrigido de uma só vez. E, em seguida, otimizaremos a quantidade de imagens no SVC. Então, aqui, se você clicar neste botão para mostrar mapa de calor, poderá ver a tampa da cabeça ou fazer com que uma imagem ou IC a veja Assim, você pode descobrir facilmente, ok, isso é algo que eles selecionam corretamente ou não. Então você pode facilmente, hum, contar a eles sobre isso. Então, no meu caso, acho que parece bem correto porque isso também é um HVC, tudo mais Isso é uma imagem. Isso é VG. Isso é tudo sobre imagem VG. Portanto, parece bem correto aqui. Então, sim, agora podemos ir para a próxima. Então, vamos clicar aqui Mark Ase tan. E se você quiser digitalizá-lo novamente, definitivamente, você pode fazer isso lá, com uma opção de digitalização. Agora é um incenso destacado. Então, se você clicar aqui, verá que agora é um componente. Então, eles estão falando sobre fazer que ele se desintoque com o componente principal Então, se você não quiser fazer isso, pode colocar assim, mas acho melhor fazer isso. Então essa é uma, essa é a seção de heróis, tudo isso conectado com a principal, certo? Isso tem tudo a ver com o tipo de coisa que envolve componentes infantis. Este não é um dos pais. Está bem? Então, vamos selecionar todos eles aqui, e todos eles serão desativados No momento, como você pode ver, temos um ícone arredondado. Está semeando instantaneamente Então, se você puder consertá-los, tudo será separado aqui. Tudo bem. Então, agora eles estão falando sobre remover a moldura solar desnecessária do grupo ou removê-la já. E aqui está a próxima opção, como você pode ver, remova os prós negativos e toda vez que receber um vídeo. Assista à gravação da fita, como você pode ver, toda vez que você verá um vídeo aqui. Isso está fora do vídeo. Este também é outro vídeo. Então, toda vez que você quiser empilhar, você assiste a um vídeo, pode literalmente assisti-lo e corrigir essa opção Então, isso é tudo sobre Optimgican. Então, isso é só. Então, vamos clicar aqui no botão do cofre e voltar. E agora, como você pode ver, está marcando que nossos otimgans foram concluídos, e agora podemos ir para a próxima 7. Como definir tags de widget: Agora vamos falar sobre um widget. Portanto, os Wichet são principalmente para conteúdo dinâmico. No momento, quando você vai importar o design como este, ele será estático. Mas em algumas seções e alguns elementos têm links diferentes ou vamos pensar em uma seção de depoimentos ou ter um acordeão como a seção F, seu valor O conteúdo deles é diferente. Dessa vez, se você usar apenas conteúdo estático, não vai funcionar. Não vai ser algo funcional. Então, dessa vez, precisamos desses widgets, certo? Então, se você for aqui após a otimização, você terá a opção como tag Widget E aqui você terá muitos widgets. No widget elemental, tenha um widget 19 lá, também tenha um widget elementor pro Além disso, é o widget Plus aqui. Portanto, se você quiser instalar esse plug-in, precisará acessar os plug-ins em Novo. E se você apenas pesquisar o widget Plus , obterá o plug-in como este E agora você só precisa instalar e ativar este plugin se quiser obter mais widgets Ok. Então, agora vamos ativar isso, vamos voltar ao design. E agora, se você simplesmente clicar aqui, você terá uma opção como mostrar tag, agora mesmo, se você clicar neste botão, agora você pode ver a tag. Então, esses são nossos elementos de botão agora, esses são nossos canais oculares, você pode ver Também parece um botão aqui, mas eu acabei de removê-lo. Eu também me pareço com esse. Como você pode ver, isso é um conteúdo. Além disso, se você acessar este, como este, se simplesmente clicar nele, esse também é um botão, como você pode ver, e tem um link. Além disso, se você quiser colocar o ícone , você também pode colocar o ícone aqui. Então, no momento, não há nenhum ícone, é por isso que eu não vou ver, mas caso você tenha um ícone, é por isso que você pode ver aqui. Então, depois de posição antes de posição, o que você quer? Você vai conseguir isso lá. Sim, isso é tudo sobre o botão. Então, agora, se você quiser colocar um widget diferente aqui, como podemos fazer isso? Você pode literalmente ir até lá, clicar lá, clicar duas vezes, clicar duas vezes, clicar duas vezes. Então, como você pode ver, eu vendo como aqui, esta é uma caixa de ícones por enquanto. E eu posso literalmente mudar o conteúdo. Posso selecionar o widget de tag e qual será a descrição Isso pode ser uma descrição. Qual será o título. Então, tudo isso que podemos fazer aqui. E digamos que eu acabe de cruzar. Agora é cruz. Ok. Então, agora, se eu vou limpar isso, agora está totalmente claro, como você pode ver, agora está claro. Antes era uma moldura de ícones, eu posso boxear, mas agora não é uma caixa de ícones, certo? Acabei de limpar isso. Novamente, se eu quiser definir um pouco, busco o ícone e esta é a nossa caixa de ícones. E essa é a descrição. Isso é tudo sobre isso e eu vou usar a tabela três e salvar as alterações. Então, é muito fácil configurar uma tag de widget, ok. Então, para descobrir onde você gostaria de colocar o widget e como ele vai chegar, você só precisa fazer isso Ok. Se eu compartilhar com outro exemplo, digamos que esse seja outro design, e agora vou apenas usar o plugin ICM E, por enquanto, digamos que eu goste selecionar este ou digamos que este. Diga essa. Tudo bem, agora vou apenas otimizar e copiar. Vamos para Wichitag. E, por exemplo, digamos que aqui, eu gosto de usar o cano principal árido, então eu posso fazer isso aqui Eu posso simplesmente pesquisar um botão, vamos com o botão, e isso é uma moldura. Como você pode ver, esse é o ícone aqui, e qual seria o link? Posso simplesmente adicionar o link aqui, posso posicionar É depois ou antes, vai ser depois, e aqui estará C work, e agora posso simplesmente salvá-lo. Agora, como você pode ver, isso é salvar como um botão. Eu seleciono a página e eu acabo de marcar o programa. Então, facilmente, eu posso ver que este é um texto de botão lá. Agora, novamente, digamos que eu goste de ir aqui. Esse seria um link social. Então, o que eu posso fazer é usar links sociais. E como você pode ver nas redes sociais eu posso alimentar muitas coisas nas redes sociais. Vamos com este, e eu posso simplesmente selecionar a coisa, certo? Eu posso simplesmente selecionar o link. Eu posso simplesmente selecionar a margem. Eu posso facilmente selecionar essa coisa. E qual é o estilo que eu quero, posso escolher facilmente o estilo. Então, se você vai usar o plusi Wiche e aqui eu tenho um elementor one, e como você pode ver, o elemento é automaticamente, Alpha vai salvá-lo. E agora, se vamos apenas selecionar o tom. Agora, como você pode ver, isso não está selecionado. 8. Gerenciador responsivo e como ele funciona: Agora, vamos para a próxima, como gerente responsivo. Então, vamos clicar aqui neste gerente patrocinado. Então você tem duas opções. Um é recomendado. Outros gostam do costume. Então, eu recomendo principalmente que você escolha o recomendado, porque acho que é bom. Mais tarde, usaremos o estilo global, então acho que está tudo bem. O próximo tem um costume. Então, de forma personalizada, se você clicar, você terá algumas opções aqui, tamanho da fonte, altura da linha, preenchimento, tampa flexível Vamos usar esse tamanho de fonte. Então, como você pode ver, vemos aqui uma opção normal e uma opção de grampo Então, vamos com esse normal. E, normalmente, como você pode ver, se o tamanho do nosso telefone for 151 ou mais, nosso tablet terá 36% Por exemplo, o tamanho será de 36%. Então, será de 24%. Mas como eles fazem principalmente o cálculo aqui? OK. Então, agora, deixe-me compartilhar com você como você pode simplesmente fazer o cálculo aqui. Então, por exemplo, no meu tamanho de fonte extra, H um, por exemplo, é 48 e meu tablet será 48 Isso é, vamos formar um tablet. Então, o que eu faço, eu só tenho aqui o tamanho do meu telefone é de 40 a 48. Se eles obtiverem 40 a 40 de qualquer tamanho , qual será o meu tablet? Meu tablet será 100%. Então eu copio o número da porcentagem e da peste. Agora vamos para o celular. Então, no celular, quanta porcentagem eu vou colocar, certo? Então, digamos que no meu celular, eu acabei de colocar um cabeçalho de 32 pixels. Agora, quando coloco o tamanho de 32 pixels , obtenho uma porcentagem de 60 Sabin Então, o que eu faço eu copio simplesmente pest. Então essa é a maneira de fazer essa porcentagem. E se você ver aqui esse cálculo, entenderá que esse é o tamanho do tablet, e esse é o tamanho, e essa é a porcentagem de fabricação. Você não precisa fazer isso manualmente, pois eles já têm uma opção de calculadora. Você só precisa colocar o tamanho da fonte entre o tamanho da fonte, você precisa fornecer lá. E depois tablete quantos pixels você quiser, e eles fornecerão uma porcentagem. E, novamente, no celular, quantas porcentagens você deseja ou qual é o pixel ou o tamanho da fonte? Apenas dê aqui. Eles o atacarão automaticamente, certo? Então, eles farão todo o cálculo, então você não precisa fazer isso manualmente. Então essa é a maneira de fazer o cálculo, e eles também têm uma altura de linha aqui, como você pode ver, e eles também têm um preenchimento E eles também têm uma panturrilha flexível. Então, tudo isso, eles já têm. Então, inicialmente, acho que vamos usar o ouro recomendado porque será muito mais fácil antes compartilhar com vocês que usaremos aqui o estilo Gobal Portanto, não acho que precisemos de nenhum tamanho personalizado por enquanto. Mas se você quiser criar seu próprio tamanho personalizado mais tarde , acho que este vídeo vai ajudá-lo , porque eu já compartilho com você como esse melli funciona Você precisa fornecer o tamanho principal e, em seguida, no tablet, como quiser , quanto quiser, e se precisar colocar o celular o quanto quiser, você fará com que a pessoa copie e teste. Isso é no Mali 9. Configurações de conversão: Agora vamos para a próxima configuração de conversão. Vamos clicar lá. Em seguida, você terá uma opção como exportar sem imagem. Então, se você for importar seu design sem imagens, basta marcar isso, apenas anulá-lo e, em seguida, seu design será exportado Você sabe o que acontece, às vezes usamos imagens de alta nuvem em um design e, dessa vez, demoramos muito mais para exportar essa Então, dessa vez, você pode simplesmente ativar essa opção. Então, seu design será exportado super rápido sem imagens E depois disso, se você quiser limitar imagens de alto teor de cloro, basta compactá-las manualmente e importá-las em um design Hum, tudo isso é de certa forma, mas se você cria um design simples , acho que não preciso de uma tonelada dele. E a próxima opção é usar imagens exportadas por IgM. Então, digamos que exponha algo, eles exportarão automaticamente as imagens Então, como funciona, se você for lá, se você simplesmente passar o mouse sobre ele Digamos que se você simplesmente passar o mouse sobre ele, obterá a opção de reação do Pig Map Então, isso é algo que basta ver. É a mesma coisa que a opção de exportação, como você pode ver, isso é um pixel, um, um, dois, assim. Então, se você quiser aumentar, se quiser apenas exportar imagens de alta qualidade, basta aumentar aqui. Então, digamos que você quer dois, quer três, então veja aqui essa coisa. E, como você pode ver, essa é a configuração que vemos. Ou se você quiser obter a mesma configuração, clique na opção Exportar e obterá a mesma coisa. Então, basta selecionar apenas qual. Mas, inicialmente, acho que um será muito melhor. Caso contrário, levará muito mais tempo. E então encontre automaticamente os SVGs. Isso é bom, fale e diga isso em porcentagem. Sim, a porcentagem será melhor porque o pizzel vai causar problemas porcentagem será melhor, eu acho, então é melhor continuar com isso. E votação mínima, isso é usar a mesma coisa, dez Eu acho que é melhor. Não precisamos aumentar muito. Ok, isso é tudo sobre o exposto 10. Como definir estilos globais e como isso funciona: Agora, vamos para os Nikes, é como um estilo global. E esse recurso é realmente ótimo porque economizará muito tempo. Você pode literalmente apenas um único clique, alterar o tamanho da fonte. Você pode literalmente mudar a cor. Você pode tornar o responsivo com muita facilidade. Você pode trocar o telefone se quiser literalmente, ou pode criar algo diferente, basta um clique com esse estilo global. Ok, deixe-me mostrar como o shopping funciona. Então, vamos lá, e eu já selecionei o design lá. E agora, como você pode ver, selecione nosso site automaticamente. Então, se você já adicionou seu site, tudo bem. Ou se você não estiver editando, basta clicar em Adside e adicionar sua credencial Se você for para o UIC e, se for para a configuração, obterá o ARL lateral e o Secure poderá simplesmente adicionar lá o Secure poderá simplesmente adicionar Em seguida, ele será adicionado automaticamente lá. E então você verá todas essas coisas. Aqui tem uma cor global agora, e depois também tem uma tipografia global Então, aqui, podemos literalmente atrasar ou mudar isso. Ok, agora vamos ao nosso design aqui, e então você obterá algumas cores. Uma é a cor de fundo, a cor do campo de fundo disponível. E então obtemos algumas cores cinza, certo? Então essa é uma cor cinza. Então, nós realmente não precisamos de tudo isso, certo? Só precisamos de alguns. Ok, então primeiro, vamos usar essa cor primária. Então, qual pode ser nossa cor primária aqui? Na maioria das vezes, não temos, eu acho. Mas digamos que vamos selecionar essa como cor primária. Então, isso é como 900 50s. Vamos. Clique aqui. Em seguida, você obtém um documento de estilo variável. Tudo isso, você receberá uma vez. Vamos usar o estilo, e esse é o que eu vou usar na cor primária. Essa é uma cor orgânica, e eu gosto de usá-la dessa, vamos ver. Essa. A cor do texto é a mesma. Vamos aqui. Essa é a cor do texto e toda a redação de design que usamos. Não, cor do texto, às vezes usamos aqui, 700. Vamos 700, 700 e isso é 950. 50. Ok, então o problema aqui é que só precisamos fazer um pouco de técnica aqui. Então esse é o nosso texto, certo? Então, texto, na maioria das vezes usamos 700, então esse. Mas digamos que usemos cabeçalho. Então, cabeçalho, usamos um texto diferente. Então, vamos embora. E no título, eu gosto de usar este porque cada título eu vejo essa cor, 950, então essa é a cor do título Então, vamos continuar com isso. E na próxima cor, temos outra coisa. Vamos ver. Cor do plano de fundo e preenchimento do plano de fundo. Então, vamos adicionar aqui o plano de fundo, para que possamos dizer que a cor BGi e BGi será essa E também precisamos de mais um. Então, vamos adicionar um novo, e isso é BGIFll, então BG ficará bem, E a cor será o estilo desta. E essa cor está disponível, mas isso não é necessário pois só você tem uma única vez que usamos. Sempre que você usar qualquer cor global ou fonte global, tente ver se você a usa em vários lugares, não de uma só vez, porque de uma só vez é fácil. Mas se você usar a mesma cor em vários lugares, selecione-a. Ok, então está tudo bem. Vamos ver essa cor. Isso é o mesmo, 950. Essa é a sensação de fundo. Esse é outro. Vamos ver qual cor é essa. Essa é a sensação de fundo. Toda a sensação de fundo. Essa também é a cor branca. Vamos continuar com isso, digamos que seja uma cor branca. Vamos ver se eles têm alguma cor branca ou não. Eu não acho que eles tenham isso. Então, o que podemos fazer? Podemos dizer que isso é branco e podemos literalmente selecionar a partir daí ou adicionar um novo. Oh, acho que já temos um histórico aqui. Por que é. Então, não precisamos do branco novamente, então vamos relacioná-lo. Então, sim, essa é a cor que usamos aqui em nosso design. Isso é bom. E agora vamos para a fonte aqui. Então, sobre a fonte, precisamos ver mais sobre o festival Menu One. Então, no Menu, usamos Satoshi de 18 pixels, certo? Então vamos ver aqui esse menu, Shatoshi, acho que esse é o que usamos Shotoshi de 18 pixels. E também acho que realmente não precisamos adicionar o menu um porque o menu é quase todo de uma vez. Nós vamos ser uma companheira. Portanto, não precisamos adicionar o esterco. Vamos para a próxima seção, esta. Então, digamos que esse seja o primeiro título. Então, o que podemos fazer é transformar o principal no título um e clicar nele. E então precisamos descobrir aqui o título um. Então, vamos rolar para baixo e depois descobriremos aqui. Então eu acho que se eles derem aqui uma opção de pesquisa, isso vai ser melhor. Mas de qualquer forma, vamos escolher esse H selecionado. Este é o H one. E agora vamos clicar novamente aqui. Então temos H dois. Então, vamos simplesmente escolher H dois e perder aqui H dois, então isso é H dois. Então, torne-o capitão mais tarde. Este é H dois. E então também temos aqui H três, então vamos adicionar aqui H três. Basta clicar duas vezes e você terá a opção Editar. Então isso é H dois, e agora precisamos selecionar aqui H um, três. Isso é H três, porque usamos o tempo três, e agora precisamos passar por esse corpo L. Então, corpo corpo corpo corpo. Isso é corpo. E vamos selecioná-lo. E vamos com esse corpo, e isso é corpo. É usado dez vezes, então selecione-o em Não e este é o nosso corpo. Selecionado. E vamos descobrir aqui o corpo M, este é o corpo M. Usamos quatro vezes aqui. E vamos para o próximo corpo S. Vamos simplesmente S estar lá. Então, vamos simplesmente selecionar aqui, corpo S, onde está um corpo S? Aqui, aqui está um corpo S. Além disso, precisamos adicionar aqui nossa tag ou digamos que podemos adicionar aqui. Então esse será o nosso botão. Definitivamente, precisamos de um botão. Botão. Vou simplesmente vendê-lo aqui, botão um. Precisamos adicionar aqui a tag. Então, se você perceber que isso é usado apenas uma vez, não adicione, certo? Se você usá-lo várias vezes, basta adicioná-lo porque vamos clicar nele. Como você pode ver, nós o usamos 14 vezes. Então, isso é necessário. Corpo onze vezes, corpo, dez vezes. Então, eles são principalmente necessários. Então, isso é importante. Então, sim, com isso podemos adicionar a tipografia e a cor globais, como você pode ver Agora você pode sincronizar. Basta clicar em um botão de sincronização e tudo será sincronizado. E agora vamos voltar lá e agora vamos para a opção de conversão. Então, vamos selecionar o topo, converter. Então, como você pode ver, agora é hora de digitar barco, e agora vamos para o. E então, primeiro de tudo, vou mudar o layout da página para a largura total. E agora vamos clicar na página de outro tamanho Control V, como você pode ver, obtemos exatamente o mesmo design. Mas agora, precisamos verificar se esse guia de estilo eles se aplicam ou não. Então, como você pode ver, o título é o mesmo. Além da tipografia, eles adicionaram H uma e toda a tag que acabamos de adicionar por toda Agora, Woody Miller, o benefício disso, certo? Digamos que eu tenho isso aqui, o tablet e este é o celular. Automaticamente, isso é responsivo. Mas digamos que use a mesma fonte em vários lugares, certo? Então, o que você precisa fazer agora é acessar a configuração do site de forma simples. E você tem duas opções aqui, fonte global de cor global. Então, digamos que eu goste de usar a cor global. Digamos que todos os textos que usamos aqui, 121 para um, dois, eu gosto de torná-los vermelhos ou digamos que eu goste de fazê-los com essas cores. Então, o que aconteceu? Eu faço aqui e clico em Salvar alterações. E se eu acessar este site novamente, em todo o título usamos, ele será vermelho. todo o cabeçalho, como você pode ver, cor é vermelha ao mesmo tempo. Então essa é a beleza do estilo, e é por isso que eu digo que isso é realmente importante e interessante se você usar essa cor global e fonte global. Então, sim, vamos salvar a mudança. Então esse é o problema. E na carta, se você se sentir bem, você precisa mudar o título de uma só vez, mudar a cor. Também gosto das mudanças no design. E o mesmo com a fonte, você pode literalmente mudar a fonte H. Se você quiser sentir isso, ok, o H parece muito maior do que eu esperava Então você pode diminuí-lo facilmente. Além disso, digamos que, se você quiser torná-lo tablet, queira aumentar um pouco, basta ir lá e aumentar, digamos, 28 pix Li um, aumentá-lo Além disso, se você gosta de um tablet, você quer fazer isso, digamos, 24 agora mesmo. Então, mas você quer fazer 32, basta fazer 32, então serão dois. Então clique no Septon em todos os lugares em que usamos a tag H one, agora ela será 32, certo, como você pode ver, agora ela aumentou para 32 Então, essa é a coisa mais fácil, e essa é a coisa que tem a ver com a cor global e a fonte global. Então, espero que você tenha uma ideia clara de como 11. Importação via importação ao vivo e Importe páginas existentes usando o método Adicionar: Então, agora vamos ver o modo de entrada ao vivo. Então, antes de falarmos sobre esse modo de cópia, certo? E agora vamos com a próxima opção, modo de entrada. Então clique lá. Então, nosso design é otimizado para que não precisemos otimizar novamente. Então, vamos clicar em otimizar novamente. E então não vamos fazer nada porque nosso design já está otimizado. Então, vamos clicar na opção Converter. E então você tem duas opções, como baixar Jason nesta entrada ao vivo Então, vamos clicar em Live Input. Agora, conforme você vê, nosso site já está conectado. Então, se você não estiver editando, basta clicar no botão adst e adicionar aqui o ARL lateral e o token de segurança Se você acessar este UICE em O que pressionar e clicar na configuração, obterá essa opção E agora eu só preciso adicionar essa coisa e selecionar o sinal pelo qual você deseja inserir. Então, digamos que eu goste de inserir este. Essa vai ser nossa nova página, certo? Então, vamos selecionar a página, e esse será nosso elemento. Então essa será nossa página. Vamos clicar na próxima opção. E agora, como você pode ver , será uma entrada. Então, como você pode ver , é importante. Vamos clicar no botão Abrir. E esse design já foi importado aqui, como você pode ver. Então, agora você precisa clicar aqui, elemento ou neste botão na parte superior, e agora precisamos clicar na configuração, alterar o layout anterior para o elemento de largura total. Agora, o design publicado, como você pode ver, agora é um design pronto aqui. Além disso, se você quiser alterar o nome da página, agora é um desktop, mas se quiser fazer alterações, qualquer outra coisa, você pode fazer isso Então, isso é sobre o modo de entrada, certo? Agora, o que aconteceu, hum, se eu fizer alguma mudança aqui, digamos que eu goste de fazer muitas mudanças aqui. Por exemplo, muitas coisas que eu faço eu mudo o texto, tamanho da fonte, muitas coisas que eu faço aqui. Depois disso, se você quiser inserir a mesma coisa, como você pode fazer? Então, por exemplo, eu vou lá novamente, seleciono o design novamente. Assim, você pode dizer, selecione o design, otimize e converta a próxima entrada ativa. E aqui está a opção, temos duas opções existentes. Então esse design já está na metade do nosso site, certo? Então, o que você pode fazer, podemos selecionar um tom e ele substituirá, onde você substituirá? Ele substituirá nosso desktop. Então, vamos selecionar a área de trabalho. Clique em Avançar e ele será inserido novamente no mesmo local. E vamos clicar novamente e abrir novamente. E, como você pode ver, agora mudou e agora vai ser mais de seis. Então essa é a maneira mais fácil. Se você já importa o design e deseja fazer a atualização, essa é uma maneira bem fácil. Basta fazer a atualização simplesmente assim, certo? E se você quiser fazer isso de uma vez, será um novo design. Depois, basta selecionar aqui o novo e, como quiser, você pode fazer isso. E se você já tem algum design importante e deseja apenas fazer a personalização novamente, deseja atualizá-lo, basta comprar dessa forma, você pode fazer isso Então, isso é principalmente o problema da opção de importação ao vivo. Então, deixe-me saber se você tiver alguma dúvida, então me avise. E agora vamos usar esse JSON, clique em JSON e clique no botão para baixo. Como você pode ver, temos um arquivo G lá e, se você simplesmente exportá-lo , obterá um arquivo JSON, mas acho que realmente não precisamos desse arquivo Podemos importar o arquivo G. Então, agora, para importar o arquivo, o arquivo SN, o que você precisa fazer, precisamos ir para a página em que você deseja importar o arquivo. Basta clicar nessa opção aqui na caixa de opções desta caixa. E então precisamos ir aqui esta opção de modelo M e clicar aqui nesta opção Importar. E agora, em Importar, precisamos apenas fazer o upload do modelo que baixamos recentemente. Então selecione o arquivo, e agora precisamos selecionar o arquivo Z aqui. Basta clicar em Abrir O. Em seguida, mostrar em um pop-up. Vamos continuar. Então, vamos dedicar um pouco de tempo. Como você pode ver, temos uma opção aqui. E agora precisamos selecionar qual deles você gostaria de inserir. Digamos que eu goste de entrar neste, então clique no botão Dentro. Isso fará com que obtenhamos uma costura projetada que vemos na FICMA, certo Então, esse é outro processo. Isso significa que compartilho com vocês três processos agora. Se eu recapitular aqui novamente, o primeiro processo foi fazer este, certo, no modo de cópia O antes eu compartilho com você. A próxima coisa que compartilho com você é o modo de importação. No modo de importação, tenha duas opções. Primeiro, você pode literalmente conectar seu site e apenas importar ao vivo. Este é um desses que eu compartilho com você. E também compartilho com vocês o J e o Y. Isso significa que vemos as três maneiras pelas quais você pode simplesmente importar seu design de figma para a Wt Press Você pode literalmente usar um desses até mesmo para acompanhar tudo isso. Pessoalmente, gosto do here live import one, ou se você diz meu favorito, então o meu favorito é como copy pest Basta copiar e usar o elemento ou colá-lo. Isso é muito mais fácil. Então esse é o meu favorito, então você também pode usar esse copymt 12. Configurando depoimentos com um carrossel: Agora vamos trabalhar em uma seção de depoimentos. Para esta seção de depoimentos, em primeiro lugar, precisamos organizá-la melhor Então, deixe-me compartilhar com você essa camada para que você tenha uma ideia de como a organizamos . Então, como você pode ver, este é o nosso código de depoimento e, se você entrar nele , ele terá uma classificação e também um depoimento Temos conteúdo, imagem e texto, certo? Quero dizer, título ou nome. E se você for até essa classificação, e se eu abrir essa seta, então, como você pode ver, eu apenas uso aqui, como o ícone da fonte Awesome five como você pode ver o telefone awesome five, se você olhar com cuidado. Então, quando você for usar esse ícone, tente se certificar de que você também está usando a fonte ASM five Será mais fácil implementar o elementor. Então, certifique-se de usá-lo. Além disso, sua estrutura será assim, e terá um design diferente, mas a estrutura, se você parecer , será fácil de inserir. Ok, então vamos para a próxima. Então eu seleciono esta seção. Vamos otimizar e copiar. E vamos ver aqui esse widget e tag. E aqui, eu preciso selecioná-lo. Então, o que você não seleciona? Primeiro de tudo, preciso selecionar seu depoimento, e preciso selecionar aqui esse depoimento, então você receberá widget de depoimento, Então, todo esse lugar, como você pode ver, certifique-se de que está correto. Esse é o conteúdo, definitivamente. Essa é a imagem. Esse é o nome e esse é o título. Então, vamos salvá-lo. E vamos até essa classificação e vamos pesquisar aqui a classificação. Basta pesquisar a classificação. E eu seleciono aqui e a classificação é de zero a cinco. A classificação está aqui em cinco, e o título será estrela e estrela ícone, e vamos salvá-lo. Então, agora, como você pode ver, agora está salvo e pronto. E agora, aqui, só precisamos copiar Copiar, vou para a próxima e apenas colar e substituir. Novamente, cole e substitua e, novamente, cole e substitua aqui. Então, novamente, selecione aqui e vamos para essa conversão, agora está copiando para o meu cli booad Vamos voltar ao Elementor. Vamos colar do outro lado e vamos colar. Outro que você pode ver, agora está adicionado. A próxima coisa é, para nós, basta clicar nesse elemento do ícone do plano e agora só precisar pesquisar no carrossel Basta pesquisar o carrossel e, em seguida, você chegará aqui neste carrossel Então, basta arrastar e soltar aqui. E então, como você pode ver, temos alguns Wichat e agora, primeiro de tudo, personalizamos o que quiser E se você ver que não há imagem, basta clicar na opção de imagem, clicar em Escolher imagem, e agora você redirecionará para esta página e agora basta selecionar a imagem, então você obterá a imagem Thea. Então, sim. Então, primeiro de tudo, eu gosto de mudar essa direção CN para centro, como você pode ver agora no centro. Além disso, se você quiser alterar essa configuração para quatro ou, digamos, três, o que quiser, você pode literalmente fazer isso Então, no meu caso, eu faço cinco. Ok, isso é bom. Se você quiser alterar esse esboço CN, pode fazê-lo aqui O que você quiser, faça a alteração e agora basta selecioná-la se tudo estiver bem e, em seguida, selecionar e copiar. Vamos para o próximo item, o widget, e simplesmente colá-lo Então, quando eu vou colar, precisamos mudar a largura Então, como você pode ver, eu selecionei este cartão, e também vou para esse layout, e agora ele está em toda a largura e estou 100% agora. Então, quando você vai ganhar 100% , você fica assim. Vamos para o contêiner um. E esse contêiner, eu gosto torná-lo em toda a largura e 100%. Sempre que você vai fazer 100% al, também entramos em um site. Então, aqui, só precisamos chegar a 90%. Então, sempre que você vai conseguir 90% precisa ficar assim. E agora também queremos alterar essa largura. Então, vamos para este cartão, e dentro de um cartão, dentro desse recipiente, eu gosto de fazer com que eles tenham 16 pixels desse preenchimento aqui juntos Além disso, sobre essas tomadas, eu gosto de atualizar um pouco. Então, digamos que, para o nome, eu gosto de torná-lo melhor em 20 pixels, sim, 20 pixels. E para o próximo, o título, eu gosto de torná-lo em 16 pixels. Então, sim, isso parece muito bom. É melhor se você fizer isso no Figma. Mas estou fazendo isso porque parece muito maior. É por isso. Mas se você continuar assim, não há problema. Ok, agora está pronto. E agora vamos clicar apenas no cartão. Basta copiar o recorte, copiá-lo, ir para o próximo e colar, como você pode ver, obtemos o próximo, vá para o próximo e cole. Recebemos um terceiro. Vamos clicar nesse carrossel e duplicá-lo mais alguns Então, como você pode ver, eu dupliquei novamente aqui. Eu recebo um quatro, cinco, então eu posso dizer que este é o nosso quatro. Digamos que esse seja o nosso número cinco, deveria ser. Sim, temos alguns deles. E também, pergunta se conseguirmos ver uma flecha aqui, mas isso não parece muito visível. Então, o que você pode fazer, vá para o estilo. Vamos para a navegação. Digamos que essa cor em preto seja um tipo de coisa assim. Sim, L está visível. Além disso, se você quiser fazer com que seja um canto arredondado ou algo assim, definitivamente, podemos fazer isso. Mas acho que parece bom. Mas se você quiser fazer isso, então você pode torná-lo sólido. Você pode adicionar um pixel, definitivamente. Qual será a nossa cor? Qual será o nosso raio. Em seguida, adicione também o preenchimento lá. Então eu acho que se você apenas adicioná-lo, então, como eu posso dizer, vai ser redondo ou algo assim. Então, eu realmente não quero isso agora. Então, vamos manter isso como está. Ok, isso é bom. Sim, isso é bom. E também, sempre que vamos passar o mouse, a cor muda Vamos até o hover e vamos deixá-lo preto. Mas agora isso não está mudando. Então, se você clicar aqui, como você pode ver, vai para a próxima. Além disso, podemos atualizar aqui essa lacuna. Então, para isso, vou selecionar aqui o carrossel, ir para o estilo, ir para o slide e agora vamos mudar para o quanto eu quero Digamos que eu queira 30 pixels. Então, sim, é isso, Milli. Acho que agora está bom. E também tem mais configurações. Se você definitivamente quer tentar, então você pode fazer isso. Vamos ter uma configuração de navegação. Sim, vamos ter uma configuração de navegação, também ter uma paginação Se você quiser mudar a paginação para algo diferente, você pode fazer isso Então, o que você quiser, você pode fazer, estilo Milli. Você pode fazer o estilo. Você pode alterar a cor e também pode alterar o tamanho do ponto da fonte. No momento, se você olhar, é bem pequeno, então você pode definitivamente aumentá-lo, se quiser. Então, sim, isso é com cerca de 13. Importar formulário de contato 7 ou WPforms: Agora vou compartilhar com vocês como podemos adicionar esse formulário de contato. Então, para fazer isso, precisamos selecionar o quadro como este e, em seguida, usar a otimização. E depois dessa otimização, só precisamos adicionar a tag Widget, porque eu compartilhei com você antes que, se você quiser impor um design estático, não precisará configurar nenhuma tag de widget Mas se você quiser obter algo dinâmico, dessa vez definitivamente precisamos configurar esse widget Então, aqui, podemos literalmente selecioná-lo como um formulário, mas isso ainda não é necessário. Só precisamos adicionar o campo aqui. Então, o que você pode fazer é simplesmente selecionar a opção de campo aqui, selecionar a opção de campo aqui, e esses serão nossos preenchimentos Então, posso dizer que esses são nossos campos, e vamos ao Wichtag e aqui, podemos pesquisar qual formulário você gostaria de adicionar Então, por exemplo, eu gosto de adicionar aqui, digamos, formulário, então eu quero adicionar aqui o formulário WP Então, eu posso simplesmente adicionar aqui W fm. Então, como você pode ver, recebo um widget WfM aqui porque fui instalado em um plugin chamado Plus Então, se você simplesmente vai copiá-lo e acessar seu site WordPress e acessar os plug-ins, acho que já compartilho com você essa coisa. Então, se você apenas pesquisar aqui, o widget plus, então aqui, você obterá esse plug-in Isso vem do Posy Met, este, como você pode ver, esse é o autor Então, basta instalar e ativar esse plug-in. Portanto, se você ativá-lo , ao copiar e colar o elementar, você terá a opção de contato. Ok, então vamos voltar aqui novamente. E agora, digamos que eu vou selecionar aqui o formulário TPP de forma simples E agora, como você pode ver, isso não está configurado. Então, vamos clicar em salvar agora é salvar. Agora que precisamos fazer isso, precisamos voltar, voltar novamente, clicar em Converter e agora vamos clicar em baixar Apenas uma opção ou entrada ao vivo. Então, acho que vou escolher a opção de importação de download. Então, vamos baixá-lo. Como você pode ver, faça o download aqui. Vamos voltar ao nosso site onde você gostaria de importar o formulário. Então, vamos clicar aqui, J aqui na caixa. Em seguida, precisamos clicar aqui na opção Importar. E agora precisamos simplesmente arrastar e rascunhar aqui o arquivo, continuar. E como você pode ver, temos um contato como opção, certo? Então, vamos clicar nessa opção InSR e agora, como você pode ver, obtemos o mesmo que está aqui E agora, o que você precisa fazer, precisamos clicar aqui na opção e eu preciso pesquisar seu WPForm, basta arrastar e Então, como você pode ver, temos a opção. Agora precisamos selecionar HeFM com qual deles gostaríamos de escolher. Agora que pegamos esse, vamos clicar nele. Pin IC, acesse aqui a opção avançada, altere esse costume para o quanto queremos. Eu gosto de escolher 100, como você pode ver, obtemos 100 e agora podemos simplesmente publicá-lo. E para esse formulário mágico do cliente, também podemos fazer isso a partir daqui Podemos fazer um pouco de mágica com o cliente. Digamos que podemos alterar o tamanho da fonte, tamanho do campo, podemos alterar o estilo do rótulo, estilo do botão, se você quiser alterar o botão. Digamos que esse é o botão agora, e a cor do nosso botão era algo diferente. Se você olhar para isso. Essa era a cor do nosso botão. Então, precisamos da mesma cor, certo, então podemos simplesmente copiá-la, voltar ao design, simplesmente mudar essas cores, você pode ver como mudam. Eu quero mudar essa cor para uma como essa, para que você possa ver a mudança. Além disso, como você quiser, se quiser torná-lo grande, pequeno, como você quer? Você pode fazer isso. Aqui também está a opção avançada B de madeira Nredian E aqui está um estilo de nível, estilo de preenchimento. Também tenho algumas opções avançadas lá. E vamos publicar esse formulário. Além disso, se você quiser fazer a personalização do seu formulário , acho que você já sabe disso Você só precisa acessar o plug-in de formulário que você usa pessoalmente. Portanto, se você estiver usando o Formulário de Contato , acesse o fm de contato e edite seu formulário. E se você estiver usando o Formulário WB, vá com seu WB Farm e edite o Então, o que você precisa fazer, basta preencher o formulário manualmente aqui. Portanto, o formulário não pode ser importado sozinho, então você não precisa apenas adicioná-lo manualmente. Então, digamos que você precise de e-mail, precisa de um número de telefone. O que você pode fazer é simplesmente copiar o número de telefone, digamos, e deixe-me compartilhar com você o que podemos fazer. Então, agora, como você pode ver, temos a opção de e-mail, certo? E agora eu também preciso de outra mensagem de texto para um número de telefone. Então, o que você pode fazer é simplesmente dizer uma única linha, então vou simplesmente adicionar uma única linha e vou alterá-la para número de telefone. Como você pode ver, esse é o número de telefone aqui. Além disso, se você quiser adicionar o espaço reservado dessa forma, você pode fazer isso Além disso, vamos ver aqui em nosso formulário não há texto. Se você observar isso com cuidado, não há nível. Está totalmente vazio. Não há nenhum nível lá. Então, o que você pode fazer é simplesmente ocultar o nível aqui. Podemos simplesmente ocultar o nível e, sobre o e-mail, a mesma coisa, podemos ocultar o nível. Mas podemos adicionar aqui o e-mail de espaço reservado , digamos, nosso endereço de e-mail Então, dessa forma, você pode enviar por correio o conjunto do seu formulário. Então, sim, 14. Seção de acordeão aninhado ou perguntas frequentes: Agora vamos importar nossa seção de perguntas frequentes ou Ecodon. Portanto, para a seção de perguntas frequentes, precisamos usar novamente o Figma telementor Em seguida, precisamos clicar e otimizar a cópia. Então precisamos ir aqui Wich e marcar novamente. E agora só precisamos selecionar esses questionários aqui, que serão, digamos, FQ Então, o que você pode fazer é simplesmente pesquisar seu FQ. Então, se você não está recebendo o FQ lá, você precisa pesquisar seu Ecodon, basta pesquisar AC, então você obterá isso. Basta selecioná-lo E após essa seleção, você obterá essa opção como formulário de título. Então você precisa selecionar o formulário FQ um, então o ícone será este e título será, não tenho certeza deste, certo Vamos adicionar um novo, e esse será nosso F dois. Novamente, aqui você encontra a figura dois. Essa é a figura dois? Adicione um novo e vamos com a Fig. três. Vamos selecionar a Figura três. Vamos adicionar outro, e este é F quatro aqui. Ok, isso não é conteúdo, este é o FQ quatro. Então, novamente, adicione aqui F cinco, basta adicionar aqui AFX cinco Basta adicioná-lo e clicar no botão Salvar alterações. E vamos voltar. Vamos clicar em Copiar e agora ele vai dizer CoptiCarpot Vamos voltar para a área de trabalho e clicar em colar do outro lado e colar. E, como você pode ver, obtemos o mesmo que foi projetado, certo? Além disso, precisamos inserir a mesma coisa sem o Widget. Então, vamos voltar. E, novamente, vamos otimizar e copiar a tag do Widget, e vamos para acordeão, essa, e eu preciso selecionar E, como você pode ver, vou deixar isso claro. Portanto, agora não há nenhum lado fiscal do widget. Então, o que eu faço, primeiro de tudo, eu configuro o Widget lá e simplesmente o insiro no meu site elementar Agora eu apenas limpo o elemento ou widget. Como você pode ver, agora eu esclareço. Não há nada configurado. Almofadas normais, como você pode ver no ícone da moldura. Então, o que eu faço, eu seleciono novamente e volto, e agora vamos converter, e está copiando para a área de transferência Vamos voltar aqui novamente e simplesmente superar isso. OK. Então, se você ver esse tipo de pasta, clique em passar ao lado e cole. Agora, como você pode ver, obtemos o estático, então agora, como você pode ver, você tem dois deles. Uma é, tipo, com o Widget Um é, tipo, sem Widget, e só precisamos fazer com que essa coisa pareça igual, certo? Então, vamos começar o trabalho. Então, como você pode ver, você vai clicar neste acordeão FIQ e depois abrir o Asgacs, e precisamos Então esse é o texto aí, então podemos simplesmente copiá-lo e vamos realmente passar por aqui. Sim, isso é tudo sobre isso. E agora vamos simplesmente ok, essa pode ser a mesma linha. Então, vamos ver se é a mesma linha ou não. Sim, é meio que a mesma linha, mas não é. Então você pode clicar lá, e vamos até o Advance e basta remover aqui. Eu só entendo esse acolchoamento. Digamos que no topo, eu realmente não quero nada. Mas de todos os lugares, eu gosto de ter 20 pixels. Então, do início, eu só posso fazer com que seja zero. E do fundo, acho que é 16 pixels melhor. Digamos que 12 pixels. Sim, isso é bom. Vamos ver como ficou. Tipo, sim, está tudo bem Ok, vamos clicar aqui na parte superior desse padrão. Dentro. Em seguida, basta rolar para baixo e a posição do item deve ser esticada até esta, e o ícone deve estar assim. Sim, isso é bom. Além disso, precisamos ir até lá e remover aqui o ladrilho. Vamos até os bôeres, digamos, nenhum deles se incomoda. Vamos até esse caramanchão também. E agora, em todos os lugares, precisamos desse botter, certo? Mas para o ativo, então para o ativo, vamos para o bloco, vamos para o ativo e ativamos o tipo boer, eu quero que seja sólido e, como quisermos, vamos projetar primeiro novamente E este pode ser nosso bôer e isso é 100% OK, vamos descobrir a fronteira aqui primeiro Então essa é a nossa garrafa, certo? Então isso é toke, e isso deve ser 1,5. Esse é o nosso brinquedo. Ok, então vamos copiá-lo. Vamos voltar novamente. E aqui estão os ativos, acho que vamos com essa cor. Deveria ser melhor, eu diria. Essa cor. Agora, como você pode ver, um ativo, com essa largura de borda, quero dizer, essa é a largura da borda, então quanto eu quero, então eu quero usar apenas uma. Então eu o tranco. Vamos fazer disso um. Ou se você quiser torná-lo 1,5, então você pode torná-lo 1,5. E então as áreas de fronteira têm um canto superior direito. Isso é bom. Mas na parte inferior e na esquerda, eu realmente não preciso de nada quando está ativo. Como você pode ver, sou ativo como seda, não sou flutuante. Ativo significa quando está aberto, certo? Quando está aberto isso. Vamos clicar no próximo e ir para o plano de fundo para que não precisemos de um plano de fundo do tipo let's go, mude a cor para este. Sim. Ok, então precisamos mudar a cor. Então, o que podemos fazer é escolher a cor a partir daqui. Então, por favor, selecione a cor. Tudo bem, então essa é a cor que vamos escolher. OK. Então isso é normal? Ok, então, novamente, clique aqui nesta, na próxima, e vá aqui a cor e adicione o código da cor. OK. Tudo bem, agora está adicionado. Então, o que você precisa fazer adicionar aqui o raio do canto Novamente, basta clicar aqui desta. Vá para o estilo e vá para a garrafa e o raio da garrafa, eu gosto de adicionar aqui esta e esta Então, o que eu faço é simplesmente copiá-lo do ativo. Então, quando vou para o ativo, como você pode ver, eu adiciono esse raio da garrafa aqui, este, eu apenas copio o mesmo número Então você pode fazer uma figura redonda. Você pode fazer oito, por exemplo, ou se quiser fazer nove, então você pode fazer isso. E basta fazer a figura redonda, depois abri-la, e depois ir para a próxima, próxima que vai abrir, vá até o bôer e aqui o tabuleiro, como será Além disso, se você quiser adicionar, digamos , se quiser adicionar aqui um tipo de plano de fundo, digamos, um tipo de velejador , você pode fazer isso Então, podemos adicionar aqui um, e este deve ser um. E também precisamos adicionar aqui e colorir. Então nossa cor será essa cor, então podemos simplesmente copiar a cor, ir aqui novamente e ir para botter e nossa cor será a mesma assim Ok, tudo bem. Então, agora vamos ver como fica. Então, essa é a coisa agora. Sim, isso é bom. Isso é o que vamos fazer. Mas o problema aqui você pode ver que isso é arredondado, mas não é arredondado. Então, o problema aqui é porque acho que fazemos o raio do canto aqui Então isso deve ser oito. Isso deve ser oito, não 88. Mas as mudanças acontecerão no ativo. O ativo será zero e zero. Agora, vamos ver. Ativo será zero e zero. Mas se você ver o normal , o normal ficará bem. O normal será oito e oito, certo. Então, o oito ou nove. Ok, tudo bem. E agora, se você quiser, digamos , se quiser torná-lo mais próximo, clique lá e vá para Avançar. E então o que podemos fazer é simplesmente adicionar o mod aqui. Digamos que eu goste de sair aqui com 16 pixels. Isso é bom. Isso parece bom. E se você quiser torná-lo mais próximo, então vamos torná-lo 24 ou 20, se você quiser, faça 20 assim. Ou uma coisa que você pode fazer é simplesmente copiá-lo, basta clicar em copiar e colar. E depois de colá-lo, se você quiser aplicar o mesmo estilo, clique aqui no principal , no contêiner principal, clique aqui em Copiar Basta clicar aqui nesta cópia e ir para a próxima e clicar no estilo de colar, colar esse estilo. Então, teremos o mesmo estilo aqui, certo? Então, essa é outra maneira que você pode fazer. Então, primeiro de tudo, copie e cole aqui. Novamente, vá para a próxima, cole aqui e vá para a próxima. Você pode literalmente colar aqui. E agora, se você quiser aplicar o estilo, clique neste contêiner principal, copie, vá até lá, cole o texto, entendemos Vamos colar o testinho, pegue-o. Agora vamos ao Pisttyle, o que significa que temos a mesma coisa Agora, vou compartilhar com vocês como podemos simplesmente adicionar o CN. Então, para o CN, se você quiser importar seu próprio CN, basta clicar aqui ou neste VC de upload e, em seguida, fazer upload do HVC que deseja adicionar, basta adicioná-lo e selecioná-lo E então vai ser uma mudança. Além disso, se você tiver uma biblioteca de ícones, digamos que você esteja usando a biblioteca Huge Cn ou qualquer outra coisa, se quiser fazer o upload de uma vez, basta fazer o upload aqui, elementor, e todo o ícone será adicionado de uma vez, certo? Portanto, você não precisa fazer o upload do Cn manualmente a partir daqui. E para exportar este ícone, você precisa ir aqui neste FigMA e você precisa apenas selecionar o ícone e nesta configuração de exportação, você precisa selecionar aqui HVC e simplesmente explodir o envoltório Con, então você obterá o mesmo arquivo HVC Então, sim, espero que você entenda como adicionar seu próprio ícone ou como fazer as alterações. Além disso, se eu não estiver errado, eles já têm essa configuração aqui para o Cn. Portanto, se você acessar esse ícone , obterá essa opção de tamanho. Digamos que eu gosto de usar 26 ou 20 pixels, se eu estiver errado, sim, 20 pixels, vamos pegar. Vamos mudar a cor. Se você quiser que a cor mude, então você pode fazer isso a partir daqui. Então, se você for para o estilo e rolar para baixo até o cabeçalho , basicamente obterá essa opção. Além disso, é uma tipografia, faça as alterações. Além disso, se você quiser alterar a cor, o texto , o traçado, o que quiser, toda essa configuração, você obterá um estilo A última coisa é como mudar as cores de fundo. Para isso, precisamos usar esse estilo de cordão. E normalmente, precisamos fazer essa cor, o que você quiser. Digamos que eu vou fazer com que seja da cor branca. Então, agora, como você pode ver , é a cor branca. Sempre que estou clicando nele, fico assim. Então, o que eu preciso fazer é entrar aqui novamente, e para a cor de fundo, preciso selecionar as mesmas cores. Então você está ativo. Então, para a cor, eu gosto de mudá-la. Então, sim, agora, se eu clicar, como você pode ver, obtemos a mesma cor. Se eu clicar, obtemos a mesma cor aqui. OK. 15. Seções de cabeçalho e rodapé: Agora vou compartilhar com vocês como podemos adicionar cabeçalho e rodapé personalizados Então, para isso, precisamos apenas do element to pro. Se você já tem um elemento profissional, tudo bem. Ou, se você não tiver, precisará de um plugue adicional para isso. Isso é algo elemento ou cabeçalho e rodapé. Se você tiver, eles simplesmente instalarão esse elemento de pesquisa do plug-in no cabeçalho. Em seguida, você receberá um plugin. Ok, então aqui está, você precisa instalar e ativar. Além disso, você pode experimentar este. Acho que essas são as mesmas características. Sim, você pode tentar as duas coisas. Mas eu já tenho o elemento Pro, então vou te mostrar o elemento P. Então, primeiro de tudo, precisamos usar modelos, e precisamos ir aqui o Team Builder aqui. E então precisamos ir aqui no cabeçalho, clicar nesse ícone de adição, clicar no ícone de adição. Aqui está lá. Agora vamos para essa Figma, vou clicar nesse cabeçalho Vá para o plugin elemental Fig Mad, otimize-o, converta e copie um teclado Agora volte ao Elementor e agora vamos ver aqui qual cabeçalho já corresponde Então essa é a coisa boa que eu quero. E então isso parece, eu acho, o mesmo, eu acho que este e este parecem iguais. Sim, este tem a mesma aparência. Então, vamos entrar nela. Então, se você vai insistir, então eu vou conectar sua conta com isso Ok, então vamos ignorar isso por enquanto. Vamos clicar nessa opção cruzada e agora vamos simplesmente passar pela lateral, passá-la. Então, como você pode ver, obtemos exatamente o mesmo cabeçalho. Como você pode ver, obtemos exatamente o mesmo cabeçalho para dextro. Mas quando você vai para o celular, vai ser algo diferente. Então, o que você pode fazer, podemos literalmente duplicá-lo. Então, como você pode dizer, faça com que sejam dois. E podemos fazer isso de várias maneiras. Isso não é uma barragem, isso é loucura, desse jeito. Você pode fazer isso de várias maneiras. Então, isso é algo, digamos, para o Dextop e isso é algo que poderíamos dizer para tab ou mobile, como este, tap ou mobile Então, no desktop, isso só será visível para o Textb Então, o que você pode fazer? Eu posso selecionar o contêiner selecionado, ir para avançar e ir para este responsivo e simplesmente desabilitá-lo para este E vamos para este tablet, vamos para Avançado, para responsivo e simplesmente desativamos um cabeçalho Isso significa que este parece simples, o mesmo. Isso é diferente, certo? Ok, isso é bom. Então, agora aqui neste tablet, o que você precisa fazer? Basta adicionar aqui o NAP, basta pesquisar NAP, então você obterá um menu do WordPress, basta arrastar e soltar o menu Odd Press Tudo bem, agora na caneta WordPress, só precisamos fazer algumas técnicas Então, o que podemos fazer, podemos simplesmente rastrear e desenhar aqui este botão principal e abaixo o logotipo, como este. Esse é o nosso logotipo. E então vamos adicionar esse menu de pressão W lá, certo? E agora, basta removê-lo. Então, temos a mesma coisa, certo? E aqui, o padrão, eu gosto de mudar esse pixel. Digamos que eu goste de fazer isso assim. 20 talvez 21, isso é bom. Este é outro menu, então eu gosto de mudar isso com úlcera que deve ser personalizada e isso deve ser com pixel, acho que não Sim. Isso é bom. Sim, isso é bom Sim, isso é bom. Então, se você quiser torná-lo um pouco mais próximo , podemos torná-lo mais pecado. Então, sim, basta aumentar esse lado esquerdo. Então, digamos que eu queira ir para a porcentagem de fotos. A porcentagem será muito mais rápida e fácil. Então 40, sim, isso parece mais próximo, 45 e 40, 44 é bom. Mamãe. Faça deles tudo e centralize, centralize tudo corretamente. Sim. Agora, se você vai fazer um pouco de personalização, definitivamente você pode fazer E isso é bobagem para o celular. Então, aqui, isso parece muito bom. E se você for a esse celular, tudo bem. Além disso, uma coisa quando você vai adicioná-lo sempre que for adicioná-lo, não vai parecer exatamente o mesmo que está, certo? Então, se você clicar nisso, como você pode ver, agora fica assim porque eu mudei a largura também aqui. Portanto, também é necessário fazer uma pequena configuração. Então, vamos para esse layout, e precisamos torná-lo em toda a largura, certo? Quando for móvel, deve ter largura total. E se você quiser centralizá-lo, sim, definitivamente, é a primeira opção de mixagem central, mas sim, escreva-os no centro. Ok, então agora vamos ver a prévia. Esse é o centro. Se vamos chegar aqui, acho que isso também será o centro . Ok, então sim. E acho que só precisamos dele para o celular. Nós realmente não precisamos disso para o tablet porque, no tablet, isso vai ser um feed, eu acho. Portanto, só podemos fazer isso para dispositivos móveis. Então, vamos para o celular, e esse é o celular agora, e isso é bom, eu acho. Então, o que podemos fazer é simplesmente mudar o vento aqui em cima. Então, digamos que eu goste de dizer o quanto queremos. Vamos transformá-lo em pixel. Então, vamos fazer disso Torty. Isso é bom. E eu quero fazer também esse Torti Então, vamos até isso, e vamos para o Com também uma coisa, se você conseguir ver que não há botão, então certifique-se de selecionar esse hambúrguer com botão de alternância como este Então você terá essa opção aqui. Então, como você pode ver agora, é de largura total. Então, sim, o principal aqui é que precisamos apenas fixar essa largura, porque se você fizer esse cálculo da maneira correta, tudo ficará bem, certo? Caso contrário, você verá que está meio quebrado, como você pode ver. Agora, parece quebrado. Esse é um lado, esse é um lado. Então, só precisamos calcular essa largura corretamente. Digamos que eu queira fazer um de 30 pixels, isso é bom. Ok. Então, depois de consertá-lo, vou compartilhar com você. Eu digo, também, que se você conseguir ver, isso não será central do que todos os lugares, acesse esse logotipo, verifique com antecedência essa margem e o preenchimento Vá até o botão, verifique a margem e o preenchimento. Vá também para este N, verifique a margem e o preenchimento. Então, se você perceber que isso não será central. Então, agora, como você pode ver, vai ser o centro, mas antes eu não estava, eu tento muitas vezes e simplesmente não vou, mas agora está tudo bem. Mas não remova esse acolchoado. Se você acabou de remover o preenchimento, provavelmente precisará adicioná-lo novamente. Ajudar você a entender isso. Ok, agora precisamos consertar o tablet 1. Mas no tablet, isso parece o mesmo, certo? Então, se você quiser adicionar o estrume lá, tudo bem. Basta ir até lá e acessar este conteúdo, e precisamos adicionar aqui. Esse hambúrguer, esse, e esse deveria ser um ícone Portanto, se você quiser adicionar esse menu suspenso no tablet , certifique-se de selecionar esse layout no menu suspenso. Então, se digamos que selecione sua horizontal ou vertical, provavelmente não verá nenhuma opção cruzada aqui. Então, quero dizer, opção de menu aqui. Portanto, você precisa ter certeza de que isso está no menu suspenso. Agora, como você pode ver, está o menu suspenso, e agora podemos ver o menu e se você clicar nele, Asi Cans estará lá em cima Mas não é visível porque precisamos ir até esse cabeçalho e adicionar o índice Zt três p nove. Então provavelmente está chegando, então agora isso provavelmente está vindo aqui. Então, provavelmente é a mesma coisa. Sim, agora é o mesmo. Além disso, se você quiser adicionar aqui essa cor de fundo, vá para esse NAF como o cabeçalho Quero dizer, esse é o principal e vai para o normal. E por aqui, essa cor de fundo, eu gosto de usar o preenchimento do plano de fundo. Então, vamos clicar. Como você pode ver, obtemos a cor de preenchimento do plano de fundo aqui. Sim. Agora, espero que você entenda, e isso é tudo sobre o celular. Este é o nosso tablet e esse é o nosso desktop. Então, sim, é isso. Então, agora, para corrigir essa opção aqui, só precisamos trabalhar nessa erva daninha. Então, se você apenas reduzir a maconha, isso será corrigido. Se você apenas reduzir o desejo, isso será corrigido, eu acho. Além disso, se você quiser adicionar um menu, como o menu Nap, que você pode fazer, você pode literalmente simplesmente pesquisar seu Nap Em seguida, você pode adicionar aqui o menu O que pressionar, algo assim no meio disso. E agora você precisa fazer uma pequena configuração. Então, vamos clicar nessa caneta. Eu posso usar aqui esse estilo e simplesmente a tipografia e torná-lo de 18 pixels, por exemplo, e também Sim, 400 serão menos. Vamos com 500. E você pode literalmente remover esses dois itens, e você pode simplesmente trabalhar um pouco de estilo, como você pode ver, porque agora, quando eu vou passar o mouse sobre ele, ele fica branco Então, o que precisamos fazer é mudar a cor. Então, passe o mouse sobre a cor, essa deve ser a cor primária, certo? Então, agora, como você pode ver , deve ser primário. Agora, isso mudou. No ponteiro, a cor deve estar no título. Então, agora vou dizer que é uma mudança. Então, também acho que não precisamos dessa cor de ponteiro também Basta removê-lo. Então, sim. Então, agora podemos simplesmente fazer personalização aqui, então isso será corrigido Então, vamos ver a prévia. Sim, isso é bom. Então, vamos clicar nessa opção publicada. Agora nosso cabeçalho está pronto e agora podemos ir para o próximo. Tudo gira em torno do nosso rodapé. Ok, então agora vamos para o rodapé. Então, vamos clicar em Todas as partes em Novo e Rodapé. Tudo bem, agora está carregando. Ok, então precisamos voltar aqui. E para o rodapé, só precisamos copiar novamente para nossa prancheta Depois de copiá-lo, vamos cruzá-lo e clicar aqui neste botão, colar de lado e colar. Tudo bem, então esta é a foto da versão extra, certo? Então, o que é isso para imagem? Vamos ver quais imagens são essas? Não, não é necessária nenhuma imagem, eu acho. Então, vamos remover a imagem. Isso não é necessário. Isso é bom. Acho que o foo vai ser muito mais fácil porque só precisamos fixar aqui apenas a largura, nada mais. Porque se você for a este tablet, precisamos respeitar a largura aqui. Se formos a esse celular, também precisamos respeitar a largura. É isso aí, e também precisa remover algumas partes desnecessárias. Então, sim, é disso que se trata. Ok, vamos começar a consertar aqui. No desktop, só precisa aderir a esse ícone, certo? Então, o ícone já está lá. Vamos clicar aqui nessa estrutura e dentro dela, basta fixar a largura. Então, agora, como você pode ver, isso é uma porcentagem, então vamos diminuir e aumentar um pouco. Sim, 15 é muito, bom. Ok, então agora é falso. Além disso, se você quiser reduzir o tamanho, definitivamente podemos fazer isso. Nós podemos fazer isso ou você pode fazer 16 Pixel Do. Agora vamos ao tablet e também à largura. Então, em um celular, eu também preciso centralizá-los. Também precisamos corrigir essa largura, definitivamente. Então, vamos adicionar a largura. Então, agora, o principal, o mainframe, precisamos torná-lo 100%, por exemplo E para o outro, só precisamos reduzir o peso. Então, agora, como você pode ver, isso é 90 ou 18 pixels. Vamos para a próxima e fazer o mesmo. Então, sempre que eu adiciono, como você pode ver, ele vai para a próxima linha. Então esse é o próximo. Além disso, precisamos redefinir esse limite, digamos que seja de quatro pixels ou cinco, seis. E agora, se você ver aqui, essa aparência é exatamente a mesma de antes. Isso está no desktop, no tablet e no celular. 16. Todas as páginas do blog Listas de blogs ( Figma para WordPress ): Agora vamos ver como podemos importar uma página de bloco no Elementor Então, para fazer isso, precisamos ir aqui aos modelos, e precisamos ir aqui ao Construtor de temas aqui. E agora precisamos selecionar aqui o que você quer? Digamos que queremos um porco ARCA como um arquivo de blog. Então, vamos clicar no novo botão Este na parte superior aqui. Certo. Então, agora vamos voltar. Ok, agora a Asics está compartilhando alguns modelos pré-criados, mas não vamos usar novamente. Vamos fechá-lo. E agora vamos voltar ao nosso design e ao design Figma Vamos ao plugin Fig bet Elementor , como o y Cei, e vamos subir os TMAs Se você tem tempo para otimizar, então faça o Optimus, agora eu copio na O que eu faço é colar do outro lado e do Control V. Agora, vai levar um pouco de tempo. Ok, agora temos o mesmo design, como você pode ver. Ok, então uma coisa antes de prosseguir, se você perceber que seu design é com contêiner, precisará fazer uma coisa. Deixe-me acessar seu site. E agora você precisa clicar aqui na parte superior, como a opção de personalização na parte superior. E então você precisa selecionar aqui a opção geral no topo aqui. Em seguida, você precisa ir até o contêiner e escolher a largura total ou a largura total do eixo, a largura total do corpo do conteúdo e fazer com que o espaçamento seja zero Faça com que sejam zero. É isso mesmo. E então faça isso publicar. Outros assistam qual aplicativo e você verá que, tipo, não é possível fazer com que seja em toda a largura, certo? Porque agora, como você pode ver, isso é largura total, mas precisa ser assim, certo? Isso vai ser a mesma coisa assim. Então, o que eu preciso fazer? O que eu posso fazer, eu posso ir pegar esse principal. Então, vamos anabilizar essa estrutura. Esta é nossa página principal, esse é nosso herói, e esse é nosso recurso principal. Hum, aqui, eu realmente quero fazer esse bloco um, como o principal e de largura total, mas deve ser 100%. Então, o que posso dizer é que isso deve ser 100% agora. E isso agora é 100%. Mas eu preciso fazer um tamanho específico. Então, o que eu posso fazer, essa é a categoria. Quero dizer, este é esse contêiner, e digamos que eu queira fazer o quanto eu quiser. Eu quero 80 pixels, digamos. E isso é com um contêiner, certo? Ok, isso é com 80 pixels. Quero dizer, 80%. O que você pode fazer com este contêiner, também podemos alterá-lo. Mas acho que a porcentagem será melhor. Vamos para a próxima, como a principal característica e com o contêiner e a largura total, e isso deve ser 80 e isso deve ser 100%, certo? E isso deve ser 100%. Ok, então agora esse é o design agora, como você pode ver. Sim. Parece muito bom, mas deveria ser muito mais, certo? Será muito mais agrupado. Então, o que você pode fazer é colocá-los no centro, no entanto. Basta ir lá e colocá-los no centro aqui. Então, definitivamente, será o centro. E este é o contêiner, e essa é a seção do herói. Acho que os dois parecem iguais, então o que você pode fazer? Podemos apenas aumentar um pouco o tamanho. 88. Sim, parece bom. Ok, parece bom. 88. Isso é bom. Ok, vamos clicar em uma opção de publicação. Ok, agora não precisamos publicar. Por enquanto, podemos salvar, como salvar como rascunho. Ok. Agora, para adicionar este cartão, podemos fazer o que precisamos fazer com muita facilidade. Basta clicar neste ICN de gesso e pesquisar seu loop. Basta pesquisar seu loop. Essas coisas precisam de um elemento para serem profissionais. Se você não tem elemento, então vai ser muito difícil hoje. Mas você realmente precisa de um elemento profissional para isso. Então, vamos simplesmente arrastar e desenhar sua criação de loop. Então, quando você vai arrastar e rascunhar aqui, você vê algo assim, e agora vai estar fazendo isso. Ok. Vamos ver aqui a moldura, dentro da moldura, vamos para a parte interna da moldura. Então você obtém uma moldura extra lá. Então, novamente, você recebe um cartão de bloqueio. E aqui. Então, o que eu preciso só precisamos da refeição em bloco , não precisaríamos de tudo isso. Basta copiar o cartão de bloqueio e pronto. Então, agora, neste design, como você pode ver, eu não otimizei o design. É por isso que eu compro muitos contêineres. Então, se eu fizer a otimização e Figma aqui quando acabo de importar, não vou conseguir ver muitos contêineres Então, isso pode ser muito mais fácil de gerenciar. Então, espero que você entenda o quanto é importante otimizar o design. De qualquer forma, vamos clicar aqui para criar um novo e vamos salvar esse padrão. E então espere um pouco. Ok, agora, como você pode dizer, eu copio antes. Então, o que eu posso fazer, eu posso simplesmente superar isso. E depois de postar, basta clicar no topo aqui e agora continuar com 200% Como você pode ver agora, eu recebo 100%. Então, agora só precisamos trabalhar um pouco aqui. Então, a primeira coisa é aqui a imagem. Então, vá para o estilo, vamos mudá-lo para imagem em destaque e, em seguida, obteremos todas as demandas em destaque. Vamos para o Cin. E com o Cin, recebemos um texto aqui e, em vez de texto, temos uma coisa aqui. Isso pode ver este. Então, o que podemos fazer? Vamos voltar aqui. Em vez disso, temos dois deles. Então, vamos remover um deles. E vamos manter um deles, O. E aqui, eu gosto de usar Ok, então vai ser nosso ID postal ou postar dano. Ok, vamos com post harm e vamos com categorias. Será uma categoria com ama, se eles tiverem um link, e isso definitivamente tem um link lá. Sim, isso é bom. Além disso, vamos continuar aqui e vamos aumentar esse tamanho para cem pessoas, definitivamente. Hum, vamos. O próximo será pegar dois cervos de cantina Então, sim, podemos aumentá-lo se você quiser, mas não acho que precisemos dele. Ou podemos torná-lo automático se eles tiverem a opção automática. Ok, então eu ganho 100% agora. Então, sim, isso é 100%. Mas eu não acho que precisamos ganhar 100%, em vez de pensar que, se o fizermos, ok, vamos simplesmente tentar fazer este Eu estava pensando que se os fizéssemos online, sim, isso é muito bom. Lux. Isso é bom. Ok, vamos para a próxima. É nosso título. Então vá aqui e clique em Dynamic tag, e esse pode ser o título do nosso host. Vamos para a próxima e essa deve ser nossa postagem. Isente este. Eu quero aqui 20, talvez, não muito. 20, como você pode ver. Ou se você quiser, então você pode atrasar. Digamos 12, quanto custa isso? Vamos ver. Sim, 12 é assim. Vamos com 16 porque eu só quero duas linhas aqui. Eu não quero muito. Quinze é 14, tudo bem Se você quiser aproximá-lo agora, aqui tem uma lacuna, mas se quiser aproximá-lo, basta remover definitivamente o preenchimento Sim, se você puder, o estofamento. Acho que podemos fazer, digamos, preenchimento negativo Podemos adicionar, digamos, a um pixel na parte inferior e superior. Sim, tudo bem. Isso é bom. Ok. Vamos para a próxima. É como se você precisasse mudar seu usuário, basta ligar para lá e obter o nome do autor. Esse é o nome do otão. Vamos novamente para lá. Vamos para a data da postagem que eu quero aqui. Data de postagem. Sim, guia de pós-data Se você clicar e sentir que tem mais opções, você obtém um DFL como este Postagem modificada assim. Então isso é bom. Se for como a postagem modificada , é a mesma coisa que obtemos um C, mas acho que é bom. Então, o que você vai digitar aqui, publicar em. Acho que a forma de publicar. Isso é bom. Vamos para o próximo passo: ter uma imagem. Então, vamos para a imagem. Vá para estilo, e esta deve ser sua imagem de preflexo de matemática. Sim, isso é bom. Tudo parece muito bom. Eu acho que não há necessidade de adicionar nada extra. Então, o que você precisa fazer? Precisamos apenas clicar em cofre aqui, no botão cofre e na manteiga traseira. Então, estará seguro e voltará. Então, sim, agora vai estar pronto, eu acho. Então, o que eu preciso fazer? Eu só preciso copiar e colar essa coisa. Então, o que podemos fazer é literalmente copiar esse loop aqui ou simplesmente colar aqui. Então, se você for para os recursos k, vamos ter um contêiner, depois é um contêiner e, em seguida, vamos ter um contêiner. Ok, como você pode ver, há muitos contêineres lá. Isso é muito chato, eu acho, porque tem muitos contêineres Na maioria das vezes, não são necessários. De qualquer forma, vamos para esses nossos quarteirões. Eu vou dizer que são blocos. Ok, isso é tudo sobre nossa categoria, essa, certo? Essa é a nossa categoria. Então essa deve ser nossa categoria. Isso deveria ser uma categoria. Então, por que estou dando esse nome para que eu possa identificar facilmente o que é o quê? Então eu apenas removo aqui esses blocos. E eu gosto de copiar essa coisa, definitivamente. Ok, então para copiar, o que você pode fazer é simplesmente copiar o loop, Control X, ou eu posso simplesmente arrastar e soltar aqui na seção do bloco e remover aqui, este, OK, então temos um bloco aqui agora. Vai ver. Temos um quarteirão lá. Então, se você quiser fazer qualquer coisa de novo, basta acessar a otimização de edição e clicar no botão Seguro. Em seguida, faremos a edição novamente e poderemos fazer a personalização, como você quiser Basta clicar lá e ir como quiser, basta fazer as alterações, que quiser, basta fazer isso e clicar em Alterações seguras, e tudo será atualizado. Então, vamos ver como ficou. Ok, então está carregando. Ok, então isso é atualização agora. Isso é bom. Agora, o que eu preciso fazer eu preciso adicionar aqui, como esse tipo de categoria. Eu acho que eu quero isso. Então, o que eu posso fazer, eu posso usar aqui esse filtro, definitivamente. Então, se você pesquisar e filtrar, obterá uma taxonomia, como esse filtro de taxonomia, que está Então, o que eu preciso fazer é selecionar um loop, um aqui que criamos recentemente, e agora preciso mostrar aqui uma categoria, que eu possa obter toda essa categoria. Mas pense bem, eu quero isso dentro de uma categoria. Mas o que eu preciso fazer é simplesmente selecionar apenas excluir todos eles em swans Ou posso remover essa categoria, definitivamente, e simplesmente arrastar e soltar aqui esta taxonomia Então, como você pode ver, temos a mesma opção. Ok, isso é muito bom. Se você quiser fazer com que seja do lado esquerdo , acho que tem um lado da vida. Sim, este é o lado esquerdo agora. Então, também precisamos fazer um pouco de estilo aqui. Então vá para o estilo, e agora o que ele pode fazer, ele pode ficar aqui normalmente e podemos adicionar aqui um preenchimento Então, para fazer o preenchimento, o que ele pode fazer, ele pode ir aqui, vamos ver, 24 e 36 Vamos aqui. Eu preciso da cor, definitivamente. É uma cópia. Então vá aqui. Os vídeos dos cantos serão quatro por vez, e isso deve estar na parte superior e inferior. Então, o topo será 24, o inferior será 24 e isso deve ser 32. Isso deve ser 32. Então, o que você pode fazer, definitivamente podemos escolher 20. Sim, 20 entendem. 32 parece demais. Vamos com 24, como é ? Ok, então 24. Ok. Agora, vamos para a cor Bactron Então vá aqui e selecione o sistema. Ok, então, normalmente, eu realmente não quero nenhuma cor de fundo. Eu quero Botero pixel boer, eu quero, definitivamente. Vamos estragar a cor do cabelo. Boer com será de um pixel, como você pode ver. Isso é bom. Ok, então quando as pessoas vão pairar o mouse , o que acontece? Em seguida, mudou. A cor de fundo será alterada para isso. Quando alguém vai pairar, como você pode ver, isso é bom. Não haverá caramanchão, eu acho, se eles pairarem. Normalmente, não acho que precisemos adicionar nenhum bôer. Ok, então vamos fazer com que não seja nenhum. Cor ativa, precisamos adicionar uma cor de fundo semelhante, eu acho. Ok, então isso é bom. Agora isso é muito bom. Ok, então vamos ver o que aconteceu, então eles também têm uma cor se tiverem uma cor normal, então vamos voltar e voltar ao normal. Vamos para a cor, vamos mudar a cor na parte de trás e chamá-la assim. Então isso também é bom. E agora vamos à tipografia e vamos torná-la média, definitivamente Sim. Agora, se você passar um pouco mais de tempo, definitivamente poderá torná-lo mais polido, mais melhor Passe um pouco mais de tempo aqui para torná-lo melhor. Esse será o nome da nossa página. Se você tem alguma coisa sobre o nome do pH, então definitivamente esse deve ser o nome da nossa página. Mas, mas, mas eu não acho que precisamos disso. Não precisamos alterá-la porque a página de bloqueio será apenas uma. Então, eu não acho que precisamos fazer para mudar. Além disso, podemos adicionar aqui o link se você tiver alguma coisa. Então, vamos cortar o blog. Se você tiver alguma coisa, basta adicionar o link, e essa deve ser nossa casa Então, o que podemos fazer é simplesmente adicionar nossa casa, então essa deve ser nossa casa. Sim, acho que é tudo sobre esta página. E também, ok, uma coisa, se você quiser clicar em qualquer uma dessas opções. Ok, então se você clicar em qualquer uma dessas opções aqui, Loop Loop, no lado esquerdo, você terá mais algumas opções e configurações lá. A partir daí, você também pode fazer a personalização. Digamos que você queira adicionar uma paginação, ou você quer adicionar aqui um Cory, qualquer coisa, o que você quiser, você pode fazer isso Então, basta clicar em uma nota do Loop. Então, digamos que você queira alterar essa coluna. No momento, estamos mostrando três colunas. Mas se você quiser aumentar, então você pode fazer isso. Quantas páginas você gostaria de mostrar aqui? Vamos agora ter um seis. Eu aumento, então você pode fazer isso. Também tem mais algumas configurações. Vamos até Cory, e se você quiser incluir ou excluir alguma coisa, você pode fazer isso Filtre aqui. Também tem um pagniano Então, vamos tentar com essa Pregenciana número um e essa página por limite Ok, então isso parece muito maior do que eu esperava. Ok, então só precisamos e eu ouvirei a posição individual, mas tudo bem, vamos fazer um pouco de personalização Vamos até esse ladrilho. Vá aqui a paginação, e eu quero torná-la de 24 pixels, Mt. Eu ainda pareço tão grande. Vamos tornar isso normal. Vamos ver como se parece com 20 pixels. Isso é bom. A cabeça da linha está aqui, então quanta altura eu quero? Então, um contra três. Aqui estão dois. E, novamente, vá até lá e ganhe o spacepeedwin Então, se você vê a dor do espaço, então você pode fazer isso. E aqui está um espaço entre a parte superior. Isso é tudo sobre. E também podemos fazer a cor. Acho que, agora, podemos mudar a cor. Se você tiver alguma coisa, então definitivamente faça as mudanças. E aqui paire a cor e tenha uma cor ativa. Eu esperava que, se eles tivessem uma opção de mudança de fundo, isso deveria ser melhor Ok, tudo bem. Isso não é algo ruim. Isso é muito bom. Acho que está bom o suficiente para ir. Ok, então vamos clicar no herói desta opção publicada. Precisamos aderir a essa condição aqui. Então, por que você gostaria de compartilhar? Por que você gostaria de mostrar esse enredo. Então, eu quero usar a postagem do enredo Archive aqui e mudanças seguras. E vai ser publicado. Ok, agora vamos ver se você tem alguma página de bloqueio. Então, vamos ver primeiro a página de bloqueio. Ok, então, como você pode ver, nós temos isso aqui, isso é agora. E se você clicar nessa opção , ela também está funcionando bem. Então, agora, como você pode ver, obtemos soma extra dessa coisa extra. Então, o que podemos fazer é aumentar aqui o tamanho ou adicionar aqui quatro deles. Acho que se você adicionar quatro deles, isso deve ser bom. Ou se você quiser torná-lo perfeito, então o que você pode fazer é ir aqui nesta categoria e ir para avançar e aqui no lado esquerdo, eu quero usar 24 pixels. O lado direito será o mesmo. Agora vamos para o principal, como o principal, e depois vamos para esse avanço e eu quero alterá-lo para zero. B será zero. Agora eu acho que isso vai ser bom se você quiser torná-los iguais. Mas ainda assim, não parece mesmo que era por causa de, uh, porque , como você pode ver, essa imagem não é por causa da largura da imagem. Então, se você usar aqui uma imagem diferente, acho que isso será corrigido, então você não enfrentará nenhum problema. Então, vamos clicar no botão Salvar alterações. Sim, é isso mesmo. Então, se você usar uma imagem diferente, ela será corrigida ou você pode simplesmente alterar a largura desse contêiner. Portanto, se você apenas alterar a largura do contêiner, definitivamente isso será corrigido. Quer dizer, estou falando sobre o principal contêiner principal aqui, o vermelho. Então, se você apenas mudar aqui, se você apenas fizer as mudanças, digamos, se você apenas aumentar o material, se você apenas diminuir para 72%, então isso pode ser corrigido, eu acho Como temos uma largura longa, é por isso que tem essa aparência. 17. Crie uma única página de postagem de blog: Agora vamos ver como podemos importar uma única postagem do blog. Então, antes de prosseguir, só precisamos fazer uma pequena coisa na página de arquivo do nosso blog. Então, vamos voltar para a página de arquivo do nosso blog, e você precisa clicar aqui com este modelo Ii porque, no momento, o que aconteceu quando eu estava tentando clicar nesse teste ou link, maioria das vezes não está funcionando. Então, só precisamos conectar o link aqui para que, sempre que alguém entrar na página do blog e clicar em qualquer lugar acima, seja muito emocionante estar trabalhando, certo? Então, para fazer isso, precisamos voltar aqui. E antes de tudo, vamos à imagem. Ou você pode tentar com este cartão principal se usar o cartão principal, se usar Advance, desculpe, opções adicionais e, em seguida, obtenha a opção como tag TML, basta transformá-la em Link e, em seguida, simplesmente colar a correspondência Mas no meu caso, vejo que meu lado está quebrado, então não vou usar esse. É por isso que vou até o interior dela. Digamos que eu selecione a imagem e vá para a opção Adicional. E aqui, nessa tag dinâmica, eu gosto de selecionar aqui o post IRL. E o próximo é ir para este título, e eu quero alterá-lo para postagem ARL e esta deve ser a mesma postagem ERL E aqui, a tag deve ser diferente de algo AuthorRL. E essa é a data, mas a data deve ser se eles clicarem, então deve ser PostrlMage eles devem clicar lá, diga aqui Se eles clicarem nisso, então isso deve ser, então vamos para essa âncora e vamos para esse N, e esse deve ser nosso ARL Então, neste caso, também podemos criar esse AuthorRL , mas não acho que seja necessário Além disso, sim, esta deve ser nossa postagem, será uma postagem engraçada ARL. Então, a maioria das pessoas vai clicar lá, então elas vão ler ali mesmo. Além disso, se você quiser, não precisamos fazer individualmente, certo? Você pode simplesmente selecionar um desses conteúdos aqui e acessar esse layout e podemos simplesmente alterá-lo para um link. Não tenho certeza se vai funcionar bem ou não. Então, vamos com este post ERL. Vamos ver se está quebrado, então podemos ignorá-lo, ou se não está quebrado, então vamos usá-lo Então eu tento e agora vamos clicar nessa opção de publicação. Vamos voltar ao nosso site e ver a prévia. Acho que parece quebrado, então podemos usá-lo. Então, o que podemos fazer é voltar ao Con e ir aqui e alterá-lo para o DIF normal Portanto, podemos usar qualquer Stimultag aqui. Mas tudo isso é bom, eu acho. Então, vamos clicar nessa opção de publicação. Na maioria das vezes, não acho que a maioria das pessoas não esteja usando nenhum link aqui neste parágrafo. Mas acho que sim, isso deve ser bom. Muitas pessoas também vão clicar nesse link. Isso é bom. Isso é bom. Então, publique o URL e vamos clicar nessa opção publicada. Vamos voltar e recarregar esta página. Além disso, verifique se o cartão de bloqueio principal está normal. A tecnologia List Mel é normal. Caso contrário, podemos transformá-lo em algum uro. Então, sim, isso é bom. Então, sempre que vou clicar aqui, como você pode ver, parece uma cor diferente. Então, precisamos mudar a cor também. Então, o que podemos fazer essa cor aqui agora e usar esse estilo. E a cor do texto deve ser essa, certo, definitivamente. Hum, isso deveria ser. Mas também precisamos ir para a configuração lateral porque eu realmente quero mudar essa cor para preto normal. Então, o que você pode fazer? Eu posso ir aqui isso vamos para essa tipografia e depois aqui o link e o normal em Link, eu gosto de usar a mesma cor dessa para que, sempre que alguém vá dessa para que, sempre que até Howard , não mude, e essa deve ser a cor preta, três p um. Salve as alterações. Vamos voltar. Então, para adicionar essa página de bloco único, precisamos ir aqui, uma única postagem aqui. Clique em Adicionar novo Este botão. Além disso, vamos voltar ao nosso Figma. Vamos abrir o ICM, conectar e otimizar a cópia, convertê-la e agora é copiar para a área de transferência Vamos voltar, cruzá-lo e simplesmente controlar o que salvamos em um site diferente, melhor. Então, acho que entendemos como está. Então, agora só precisamos adicionar o link. Então, vamos clicar aqui no topo, ir até lá e simplesmente adicionar nosso título, definitivamente. E esse deve ser o nosso bloco, então corte o bloco. E essa deveria ser nossa casa. Então, o que você pode fazer é cortar em casa. Sim, esse deveria ser o nosso título, então corte o título. Sim, essa deve ser nossa largura total. Então são três, então vamos fazer uma largura total ou sim, podemos aumentar. Sim, sim, agora está bom. Agora, vamos para a próxima. É como mudar esse nome para o nome do autor, eu acho. Onde está o nome do autor? Sim, aqui está o nome do autor. E esse deve ser nosso encontro. Então publique em. Então, tudo bem, basta clicar aqui. Essa será a data e a data será a mesma, certo? Clique novamente em tem esse nome e, em seguida, o formato será esse, vá para Avançado e antes será esse. Então agora, sim, bom. Vamos até a imagem , vamos até o estilo e mudemos o estilo para não, esse não é um recurso que você combina. Essa deve ser a imagem do nosso autor. Então, quanto à foto do perfil. Isso é bom. Tudo bem. Então, agora só precisamos adicionar um pouco de trabalho. Digamos que você possa simplesmente adicionar aqui conteúdo da postagem ou simplesmente rastrear e desenhar aqui. Então, quando você vai arrastar e desenhar aqui. Então, uma coisa que você precisa fazer, basta clicar no texto Heather e ir para o estilo, vá aqui esta tipografia, clique no ícone He T plus, uma Então eu vou dizer P Nu, eu vou fazer isso como um estilo, então eu faço isso. E agora vamos seguir esse normal, como postar conteúdo 1, usar a tipografia e selecionar um ser novo Como você pode ver, agora é sentar. Então isso é bem fácil. Portanto, exclua o anterior. Sim, exclua simplesmente o anterior. Este também não é necessário. Este também não é necessário. E aqui, a tesoura, eu gosto de removê-la. Agora, digamos que eu goste de usar o SoSL e aqui está o ícone SoSL como distorção. Então, você pode literalmente usar apenas um desses. Ok, então vamos lá. Este é um ícone de soca Então, podemos adicionar aqui o Sosa, digamos, eu quero usar o drible Vamos ver. Então, sim, isso é um design. Vamos ver. Eu realmente não gosto desse design. Eu quero simplificar, alguma coisa. Esse é outro design. Esse é outro design. Acho que é um pouco mais sub. Sim, isso é bom. Estilo nove. Isso é bom. Então, vamos copiar o ícone do Sosa. Neste Asal, eu gosto de passar por aqui, então simplesmente cole e exclua o anterior Aqui está um. Agora você pode adicionar mais algumas coisas e também fazer a personalização, o quanto quiser Digamos que aumente, então sim, isso é bom. Apenas aumente. Sim. Agora vamos duplicar um desses E eu quero ir, digamos, Facebook. Então, vamos pesquisar no YouTube, duplicá-lo, clique aqui. Facebook. Sim. E aqui está o link. Então, para o link, você pode adicionar aqui principalmente o ARL do post aqui. E vamos para a próxima. É como a do autor. Então, vamos clicar neste e vamos usar o título da postagem. Isso não vai ser um título de postagem. Será o nome do nosso autor e essa deve ser nossa meta ou informação. Então, para a informação, sim, esta é a biografia, então isso é bom. Essa é a correta. Agora, vamos para a imagem, vamos para o estilo e vamos simplesmente adicionar aqui a imagem roxa do autor. Sim, tudo bem. Então, isso é tudo sobre. E também o que podemos fazer, podemos ir para a próxima, e precisamos fazê-las 100%. Agora aqui, 100%. E agora também aqui, precisamos alterá-lo para 80 72 pixels. Vamos para o principal e colocá-los no centro. Definitivamente, coloque-os no centro aqui. Contêiner. Vamos para este. Isso também precisa ser o centro. Isso deve ter 72 pixels. Ou, se quiser, você pode torná-lo com menos 68 pixels aqui. Isso está assustado agora. Além disso, precisamos reduzir o espaçamento. Clique neste, envie uma mensagem de texto, vá para avançar. E, no topo, gosto de torná-los zero. E na parte inferior, eu gosto de usar 40 pixels. Tudo bem. E aqui, como você pode ver, temos um pequeno problema por causa do peso, então vamos transformá-los em cem pessoas. Só essa pessoa. Sim, tudo vai ficar bem. E para a tesoura agora, é algo assim. Ouça agora Cisalhe. Sim, isso é bom. Ok, então isso é tudo sobre a página, como um único bloco. Agora, vamos clicar em uma opção de publicação e adicionar uma condição. Gosto de selecionar a postagem e pode ser tudo. E sim, vamos clicar em Seguro e fechar esse botão. E vamos voltar para uma página em Vilda. Portanto, se você não conseguir ver que não há alterações, basta limpar o cache. Vamos ver se está funcionando bem ou não. Então, vamos esclarecer isso. E agora , como você pode ver, realmente funcionou bem. É exatamente o mesmo que eu era antes. E essa cor , não tem a mesma aparência porque parecia branca, é por isso. Além disso, parece o mesmo link novamente aqui. Então, definitivamente precisamos trabalhar nessa bateria de cisalhamento. Então, o que você precisa fazer? Só precisamos adicionar aqui uma tesoura. Basta dizer tesoura. Então, se obtivermos uma bateria de cisalhamento , você terá três opções Então, vamos remover o anterior. E agora esse é o novo. E agora, como você pode ver, sempre que vou clicar aqui , ele está me redirecionando para Lindy Então isso agora está bom. Então, sim, isso é tudo. E se você quiser adicionar, digamos, mais algumas postagens aqui, digamos que você queira adicionar outra seção com postagem relacionada, então sim, definitivamente podemos fazer isso também. O que você pode fazer, podemos simplesmente adicionar aqui outro texto, basta adicionar aqui o título do texto. Então, basta adicionar aqui e digamos que você goste. Agora vou copiar o loop aqui, loop grid. Basta ir aqui e simplesmente passar por ela. Eu posso ver onde nós literalmente o obtemos aqui. E nesse loop, eu gosto de mostrar apenas três páginas aqui. Nenhuma paginação estará lá. Vai ficar totalmente desligado. Não haverá paginação em todos os três. Se você quiser fazer as alterações dessa fonte , acho que deveria estar em ou até mesmo em F, vou deixar uma string Então, sim, isso é tudo. E agora, se você ver, então sim, isso é bom. Além disso, nesse loop, se você quiser mostrar algo específico , é uma consulta. Você pode incluir essa coisa. Então eu acabei de adicionar aqui TAM ou se você gosta de mostrar ao autor, se esse autor está escrevendo algo diferente, se você quiser mostrar nela, então você pode fazer esse filtro a partir daqui. Então, por enquanto, vou sair. TAM , vamos clicar nessa opção publicada. Vamos voltar e limpar nosso cache. Portanto, se você não estiver instalando Cash Plug em nosso antigo site de imprensa, não precisará limpar o cache. Então, sim, isso é tudo. Então, se eu vou clicar aqui a seguir, esse é outro post, como você pode ver. Este é outro post, como você pode ver Espero que agora você entenda como importar um único bloco e como podemos fazer o mágico personalizado 18. Como exportar seções (somente): Agora vamos ver como podemos importar em uma seção específica. Então, para isso, precisamos selecionar qual seção gostaríamos de inserir em um site, basta selecionar e fazer uma cópia aqui, mais rápido do arquivo e depois abri-lo UikiPlugin como você pode ver, eu já selecionei Vamos abrir, otimizar e copiar, e vamos otimizar esse design aqui e corrigir todo esse problema de que eles estão falando. Então, como você pode ver, esse é o design otimizado que eu já faço. Então, depois de otimizá-lo, você obterá o mesmo arquivo como este OK. Então eu vou selecioná-lo novamente. Vamos ver essa tag de widget aqui. E então precisamos selecionar que isso será um contador. Eu acho que isso é um contra-ataque. Então, vamos selecionar o contador, e o número do anel é esse, então aqui está o número é esse. Então, o número inicial é zero, seletor sou eu, nada, e o prefixo do número, nada estará lá Alguns desses serão de mais de cinco anos, mas só precisamos aderir ao sinal positivo, mas podemos atualizá-lo posteriormente. Isso está feito, e vamos com o próximo, e vamos novamente e agora, novamente, basta remover aqui esse prefixo numérico e isso deve ser 100 mais O número inicial será 100 e tudo bem. Vamos salvá-lo. Dessa forma, basta fazer a atualização e, novamente, selecionar o quadro principal. Vamos voltar e vamos convertê-lo. E como você pode ver, pegamos nossa prancheta de cópias e vamos colá-la no Como você pode ver, temos uma seção específica e agora é só atualizar aqui. Clique nas varetas, e agora aqui, número indi será 100 e isso deve ser mais, mas não é assim Então, vamos remover o sinal positivo. Vamos para o próximo e remover aqui esse 120. E vamos para a próxima, e isso deveria ser, isso deveria estar aqui, definitivamente as porcentagens. Então, sim, agora, como você pode ver, isso é bom, e isso deve ser 120 Então, sim, como você pode ver agora , está totalmente atualizado. Então, o que acontece se você não otimiza o design? Então, se você não estiver otimizando seu design, verá algo assim. Como você pode dizer, texto muito maior do que eu esperava. E isso também é um texto muito maior. Então, se você não otimizar, quero dizer, se você não selecionar aqui seu guia de estilo, poderá ver o mesmo design ou o mesmo estilo aqui. Portanto, certifique-se de que, ao importar um design, você acabou de adicionar esse estilo aqui. Então vai ficar tudo bem com isso, ok? Como neste site, eu já adicionei meu guia de estilo, então é fácil 19. Como fazer e verificar responsivo: Agora vamos ver como podemos tornar nosso site responsivo Então, eu gosto de começar do começo. Então, a primeira coisa que ouço é que quero otimizar o design antes de tudo. Otimizar significa, tipo, eu quero verificar em toda essa camada se está tudo bem, e algumas delas são, na maioria das vezes, desnecessárias. Então, eu gosto de reformulá-los. É por isso que, primeiro de tudo, deixe-me verificá-los. E então eu recebo a entrada no Elementor, depois vou dar uma olhada, ok? Ok, então deixe-me remover aqui esse cabeçalho porque eu já estou no cabeçalho, então não precisamos dele. Mas não precisamos do rodapé. Também não precisamos que esta seção de depoimentos já a tenha Também não precisamos dessa seção. Mas vamos importar novamente. Não tem problema. Então, verificar as camadas significa, quero dizer, verificar as camadas. Como se houvesse um contêiner extra, por exemplo, digamos que, como você pode ver lá, isso não seja necessário. Remova-o. Isso meio que não é visível. Então, remova-o. Como você pode ver aqui, tenho uma moldura, mas isso geralmente não é necessário porque eu já tenho uma moldura. Então, à esquerda e à direita há um logotipo neste , isso é bom E vamos aqui novamente. E esta seção cria o título Enter. No início, eles têm um grupo. Ok, isso é bom. Vamos para a próxima. Os três. Isso é bom. Dentro dele, tenha um contêiner para o conteúdo, e isso é mili para imagem Então, podemos dizer que isso é imagem. Vamos entrar nela. Isso não é necessário. Isso é para categorias, isso é bom. Isso é preciso. E isso é para quê? Ok, este é o ts. Ok, isso é para o botão. Isso é bom. Ok, isso é bom. Vamos para o próximo, remova-o. OK. Deixe-me ir para o próximo. Então, como você pode ver, acabei de colocar o mesmo design aqui. Outra coisa aqui, eu só preciso atualizar o peso. Como você pode ver, essa erva não está consertada, então eu preciso consertá-la. Também sobre essa erva daninha precisa ser corrigida. Também sobre esse padrão. Só precisamos corrigi-lo, alterar a cor de fundo e alterar a posição do ícone. Então eu acho que vai ser consertado. Além disso, precisamos mudar esse botão na frente, porque no Figma, se olharmos para isso, esse mesmo botão, eu só preciso fazer algumas pequenas mudanças Se fizermos com que seja médio , acho que vai ficar bonito. Ok, vamos atualizá-lo. Agora, como você pode ver, acabei de atualizar tudo isso, e agora, se você observar com cuidado, isso deveria ser um carrossel, mas agora parece uma imagem normal Então, o que você não fez? Precisamos adicionar um carrossel aqui. Então, como você pode ver, é nosso slide, é nosso carrossel de imagens Então, vamos tentar com um carrossel de imagens, em primeiro lugar, porque isso deve ser um Ok, agora precisamos adicionar aqui a imagem. Clique em Adicionar imagens. Vamos ver se eles carregam as imagens aqui. Ok, então eles não reproduziram as imagens. Então, o que você precisa fazer é voltar e explorar essas imagens, e então vamos fazer isso. Ok, então deixe-me exportar todos eles. Deixe-me primeiro mudar o nome da imagem, selecionar todas elas, e isso deve estar aqui , imagens pequenas, o número estará lá. Ok, agora está tudo bem. E agora eu preciso exportar todos eles no Swans Tudo bem, então você entendeu. Agora eu preciso fazer o upload das imagens aqui no meu qual preço. Enquanto isso, se você realmente quiser, basta compactar as imagens para que tenham o mesmo tamanho, mas a qualidade seja a mesma e carreguem mais rápido Então, o que você pode fazer é simplesmente selecionar toda a imagem aqui e, no pequenino PinGio, você pode usar qualquer outro software para compressão gratuita de imagens, o mesmo OK. Então, como você pode ver, todos eles estão compactados agora, então baixe todos eles novamente. Acho que terminamos agora, e vamos fazer a capacidade de resposta. Então, para a capacidade de resposta, vamos verificar primeiro o tablet, e o tablet parece muito bom, como eu posso ver É bonito, isso é bom, certo? Porque antes de montarmos o estilo cat, é por isso que ele parece tão bom. Então, o que podemos fazer? Podemos aumentar a umidade, a primeira coisa que podemos fazer. Então, vamos lá e vamos aumentar a umidade e sim, isso é bom. Eu acho que isso é bom o suficiente. Essa imagem parece tão grande. Vamos reduzir o tamanho. Então, para o tablet, eu gosto de fazer três lá em cima, apenas três. Isso é bom. Acho que está tudo certo Isso é bom. Mas parecia muito acolchoado lá. O que você pode fazer? Podemos simplesmente remover o acolchoamento da parte superior. Isso é bom. Alinhe e remova o estofamento da parte superior E aqui, o que podemos fazer, podemos simplesmente adicionar um pouco mais do que está lá. Sim, vamos ver a porcentagem e vamos ler muito mais. Como duas linhas, isso é bom. Acesse aqui essas tomadas, e sim, isso é bom. Vamos fazê-los do lado esquerdo. Definitivamente. Aqui está uma opção do lado esquerdo. E isso parece tão estranho. Então, vamos remover essa coisa. Deveríamos estar na fila, ou sim, na linha será muito mais Então, vamos fazer com que seja de 98 pixels. Mas se você olhar com cuidado, sim, ocupando um espaço na parte superior e inferior, vamos tentar removê-los rapidamente. Então eu acho que vejo, está chegando uma mensagem para a pessoa visível. Então eu vou até o texto e o removo, e agora está corrigido. Ok, agora é hora de ficar aqui, e isso também é bom. Aqui, o que você pode fazer? Você pode simplesmente mudar a imagem. Sim. Parece bom. Eu acho. Isso não é algo ruim. Isso é bom. Podemos mudar essa imagem com, então estará pronto. Dez, isso deve ficar bem. Isso deve ficar bem. Só precisa aumentar o peso aqui. Então, se não conseguirmos descobrir, basta abrir aqui essa estrutura. Clique para onde você vai e, automaticamente , haverá uma redragão lá E agora eu gosto de aumentar o peso. Então, é 100%. E essa é a principal delas duas. Então, torne-os 100% Sim, por cento. Isso é bom. Sim. Isso é bom. Ned, só precisamos fazer a mesma coisa na próxima. Então vai ser uma solução, eu acho. Ok, agora vamos para o celular e o celular, como vou dizer, já está bom. E isso também é bom. Isso é bom. Mas eu realmente quero esses dois, 50 50. Então, o que você pode fazer? Vá para dias pessoais e faça-os 100%. Mas para este, individual, eu gosto de torná-los 50%. Ok, isso deve ser 100%. Mas por dentro, isso deve ser 50% e o próximo deve ser 50%. Isso é meio bom. Como você pode ver agora , também foi corrigido. Aqui, isso também é bom. Preciso alterar definitivamente a largura da imagem. Isso é bom. Sim, acho que tudo isso é bom. Então, a propósito, você pode atualizar o próximo. E aqui, eu gosto de fazer 100% de certeza. Mas vamos para o estofamento. Aqui, só precisa remover um pouco de acolchoamento e marcha Você pode ver como isso tem um lado direito, tem um, mas eu realmente não preciso de 20. Acho que 16 seria melhor. Então, dessa forma, você também pode atualizar o próximo, certo? Você pode atualizar o próximo, definitivamente. E também aqui, se você quiser , pode mudar a coisa. Se você vai para isso significa um, contente um. E se você mudar a direção para algo assim, ok, isso deve ser o mesmo. Isso deve ser o mesmo. como estudo, estou falando sobre o principal. Vamos até a coluna e eu gosto de mudar a direção. Portanto, essa imagem deve vir no topo e depois ter conteúdo, então isso é bom. Então, dessa forma, você pode fazer a capacidade de resposta. E como você pode ver, isso não é algo muito difícil e é fácil. Além disso, se você quiser fazer essas alterações no título, vamos ao título e ao estilo. E, como eu considero agora, estamos usando H um. Então, o que você pode fazer? Em primeiro lugar, podemos ver o quanto cabe aqui. Então, como você pode ver, é adequado com 25 pixels. Agora, o que você pode fazer, podemos ir para essa fonte H novamente e ir para essa fonte global gerenciada aqui, e vemos a fonte H no celular, deveria ser 25, certo? Então, o que você pode fazer, podemos ir até 25, e agora parece muito bom, certo? Isso é bom. Então, vamos dizer as mudanças e voltar novamente. E agora, em todos os lugares, onde quer que usemos o H one, ele será alterado para 25 pixels. Então, sim, isso é tudo. Espero que você entenda 20. Se o plugin uichemy falhar, então como resolvê-lo: Agora vou compartilhar com vocês que, se o plug-in do UICB estiver quebrado ou algo como pendurar em um navegador , o que ele pode fazer ou como pode simplesmente importar o design Portanto, não é muito difícil de fazer. Então, quando eu estava tentando importar o design pela primeira vez, parecia que estava quebrado. Deixe-me compartilhar novamente se está quebrado ou não. Eu não acho que vai ser quebrado novamente porque eu faço um pouco até minha audição aqui, porque está demorando um pouco Então, não tenho certeza se vai quebrar ou não, então vamos esperar. Tudo bem, como você pode ver, esta página parece não responder Ok, então você quer esperar ou quer sair desta página? Então, se você quiser esperar, pode esperar definitivamente. Mas acho que eles vão te dar a mesma mensagem de que não responde De qualquer forma, então o que eu posso fazer, eu posso simplesmente atravessá-la. Como você pode ver agora, a cruz não está funcionando. Então, vamos recarregar esta página agora mesmo. Então, estou apenas recarregando esta página para poder começar do início Então, agora precisamos fazer isso, só precisamos dividir esta página. Como no EIMEPugin temos um modo de cópia e pasta, não precisamos nos preocupar com isso, não precisamos nos preocupar com isso Então, o que você pode fazer, podemos simplesmente dividi-lo em algumas seções. Por exemplo, digamos que eu gostaria de inserir aqui essa seção zero no FAS, depois esta seção, e essa é essa seção. Então, vai ser muito mais fácil, certo? Então, primeiro de tudo, vamos escolher a seção zero. E agora vamos até aqui e vamos otimizá-lo, e então vamos convertê-lo como você pode ver, entendemos agora. Sua prancheta. Agora podemos ir para Elementor E agora podemos simplesmente colá-lo aqui. Então, como você pode ver, ele será adicionado. E, novamente, vá para a próxima, vá até lá e selecione a próxima seção, como a seção de confiança desta, copie-a. E como você pode ver, agora está copiando para a prancheta. À medida que obtemos esta seção aqui. Agora, cole-o novamente. Então, agora, como você pode ver , está caindo, certo? Então, se você perceber que seu plug-in C está quebrado ou não está funcionando, basta recarregá-lo e dividi-lo em algumas seções e, em seguida, importar dessa forma, espero que funcione Se você enfrentar qualquer outro problema sobre o UIC, basta ir ao nosso grupo, como o par Az Este é um grupo IRL, como você pode ver, junte-se a esse grupo e compartilhe seu problema. Eu estarei lá para ajudar. 21. A colagem do Uichemy Copy não está funcionando: Eu sei que muitas pessoas enfrentam o mesmo problema, algo como o modo de cópia não estar funcionando no UIKE Como você conserta isso, certo? Então, neste vídeo, vou mostrar como podemos fazer. Ok, então digamos que, em primeiro lugar, eu vou inserir aqui esta seção. Esse é o menino pequeno. Então, vamos otimizá-lo e apenas convertê-lo. E agora é minha cópia para prancheta. E vamos voltar ao nosso elementor e agora clicar no botão Mouse Wright, e então você precisa selecionar sua peça do outro lado Clique lá. Então, como você pode ver lá dizendo para juntar os elementos, seu lado, quero dizer, outro lado, você só precisa pressionar Control V ou Command V. Agora pressione Control V ou Command V. Então, como você pode ver, temos a mesma coisa aqui. Mas agora, se você simplesmente entrar aqui e curtir, clicar nessa pasta, essa pasta não funcionaria. Então, se você pressionar Control V, não vai funcionar. Então, o que você não fez? Você precisa clicar aqui, pressionar do outro lado e, em seguida, pressionar Control V. Então tudo funcionará. Está bem? Então, espero que seu copiar/colar não esteja funcionando, o problema está resolvido. 22. Figma para Gutenberg via Gutenberg Core, Spectra, Gerar blocos, Kadence: Agora vamos ver como podemos importar nosso design Figma para o Genbak Então, primeiro, você precisa usar esse ARL como v.com slash E se você já tem uma conta e uma chave de licença, tudo bem. Mas se você não tiver, basta ir até aqui, rolar um pouco para baixo e, em seguida, você terá aqui a opção de começar de graça. Mas aqui, você precisa selecionar o que você quer. No meu caso, digamos, eu gosto de usar Gutenberg, então eu seleciono Gutenberg, vou E então eles podem ler uma página de checkout e você só precisa colocar suas informações, criar uma conta e obter uma licença Então, eu já tenho uma conta, então não vou criar uma nova conta, então deixe-me fazer login novamente. Tudo bem, como você pode ver, nosso pedido é executado com sucesso, e aqui está a chave que mais procuramos Então, agora precisamos copiar aqui essa chave real, e se você rolar para baixo, eles mostrarão esse processo. Se você tiver alguma confusão, por exemplo, como podemos instalar o YKMEPlugin, como podemos nos conectar com o que, tudo isso, eles estão ensinando no bloco Então eu copio a chave de licença. Vamos para a FICMA e vamos simplesmente passar aqui essa Y Cami como ativar uma, só isso Ok, agora está ativado agora. Vamos ver esta fortaleza, como usá-la porque vou mostrar como usá-la agora. E então, como você pode ver, temos a mesma opção que você viu antes, a mesma coisa. Optimism convert e ExpasKat e aqui temos algumas opções Agora, temos os próximos blocos lá. E no futuro, Spectra Git blocks, Caden, e eu vamos construir um site com isso Então, agora, primeiro de tudo, vamos selecionar este. Por exemplo, selecione a seção que você deseja importar e Gutenberg E então você precisa clicar em otimizar e Canva neste botão E agora você precisa otimizar o design. Então, vamos clicar nesse primeiro. E vamos à primeira coisa, e eles estão falando sobre como resolver esse problema. E antes de compartilhar com vocês por que isso é necessário, esse é o próximo que também precisamos corrigir. E esta é a última, como imagens. E se você olhar com cuidado, essas quatro imagens são diferentes. Eles são indivíduos. Mas se eu bloquear agora, se eu só quiser consertá-la , elas serão uma única imagem que eu geralmente não quero porque são quatro imagens diferentes e, mais tarde, se eu precisar fazer qualquer slide ou carrossel, eu posso fazer isso Mas se eu agora bloqueá-lo , não será possível mais tarde. Porque essa camada de bloqueio, como é pequena, funciona. Então, se você tiver uma camada múltipla dessa vez, digamos que, se você for para esta, ela tem várias camadas agora. E se você vai apenas bloqueá-lo , eles estarão em um arquivo, certo? E eles vão fazer isso em um arquivo lá dentro. É por isso que acabamos de fazer um registro. Então, por enquanto, vou colocá-lo em ASR. Então, agora, vá para o Nix, então eu vou cruzar no ampliador e agora eles estão verificando outras Em seguida, ele tem um mapa de resultados e o HipPams é algo como se você simplesmente o anotasse, então você pode ver onde você tem elementos Então, sim, é HVZ ou também tem e também tem imagens Então, sim, tudo isso está correto. Então, vamos clicar em Marcar como concluído. E eles estão verificando alguns outros. E uma coisa interessante a cada vez, você notará mais do que eles estão adicionando um vídeo Então, digamos que, se você não entendeu nada específico , gostaria de ver mais detalhes , basta clicar aqui neste vídeo ver com mais detalhes. Ok, agora estamos falando sobre ativar o conteúdo do clipe. OK. Então, agora vamos ver de qual deles eles estão falando. Para este, eles gostam ativar o conteúdo do clipe ou quadros transbordantes. Então, ok, vamos consertar. E se você não entende o que é isso, basta clicar em um vídeo e entender mais. Está bem? OK. Agora role para baixo e eles estão pegando um pouco mais. Ok, então remova as propriedades do mainframe, então vamos até o herói, e eles estão falando sobre removê-las, mas se o fizermos, talvez ele seja quebrado Ok, o que podemos fazer? Nós podemos fazer uma coisa. Agora podemos fazer um backup. Então, vamos simplesmente para Alta. Sim. Se não for, então, por enquanto, podemos deixar isso, ou o que você pode fazer? Podemos, digamos, consertá-lo. Então, como você pode ver, em centímetros eu posso consertá-lo. Parece bom, mas se você olhar para esse acolchoamento, tipo, do lado esquerdo e do lado direito, ele está quase removido Então está tudo bem. Eu acho que não é alguma coisa. Está tudo bem. Mas se você quiser adicionar o preenchimento , pode fazer isso a partir daqui, ok? Tudo bem. Então, agora vamos ver se e voltar. E então você tem uma tag de bloco, título, botão, vídeo, bloqueio, imagens avançadas, caixa de informações e mais alguns widgets lá ou bloco Vamos voltar e vamos para o gerente responsivo. E acho que falamos sobre detalhes, certo? Então, precisamos explicar novamente. E aqui está uma configuração de conversão. Vamos para a opção Converter e, em seguida, você obtém duas opções, uma é como a entrada ao vivo dos modos de cópia que, é como a entrada ao vivo dos modos de cópia em sua maioria, eles recomendaram. Mas eu gosto de usar esse modo de cópia porque é muito mais fácil. Ok, então vá com esse modo de cópia. Eu meio que clico aqui na cópia. E como você pode ver, eu recebo uma cópia aqui, basta copiá-la. Vamos voltar. E agora precisamos instalar algum plug-in. Então, vamos aqui no novo botão aqui. E agora só precisamos adicionar o Nextureblock. É algo como o próximo, depois ER. Só isso. Em seguida, bloqueie. Então você precisa instalar aqui este plugue no Mali, nextorblog what Presquenburg, plugue com mais de mil estrelas templo At, então basta instalar e ativar então basta instalar Basta clicar aqui. Instale agora e clique em ativar é isso mesmo. Em seguida, ele vai ativá-lo. Além disso, você pode instalar aqui esta próxima extensão, esta. Além disso, você pode instalar aqui a tonelada adicional por elemento, este também. Vou reinstalá-lo. Você pode instalá-lo ou deixá-lo, mas vejo que eles têm algum widget OK. Tudo bem. Então, instalamos todos eles. Além disso, se você acessar aqui o tema, precisamos instalar o tema deles. Caso contrário, você verá que o design está meio quebrado. Então vá aqui o tema, e agora você precisa clicar aqui na parte superior, adicionar um novo tema na parte superior. Em seguida, você precisa pesquisar a mesma coisa a seguir. Então, primeiro, digite next, depois ER, pesquise. E então você obterá esse tema como este, com detalhes e pré-visualização. Então esse é o tema de que estou falando, e esse tema vem de posy met like this, POSI MY TH, this one POSI MY TH, this Eu já instalo e ativo esse tema. Ok, agora está feito. Além disso, uma coisa, deixe-me compartilhar com você na última palestra anterior, acho que vou compartilhar com você Vamos para a opção de personalização aqui na parte superior. E então você precisa ir aqui esta opção geral. Então vamos para o recipiente e , em seguida, basta remover essa cabeça em toda a largura, torná-la toda a largura, toda a largura, fluido corporal, tudo, enchê-la com, então vamos torná-la zero Então você pode literalmente importar o que quiser, e ele estará cheio, ok, para que você possa facilmente, quero dizer, terá o mesmo design do seu Figma Então, se você apenas ganhar peso. OK. Agora, vamos voltar ao design. OK. Então, agora vamos voltar porque você já instalou todo esse tema e está pronto. Tudo isso será instalado. E agora precisamos clicar aqui na nova página aqui, no lado esquerdo, clicar neste botão. E agora, aqui no texto, só precisamos pressionar Control V, pressionar Control V. E, como você pode ver, superamos tudo isso, tudo o que temos agora aqui. Então, se você vai colocá-lo no nome desta página, então você pode dizer que esta é a nossa casa. Digamos que em casa cinco. Posso simplesmente clicar aqui neste botão publicado para ver o design ou podemos ver o PV No entanto, não precisamos publicar. E se você observar cuidadosamente que esses designs parecem exatamente iguais, mas apenas essas duas imagens parecem recortadas por causa do design, e podemos importá-las manualmente, sem problemas. Esta tem exatamente a mesma aparência, mas não parece, porque se você olhar para essa erva daninha, ela é colocada em uma erva daninha lá. Mas em nosso design, não colocamos nenhuma erva daninha. Então, o que você pode fazer é literalmente gostar dessa coisa, e podemos simplesmente colocar uma erva daninha lá. Então será o mesmo que está, como queremos, certo, ou como era antes. Então, se você olhar com cuidado, esse botão não tem a mesma aparência. Acho que parece um problema com maconha. Então, podemos corrigir essa largura porque no elemento anterior, obtemos a mesma coisa, certo? Então clique em um botão e mude essa erva daninha para dizer, quanto parecia perfeito 48 47, 45. Vamos clicar aqui nesta opção de pré-visualização e seguir com este toque de pré-visualização. Ok, agora está entrando na prévia. Eu sei que, como você pode ver, isso parece muito bom, certo? Agora está bom. Então, agora podemos apenas fazer a atualização. É algo como se você não precisasse publicar o design, se você não acha que isso é bom, certo? Você pode ver a prévia. Então, se você se sentir bem, tudo basta inserir o design salvá-lo ou publicá-lo. E então vá para este tablet e este tablet, você pode definitivamente atualizá-lo. Você pode mudar isso. Digamos que aqui tenha uma largura. Você pode simplesmente aumentar a largura aqui. Também podemos aumentar a largura desse padrão. Além disso, você pode acessar esta versão móvel. Você também pode atualizar virtualmente o botão. Se você vai a este blog, então definitivamente você pode fazer. Basta clicar nele e aumentar a largura do botão dessa forma. Você pode fazer. Além disso, se você clicar aqui nesta opção de camada, poderá ver automóveis Este é o contêiner, esse é o parágrafo do contêiner, em todo o caso, você pode literalmente fazer a Madison personalizada da melhor maneira que quiser Como você pode ver, isso é muito seguro. Esse é o contêiner. Precisamos torná-lo pesado e móvel, para que tenha uma boa aparência. Estas são as imagens abaixo, então você precisa adicionar seu carrossel Então, isso não é algo tão interessante, eu acho, e é fácil fazer magia personalizada com Gutenberg Se você quiser retirar os blocos, que eu acho, basta clicar neste ícone de adição, então você terá todo esse bloco lá, e você pode simplesmente usá-lo para criar seu site. E isso é tudo de Freak Pay Gutenberg. E se você tiver alguma dúvida, me avise em nosso grupo aqui, como facebook.com slash Aqui está esse. Esse é o grupo. Então, basta entrar lá e fazer a pergunta. Além disso, se você quiser ver um vídeo detalhado, como uma página inteira, vou converter usando Gutenberg, basta me avisar e agrupar, e vou adicionar um vídeo diferente sobre isso e adicionar o mesmo curso Ok, só me avise. Muito obrigada. 23. Figma para Bricks Builder: Agora vamos ver como podemos importar nosso design Figma para quebrar soletros Então, para isso, primeiro de tudo, precisamos acessar este link m.com slash UI CeMei aqui e, em seguida, rolar para baixo até Então você terá essa opção aqui. Como você pode ver, tem elementor, não pode ser tabuleiro e depois alguns tijolos Então clique aqui nesse do Bicks, e vamos clicar nesse início de graça, nesse padrão Então você precisa criar uma conta aqui. Então, eu já tenho uma conta e já faço login lá. É por isso que consigo ver meu e-mail e meu primeiro nome, sobrenome. Então, vamos clicar em baixar gratuitamente este botão. Tudo bem, como você pode ver, recebo aqui a chave de licença, e isso será necessário quando eu otimizar meu design no Figma Então, vamos copiá-lo. Em primeiro lugar, vamos voltar ao nosso design Figma E no Figma design, você pode literalmente importar um design completo a partir daqui ou pode simplesmente importar em uma seção específica Então, no meu caso, agora, eu gosto de escolher uma seção específica, mas no seu caso, você pode importar um design completo. Então, vamos selecionar o design. Podemos aqui essa opção, esse botão como ação. Em seguida, acesse aqui estes plug-ins e agora pesquise seu UIKi. Então, quando você pesquisa I Cai, você obtém mais alguns plug-ins da empresa. Um é como Figma to Greenberg, Figma Elementor. Por fim, tenha um Figma to Breakpage Builder. Basta clicar lá, e então precisamos clicar aqui neste botão Executar. E primeiro de tudo, eles estão pedindo para ativar esse plugin. Então, vamos clicar em Pset Activate. E agora precisamos colar aqui a chave serial que obtivemos recentemente daqui. Então, basta colar e clicar nesta opção Ativar. E agora vamos clicar em Ignorar. Também pule isso. E é o mesmo do plug-in anterior, certo? É meio que a mesma coisa. Ok, então vamos com esta seção. Como você pode ver, eu tenho agora 50 conversões no momento. Ok, então vamos clicar aqui neste Otimizar e confiar nesse botão E aí precisamos otimizar nosso design, para que você possa literalmente otimizar. Portanto, esse design já está otimizado porque no vídeo anterior, eu uso a mesma seção. Portanto, esse design já está otimizado, basta marcar como a. Uma coisa interessante é que toda vez que você recebe um vídeo. Então, se você não entende o que é isso e por que precisamos fazer isso, basta clicar no vídeo ver o vídeo. Agora, clique em C e volte, depois são elementos ou tag. Como você pode ver, ele tem muitos elementos de widget, tag ou blog, o que quer que você diga. Tudo está lá. Então, você pode usá-lo especificamente, como o que você faz no elemento ou eu não vou entrar em detalhes. Se você quiser ver mais detalhes, deixe-me conhecer nosso grupo. No último vídeo, compartilho com vocês o grupo ERL Vamos até o grupo e me pergunte uma coisa específica: O que você gosta de aprender Em seguida, adicionarei esse módulo neste curso. Está bem? Agora, vamos clicar nesse tipo de adaptação. E como você pode ver , são duas opções, como baixar Jasen e essa entrada ao vivo Portanto, é recomendável que eles usem principalmente um de entrada. Então, se você escolher o específico, acho que podemos usar o JSON Acho que vai ser muito mais fácil. Então, vamos clicar nessa opção de download. E se você estiver apenas exportando qualquer apresentação específica, use essa entrada ao vivo Então, quando você usa informações ao vivo, precisa selecionar e adicionar seu site. Então, vamos adicionar o botão lateral e, em seguida, precisamos adicionar aqui o URL e o token. Então, para isso, precisamos acessar nosso site da What Press e instalar o plug-in. UIC basta acessar o plug-in Satn e pesquisar aqui, UIKemi, simplesmente pesquisar a mesma coisa como FICMA E após a ativação, você receberá um botão do lado esquerdo como o EY CME, basta clicar nele E então você precisa selecionar o Page Builder que ele deseja. No meu caso, eu gosto de usar o Bricks Builder. Então selecione tijolos, clique em próximo, próximo, próximo, próximo. E então precisamos ativar este, fazer o upload , em seguida, e clicar aqui nesta opção de finalização. Então, toda vez que você define um bit, precisa definir qual construtor de páginas você gostaria usar. Apenas faça isso. Mas se você não fizer isso, se ignorar ou usar apenas vários Page Builder , não há problema. Está tudo bem. Tudo bem. Então, agora, role um pouco para baixo. Ok, vamos para a opção de configuração aqui. Tenha a configuração. Além disso, se você for aqui para este IKE, eu recebo um EO lá, mas isso não é para Brick Spiller Se você clicar neste tijolo Spiller, então está tudo bem Elementor, se você vai usar o elementor, então você precisa instalar a coisa de ativação com este un Brek Mas, por enquanto, vamos usar apenas um lançador de tijolos. Então, vamos para a configuração. E precisamos copiar aqui o ERA lateral, vamos voltar para Fick Margin, pagar aqui o ERAP E agora vamos empacotar novamente e copiar o site como se fosse um segurança falando, aqui e conectá-lo E então é a mesma coisa, como elemento ou metade. Precisamos selecionar o que você deseja. Vamos escolher uma página ou modelo, o que você quiser, você pode usar. Então, por enquanto, vou seguir esta página. Vamos para a próxima, I portal. Clique aqui na seta aqui neste botão. Então, como você pode ver, é um caminhão nesta página. Vamos clicar nele com tijolos, neste botão. E essa aparência é exatamente a mesma. Mas essas duas imagens parecem quebradas porque, no design, elas estavam quebradas. Vamos escolher a opção, e agora podemos literalmente fazer isso. Podemos simplesmente trocar essa erva daninha e depois ela se consertará E essa é a estrutura. E se você for até esse ladrilho, poderá alterar essa largura porque agora, o que aconteceu, se você ver essa prévia no front-end, posso dizer que olhe ao longo da largura, certo? Por causa do momento, vamos com 100%. Mas se você reduzir um pouco, digamos, 90 ou 80% ou 85%, isso deve parecer o mesmo. Então, isso é totalmente com a maconha. Então, se você quiser obter exatamente 100% de design, então você precisa jogar com essa porcentagem como a erva daninha, então o design será exatamente o mesmo que é. E uma coisa, se você olhar esse design agora, essa imagem parece totalmente estática, certo? Isso parece totalmente lítico Então, porque não selecionamos nenhum tipo de bloco sem design ou qualquer tipo de anexo sem design. É por isso que parece uma imagem antática. Mas se você precisar de algo dinâmico, se quiser, definitivamente precisará otimizar o design aqui. Então, vamos otimizar os elementos e a tag. Aqui, você realmente deve selecioná-lo. Por exemplo, eu gosto de usar esse carrossel. Então, eu posso literalmente selecionar esse carrossel aqui. Então, vamos ver esse carrossel. Eu ia dizer que posso selecionar um carrossel e quantos carrossel eu gostaria Digamos que eu goste de usar esses quatro ou cinco, posso literalmente salvá-los. Então, agora, sempre que eu puder importar esse design, essas imagens não serão como a imagem estática normal. Vai ser um carrossel. Ele reage como um carrossel e temos mais algumas opções extras, como elemento ou metade Isso é tudo sobre a maconha, então só precisamos brincar com a maconha. É isso aí, então vai ser consertado. E é um modo tablet, a mesma coisa, e também tem um celular e o celular tem a mesma coisa. Então, só precisamos mudar essa erva daninha, então acho que vai ser consertada. Como você pode ver, quero apenas aumentar a largura, e parece muito bom, como você pode ver. Portanto, é um problema total com a largura, então só precisamos redimensionar a largura e nosso design estará pronto Então, sim, novamente, se você tiver alguma dúvida, deixe-me conhecer um grupo. Eu definitivamente vou te responder. Além disso, se precisar de mais vídeos sobre o Brick Builder ou o mentor de Gottenberg, qualquer momento específico, se você quiser aprender, só me avisar Vou fazer mais vídeos e adicionar neste curso. Obrigado por assistir. 24. Última considerações: Muito obrigado por assistir a este curso completo. Agora é sua vez de mostrar seu feedback ou escrever ideias. Basta fazer um comentário, seja qual for a sua opinião sobre este curso. Se você não gostar, tudo bem. Basta fazer um comentário. Estou feliz com isso, se você não gostar, e se gostar , basta fazer um comentário. Além disso, se você quiser ver mais detalhes sobre algo específico, digamos sobre Guttenberg ou Biggs ou Elementary, se você quiser ver algum design de página específico ou design de site específico , basta me avisar nos comentários em uma postagem em grupo, ou você pode até mesmo me enviar um ou você pode Apenas me avise. Com certeza vou fazer o vídeo e simplesmente adicioná-lo ao mesmo curso e também notificá-lo para que você possa assisti-lo e ele resolver o problema ou até mesmo aprender as coisas. Além disso, se você tiver algum problema, digamos que esteja tentando resolver, mas não está resolvendo, basta postar em um grupo, eu estarei lá para apoiar. 25. Avaliação: Parabéns. Você concluiu o curso com sucesso. Agora é hora de enviar seu projeto. Para o projeto, você pode escolher qualquer tipo de design, mas precisa convertê-lo no WordPress e usar qualquer construtor de páginas para converter o design Figma em Wordpress, pode ser elementor, Gutenberg, construtor de tijolos, qualquer coisa que você converter o design Figma em Wordpress, pode ser elementor, Gutenberg, construtor de tijolos, Mas certifique-se de que o design seja 100% responsivo para todos os dispositivos Então, quando você faz um design feito no WordPress, basta clicar aqui neste projeto de envio, nesse botão. Em seguida, toque aqui no título do seu projeto. Além disso, basta escrever a descrição do projeto, como o que você fez aqui, como você faz, escreva um pouco. Em seguida, basta escolher aqui outros links e, em seguida, adicionar aqui o link do site WordPress aqui, adicioná-lo e depois publicar. E se você ver aqui esta instrução do projeto , você receberá este link. Se você vai clicar aqui na comunidade Figma tit DVI Coloque todo esse link lá, basta escolher um desses que você se sinta fácil Basta ir até lá e escolher o design e converter na prensa Wt. Você tem alguma dúvida ou confusão, basta ir a esta discussão e escrever seu comentário ou