Như người ta thường nói, một bức tranh có giá trị bằng một ngàn lời nói. Tuy nhiên, đôi khi đồ họa của bạn có thể được hưởng lợi từ một chút giải thích bổ sung dưới dạng văn bản hỗ trợ.

May mắn thay, có một số cách để định vị hình ảnh bên cạnh văn bản trong Trình chỉnh sửa khối . Với những kỹ thuật này trong tầm tay, bạn sẽ thấy việc căn chỉnh văn bản và hình ảnh trong Gutenberg dễ dàng hơn nhiều so với Trình chỉnh sửa cổ điển. 

Trong bài đăng này, chúng ta sẽ khám phá lý do tại sao việc căn chỉnh hình ảnh cần được đại tu trong Gutenberg. Sau đó, chúng ta sẽ khám phá ba cách để đặt hình ảnh bên cạnh văn bản trong Trình chỉnh sửa khối. Bắt đầu nào! 

Giới thiệu về Căn chỉnh hình ảnh trong WordPress

Để tận dụng tối đa hình ảnh của bạn, bạn sẽ muốn đặt chúng cẩn thận trên trang. Điều này có thể bao gồm việc sử dụng chúng làm biểu ngữ, sắp xếp chúng thành các cột, kết hợp chúng vào thanh bên WordPress và các tiện ích của bạn – hoặc thậm chí có thể đặt chúng bên cạnh một đoạn văn bản:

Điều này đặc biệt hữu ích để minh họa quan điểm bạn đang đưa ra trong văn bản kèm theo. Nó cũng có thể là một cách tuyệt vời để chia nhỏ các phần văn bản hoặc thêm một số sở thích và sự đa dạng vào trang của bạn bằng cách sử dụng các khối nội dung xen kẽ: 

Trong Trình chỉnh sửa cổ điển, bạn có thể định vị hình ảnh dọc theo văn bản bằng cách đặt con trỏ ở đầu đoạn và chọn nút Thêm phương tiện :

Sau đó, bạn sẽ có tùy chọn để căn chỉnh hình ảnh sang trái hoặc phải hoặc bọc văn bản của bạn xung quanh hình ảnh. Tuy nhiên, căn chỉnh và gói trong Trình chỉnh sửa cổ điển không phải lúc nào cũng hoạt động như mong đợi. Đôi khi, bạn bị bỏ lại với một hình ảnh không có kích thước hoặc căn chỉnh chính xác. 

Tin tốt là Trình chỉnh sửa khối cải thiện đáng kể chức năng căn chỉnh hình ảnh của Trình chỉnh sửa cổ điển. Trên thực tế, thậm chí có một khối được thiết kế để đảm bảo rằng văn bản và hình ảnh của bạn luôn được định vị hoàn hảo. 

3 cách dễ dàng để đặt hình ảnh bên cạnh văn bản trong trình chỉnh sửa khối

Cho dù chúng đang chia nhỏ văn bản, minh họa một điểm hay chỉ đơn giản là thêm sự quan tâm, hình ảnh đóng một vai trò quan trọng trong thiết kế web. Với ý nghĩ đó, hãy đảm bảo bạn có toàn quyền kiểm soát cách những đồ họa này tương tác với phần còn lại của trang web WordPress của bạn . Dưới đây là ba cách dễ dàng để đặt hình ảnh bên cạnh văn bản trong Trình chỉnh sửa khối. 

1. Sử dụng Cài đặt Căn chỉnh Văn bản

Trình chỉnh sửa Gutenberg đi kèm với một bộ cài đặt căn chỉnh hoàn chỉnh mà bạn có thể sử dụng để định vị hình ảnh của mình cùng với văn bản. Để bắt đầu, bạn cần tạo khối Hình ảnh và tải lên phương tiện của mình.

Chỉ cần nhấp vào biểu tượng + màu đen , sau đó bắt đầu nhập “Hình ảnh”. Bạn có thể chọn khối khi nó xuất hiện:

Sau đó, tải lên một hình ảnh từ máy tính của bạn hoặc chọn một hình ảnh từ Thư viện Phương tiện WordPress của bạn . Sau đó, bạn có thể chèn một khối Đoạn văn mới và thêm tất cả văn bản cuối cùng sẽ xuất hiện bên cạnh hình ảnh của bạn: 

Có một số cài đặt căn chỉnh khác nhau mà bạn có thể sử dụng. Để truy cập các tùy chọn này, hãy nhấp vào khối Hình ảnh. Sau đó, chọn biểu tượng Căn chỉnh từ thanh công cụ:

Nếu bạn chọn Căn trái , văn bản sẽ xuất hiện ở bên phải hình ảnh. Ngoài ra, nếu bạn chọn Căn phải , văn bản sẽ được hiển thị ở bên trái của khối Hình ảnh: 

Chúng ta hãy xem xét điều này trong hành động.

Có thể bạn có thể chọn Căn trái hoặc Căn phải , nhưng văn bản không bao quanh hình ảnh. Nếu điều này xảy ra, hình ảnh có thể chiếm toàn bộ chiều rộng trang. Để thay đổi kích thước hình ảnh , hãy nhấp để chọn khối và sau đó kéo các chốt điều khiển xuất hiện:

Khi khối thu nhỏ, văn bản sẽ tự động quấn quanh hình ảnh của bạn. Nếu bạn đổi ý tại bất kỳ điểm nào và muốn hình ảnh chiếm 100 phần trăm không gian ngang có sẵn, chỉ cần chọn Căn giữa . 

2. Sử dụng Khối Thư viện

Khối Hình ảnh không phải là cách duy nhất để thêm ảnh vào trang web WordPress của bạn. Nếu bạn muốn hiển thị nhiều ảnh, bạn có thể sử dụng khối Thư viện : 

Thư viện chứa các khối Hình ảnh riêng lẻ cho từng đồ họa và sắp xếp chúng thành các cột. Điều này cho phép bạn làm nổi bật nhiều hình ảnh theo cách có cấu trúc và hấp dẫn.

Đôi khi, bạn có thể cần hiển thị một số văn bản cùng với thư viện WordPress của mình . Ví dụ: bạn có thể muốn thêm tiêu đề, cung cấp giải thích hỗ trợ hoặc thậm chí chèn Kêu gọi hành động (CTA) :

Tin tốt là bạn có thể sử dụng chính xác các cài đặt căn chỉnh mà chúng ta đã thảo luận trước đó. Điều này có nghĩa là bạn có thể chỉ cần thêm một khối Đoạn văn ở trên hoặc bên dưới Thư viện, sau đó chèn văn bản bạn muốn định vị cùng với hình ảnh của mình:

Khi tất cả các phần đã ở đúng vị trí, hãy nhấp vào khối Thư viện và chọn biểu tượng Căn chỉnh . Tại đó, bạn có thể chọn Căn trái , thao tác này sẽ định vị văn bản của bạn ở bên phải Thư viện. Ngoài ra, bạn có thể chọn Căn phải và hiển thị văn bản ở bên trái khối Thư viện.

3. Thêm Khối Phương tiện & Văn bản

Để giúp bạn tạo bố cục hoàn hảo, Gutenberg đã giới thiệu khối Phương tiện & Văn bản. Khối này có bố cục hai cột. Theo mặc định, hình ảnh xuất hiện ở bên trái và vùng văn bản được đặt ở bên phải:

Ngoài ra, bạn có thể chuyển đổi các cột này bằng cách nhấp vào khối Phương tiện & Văn bản. Sau đó, chọn nút Hiển thị phương tiện ở bên phải :

Bạn cũng có thể chọn giữa màn hình có chiều rộng và màn hình có chiều rộng đầy đủ, nếu các tùy chọn đó được chủ đề WordPress của bạn hỗ trợ . Khi bạn hài lòng với bố cục của mình , bạn có thể nhập văn bản trực tiếp vào cột Văn bản. Sau đó, bạn có thể tải lên hình ảnh của mình trong vùng Media:

Khi bạn đã có các yếu tố này, bạn có thể muốn thử nghiệm với các cách căn chỉnh khác nhau. Chỉ cần nhấp vào Thay đổi Căn chỉnh theo chiều dọc , sau đó chọn từ các tùy chọn có sẵn:

Các cài đặt này sẽ thay đổi vị trí văn bản xuất hiện liên quan đến hình ảnh. Ví dụ: nếu bạn chọn Căn giữa , văn bản sẽ căn với tâm của hình ảnh đi kèm:

Mỗi khối đều có các cài đặt khác nhau trong thanh bên của trình chỉnh sửa và Phương tiện & Văn bản cũng không ngoại lệ. Đảm bảo rằng bạn đã chọn khối này trong canvas của trình chỉnh sửa chính, sau đó nhấp vào tab Chặn : 

Cài đặt duy nhất đầu tiên là Ngăn xếp trên thiết bị di động . Khi tùy chọn này được bật, phương tiện và văn bản của bạn có thể xuất hiện chồng lên nhau trên các màn hình nhỏ hơn, chẳng hạn như điện thoại thông minh và máy tính bảng. Điều này có thể mang lại trải nghiệm tốt hơn cho người dùng di động , những người có thể phải cuộn theo chiều ngang để xem toàn bộ khối.

Tiếp theo, bạn có thể chỉ định liệu WordPress có nên tự động cắt hình ảnh để nó lấp đầy toàn bộ cột hay không. Điều này có thể đảm bảo rằng khối của bạn hiển thị chính xác trên nhiều màn hình hơn . 

Sự kết luận 

Mặc dù có nhiều tình huống mà hình ảnh có thể tự nói lên, nhưng đôi khi bạn có thể muốn thêm một số văn bản hỗ trợ. Bằng cách căn chỉnh đồ họa và văn bản một cách cẩn thận, bạn có thể tạo ra một số hiệu ứng hình ảnh thú vị hoặc chỉ đơn giản là cung cấp ngữ cảnh cần thiết. 

Hãy nhanh chóng tóm tắt ba cách để đặt hình ảnh bên cạnh văn bản trong Trình chỉnh sửa khối: 

1. Sử dụng cài đặt căn chỉnh văn bản.
2. Sử dụng khối Thư viện.
3. Thêm khối Phương tiện & Văn bản.