Bạn có muốn đặt hình ảnh cạnh nhau trong nội dung WordPress của mình không?
Những người mới làm quen gặp rất nhiều khó khăn trong việc bố cục bài viết, nhất là khi họ muốn đặt 2 hình ảnh cạnh nhau trong bài viết trên WordPress.
Trong bài viết này, chúng tôi sẽ hướng dẫn cho bạn cách dễ dàng bố trí 2 hình ảnh cạnh nhau trong WordPress (mà không cần viết một dòng mã nguồn nào).
Sử dụng Block Editor để đặt hình ảnh cạnh nhau
Cách dễ nhất để sắp xếp hai hình ảnh cạnh nhau là sử dụng Block Editor của WordPress.
Trình Block Editor có một block mang tên Gallery cho phép bạn bố trí hình ảnh theo dạng các cột và hàng.
Trước tiên, bạn sẽ cần tạo một bài viết / trang mới hoặc chỉnh sửa một bài hiện có để mở trình chỉnh sửa nội dung. Khi đã vào trong, hãy nhấp biểu tượng (+) để thêm một khối mới.
Tiếp theo, bạn cần chọn khối Gallery và thêm nó vào nội dung bài viết. Bạn có thể tìm thấy block Gallery trong phần Common Blocks hoặc sử dụng thanh tìm kiếm để xác định vị trí của nó một cách nhanh chóng.
Giờ đây, bạn có thể dễ dàng thêm hình ảnh vào khối Gallery bằng cách kéo chúng vào đó hoặc bằng cách sử dụng nút Upload. Bạn cũng có thể chọn hình ảnh từ mục Media Library.
Như bạn có thể thấy trong ví dụ, chúng tôi đã thêm 2 hình ảnh vào khối Gallery và WordPress đã tự động định vị chúng cạnh nhau.
Nếu bạn muốn 3 hình ảnh cạnh nhau thì sao? Đây là những gì xảy ra nếu chúng ta thêm một hình ảnh thứ ba. WordPress chỉ đơn giản thay đổi kích thước của chúng để phù hợp với độ rộng màn hình.
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.
Bạn có thể thay đổi số lượng hình ảnh WordPress nên bao gồm cạnh nhau trong một cột.
Đầu tiên, nhấp vào khối Gallery, bạn sẽ thấy cài đặt khối của Gallery phía bên phải màn hình.
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. Chẳng hạn, nếu bạn muốn hai hình ảnh cạnh nhau và hai hình khác bên dưới chúng, bạn có thể đặt Columns thành 2.
Chỉ đơn giản vậy thôi!
Nếu bạn muốn thay đổi vị trí của một hình ảnh trong bộ sưu tập của bạn, chỉ cần nhấp vào nó. Sau đó, bạn sẽ thấy các mũi tên để di chuyển tiến hoặc lùi hình ảnh trong block.
Đây là một bản demo mẫu của chúng tôi :
Sử dụng Plugin để sắp xếp 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 gallery được trình bày phức tạp hơn những gì block Gallery mặc định cung cấp, bạn sẽ cần một plugin gallery cho WordPress.
Chúng tôi khuyên bạn nên sử dụng Envira Gallery vì đây là plugin gallery cho WordPress tốt nhất trên thị trường.
Trong 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ể mua phiên bản Pro để sử dụng được các tính năng mạnh mẽ như album, trình chiếu hình ảnh, …
Trước tiên, bạn sẽ cần cài đặt và kích hoạt plugin Envira Gallery . Nếu bạn chưa biết làm điều này như thế nào, chỉ cần tham khảo hướng dẫn của chúng tôi về cách cài đặt plugin WordPress .
Tiếp theo, bạn có thể truy cập Envira Gallery » Add New trong bảng điều khiển WordPress dashboard của mình.
Bạn sẽ cần phải đặt một tiêu đề cho gallery của bạn. Trong ví dụ này chúng tôi gọi là Example Gallery. Tiếp theo, tải lên những hình ảnh bạn muốn sử dụng trong gallery này.
Bạn có thể kéo và thả chúng vào hộp upload hoặc sử dụng nút Select Files.
Đây là cách hình ảnh hiển thị sau khi được upload:
Bạn có thể sẽ muốn đặt tiêu đề và alt text cho gallery ở bước này. Tiêu đề sẽ xuất hiện bên dưới hình ảnh của bạn khi người dùng di chuột đè lên chúng.
Tiêu đề cũng xuất hiện bên dưới hình ảnh khi được hiển thị dưới dạng lightbox popup.
Để chỉnh sửa tiêu đề và alt text, hãy nhấp vào nút Edit ở mỗi hình ảnh trong gallery.
Tiêu đề mặc định là tên file được upload lên, bạn có thể thay đổi điều này.
Bạn cũng nên nhập vài dòng alt text (văn bản thay thế), vì điều này hữu ích cho việc SEO trang WordPress của bạn. Nếu tiêu đề của bạn đã mô tả hình ảnh, bạn chỉ cần copy nó sang ô cho alt text.
Khi bạn đã hoàn tất, hãy nhớ nhấp vào nút Save Metadata trước khi nhấp vào X để đóng cửa sổ.
Để chèn bộ sưu tập của bạn vào trang web, trước tiên bạn sẽ cần xuất bản nó. Tiếp tục nhấp vào nút Publish ở phía bên phải của màn hình.
Bây giờ, hãy chỉnh sửa một bài viết hoặc trang bất kỳ, hoặc tạo một bài mới. Trong trình chỉnh sửa nội dung, nhấp (+) để thêm một khối vào bài viết của bạn và chọn khối Envira Gallery. Bạn có thể tìm thấy nó trong phần Common Blocks hoặc sử dụng thanh tìm kiếm.
Sau đó, nhấp vào menu thả xuống để chọn gallery bạn vừa tạo.
Bạn sẽ thấy bộ sưu tập của bạn hiện ra ngay tại vị trí đang thao tác.
Bạn có thể điều chỉnh các thiết lập ở phía bên phải màn hình. Chẳng hạn, bạn có thể thay đổi bố cục cột hoặc kích thước lề giữa các hình ảnh.
Chúng tôi quyết định đặt bộ sưu tập trong ví dụ luôn hiển thị thành hai cột. Chúng tôi cũng đã chỉnh lại cho lề giữa các ảnh rộng hơn một chút.
Người dùng có thể nhấp vào hình ảnh để xem phiên bản có kích thước đầy đủ dưới dạng lightbox. Họ cũng có thể cuộn để di chuyển giữa các hình ảnh ngay trong lightbox này.
Nếu bạn muốn thêm hình ảnh vào gallery, bạn có thể quay lại và chỉnh sửa trong phần Envira Gallery » All Galleries ở bảng điều khiển admin WordPress. Chỉ cần nhấp vào tên của gallery để chỉnh sửa, thêm bớt hình ảnh.
Mọi thay đổi bạn thực hiện đối với thư viện của mình sẽ có tác dụng ở bất cứ nơi nào bạn đặt nó, bất kể trong bài viết, page hay sidebar.
Lưu ý: Nếu bạn đang sử dụng trình chỉnh sửa cổ điển – classic editor, bạn vẫn có thể sử dụng Envira Gallery.
Bạn sẽ thấy nút Add Gallery phía trên trình chỉnh sửa cổ điển, nhấp vào nút này sẽ cho phép bạn chèn một gallery trong hệ thống của Envira Gallery vào bài viết
Bạn cũng có thể tạo một gallery mới bằng cách nhấp vào nút Add Media rồi Create Gallery.
Chúng tôi hy vọng hướng dẫn này đã giúp bạn biết cách bố trí hình ảnh cạnh nhau trong WordPress. Bạn cũng có thể tham khảo thêm 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 block editor của WordPress và danh sách các plugin tối cần thiết cho WordPress.
Nếu thích bài viết này, hãy đăng ký Kênh YouTube của chúng tôi để xem video hướng dẫn nhé. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook để cập nhật các thông tin mới nhất từ CunghocWP.
