Spis treści
Czy potrzebujesz umieścić tekst wokół obrazu w elegancki sposób? Dowiedz się, jak łatwo to zrobić bez doświadczenia w programowaniu i projektowaniu. Edytor Gutenberga oferuje więcej opcji zawijania tekstu wokół tekstu w WordPress.
Możesz jednocześnie uzyskać dobrze wyglądającą stronę internetową i prostą procedurę edycji treści. Wybór edytora Gutenberga dla Twojej witryny WordPress zapewnia najlepsze narzędzie z perspektywy długoterminowej. Będziesz mieć więcej opcji zawijania tekstu wokół obrazów w inny sposób. Gutenberg przynosi wiele korzyści, takich jak bardziej przejrzysty kod źródłowy strony internetowej, szybkość, bezpieczeństwo i użyteczność.
Jak zawijać tekst wokół obrazu w WordPress?
Edytor i bloki Gutenberga sprawiają, że zawartość serwisu jest lżejsza, nowocześniejsza i czytelniejsza. Pokażemy Ci więcej sposobów zawijania tekstu wokół obrazu w typach stron WordPress, postów i niestandardowych postów. Istnieją różne bloki i można ich używać również w połączeniu, jako zestaw części i funkcji, które dają dodatkowe opcje owinięcia.
Możesz wybrać blok dla zawijanego tekstu wokół obrazu w zależności od podstrony i jej typu zawartości. Możesz wybrać jeden styl dla strony prezentacji, a inny dla posta na blogu. Weź również pod uwagę rodzaj treści reprezentującej obraz. Czy jest to obraz opisowy, czy bardziej reprezentatywny lub sprzedażowy nośnik?
Zawijaj tekst wokół obrazu – zaznaczenie bloków
Istnieją 4 bloki, których można użyć do zawinięcia bloku tekstu wokół obrazu. Wszystkie opisujemy:
- Blok obrazu i blok akapitu znajdziesz więcej poniżej
- Blok multimediów i tekstu więcej informacji poniżej
- Blok kolumn w poście indywidualnym
- Blok klastra w osobnym poście (funkcja dostępna tylko z Wtyczka Citadela Pro)
Zawijaj tekst i obraz, aby uzyskać lepsze wrażenia podczas czytania
Istnieje kilka powodów, dla których warto użyć tego bloku. Docenisz to najbardziej, jeśli piszesz posty na blogu. Obrazy są integralną częścią opowieści. Nie ma znaczenia, czy piszesz bloga podróżniczego, czy magazyn o nowościach IT. Dlatego dodając zdjęcia do treści, pomyśl o wyrównaniu obrazu. Czytelnicy będą mogli lepiej zrozumieć, o czym piszesz.
W wielu przypadkach konieczne jest wstawienie obrazu i tekstu obok siebie. Co jest ważne?
- To musi mieć sens. Obraz musi znajdować się obok właściwego tekstu.
- Musi być ładnie ułożony.
- Musi pasować do całego layoutu strony.
Bloki obrazu i akapitu
Podczas gdy w Klasyczny edytor można było też umieścić tekst obok obrazka, nie można było mówić o ładnym wyrównaniu. Zwłaszcza jeśli obraz był mały i umieściłeś obok niego więcej tekstu. Tekst zasłaniał obraz i nie wyglądał ładnie.
redaktor Gutenberga i jego blok obrazu zapewniają świetną funkcję – zmianę rozmiaru obrazu. Przeciągnij kropki wokół obrazu, aby automatycznie zmienić jego rozmiar i wyrównanie tekstu.
Blok mediów i tekstu – WordPress wyrównuje tekst obok obrazu
- Zawijaj tekst i obrazy za pomocą bloku Media & Text
- Jak dodać blok Media & Text w edytorze
- Jak działa ten blok
- Ustawienia blokowania multimediów i tekstu
- Co robi "Stawiaj na urządzeniach mobilnych” mieć na myśli
- Bonus: Jak uzasadnić tekst w WordPress
Jak wyrównać tekst obok obrazu?
Zacznij teraz
Zacznij już teraz, korzystając z okresu próbnego bez ryzyka. Nie wymagamy karty kredytowej.
Blok multimediów i tekstu to fantastyczna funkcja. Blok Media & Text rozwiązuje ten problem i zapewnia idealne dopasowanie tekstu do obrazu bez zakłócania kompozycji i układu. To jest powód, dla którego powinieneś użyć tego bloku.
Poprawia również projektowanie stron internetowych na urządzeniach mobilnych. Ten blok zawijający pomaga motywowi WordPress pokryć różne układy mobilne. Na smartfonie każda część strony musi być dobrze widoczna i czytelna. Jak będzie wyglądać blok Media & Text na telefonach komórkowych i uchwytach stołowych Funkcja „Stack on mobile”, której przyjrzymy się poniżej.
W krótkim czasie będziesz mógł korzystać z bloku Media & Text w naszym nowym motywie WordPress o nazwie Citadela. Dowiedz się więcej o motywie Citadela w osobnym artykule.
Jak dodać blok Media & Text w edytorze bloków?
Dodanie bloku multimediów i tekstu jest tak proste, jak dodanie dowolnego innego bloku. Jest to blok podstawowy, co oznacza, że nie musisz niczego pobierać ani instalować.
Używając ikony „+” w górnym panelu lub w dowolnym miejscu edytora i wybierając blok Media & Text.
Ostatnią opcją jest wpisanie „/”, a następnie wpisanie „media”. WordPress automatycznie pokaże wybrane bloki pasujące do tego, czego szukałeś.
Jak działa blokada multimediów i tekstu?
Blok Media & Text zasadniczo grupuje 2 różne rodzaje treści w jedną. Pierwszym z nich jest medium, np. obraz lub wideo, które możesz dodać za pomocą:
- Wgrywać
- Biblioteka multimediów
- Przeciągnij i upuść
Drugi to miejsce na treść tekstową. Możesz tam pisać akapity tekstu, listy wypunktowane lub tytuł. Tam też możesz dodać Blok przycisków o którym mówiliśmy wcześniej.
Blok Media & Text zawsze wyrównuje obraz i tekst obok siebie, bez względu na to, ile tekstu piszesz. Jak to działa? Obraz automatycznie dostosowuje się na podstawie wysokości zawartości w kolumnie tekstowej.
Ustawienia blokowania multimediów i tekstu
Ogólne ustawienia bloku
1. Górny pasek narzędzi
Pasek narzędzi powyżej bloku oferuje kilka opcji. Jeśli Twój aktywny motyw to obsługuje, możesz ustawić blok multimediów i tekstu na szeroką lub pełną szerokość. Możesz także wybrać miejsce, w którym chcesz umieścić obraz lub wideo, klikając:
- Pokaż multimedia po lewej stronie
- Pokaż multimedia po prawej stronie
Na górnym pasku narzędzi znajduje się również ikona edycji medium, w której można ustawić tekst alternatywny, tytuł, podpis lub opis. Dowiedz się więcej o edytowaniu obrazów w naszym artykule Praca z blokiem obrazu WordPress.
2. Prawy pasek boczny
Prawy pasek boczny oferuje dodatkowe ustawienia dla bloku mediów i tekstu. Można tu dodać Tekst alternatywny, ustawić kolor tła lub dodać Dodatkową klasę CSS. Możesz także włączyć tam funkcję „Stack on mobile”.
Co to jest Stack na urządzeniach mobilnych?
Dzięki tej funkcji obraz i tekst są ładnie wyświetlane na urządzeniach mobilnych. Jeśli wyłączysz opcję „Stosuj na urządzeniach mobilnych”, obraz i tekst pozostaną obok siebie i będą mało czytelne w wersji responsywnej.
Jeśli włączysz tę funkcję, na telefonie komórkowym zawartość po lewej stronie będzie wyświetlana nad zawartością po prawej stronie.
Wyrównanie tekstu
Część bloku Media & Text wraz z obrazem lub filmem zawiera również treść tekstową. Może to być jeden z następujących typów treści:
1. Ust
Na górnym pasku narzędzi możesz ustawić wyrównanie tekstu, pogrubić tekst, kursywę lub dodać link URL.
W pasku bocznym po prawej stronie możesz wybrać rozmiar czcionki, kolor czcionki lub kolor akapitu. Ciekawą funkcją jest „Drop Cap”, która podświetli pierwszy znak tekstu. To fajna funkcja w postach blokowych, dzięki której tekst jest ciekawszy.
2. Kierunek
Nagłówek jest bardzo podobny do akapitu. Możesz także skonfigurować jego wygląd, pogrubić lub pochylić i wstawić link URL. Różnica polega na tym, że możesz wybrać typ nagłówka – H2, H3, H4.
Inne rozmiary nagłówków i ustawienia wyrównania są dostępne na pasku bocznym po prawej stronie.
3. Lista
Jeśli dodasz blok listy do swojej treści, może to być punktor, lista numerowana lub lista wielopoziomowa. Możesz także pogrubić tekst, pochylić go i dodać link URL.
4. Blok przycisków
Ten blok, który dodaje przycisk do treści, można dostosować do projektu strony. Kolor i styl przycisku lub kolor tła można skonfigurować na pasku bocznym po prawej stronie.
Nie zapomnij przeczytać artykułu nt Blok przycisków.
Przełączanie między typami bloków
W bloku Media & Text możliwa jest konwersja jednego typu bloku treści na inny. Możesz także zmienić blok Media i tekst na Blok obrazu, a część tekstu zostanie usunięta.
W treści tekstowej można zmienić blok akapitu na blok nagłówka lub listy.
Bonus: Jak uzasadnić tekst w WordPress
Używanie wyjustowanego tekstu ma swoje zalety i wady. Wyjustowany tekst można zwykle znaleźć w książkach lub gazetach, ale nie jest on już używany na stronach internetowych. Dlaczego?
Kilka lat temu funkcja Justify była zintegrowana bezpośrednio z edytorem WordPress Classic. Wyjustowany tekst powodujący problemy z widocznością w różnych przeglądarkach lub urządzeniach mobilnych. Wiąże się to również z trudną czytelnością wyjustowanego tekstu. Dlatego ta funkcja została uznana za przestarzałą i usunięta.
Ta konkretna funkcjonalność nie istnieje również w nowym edytorze bloków (Gutenberg).
Jak więc uzasadnić tekst, jeśli naprawdę chcesz?
Rozwiązaniem jest dodanie prostego kodu CSS w kilku krokach:
- Na pasku bocznym po prawej stronie znajduje się ustawienie dla dodatkowego bloku klasy CSS akapitu
- Wpisz tam nazwę klasy „uzasadniać“
- Opublikuj stronę lub artykuł
- Jeśli wyświetlasz podgląd, kliknij opcję Dostosuj na głównym górnym pasku
- Po lewej stronie znajduje się nowy pasek boczny z ustawieniami
- Kliknij Dodatkowe CSS
- Wstaw następujący kod CCS:
p.justify { wyrównanie tekstu: justify; }
Zrobione. Od teraz tekst w Twoim bloku multimediów i tekstu jest wyrównywany.
WordPress stał się bardziej użyteczny bez narzędzi do tworzenia stron innych firm dzięki edytorowi Gutenberg. Ma doskonałą wartość dla Twojej witryny z długoterminowego punktu widzenia oraz podczas tworzenia lub przeprojektowywania witryny. Klocki Gutenberga dają duże możliwości stylizacji w dowolny sposób Kod WordPress do zawijania tekstu wokół obrazów.
Jaka jest Twoja opinia na temat bloku Media & Text? Czy już go używałeś? Jak ci się z nim pracuje? Daj nam znać w komentarzach poniżej.
Generalnie podoba mi się system bloków, ale o ile czegoś nie pominąłem, jest to krok w tył. Obecnie szukam po prostu przeniesienia obrazu w lewo lub w prawo i uzyskania tekstu do zawinięcia, ponieważ naprawdę powinno to być tak łatwe do zrobienia, ale wygląda na to, że WordPress po prostu nie chce, aby tak się stało. Dlaczego nie? Korzystanie z bloku multimediów i obrazów działa tylko wtedy, gdy tekst ma odpowiednią długość. Na przykład strona taka jak ta nie chce być przerabiana z dziwnymi odstępami między akapitami, jeśli tekst nie ma odpowiedniej długości w stosunku do rozmiaru obrazu.
http://www.thorntonincraven.co.uk/our-village/welcome-to-the-village/
Witam,
bardzo dziękuję za opinię. Wydaje się to bardzo dobrym pomysłem, dlatego proszę o poświęcenie minuty na udzielenie odpowiedzi na 4 proste pytania: https://aitthemes.typeform.com/to/vc7arn, które mogą pomóc naszemu zespołowi w tworzeniu lepszych produktów unikalne funkcje szybciej.
Wielkie dzięki za poświęcony czas i zrozumienie.
Z wyrazami szacunku!
Zlatko
Zespół AIIT
Tak, nie mogę zawijać tekstu. Te kombinacje bloków tekstu wydają się być bezużyteczne.
Ten pomysł jest do bani jako jedyny sposób wstawiania zdjęć do bloga – nie mogę sprawić, by tekst ładnie się zawijał i nie ma tego samego rozmiaru bez względu na to, co zrobię. Dobry pomysł na NIEKTÓRE sytuacje, ale nie na wszystko. Czasami chcesz po prostu obraz z zawijanymi akapitami, zamiast mówić coś o obrazie.
Jak poważnie dodać opakowanie i używać treści w pełnej szerokości, jak zakryć pełne, a następnie wziąć w nim kontener. Konstruktor jest bardzo mylący, jak dodać opakowanie kontenera, bardzo zły edytor yar
Witam,
Dziękuję za Twoje komplementy. Zapraszamy do odwiedzenia naszej strony blogowej https://www.ait-themes.club/blog/, gdzie znajdziesz wiele przydatnych wskazówek, jak pisać atrakcyjne i przydatne posty.
Z wyrazami szacunku!
Zlatko
Zespół AIIT
Witaj Abdurze,
Dziękujemy bardzo za Twoją opinię, nasz zespół bardzo ją docenia!
Z wyrazami szacunku.
Zlatko
Zespół AIIT
Mam ten sam problem co kilka innych osób w tym wątku. w przeszłości mogłem łatwo zawijać tekst wokół obrazu, jak na naszej stronie „o nas”, gdzie mamy zdjęcia i biografie. może używałem starego edytora. nie pamiętam. ale teraz próbuję zaktualizować naszą stronę o nowe zdjęcia i biografie i nie mogę znaleźć sposobu na łatwe zawijanie tekstu, tak jak w naszych poprzednich kombinacjach bio/pic. Próbowałem przełączyć się na klasyczny edytor, ale strona ostrzegła mnie, że mam sekcje „nowy edytor bloków” i muszę pozostać przy nowszym trybie edycji. czy możesz mi powiedzieć, jak sprawić, by nasze nowe biografie i zdjęcia wyglądały tak, jak nasze wcześniejsze posty? Dziękuję.
No hej,
Jeśli chcesz wyłączyć Gutenberga i kontynuować pracę z klasycznym edytorem WordPress, rozważ wtyczkę autorstwa głównego zespołu WordPress, która pozwala to zrobić za pomocą „Wtyczki klasycznego edytora”.
Z wyrazami szacunku!
Zlatko
Zespół AIIT
Ci, którzy chcą po prostu zawijać tekst wokół obrazu, mogą to zrobićwstawiając klasyczny blok tekstu (oparty na pierwszej części bloków po kliknięciu Przeglądaj. Możesz używaćklasycznego edytora w jednym bloku i tak , który pozwala wstawić obraz, a następnie wybrać opcję zawijania.Problem rozwiązany 🙂
DZIĘKI London SEO Guy!!! Proste rozwiązanie, ale je przeoczyłem!
A potem… po prostu skorzystaj z opcji Konwertuj na bloki.
Ponieważ to działa, Edytor bloków ma taką możliwość, ale nie może znaleźć sposobu, aby go poprawnie skonfigurować. W międzyczasie ta krówka działa.
Tutaj ten sam kłopot. Ta nowa wersja jest okropna – nie ma możliwości prawidłowego zawinięcia tekstu ani nawet zmniejszenia zdjęcia, chyba że chcesz po prostu przyciąć.
Jestem w stanie zawinąć mój tekst wokół obrazu w edytorze bloków WordPress. Wygląda dokładnie tak, jak chcę, aby wyglądał w „Podglądzie”. Jednak kiedy publikuję mojego bloga, a WordPress wysyła go e-mailem do moich obserwujących, otrzymują go ze zdjęciem na górze i tekstem pod zdjęciem. Dzieje się tak również na komputerach stacjonarnych, nie tylko na małych telefonach komórkowych. Chcę, żeby to było zapakowane, a nie ułożone w stos.
Witam,
Dziękujemy za napisanie. Blok nie zawija tekstu wokół obrazu w WordPress, jak można się spodziewać. Zapoznaj się z poniższymi instrukcjami, które mogą okazać się pomocne: https://motopress.com/blog/how-to-wrap-text-around-images-in-gutenberg/
Z wyrazami szacunku!
Zlatko
Zespół AIIT
Robię to wszystko, a mój blog doskonale zawija się w podglądzie. Kiedy go publikuję, wygląda świetnie na mojej stronie bloga. Ale kiedy WordPress wysyła go e-mailem do moich obserwujących, a oni otwierają ten e-mail, nie widzą, że jest zapakowany. Zdjęcia znajdują się nad tekstem. Wygląda to bardzo nieprofesjonalnie. Nigdy nie miałem tego problemu ze starym Edytorem Klasycznym. Teraz, gdy korzystam z Edytora bloków, nie pozwala mi wrócić do Edytora klasycznego, mimo że istnieje opcja Klasyczna do kliknięcia.
Witam,
Dziękujemy za wpisanie się.
Uprzejmie prosimy o sprawdzenie naszej bazy wiedzy i/lub dokumentacji z samouczkami wideo:
https://www.ait-themes.club/ait-themes-documentation/
Możesz też zadawać pytania techniczne bezpośrednio w naszym dedykowanym systemie zgłoszeń do pomocy technicznej. Zaloguj się na swoje konto na https://system.ait-themes.club/support/add-question.
Obsługa klienta jest świadczona w dni robocze od 8:00 do 17:00 czasu środkowoeuropejskiego.
Ponadto istnieje wtyczka, która pozwala korzystać z poprzedniego edytora. Należy zainstalować i aktywować „Klasyczny edytor”.
Z poważaniem!
Zlatko
Zespół AIIT
Nie zgadzam się z tym, że jest to lepsze od klasycznej edycji, ponieważ opcje są bardziej ograniczone. Uważam, że ten blok, ponieważ używa różnych czcionek i jest szerszy niż blok tekstowy, jest wizualnie drażniący. Możliwość płynnego zawijania tekstu wokół obrazu przy zachowaniu tych samych ustawień czcionki, rozmiaru i marginesów zapewnia profesjonalizm strony czasopisma. To tylko jeden przykład tego, dlaczego jestem głęboko rozczarowany tą wersją wordpressa.
Cześć Terence
Dziękuję za twoją opinię. Czy wypróbowałeś naszą wersję próbną Citadela? Mamy kilka unikalnych bloków, które mogą pomóc w dostosowaniu tekstu i obrazów. W każdym razie możesz przetestować pełną wersję – wszystkie funkcje za darmo.
Miłego dnia.