Come modificare la larghezza di determinati blocchi di paragrafo o intestazione?

Question

Come modificare la larghezza di determinati blocchi di paragrafo o intestazione?

22 ott 2019, 17:34:20

Visualizzazioni: 17.4K

Voti: 0

La maggior parte delle volte preferisco che i blocchi occupino tutta la larghezza del mio sito (https://princetonfireandsafety.com/), ma a volte vorrei avere un'intestazione o un paragrafo che non sia così ampio. Ad esempio, quando il testo è composto da una o due righe, sembra strano che occupi tutta la pagina (come la sezione intitolata "Sapevi che gli estintori acquistati nei negozi devono comunque essere certificati per la tua attività?" Vorrei che fosse solo leggermente più ampio della colonna centrale sopra di esso).

Non ho idea di come ottenere questo risultato. Sto trascurando qualche opzione nell'editor a blocchi? È necessario intervenire con del codice CSS/HTML? O esiste un plugin che potrebbe semplificare il processo?

Utilizzo il tema OceanWP, se questo può essere rilevante.

Silbernagel Enterprises

1

plugin css html editor di blocks intestazioni

Commenti

Questo dovrebbe essere fattibile tramite l'API degli stili dei blocchi

Tom J Nowell

22 ott 2019 18:34:13

Sì, è il tuo tema che permette a tutti i blocchi di essere a larghezza intera. La soluzione migliore è creare un child theme o provare un tema diverso.

WebElaine

22 ott 2019 22:06:03

Tutte le risposte alla domanda

Commenti

Sì, avevo capito il CSS prima di vedere il tuo commento, ma usare % è sicuramente un suggerimento migliore! Cambierò presto, grazie. :)

Silbernagel Enterprises

28 ott 2019 01:51:57

Commenti

Il problema è che non vedo quelle opzioni per le colonne quando modifico il blocco Gutenberg delle colonne. Suppongo che semplicemente non siano disponibili per il tema oceanWP?

Silbernagel Enterprises

28 ott 2019 01:50:46

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

Aggiungi una classe al blocco
Poi puoi usare CSS per impostare la larghezza del blocco in questo modo:

.your-block-class {
width: 70%;
}

Aggiungi il codice CSS sopra al campo CSS personalizzato del tuo tema oppure al file style.css in aspetto>editor tema. Assicurati di usare un child theme se scegli la seconda opzione. E naturalmente sostituisci your-block-class sopra con il nome della classe che hai creato.

MODIFICA: ho notato che hai fatto così. Raccomando di usare % invece di px così si adatterà a mobile, tablet, ecc...

Ollie

26

25 ott 2019 04:40:46

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

Puoi sicuramente utilizzare CSS come già menzionato.

Prima di optare per la soluzione CSS potresti voler utilizzare le colonne come le tre colonne che hai sopra la sezione "Sapevi che i prodotti acquistati nei negozi...". Usare layout a colonne integrati piuttosto che CSS personalizzati potrebbe scalare meglio a lungo termine.

Ecco come apparirebbe utilizzando Gutenberg.

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

Nella seconda riga, ho utilizzato un blocco Gutenberg a 3 Colonne con qualcosa tipo 5% 90% 5% di larghezze.

Puoi usare lo stesso concetto con qualsiasi page builder che supporti layout a colonne.

Spero che questo ti aiuti.

marklchaves

21

25 ott 2019 07:30:51