Cách đặt các hình ảnh cạnh nhau trong WordPress (Dễ dàng)

Nội dung bài viết

Bạn có muốn đặt các hình ảnh cạnh nhau trong nội dung WordPress của mình không?

Thông thường những người mới bắt đầu phải vật lộn để tìm cách đặt hai hình ảnh cạnh nhau trong các bài đăng và trang WordPress của họ.

Trong hướng dẫn từng bước này, chúng tôi sẽ chỉ ra cách dễ dàng đặt các hình ảnh cạnh nhau trong WordPress (mà không cần viết bất kỳ mã nào).

Putting images side by side in WordPress

Sử dụng Trình chỉnh sửa khối để đặt các hình ảnh cạnh nhau

Cách dễ nhất để đặt các hình ảnh của bạn cạnh nhau là sử dụngtrình chỉnh sửa khối WordPress .

Trình chỉnh sửa khối có một khối ‘Thư viện’ đặc biệt cho phép bạn hiển thị hình ảnh theo hàng và cột.

Trước tiên, bạn sẽ cần tạo một bài đăng / trang mới hoặc chỉnh sửa một bài đăng / trang hiện có để mở trình chỉnh sửa nội dung. Khi vào bên trong, hãy nhấp vào biểu tượng (+) để thêm một khối mới.

Creating a post and adding a block to it

Tiếp theo, bạn cần chọn khối Thư viện và thêm nó vào trang của mình. Bạn có thể tìm thấy khối Thư viện trong phần Khối chung hoặc bạn có thể sử dụng thanh tìm kiếm để nhanh chóng xác định vị trí của nó.

Selecting the Gallery block to add to your post

Giờ đây, bạn có thể dễ dàng thêm hình ảnh vào khối thư viện của mình bằng cách kéo chúng vào đó hoặc bằng cách sử dụng nút Tải lên. Bạn cũng có thể chọn hình ảnh từ thư viện phương tiện WordPress của mình.

Như bạn có thể thấy, chúng tôi đã thêm 2 hình ảnh vào khối Thư viện của chúng tôi. WordPress đã tự động định vị chúng cạnh nhau.

Two images in the gallery (butterflies and apple)

Nếu bạn muốn 3 hình ảnh cạnh nhau thì sao? Đây là những gì sẽ xảy ra nếu chúng tôi thêm hình ảnh thứ ba. WordPress chỉ cần thay đổi kích thước những cái khác để phù hợp với cả 3 cạnh nhau:

Three images in the gallery (butterflies, apple, and blue flowers)

Nếu bạn tải lên hình ảnh thứ tư, thì WordPress sẽ đặt nó bên dưới những hình ảnh khác.

Four images in the gallery (butterflies, apple, blue flowers, and robin)

Bạn có thể thay đổi số lượng hình ảnh mà WordPress nên bao gồm cạnh nhau trong một cột duy nhất.

Đầu tiên, hãy nhấp vào khối Thư viện, nếu nó chưa được chọn. Ở phía bên phải của màn hình, bạn sẽ thấy cài đặt khối của Thư viện.

Changing the settings for the gallery block

Bạn có thể điều chỉnh số lượng cột ở đây thành bất kỳ số nào trong khoảng từ 1 đến 4. Ví dụ: nếu bạn muốn hai hình ảnh cạnh nhau và hai hình ảnh khác bên dưới chúng, bạn có thể đặt Cột thành 2.

Setting the gallery to have 2 columns rather than 3

Nó đơn giản như vậy!

Nếu bạn muốn thay đổi vị trí của một hình ảnh trong thư viện của mình, chỉ cần nhấp vào nó. Sau đó, bạn sẽ thấy các mũi tên mà bạn có thể sử dụng để di chuyển nó về phía trước hoặc phía sau trong thư viện.

Moving an image forward or backward in the gallery

Đây là bản demo của bộ sưu tập đã hoàn thành từ bài đăng mẫu của chúng tôi:

The 2 column gallery in a live post

Sử dụng một plugin để đặt các hình ảnh cạnh nhau trong WordPress

Nếu bạn đang sử dụng trình chỉnh sửa WordPress cổ điển cũ hoặc nếu bạn muốn tạo các thư viện phức tạp hơn khối Thư viện mặc định, thì bạn sẽ cần một plugin thư viện WordPress.

Chúng tôi khuyên bạn nên sử dụng Envira Gallery vì nó là plugin thư viện WordPress tốt nhất

Vì lợi ích của hướng dẫn này, chúng tôi sẽ sử dụng phiên bản Envira miễn phí, nhưng bạn có thể muốn tải phiên bản Pro để có được các tính năng mạnh mẽ như album, trình chiếu hình ảnh, v.v.

Trước tiên, bạn cần cài đặt và kích hoạt plugin Envira Gallery. Nếu bạn không chắc chắn về cách thực hiện, chỉ cần xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress .

Tiếp theo, bạn có thể đi tới Thư viện Envira »Thêm mới trong bảng điều khiển WordPress của bạn.

Add a new gallery in Envira Gallery

Bạn sẽ cần đặt tiêu đề cho thư viện của mình. Chúng tôi đã gọi là ‘Thư viện mẫu’ của chúng tôi. Tiếp theo, tải lên những hình ảnh bạn muốn sử dụng.

Bạn có thể kéo và thả chúng vào hộp tải lên hoặc bạn có thể sử dụng một trong các nút ‘Chọn tệp’.

Give your new gallery a name

Đây là cách các hình ảnh trông như thế nào sau khi chúng được tải lên:

Images uploaded to Envira Gallery

Bạn có thể muốn đặt tiêu đề và văn bản thay thế cho hình ảnh của mình tại đây. Tiêu đề xuất hiện bên dưới hình ảnh của bạn khi người dùng đưa con trỏ chuột lên đó.

Tiêu đề cũng xuất hiện bên dưới hình ảnh trong chế độ bật lên hộp đèn, chúng ta sẽ xem xét trong giây lát.

Để chỉnh sửa tiêu đề và văn bản thay thế , hãy nhấp vào nút Chỉnh sửa trên hình ảnh trong thư viện.

Click the Edit button to edit an image in your gallery

Sau đó, bạn có thể thay đổi tiêu đề cho hình ảnh của mình. Nó mặc định là tên tệp của hình ảnh.

Bạn cũng nên nhập văn bản thay thế, vì điều này rất hữu ích cho SEO trang web WordPress của bạn. Nếu tiêu đề của bạn mô tả hình ảnh, thì bạn có thể chỉ cần lặp lại nó cho văn bản thay thế.

Setting the title and the alt text for the image

Sau khi hoàn tất, hãy đảm bảo rằng bạn nhấp vào nút ‘Lưu siêu dữ liệu’ trước khi nhấp vào X để đóng cửa sổ.

Click the Save Metadata button to save your changes

Để thêm thư viện của bạn trên trang web, trước tiên bạn cần xuất bản nó. Hãy tiếp tục và nhấp vào nút Xuất bản ở phía bên tay phải của màn hình.

Click the Publish button to publish your gallery, so you can use it on your site

Bây giờ, hãy chỉnh sửa một bài đăng hoặc trang hoặc tạo một bài viết mới. Bên trong trình chỉnh sửa nội dung , hãy nhấp vào (+) để thêm một khối vào bài đăng của bạn và chọn khối Envira Gallery. Bạn có thể tìm thấy nó trong phần Khối chung hoặc bạn có thể sử dụng thanh tìm kiếm.

Add the Envira Gallery block to your post or page

Sau đó, bạn sẽ cần nhấp vào menu thả xuống để chọn thư viện của mình.

Select your gallery from the Envira Gallery block

Bạn sẽ thấy bộ sưu tập của bạn ở vị trí trong bài đăng của bạn.

Bạn có thể điều chỉnh cài đặt ở phía bên tay phải của màn hình. Ví dụ: bạn có thể muốn thay đổi bố cục cột hoặc kích thước của lề giữa các hình ảnh.

The Envira Gallery shown in the post editor

Chúng tôi quyết định đặt phòng trưng bày của chúng tôi luôn hiển thị trong hai cột. Chúng tôi cũng đã thêm một lề rộng hơn giữa các hình ảnh.

envira gallery medium margin

Người dùng có thể nhấp vào hình ảnh để xem phiên bản có kích thước đầy đủ trong hộp đèn. Họ cũng có thể cuộn qua các hình ảnh bằng cách sử dụng hộp đèn.

Viewing an image from the Envira gallery in a lightbox

Nếu bạn muốn thêm nhiều hình ảnh hơn vào bộ sưu tập của mình, thì bạn có thể quay lại nó bằng cách truy cập Envira Gallery »All Galleries trong bảng điều khiển WordPress của bạn. Chỉ cần nhấp vào tên bộ sưu tập của bạn để chỉnh sửa nó.

Editing a gallery you've already created in Envira Gallery

Bất kỳ thay đổi nào bạn thực hiện đối với thư viện của mình sẽ xuất hiện ở bất kỳ nơi nào bạn đã đặt nó trong bài đăng, trang hoặc thanh bên của mình. Bạn không cần phải thêm nó vào những thứ này một lần nữa.

Mẹo: Nếu bạn đang sử dụng trình chỉnh sửa cổ điển thay vì trình chỉnh sửa khối , bạn vẫn có thể sử dụng Envira Gallery.

Bạn sẽ thấy nút ‘Thêm thư viện’ phía trên trình chỉnh sửa cổ điển mà bạn có thể sử dụng để thêm thư viện hiện có vào bài đăng của mình.

Adding an Envira gallery in the classic editor

Bạn cũng có thể tạo một thư viện mới bằng cách nhấp vào nút ‘Thêm Phương tiện’ rồi nhấp vào ‘Tạo Thư viện’.

Creating a new gallery using the Media Library in the Classic Editor

Chúng tôi hy vọng hướng dẫn này đã giúp bạn học cách đặt các hình ảnh cạnh nhau trong WordPress. Bạn cũng có thể muốn xem qua hướng dẫn của chúng tôi về cách căn chỉnh hình ảnh trong trình chỉnh sửa khối WordPress và danh sách toàn diện của chúng tôi về các plugin WordPress phải có (lựa chọn của chuyên gia) .

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 !!