Khối bố cục Divi mở ra nhiều cách thuận tiện để tích hợp các tính năng thiết kế mạnh mẽ của Divi Builder với trình chỉnh sửa khối mặc định của WordPress (Gutenberg). Điều này cho phép bạn viết hầu hết các nội dung bài đăng trên blog của bạn bằng giao diện khối Gutenberg quen thuộc, sau đó đưa vào các bố cục Divi ở những nơi cần thiết kế hoặc chức năng tùy chỉnh. Khối bố cục Divi có thể bao gồm mọi thứ bạn có thể tạo trong Divi Builder, nhưng cũng rất tuyệt vời khi bao gồm những thứ đơn giản và cần thiết như hình thức trong tổng số đăng ký.

Trong hướng dẫn này, chúng ta sẽ xem cách thêm một hình thức đăng ký một bài đăng trên blog của Gutenberg bằng cách sử dụng khối bố cục Divi.

Kết quả có thể

Kết quả cuối cùng divi

Nhập khối bố cục JSON

Tải xuống bố cục trong thư viện Divi

Để nhập tệp JSON mà bạn có thể tải xuống ở trên, hãy truy cập thư viện Divi của bạn trong phần phụ trợ của bảng điều khiển WordPress và nhấp vào 'Nhập và xuất'.

Nhập Divi

Sau đó chọn tệp JSON trong thư mục tải xuống của bạn và nhấp vào "Nhập Bố cục Trình tạo Divi".

Nhập json divi 1

Thêm một Khối Divi mới bên trong bài đăng Gutenberg

Khi bố cục của bạn đã được nhập, bạn có thể truy cập tin nhắn Gutenberg của mình và thêm khối bố cục Divi mới.

Thiết kế Divi

Nhập tệp JSON từ các bản trình bày đã lưu

Sau đó nhấp vào "Tải từ thư viện", đi tới "Các bố cục đã lưu của bạn" và chọn bố cục để nhập khối bố cục Divi CTA vào bài đăng trên blog của bạn. Đó là nó !

Tiêm biểu mẫu trên gutenberg
Đăng ký email bố cục Divi

Và đó là tất cả!

Tiêm mô-đun biểu mẫu divi

Hãy chuyển sang phần hướng dẫn, được không?

Thêm một mô-đun email Optin vào bài đăng trên blog Gutenberg của bạn

Tạo hoặc chỉnh sửa một bài đăng blog

Để bắt đầu, chúng ta cần tạo một bài đăng blog mới hoặc chỉnh sửa bài đăng hiện có. Đối với ví dụ này, hãy thêm nội dung làm giả tiêu đề và nội dung của bài viết bằng cách sử dụng một vài khối tiêu đề và đoạn văn. Tiếp theo, thêm hình ảnh nổi bật và chọn “Không có thanh bên” cho bố cục trong cài đặt trang Divi.

Thiết kế mặt hàng

Thêm khối bố cục Divi trực tuyến

Khi bạn đã tạo gần hết bài đăng, tất cả những gì chúng ta cần làm là thêm khối bố cục Divi mới vào bất cứ nơi nào chúng ta muốn trong khu vực bài đăng. nội dung của việc xuất bản. Chúng tôi có thể thêm nó ở đâu đó gần cuối tin nhắn để thu hút khách hàng tiềm năng đủ điều kiện, người rõ ràng quan tâm đến nội dung của tin nhắn.

Để thêm nó, hãy di chuột qua khu vực bạn muốn thêm email tùy chọn, sau đó nhấp vào biểu tượng dấu cộng màu xanh lam để thêm một khối mới. Trong danh sách các khối theo ngữ cảnh, hãy chọn khối Bố cục Divi.

Thêm khối thiết kế divi

Tạo bố cục mới trong khối bố cục Divi

Khi khối bố cục Divi đã được chọn, chúng ta sẽ có tùy chọn “Tạo bố cục mới” hoặc “Tải từ thư viện”. Vì chúng tôi cần tạo tùy chọn email từ đầu, hãy chọn tùy chọn “Tạo bố cục mới”.

Thiết kế thiết kế divi mới

Phần thiết kế

Trong trình chỉnh sửa bố cục, chúng tôi có thể bắt đầu thiết kế optin email để đưa vào bài đăng của chúng tôi. Mọi thứ chúng tôi thiết kế trong trình chỉnh sửa này sẽ được hiển thị trong khu vực Khối bố cục Divi của bài đăng.

Để bắt đầu, hãy mở cài đặt phần của phần mặc định đã có.

Đối với bố cục, chúng tôi sẽ chọn một bố cục hai cột.

Chọn bố cục divi

Sau đó, chúng tôi sẽ thêm mô-đun Email Optin vào một trong các cột, tôi để lại lựa chọn cột cho bạn.

Mô-đun email Optin divi

Tiếp theo, chúng tôi sẽ tùy chỉnh nền của phần. Bạn luôn có thể thay đổi các giá trị để làm cho thiết kế của mình trở nên độc đáo. Tuy nhiên, chúng tôi đã sử dụng các giá trị sau:

  • Bối cảnh: # ff6100
  • Top & Bottom Separator: đếm thứ 13 tính từ trên xuống.
Bộ tách mô-đun Divi
  • Chiều rộng phần tử dải phân cách: 40px (trên và dưới).

Bây giờ chúng ta sẽ thêm văn bản vào cột đối diện. Ở đây bạn sẽ sử dụng một văn bản khuyến khích để mang lại khách thăm quan để đăng ký.

Mô-đun văn bản Divi

Sau đó, bạn sẽ phải thực hiện các sửa đổi khác nhau:

  • Phông chữ: Montserrat
  • Màu chữ: #FFF
  • Phụ đề phông chữ văn bản H2: Montserrat
  • Văn bản phụ đề H2 Kích thước: 2.5em
  • Phụ đề văn bản Màu H2: #FFF
Cá nhân hóa tiêu đề Divi

Hãy nhớ cấu hình hệ thống email mà bạn sẽ sử dụng. Bạn nên biết rằng Gutenberg tương thích với MailChimp.

cuối cùng suy nghĩ

Thêm một email optin vào thư Gutenberg của bạn đã trở nên cực kỳ dễ dàng với khối bố cục Divi. Bạn không chỉ có thể thêm tùy chọn email đầy đủ chức năng (và dễ sử dụng) chỉ trong vài giây mà còn có thể sử dụng Divi Builder để thêm thiết kế tùy chỉnh, hiệu ứng di chuột và hoạt ảnh. Tất cả điều này mà không cần phải sử dụng một plugin!