Obtékání textu obrázků je běžná designová technika, která se obvykle používá v tištěných médiích, jako jsou časopisy a noviny. Ale můžete to najít také na webu, zejména pro blogové příspěvky. Obtékání textu kolem obrázku je ve skutečnosti poměrně standardní součástí WordPressu, která zahrnuje jednoduchou úpravu zarovnání ve WYSIWYG editoru. Jediným problémem je, že je obtížné upravit styl stránky pomocí výchozího editoru WordPress. Je to tam divi může pomoct !

I když se tento kurz zaměřuje na obrázky, můžete ve skutečnosti použít stejný proces k zalamování textu v libovolném modulu. divi.

přehled

Zde je pohled na hlavní design, který dnes postavíme.

V tomto příkladu vám ukážu, jak zabalit dva sloupce textu kolem modulu obrazu na střed. To vám umožní vytvořit jedinečné rozvržení stylu časopisu nebo novin. Protože ale neexistuje žádná vlastnost css „float: center“, budeme potřebovat trochu kreativity s rozvržením, aby tento design fungoval.

Zde je návod, jak to udělat.

Vytváření obsahu v horním řádku se středovým obrázkem

Začněte vytvořením nové pravidelné sekce s řádkem jednoho sloupce. Poté do svého řádku přidejte modul obrázku. Nahrajte obrázek o rozměrech 400 x 250 pixelů. Velikost musí být u tohoto návrhu přesná.

Poté aktualizujte návrhové parametry následujícím způsobem:

Maximální šířka: 400px (plocha), 100% (tablet)
Zarovnání modulu: střed
Vlastní výplň: 2% v horní části, 2% v dolní části, 2% vlevo, 2% vpravo

Poté uložte nastavení a otevřete nastavení linky. Vyjměte polstrování ze spodní části řady.

Vlastní výplň: 0px dole

Vytvořte řádek textu ve dvou sloupcích

Pod řádkem obsahujícím obrázek vytvořte nový řádek s rozložením dvou sloupců.

Do sloupce 1 přidejte textový modul s a obsah figurína.

Poté zkopírujte textový modul a vložte jej do druhého sloupce textu do sloupce 2.

Vytváření prázdného prostoru s plovoucími přepážkami

K vytvoření prostoru, který pro obrázek potřebujeme, můžeme použít dělící moduly. V levém sloupci vytvoříme oddělovací modul poloviční velikosti obrázku a ploveme jej doprava, aby se náš textový modul zalomil kolem oddělovače. Pak v pravém sloupci vytvoříme další oddělovač poloviční velikosti obrázku a ploveme jej doleva.

Za tímto účelem vytvořte oddělovací modul a umístěte jej přímo nad textový modul ve sloupci 1.

Poté aktualizujte nastavení modulu split takto:

Zobrazit Oddělovač: NE
Šířka: 200px
Výška: 250px

Ujistěte se, že výška je stejná, jako byla vytvořena dříve, a že šířka je přesně polovina šířky obrázku.

U mobilních zařízení chceme vypnout oddělovače na tabletu a telefonu. Chcete-li to provést, aktualizujte nastavení viditelnosti a vypněte displej tabletu a telefonu.

Nyní, když je vytvořen náš první oddělovač, zkopírujte oddělovací modul a vložte jej na horní část textového modulu do sloupce 2.

Dále musíme plovoucí děliče. Chcete-li to provést, otevřete nastavení děliče ve sloupci 1 a přidejte následující vlastní kód CSS do hlavního prvku:

float: právo;

Dále otevřete nastavení modulu dělení ve sloupci 2 a přidejte následující vlastní kód CSS do hlavního prvku:

float: left;

Přesuňte obrázek na místo s vlastním okrajem

Nyní musíme pouze zmenšit náš obrázek v první řadě tak, aby zapadl do prostoru, který jsme vytvořili pomocí našich přepážek.

Otevřete nastavení modulu obrazu a přidejte následující vlastní okraje:

Vlastní marže: Nízká -250px (Desktop), 20px (Tablet)

Zde je zatím výsledek.

Přidejte název do sekce

Tento poslední krok je volitelný, ale pokud chcete do sekce přidat nadpis, vytvořte textový modul a umístěte jej nad obrázek.

Poté přidejte obsah následuje textový modul:

Zjistěte více o tom, jak dávat

Poté aktualizujte nastavení textu následujícím způsobem:

Barva pozadí: #000000
Název 2 Písmo: Playfair Display
Název 2 Zarovnání textu: Centrální nadpis
Barva textu 2: #ffffff
Název 2 Výška řádku: 2em

Zarovnejte text pro čistší design zalamování textu

Pokud obklopujete text obrázky, zejména je-li text vycentrován tímto způsobem, je vždy dobré zarovnat okolní text. V tomto případě stačí změnit orientaci textu na zdůvodnit dva textové moduly obsahující naše obsah obtékání textu.

Konečný výsledek

Zde je konečný výsledek.

Závěrečné myšlenky

Pokud víte, jak efektivně obklopit text obrázky, může váš obsah skutečně vypadat profesionálně a snadno čitelný. Koncept je celkem jednoduchý. Jediné, co musíte udělat, je přesunout obrázek doprava nebo doleva a poté použít vlastní mezery kolem obrázku pro ukládání do vyrovnávací paměti. A co se mi líbí, je, že můžete použít jakýkoli modul (nejen obrázky) k vložení textu do jakéhokoli typu obsahu divi. Doufám, že vám to dá malou inspiraci pro váš další projekt.

Doufám, že se vám ozvete v komentářích.