Home » Genesis framework » Como tornar o editor do WordPress Gutenberg mais amplo no tema Gênesis Sample

Como tornar o editor do WordPress Gutenberg mais amplo no tema Gênesis Sample

Você provavelmente notou que o conteúdo no editor WordPress se torna estreito – preenche muito menos espaço na tela do que o normal, uma vez que você muda para o tema de Gênesis Sample. Pode não ser uma quebra de contrato, mas ainda não é conveniente se você estiver usando uma tela de alta resolução. Especialmente se você usar várias colunas em páginas ou posts.

Há duas maneiras de controlar o tamanho do editor WordPress no uso do tema Gênesis Sample (ou na maioria dos outros temas construídos sobre a estrutura do Gênesis):

Mostrarei a ambos – sinta-se à vontade para usar o que melhor se adapta ao seu fluxo de trabalho.

Como mudar a largura do editor WordPress nos temas do Gênesis

Best WordPress hosting 2024

Por padrão, o editor WordPress procura por informações de estilo do editor Gutenberg nos arquivos de temas atualmente ativos. O tema Genesis Sample tem algum CSS personalizado para editor WordPress em suas pastas. Portanto, para mudar a largura do editor, precisaremos editar um arquivo css.

Vá para Appearance >> Editor de arquivos temáticos, e abra a lib >> gutenberg >> arquivo style-editor.css no editor.

make wordpress editor wider in Genesis Sample theme

Para tornar os blocos padrão do WordPress mais largos, você precisa alterar a largura máxima dos blocos .wp para um número maior. Por exemplo, para 960px:

.wp-block {
   max-width: 960px;
}

Você também pode alterar a largura máxima dos blocos mais largos ou de largura total:

.wp-block[data-align="full"] .wp-block[data-align="wide"],
.wp-block[data-align="wide"] .wp-block[data-align="wide"],
.wp-block[data-align="wide"] {
	max-width: 1200px;
}

Após salvar as mudanças, o conteúdo do editor WordPress será mais amplo – não é necessário fazer nenhum passo extra.

No mesmo arquivo css você pode mudar o tamanho da fonte, a família de fontes e outros elementos do editor WordPress para garantir que o editor WordPress seja semelhante ao seu tema de exemplo de Gênesis personalizado.

Apenas um lembrete – estas configurações não mudarão a largura do tema Genesis Sample para os visitantes de seu site. É apenas para administradores do site. Se você quiser alterar a largura do tema Gênesis para os visitantes do site, clique aqui para o tutorial.

Como remover completamente o estilo de tema do editor WordPress

Se você não quiser que o editor WordPress se pareça com seu tema WordPress, você pode desativar o estilo de tema nas configurações do editor WordPress.

Para fazer isso, abra qualquer post ou página no editor WordPress. Clique em Opções (três pontos verticais) na parte superior direita do editor WordPress, e clique em Preferências.

how to disable theme styling in wordpress editor

Na janela popup, desligue Use a configuração de estilos de temas.

disable theme styling css in gutenberg editor

Quando você fizer isso, o editor do WordPress Gutenberg usará estilos de temas padrão – ele não tentará combinar com seu estilo de tema.

Fathom analytics