Cách thêm và căn chỉnh hình ảnh trong WordPress Block Editor (Gutenberg)

Nội dung bài viết

Hình ảnh mang lại sức sống cho các bài đăng và trang WordPress của bạn bằng cách làm cho chúng trở nên hấp dẫn hơn. Tuy nhiên, nhiều người mới bắt đầu phải vật lộn với việc căn chỉnh hình ảnh theo cách họ thích.

Trình chỉnh sửakhối WordPress mới (Gutenberg) giải quyết vấn đề này bằng cách giúp việc thêm và căn chỉnh hình ảnh trong WordPress dễ dàng hơn.

Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách bạn có thể dễ dàng thêm và căn chỉnh hình ảnh trong WordPress để tạo bố cục nội dung đẹp mắt.

Adding and properly aligning images in WordPress

Căn chỉnh hình ảnh trong WordPress Editor

Trước đây, WordPress sử dụng một vùng văn bản với các nút chỉnh sửa làm trình chỉnh sửa mặc định của nó. Một vấn đề cụ thể trong trình chỉnh sửa cũ là căn chỉnh hình ảnh.

Mặc dù có các tùy chọn để căn chỉnh hình ảnh sang trái, phải hoặc chính giữa, nhưng chúng không phải lúc nào cũng đẹp. Đôi khi hình ảnh không được căn chỉnh, không có kích thước chính xác hoặc trông kỳ lạ.

WordPress 5.0 đã giới thiệu một trình chỉnh sửa bài đăng WordPress mới được gọi là trình chỉnh sửa khối Gutenberg. Nó đã khắc phục một số vấn đề với trình chỉnh sửa cũ bao gồm các vấn đề về căn chỉnh hình ảnh.

Hãy cùng xem cách bạn có thể dễ dàng thêm và căn chỉnh hình ảnh trong trình chỉnh sửa mới để tạo bố cục đẹp cho bài viết và trang của mình.

Thêm và căn chỉnh hình ảnh trong WordPress

Trình chỉnh sửa mới đi kèm với các khối sau mà bạn có thể sử dụng để thêm hình ảnh vào các bài đăng và trang WordPress của mình.

  • Hình ảnh
  • Hình ảnh nội tuyến
  • Bộ sưu tập
  • Phương tiện & Văn bản
  • Che

Hãy bắt đầu với một khối hình ảnh đơn giản trước.

Nhấp vào nút ‘Thêm khối mới’ hoặc nhập / hình ảnh vào trình chỉnh sửa bài đăng để chèn một khối hình ảnh.

Adding a new image block in WordPress post editor

Bạn sẽ thấy ba nút bên trong khối ảnh trống.

Bạn có thể tải lên hình ảnh từ máy tính của mình, chọn hình ảnh đã được tải lên từ thư viện phương tiện hoặc chèn hình ảnh bằng cách cung cấp URL tệp hình ảnh.

Tiếp theo, nhấp vào nút ‘Tải lên’ và sau đó chọn hình ảnh bạn muốn tải lên từ máy tính của mình.

Ngay sau khi bạn chọn hình ảnh, WordPress sẽ tải nó lên thư viện phương tiện của bạn và chèn nó vào khối hình ảnh.

Image options in WordPress post editor

Bây giờ, bạn sẽ nhận thấy một thanh công cụ trên đầu hình ảnh của bạn và một số cài đặt khối hình ảnh ở cột bên phải. Để căn chỉnh hình ảnh của bạn, bạn sẽ sử dụng thanh công cụ xuất hiện trên đầu hình ảnh.

Image alignment buttons in WordPress post editor

Khối hình ảnh cung cấp cho bạn các tùy chọn căn chỉnh hình ảnh sau đây dưới dạng các nút trên thanh công cụ.

  • Căn trái
  • Căn giữa
  • Sắp xếp đúng
  • Chiều rộng
  • Chiều rộng đầy đủ

Nếu hình ảnh của bạn có chiều rộng nhỏ hơn, thì việc căn chỉnh nó sang trái hoặc phải sẽ hiển thị văn bản bên cạnh hình ảnh. Căn chỉnh nó vào giữa sẽ hiển thị hình ảnh trên hàng của chính nó mà không có văn bản ở hai bên.

Center align an image in WordPress

Chọn tùy chọn chiều rộng rộng sẽ làm cho hình ảnh của bạn rộng hơn vùng văn bản và tùy chọn chiều rộng đầy đủ sẽ đẩy nó sang các cạnh bên phải và bên trái của màn hình trình duyệt.

Making an image full-width in WordPress

Cách căn chỉnh hoàn hảo một hình ảnh bên cạnh văn bản

Nhiều khi bạn có thể cần phải căn chỉnh một cách hoàn hảo hình ảnh bên cạnh một số văn bản. Trình chỉnh sửa khối của WordPress làm cho việc này trở nên dễ dàng bằng cách thêm khối Phương tiện & Văn bản.

Khối này về cơ bản thêm một khu vực hai cột. Một cột cho hình ảnh (phương tiện) và cột thứ hai cho nội dung văn bản.

Media and text block in WordPress post editor

Chỉ cần tải lên hình ảnh của bạn và sau đó thêm văn bản bạn muốn hiển thị bên cạnh nó.

Image and text block settings

Sau khi thêm hình ảnh và văn bản, bạn sẽ nhận thấy nhiều tùy chọn hơn cho khối. Bạn có thể làm cho toàn bộ khối rộng hơn hoặc toàn chiều rộng, bạn cũng có thể chuyển đổi các bên hình ảnh và văn bản.

Căn chỉnh của hình ảnh sẽ tự động điều chỉnh theo chiều cao của văn bản trong cột tiếp theo.

Image size adjusts to align vertically

Cách căn chỉnh hình ảnh thư viện trong WordPress

Trình chỉnh sửa bài đăng của WordPress cũng đi kèm với một khối để thêm thư viện hình ảnh. Điều này cho phép bạn dễ dàng hiển thị hình ảnh trong một lưới các hàng và cột.

Khối Thư viện đi kèm với các tùy chọn căn chỉnh tương tự trong thanh công cụ.

Bạn có thể làm cho toàn bộ khối thư viện căn chỉnh sang trái, giữa hoặc phải. Bạn cũng có thể làm cho nó rộng hoặc thay đổi nó thành một hàng có chiều rộng đầy đủ.

Align gallery images in WordPress post editor

Tính năng thư viện mặc định trong WordPress khá tốt. Tuy nhiên, nếu bạn thường xuyên thêm thư viện ảnh vào các bài đăng và trang WordPress của mình, thì hãy cân nhắc sử dụng plugin thư viện ảnh như Envira Gallery .

Các plugin này sẽ cung cấp cho bạn nhiều tùy chọn hơn để căn chỉnh hình ảnh trong thư viện ảnh của bạn, hiển thị chúng trong cửa sổ bật lên và tạo kiểu khác cho chúng.

Cách thêm hai hình ảnh cạnh nhau trong WordPress

Cách dễ nhất để hiển thị hai hình ảnh cạnh nhau trong một bài đăng WordPress là thêm cả hai hình ảnh vào một khối Thư viện.

Display two images side by side in WordPress posts and pages

Đơn giản chỉ cần chọn bố cục 2 cột cho khối thư viện để hiển thị cả hai hình ảnh bên cạnh nhau. Bạn cũng có thể kiểm tra tùy chọn ‘cắt hình thu nhỏ’ để đảm bảo rằng cả hai hình ảnh đều có cùng kích thước.

Các cách khác để thêm và căn chỉnh hình ảnh trong WordPress

Ngoài hình ảnh, phương tiện và văn bản, và khối thư viện, bạn cũng có thể sử dụng khối Bìa để thêm ảnh bìa.

Trong thiết kế web hiện đại, ảnh bìa được sử dụng để tạo bố cục nội dung hấp dẫn. Những hình ảnh này được sử dụng để làm nổi bật các phần khác nhau của trang.

Khối ảnh bìa đi kèm với các tùy chọn căn chỉnh giống như khối ảnh. Bạn có thể thêm văn bản lên hình ảnh và chọn màu lớp phủ từ cài đặt khối. Phần tốt nhất là bạn có thể kiểm tra tùy chọn ‘Nền cố định’ tạo hiệu ứng nền thị sai .

Adding cover image in WordPress post

Để tìm hiểu thêm về cách sử dụng ảnh bìa, hãy xem bài viết của chúng tôi về sự khác biệt giữa ảnh nổi bật và ảnh bìa trong WordPress .

Cho đến nay, chúng tôi đã nói về việc thêm hình ảnh trực tiếp vào các bài đăng và trang của bạn. Điều gì về hình ảnh từ các trang web của bên thứ ba?

Trình chỉnh sửa khối cũng làm cho việc này trở nên dễ dàng. Nó đi kèm với các khối nhúng cho các trang chia sẻ xã hội phổ biến bao gồm Instagram, Flickr, Imgur, Photobucket, v.v.

Ví dụ: nếu bạn muốn thêm ảnh Instagram, thì chỉ cần thêm khối Instagram vào trình chỉnh sửa bài đăng và nhập URL của bài đăng bạn muốn chia sẻ.

Adding Instagram images in WordPress posts and pages

WordPress sẽ tự động tìm nạp bài đăng trên Instagram và nhúng nó cho bạn. Sau đó, bạn sẽ có thể sử dụng các tùy chọn căn chỉnh trên thanh công cụ.

Instagram embed in WordPress

Các khối nhúng cũng cho phép bạn dễ dàng nhúng video vào WordPress . Sau đó, bạn có thể sử dụng các tùy chọn tương tự trên thanh công cụ để căn chỉnh video trong WordPress.

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách dễ dàng thêm và căn chỉnh hình ảnh trong trình chỉnh sửa khối WordPress. Bạn cũng có thể muốn xem hướng dẫn của chúng tôi về cách tối ưu hóa hình ảnh để tăng tốc WordPress .

Nếu bạn thích bài viết này, vui lòng đăng ký Kênh YouTube của chúng tôi để xem các video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy chúng tôi trên TwitterFacebook .

Chia sẻ để ủng hộ ad nhé
Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
0 0 Đánh giá
Xếp hạng bài viết
Đăng ký
Thông báo về
guest
0 Bình luận
Phản hồi nội tuyến
Xem tất cả bình luận
0
Để lại ý kiến của bạnx
()
x
error: Cảnh báo: Không có quyền !!