A evolução do WordPress levou tempo para amadurecer, mas ele deixou de ser uma simples plataforma de blog para se tornar um sistema de gerenciamento de conteúdo (CMS) robusto que praticamente administra a web. Os maiores avanços ocorreram na criação de designs de sites. A Edição Completa de Sites (FSE, Full Site Editing) do WordPress é uma maneira ambiciosa de colocar ferramentas complexas nas mãos de todos.
Este guia abrangente explorará a história e a funcionalidade da edição completa de sites no WordPress. O objetivo final é mostrar como o FSE funciona e permitir que você desenvolva seus próprios designs de site como os profissionais.
Um breve histórico da criação de design e layout no WordPress
Conhecer a evolução do design de sites e layouts no WordPress é essencial para compreender a importância do FSE. A principal ferramenta, central para o ponto em que estamos agora, é o Editor Clássico.
![A interface do Editor Clássico do WordPress. Mostra as abas de edição visual e de texto, opções de formatação e configurações de publicação. O status está definido como Rascunho e a visibilidade como Pública.](https://kinsta.com/wp-content/uploads/2024/07/classic-editor_1.png)
É claro que esse editor nem sempre foi considerado “clássico”. Ele sempre foi o Editor TinyMCE — o padrão desde a primeira versão do WordPress até por volta de 2018. É um editor de texto simples do tipo O Que Você Vê É O Que Você Obtém (WYSIWYG) que permite inserir conteúdo e HTML básico, juntamente com alguns estilos de formatação. Na verdade, você ainda pode obter o Editor TinyMCE, pois ele é uma ferramenta comercial:
![A interface do editor de texto avançado TinyMCE integrada em um site. Mostra uma landing page de registro de evento com ferramentas de edição e um formulário para os usuários se registrarem para um evento.](https://kinsta.com/wp-content/uploads/2024/07/tinymce-editor.png)
As principais desvantagens do Editor TinyMCE são a falta de opções de visualização de frontend e menos flexibilidade do que você gostaria. Os frameworks de temas se tornaram uma alternativa viável e poderosa. Obviamente, o Genesis Framework do StudioPress ainda está conosco, mas havia alguns outros, como o Thesis.
![Uma página de artigo de blog usando o Genesis Framework. Apresenta uma imagem em preto e branco da Torre Eiffel. O artigo é intitulado "April in Paris – Ella Fitzgerald" e está datado de 1 de fevereiro de 2018. A barra lateral mostra artigos recentes com imagens em miniatura.](https://kinsta.com/wp-content/uploads/2024/07/genesis-framework_1.png)
Aqui você pode ver como passamos da edição de texto para web design visual. O framework oferece opções no backend do WordPress, o que permite alterar aspectos do frontend. Além disso, você obtém mais funcionalidades “bare metal” para fazer outras alterações, como hooks e filtros, suporte a templates, e outras.
No entanto, isso ainda não era muito acessível para o usuário padrão, e foi aí que plugins de construtores de páginas se tornaram populares. Você os usaria junto com o TinyMCE/Editor Classico para obter um sistema drag and drop para projetar seu site. Esses plugins são praticamente os mesmos que eram em 2011. O Divi e o Beaver Builder ainda dominam, embora o Elementor também seja um gigante:
![A interface do Elementor mostrando o design de uma página inicial de uma loja de móveis. A página apresenta uma seção "Nova Coleção" com imagens de produtos e descrições, incluindo uma luminária de mesa por $200 e um banco espacial por $300. Uma grande mesa lateral de acrílico roxa é destacada à direita. A interface inclui ferramentas de edição e seletores de cores no lado esquerdo.](https://kinsta.com/wp-content/uploads/2024/07/elementor-page-builder_1.png)
Você vai gostar de ler a próxima seção para entender por que temos alternativas ao Editor TinyMCE e a plugins de construtores de páginas.
O Editor de Blocos e a edição completa de sites no WordPress
O WordPress é o número um em popularidade, mas, para chegar lá, teve que defender seu título. Ao longo dos anos, muitas outras plataformas saturaram o mercado.
Squarespace, Wix, Medium e muitas outras querem os mesmos público e base de usuários do WordPress, e, até o Editor de Blocos, todas tinham uma experiência de edição muito melhor.
![A interface do construtor de sites Wix exibindo uma página de portfólio de fotografia no modo de edição. O painel à esquerda mostra opções para adicionar seções, enquanto a área principal apresenta um layout de amostra para](https://kinsta.com/wp-content/uploads/2024/07/wix-editor_1.png)
Essa era uma grande preocupação para a administração do WordPress, visto que outras plataformas na época estavam ganhando tração mais visível. A concorrência também tinha interfaces modernas, visuais e de alto desempenho, mesmo para controle simples de layout.
O Editor de Blocos é uma maneira modular de criar artigos e páginas do seu site, embora também tenha desvantagens. Para começar, seu escopo limitado significa que usá-lo provavelmente requer um plugin de construtor de páginas se você quiser fazer alterações mais “detalhadas”. Você também precisaria de conhecimento de desenvolvimento para criar um site completo, o que é uma barreira criativa para a qual a equipe do WordPress tem uma solução.
O que é a edição completa de sites no WordPress (FSE)
A edição completa de sites no WordPress representa a última e mais avançada fronteira para o desenvolvimento do seu site. Ela se baseia no uso de Blocos para montar seu design e abrange mais do que artigos e páginas individuais. Em essência, o FSE permite gerenciar todos os aspectos do design do seu site WordPress usando uma interface unificada e intuitiva.
![A interface do Editor de Sites do WordPress. A imagem mostra um layout de modelo de post com três colunas exibindo títulos de posts, trechos e datas de publicação. Um menu contextual está aberto, mostrando opções como Copiar, Adicionar antes, Adicionar depois, e outras.](https://kinsta.com/wp-content/uploads/2024/07/full-site-editing.png)
Essa agora é a maneira “oficial” de editar seu site. Ele coloca todos os aspectos do seu site sob sua alçada:
- Edição de navegação. O método antigo, que usava a tela de construção Aparência > Menus agora está integrado ao Editor de Sites.
- Estilos globais. Você tem maior controle sobre a aparência de todo o seu site. Isso inclui cores, tipografia, espaçamento e muito mais.
- Edição de templates. Antes você precisava de conhecimentos de desenvolvimento e codificação, como PHP, HTML e CSS. Agora, você pode usar o Editor de Sites para criar e modificar templates para as diferentes partes do seu site sem necessidade de código.
- Padrões de Blocos. Considere-os como elementos de design reutilizáveis usando coleções de Blocos que você pode inserir em seus layouts.
Dada a evolução do editor, algumas funcionalidades também estão desaparecendo. Por exemplo, você não precisa mais de áreas de widgets, embora o WordPress ainda as use como funcionalidade legada para temas que não sejam de Blocos.
Mais tarde voltaremos a falar sobre o que a edição completa de sites no WordPress o ajuda a obter. Antes disso, vamos explicar melhor por que você precisa do FSE.
Por que o FSE está no WordPress
A equipe do WordPress tem alguns motivos para introduzir o FSE. Alguns deles são considerações técnicas. Por exemplo, o Editor de Blocos não nos permite editar todos os aspectos do site quando a funcionalidade deveria estar lá em primeiro lugar.
É difícil entender por que demorou tanto tempo para que pudéssemos trabalhar com estilos de templates sem a necessidade de código. Entre o Editor Clássico, frameworks, plugins de construtores de páginas e o Editor de Blocos, nunca tivemos essa oportunidade. O FSE corrige isso de forma nativa no WordPress.
![A interface de gerenciamento de templates do WordPress dentro do Editor de Sites. Exibe vários templates de página, como Todos os Arquivos, Página Inicial do Blog, Índice e Página Sem Título, com visualizações em miniatura e descrições para cada template.](https://kinsta.com/wp-content/uploads/2024/07/templates-pages.png)
Essa simplificação unifica a experiência de edição e a coloca sob o controle da equipe principal do WordPress, em vez de desenvolvedores terceiros. Isso também significa que a curva de aprendizado é consistente. Entre conteúdo, layout e design, você tem uma experiência familiar de uma tela para a outra.
Essa experiência também traz longevidade. A edição completa de sites no WordPress não desaparecerá; ela simplesmente evoluirá com o tempo. Isso dá à plataforma uma base para se adaptar a qualquer coisa que a equipe de desenvolvimento central deseje trazer para o WordPress.
De modo geral, essa capacitação se estende dos desenvolvedores aos usuários finais. A edição completa de sites no WordPress oferece a todos maior controle sobre as alterações de design que desejam fazer sem depender de desenvolvedores, personalizações complexas ou conhecimento de codificação.
As alternativas ao FSE
Para a equipe do WordPress, o FSE não é apenas o presente; é o futuro da plataforma. No entanto, você precisará de um tema compatível para usá-la (mais sobre isso depois). Além disso, outras empresas relacionadas ao WordPress podem não concordar, especialmente aquelas com produtos concorrentes.
Por exemplo, os desenvolvedores web do WordPress argumentariam que confiar o design do seu tema a alguém com experiência é uma boa ideia. Concordamos em muitos casos, especialmente se você tiver necessidades complexas, o orçamento certo, e tempo.
![Uma janela de editor de código mostrando funções PHP para registrar estilos de blocos personalizados no WordPress. O código define estilos para um bloco de detalhes com ícone de seta, incluindo propriedades CSS para padding e list-style-type.](https://kinsta.com/wp-content/uploads/2024/07/theme-development.png)
É claro que o Editor de Blocos ainda é viável para a maior parte da criação e personalização de conteúdo. O salto deste para a edição completa de sites será apenas um pequeno passo, e você provavelmente já o utiliza:
![A interface do Editor de Blocos do WordPress para uma página de Política de Privacidade. A área de conteúdo mostra seções sobre Comentários, Mídia e Cookies com texto sugerido. Uma barra lateral à direita oferece opções de edição de blocos para tipografia e estilo.](https://kinsta.com/wp-content/uploads/2024/07/block-editor-1.png)
Muitos usuários recorrerão ao Editor de Blocos na maior parte do tempo, e então usarão outra solução. Adicionar um plugin de construção de páginas proverá algumas das funcionalidades que faltam ao Editor de Blocos. Divi, Elementor, Beaver Builder, Brizy e muitos outros têm ótimos conjuntos de recursos e permitem personalizações e desenvolvimento mais profundos:
![A interface do Elementor dentro do WordPress, mostrando ferramentas de edição de texto à esquerda, uma visualização do conteúdo da página no centro com uma imagem de uma paisagem montanhosa, e um painel de estrutura à direita mostrando os elementos do layout da página.](https://kinsta.com/wp-content/uploads/2024/07/page-builder-screen.png)
Para ter uma experiência totalmente oposta à edição completa de sites no WordPress e voltar ao ponto de partida, você pode optar por um CMS totalmente novo: ClassicPress.
![A página inicial do ClassicPress. Apresenta um fundo com gradiente em tons de teal e verde com texto branco descrevendo o ClassicPress como "CMS para Criativos". Há uma imagem do painel do ClassicPress e botões para fazer o download ou mudar do WordPress.](https://kinsta.com/wp-content/uploads/2024/07/classicpress-homepage.png)
A filosofia do projeto é que a evolução do WordPress é uma ótima ideia, com exceção do Editor de Blocos e, por extensão, do FSE. Assim, a bifurcação do ClassicPress não o inclui. Em vez disso, você criará sites usando o Editor Clássico ou o TinyMCE, exatamente como no passado.
Trata-se essencialmente de uma solução voltada para a imaturidade do Editor de Blocos em seu primeiro lançamento. Na época, o conceito fazia sentido teórico. No entanto, considerando a atual experiência de edição no WordPress, há poucos motivos para optar pelo ClassicPress.
Como funciona a edição completa de sites no WordPress
Em poucas palavras, a edição completa de sites no WordPress estende a funcionalidade do Editor de Blocos a todo o site. Para usar o FSE, você precisa de um “tema de Bloco” ou “tema de FSE” compatível com ele. Falaremos mais sobre isso depois.
Uma visão mais ampla de como o FSE funciona é simples:
- O FSE usa Blocos. Assim como na iteração atual do editor do WordPress, todo o seu site usa Blocos para cada componente. Aqui, tanto os elementos de conteúdo individual quanto os componentes estruturais maiores (como cabeçalhos e rodapés) usarão Blocos.
- Você pode editar templates de página no WordPress. Não é mais necessário conhecimento de PHP para alterar arquivos de template. Em vez disso, você pode criá-los e editá-los no Editor de Sites.
- Existe acesso a ferramentas de design para todo o site. Veremos o painel Estilos Globais mais adiante, mas ele permite controlar elementos de design que afetam todo o seu site. Em muitos casos, você não precisará de CSS personalizado para implementar sua visão.
- Padrões de Blocos permitem que você crie rapidamente. Assim como no Editor de Blocos, há layouts para seções comuns do site que você pode inserir e personalizar sem restrições.
- O arquivo theme.json é central para o FSE. Esse arquivo de configuração definirá os estilos e ajustes fundamentais para o seu tema. Serve como ponto de partida para personalizar ainda mais o seu site, mas também pode ser o “hub” para o seu desenvolvimento.
A maioria dos usuários não executará uma versão do WordPress anterior à 5.9, mas, se você a tiver, precisará fazer a atualização para aproveitar o FSE. Como já mencionamos, também precisará de um tema compatível. Vamos discutir isso rapidamente.
Escolha de um tema FSE adequado
Felizmente, escolher um tema de Bloco requer o mesmo nível de cuidado que qualquer outro tipo de tema. Você precisará analisar algumas facetas objetivas para garantir o download de uma solução sólida:
- Verifique se há atualizações regulares da base de código do tema.
- Descubra o que outros usuários pensam sobre o tema por meio de classificações e avaliações.
- Certifique-se de que o desenvolvedor ofereça o nível certo de suporte para as suas necessidades.
Como a edição completa de sites no WordPress é uma novidade na plataforma, há menos opções de temas disponíveis pra você. No entanto, isso não significa que seja difícil encontrar qualidade. Muitos desenvolvedores de grande porte têm suas versões de temas de FSE/Blocos. Uma das primeiras foi a versão FSE do Neve, da ThemeIsle:
![O site do tema Neve FSE. O cabeçalho inclui links de navegação, e o conteúdo principal apresenta um título ("Crie e faça seu site único crescer hoje") com um subtítulo e dois botões de CTA. Abaixo, há três ícones de recursos: Build your site, Style Variations, e Pattern-ready.](https://kinsta.com/wp-content/uploads/2024/07/neve-fse.png)
A versão “tradicional” ou “clássica” do tema usa o antigo Personalizador da tela Aparência. Essa versão integra o Editor de Sites por completo e oferece melhor desempenho subjetivo.
Há outros temas de Blocos para conferir, como o Portfolio WP e o Mugistore. Contudo, o Ollie é provavelmente o melhor de todos:
![Uma variedade de mockups de design de sites e componentes de UI exibidos em um layout de grade do tema Ollie. Mostra vários elementos como cabeçalhos, seções de conteúdo, galerias de imagens e botões de Call To Action em temas escuros, claros e coloridos.](https://kinsta.com/wp-content/uploads/2024/07/ollie-theme.png)
Ele se compromete sem hesitar com a edição completa de sites do WordPress. Possui um assistente de integração muito intuitivo e até mesmo uma versão premium que inclui muitos elementos da Biblioteca de Padrões e templates.
Até mesmo o tema padrão Twenty Twenty-Four é uma opção viável para o seu site agora:
![A página inicial do tema Twenty Twenty-Four exibindo uma seção de destaque (hero section) com uma grande imagem arquitetônica de um edifício moderno com um sofisticado telhado inclinado, com acabamento de ripas de madeira. O cabeçalho inclui links de navegação para Política de Privacidade e Página de Amostra.](https://kinsta.com/wp-content/uploads/2024/07/twenty-twenty-four_1.png)
A capacidade e a profundidade do Editor de Sites nos permitem construir sobre (e ampliar) temas que geralmente exigem muito código e recursos. Ele democratiza a capacidade de criar e desenvolver temas, e a interface principal é o primeiro ponto de contato para isso.
Visitando a interface principal do FSE
Para encontrar o Editor de Sites, navegue até Aparência > Editor no WordPress:
![Captura de tela do painel WordPress. A barra lateral esquerda exibe as principais opções do menu do WordPress. O menu Aparência está expandido para mostrar as opções Temas e Editor. Também mostra um aviso de Status de Saúde do Site.](https://kinsta.com/wp-content/uploads/2024/07/editor-link.png)
Essa tela é bem simples. No lado direito, você verá a visualização do layout. Você pode clicar nele para abrir a interface do Editor de Sites para sua página inicial. À esquerda está um conjunto de links para outras páginas de edição para tarefas específicas. Em breve examinaremos essas telas em detalhes.
Antes de entrarmos em cada uma das cinco telas do FSE, observe que você pode sair do Editor de Sites usando a marca do WordPress no canto superior esquerdo da tela. Como alternativa, você pode clicar na seta de “voltar” da página principal Design:
![A tela Design do Editor de Sites WordPress. Há opções visíveis para Navegação e Estilos. A logo WordPress e uma seta para voltar estão destacados no canto superior esquerdo.](https://kinsta.com/wp-content/uploads/2024/07/back-arrow.png)
Com isso esclarecido, vamos começar a usar o FSE.
Os 5 pilares da edição completa de sites no WordPress
Agora, examinaremos cada tela do editor de sites na ordem em que aparece em sua navegação. Na verdade, isso vai nos levar a discutir essa própria tela!
1. Navegação
A página Navegação substitui a tela Aparência > Menus. Após entrar nela, você verá uma lista de artigos e páginas do seu site:
![Uma visão completa da página Navegação no Editor de Sites WordPress. A barra lateral esquerda mostra a estrutura do menu de navegação, e a área de conteúdo principal exibe uma prévia do site com texto de exemplo e o menu de navegação visual.](https://kinsta.com/wp-content/uploads/2024/07/navigation-screen.png)
Se esse for um novo site, você verá todos os seus posts e páginas aqui. Isso pode ser confuso, porque representa seu menu de navegação principal. Perto do cabeçalho Navegação, abra o menu Ações. Isso lhe dará opções para editar o menu, alterar o nome, excluí-lo ou duplicá-lo:
![Uma parte da página Navegação no Editor de Sites WordPress. O título do site é visível no topo. A barra lateral esquerda mostra os itens do menu de navegação, e um menu suspenso no centro oferece opções para renomear, editar, duplicar ou excluir um item de menu selecionado.](https://kinsta.com/wp-content/uploads/2024/07/nav-more-items.png)
Se você clicar em Editar, será aberta uma versão do Editor de Blocos que contém o menu como um Bloco de Navegação:
![A interface do menu de navegação do Editor de Sites. A área de conteúdo principal mostra uma lista de itens do menu de navegação usando texto Lorem Ipsum. No lado direito há um painel Menu de Navegação com opções para editar e gerenciar a estrutura do menu.](https://kinsta.com/wp-content/uploads/2024/07/nav-block-editor.png)
Na barra lateral, você tem opções para mover cada entrada pra cima ou pra baixo, removê-la do menu ou criar um submenu a partir dela:
![Uma visão de perto das opções do Bloco de Menu de Navegação dentro do Editor de Sites. Mostra um menu suspenso de opções para o primeiro item do menu, para movê-los pra cima ou pra baixo, adicionar links de submenu ou remover itens.](https://kinsta.com/wp-content/uploads/2024/07/nav-sidebar.png)
Cada entrada no menu usa um Bloco Link de Página, que virá com suas próprias opções. Você tem ajustes de formatação em linha, juntamente com configurações de estilo da barra lateral:
![O Editor de Sites exibindo o conteúdo de um Bloco Menu de Navegação. Um menu inline mostra uma lista de opções para adicionar novos links, customizar a tipografia, ajustar estilos para os elementos de navegação, e mais.](https://kinsta.com/wp-content/uploads/2024/07/page-link-block.png)
Observe que você pode adicionar aqui imagens integradas, submenus, e muito mais. Isso é mais flexível do que a maneira clássica de criar navegação. Para simplesmente adicionar um item ao menu, clique no ícone de Mais e selecione seu artigo ou página:
![Uma visão de perto do Bloco de Navegação dentro do WordPress, mostrando o menu Adicionar link. O menu exibe uma barra de pesquisa para inserir uma URL e uma lista de páginas, incluindo Política de Privacidade e Página de Exemplo. Ícones para adicionar conteúdo e navegar estão visíveis na barra de ferramentas superior.](https://kinsta.com/wp-content/uploads/2024/07/add-page-nav.png)
Após salvar as alterações, você verá que a navegação refletirá seus ajustes. Para criar outros menus, você pode usar o link Ações > Duplicar na página Navegação.
2. Estilos
A tela Estilos é como você controla a aparência global do seu site. A barra lateral oferece algumas paletas diferentes e configurações de tipografia para diferentes designs:
![A página Estilos dentro do Editor de Sites do WordPress. O título diz "Uma paixão por criar espaços" e precede uma descrição dos serviços. Seis categorias de serviços estão listadas abaixo: Renovação e restauração, Suporte Contínuo, Acesso ao Aplicativo, Consultoria, Gerenciamento de Projetos e Soluções Arquitetônicas. A barra lateral esquerda mostra vários presets de estilo e paletas de cores para personalizar o tema.](https://kinsta.com/wp-content/uploads/2024/07/styles-screen.png)
Ao clicar em qualquer um deles, você verá o design em vigor no seu site. No entanto, há um ícone de “lápis” de edição na parte superior da barra lateral para fazer alterações adicionais no Editor de Sites:
![Uma visão de perto do design de um site dentro do Editor de Sites, mostrando os serviços oferecidos por uma empresa de arquitetura. A barra lateral direita exibe opções de personalização de estilo para tipografia, cores, sombras e layout.](https://kinsta.com/wp-content/uploads/2024/07/styles-editor.png)
Cada uma das opções da barra lateral aqui abrange cores, layouts, tipografia, e até mesmo configurações de sombra. Por exemplo, você pode selecionar fontes para todo o site e aplicá-las a vários elementos do seu design:
![A interface do Editor de Sites mostrando as configurações globais de tipografia. O lado esquerdo exibe um texto parcial sobre a criação de espaços, enquanto o painel direito mostra opções de fonte e estilo, incluindo as fontes Cardo, Inter e System. O esquema de cores usa texto vermelho em um fundo claro.](https://kinsta.com/wp-content/uploads/2024/07/typography-settings.png)
Aprofundando-se mais nos menus, muitas vezes haverá opções adicionais para brincar, como espaçamento, cores e outras. A seção Layout permite personalizar as dimensões da sua área de conteúdo principal, bem como o preenchimento e o espaçamento entre Blocos:
![Uma captura de tela da interface do Editor de Sites do WordPress mostrando opções de personalização de layout. A área do conteúdo principal exibe um título com algum texto descritivo. A barra lateral direita mostra configurações de layout para ajustar a largura do conteúdo, padding e espaçamento entre blocos.](https://kinsta.com/wp-content/uploads/2024/07/layout-tab.png)
Se quiser ver como essas alterações ficam sem navegar pelo site, você pode usar o ícone do “olho” para abrir o Livro de Estilo. Essa é uma ferramenta de visualização útil que os designers vão adorar:
![A interface do Livro de Estilos do WordPress mostrando opções de tipografia para um site. O texto "Code Is Poetry" é exibido em vários tamanhos para demonstrar diferentes estilos de cabeçalho. Um parágrafo de texto de exemplo e uma lista com marcadores também são exibidos. A barra lateral direita oferece opções para personalizar tipografia, cores, sombras e layout.](https://kinsta.com/wp-content/uploads/2024/07/style-book.png)
Por fim, embora não vamos nos concentrar nisso aqui, você também pode personalizar a aparência de cada Bloco do seu site. Por exemplo, você pode usar o estilo global de um Bloco de Parágrafo. Novamente, quando terminar, você poderá salvar as alterações, e elas serão aplicadas ao seu site.
Como usar o arquivo theme.json com a edição completa de sites no WordPress
Antes de passar para a próxima tela do FSE, você deve conhecer o arquivo theme.json. Basicamente, essa é a versão para desenvolvedores das telas Estilos.
![Um editor de código exibindo uma parte de um arquivo theme.json do WordPress. A seção visível define paletas de cores e gradientes, incluindo nomes, códigos de cores hexadecimais e definições de gradientes para vários esquemas de cores.](https://kinsta.com/wp-content/uploads/2024/07/theme-json.png)
Ele permite que você defina os estilos padrão para o seu site e seus Blocos, e você o usará como um arquivo de configuração. Além disso, usa o formato JSON, portanto, oferece uma experiência menos pesada em termos de código do que no passado.
Por fim, saiba que tudo o que você pode fazer no theme.json também pode ser feito no Editor de Sites.
3. Páginas
A tela Páginas duplica a funcionalidade das telas clássicas de Artigos e Páginas no painel WordPress. Por exemplo, você verá uma lista de status que filtram suas páginas em Publicadas, Programadas, Rascunhos e outras:
![A tela Páginas do Editor de Sites, mostrando uma lista de páginas agendadas filtradas no lado esquerdo. O lado direito mostra uma prévia da página inicial de um site.](https://kinsta.com/wp-content/uploads/2024/07/pages-screen.png)
Cada página tem ações adicionais, como Editar, Exibir, Renomear e Excluir. Você também pode editar uma página usando o ícone de “lápis”. Na parte superior da lista há um botão Adicionar nova página que faz o óbvio.
Se você já usa o Editor de Blocos, essas telas lhe parecerão mais familiares. No entanto, embora aqui você tenha a mesma funcionalidade de sempre, o Editor de Sites oferece alguns Blocos de Tema adicionais para ajudá-lo a criar seu site. Eles abrangem casos de uso típicos, como a adição de uma logo do site, navegação, autores, comentários e mais:
![A interface do Editor de Sites do WordPress. A barra lateral esquerda mostra várias opções de Blocos, como Navegação, Logo do Site e Título do Site. Essa barra lateral destaca o Bloco Query Loop. A área principal de edição exibe um layout de página com uma imagem destacada (hero).](https://kinsta.com/wp-content/uploads/2024/07/theme-blocks.png)
Um deles, o Bloco Query Loop, pode ajudar a realizar tarefas que normalmente precisariam de PHP para realizar. Por exemplo, como ele permite exibir artigos com base em parâmetros específicos, você pode exibir seus artigos mais recentes ou até mesmo criar um portfólio. No entanto, nada disso pode ser feito sem as duas últimas telas do Editor de Sites.
4. Templates
Templates são um elemento básico do desenvolvimento WordPress. São layouts reutilizáveis que ajudam a definir a estrutura das várias partes do seu site. Normalmente é necessário ter conhecimento de PHP, mas você pode personalizar todos eles (e criar novos) sem código no Editor de Sites.
![A interface de gerenciamento de templates do WordPress no Editor de Sites. Exibe vários templates de página, como Todos os Arquivos, Página Inicial do Blog, Índice e Página Sem Título, com miniaturas e descrições para cada template.](https://kinsta.com/wp-content/uploads/2024/07/templates-pages.png)
O trabalho com templates segue a mesma abordagem dos artigos e páginas: você usará o Editor de Sites para adicionar Blocos ao template, e daí salvará as alterações. Obviamente, essas alterações serão aplicadas a todas as páginas que usam o template em questão.
Para criar um novo template, clique no botão Adicionar novo template:
![Adicionando um novo template no Editor de Sites do WordPress. Mostra opções para adicionar templates para diferentes tipos de página, como Página Inicial, Páginas, Arquivos do Autor, Arquivos de Categorias e mais.](https://kinsta.com/wp-content/uploads/2024/07/add-template.png)
Isso fará com que você passe por um assistente rápido para selecionar o tipo de template que deseja criar e um Padrão de Bloco adequado para iniciar o design. Esses padrões são o foco da nossa última seção.
5. Padrões
Os Padrões de Bloco são coleções relacionadas de Blocos que desempenham funções específicas em seu site. Por exemplo, você pode inserir um padrão de cabeçalho completo com logo, navegação e título do site:
![O Editor de Sites do WordPress mostrando um Padrão de Bloco de Cabeçalho contendo itens de menu, um título do site, um espaço reservado para a logo e links para Política de Privacidade, Página de Exemplo e dois outros itens de texto de exemplo em latim. Os controles da interface do WordPress são visíveis na parte superior da imagem.](https://kinsta.com/wp-content/uploads/2024/07/block-pattern.png)
Criá-los é simples, embora, sem o editor de sites, você precisaria registrar esses padrões usando PHP. Agora, porém, você pode usar a página Padrões:
![A página de gerenciamento de padrões do WordPress no Editor de Sites. A barra lateral esquerda mostra categorias de padrões. A área principal exibe miniaturas de padrões de banner, incluindo imagens de edifícios e detalhes arquitetônicos.](https://kinsta.com/wp-content/uploads/2024/07/patterns-page.png)
No lado esquerdo, você verá todos os padrões disponíveis divididos em pastas chamadas “tipos”. Esses padrões são uma ótima maneira de criar rapidamente o design de um site, e muitas vezes têm uma aparência fantástica.
O botão Adicionar novo padrão abre o editor e permite que você mesmo crie essas seções. Isso permite criar elementos reutilizáveis para o seu site, o que representa uma maneira sustentável e autônoma de desenvolver sites para você e qualquer outra pessoa com quem trabalhe.
Dicas sobre como usar a edição completa de sites no WordPress para criar designs
Há muito a ser dito quando se trata da edição completa de sites no WordPress, e não podemos cobrir tudo o que você pode fazer com ela. No entanto, podemos lhe dar algumas dicas para aproveitar ao máximo o FSE.
Por exemplo, você pode exportar seus templates e estilos para reutilizá-los em outros sites. Para fazer isso, acesse o editor de sites para qualquer artigo ou página e clique no menu Opções na barra de ferramentas superior. No menu suspenso, escolha Exportar:
![A interface do Editor de Sites mostrando a tela principal de edição, opções de menu e uma barra lateral exibindo ferramentas de edição. Na parte inferior, a funcionalidade Exportar está destacada.](https://kinsta.com/wp-content/uploads/2024/07/options-export.png)
Isso lhe fornecerá um arquivo ZIP do seu tema, e, se você precisar importá-lo, poderá fazê-lo usando o plugin WordPress Importer.
O ícone Pesquisar nas telas do editor de sites e a barra de pesquisa na barra de ferramentas do Editor de Blocos dão a você acesso à Paleta de Comandos ou à Central de Comandos do WordPress. Se você usa editores de código, entenderá como isso funciona. É uma maneira de chegar a praticamente qualquer lugar dentro do Editor de Sites usando uma consulta de pesquisa contextual e até mesmo executar comandos:
![A Paleta de Comandos dentro do Editor de Sites. O menu suspenso mostra opções como Estilos, Posts Únicos, Páginas, Barra Lateral e Meta de Post, entre outros.](https://kinsta.com/wp-content/uploads/2024/07/command-palette-search.png)
Esse recurso pode acelerar o seu desenvolvimento e reduzir o número de ações que você precisa executar com teclado e mouse. Você pode adicionar, excluir e editar todos os tipos de elementos do site a partir daqui, além de alternar entre diferentes visualizações e trabalhar com padrões.
Resumo
A edição completa de sites no WordPress representa a maneira atual de projetar seu site sem código. É um avanço significativo em relação às iterações anteriores de edição de conteúdo, oferecendo-lhe um conjunto abrangente de opções para brincar.
Gostamos da sua flexibilidade: os proprietários de sites comuns não precisam tocar em uma linha de código e podem trabalhar nas telas do Editor de Sites. Os desenvolvedores têm acesso ao arquivo theme.json, que abordaremos em um artigo futuro. Independentemente disso, agora temos o auge da criação de um site WordPress que atenda com exatidão às suas preferências.
Quer começar a usar a edição completa de sites em seus projetos no WordPress? Diga-nos o que pensa na seção de comentários abaixo!
Deixe um comentário