Um breve hist\u00f3rico da cria\u00e7\u00e3o de design e layout no WordPress<\/h2>\n
Conhecer a evolu\u00e7\u00e3o do design de sites e layouts no WordPress \u00e9 essencial para compreender a import\u00e2ncia do FSE. A principal ferramenta, central para o ponto em que estamos agora, \u00e9 o Editor Cl\u00e1ssico<\/a>.<\/p>\n \u00c9 claro que esse editor nem sempre foi considerado “cl\u00e1ssico”. Ele sempre foi o Editor TinyMCE \u2014 o padr\u00e3o desde a primeira vers\u00e3o do WordPress at\u00e9 por volta de 2018. \u00c9 um editor de texto simples do tipo O Que Voc\u00ea V\u00ea \u00c9 O Que Voc\u00ea Obt\u00e9m (WYSIWYG) que permite inserir conte\u00fado e HTML b\u00e1sico, juntamente com alguns estilos de formata\u00e7\u00e3o. Na verdade, voc\u00ea ainda pode obter o Editor TinyMCE<\/a>, pois ele \u00e9 uma ferramenta comercial:<\/p>\n As principais desvantagens do Editor TinyMCE s\u00e3o a falta de op\u00e7\u00f5es de visualiza\u00e7\u00e3o de frontend e menos flexibilidade do que voc\u00ea gostaria. Os frameworks de temas se tornaram uma alternativa vi\u00e1vel e poderosa. Obviamente, o Genesis Framework<\/a> do StudioPress ainda est\u00e1 conosco, mas havia alguns outros, como o Thesis<\/a>.<\/p>\n Aqui voc\u00ea pode ver como passamos da edi\u00e7\u00e3o de texto para web design visual. O framework oferece op\u00e7\u00f5es no backend do WordPress, o que permite alterar aspectos do frontend. Al\u00e9m disso, voc\u00ea obt\u00e9m mais funcionalidades “bare metal” para fazer outras altera\u00e7\u00f5es, como hooks e filtros<\/a>, suporte a templates<\/a>, e outras.<\/p>\n No entanto, isso ainda n\u00e3o era muito acess\u00edvel para o usu\u00e1rio padr\u00e3o, e foi a\u00ed que plugins de construtores de p\u00e1ginas<\/a> se tornaram populares. Voc\u00ea os usaria junto com o TinyMCE\/Editor Classico para obter um sistema drag and drop para projetar seu site. Esses plugins s\u00e3o praticamente os mesmos que eram em 2011. O Divi<\/a> e o Beaver Builder<\/a> ainda dominam, embora o Elementor<\/a> tamb\u00e9m seja um gigante:<\/p>\n Voc\u00ea vai gostar de ler a pr\u00f3xima se\u00e7\u00e3o para entender por que temos alternativas ao Editor\u00a0TinyMCE e a plugins de construtores de p\u00e1ginas.<\/p>\n O WordPress \u00e9 o n\u00famero um<\/a> em popularidade, mas, para chegar l\u00e1, teve que defender seu t\u00edtulo. Ao longo dos anos, muitas outras plataformas saturaram o mercado.<\/p>\n Squarespace<\/a>, Wix, Medium e muitas outras querem os mesmos p\u00fablico e base de usu\u00e1rios do WordPress, e, at\u00e9 o Editor de Blocos, todas tinham uma experi\u00eancia de edi\u00e7\u00e3o muito melhor.<\/p>\n Essa era uma grande preocupa\u00e7\u00e3o<\/a> para a administra\u00e7\u00e3o do WordPress, visto que outras plataformas na \u00e9poca estavam ganhando tra\u00e7\u00e3o mais vis\u00edvel. A concorr\u00eancia tamb\u00e9m tinha interfaces modernas, visuais e de alto desempenho, mesmo para controle simples de layout.<\/p>\n O Editor de Blocos \u00e9 uma maneira modular de criar artigos e p\u00e1ginas do seu site, embora tamb\u00e9m tenha desvantagens. Para come\u00e7ar, seu escopo limitado significa que us\u00e1-lo provavelmente requer um plugin de construtor de p\u00e1ginas se voc\u00ea quiser fazer altera\u00e7\u00f5es mais “detalhadas”. Voc\u00ea tamb\u00e9m precisaria de conhecimento de desenvolvimento para criar um site completo, o que \u00e9 uma barreira criativa para a qual a equipe do WordPress tem uma solu\u00e7\u00e3o.<\/p>\n A edi\u00e7\u00e3o completa de sites no WordPress representa a \u00faltima e mais avan\u00e7ada fronteira para <\/span>o desenvolvimento do seu site<\/a>. Ela se baseia no uso de Blocos para montar seu design e abrange mais do que artigos e p\u00e1ginas individuais. Em ess\u00eancia, o FSE <\/span>permite gerenciar todos os aspectos do design do seu site WordPress usando uma interface unificada e intuitiva.<\/p>\n Essa agora \u00e9 a maneira “oficial” de editar seu site. Ele coloca todos os aspectos do seu site sob sua al\u00e7ada:<\/p>\n Dada a evolu\u00e7\u00e3o do editor, algumas funcionalidades tamb\u00e9m est\u00e3o desaparecendo. Por exemplo, voc\u00ea n\u00e3o precisa mais de \u00e1reas de widgets<\/a>, embora o WordPress ainda as use como funcionalidade legada para temas que n\u00e3o sejam de Blocos.<\/p>\n Mais tarde voltaremos a falar sobre o que a edi\u00e7\u00e3o completa de sites no WordPress o ajuda a obter. Antes disso, vamos explicar melhor por que voc\u00ea precisa do FSE.<\/p>\n A equipe do WordPress tem alguns motivos para introduzir o FSE. Alguns deles s\u00e3o considera\u00e7\u00f5es t\u00e9cnicas. Por exemplo, o Editor de Blocos n\u00e3o nos permite editar todos os aspectos do site quando a funcionalidade deveria estar l\u00e1 em primeiro lugar.<\/p>\n \u00c9 dif\u00edcil entender por que demorou tanto tempo para que pud\u00e9ssemos trabalhar com estilos de templates<\/a> sem a necessidade de c\u00f3digo. Entre o Editor Cl\u00e1ssico, frameworks, plugins de construtores de p\u00e1ginas e o Editor de Blocos, nunca tivemos essa oportunidade. O FSE corrige isso de forma nativa no WordPress.<\/p>\n Essa simplifica\u00e7\u00e3o unifica a experi\u00eancia de edi\u00e7\u00e3o e a coloca sob o controle da equipe principal do WordPress, em vez de desenvolvedores terceiros. Isso tamb\u00e9m significa que a curva de aprendizado \u00e9 consistente. Entre conte\u00fado, layout e design, voc\u00ea tem uma experi\u00eancia familiar<\/a> de uma tela para a outra.<\/p>\n Essa experi\u00eancia tamb\u00e9m traz longevidade. A edi\u00e7\u00e3o completa de sites no WordPress n\u00e3o desaparecer\u00e1; ela simplesmente evoluir\u00e1 com o tempo. Isso d\u00e1 \u00e0 plataforma uma base para se adaptar a qualquer coisa que a equipe de desenvolvimento central deseje trazer para o WordPress.<\/p>\n De modo geral, essa capacita\u00e7\u00e3o se estende dos desenvolvedores aos usu\u00e1rios finais. A edi\u00e7\u00e3o completa de sites no WordPress oferece a todos maior controle sobre as altera\u00e7\u00f5es de design que desejam fazer sem depender de desenvolvedores, personaliza\u00e7\u00f5es complexas ou conhecimento de codifica\u00e7\u00e3o.<\/p>\n Para\u00a0a equipe do WordPress, o FSE n\u00e3o \u00e9 apenas o presente; \u00e9 o futuro da plataforma. No entanto, voc\u00ea precisar\u00e1 de um tema compat\u00edvel para us\u00e1-la (mais sobre isso depois). Al\u00e9m disso, outras empresas relacionadas ao WordPress podem n\u00e3o concordar, especialmente aquelas com produtos concorrentes.<\/p>\n Por exemplo, os desenvolvedores web do WordPress argumentariam que confiar o design do seu tema<\/a> a algu\u00e9m com experi\u00eancia \u00e9 uma boa ideia. Concordamos em muitos casos, especialmente se voc\u00ea tiver necessidades complexas, o or\u00e7amento certo, e tempo.<\/p>\n \u00c9 claro que o Editor de Blocos ainda \u00e9 vi\u00e1vel para a maior parte da cria\u00e7\u00e3o e personaliza\u00e7\u00e3o de conte\u00fado. O salto deste para a edi\u00e7\u00e3o completa de sites ser\u00e1 apenas um pequeno passo, e voc\u00ea provavelmente j\u00e1 o utiliza:<\/span><\/p>\n Muitos usu\u00e1rios recorrer\u00e3o ao Editor de Blocos na maior parte do tempo, e ent\u00e3o usar\u00e3o outra solu\u00e7\u00e3o. Adicionar um plugin de constru\u00e7\u00e3o de p\u00e1ginas prover\u00e1 algumas das funcionalidades<\/a> que faltam ao Editor de Blocos. Divi, Elementor, Beaver Builder, Brizy<\/a> e muitos outros t\u00eam \u00f3timos conjuntos de recursos e permitem personaliza\u00e7\u00f5es e desenvolvimento mais profundos:<\/p>\n Para ter uma experi\u00eancia totalmente oposta \u00e0 edi\u00e7\u00e3o completa de sites no WordPress e voltar ao ponto de partida, voc\u00ea pode optar por um CMS totalmente novo: ClassicPress<\/a>.<\/p>\n A filosofia do projeto \u00e9 que a evolu\u00e7\u00e3o do WordPress \u00e9 uma \u00f3tima ideia, com exce\u00e7\u00e3o do Editor de Blocos e, por extens\u00e3o, do FSE. Assim, a bifurca\u00e7\u00e3o do ClassicPress n\u00e3o o inclui. Em vez disso, voc\u00ea criar\u00e1 sites usando o Editor Cl\u00e1ssico ou o TinyMCE, exatamente como no passado.<\/p>\n Trata-se essencialmente de uma solu\u00e7\u00e3o voltada para a imaturidade do Editor de Blocos em seu primeiro lan\u00e7amento. Na \u00e9poca, o conceito fazia sentido te\u00f3rico. No entanto, considerando a atual experi\u00eancia de edi\u00e7\u00e3o no WordPress, h\u00e1 poucos motivos para optar pelo ClassicPress.<\/p>\n Em poucas palavras, a edi\u00e7\u00e3o completa de sites no WordPress estende a funcionalidade do Editor de Blocos a todo o site. Para usar o FSE, voc\u00ea precisa de um “tema de Bloco” ou “tema de FSE” compat\u00edvel com ele. Falaremos mais sobre isso depois.<\/p>\n Uma vis\u00e3o mais ampla de como o FSE funciona \u00e9 simples:<\/p>\n A maioria dos usu\u00e1rios n\u00e3o executar\u00e1 uma vers\u00e3o do WordPress anterior \u00e0 5.9, mas, se voc\u00ea a tiver, precisar\u00e1 fazer a atualiza\u00e7\u00e3o para aproveitar o FSE. Como j\u00e1 mencionamos, tamb\u00e9m precisar\u00e1 de um tema compat\u00edvel. Vamos discutir isso rapidamente.<\/p>\n Felizmente, escolher um tema de Bloco<\/a> requer o mesmo n\u00edvel de cuidado que qualquer outro tipo de tema. Voc\u00ea precisar\u00e1 analisar algumas facetas objetivas para garantir o download de uma solu\u00e7\u00e3o s\u00f3lida:<\/p>\n Como a edi\u00e7\u00e3o completa de sites no WordPress \u00e9 uma novidade na plataforma, h\u00e1 menos op\u00e7\u00f5es de temas dispon\u00edveis pra voc\u00ea. No entanto, isso n\u00e3o significa que seja dif\u00edcil encontrar qualidade. Muitos desenvolvedores de grande porte t\u00eam suas vers\u00f5es de temas de FSE\/Blocos. Uma das primeiras foi a vers\u00e3o FSE do Neve<\/a>, da ThemeIsle:<\/p>\n A vers\u00e3o “tradicional” ou “cl\u00e1ssica” do tema usa o antigo Personalizador da tela Apar\u00eancia<\/strong><\/strong>. Essa vers\u00e3o integra o Editor de Sites por completo e oferece melhor desempenho subjetivo.<\/p>\n H\u00e1 outros temas de Blocos para conferir, como o Portfolio WP<\/a> e o Mugistore<\/a>. Contudo, o Ollie<\/a> \u00e9 provavelmente o melhor de todos:<\/p>\n Ele se compromete sem\u00a0hesitar com a edi\u00e7\u00e3o completa de sites do WordPress.\u00a0Possui um assistente de integra\u00e7\u00e3o\u00a0muito intuitivo\u00a0e at\u00e9 mesmo uma vers\u00e3o premium que inclui muitos elementos da Biblioteca de Padr\u00f5es e templates.<\/p>\n At\u00e9 mesmo o tema padr\u00e3o Twenty Twenty-Four<\/a> \u00e9 uma op\u00e7\u00e3o vi\u00e1vel para o seu site agora:<\/p>\n A capacidade e a profundidade do Editor de Sites nos permitem construir sobre (e ampliar) temas que geralmente exigem muito c\u00f3digo e recursos. Ele democratiza a capacidade de criar e desenvolver temas, e a interface principal \u00e9 o primeiro ponto de contato para isso.<\/p>\n Para encontrar o Editor de Sites, navegue at\u00e9 Apar\u00eancia > Editor <\/strong>no WordPress:<\/p>\n Essa tela \u00e9 bem simples. No lado direito, voc\u00ea ver\u00e1 a visualiza\u00e7\u00e3o do layout. Voc\u00ea pode clicar nele para abrir a interface do Editor de Sites para sua p\u00e1gina inicial. \u00c0 esquerda est\u00e1 um conjunto de links para outras p\u00e1ginas de edi\u00e7\u00e3o para tarefas espec\u00edficas. Em breve examinaremos essas telas em detalhes.<\/p>\n Antes de entrarmos em cada uma das cinco telas do FSE, observe que voc\u00ea pode sair do Editor de Sites usando a marca do WordPress no canto superior esquerdo da tela. Como alternativa, voc\u00ea pode clicar na seta de “voltar” da p\u00e1gina principal Design<\/strong>:<\/p>\n Com isso esclarecido, vamos come\u00e7ar a usar o FSE.<\/p>\n Agora, examinaremos cada tela do editor de sites na ordem em que aparece em sua navega\u00e7\u00e3o. Na verdade, isso vai nos levar a discutir essa pr\u00f3pria tela!<\/p>\n A p\u00e1gina Navega\u00e7\u00e3o substitui a tela Apar\u00eancia > Menus<\/strong>. Ap\u00f3s entrar nela, voc\u00ea ver\u00e1 uma lista de artigos e p\u00e1ginas do seu site:<\/p>\n Se esse for um novo site, voc\u00ea ver\u00e1 todos os seus posts e p\u00e1ginas aqui. Isso pode ser confuso, porque representa seu menu de navega\u00e7\u00e3o principal. Perto do cabe\u00e7alho Navega\u00e7\u00e3o, abra o menu A\u00e7\u00f5es<\/strong>. Isso lhe dar\u00e1 op\u00e7\u00f5es para editar o menu, alterar o nome, exclu\u00ed-lo ou duplic\u00e1-lo:<\/p>\n Se voc\u00ea clicar em Editar<\/strong>, ser\u00e1 aberta uma vers\u00e3o do Editor de Blocos que cont\u00e9m o menu como um Bloco de Navega\u00e7\u00e3o:<\/p>\n Na barra lateral, voc\u00ea tem op\u00e7\u00f5es para mover cada entrada pra cima ou pra baixo, remov\u00ea-la do menu ou criar um submenu a partir dela:<\/p>\n Cada entrada no menu usa um Bloco Link de P\u00e1gina, que vir\u00e1 com suas pr\u00f3prias op\u00e7\u00f5es. Voc\u00ea tem ajustes de formata\u00e7\u00e3o em linha, juntamente com configura\u00e7\u00f5es de estilo da barra lateral:<\/p>\n Observe que voc\u00ea pode adicionar aqui imagens integradas, submenus, e muito mais. Isso \u00e9 mais flex\u00edvel do que a maneira cl\u00e1ssica de criar navega\u00e7\u00e3o. Para simplesmente adicionar um item ao menu, clique no \u00edcone de Mais <\/strong>e selecione seu artigo ou p\u00e1gina:<\/p>\n Ap\u00f3s salvar as altera\u00e7\u00f5es, voc\u00ea ver\u00e1 que a navega\u00e7\u00e3o refletir\u00e1 seus ajustes. Para criar outros menus, voc\u00ea pode usar o link A\u00e7\u00f5es > Duplicar<\/strong> na p\u00e1gina Navega\u00e7\u00e3o.<\/p>\n A tela Estilos<\/strong> \u00e9 como voc\u00ea controla a apar\u00eancia global do seu site. A barra lateral oferece algumas paletas diferentes e configura\u00e7\u00f5es de tipografia para diferentes designs:<\/p>\n Ao clicar em qualquer um deles, voc\u00ea ver\u00e1 o design em vigor no seu site. No entanto, h\u00e1 um \u00edcone de “l\u00e1pis” de edi\u00e7\u00e3o<\/strong> na parte superior da barra lateral para fazer altera\u00e7\u00f5es adicionais no Editor de Sites:<\/p>\n Cada uma das op\u00e7\u00f5es da barra lateral aqui abrange cores, layouts, tipografia, e at\u00e9 mesmo configura\u00e7\u00f5es de sombra. Por exemplo, voc\u00ea pode selecionar fontes para todo o site e aplic\u00e1-las a v\u00e1rios elementos do seu design:<\/p>\n Aprofundando-se mais nos menus, muitas vezes haver\u00e1 op\u00e7\u00f5es adicionais para brincar, como espa\u00e7amento, cores e outras. A se\u00e7\u00e3o Layout <\/strong>permite personalizar as dimens\u00f5es da sua \u00e1rea de conte\u00fado principal, bem como o preenchimento e o espa\u00e7amento entre Blocos:<\/p>\n Se quiser ver como essas altera\u00e7\u00f5es ficam sem navegar pelo site, voc\u00ea pode usar o \u00edcone do “olho” para abrir o Livro de Estilo. Essa \u00e9 uma ferramenta de visualiza\u00e7\u00e3o \u00fatil que os designers v\u00e3o adorar:<\/p>\n Por fim, embora n\u00e3o vamos nos concentrar nisso aqui, voc\u00ea tamb\u00e9m pode personalizar a apar\u00eancia de cada Bloco do seu site. Por exemplo, voc\u00ea pode usar o estilo global de um Bloco de Par\u00e1grafo. Novamente, quando terminar, voc\u00ea poder\u00e1 salvar as altera\u00e7\u00f5es, e elas ser\u00e3o aplicadas ao seu site.<\/p>\n Antes de passar para a pr\u00f3xima tela do FSE, voc\u00ea deve conhecer o arquivo theme.json<\/strong><\/a>. Basicamente, essa \u00e9 a vers\u00e3o para desenvolvedores<\/a> das telas Estilos.<\/p>\n Ele permite que voc\u00ea defina os estilos padr\u00e3o para o seu site e seus Blocos, e voc\u00ea o usar\u00e1 como um arquivo de configura\u00e7\u00e3o. Al\u00e9m disso, usa o formato JSON<\/a>, portanto, oferece uma experi\u00eancia menos pesada em termos de c\u00f3digo do que no passado.<\/p>\n Por fim, saiba que tudo o que voc\u00ea pode fazer no theme.json<\/strong> tamb\u00e9m pode ser feito no Editor de Sites.<\/p>\n A tela P\u00e1ginas<\/strong> duplica a funcionalidade das telas cl\u00e1ssicas de Artigos e P\u00e1ginas no painel WordPress. Por exemplo, voc\u00ea ver\u00e1 uma lista de status que filtram suas p\u00e1ginas em Publicadas<\/strong><\/strong><\/strong>, Programadas<\/strong><\/strong><\/strong>, Rascunhos <\/strong><\/strong><\/strong>e outras:<\/p>\n Cada p\u00e1gina tem a\u00e7\u00f5es adicionais, como Editar<\/strong>, Exibir<\/strong><\/strong>, Renomear<\/strong><\/strong><\/strong>\u00a0e Excluir<\/strong><\/strong><\/strong><\/strong>. Voc\u00ea tamb\u00e9m pode editar uma p\u00e1gina usando o \u00edcone de “l\u00e1pis”. Na parte superior da lista h\u00e1 um bot\u00e3o Adicionar nova p\u00e1gina<\/strong><\/strong><\/strong><\/strong><\/strong> que faz o \u00f3bvio.<\/p>\n Se voc\u00ea j\u00e1 usa o Editor de Blocos, essas telas lhe parecer\u00e3o mais familiares. No entanto, embora aqui voc\u00ea tenha a mesma funcionalidade de sempre, o Editor de Sites oferece alguns Blocos de Tema<\/a> adicionais para ajud\u00e1-lo a criar seu site. Eles abrangem casos de uso t\u00edpicos, como a adi\u00e7\u00e3o de uma logo do site, navega\u00e7\u00e3o, autores, coment\u00e1rios e mais:<\/p>\n Um deles, o Bloco Query Loop<\/a>, pode ajudar a realizar tarefas que normalmente precisariam de PHP para realizar. Por exemplo, como ele permite exibir artigos com base em par\u00e2metros espec\u00edficos, voc\u00ea pode exibir seus artigos mais recentes ou at\u00e9 mesmo criar um portf\u00f3lio. No entanto, nada disso pode ser feito sem as duas \u00faltimas telas do Editor de Sites.<\/p>\n Templates<\/a> s\u00e3o um elemento b\u00e1sico do desenvolvimento WordPress. S\u00e3o layouts reutiliz\u00e1veis que ajudam a definir a estrutura das v\u00e1rias partes do seu site. Normalmente \u00e9 necess\u00e1rio ter conhecimento de PHP, mas voc\u00ea pode personalizar todos eles (e criar novos) sem c\u00f3digo no Editor de Sites.<\/p>\n O trabalho com templates segue a mesma abordagem dos artigos e p\u00e1ginas: voc\u00ea usar\u00e1 o Editor de Sites para adicionar Blocos ao template, e da\u00ed salvar\u00e1 as altera\u00e7\u00f5es. Obviamente, essas altera\u00e7\u00f5es ser\u00e3o aplicadas a todas as p\u00e1ginas que usam o template em quest\u00e3o.<\/p>\n Para criar um novo template, clique no bot\u00e3o Adicionar novo template<\/strong>:<\/p>\n Isso far\u00e1 com que voc\u00ea passe por um assistente r\u00e1pido para selecionar o tipo de template que deseja criar e um Padr\u00e3o de Bloco adequado para iniciar o design. Esses padr\u00f5es s\u00e3o o foco da nossa \u00faltima se\u00e7\u00e3o.<\/p>\n Os Padr\u00f5es de Bloco s\u00e3o cole\u00e7\u00f5es relacionadas de Blocos que desempenham fun\u00e7\u00f5es espec\u00edficas em seu site. Por exemplo, voc\u00ea pode inserir um padr\u00e3o de cabe\u00e7alho completo com logo, navega\u00e7\u00e3o e t\u00edtulo do site:<\/p>\n Cri\u00e1-los<\/a> \u00e9 simples, embora, sem o editor de sites, voc\u00ea precisaria registrar esses padr\u00f5es usando PHP. Agora, por\u00e9m, voc\u00ea pode usar a p\u00e1gina Padr\u00f5es<\/strong>:<\/p>\n No lado esquerdo, voc\u00ea ver\u00e1 todos os padr\u00f5es dispon\u00edveis divididos em pastas chamadas “tipos”. Esses padr\u00f5es s\u00e3o uma \u00f3tima maneira de criar rapidamente o design de um site, e muitas vezes t\u00eam uma apar\u00eancia fant\u00e1stica.<\/p>\n O bot\u00e3o Adicionar novo padr\u00e3o <\/strong>abre o editor e permite que voc\u00ea mesmo crie essas se\u00e7\u00f5es. Isso permite criar elementos reutiliz\u00e1veis para o seu site, o que representa uma maneira sustent\u00e1vel e aut\u00f4noma de desenvolver sites para voc\u00ea e qualquer outra pessoa com quem trabalhe.<\/p>\n H\u00e1 muito a ser dito quando se trata da edi\u00e7\u00e3o completa de sites no WordPress, e n\u00e3o podemos cobrir tudo o que voc\u00ea pode fazer com ela. No entanto, podemos lhe dar algumas dicas para aproveitar ao m\u00e1ximo o FSE.<\/p>\n Por exemplo, voc\u00ea pode exportar seus templates e estilos para reutiliz\u00e1-los em outros sites. Para fazer isso, acesse o editor de sites para qualquer artigo ou p\u00e1gina e clique no menu Op\u00e7\u00f5es<\/strong> na barra de ferramentas superior. No menu suspenso, escolha Exportar:<\/strong><\/strong><\/p>\n Isso lhe fornecer\u00e1 um arquivo ZIP do seu tema, e, se voc\u00ea precisar import\u00e1-lo<\/a>, poder\u00e1 faz\u00ea-lo usando o plugin WordPress Importer<\/a>.<\/p>\n![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/classic-editor_1.png\")
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/tinymce-editor.png\")
![\"Uma](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/genesis-framework_1.png\")
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/elementor-page-builder_1.png\")
O Editor de Blocos e a edi\u00e7\u00e3o completa de sites no WordPress<\/h2>\n
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/wix-editor_1.png\")
O que \u00e9 a edi\u00e7\u00e3o completa de sites no WordPress (FSE)<\/h3>\n
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/full-site-editing.png\")
\n
Por que o FSE est\u00e1 no WordPress<\/h2>\n
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/templates-pages.png\")
As alternativas ao FSE<\/h3>\n
![\"Uma](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/theme-development.png\")
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/block-editor-1.png\")
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/page-builder-screen.png\")
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/classicpress-homepage.png\")
Como funciona a edi\u00e7\u00e3o completa de sites no WordPress<\/h2>\n
\n
Escolha de um tema FSE adequado<\/h3>\n
\n
![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/neve-fse.png\")
![\"Uma](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/ollie-theme.png\")
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/twenty-twenty-four_1.png\")
Visitando a interface principal do FSE<\/h3>\n
![\"Captura](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/editor-link.png\")
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/back-arrow.png\"){kind=icon}
Os 5 pilares da edi\u00e7\u00e3o completa de sites no WordPress<\/h2>\n
1. Navega\u00e7\u00e3o<\/h3>\n
![\"Uma](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/navigation-screen.png\")
![\"Uma](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/nav-more-items.png\")
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/nav-block-editor.png\")
![\"Uma](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/nav-sidebar.png\")
![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/page-link-block.png\")
![\"Uma](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/add-page-nav.png\")
2. Estilos<\/h3>\n
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/styles-screen.png\")
![\"Uma](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/styles-editor.png\")
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/typography-settings.png\")
![\"Uma](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/layout-tab.png\")
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/style-book.png\")
Como usar o arquivo theme.json com a edi\u00e7\u00e3o completa de sites no WordPress<\/h4>\n
![\"Um](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/theme-json.png\")
3. P\u00e1ginas<\/h3>\n
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/pages-screen.png\")
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/theme-blocks.png\")
4. Templates<\/h3>\n
![\"Adicionando](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/add-template.png\")
5. Padr\u00f5es<\/h3>\n
![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/block-pattern.png\")
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/patterns-page.png\")
Dicas sobre como usar a edi\u00e7\u00e3o completa de sites no WordPress para criar designs<\/h2>\n
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/options-export.png\")
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/07\/command-palette-search.png\")