Obrazki ożywiają twoje wpisy i strony WordPress, czyniąc je bardziej angażującymi. Jednak wielu początkujących ma trudności z wyrównaniem obrazków tak, jak im się podoba.
Nowy edytor bloków WordPress (Gutenberg) rozwiązuje ten problem, ułatwiając dodawanie i wyrównywanie obrazków w WordPress.
W tym artykule pokażemy, jak łatwo dodawać i wyrównywać obrazki w WordPressie, aby tworzyć piękne układy treści.
Wyrównanie obrazków w edytorze WordPress
Wcześniej WordPress używał obszaru tekstowego z przyciskami edycji jako domyślnego edytora. Jednym ze szczególnych problemów w starym edytorze było wyrównanie obrazków. Prawidłowe ułożenie elementów na twojej witrynie internetowej WordPress mogło być trudne.
Mimo że istniały opcje wyrównania obrazków do lewej, prawej lub środka, nie zawsze wyglądały one dobrze. Czasami obrazki nie były wyrównane, miały inny rozmiar lub po prostu wyglądały dziwnie.
WordPress 5.0 wprowadził nowy edytor wpisów WordPress o nazwie edytor bloków Gutenberg. Poprawiono w nim kilka problemów ze starym edytorem, w tym problemy z wyrównaniem obrazków.
Przyjrzyjmy się, jak można łatwo dodawać i wyrównywać obrazki w nowym edytorze, aby tworzyć 111111 piękne układy wpisów i stron na twoim blogu WordPress.
Dodawanie i wyrównywanie obrazków w WordPressie
Edytor zawiera następujące bloki, które można wykorzystać do dodawania obrazków do twoich wpisów i stron WordPress.
- Obrazek
- Inline Imagely Image
- Galeria
- Media i tekst
- Okładka
Zacznijmy najpierw od prostego bloku obrazków.
Kliknij przycisk „Dodaj nowy blok” lub wpisz /image w edytorze wpisów, aby wstawić blok z obrazkiem.
Zobaczysz trzy przyciski wewnątrz pustego bloku obrazka.
Możesz przesłać obrazek z twojego komputera, wybrać już przesłany obrazek z biblioteki multimediów lub wstawić obrazek, podając adres URL pliku obrazka.
Następnie kliknij przycisk „Prześlij” i wybierz obrazek, który chcesz przesłać z twojego komputera.
Gdy tylko wybierzesz obrazek, WordPress prześle go do twoich multimediów i wstawi do bloku z obrazkami.
Teraz powiadomienie pojawi się na pasku narzędzi na górze twojego obrazka, a w prawej kolumnie pojawią się ustawienia bloków obrazków.
Aby wyrównać twój obrazek, użyjesz paska narzędzi, który pojawi się na górze obrazka.
Blok obrazu udostępnia następujące opcje wyrównania obrazka jako przyciski na pasku narzędzi.
- Wyrównaj do lewej
- Wyrównaj do środka
- Wyrównaj do prawej
- Duża szerokość
- Pełna szerokość
Jeśli twój obrazek ma mniejszą szerokość, wyrównanie go do lewej lub prawej spowoduje wyświetlenie tekstu obok obrazka. Wyrównanie do środka spowoduje wyświetlenie obrazka w osobnym wierszu bez tekstu po obu stronach.
Wybranie opcji dużej szerokości sprawi, że twój obrazek będzie szerszy niż obszar tekstu.
Opcja pełnej szerokości spowoduje przesunięcie go do prawej i lewej krawędzi ekranu przeglądarki.
Jak idealnie wyrównać obrazek obok tekstu?
Często zdarza się, że trzeba idealnie wyrównać obrazek obok tekstu. Edytor bloków WordPress ułatwia to, dodając blok Media i tekst.
Ten blok zasadniczo dodaje obszar dwukolumnowy. Jedna kolumna na obrazki (media) i druga kolumna na treść tekstową.
Po prostu prześlij swój obrazek.
Następnie możesz dodać tekst, który chcesz wyświetlić obok niego.
Po dodaniu obrazka i tekstu, powiadomienie wyświetli więcej opcji dla bloku. Możesz sprawić, że cały blok będzie szerszy lub pełnowymiarowy, możesz także przełączać strony obrazka i tekstu.
Wyrównanie obrazka automatycznie dostosuje się do wysokości tekstu w następnej kolumnie.
Jak wyrównać obrazki galerii w WordPress?
Edytor bloków WordPress zawiera również blok do dodawania galerii obrazków. Pozwala to na łatwe wyświetlanie obrazków w siatce wierszy i kolumn.
Blok Galeria zawiera podobne opcje wyrównania na pasku narzędzi.
Cały blok galerii można wyrównać do lewej, środka lub prawej strony. Można również ustawić jego szerokość lub zmienić go na wiersz o pełnej szerokości.
Domyślna funkcja galerii w WordPressie jest całkiem dobra. Jeśli jednak regularnie dodajesz galerie zdjęć do swoich wpisów i stron WordPress, rozważ użycie wtyczki do galerii zdjęć, takiej jak Envira Gallery.
Te wtyczki dadzą ci więcej opcji wyrównywania obrazków w twoich galeriach zdjęć, wyświetlania ich w popupie i nadawania im różnych stylów.
Jak dodać dwa obrazki obok siebie w WordPress?
Najprostszym sposobem na wyświetlenie dwóch obrazków obok siebie we wpisie WordPress jest dodanie obu obrazków w bloku Galeria.
Wystarczy wybrać 2-kolumnowy układ dla bloku galerii, aby wyświetlić oba obrazki obok siebie. Możesz również zaznaczyć opcję „przytnij miniaturkę”, aby upewnić się, że oba obrazki mają ten sam rozmiar.
Więcej sposobów na dodawanie i wyrównywanie obrazków w WordPressie
Oprócz obrazka, multimediów i tekstu oraz bloku galerii, można również użyć bloku Okładka, aby dodać obrazek okładki.
W nowoczesnym projektowaniu stron internetowych, obrazy okładek są wykorzystywane do tworzenia wysoce angażujących układów treści. Obrazki te służą do wyróżniania różnych sekcji strony.
Blok obrazu okładki ma takie same opcje wyrównania jak blok obrazka. Możesz dodać tekst nad obrazkiem i wybrać kolor nakładki w ustawieniach bloku. Najlepsze jest to, że można zaznaczyć opcję „Naprawiono tło”, która tworzy efekt paralaksy w tle.
Aby dowiedzieć się więcej na temat korzystania z obrazków wyróżniających, zapoznaj się z naszym artykułem na temat różnicy między obrazkiem wyróżniającym a obrazkiem okładki w WordPress.
Do tej pory rozmawialiśmy o dodawaniu obrazków bezpośrednio do twoich wpisów i stron. A co z obrazkami z witryn innych firm?
Edytor bloków również to ułatwia. Możesz dodawać obrazki z popularnych witryn społecznościowych, takich jak Instagram, Facebook, Flickr, Imagely, Photobucket i innych.
Na przykład, jeśli chcesz dodać zdjęcie z Instagrama, po prostu dodaj blok Instagram do edytora wpisów i wpisz adres URL posta, który chcesz udostępnić.
Następnie wystarczy kliknąć wybrane wyrównanie na pasku narzędzi. Bloki osadzania umożliwiają również łatwe osadzanie filmów w WordPress.
Więcej szczegółów można znaleźć w naszym przewodniku na temat tego, jak osadzać Instagram w WordPress.
Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak łatwo dodawać i wyrównywać obrazki w edytorze bloków WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat optymalizacji obrazków w celu przyspieszenia WordPressa i najlepszego oprogramowania do projektowania.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Jiří Vaněk says
Gutenberg is still a big unknown for me. I’ll admit that I only started discovering it after WordPress 6.4 arrived and reading these pages. For a long time, for example, I could not figure out how to place an image and text next to each other (in Elementor it was a completely simple matter). After reading this article, I can do a little more with Gutenberg. Thanks for that.
WPBeginner Support says
You’re welcome
Administrator
fred dugas says
will this work with Iframes? I edit a custom HTML block and add iframe and the save and the add is lining up all the way to the left where all the other blocks are centered.?
WPBeginner Support says
It would depend on the iframe but normally iframes will not automatically have alignment options.
Administrator
Harry Goldhagen says
How do you align Featured Images that appear on the automatically generated Blog page and Category page? Clicking on the image opens the post, and there doesn’t seem to be an alignment setting for Featured image when filling in the post settings.
WPBeginner Support says
For the featured image, that would be determined by your theme. If you check with your specific theme’s support they should be able to assist with the alignment of your featured image.
Administrator
john McIntyre says
I wish to have all captions on my site, the same size and font.
How is this achieved?
WPBeginner Support says
Unless your theme has a specific setting for it, most themes should have the text uniform if it is all the image caption and not a different text block.
Administrator
Sharon says
I’m wanting to change the default for uploading an image to be centred every time. To change each image I upload to centre each time I add an image is so time consuming. Can I change the default to centre?
WPBeginner Support says
There is not a simple method we would recommend for beginners at the moment but we will keep an eye out for something we would recommend.
Administrator
Amanda A. says
I am trying to use the Block Editor to display two images side by side. I used the two column feature then image blocks in each column. While designing, it displays correctly, but when I „preview in new tab”, the side by side columns are gone and the images are stacked. What am I doing wrong? Is this a common issue? How can I fix this?
WPBeginner Support says
You may want to ensure the images aren’t too large for them to be side by side in your specific theme for the most common reason for that issue.
Administrator
Sheryl Zeiset says
I’m trying to learn how to use the new block editor. When I click on the Add block button and choose image to add a photo, I only get the 'insert from URL’ option and I can’t find a way to add photos from my Media Library. Can you help?
WPBeginner Support says
You would want to check closely to find the text next to the upload button for selecting the image from your media library
Administrator
Luther Mckinnon says
I have been publishing a blog for many years. I have learned to dread the introduction of a new system. Doing a simple thing like adding photographs is now very difficult.
WPBeginner Support says
Hopefully, once you are comfortable with the new system it becomes easier for you
Administrator
Ward says
Great information, problem is that back end it works but front end it always aligns to the left. Would it be possible that this has something to do with my Elementor template?
WPBeginner Support says
If you are using a page builder there is a chance that your page builder is overriding the styling and you can reach out to your builder’s support for assistance.
Administrator
tanmay says
absolutely amazing feature its not every cup of tea to use HTML editor
WPBeginner Support says
Glad you like the block editor feature
Administrator
Louie Adem says
just started WordPress yesterday. Totally a beginner and so happy wpbeginner provided me the „trainer wheels” to jumpstart. The education in this website is so valuable. Can’t thank you enough.
WPBeginner Support says
Glad we could help get you started
Administrator
BadlyDrawmWolf says
Thank you for this little gold nugget – really struggling getting in to the „new” way of handling my blog and almost giving up and searching for other alternatives….
WPBeginner Support says
Glad our article could help, for another helpful article you may want to take a look at our article below:
https://www.wpbeginner.com/beginners-guide/how-to-use-the-new-wordpress-block-editor/
Administrator
Karen says
You mention „Inline Image”, but I don’t see any such block. Your article was written awhile ago but supposedly updated in Jan. 2020 – did that block go away and you forgot to remove it from this article? Or a better question: How can I add an inline image within another block like Paragraph or Heading?
WPBeginner Support says
The inline image block is not currently available but you can normally recreate the formatting with the text and image or the standard image block
Administrator
Ted Strutz says
When I add an image from my media the image toolbar does not come up to align left or right. I can change size of image.
WPBeginner Support says
You would want to ensure you have not set it to be at the top of the page instead of how we have it at the moment.
Administrator
Hannah says
Hello, I have aligned all images using the block editor and everything looks fine until I preview?
Then some images have become far bigger than the others, I have a gallery of two images suddenly sitting on top of a single image. Everything has moved around randomly!
Even when I published it, it was still all wrong. I would love your help, thank you!
WPBeginner Support says
You would want to reach out to your theme’s support to ensure there isn’t a styling conflict, otherwise, you could try disabling your plugins to see if this is a plugin conflict as well.
Administrator
Harry says
Hi, I’m looking to align shortcodes next to one another like you describe with the images is this possible? Many Thanks
WPBeginner Support says
That would depend on the shortcodes themselves
Administrator
Ap says
Hello,
How do you arrange the positioning of the title for the cover blocks?
You have that option in your bar, but for some reason, when I click on cover block, there is no text alignment option.
Any ideas on this?
Thank you for the great article.
WPBeginner Support says
You would want to check the top of your page as that would be the other location the alignment options would be rather than floating over the element
Administrator
Cheryl says
How do you make an image clickable with a clickable link? I’ve been looking for tutorials and they all seemed based on a prior Gutenberg block which since has changed an the tutorials no longer match the block.
WPBeginner Support says
You would want to check the top toolbar for the current location for where to add a link to an image
Administrator
Alejandro says
Hello, Is it possible to write an image caption right below the image when using the „Media & Text block”?
WPBeginner Support says
It would depend on your specific theme for the styling but you should be able to
Administrator
Lancer Kind says
Nice! Thank you so much!
WPBeginner Support says
You’re welcome
Administrator
Pete Newman says
There is an existing issue of incompatability between Gutenberg and themes. Do you have a list of themes that are compatable with Gutenberg (and that allow full functionality of Gutenberg)?
Thanks and regards,
Pete.
WPBeginner Support says
There should be fewer issues with that as themes are updated but for specifically Gutenberg friendly themes you could take a look at our list here: https://www.wpbeginner.com/showcase/gutenberg-friendly-wordpress-themes/
Administrator
Pete Newman says
I have been using wordpress for years but have been a bit absent lately. Gutenberg is a headspin. I follow these instructions but simply cannot align images in an image/text block. When I go to preview the image is aligned extreme hard left of the page with no margin at all. Any solutuions on offer?
Thanks!!
WPBeginner Support says
If the settings are being ignored you may need to check with your theme’s support to ensure it’s not overriding your styling. If you wanted to try reverting to the classic editor we have our guide here: https://www.wpbeginner.com/plugins/how-to-disable-gutenberg-and-keep-the-classic-editor-in-wordpress/
Administrator
Pete Newman says
Thank you! Excellent support. I added the classic editor plugin and the disable Gutenberg plugin and was able to create an approximation of what I want. Looking forward to Gutenburg functioning as intended and developers catching up – it is a great idea.
WPBeginner Support says
Glad we could help
Jimmie says
But you can’t link images in a gallery? That makes the gallery function less attractive
WPBeginner Support says
If each image needs its own link then setting up columns would likely be what you’re looking to do
Administrator
Roxana Snedeker says
What is the best way to add multiple images at once, I can’t seem to add more than one at the time
WPBeginner Support says
If you want to add multiple images in the same area, you would want to take a look at the gallery block to add multiple images in one section
Administrator
Aaranja says
How to add an image directly in the „Code Editor”, without passing by „Visual Editor”?
WPBeginner Support says
You could disable the visual editor under Users>Your Profile but that would prevent you from using the visual editor for other sections.
Administrator
Alice says
I’m centering all of my images correctly in the editor, but they are all showing up as left-aligned in preview and live posts no matter what. Do you know what might be causing this? It’s driving me so crazy!
WPBeginner Support says
Your theme may be overriding the styling you are setting. If you reach out to your theme’s support they should be able to assist.
Administrator
Anne says
I would like to have an image next to a file (pdf) – all on the same line. Can I do that in one block, or would I need to create two? Thank you!
WPBeginner Support says
You would want to add the column block to split the content and allow you to display the content like that.
Administrator
Suzy Algar says
I am having creating captions for images and downloads that appear in my files. I don’t know where to go once I have the image in my files.
WPBeginner Support says
If you’re trying to add the image to a post or page you would normally add an image block and then select the file you want to use in the block
Administrator
Roxana Safipour says
So now how do you do „no alignment”, where the image is on the left and has no text wrapping around it? This used to be easy with the no alignment option, which is now gone. Please bring this back! I am going crazy trying to figure out how to get my image on the left (not centered) and with no text next to it, but the text keeps wrapping around it automatically!
WPBeginner Support says
For what it sounds like you’re wanting, if you don’t specifically set the alignment for an image, the image should set itself that way.
Administrator
Ben says
Just a quick followup on this, as it was annoying me as well. There’s a simple answer but it’s sort of not that obvious as I was looking for a setting – just press the selected alignment button again to turn off the alignment and revert to the default no alignment.
Jesse says
Great post very useful.I have ugrade to wordpres 5.1 but now have problem with linking image to url. Can you help me?
WPBeginner Support says
If you’re using the block editor, in the image block’s settings there should be a Link Settings section for you to set where an image links to.
Administrator