Home » Genesis framework » Cómo hacer que el editor Gutenberg de WordPress sea más amplio en el tema Genesis Sample

Cómo hacer que el editor Gutenberg de WordPress sea más amplio en el tema Genesis Sample

Best WordPress hosting 2024

Usted probablemente ha notado que el contenido en el editor de WordPress se vuelve estrecha – llena mucho menos espacio en pantalla de lo habitual una vez que cambie a Génesis tema de la muestra. Puede que no sea un problema, pero todavía no es conveniente si usted está usando la pantalla de alta resolución. Especialmente si utiliza varias columnas en las páginas o mensajes.

Hay dos maneras de controlar la anchura del editor de WordPress en el uso de Génesis tema de la muestra (o en la mayoría de otros temas construidos sobre el marco de Génesis):

Le mostraré ambas opciones – siéntase libre de utilizar la que mejor se adapte a su flujo de trabajo.

Cómo cambiar el ancho del editor de WordPress en los temas de Génesis

Por defecto, el editor de WordPress busca la información de estilo del editor Gutenberg en los archivos del tema actualmente activo. Genesis Sample theme tiene algunos CSS personalizados para el editor de WordPress en sus carpetas. Así que para cambiar el ancho del editor tendremos que editar un archivo css.

Vaya a Apariencia >> Editor de Archivos de Tema, y abra el archivo lib >> gutenberg >> style-editor.css en el editor.

make wordpress editor wider in Genesis Sample theme

Para hacer los bloques por defecto de WordPress más anchos necesitas cambiar .wp-block max-width a un número mayor. Por ejemplo, a 960px:

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

También puede cambiar el ancho máximo de los bloques a ancho completo:

.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;
}

Después de guardar los cambios el contenido del editor de WordPress será más ancho – no es necesario hacer ningún paso extra.

En el mismo archivo css puede cambiar el tamaño de las fuentes, cambiar la familia de fuentes y otros elementos del editor de WordPress para asegurarse de que el editor de WordPress tiene un aspecto similar al de su tema personalizado Genesis Sample.

Sólo un recordatorio – estos ajustes no cambiarán el ancho del tema de Muestra de Génesis para los visitantes de su sitio. Es sólo para los administradores del sitio. Si desea cambiar el ancho del tema Genesis Sample para los visitantes del sitio, haga clic aquí para ver el tutorial.

Cómo eliminar completamente el estilo del tema del editor de WordPress

Si no desea que el editor de WordPress se parezca a su tema de WordPress, puede desactivar el estilo del tema en la configuración del editor de WordPress.

Para ello, abra cualquier entrada o página en el editor de WordPress. Haga clic en Opciones (tres puntos verticales) en la parte superior derecha del editor de WordPress, y haga clic en Preferencias.

how to disable theme styling in wordpress editor

En la ventana emergente desactiva la opción Usar estilos de tema.

disable theme styling css in gutenberg editor

Una vez hecho esto, el editor Gutenberg de WordPress utilizará los estilos predeterminados del tema y no intentará ajustarse al estilo de tu tema.

Tags:

Fathom analytics - privacy focused cookie-free website analytics

Most popular tutorials


Get our latest WordPress news and special offers from RockSolidWP!

Only useful WordPress and WooCommerce tips and tricks and exclusive offers for our readers once a month. No marketing nonsense.

Looking for reliable yet affordable WordPress hosting?
Hostinger is the way to go!

Get 10% OFF by using code IMAKEITWORK