Khi bạn sắp xếp hợp lý cách bạn tạo các bài đăng trên blog của mình Website, rất có thể bạn muốn đưa một CTA hấp dẫn vào đâu đó trong bài viết của mình. Giờ đây với việc tích hợp Khối bố cục Gutenberg mới của Divi, bạn có thể dễ dàng thêm khối mới do Divi tạo ở bất kỳ đâu trong bài đăng blog Gutenberg của mình. Điều này cho phép bạn giữ nội dung tổng thể bài đăng blog trong môi trường Gutenberg, trong khi vẫn tạo CTA Divi tùy chỉnh bằng cách sử dụng các tùy chọn tích hợp của Divi. Tốt nhất của cả hai thế giới! Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách thêm khối bố cục Divi CTA hoạt hình, nội tuyến vào bài đăng Gutenberg của bạn. Chúng tôi cũng sẽ chia sẻ miễn phí tệp JSON khối bố cục Divi CTA!
Đi thôi.
Kết quả có thể
Trước khi đi sâu vào hướng dẫn, chúng ta hãy xem kết quả trên các kích thước màn hình khác nhau.
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'.
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".
Thêm một Khối Divi mới bên trong 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.
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ó!
Hãy bắt đầu tái tạo!
Sử dụng mẫu xuất bản cho gói chủ đề thứ ba
Sử dụng gói Trình tạo chủ đề thứ ba
Đã đến lúc bắt đầu tạo từ đầu! Trước hết, thiết kế mà chúng tôi tạo lại tương ứng với gói tạo chủ đề thứ ba đã được xuất bản trên blog Divi. Đi tới bài viết và tải xuống các tệp JSON cho gói tạo chủ đề này.
Chuyển đến Trình tạo chủ đề Divi
Khi bạn đã tải xuống gói tạo chủ đề thứ ba, bạn có thể truy cập Trình tạo chủ đề Divi.
Tải mẫu xuất bản
Tải xuống mẫu bài đăng Theme Builder Pack bằng cách nhấp vào biểu tượng ở góc trên bên phải.
Sau đó chọn mẫu bài đăng và nhấp vào "Nhập mẫu Trình tạo chủ đề Divi". Đảm bảo cũng lưu các thay đổi đối với trình tạo chủ đề. Ngoài điều này, bạn sẽ cần biết thêm về nó.
Mở một ấn phẩm Gutenberg hiện có hoặc tạo một ấn phẩm mới
Bước tiếp theo là thêm khối bố cục Divi CTA vào bài đăng Gutenberg của chúng tôi. Để làm điều này, hãy mở một bài viết hiện có hoặc tạo một bài viết mới.
Thêm một khối Divi mới trực tuyến
Khi bên trong thư, bạn có thể thêm một khối bố cục Divi mới.
Tạo một bố cục mới bên trong khối Divi
Sau đó, bạn sẽ có hai lựa chọn. Chọn tùy chọn "Tạo bố cục mới".
Cài đặt phần
khoảng cách
Khi vào bên trong trình chỉnh sửa khối bố cục Divi, bạn sẽ thấy một phần. Mở phần này và thêm các giá trị lề tùy chỉnh để tạo khoảng trống xung quanh vùng chứa phần.
- Lề trên: 50px
- Lề dưới: 50px
- Lề trái: -10%
- Lề phải: -10%
Thêm dòng số 1
Cấu trúc cột
Tiếp tục thêm một hàng mới bằng cấu trúc cột sau:
kích thước
Không thêm nhiều mô-đun, mở các tham số dòng và tăng chiều rộng và chiều rộng tối đa.
- Chiều rộng: 100%
- Chiều rộng tối đa: 100%
Thêm Dấu phân cách số 1 vào cột
tầm nhìn
Đã đến lúc thêm các mô-đun, bắt đầu với một mô-đun tách. Đảm bảo rằng tùy chọn “Hiển thị dấu phân cách” được bật.
- Hiển thị dấu phân cách: Có
Dòng
Chuyển sang tab thiết kế mô-đun và thay đổi cài đặt hàng như sau:
- Màu dòng: # fc526e
- Kiểu dáng: chắc chắn
- Vị trí đường: cao
kích thước
Cũng thay đổi các tham số kích thước.
- Trọng lượng bộ chia: 3px
- Chiều rộng: 30%
- Sắp xếp mô-đun: đúng
- Chiều cao: 3px
Hoạt hình
Và thay đổi cài đặt hoạt ảnh cho phù hợp:
- Phong cách hoạt hình: Trang trình bày
- Hướng hoạt ảnh: trái
- Thời lượng hoạt ảnh: 2000ms
- Độ trễ hoạt ảnh: 500 ms
- Cường độ hoạt ảnh: 100%
- Độ mờ bắt đầu hoạt ảnh: 0%
Thêm dải phân cách số 2 vào cột
tầm nhìn
Hãy chuyển sang mô-đun tách tiếp theo. Một lần nữa, hãy đảm bảo rằng tùy chọn “Hiển thị dấu phân cách” được bật.
- Hiển thị dấu phân cách: Có
Dòng
Sau đó, chuyển đến tab thiết kế mô-đun và thay đổi cài đặt hàng như sau:
- Màu dòng: # e1e3e8
- Kiểu dáng: chắc chắn
- Vị trí đường: cao
kích thước
Sau đó sửa đổi các tham số kích thước mô-đun.
- Trọng lượng bộ chia: 3px
- Chiều cao: 3px
khoảng cách
Đồng thời thêm các giá trị khoảng cách tùy chỉnh.
- Lề trái: 10%
- Lề phải: -20%
Hoạt hình
Và hoàn thành cài đặt mô-đun bằng cách thay đổi cài đặt hoạt ảnh như sau:
- Phong cách hoạt hình: Trang trình bày
- Hướng hoạt ảnh: trái
- Thời lượng hoạt ảnh: 2000ms
- Độ trễ hoạt ảnh: 500 ms
- Cường độ hoạt ảnh: 100%
- Độ mờ bắt đầu hoạt ảnh: 100%
Bạn có thể thêm nhiều dấu phân cách như bạn muốn điều chỉnh hoạt hình của mình.
Thêm một dòng # 2
Cấu trúc cột
Thêm một hàng khác vào phần sử dụng cấu trúc cột sau:
kích thước
Không thêm nhiều mô-đun, mở các tham số dòng và sửa đổi các tham số kích thước như sau:
- Sử dụng chiều rộng máng tùy chỉnh: Có
- Chiều rộng máng xối: 1
- Chiều rộng: 70%
- Căn chỉnh đường: trung tâm
Thêm mô-đun văn bản # 1 vào cột
Thêm nội dung H2
Tiếp theo, thêm mô-đun văn bản đầu tiên vào cột hàng với nội dung H2 tùy bạn chọn.
Cài đặt văn bản H2
Chuyển sang tab Thiết kế và thay đổi cài đặt văn bản H2 cho phù hợp:
- Màu văn bản của mục 2: # fc526e
- Tiêu đề 2 Kích thước văn bản: 28px
khoảng cách
Sau đó thêm giá trị điền tùy chỉnh.
- Phần đệm trên: 50px
- Đệm dưới: 50px
- Đệm trái: 50px
biên giới
Chúng tôi cũng sử dụng một biên giới bên trái.
- Độ rộng đường viền bên trái: 2px
- Màu viền trái: # fc526e
Hoạt hình
Và hoàn thành các tham số mô-đun bằng cách thêm một hình ảnh động cá nhân.
- Phong cách hoạt hình: Lật
- Hướng hoạt hình: Trung tâm
- Độ trễ hoạt ảnh: 1500 ms
Thêm mô-đun văn bản # 2 vào cột
Thêm nội dung
Thêm một mô-đun văn bản khác ngay bên dưới mô-đun văn bản trước đó với nội dung de Votere choix.
khoảng cách
Di chuyển đến tab thiết kế của mô-đun và thay đổi các giá trị đệm cho phù hợp:
- Phần đệm trên: 50px
- Đệm dưới: 50px
- Đệm bên phải: 50px
Biên giới
Sau đó thêm một đường viền trên và phải.
- Đường viền trên và phải: 2 pixel
- Màu của đường viền trên và phải: # fc526e
Hoạt hình
Và hoàn thành cài đặt mô-đun bằng cách thay đổi cài đặt hoạt ảnh như sau:
- Phong cách hoạt hình: Lật
- Hướng hoạt hình: Trung tâm
- Độ trễ hoạt ảnh: 1700 ms
Thêm một mô-đun nút vào cột
Thêm một bản sao
Mô-đun tiếp theo và cuối cùng chúng ta cần trong hàng này là mô-đun nút. Thêm một bản sao của sự lựa chọn của bạn.
Cài đặt nút
Chuyển sang tab thiết kế mô-đun và thay đổi cài đặt nút như sau:
- Sử dụng kiểu tùy chỉnh cho nút: Có
- Kích thước văn bản nút: 13px
- Màu văn bản nút: #ffffff
- Độ dốc màu 1: # ff5b84
- Độ dốc màu 2: # f94857
- Kiểu gradient: tuyến tính
- Hướng dốc: 165deg
- Độ rộng đường viền nút: 0px
- Bán kính đường viền nút: 0px
- Khoảng cách chữ cái nút: 1px
- Phông chữ: Montserrat
- Trọng lượng phông chữ: Semi bold
- Kiểu phông chữ: chữ hoa
khoảng cách
Sau đó thêm phần đệm trên và dưới tùy chỉnh.
- Phần đệm trên: 16px
- Đệm dưới: 16px
Hoạt hình
Và hoàn thành các thông số mô-đun bằng cách thêm hoạt ảnh sau:
- Phong cách hoạt hình: Lật
- Độ trễ hoạt ảnh: 1900 ms
Nhân bản dòng số 1 và đặt nó ở dưới cùng của phần
Khi bạn đã hoàn thành các dòng đầu tiên và thứ hai, bạn có thể sao chép dòng đầu tiên và đặt bản sao ở dưới cùng của phần.
Thay đổi thứ tự của dấu phân cách
Thay đổi địa điểm cho các mô-đun tách đầu tiên và cuối cùng.
cuối cùng suy nghĩ
Trong bài viết này, chúng tôi đã chỉ cho bạn cách tận dụng tích hợp Gutenberg mới của Divi và thêm khối quảng cáo chiêu hàng Divi CTA động, nội tuyến vào bài đăng blog Gutenberg của bạn. Đây là một cách tuyệt vời để làm nổi bật Lời kêu gọi hành động bạn chọn trong khi khách đọc nội dung bài đăng trên blog của bạn.
