Obrazy zawijania tekstu to powszechna technika projektowania, zwykle stosowana w mediach drukowanych, takich jak czasopisma i gazety. Ale można to również znaleźć w Internecie, zwłaszcza w postach na blogu. Zawijanie tekstu wokół obrazu jest w rzeczywistości dość standardową częścią WordPressa, która obejmuje prostą regulację wyrównania w edytorze WYSIWYG. Jedynym problemem jest to, że trudno jest stylizować swoją stronę za pomocą domyślnego edytora WordPress. To tam Divi może pomóc !

Chociaż ten samouczek koncentruje się na obrazach, w rzeczywistości możesz użyć tego samego procesu do zawijania tekstu w dowolnym module. Divi.

badanie

Oto spojrzenie na główny projekt, który będziemy dzisiaj budować.

W tym przykładzie pokażę, jak zawinąć dwie kolumny tekstu wokół wyśrodkowanego modułu obrazu. Pozwala to na stworzenie unikalnego układu w stylu magazynu lub gazety. Ponieważ jednak nie ma właściwości css „float: center”, będziemy potrzebować trochę kreatywności przy układzie, aby projekt działał.

Oto jak to zrobić.

Tworzenie treści w górnym rzędzie za pomocą wyśrodkowanego obrazu

Aby rozpocząć, utwórz nową zwykłą sekcję z wierszem jednej kolumny. Następnie dodaj moduł obrazu do swojego wiersza. Prześlij obraz o wymiarach 400 na 250 pikseli. Rozmiar musi być dokładny dla tego projektu.

Następnie zaktualizuj parametry projektu w następujący sposób:

Maksymalna szerokość: 400px (pulpit), 100% (tablet)
Wyrównanie modułu: centrum
Niestandardowe wypełnienie: 2% u góry, 2% u dołu, 2% po lewej stronie, 2% po prawej stronie

Następnie zapisz ustawienia i otwórz ustawienia linii. Usuń wyściółkę z dołu rzędu.

Niestandardowe dopełnienie: 0px na dole

Utwórz dwu kolumnowy wiersz tekstu

Pod wierszem zawierającym obraz utwórz nowy wiersz z układem dwóch kolumn.

W kolumnie 1 dodaj moduł tekstowy z a treść atrapa.

Następnie skopiuj moduł tekstowy i wklej go do kolumny 2, aby uzyskać drugą kolumnę tekstu.

Tworzenie pustej przestrzeni z pływającymi przegrodami

Aby stworzyć przestrzeń, której potrzebujemy na obraz, możemy użyć modułów podziału. W lewej kolumnie utworzymy dzielnik o połowę mniejszy niż rozmiar obrazu i przesuniemy go w prawo, tak aby nasz moduł tekstowy zawijał się wokół separatora. Następnie w prawej kolumnie utworzymy kolejny separator o połowę mniejszy niż obraz i przeniesiemy go w lewo.

Aby to zrobić, utwórz moduł separacji i umieść go bezpośrednio nad modułem tekstowym w kolumnie 1.

Następnie zaktualizuj ustawienia podzielonego modułu w następujący sposób:

Pokaż dzielnik: NIE
Szerokość: 200px
Wysokość: 250px

Upewnij się, że wysokość jest taka sama, jak utworzona poprzednio, a szerokość jest dokładnie równa połowie szerokości obrazu.

W przypadku urządzeń mobilnych chcemy wyłączyć separatory na tablecie i telefonie. Aby to zrobić, zaktualizuj ustawienia widoczności, aby wyłączyć wyświetlacz tabletu i telefonu.

Po utworzeniu pierwszego separatora skopiuj moduł separacji i wklej go na górze modułu tekstowego w kolumnie 2.

Następnie musimy unieść nasze separatory. Aby to zrobić, otwórz ustawienia separatora w kolumnie 1 i dodaj następujący niestandardowy kod CSS do głównego elementu:

pływaka: prawo;

Następnie otwórz ustawienia modułu podziału w kolumnie 2 i dodaj następujący niestandardowy kod CSS do głównego elementu:

pływaka: lewej;

Przenieś obraz na miejsce z niestandardowym marginesem

Teraz musimy tylko zmniejszyć nasz obraz w pierwszym rzędzie, aby pasował do przestrzeni, którą stworzyliśmy naszymi separatorami.

Otwórz ustawienia modułu obrazu i dodaj następujące niestandardowe marginesy:

Margines niestandardowy: niski-250px (komputer stacjonarny), 20px (tablet)

Oto dotychczasowy wynik.

Dodaj tytuł do sekcji

Ten ostatni krok jest opcjonalny, ale jeśli chcesz dodać tytuł do sekcji, utwórz moduł tekstowy i umieść go nad obrazem.

Następnie dodaj treść następująco do modułu tekstowego:

Dowiedz się więcej o tym, jak dawać

Następnie zaktualizuj ustawienia tekstu w następujący sposób:

Kolor tła: #000000
Tytuł 2 Czcionka: Wyświetlacz Playfair
Tytuł 2 Text Alignment: Central Title
Kolor tekstu 2: #ffffff
Tytuł 2 Line Height: 2em

Wyjustuj tekst, aby uzyskać bardziej przejrzysty projekt zawijania tekstu

Otaczając tekst obrazami, zwłaszcza jeśli tekst jest wyśrodkowany w ten sposób, zawsze dobrze jest uzasadnić otaczający tekst. W takim przypadku po prostu zmień orientację tekstu na uzasadnić dwa moduły tekstowe zawierające nasze treść zawijania tekstu.

Ostateczny wynik

Oto wynik końcowy.

końcowe przemyślenia

Wiedza, jak skutecznie otaczać tekst obrazami, może naprawdę sprawić, że Twoje treści będą wyglądać profesjonalnie i łatwo je odczytać. Koncepcja jest dość prosta. Wszystko, co musisz zrobić, to przesunąć obraz w prawo lub w lewo, a następnie użyć niestandardowych odstępów wokół obrazu w celu buforowania. Podoba mi się to, że możesz użyć dowolnego modułu (nie tylko obrazów), aby wstawić tekst do dowolnego rodzaju treści Divi. Mam nadzieję, że będzie to dla Was trochę inspiracji do kolejnego projektu.

Mam nadzieję, że usłyszę od Ciebie w komentarzach.