Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Guia completo do WordPress para iniciantes Edição completa do site

O WordPress evoluiu muito ao longo dos anos e, a cada atualização, traz novos recursos para facilitar a criação de sites. Uma das perguntas mais comuns que recebemos é sobre o uso do novo recurso Full Site Editing (FSE) introduzido no WordPress 5.9.

Pessoalmente, usamos um tema personalizado com base na estrutura Genesis e um construtor de páginas como o SeedProd para páginas personalizadas. No entanto, com o uso cada vez mais amplo do Full Site Editor, muitos usuários estão curiosos para saber como aproveitar esse novo recurso em seus sites.

O Full Site Editing estende essencialmente o conceito do editor de blocos a todo o site. Isso permite que você edite visualmente não apenas o conteúdo, mas também o cabeçalho, o rodapé e outros elementos estruturais do site.

Neste artigo, mostraremos a você como usar o Full Site Editor do WordPress. Seja você um novato no WordPress ou um usuário experiente que deseja explorar esse novo recurso, este guia o ajudará a criar um site de excelente aparência com o WordPress em pouco tempo.

Beginner's Guide to WordPress Full Site Editing

O que é edição completa do site (FSE) no WordPress?

O WordPress Full Site Editing (FSE) é essencialmente uma continuação do projeto Gutenberg. É um recurso que usa a interface do editor de conteúdo em bloco para as ferramentas de personalização de temas e sites integrados do WordPress.org.

Isso significa que você pode usar o editor de conteúdo em bloco não apenas para criar o conteúdo da página ou do post, mas também para um cabeçalho, rodapé, barra lateral e muito mais.

The WordPress Full Site Editor

O objetivo do Full Site Editing é simplificar a criação de sites no WordPress. Embora o WordPress seja bastante fácil de usar, ele nem sempre foi o mais fácil de usar para iniciantes.

Para começar, o Editor Clássico anterior é bastante simples. Quando você cria uma nova página, não pode ver a aparência dela imediatamente. Em vez disso, é necessário alternar entre a página de visualização e a interface de edição para ver a aparência da página no front-end.

Classic editor post example

Algumas pessoas também consideram o personalizador de temas do WordPress limitado, pois ele não tem a funcionalidade de arrastar e soltar.

Em outras palavras, não é possível mover e editar elementos exatamente como você deseja. É por isso que muitas pessoas instalam um plug-in do construtor de páginas do WordPress para obter mais flexibilidade em seu design.

Travel theme in the customizer

O projeto Gutenberg visa resolver esses problemas introduzindo ferramentas de construção de sites mais novas e mais fáceis de usar, incluindo o Full Site Editing.

Com o FSE, os iniciantes podem criar seus sites WordPress usando um editor de blocos fácil de arrastar e soltar e ver uma visualização ao vivo à medida que fazem alterações.

O que você deve saber antes de usar a edição completa do site no WordPress

Antes de usar o WordPress Full Site Editor, você deve saber que esse recurso está disponível apenas para usuários de temas de blocos do WordPress.

Se você usar um tema que não seja em bloco (clássico), não terá acesso ao Full Site Editor. Em vez disso, você terá de usar o personalizador de temas do WordPress ou um construtor de páginas compatível para fazer personalizações.

Se você quiser ver alguma inspiração de tema de bloco, vá em frente e confira nosso guia dos melhores temas de edição completa de site do WordPress.

Outro aspecto a ser lembrado é que a Edição Completa do Site do WordPress funciona da mesma forma que o editor de conteúdo em blocos do Gutenberg. Com isso em mente, recomendamos a leitura de nosso guia sobre como usar o editor de blocos do WordPress.

Neste guia, vamos nos concentrar em como usar os recursos de edição completa do site do WordPress para editar o design, o conteúdo e o layout de sua página da Web. Você pode usar esses links rápidos para pular para um tópico específico:

Como acessar os recursos completos de edição do site do WordPress

Para acessar o WordPress Full Site Editor, você precisa acessar o painel do WordPress e ir para Appearance ” Editor.

Selecting the Full-Site Editor from the WordPress admin panel

Depois disso, você chegará ao WordPress Full Site Editor.

Esta é a aparência da interface:

The WordPress Full Site Editor

No lado esquerdo, você encontrará um painel com as principais configurações. Enquanto isso, o lado direito tem uma visualização de como é o seu site. Você pode clicar nesse lado se quiser editar seu site imediatamente.

Há cinco configurações principais: Navegação, Estilos, Páginas, Modelos e Padrões. Vamos examinar todas elas uma a uma.

Como editar seu menu de navegação com o FSE

A primeira configuração na parte superior é Navigation (Navegação), que permite que você edite o menu de navegação do tema de bloco. Vá em frente e clique nela.

Selecting Navigation in WordPress Full Site Editing

Há várias coisas que você pode fazer nessa página.

Ao clicar no botão de três pontos ao lado de “Navegação”, você pode renomear, duplicar ou excluir o menu.

Clicking the three-dot button next to Navigation in WordPress Full Site Editing

Você também pode reorganizar ou remover a(s) página(s) listada(s) no menu.

Para fazer isso, clique no botão de três pontos ao lado de uma das páginas. Você verá opções para Mover para cima, Mover para baixo e Remover a página. Se quiser editar essa página específica, você poderá selecionar o botão “Ir para …”.

Clicking the three-dot button next to a page link in Navigation inside WordPress Full Site Editing

Outra coisa que você pode fazer é personalizar o design do menu e os links.

Para fazer isso, basta clicar no ícone de lápis “Edit” para abrir o editor de blocos.

Clicking the pencil edit button for Navigation in WordPress Full Site Editing

Agora, será exibida a interface de edição do menu de navegação, que se parece com o editor normal do Gutenberg.

Adição, edição, remoção e reorganização de elementos de menu

Antes de continuarmos, observe que o local do menu de navegação do seu site dependerá do seu tema. Ele pode estar na parte superior, na lateral ou oculto, aparecendo somente quando você clicar em um determinado botão.

Para adicionar um novo link de página, você pode clicar no botão “+” adicionar bloco no menu. Agora, basta digitar o nome da página, o título da postagem ou o URL externo que deseja inserir no menu de navegação e selecioná-lo.

Adding a new page link in a navigation menu using the WordPress Full Site Editor

Se a página para a qual você deseja criar o link ainda não tiver sido criada, você ainda poderá adicionar um link ao menu de navegação.

Basta digitar o nome da página de rascunho na barra de pesquisa e clicar em “Criar página de rascunho”. O WordPress criará uma página com esse nome que você poderá editar posteriormente.

Creating a draft page in the WordPress Full Site Editor for the navigation menu

Se você quiser editar as configurações de link, nome e guia da página, basta selecionar a página e clicar no ícone de link na barra de ferramentas do bloco.

Depois de fazer isso, selecione o botão de lápis.

Editing a page link from the block toolbar in WordPress Full Site Editing

Agora, você poderá alterar o link da página e fazer com que o link seja aberto em uma nova guia.

Quando terminar, basta clicar em “Salvar”.

Editing a page link and clicking Save for the navigation menu in WordPress Full Site Editing

Você também pode adicionar novos elementos de menu de navegação aqui, além dos links de página.

Tudo o que você precisa fazer é clicar no botão “+” adicionar bloco. Depois disso, você encontrará algumas opções de blocos de navegação disponíveis para uso, como o logotipo do site ou a tagline do site.

Às vezes, pode ser necessário rolar a tela para baixo para encontrar esses blocos. Você também pode escolher “Browse all” para ver a lista completa das opções de blocos.

Adding other menu elements besides a page link in WordPress Full Site Editing

Em algum momento, você também pode querer reorganizar os elementos do menu.

Para fazer isso, selecione um bloco e escolha um dos ícones de seta para mover o bloco para a esquerda ou para a direita.

Moving menu blocks to the left in WordPress Full Site Editing

Agora, se você quiser remover um link de página ou outros elementos do menu, poderá selecionar o elemento que deseja excluir.

Em seguida, clique no menu de três pontos na barra de ferramentas do bloco e escolha “Excluir”.

Deleting a block from the navigation menu in WordPress Full Site Editing

Para obter mais detalhes, consulte nosso tutorial sobre como remover um bloco no WordPress.

Criação de um submenu

Se você tiver muitas páginas da Web, como uma loja on-line, talvez queira criar um submenu suspenso. Dessa forma, seu menu de navegação não ficará cheio de muitos links e parecerá muito mais organizado.

A primeira etapa para criar um submenu é clicar no botão “+” adicionar bloco e selecionar o bloco “Submenu”.

Selecting the Submenu block in Navigation inside WordPress Full Site Editing

Em seguida, você selecionará uma página ou URL que funcione como o menu pai do submenu.

Por exemplo, se você tiver um blog, poderá usar a página do blog como o menu principal. No submenu, haverá links para as páginas de categorias individuais do conteúdo do seu blog.

Neste exemplo, selecionaremos “Blog”.

Selecting the Blog page as the submenu's parent menu in WordPress Full Site Editing

Depois de fazer isso, basta clicar no botão “+” para adicionar o bloco.

Ele deve estar abaixo do menu principal.

Adding a page link block as a submenu in the WordPress Full Site Editor

Nesse ponto, você pode digitar o nome do link da página que deseja inserir e selecioná-lo. Sinta-se à vontade para repetir essa etapa para adicionar quantos links de submenu forem necessários.

Quando terminar de usar o menu de navegação, não se esqueça de salvar as alterações clicando no botão “Save” (Salvar) no canto superior direito.

Clicking Save to make the menu changes official in WordPress Full Site Editor

Como alterar os estilos globais do seu site com o FSE

A próxima configuração abaixo de Navigation é Styles (Estilos). Esse recurso permite que você altere o design de todo o seu site.

Quando estiver na página Styles (Estilos), você verá algumas opções de estilo predefinidas, cada uma com diferentes cores, tipografia e opções de layout. Observe que essas opções predefinidas terão aparência diferente de um tema de bloco para outro.

The Styles page in WordPress Full Site Editor

Você também pode clicar no ícone de olho ao lado de ‘Styles’, que representa o Livro de estilos.

Com isso, você poderá ver a tipografia das opções de estilo e a aparência dos blocos de texto que usarão esse estilo, como títulos, parágrafos, listas e assim por diante.

Choosing the Style Book feature in WordPress Full Site Editor

Da mesma forma que na seção anterior, o botão de lápis nessa página o levará à interface de edição.

Aqui, você usará principalmente o painel do lado direito para alterar a tipografia, as cores, a imagem de fundo, as sombras e o layout de acordo com suas necessidades exatas. Você também pode personalizar a aparência de blocos específicos para todo o site.

The Global Styles settings in WordPress Full Site Editor

Normalmente, você verá sua página inicial no editor. No entanto, as alterações que você fizer aqui também serão refletidas nas outras páginas da Web.

Edição da tipografia de seu site

Para alterar as fontes do seu site, navegue até a barra lateral Styles (Estilos) à direita e selecione “Typography” (Tipografia).

Agora, você verá vários elementos de texto que podem ser editados: Texto, Links, Cabeçalhos, Legendas e Botões.

What Typography elements are available to edit in WordPress Full Site Editor

As configurações do elemento Text determinam a aparência das fontes em todo o site. Isso significa que se você fizer alterações nesse elemento, elas serão refletidas em todos os blocos que usam texto em seu site.

Dito isso, você pode clicar no elemento Links, Cabeçalhos, Legendas ou Botões para editar o estilo desses blocos específicos para que tenham uma aparência diferente do restante do texto.

Por exemplo, se quiser que os títulos tenham uma fonte diferente da do bloco de parágrafos para se destacarem mais, você poderá definir as configurações no elemento Headings.

Em geral, você pode modificar a fonte, o tamanho, a aparência e a altura da linha de cada elemento.

As opções de fonte dependem do tema que você está usando. Enquanto isso, Appearance controla se você deseja usar uma versão regular, em negrito ou em itálico da fonte.

The Text element settings in WordPress Full Site Editor

Alguns elementos podem ter configurações específicas, portanto, não deixe de explorá-los um a um.

Por exemplo, o elemento Headings (Títulos) tem opções para personalizar o espaçamento entre letras e as letras maiúsculas e minúsculas.

The Headings typography element settings in WordPress Full Site Editor

Personalização da paleta de cores do seu site

Vamos definir o esquema de cores de seu site. Para fazer isso, basta clicar em “Colors” (Cores) no painel Styles (Estilos). Você verá duas seções: Paleta e Cor.

Escolha as cores em “Palette”.

Selecting Palette in the Color options within WordPress Full Site Editor

Na guia Solid (Sólido) da paleta, você verá as seções Theme (Tema), Default (Padrão) e Custom (Personalizado).

O tema inclui cores que podem ser usadas para personalizar a paleta de cores de todo o seu site.

Theme, Default, and Custom color settings in the Styles tab within WordPress Full Site Editor

Enquanto isso, as cores padrão podem modificar os blocos com configurações de cores. Observe que alguns temas podem não incluir esse recurso, portanto, talvez você não o veja em seu editor.

Por fim, Custom colors (Cores personalizadas) são cores que você pode adicionar ao tema. Você pode usar essa configuração se nem as opções de cores Theme ou Default forem adequadas para você.

Para adicionar uma nova cor personalizada, basta clicar no botão “+ Adicionar cor” e usar a ferramenta de seleção de cores.

Adding a Custom color in WordPress Full Site Editor

Se você quiser alterar uma cor de tema, padrão ou personalizada, basta selecionar uma cor e usar a ferramenta de seleção de cores para alternar para uma opção diferente.

Lembre-se de que os blocos que usam essas cores também serão afetados.

Changing a solid color in the Styles settings within WordPress Full Site Editor

Vamos mudar para a guia “Gradient” (Gradiente). É semelhante à guia Solid, mas as opções de cores estão na forma de gradientes, que são uma mistura de duas ou mais cores.

As opções de tema incluem algumas opções de gradiente usando as cores sólidas do tema. Por outro lado, as configurações Padrão são gradientes de cores que você pode usar para personalizar blocos.

As cores de duotons são filtros que você pode adicionar a blocos com imagens. Você só pode ver quais duotons estão disponíveis, mas não pode editá-los aqui.

The Gradient tab in Styles settings of WordPress Full Site Editor

Você também pode criar gradientes personalizados, se necessário.

Para fazer isso, basta clicar no botão “+ Adicionar cor”. Em seguida, você pode selecionar o tipo de gradiente Linear ou Radial e personalizar a direção do gradiente alterando o Ângulo.

Além disso, fique à vontade para selecionar mais cores para a mistura de gradiente clicando em um ponto no controle deslizante. Um seletor de cores será exibido para que você escolha uma cor.

Creating a custom gradient color in WordPress Full Site Editor

Voltando à guia Colors (Cores), você pode personalizar as configurações de cores específicas de Text (Texto), Background (Plano de fundo), Link (Link), Captions (Legendas), Button (Botão) e Heading (Título).

Basta clicar em um elemento e selecionar uma cor sólida ou gradiente para alterar a cor do elemento. Você também pode selecionar a seção de visualização para acessar o seletor de cores.

Changing the background color in WordPress Full Site Editor

Adição de uma imagem de fundo

Se quiser usar uma imagem de plano de fundo em vez de uma cor de plano de fundo em seu tema de bloco, você pode clicar na opção “Background” (Plano de fundo) no menu principal Styles (Estilos).

A partir daí, você pode selecionar uma imagem existente na biblioteca de mídia ou carregar uma nova imagem grande.

Adding a background image in full-site editor

Alteração dos efeitos de sombra projetada

Outro aspecto que você pode alterar no Full Site Editor são os efeitos de sombra aplicados aos blocos. Você pode ativar esse efeito em determinados blocos, como o botão de chamada para ação.

Changing drop shadow effects in FSE

Para editar um efeito de sombra, basta clicar em uma das opções abaixo de “Padrão”.

Em seguida, você pode alterar a cor da sombra, o contorno ou a inserção, a posição, o desfoque e as configurações de propagação.

Editing the drop shadow effects in FSE

Ajuste do layout de seu site

A última opção na guia Styles (Estilos) é Layout. É aqui que você pode modificar o espaço entre os elementos da página da Web.

The Styles tab's Layout settings in WordPress Full Site Editor

Na parte superior do painel Layout, você encontrará configurações para alterar a largura de Conteúdo e Ampla da página. A largura do conteúdo determina a largura padrão de um bloco individual quando a configuração de alinhamento é Nenhum na barra de ferramentas do bloco.

Por outro lado, a largura Wide decide a largura padrão dos blocos quando eles são definidos para o alinhamento de largura Wide.

Abaixo disso está o Padding, que controla os espaços externos ao redor do conteúdo da página da Web.

Usando os controles deslizantes disponíveis, você pode definir o preenchimento superior, inferior, esquerdo e direito. Se quiser ser mais específico com o tamanho do preenchimento, clique no ícone do controle deslizante para inserir um tamanho de pixel, como na captura de tela abaixo.

Configuring the Padding settings in WordPress Full Site Editor

Na parte inferior, você verá as configurações de Espaçamento de blocos. Essa opção determina os espaços entre os blocos individuais para que eles não fiquem muito próximos ou distantes uns dos outros. Você pode editá-la da mesma forma que edita o Padding.

Lembre-se de clicar no botão “Save” (Salvar) no canto superior direito para oficializar suas alterações.

Saving the global Styles changes with WordPress Full Site Editing

Alteração da aparência de um bloco específico

Se quiser personalizar a aparência de um bloco específico em todo o site, você pode clicar na opção “Blocks” (Blocos) no menu principal do painel Styles (Estilos).

A partir daí, você pode selecionar um dos blocos padrão do WordPress disponíveis.

Choosing a block whose appearance needs to be customized in FSE

As configurações específicas de estilo para cada bloco serão diferentes.

Por exemplo, se você escolher o bloco Parágrafo, poderá alterar a fonte, a altura da linha, o espaçamento entre letras e assim por diante. Alguns blocos também incluem a opção de alterar sua altura e largura.

Changing the style of the paragraph block in FSE

Adição de CSS personalizado

Se quiser adicionar CSS personalizado ao seu tema de bloco, você poderá fazê-lo nessa configuração.

Basta clicar no menu de três pontos no menu principal do Styles. Em seguida, selecione “CSS adicional”.

Opening the Additional CSS menu in full-site editor

A partir daí, você pode inserir algum código CSS na caixa apropriada.

Assim:

Inserting custom CSS in full-site editor

Como personalizar páginas do WordPress com o FSE

Até agora, abordamos a navegação e os estilos. Vamos agora passar para Pages. Nessa guia, você verá uma lista das páginas existentes. Falaremos mais sobre como editá-las mais tarde.

Pages page in FSE

Você também pode criar uma nova página diretamente no Full Site Editor.

Para fazer isso, basta clicar no botão “Add New Page” (Adicionar nova página). Depois disso, dê um nome à sua nova página e clique em “Create draft” (Criar rascunho).

Adding a new page in FSE

A partir daí, você pode começar a personalizar a página.

Para editar uma página existente, selecione a página que você deseja modificar. Nesse caso, é a “Política de privacidade”.

Editing a page in FSE

Editar páginas usando o Full Site Editor é basicamente o mesmo que usar o editor de blocos.

Para obter mais informações sobre isso, temos vários guias para você ler. Você pode começar com estes:

Como editar modelos do WordPress com o FSE

Na página Templates (Modelos) do WordPress Full Site Editor, você verá uma lista dos modelos fornecidos pelo seu tema.

The Templates page in FSE

No WordPress Full Site Editing, os modelos são estruturas predefinidas que você pode usar para criar um tipo específico de página em seu site.

Por exemplo, muitos temas de blocos do WordPress vêm com um modelo Single Post. Esse modelo de página define o layout de uma página de postagem de blog, o que significa que todas as postagens de blog nesse site usarão esse modelo.

Esse recurso pode ser útil se você tiver várias páginas em seu blog do WordPress e muitas delas usarem o mesmo layout.

Se você precisar alterar o mesmo elemento nessas páginas, mas não quiser editar cada uma delas individualmente, basta modificar o modelo. Em seguida, as alterações serão aplicadas a todas as páginas que usam esse modelo.

Se você quiser criar um modelo personalizado, selecione o botão “Add New Template” (Adicionar novo modelo).

A partir daí, basta selecionar a página à qual o novo modelo deve ser aplicado.

Como alternativa, você pode rolar para baixo até a parte inferior e escolher “Modelo personalizado”.

Selecting a page template to customize with WordPress Full Site Editing

Nesse estágio, você verá a interface de edição com uma página em branco à qual poderá começar a adicionar blocos. Para obter um exemplo passo a passo, confira nosso guia sobre como criar um modelo de página inicial personalizado usando o editor de blocos.

Para editar um modelo existente, basta clicar nele.

Editing a template in FSE

Agora, você pode editar o modelo de página da mesma forma que edita outros elementos usando o editor de blocos. Você pode adicionar novos blocos e personalizar as configurações do bloco ou da página.

Se estiver editando uma página ou postagem usando o editor de blocos e quiser alterar o modelo sem acessar o modo de edição completa do site, você também poderá fazer isso.

Basta ir até a página ou postagem e abrir a barra lateral Configurações da página ou postagem. Em seguida, localize a seção “Template” (Modelo) em “Summary” (Resumo) e clique nela.

Clicking Edit template on a page to access the WordPress Full Site Editor for Templates

Você pode usar o menu suspenso para alterar o modelo da página ou clicar em “Edit template” (Editar modelo) para acessar o editor de modelos imediatamente. Como alternativa, sinta-se à vontade para clicar no botão “Adicionar modelo” para criar um novo modelo personalizado do zero.

Como modificar os padrões do WordPress com o FSE

No WordPress Full Site Editing, os padrões são conjuntos de blocos prontos para uso que podem ser inseridos em uma página ou postagem. Quando você cria um padrão, ele é adicionado ao seu diretório de blocos e pode ser facilmente adicionado a qualquer post ou página do seu site.

The Block Pattern directory in WordPress block editor

Os padrões são úteis quando você precisa usar o mesmo conjunto de blocos para várias páginas ou postagens. Muitas pessoas o usaram para criar banners personalizados de chamadas para ação ou galerias de imagens em suas postagens de blog.

Além disso, você tem a opção de tornar esses padrões “sincronizados”. Isso significa que, se um padrão for usado em vários posts ou páginas, qualquer modificação que você fizer será automaticamente aplicada a todas as instâncias em que o padrão for usado.

Na página Patterns (Padrões) do WordPress Full Site Editor, você verá uma coleção de padrões.

The Patterns page in FSE

Os menus marcados com um ícone de pasta contêm uma lista de padrões predefinidos oferecidos pelo tema escolhido. Eles estão bloqueados e não podem ser editados.

Abaixo disso, você encontrará “Partes do modelo”, que são um tipo especial de padrão usado na estrutura do site e não necessariamente uma parte do conteúdo da página. Os exemplos incluem o cabeçalho, o rodapé, a seção de comentários e assim por diante. Todos eles são personalizáveis.

Para adicionar um novo padrão, clique no botão “+ Criar padrão” no painel esquerdo e escolha entre criar um novo padrão ou uma peça de modelo.

Adding a new pattern or template part in FSE

Se você está confuso sobre qual deles deve escolher, então um padrão é semelhante a um bloco reutilizável que você pode adicionar ao conteúdo de sua página ou post. Enquanto isso, uma parte do modelo é mais parecida com um conjunto de blocos que fazem parte da estrutura do modelo, como um cabeçalho, rodapé ou barra lateral.

Uma parte do modelo terá automaticamente uma capacidade de sincronização, de modo que todas as alterações feitas nela serão aplicadas em todo o site. Pense em partes como o cabeçalho ou o rodapé.

Por outro lado, um padrão pode ser sincronizado ou não sincronizado.

Depois disso, você deve nomear a peça ou o padrão do modelo e escolher se deseja sincronizá-lo. Depois de fazer isso, basta clicar em “Create” e você será redirecionado para a interface de edição.

Naming a new pattern in WordPress Full Site Editor

Para obter mais informações sobre como criar e usar padrões, consulte nosso guia para iniciantes sobre como usar padrões de blocos do WordPress.

Ao editar uma página ou modelo, talvez você também queira ajustar um padrão de bloco ou uma parte do modelo. Você pode fazer isso diretamente no editor sem acessar o menu Patterns.

Basta passar o mouse sobre a parte do padrão ou modelo. Depois disso, clique em “Editar”. Você será redirecionado para o Full Site Editor desse elemento.

Clicking Edit on a pattern or template part when editing a post or page using the block editor

Dicas para aproveitar ao máximo a edição completa do site no WordPress

Agora que você já conhece os conceitos básicos da edição completa do site, vamos discutir algumas dicas e truques para aproveitá-la ao máximo.

Usar a barra de pesquisa de comandos

Com a barra de pesquisa de comandos, você pode navegar rapidamente para uma determinada parte do seu site ou executar ações para editar o design da Web.

Esse recurso pode ser útil se você quiser encontrar uma configuração específica no Full Site Editor imediatamente, em vez de passar por diferentes botões e menus.

Se você estiver no menu principal do Full Site Editor, poderá clicar no ícone da lupa para usá-lo.

Clicking the magnifying glass icon in WordPress Full Site Editor

Como alternativa, você pode pressionar Ctrl/Command+K no teclado enquanto estiver na interface de edição.

Em seguida, basta digitar o que você deseja encontrar ou fazer. Por exemplo, você pode adicionar um novo post ou página sem retornar ao painel do WordPress.

Using the Command Search Bar to add a new post or page

Gerenciar blocos com visualização de lista

Ao editar uma página, um modelo ou um padrão, você pode acabar adicionando tantos blocos que fica difícil acompanhar todos eles.

É nesse ponto que a Visualização de lista pode ser útil. Com esse recurso, você pode ver todos os blocos adicionados à página, ao modelo ou ao padrão, inclusive os que estão aninhados em outro bloco pai.

Para ativar o recurso List View, basta pressionar o botão de três linhas no canto superior esquerdo da barra de menus do editor. Em seguida, você verá todos os blocos usados nessa página, postagem, modelo ou padrão.

Se quiser configurar um bloco específico que esteja dentro de um grupo, linha, coluna ou similar, basta clicar nesse bloco na Exibição de lista. A partir daí, o bloco será selecionado e a barra de ferramentas será exibida.

Activating the List View on Full Site Editor

Veja um exemplo na captura de tela acima. Aqui, queremos editar o bloco da imagem em destaque, mas sempre que clicamos nele, o bloco do loop de consulta é selecionado.

O uso da visualização de lista nos ajuda a ver todos os blocos aninhados dentro do bloco de loop de consulta e a selecionar o bloco que realmente queremos editar.

Familiarize-se com os atalhos de teclado

Se quiser ser mais rápido na edição de seu site, considere a possibilidade de aprender atalhos de teclado. Com os atalhos, você pode navegar por diferentes botões e configurações usando o teclado, em vez de ir e voltar movendo o mouse.

Os atalhos usados no editor de conteúdo em bloco também funcionarão no Full Site Editing. Para obter mais informações, consulte nossa lista de atalhos de teclado do WordPress.

Criar um tema de bloco filho

Um dos problemas de usar um tema do WordPress é que, se você fizer personalizações nos arquivos do tema principal, essas alterações poderão se perder durante uma atualização do tema. É nesse ponto que um tema de bloco filho é útil.

Um tema de bloco filho herda todos os estilos e funcionalidades do tema de bloco pai, permitindo que você faça modificações sem afetar os arquivos do tema principal. Dessa forma, você pode atualizar facilmente o tema principal no futuro sem perder suas personalizações.

Se você já criou temas filhos para temas clássicos antes, a criação de um tema filho de bloco funciona de forma um pouco diferente.

Isso ocorre porque os temas de bloco usam um arquivo theme.json para armazenar informações sobre o tema e CSS para estilizar o site. Não há necessidade de modificar os arquivos PHP do tema principal em um tema de bloco filho.

Felizmente, criar um tema de bloco filho não é tão complicado quanto parece. A maneira mais fácil que encontramos é usar o plug-in Create Block Theme.

Creating a child theme with Create Block Theme

O plug-in Create Block Theme não apenas permite que você crie facilmente um tema de bloco filho para seu tema existente, mas também é uma ótima ferramenta para criar seu próprio tema de bloco do zero.

Dessa forma, você tem controle total sobre o design e a funcionalidade do seu site sem depender de um tema pré-fabricado.

Para obter mais informações sobre a criação de temas filhos no WordPress, consulte nosso guia sobre como criar um tema filho.

Limitações da edição completa do site no WordPress

A Edição Completa do Site do WordPress definitivamente tornou mais fácil para os novos usuários do WordPress personalizarem seus sites. Ainda assim, esse recurso tem algumas deficiências.

Para começar, você precisará de um tema de bloco para usá-lo. Há muitos novos temas de blocos disponíveis, mas não são tantos quanto os temas comuns do WordPress. Se você usa o WooCommerce, suas opções de tema podem ser ainda mais limitadas.

Além disso, alguns usuários do WordPress não gostam do fato de os temas em blocos não terem widgets. Embora os blocos ofereçam mais flexibilidade no posicionamento, alguns usuários preferem a simplicidade dos widgets de arrastar e soltar em áreas designadas.

Além disso, a troca de temas pode ser um incômodo, pois você terá que configurar o tema novamente e verificar se há problemas de compatibilidade com os plug-ins do WordPress.

Além disso, grande parte de sua personalização depende das opções oferecidas pelo tema do WordPress. Isso pode limitar sua criatividade ao criar seu site.

Como usar uma alternativa de edição completa do site

Se estiver procurando uma alternativa para a edição completa do site no WordPress, você pode dar uma olhada no SeedProd. Ele é um poderoso plugin de criação de páginas e de temas com mais de 300 modelos compatíveis com dispositivos móveis para criar qualquer tipo de site.

O construtor de arrastar e soltar é fácil de usar, e há mais de 90 blocos de página disponíveis para elementos de conteúdo. Há também dezenas de seções pré-criadas, como chamadas para ação, que são otimizadas para conversões, para que você não precise projetar esses elementos do zero.

SeedProd theme builder

Para obter mais informações, leia nossa análise do SeedProd e nosso artigo sobre como criar um tema personalizado para o WordPress.

Esperamos que este guia para iniciantes tenha ajudado você a aprender a usar o Full Site Editing (FSE) do WordPress. Talvez você também queira conferir nosso artigo sobre problemas comuns do editor de blocos do WordPress e nosso guia definitivo sobre SEO para WordPress.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Veja como o WPBeginner é financiado, por que isso é importante e como você pode nos apoiar. Aqui está nosso processo editorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

O kit de ferramentas definitivo WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Reader Interactions

14 ComentáriosDeixe uma resposta

  1. Simone

    Thanks for the comprehensive guide.
    Im looking a way to add custom icons (for example Font Awesome) near items (pages, categories, submenus, custom links) in the navigation. Is that possible?

  2. Mrteesurez

    For me, I still love Classic editing, yes. Even some ecommerce plugins and other recommendations Classic editior.

    Gutenberg is quite slow, sluggish, and not in anyway friendly on mobile.

    I prefer using page builder may be like Seedprod or elementor instead of gutenberg.

    There are still many works for the community to do on that part of gutenberg to make it friendly, fast and mobile optimize.

    • WPBeginner Support

      Thank you for sharing your feedback on the current block editor :)

      Administrador

      • Mrteesurez

        But one thing I am thinking of is that, one day, Gutenberg might chase away page builders once it’s well developed to be friendly and fast.

        Block editor should be the best if given attention the community, may be later in future.

        This gives me a hope that WordPress still have future.

        • Moinuddin Waheed

          Gutenberg is the future as for as wordpress is concerned.
          see as for the WordPress developers are concerned, they are making every effort possible to make the WordPress as accessible and available open source as possible.
          As for complexity, we have been used to using classic editor for a long time, given the time and energy invested, it is but natural to have an inclination towards it.

  3. Jiří Vaněk

    I avoided editing the website using full site editing for quite a long time. For one simple reason. I don’t like working in Gutenberg, so I automatically assumed that working with full site editing would be as uncomfortable as working in Gutenberg. But after reading this article, I will probably give this possibility a chance and try to explore it more deeply. Thanks to wpbeginner, I’ve already learned to control quite a lot of things in Gutenberg, so I’m slowly getting used to finally knowing where to find what and where to set what specifically.

  4. THANKGOD JONATHAN

    Can I do the full site editing without any coding skills? As I always egnore this action in my WP admin dashboad because of been afraid not to cause any problems on my site but now as always, I will try to edit some global settings of my site if the editing is visual.

    • WPBeginner Support

      You certainly can use the full site editor without coding knowledge :)

      Administrador

  5. Moinuddin Waheed

    Full site edit is very good to use for the site to be light and no extra code required. when we install any external plugin for page building, though it makes our task easy but at the same time there is some tradeoff in terms of page speed and load. This full site editor I think will help us build a lightning fast blog which will have fast loading time and Efficient.
    thank you for let us know about full site edit.

    • WPBeginner Support

      You’re welcome :)

      Administrador

    • Jiří Vaněk

      That’s not quite the case. It always depends on the creator of the website. I built about 7 websites on Elementor, and in pagespeed Insight they all have speeds of 98 to 99. It’s not the pagebuilder, but the overall optimization of the website. Unfortunately, full site editing does not guarantee a fast website. It is important to consider the web as a complex unit.

  6. Ralph

    Wow, this looks really powerful! Do you guys think it may be answear to the elementor builder? I’ve heard using elementor is bad, as it may slow down website a lot.

    • WPBeginner Support

      It heavily depends on how you design the site for speed concerns, the plugin itself should not cause a massive performance drop. While the full site editor is improving we would recommend taking a look at the final section of the article for our opinion :)

      Administrador

Deixe uma resposta

Obrigado por deixar um comentário. Lembre-se de que todos os comentários são moderados de acordo com nossos política de comentários, e seu endereço de e-mail NÃO será publicado. NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.