Hình ảnh gói văn bản là một kỹ thuật thiết kế phổ biến, thường được sử dụng trong các phương tiện in ấn, chẳng hạn như tạp chí và báo. Nhưng bạn cũng có thể tìm thấy điều này được sử dụng trên web, đặc biệt là cho các bài đăng trên blog. Gói văn bản xung quanh hình ảnh thực sự là một phần khá chuẩn của WordPress liên quan đến việc điều chỉnh căn chỉnh đơn giản trong trình chỉnh sửa WYSIWYG. Vấn đề duy nhất là rất khó để tạo kiểu cho trang của bạn bằng trình chỉnh sửa WordPress mặc định. Nó ở đó Divi có thể giúp đỡ !

Mặc dù hướng dẫn này tập trung vào hình ảnh, bạn thực sự có thể sử dụng cùng một quy trình này để bọc văn bản trong bất kỳ mô-đun nào. Divi.

khảo sát

Đây là cái nhìn về thiết kế chính mà chúng ta sẽ xây dựng ngày hôm nay.

Trong ví dụ này, tôi sẽ chỉ cho bạn cách quấn hai cột văn bản xung quanh mô-đun hình ảnh được căn giữa. Điều này cho phép bạn tạo bố cục theo phong cách tạp chí hoặc tờ báo độc đáo. Tuy nhiên, vì không có thuộc tính css "float: center", chúng tôi sẽ cần một chút sáng tạo với bố cục để thiết kế này hoạt động.

Đây là cách để làm điều đó.

Tạo nội dung ở hàng trên cùng với hình ảnh ở giữa

Để bắt đầu, hãy tạo một phần thông thường mới với một hàng một cột. Sau đó, thêm một mô-đun hình ảnh vào hàng của bạn. Tải lên hình ảnh có kích thước 400 pixel x 250 pixel. Kích thước phải chính xác cho thiết kế này.

Sau đó cập nhật các thông số thiết kế như sau:

Độ rộng tối đa: 400px (máy tính để bàn), 100% (máy tính bảng)
Sắp xếp mô-đun: trung tâm
Đệm tùy chỉnh: 2% ở trên cùng, 2% ở phía dưới, 2% ở bên trái, 2% ở bên phải

Sau đó, lưu cài đặt của bạn và mở cài đặt dòng. Lấy phần đệm từ cuối hàng ra.

Đệm tùy chỉnh: 0px ở phía dưới

Tạo dòng văn bản hai cột

Bên dưới hàng có chứa hình ảnh, hãy tạo một hàng mới với bố cục hai cột.

Trong cột 1, thêm mô-đun văn bản có nội dung giả.

Sau đó sao chép mô-đun văn bản và dán nó vào cột 2 cho cột văn bản thứ hai.

Tạo không gian trống với vách ngăn nổi

Để tạo không gian chúng ta cần cho hình ảnh, chúng ta có thể sử dụng các mô-đun phân chia. Trong cột bên trái, chúng ta sẽ tạo một mô-đun chia có kích thước bằng một nửa hình ảnh và thả nó sang bên phải để mô-đun văn bản của chúng ta bao quanh dải phân cách. Tiếp theo, ở cột bên phải, chúng ta sẽ tạo một dấu phân cách khác có kích thước bằng một nửa hình ảnh và làm nổi nó sang bên trái.

Để thực hiện việc này, hãy tạo một mô-đun phân tách và đặt nó trực tiếp lên trên mô-đun văn bản trong cột 1.

Sau đó cập nhật cài đặt mô-đun phân chia như sau:

Hiển thị dải phân cách: KHÔNG
Chiều rộng: 200px
Chiều cao: 250px

Đảm bảo chiều cao giống như đã tạo trước đó và chiều rộng chính xác bằng một nửa chiều rộng của hình ảnh.

Đối với thiết bị di động, chúng tôi muốn tắt dải phân cách trên máy tính bảng và điện thoại. Để thực hiện việc này, hãy cập nhật cài đặt hiển thị để tắt màn hình của máy tính bảng và điện thoại.

Bây giờ, dấu phân tách đầu tiên của chúng ta đã được tạo, sao chép mô-đun phân tách và dán nó lên trên cùng của mô-đun văn bản trong cột 2.

Tiếp theo, chúng ta cần làm nổi các dải phân cách. Để thực hiện việc này, hãy mở cài đặt bộ chia trong cột 1 và thêm mã CSS tùy chỉnh sau vào phần tử chính:

phao: phải;

Tiếp theo, mở cài đặt của mô-đun phân chia trong cột 2 và thêm mã CSS tùy chỉnh sau vào phần tử chính:

float: left;

Di chuyển hình ảnh vào đúng vị trí với lề tùy chỉnh

Bây giờ chúng ta chỉ cần giảm hình ảnh của chúng ta ở hàng đầu tiên để nó phù hợp với không gian mà chúng ta đã tạo với các vách ngăn.

Mở cài đặt Mô-đun hình ảnh và thêm các lề tùy chỉnh sau:

Ký hiệu tùy chỉnh: Thấp -250px (Máy tính để bàn), 20px (Máy tính bảng)

Đây là kết quả cho đến nay.

Thêm một tiêu đề cho phần

Bước cuối cùng này là tùy chọn, nhưng nếu bạn muốn thêm tiêu đề vào phần, hãy tạo mô-đun văn bản và đặt nó phía trên hình ảnh.

Sau đó thêm nội dung sau mô-đun văn bản:

Tìm hiểu thêm về cách cho

Sau đó cập nhật cài đặt văn bản như sau:

Màu nền: #000000
Tiêu đề 2 Phông chữ: Màn hình Playfair
Tiêu đề 2 Sắp xếp văn bản: Tiêu đề trung tâm
Màu văn bản 2: #ffffff
Tiêu đề 2 Chiều cao dòng: 2em

Căn đều văn bản để có thiết kế bọc văn bản gọn gàng hơn

Khi bao quanh văn bản bằng hình ảnh, đặc biệt là nếu văn bản được căn giữa theo cách này, thì việc căn giữa văn bản luôn là một ý tưởng hay. Trong trường hợp này, chỉ cần thay đổi hướng của văn bản thành biện minh cho hai mô-đun văn bản chứa nội dung của việc gói văn bản.

Kết quả cuối cùng

Đây là kết quả cuối cùng.

cuối cùng suy nghĩ

Biết cách bao quanh văn bản bằng hình ảnh một cách hiệu quả thực sự có thể làm cho nội dung của bạn trông chuyên nghiệp và dễ đọc. Khái niệm này khá đơn giản. Tất cả những gì bạn phải làm là thả nổi hình ảnh của mình sang phải hoặc trái, sau đó sử dụng khoảng cách tùy chỉnh xung quanh hình ảnh để đệm. Và điều tôi thích là bạn có thể sử dụng bất kỳ mô-đun nào (không chỉ hình ảnh) để chèn văn bản vào bất kỳ loại nội dung nào trong Divi. Tôi hy vọng điều này sẽ mang lại cho bạn một chút cảm hứng cho dự án tiếp theo của bạn.

Hy vọng nhận được từ bạn trong các ý kiến.