Cum să modific lățimea anumitor blocuri de paragraf sau titlu?

Question

Cum să modific lățimea anumitor blocuri de paragraf sau titlu?

22 oct. 2019, 17:34:20

Vizualizări: 17.4K

Voturi: 0

În majoritatea cazurilor, prefer ca blocurile să ocupe întreaga lățime a site-ului meu (https://princetonfireandsafety.com/), dar uneori doresc să am un singur bloc de titlu sau paragraf care să nu fie atât de mare. De exemplu, dacă textul are doar una sau două linii, arată ciudat întins pe întreaga pagină (cum ar fi secțiunea de pe pagina mea intitulată "Știai că stingătoarele de incendiu cumpărate din magazine trebuie să fie certificate pentru afacerea ta?" Aș dori doar o lățime puțin mai mare decât coloana din mijloc de deasupra ei).

Nu am nicio idee cum să realizez acest lucru. Oare trec pe lângă vreo opțiune în editorul de blocuri? Este nevoie de CSS/HTML? Sau există vreun plugin care ar face acest lucru mai ușor?

Folosesc tema OceanWP, dacă contează.

Silbernagel Enterprises

1

pluginuri css html editor pe blocuri anteturi

Comentarii

Aceasta ar trebui să fie posibilă prin API-ul de stiluri pentru blocuri

Tom J Nowell

22 oct. 2019 18:34:13

Da, tema ta este cea care permite tuturor blocurilor să aibă lățime completă. Cea mai bună soluție este fie să creezi o temă copil, fie să încerci o altă temă.

WebElaine

22 oct. 2019 22:06:03

Toate răspunsurile la întrebare

Comentarii

Da, am rezolvat partea cu CSS înainte să văd comentariul tău, dar folosirea % este cu siguranță o sugestie mai bună! Voi trece la asta în curând, mulțumesc. :)

Silbernagel Enterprises

28 oct. 2019 01:51:57

Comentarii

Problema este că nu văd acele opțiuni pentru coloane atunci când editez blocul Gutenberg columns. Presupun că pur și simplu nu sunt disponibile pentru tema OceanWP?

Silbernagel Enterprises

28 oct. 2019 01:50:46

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

Adaugă o clasă la bloc
Apoi poți folosi CSS pentru a seta lățimea blocului astfel:

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

Adaugă codul CSS de mai sus în câmpul CSS personalizat al temei tale sau în fișierul style.css din aspect>editor de teme. Asigură-te că folosești o temă copil dacă alegi a doua variantă. Și, bineînțeles, înlocuiește your-block-class de mai sus cu numele clasei pe care ai creat-o.

EDIT: am observat că ai făcut asta. Recomand să folosești % în loc de px pentru a se adapta la mobile, tablete etc.

Ollie

26

25 oct. 2019 04:40:46

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

Cu siguranță poți folosi CSS așa cum s-a menționat deja.

Înainte de a apela la soluția CSS - ai putea încerca să folosești coloane precum cele trei coloane de deasupra secțiunii tale "Știai că produsele cumpărate din magazin...". Utilizarea layout-urilor predefinite cu coloane în loc de CSS personalizat ar putea fi mai scalabil pe termen lung.

Iată cum ar arăta folosind Gutenberg.

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

Pe al doilea rând, am folosit un bloc Gutenberg cu 3 Coloane și proporții de genul 5% 90% 5%.

Poți aplica același concept în orice constructor de pagini care suportă layout-uri pe coloane.

Sper că te ajută.

marklchaves

21

25 oct. 2019 07:30:51