Sử dụng các biểu tượng trình bày như những nét thẩm mỹ có thể mang lại cho bố cục của bạn một thiết kế độc đáo mà bạn có thể chưa nghĩ đến trước đây. Ngoài việc định vị biểu tượng của mô-đun bản trình bày để che mô-đun văn bản, bạn có thể sử dụng nền và đường viền của mô-đun văn bản để tạo kiểu cho biểu tượng. Điều này tạo ra một điểm nhấn thiết kế đẹp giúp đóng khung nội dung trong khi tạo cho các biểu tượng của bạn một thiết kế hoàn toàn độc đáo.

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách cách điệu các biểu tượng trình bày làm điểm nhấn thiết kế cho nội dung của bạn trong Divi.

khảo sát

Dưới đây là một số ví dụ về thiết kế mà chúng tôi sẽ xây dựng trong hướng dẫn này.

Tổng quan thiết kế mô-đun blurb divi

Tải về các bố cục mẫu cho hướng dẫn này

Để bắt tay vào bố cục các mẫu giọng của mô-đun trình bày tự do, trước tiên bạn cần tải xuống bằng nút bên dưới. Để có quyền truy cập vào phần tải xuống, bạn phải đăng ký danh sách gửi thư hàng ngày Divi của chúng tôi bằng cách sử dụng hình thức dưới. Với tư cách là người đăng ký mới, bạn sẽ nhận được nhiều ưu đãi Divi hơn nữa và gói Divi Layout vào thứ Hai hàng tuần tự do ! Nếu bạn đã có trong danh sách, chỉ cần nhập địa chỉ email của bạn bên dưới và nhấp vào Tải xuống. Bạn sẽ không được “đăng ký lại” hoặc nhận thêm email.

Tải về

Bắt đầu với thiết kế từ đầu

Để bắt đầu, hãy tạo một trang mới và đặt tiêu đề cho trang của bạn. Sau đó, triển khai trình tạo Divi trên hệ thống phần công khai. Thêm một phần thông thường với một hàng một cột. Trước khi thêm mô-đun đầu tiên của bạn, hãy cập nhật cài đặt hàng như sau:

Sử dụng chiều rộng máng xối tùy chỉnh: CÓ
Chiều rộng máng tùy chỉnh: 1

Điều này sẽ loại bỏ bất kỳ lề tùy chỉnh giữa các mô-đun.

Tạo mô-đun văn bản

Sau đó, thêm một mô-đun văn bản bên trong dòng.

Thêm một mô-đun văn bản divi

Cập nhật mô-đun văn bản với văn bản điền sau:

Dịch vụ của chúng tôi phần này hiển thị danh sách các dịch vụ khác nhau mà chúng tôi cung cấp cho khách hàng.

Thêm phần diviCách điệu mô-đun văn bản

Bây giờ, cập nhật phần còn lại của tham số mô-đun Văn bản như sau:

  • Màu nền: #ffffff
  • Phông chữ 2: Nunito
  • Tiêu đề 2 Trọng lượng phông chữ: đậm
  • Tiêu đề Phong cách Phông chữ 2: TT
  • Tiêu đề 2 Màu văn bản: #f24a5b
  • Tiêu đề 2 Kích thước văn bản: pixel 42 (máy tính để bàn), pixel 32 (máy tính bảng), pixel 22 (điện thoại)
  • Tiêu đề Khoảng cách chữ 2: 16px
  • Tiêu đề 2 Chiều cao dòng: 1.3em
Cài đặt tiêu đề mô-đun Divi

  • Chiều rộng: 500px (máy tính để bàn), 490px (máy tính bảng)
  • Sắp xếp mô-đun: trung tâm
  • Đệm tùy chỉnh (máy tính để bàn): 40px ở trên cùng, 40px ở dưới cùng, 50px ở bên trái, 50px ở bên phải
  • Đệm tùy chỉnh (điện thoại): 20px ở bên trái, 20px ở bên phải
  • Chiều rộng của đường viền: 10px
  • Màu viền: #ffffff

Kích thước và kích thước phần văn bản cấu hình mô-đun

Vì chúng ta sẽ chồng chéo mô-đun văn bản với các biểu tượng trình bày, chúng tôi cần đảm bảo rằng mô-đun văn bản nằm phía trên các biểu tượng theo thứ tự không gian z. Để thực hiện việc này, trước tiên chúng ta cần thêm đoạn mã CSS sau vào vùng CSS của phần tử chính của mô-đun Văn bản:

chức vụ: thân nhân;

Sau đó đặt giá trị chỉ mục z thành 1.

Css wordpress tùy chỉnh

Bây giờ, mô-đun văn bản này sẽ được đặt lên trên bất kỳ mô-đun nào khác trùng lặp, điều này rất quan trọng đối với thiết kế.

Tạo biểu tượng Blurb

Bây giờ chúng ta đã sẵn sàng tạo biểu tượng giới thiệu đầu tiên. Để làm điều này, trước tiên chúng ta cần thêm mô-đun Blurb và kéo nó lên đầu mô-đun văn bản. Sau đó xóa nội dung giữ chỗ (văn bản tiêu đề và nội dung) và Nhấp để sử dụng biểu tượng thay vì hình ảnh cho văn bản giới thiệu.

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

  • Màu biểu tượng: # 2ea3f2
  • Sử dụng kích thước phông chữ biểu tượng: CÓ
  • Kích thước phông chữ biểu tượng: 100px
  • Lề tùy chỉnh: 0px ở dưới cùng (điều này sẽ loại bỏ lề dưới mặc định giữa các mô-đun, không cần thiết nếu bạn đang sử dụng chiều rộng máng xối 1)

Sau đó, vì chúng tôi không sử dụng bất kỳ văn bản nào với mô-đun (chỉ biểu tượng), chúng tôi có thể xóa lề dưới mặc định bên dưới biểu tượng bố cục. Để thực hiện việc này, hãy thêm mã CSS tùy chỉnh sau vào vùng Blurb Image CSS:

CSS hình ảnh Blurb:

margin-bottom: 0px

Làm nổi bật cài đặt divi

Sao chép biểu tượng Blurb

Trước khi chúng ta bắt đầu định vị blurb, hãy tiếp tục, sao chép mô-đun blurb và kéo nó dưới mô-đun văn bản. Bây giờ bạn sẽ có một biểu tượng trình bày ở trên và bên dưới mô-đun văn bản.

Cấu hình đám mây blurb divi và sao chépĐịnh vị các biểu tượng bản trình bày bằng cách sử dụng Transform Translate

Để định vị các biểu tượng bản trình bày, chúng tôi sẽ sử dụng các tùy chọn chuyển đổi của Divi, cho phép chúng tôi đặt mô-đun bản trình bày có biểu tượng ở bất kỳ đâu trên trang.

Biểu tượng định vị Blurb #1

Để định vị biểu tượng blurb phía trên, hãy mở cài đặt mô-đun blurb và cập nhật các thông tin sau:

  • Chuyển đổi trục X dịch (máy tính để bàn): -242px
  • Chuyển đổi dịch trục Y (máy tính để bàn): 50px
  • Chuyển đổi trục X dịch (điện thoại): -170px

Tuy nhiên, bạn có thể thêm phần này theo các cài đặt bạn đã thực hiện.

biểu tượng trình bày

Biểu tượng định vị Blurb # 2

Trước khi định vị biểu tượng bản trình bày này, hãy làm cho nó lớn hơn. Để thực hiện việc này, hãy mở cài đặt của mô-đun Blurb và thay đổi kích thước phông chữ của biểu tượng thành 150px.

Sau đó, định vị biểu tượng bản trình bày bằng cách cập nhật các tùy chọn chuyển đổi sau:

  • Chuyển đổi trục X dịch (máy tính để bàn): 242px
  • Chuyển đổi dịch trục Y (máy tính để bàn): -100px
  • Chuyển đổi trục X dịch (điện thoại): 190px

Phần thiết kế mờ divi

Tạo phần khác

Từ bây giờ, chúng tôi có thể lấy cảm hứng từ những gì chúng tôi đã làm, để tạo ra một khu vực khác với cách sắp xếp khác. Tất cả những gì bạn cần làm là tạo một cột mới và sao chép các mô-đun trước đó. Để thực hiện sao chép nhiều lần, hãy di chuột qua từng mô-đun trong khi giữ phím CTRL trên bàn phím của bạn.

Sao chép mô-đun divi

Kết quả cuối cùng

Bây giờ hãy xem kết quả cuối cùng.

Kết quả cuối cùng của Divi

cuối cùng suy nghĩ

Thêm các biểu tượng trình bày làm điểm nhấn thiết kế cho nội dung là một ví dụ về cách kết hợp hai mô-đun để tạo ra một thiết kế hoàn toàn độc đáo. Trong trường hợp này, nền và đường viền của mô-đun văn bản đóng vai trò là lớp phủ một phần cho các biểu tượng xung quanh. Kết quả là duy nhất và mở ra cơ hội khám phá một số biến thể thiết kế. Hãy thoải mái khám phá các biểu tượng và cách kết hợp màu sắc khác nhau để tạo ra thứ gì đó phù hợp với nhu cầu của riêng bạn.

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