Jak zawijać tekst wokół obrazów w Divi (3 sposoby)
Opublikowany: 2019-05-27Zawijanie tekstu wokół obrazów jest powszechną techniką projektowania najczęściej spotykaną w mediach drukowanych, takich jak czasopisma i gazety. Ale możesz również znaleźć to, co jest używane 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 dostosować styl swojej strony za pomocą domyślnego edytora WordPress. W tym Divi może pomóc!
W tym samouczku pokażę Ci 3 sposoby wykorzystania Divi do owijania tekstu wokół obrazów. Umożliwi to tworzenie klasycznych układów w stylu wydruku z mocą Divi, która pomoże Ci w projektowaniu. Oto, co zamierzamy omówić:
- Jak zawijać tekst wokół obrazów (i cytatów blokowych) wewnątrz modułu tekstowego za pomocą edytora WYSIWYG?
- Jak zawijać tekst wokół obrazu, umieszczając moduł obrazu obok modułu tekstowego w Divi
- Jak zawinąć tekst wokół wyśrodkowanego obrazu, aby uzyskać unikalny układ dwukolumnowy?
Chociaż ten samouczek skoncentruje się na obrazach, w rzeczywistości możesz użyć tego samego procesu do zawijania tekstu wokół dowolnego modułu w Divi.
zapowiedź
Oto zapowiedź głównego projektu, który dziś zbudujemy.
Zacznijmy!
Subskrybuj nasz kanał YouTube
Pobierz układ zawijania tekstu wokół obrazów ZA DARMO
Aby położyć swoje ręce na projektach z tego samouczka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.
Pobierz za darmo
Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.
Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!
Aby zaimportować układ na swoją stronę, po prostu wyodrębnij plik zip i przeciągnij plik json do Divi Builder.
Przejdźmy do samouczka, dobrze?
Czego potrzebujesz, aby zacząć
Aby rozpocząć, potrzebujesz tylko Divi i kilku zdjęć.
- Divi – Upewnij się, że motyw Divi jest zainstalowany i aktywny. Będziemy tworzyć nasze projekty od podstaw za pomocą Divi Builder na froncie (konstruktor wizualny).
- Obrazy — upewnij się również, że masz co najmniej jeden obraz o wymiarach 400 na 250 pikseli do wykorzystania w samouczku.
Kiedy będziesz gotowy, przejdź do pulpitu nawigacyjnego WordPress i przejdź do Strony> Dodaj nowy. Nadaj swojej nowej stronie tytuł i zainstaluj Divi Builder na interfejsie. Wybierz opcję „Buduj od podstaw”. Teraz jesteś gotowy do drogi!
Jak zawijać tekst wokół obrazów i cytatów blokowych w module tekstowym za pomocą edytora WYSIWYG?
WordPress ułatwia zawijanie tekstu wokół obrazów przy użyciu domyślnego edytora WordPress (WYSIWYG). A ponieważ moduł tekstowy Divi ma wbudowany ten sam edytor WordPress WYSIWYG, możemy użyć tej samej metody, której użytkownicy WordPressa zawsze używali do owijania tekstu wokół obrazów.
Oto jak to zrobić.
Utwórz zwykłą sekcję z jednokolumnowym wierszem, a następnie dodaj do wiersza moduł tekstowy.
Zaktualizuj zawartość modułu tekstowego za pomocą swojej kopii. Na razie używam kilku akapitów lorem ipsum.
Teraz, jeśli jeszcze tego nie zrobiłeś, wybierz kartę wizualną w edytorze treści. Następnie kliknij górną część obszaru zawartości, w którym chcesz dodać obraz, i kliknij przycisk Dodaj multimedia.
W wyskakującym okienku biblioteki multimediów wybierz obraz, którego chcesz użyć. W ustawieniach wyświetlania załączników wybierz opcję wyrównania w lewo lub w prawo. W tym przykładzie chcę umieścić obraz po lewej stronie.
WordPress doda klasę do Twojego obrazu (zwaną „alignleft”), która uniesie obraz w lewo. Dodana właściwość float umożliwi zawijanie tekstu wokół obrazu. WordPress doda również bufor wokół obrazu, używając marginesów, aby utworzyć niewielkie odstępy między obrazem a otaczającym tekstem.
I oczywiście, jeśli odpowiednio wyrównasz obraz, obraz będzie unosił się w prawo, umożliwiając zawijanie tekstu wokół obrazu.
Możesz również użyć podobnej techniki, aby zawinąć tekst wokół cytatu blokowego w module tekstowym. Aby to zrobić, utwórz cytat blokowy za pomocą Edytora treści.
Następnie dostosuj styl cytatu, korzystając z wbudowanych ustawień modułów tekstowych dla cytatu.
Następnie wróć do edytora treści i przejdź do zakładki tekstowej. Następnie dodaj trochę stylu w linii do znacznika cytatu blokowego, aby utworzyć odstępy wokół cytatu blokowego i przesunąć go w lewo. Twój kod HTML z cytatem powinien wyglądać mniej więcej tak.
<blockquote style="margin: 0 15px 15px 0; float:left;">This is a <br> blockquote</blockquote>
Teraz tekst zawinie się wokół cytatu.
Jak zawinąć tekst wokół obrazu, umieszczając moduł obrazu obok modułu tekstowego w Divi
Aby zawinąć tekst wokół modułu obrazu, możemy umieścić cały moduł obrazu obok modułu tekstowego. Może to być preferowana metoda korzystania z powyższego edytora WordPress, ponieważ umożliwia pełną kontrolę nad stylem obrazu za pomocą ustawień kreatora Divi zamiast dodawania stylów wbudowanych lub zewnętrznego CSS do tagu obrazu.
Oto jak to zrobić.
Utwórz nową zwykłą sekcję z jednokolumnowym wierszem. Następnie dodaj moduł obrazu do wiersza z wybranym obrazem. Obraz, którego używam, pochodzi z pakietu Charity Layout Pack i ma wymiary 400 na 250 pikseli.
Następnie dodaj moduł tekstowy pod modułem obrazu z fałszywą zawartością tekstową.
Teraz, gdy oba moduły są na swoim miejscu, musimy przesunąć obraz na lewo od modułu tekstowego. Aby to zrobić, otwórz ustawienia modułu obrazu i dodaj następujący niestandardowy CSS do elementu głównego:
float:left;
Następnie zaktualizuj niestandardowy margines obrazu, aby utworzyć bufor, którego potrzebujemy do zawijania tekstu wokół obrazu:
Margines niestandardowy: 2% góra, 2% dół, 2% prawo
Oto wynik.
A jeśli chcesz przesunąć obraz w prawo, otwórz ustawienia modułu obrazu i zastąp CSS następującym:
float:right;
I zaktualizuj odstępy marginesów na następujące:
Margines niestandardowy: 2% góra, 2$ dół, 2% pozostało
Oto wynik.
Korzystanie z tego projektu na wielu kolumnach
Możesz również użyć tej konfiguracji w wielu kolumnach, aby utworzyć projekt zawijania tekstu w celu zaprezentowania swoich usług. Aby to zrobić, zmień układ kolumn wiersza na dwie kolumny.
Następnie nadaj obrazowi wartość procentową maksymalnej szerokości, aby odpowiadał on różnym szerokościom przeglądarki.
Maksymalna szerokość: 33,33% (komputer), 100% (telefon)
Skopiuj obraz i moduł tekstowy z pierwszej kolumny i wklej je do kolumny 2. Następnie zaktualizuj zawartość i obrazy zgodnie z potrzebami.
Otóż to. Oto wynik.
Jak zawinąć tekst wokół wyśrodkowanego obrazu lub modułu, aby uzyskać unikalny układ dwukolumnowy?
W tym przykładzie pokażę, jak zawinąć dwie kolumny tekstu wokół wyśrodkowanego modułu obrazu. Pozwala to na stworzenie unikalnego układu magazynu lub gazety. Ale ponieważ nie ma właściwości CSS „float: center”, będziemy musieli trochę kreatywnie zaprojektować układ, aby ten projekt działał.
Oto jak to zrobić.
Tworzenie zawartości górnego rzędu z wyśrodkowanym obrazem
Aby rozpocząć, utwórz nową zwykłą sekcję z jednym wierszem 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 ustawienia projektu w następujący sposób:
Maksymalna szerokość: 400px (komputer), 100% (tablet)
Wyrównanie modułu: środek
Niestandardowe wypełnienie: 2% u góry, 2% u dołu, 2% w lewo, 2% w prawo
Następnie zapisz ustawienia i otwórz ustawienia wiersza. Wyjmij dolną wyściółkę rzędu.
Niestandardowe wypełnienie: 0px dół
Utwórz dwukolumnowy wiersz tekstu
Pod wierszem zawierającym obraz utwórz nowy wiersz z układem dwukolumnowym.
W kolumnie 1 dodaj moduł tekstowy z próbną treścią.
Następnie skopiuj moduł tekstowy i wklej go do kolumny 2 dla drugiej kolumny tekstu.
Tworzenie pustej przestrzeni za pomocą pływających dzielników
Aby stworzyć potrzebną nam przestrzeń na obraz, możemy wykorzystać moduły rozdzielające. W lewej kolumnie utworzymy moduł dzielnika, który jest o połowę mniejszy od obrazu i przesuniemy go w prawo, aby nasz moduł tekstowy zawinął się wokół dzielnika. Następnie w prawej kolumnie utworzymy kolejny separator, który jest o połowę mniejszy od obrazu i przesuniemy go w lewo.
W tym celu utwórz moduł rozdzielający i umieść go bezpośrednio nad modułem tekstowym w kolumnie 1.
Następnie zaktualizuj ustawienia modułu dzielnika w następujący sposób:
Pokaż dzielnik: NIE
Szerokość: 200px
Wysokość: 250px
Upewnij się, że wysokość jest taka sama jak wysokość obrazu, który utworzyłeś wcześniej, a szerokość jest dokładnie równa połowie szerokości obrazu.
W przypadku telefonów komórkowych chcemy wyłączyć dzielniki na tablecie i telefonie. Aby to zrobić, zaktualizuj ustawienia widoczności, aby wyłączyć wyświetlacz tabletu i telefonu.
Po utworzeniu naszego pierwszego dzielnika skopiuj moduł dzielnika i wklej go nad modułem tekstowym w kolumnie 2.
Następnie musimy unieść nasze dzielniki. Aby to zrobić, otwórz ustawienia dzielnika w kolumnie 1 i dodaj następujący niestandardowy CSS do głównego elementu:
float: right;
Następnie otwórz ustawienia modułu dzielnika w kolumnie 2 i dodaj następujący niestandardowy CSS do głównego elementu:
float: left;
Przenoszenie obrazu na miejsce z niestandardowym marginesem
Teraz wszystko, co musimy zrobić, to obniżyć nasz obraz w pierwszym rzędzie, aby zmieścił się w przestrzeni, którą stworzyliśmy za pomocą naszych przekładek.
Otwórz ustawienia modułu obrazu i dodaj następujące niestandardowe marginesy:
Margines niestandardowy: -250px dół (komputer), 20px (tablet)
Oto dotychczasowy wynik.
Dodawanie tytułu 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 następującą treść do modułu tekstowego:
<h2>Learn more about how to give</h2>
Następnie zaktualizuj ustawienia tekstu w następujący sposób:
Kolor tła: #000000
Czcionka nagłówka 2: Wyświetlacz Playfair
Nagłówek 2 Wyrównanie tekstu: do środka
nagłówek 2 Kolor tekstu: #ffffff
Nagłówek 2 Wysokość linii: 2em
Wyjustuj tekst, aby uzyskać czystszy projekt zawijania tekstu
Podczas owijania tekstu wokół obrazów, zwłaszcza jeśli tekst jest wyśrodkowany w ten sposób, zawsze dobrze jest użyć justowania otaczającego tekstu. W tym przypadku wszystko, co musimy zrobić, to zmienić orientację tekstu, aby uzasadnić oba moduły tekstowe zawierające naszą otaczającą treść tekstową.
Ostateczny wynik
Oto ostateczny wynik.
I oto jest na wyświetlaczu tabletu i telefonu.
Końcowe przemyślenia
Wiedza o tym, jak skutecznie owijać tekst wokół obrazów, może naprawdę sprawić, że treść będzie wyglądać profesjonalnie i będzie łatwa do odczytania. Koncepcja jest dość prosta. Wszystko, co musisz zrobić, to unieść obraz w prawo lub w lewo, a następnie użyć niestandardowych odstępów wokół obrazu jako bufora. Uwielbiam to, że możesz unosić dowolny moduł (nie tylko obrazy), aby zawijać tekst wokół dowolnego rodzaju treści w Divi. Mam nadzieję, że to da Wam trochę inspiracji do następnego projektu.
Czekam na kontakt z Państwem w komentarzach.
Pozdrawiam!