Cómo cambiar el ancho de ciertos bloques de párrafo o encabezado

Question

Cómo cambiar el ancho de ciertos bloques de párrafo o encabezado

22 oct 2019, 17:34:20

Vistas: 17.4K

Votos: 0

La mayoría de las veces me gusta que los bloques ocupen todo el ancho de mi sitio (https://princetonfireandsafety.com/), pero a veces solo quiero tener un encabezado o párrafo que no sea tan ancho. Por ejemplo, cuando el texto tiene solo una o dos líneas, se ve muy extraño ocupando toda la página (como en la sección titulada "¿Sabías que los extintores comprados en tiendas aún necesitan certificación para tu negocio?"). Me gustaría que tuviera un ancho similar al de la columna central que está arriba.

No tengo idea de cómo lograr esto. ¿Estoy pasando por alto alguna opción en el editor de bloques? ¿Requiere algún ajuste de CSS/HTML? ¿O existe algún plugin que facilite esto?

Estoy usando el tema OceanWP, por si eso influye en la solución.

Silbernagel Enterprises

1

plugins css html block editor encabezados

Comentarios

Esto debería ser posible mediante la API de estilos de bloques

Tom J Nowell

22 oct 2019 18:34:13

Sí, es tu tema el que permite que todos los bloques tengan ancho completo. La mejor opción es crear un tema hijo o probar con un tema diferente.

WebElaine

22 oct 2019 22:06:03

Todas las respuestas a la pregunta

Comentarios

Sí, ya había solucionado el CSS antes de ver tu comentario, pero usar % es definitivamente una mejor sugerencia. Cambiaré a eso pronto, gracias. :)

Silbernagel Enterprises

28 oct 2019 01:51:57

Comentarios

El problema es que no veo esas opciones para columnas al editar el bloque de columnas de Gutenberg. Supongo que simplemente no está disponible para el tema OceanWP.

Silbernagel Enterprises

28 oct 2019 01:50:46

Ollie 26 · Answer 1 · 2019-10-25T04:40:46Z

Añade una clase al bloque
Luego puedes usar CSS para establecer el ancho de ese bloque así:

.tu-clase-de-bloque {
width: 70%;
}

Añade el código CSS anterior al campo de CSS personalizado de tu tema o al archivo style.css en apariencia>editor de temas. Asegúrate de usar un tema hijo si haces lo último. Y por supuesto, reemplaza tu-clase-de-bloque arriba con el nombre de clase que creaste.

EDITADO: noté que hiciste esto. Recomiendo usar % en lugar de px para que se adapte a móviles, tablets, etc.

Ollie

26

25 oct 2019 04:40:46

marklchaves 21 · Answer 2 · 2019-10-25T07:30:51Z

Definitivamente puedes usar CSS como ya se mencionó.

Antes de optar por la ruta del CSS, quizás quieras usar columnas como las tres columnas que tienes encima de tu sección "¿Sabías que los productos comprados en tienda...". Usar diseños de columnas integrados en lugar de CSS personalizado podría escalar mejor a largo plazo.

Así es como se vería usando Gutenberg.

https://i.sstatic.net/Zh2QZ.jpg

En la segunda fila, utilicé un bloque de 3 Columnas de Gutenberg con anchos aproximados del 5%, 90% y 5%.

Puedes aplicar el mismo concepto con cualquier constructor de páginas que admita diseños de columnas.

Espero que esto ayude.

marklchaves

21

25 oct 2019 07:30:51