CTA càng hấp dẫn về mặt hình ảnh thì cơ hội tỷ lệ chuyển đổi càng cao. Có nhiều cách để thiết kế CTA của bạn, nhưng trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách tạo các mẫu cột CTA tuyệt đẹp với hình ảnh nửa trong suốt và chồng cột. Bạn có thể tìm thấy các hình ảnh bán trong suốt trong thư mục tải xuống bên dưới, nhưng hãy thoải mái sử dụng các hình ảnh khác. Bạn cũng có thể tải xuống tệp JSON miễn phí!
Đi thôi.
Xem trước
Trước khi đi sâu vào hướng dẫn, chúng ta hãy xem nhanh nó trông như thế nào trên các kích thước màn hình khác nhau.
Hãy bắt đầu tái tạo!
Thêm một phần mới
bối cảnh
Bắt đầu bằng cách tạo một trang mới hoặc thêm một phần thông thường mới vào một trang hiện có. Sau đó, chuyển đến cài đặt phần và thêm nền gradient.
- Bối cảnh: độ dốc
- Độ dốc màu gradient: màu xám rất nhạt #efefef
- Màu nền hai: Trắng #ffffff
- Kiểu gradient: xuyên tâm
- Hướng xuyên tâm: trung tâm
- Vị trí bắt đầu: 52%
- Vị trí cuối cùng: 50%
khoảng cách
Chuyển sang tab Thiết kế và điều chỉnh phần chèn trong cài đặt khoảng cách.
- Đệm trên và dưới
- Văn phòng: 0vw
- Bọc trong vớ
- Máy tính bảng + Điện thoại: 70vw
Thêm một dòng mới
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
Sau đó điều chỉnh chiều rộng và chiều rộng tối đa của dòng.
- Chiều rộng: 100%
- Độ rộng tối đa 100%
Thêm một mô-đun văn bản
Thêm H2 và nội dung văn bản
Đã đến lúc thêm mô-đun! Đầu tiên, thêm một mô-đun văn bản và chèn một số nội dung H2 và các đoạn văn bạn chọn.
Văn bản
Chuyển sang tab thiết kế và tạo kiểu cho văn bản như sau:
- Phông chữ: Mở Sans
- Sắp xếp văn bản: trung tâm
- Màu văn bản: Xanh #5bba1b
- Cỡ chữ:
- Văn phòng: 1.2vw
- Máy tính bảng: 2.8vw
- Điện thoại: 3.6vw
- Khoảng cách các chữ cái văn bản: 0.2vw
- Chiều cao của dòng văn bản: 1.8em
Tiêu đề 2 Văn bản
Sau khi tạo kiểu văn bản đoạn văn, cũng tạo kiểu cho văn bản H2.
- Mục: H2
- Trọng lượng phông chữ H2: Doppio One
- Sắp xếp văn bản H2: Trung tâm
- Màu văn bản H2: #3d3d3d
- H2 Kích thước văn bản:
- Văn phòng: 4.4vw
- Máy tính bảng: 5.9vw
- Điện thoại: 6.9vw
khoảng cách
Và thêm một chút đệm ở đầu.
- Đệm hàng đầu: 212px
Thêm một mô-đun phân chia
tầm nhìn
Trong mô-đun Văn bản, hãy thêm một mô-đun phân chia và đặt khả năng hiển thị thành "Có".
- Tầm nhìn: có
Dòng
Thay đổi màu của dải phân cách sau đó.
- Màu đường kẻ: Xám đậm #545454
kích thước
Bây giờ, điều chỉnh kích thước của dải phân cách để nó trông nhỏ hơn.
- Trọng lượng phân tách: 4px
- Chiều rộng: 9%
- Sắp xếp mô-đun: trung tâm
khoảng cách
Cũng thêm một lề trên âm.
- Lề trên:
- Văn phòng: -40px
- Máy tính bảng + Điện thoại: -15px
Thêm một dòng mới
Cấu trúc cột
Tiếp tục bằng cách thêm một hàng mới với ba cột có kích thước bằng nhau. Đây sẽ là cơ sở để thiết kế cột CTA.
bối cảnh
Trước khi bạn thêm các mô-đun, hãy thêm một gradient vào nền của các tham số của dòng.
- Bối cảnh: độ dốc
- Độ dốc màu nền 1: trắng #ffffff
- Gradient nền màu hai: trong suốt
- Kiểu gradient: xuyên tâm
- Trung tâm điều khiển xuyên tâm
- Vị trí bắt đầu: 42%
- Vị trí cuối cùng: 50%
kích thước
Bây giờ, điều chỉnh kích thước của dòng.
- Chiều rộng: 100%
- Chiều rộng tối đa: 100%
khoảng cách
Sau đó, chuyển đến cài đặt khoảng cách và thêm các giá trị đệm tùy chỉnh.
- bọc trên: 22vw
- Đệm đáy: 10vw
- Đệm trái và phải: 10vw
Cài đặt cột 1
bối cảnh
Tiếp tục bằng cách mở cột 1 và thêm nền gradient.
- Bối cảnh: độ dốc
- Màu nền của màu: Màu xanh #2a4eed
- Màu nền hai màu: xanh nhạt #91f5f7
- Kiểu gradient: tuyến tính
- Hướng Gradient: 38deg
- Vị trí bắt đầu: 23%
biên giới
Sau đó xác định các góc tròn của các cột trong cài đặt viền.
- Góc tròn: 2vw ở tất cả các góc
Hộp bóng
Thêm một bóng hộp tinh tế quá.
- Box Shadow: Tùy chọn thứ hai
- Bóng của hộp Vị trí nằm ngang: 6px
- Vị trí dọc của hộp bóng: -10px
- Lực lượng bóng mờ hộp: 50px
tràn
Hãy chắc chắn rằng các tràn của cột cũng có thể nhìn thấy.
- Tràn ngang và dọc: có thể nhìn thấy
Cài đặt cột 2
bối cảnh
Chuyển đến cột thứ hai và thêm nền gradient sau:
- Bối cảnh: độ dốc
- Màu nền một màu: #1ba038
- Độ dốc nền hai màu: #c6f727
- Kiểu gradient: tuyến tính
- Hướng Gradient: 38deg
- Vị trí bắt đầu: 23%
biên giới
Ngoài ra, thêm một bán kính đường viền cho cột.
- Góc tròn: 2vw ở bốn góc
Hộp bóng
Với một hộp bóng tinh tế.
- Box Shadow: Tùy chọn thứ hai
- Bóng của hộp Vị trí nằm ngang: 6px
- Vị trí dọc của hộp bóng: -10px
- Lực lượng bóng mờ hộp: 50px
Transformer
Cột này cao hơn một chút so với những cột khác. Để tạo hiệu ứng này, chúng tôi sẽ điều chỉnh cài đặt chuyển đổi chuyển đổi cho cột 2.
- Biến hình dịch:
- Văn phòng: -8vw, trục y
- Máy tính bảng + Điện thoại: 30vw, trục Y
tràn
Cũng có thể nhìn thấy các tràn của cột này.
- Tràn ngang và dọc: có thể nhìn thấy
Cài đặt cột 3
bối cảnh
Hãy chuyển sang cột cuối cùng và cuối cùng! Thêm một nền gradient.
- Bối cảnh: độ dốc
- Màu nền một màu: #f0562c
- Độ dốc nền hai màu: #f1a526
- Kiểu gradient: tuyến tính
- Hướng Gradient: 38deg
- Vị trí bắt đầu: 23%
biên giới
Chuyển sang tab Thiết kế và thêm bán kính đường viền cho mỗi góc.
- Góc tròn: 2vw trên tất cả các góc.
Hộp bóng
Thêm một bóng hộp quá.
- Box Shadow: Tùy chọn thứ hai
- Bóng của hộp Vị trí nằm ngang: 6px
- Vị trí dọc của hộp bóng: -10px
- Lực lượng bóng mờ hộp: 50px
Transformer
Trên kích thước màn hình nhỏ hơn, chúng tôi sẽ cần định vị lại cột bằng cách sử dụng các giá trị chuyển đổi biến đổi tùy chỉnh.
- Biến hình dịch:
- Máy tính bảng + Điện thoại: 60vw
tràn
Cuối cùng, điều chỉnh các cài đặt tràn.
- Tràn ngang và dọc: có thể nhìn thấy
Thêm mô-đun hình ảnh
Nhập hình ảnh bán trong suốt
Khi bạn đã đặt tất cả các thông số cột, đã đến lúc thêm mô-đun. Thêm mô-đun hình ảnh vào cột 1 và tải lên hình ảnh nửa trong suốt mà bạn chọn. Bạn có thể tìm thấy các hình ảnh chúng tôi đã sử dụng trong thư mục nén mà bạn có thể tải xuống ở đầu bài viết này.
kích thước
Làm cho mô-đun đầy đủ chiều rộng.
- Chuyển sang chế độ toàn chiều rộng: Có
khoảng cách
Sau đó thêm lề tùy chỉnh và điền giá trị.
- Lề trên:
- Văn phòng: -11vw
- Máy tính bảng + Điện thoại: -24vw
- Đệm trái và phải:
- Văn phòng: 5vw
- Máy tính bảng + Điện thoại: 20vw
Biến cái thang thành một cái di chuột
Chúng tôi thêm hiệu ứng di chuột tinh tế vào hình ảnh bằng cách sử dụng tùy chọn chuyển đổi tỷ lệ trong cài đặt chuyển đổi.
- Biến đổi tỷ lệ trên Hover: 120% trên cả hai trục.
Z-Index
Để đảm bảo hình ảnh xuất hiện ở đầu cột, hãy tăng giá trị chỉ mục z trên tab Nâng cao.
- Chỉ số Z: 1
Sao chép và kéo các mô-đun hình ảnh
Bây giờ sao chép mô-đun hình ảnh hai lần và đặt các bản sao vào hai cột còn lại. Quá trình này dễ dàng hơn trong chế độ có dây.
- Bắt đầu bằng cách nhân đôi mô-đun hình ảnh hai lần
- Sau đó kéo các mô-đun hình ảnh mới vào các cột 2 và 3.
- Tải hình ảnh khác nhau
Thêm mô-đun văn bản
Thêm nội dung H3
Bên dưới hình ảnh ở cột 1, thêm mô-đun văn bản và chèn một số nội dung H3 tùy bạn chọn.
Tiêu đề 3 Văn bản
Chuyển sang tab thiết kế và áp dụng một kiểu cho cài đặt văn bản H3.
- Tiêu đề văn bản: H3
- Phông chữ H3: Doppio One
- H3 Phông chữ: đậm
- Sắp xếp H3: trung tâm
- Màu văn bản H3: Trắng #ffffff
- H3 Kích thước văn bản:
- Văn phòng: 1.8vw
- Máy tính bảng: 5vw
- Điện thoại: 6vw
Sao chép và kéo mô-đun văn bản
Nhân bản mô-đun văn bản hai lần và đặt các bản sao vào hai cột còn lại.
- Bắt đầu bằng cách sao chép các mô-đun văn bản hai lần.
- Sau đó, kéo chúng dưới các mô-đun hình ảnh trong cột 2 và 3.
- Thay đổi nội dung trong mỗi mô-đun văn bản mới
Thêm mô-đun văn bản
Thêm nội dung
Trong mô-đun tiêu đề, hãy thêm một mô-đun văn bản mới. Thêm nội dung đoạn trong vùng nội dung.
Văn bản
Bây giờ, phong cách văn bản như sau.
- Phông chữ: Mở Sans
- Màu văn bản: Trắng #ffffff
- Cỡ chữ:
- Văn phòng: 0.6vw
- Máy tính bảng: 2vw
- Điện thoại: 2.8vw
- Chiều cao của dòng văn bản: 2.2em
khoảng cách
Để căn giữa văn bản, điều chỉnh khoảng cách của mô-đun như sau.
- Lề dưới:
- Văn phòng: 5vw
- Máy tính bảng + Điện thoại: 10vw
- Đệm trái và phải
- Văn phòng: 5vw
- Máy tính bảng + Điện thoại: 14vw
Sao chép và kéo mô-đun văn bản
Sao chép mô-đun văn bản hai lần và kéo các bản sao vào hai cột còn lại.
- Bắt đầu bằng cách sao chép các mô-đun văn bản hai lần
- Sau đó đặt các bản sao vào cột 2 và 3
- Thay đổi nội dung của từng bản sao
Thêm mô-đun nút
Thêm nội dung
Hãy đi đến mô-đun cuối cùng! Thêm một mô-đun nút vào cột 1 với một bản sao bạn chọn.
Thêm một liên kết
Chèn một liên kết trong các tùy chọn liên kết của mô-đun.
sự liên kết
Bây giờ căn chỉnh mô-đun nút.
- Căn: trung tâm
Kiểu nút
Sau đó, gọi nút như sau.
- Kích thước của văn bản nút:
- Văn phòng: 1vw
- Máy tính bảng: 2vw
- Điện thoại: 3vw
- Màu văn bản nút: Màu xanh sáng #2a4eed
- Màu nền của nút: Trắng #ffffff
- Bán kính đường viền của nút: 50vw
- Phông chữ: Double One
- Trọng lượng phông chữ: đậm
- Màu của các nút: Màu xanh sáng #2a4eed
khoảng cách
Định hình nút và tạo chồng chéo ở dưới cùng bằng cách thêm các giá trị lề và đệm tùy chỉnh trong cài đặt giãn cách.
- Lề dưới:
- Văn phòng: -1.7vw
- Máy tính bảng: -4vw
- Điện thoại: -6vw
- Upholstery trên và dưới:
- Văn phòng: 1vw
- Máy tính bảng + Điện thoại: 3vw
- Đệm trái và phải
- Văn phòng: 4vw
- Máy tính bảng + Điện thoại: 10vw
Hộp bóng
Cuối cùng nhưng không kém phần quan trọng, thêm một bóng hộp tinh tế vào nút.
- Bóng hộp: tùy chọn đầu tiên
- Bóng của vị trí nằm ngang của hộp: 0px
- Bóng của vị trí thẳng đứng của hộp: 2px
- Lực lượng bóng mờ hộp: 50px
Nhân đôi và kéo mô-đun nút
Cũng như các mô-đun trước, sao chép nút hai lần và đặt các bản sao vào hai cột còn lại của dòng.
- Nhân bản mô-đun nút hai lần
- Đặt các bản sao vào cột 2 và 3
Nút 2 Văn bản và màu sắc biểu tượng
Thay đổi nút và màu biểu tượng mô-đun nút trong cột 2.
- Màu văn bản nút: Xanh # 1ba038
- Màu biểu tượng: # 1ba038
Nút 3 Văn bản và màu sắc biểu tượng
Làm điều tương tự với nút ở cột cuối cùng và bạn đã hoàn tất!
- Màu của văn bản của các nút: Orange #f0562c
- Màu biểu tượng: # f0562c
Để hoàn thành
Trong bài viết này, chúng tôi đã hướng dẫn bạn cách sử dụng hình ảnh bán trong suốt để tạo thiết kế cột CTA tuyệt đẹp. Chúng tôi đã sử dụng cài đặt tràn cột Divi để hình ảnh và các nút chồng lên nhau liền mạch. Hãy thử sử dụng thiết kế này trong dự án tiếp theo của bạn Divi và cho chúng tôi biết nó diễn ra như thế nào trong phần bình luận!
