Jak přidat zakřivený text na Divi

Všichni se rádi odlišujeme od konkurence, a to lze udělat tím, že předvedeme naše webové stránky jinak. Takže může být užitečné vědět, jak vytvářet návrhy zakřiveného textu v Divi. Tento typ designu by fungoval pro vytváření vlastní grafiky nebo speciálních návrhů záhlaví na Divi, aniž byste museli používat editor fotografií. Obvykle to zahrnuje rozsáhlejší úlohy html a css, ale u Divi není zvládnutí CSS nutností, protože máte mnohem více vestavěných možností, jak snadno navrhnout svůj text jedinečným způsobem.

V tomto tutoriálu vám ukážeme, jak vytvořit dvě šablony zakřivených písmen, které můžete použít jako užitečnou šablonu pro své vlastní účely. V nejlepším případě můžete do krabice přidat něco nového. nářadí design pro budoucnost.

Začněme.

přehled

Zde je přehled návrhů zakřivených textů, které navrhneme v tomto tutoriálu.

Chcete-li importovat rozvržení na stránku, jednoduše rozbalte soubor zip a přetáhněte jej do programu Divi Builder.

Základní myšlenka vytváření zakřiveného textu v Divi

Chcete-li vytvořit zakřivený text pomocí metody v tomto tutoriálu, musíte přidat každé písmeno svého textu do samostatného textového modulu (pro nejlepší výsledky budete chtít použít písmo s neproporcionálním písmem). Dejte textovému modulu definovanou výšku. Dále musíte každému textovému modulu přiřadit absolutní polohu na střed, aby se na sebe naskládaly.

To je důležité, protože chceme, aby se každé písmeno otáčelo ze stejného středu. Poté můžete pomocí možností transformace Divi otočit každé písmeno podél osy z a vytvořit zakřivený text (zvažte nakreslení kružnice ve třídě matematiky pomocí kompasu). Všimněte si také, že výška každého textového modulu určuje poloměr kruhu, což také zvětšuje obvod kruhu, a proto zvětšuje mezeru mezi písmeny.

Zde je příklad 8 textových modulů otočených o 45 stupňů k vytvoření dokonalého rozložení kruhu pro text. Přidal jsem bílý rámeček kolem každého modulu, abyste mohli snadno vidět rotaci.

A zde je příklad stejných textových modulů rotujících v krocích po 20 stupních.

Commencer

Začněte vytvořením nové stránky v Divi. Poté pojmenujte svou stránku a na front-end nasaďte Tvůrce Divi. Vyberte možnost „sestavit od začátku“. Nyní jste připraveni jít!

Vytvoření návrhu textu ve tvaru křivky

Vytvoření sekce a linie

Začněte vytvořením pravidelné sekce s řadou sloupce.

Před přidáním našich modulů pokračujte a aktualizujte nastavení sekce takto:

• Levý přechod na pozadí: #1e003d
• Přechodové pozadí vpravo - barva: # 121212
• Typ přechodu: Radiální

• Obrázek na pozadí: [vložte obrázek loga přibližně 100 pixelů na 100 pixelů]
• Velikost obrázku na pozadí: Skutečná velikost

Uložte nastavení, změňte nastavení linky a aktualizujte následující:

• Šířka okapu: 1
• Šířka: 100%
• Min výška: 400px
• Výška: 40vw
• Maximální výška: 600px
• Vlastní výplň: 0px vysoká, 0px dolů

Poté přidejte následující vlastní kód CSS do hlavního prvku sloupce, abyste zajistili, že všechny textové moduly zůstanou vycentrovány vodorovně:

Hlavní sloupec prvku CSS:

zobrazit flex; odůvodňují-happy: centrum;

Vytváření textových modulů pro každé písmeno

Nyní jsme připraveni přidat náš první textový modul s naším prvním písmenem. Chcete-li to provést, přidejte nový textový modul do sloupce řádku a aktualizujte následující:

• Obsah:d (pouze písmeno)
• Písmo textu: Ubuntu Mono (bude fungovat jakékoli písmo s jednotnými mezerami)
• Barva textového textu: #ffffff
• Velikost textu: 5vw (desktop), 40px (telefon)
• Orientace textu: střed
• Min výška: 200px
• Výška: 20vw
• Maximální výška: 300px

Poté aktualizujte počátek transformace dolů. To bude důležité při určování, kde dochází k rotaci textu. Chceme, aby se textový modul otočil ve spodní části. I když není nutné otáčet tento první textový modul, je důležité jej sem přidat, abychom mohli tuto možnost přenést, kdykoli duplikujeme textový modul pro další písmena.

• Původ transformace: 100% (nebo nižší)

Poté přidejte následující vlastní CSS k hlavnímu prvku, aby textový modul získal absolutní pozici.

Vytváření a rotace dalších textových modulů

Abychom vytvořili zbytek písmen, duplikujeme textový modul. Jakmile jsme duplikovali textový modul, vše, co potřebujeme, je aktualizovat písmeno a poté zvýšit rotaci o 45 stupňů s každým novým modulem.

Protože textové moduly budou na začátku superponovány, je pro provádění těchto aktualizací lepší použít režim kabelového zobrazení.

Pokračujte a duplikujte textový modul a poté aktualizujte následující:

• Obsah:i
• Osa rotace transformace: 45 stupňů

Pokračujte v procesu duplikování textového modulu, poté aktualizujte textový modul o nové písmeno a zvyšte rotaci transformace o 45 stupňů. Zde je seznam 6 zbývajících aktualizací textového modulu:

Textový modul 3

• obsah:proti
• Osa rotace transformace: 90 stupňů

Textový modul 4

• obsah: i
• Transformace rotace osy z: 135deg

Textový modul 5

• obsah: d
• Transformujte rotaci osy z: 180deg

Textový modul 6

• obsah: i
• Transformace rotace osy z: 225deg

Textový modul 7

• obsah: v
• Transformujte rotaci osy z: 270deg

Textový modul 8

• obsah: i
• Transformujte rotaci osy z: 315deg

To je vše! Nyní zkontrolujte konečný výsledek.

Konečný výsledek

Závěrečné myšlenky

Vytváření návrhů zakřivených textů v Divi je poměrně přímočarý proces, jakmile pochopíte, jak to funguje. Tento článek by vám měl pomoci porozumět geometrii zapojené do konfigurace textových modulů pro otáčení na křivce. A jakmile je nastavení hotové, můžete kromě několika úryvků vlastních souborů CSS použít i integrované návrhové nastavení Divi, abyste získali trochu kreativity. Doufám, že vám to dá inspiraci při vytváření vlastních návrhů zakřivených textů.