Bạn có muốn tạo chân trang tùy chỉnh trong DIVI không?
Một trong những phần quan trọng nhất của trình tạo chủ đề của Divi là khả năng thêm động các chân trang chung vào các trang web và bài đăng của bạn.
Khi bạn đã thiết kế chân trang, bạn có thể tự động thêm nó vào bất kỳ loại trang hoặc bài đăng nào bạn muốn bằng trình tạo chủ đề của Divi.
Trong hướng dẫn này, chúng tôi sẽ hướng dẫn bạn từng bước trong quá trình tạo và thêm chân trang chung vào Website.
khảo sát
Trước khi đi sâu vào phần hướng dẫn, chúng ta hãy xem phần footer mà chúng ta sẽ thiết kế.
Văn phòng
Đi tới Trình tạo chủ đề Divi và thêm Chân trang toàn cục
- Đi tới Divi> Theme Builder và nhấp vào " Thêm chân trang chung«
- Chọn " Xây dựng chân trang toàn cầu«
Tùy chỉnh phần # 1
Màu nền
Mở phần bạn có thể tìm thấy trên trang và thay đổi màu nền của phần đó.
- Nền: # 000000
khoảng cách
Chuyển tab mới Phong cách và sau đó thay đổi cài đặt giãn cách cho phần.
- Lề (Trên, Trái và Phải): 6vw
- Lề trong (Trái và Phải): 30px
biên giới
Sau đó, thêm một đường viền trên cùng bên trái và bên phải.
- Hình chữ nhật tròn trên cùng bên trái: 20px
- Hình chữ nhật tròn trên cùng bên phải: 20px
Hộp bóng
Cũng bao gồm một bóng hộp trong cài đặt phần.
- Độ mạnh của Bow Shadow Blur: 135px
- Màu phông chữ phụ đề: rgba (0,0,0,0.18)
Thêm một dòng mới vào phần
Cấu trúc của cột
Tiếp tục bằng cách thêm một hàng vào phần của bạn bằng cách sử dụng cấu trúc cột sau:
Thêm mô-đun Văn bản vào cột
Thêm tiêu đề có kích thước H2 (Tiêu đề 2)
Chèn một mô-đun văn bản với nội dung có kích thước H2.
Cài đặt văn bản H2
Chuyển sang tab của Phong cách của mô-đun và sửa đổi các tham số của văn bản H2 cho phù hợp:
- Phông chữ tiêu đề: Poppins
- Tiêu đề đậm nhạt: nửa đậm
- Căn chỉnh văn bản: Căn giữa
- Màu văn bản tiêu đề: #ffffff
- Kích thước văn bản tiêu đề: 31px (máy tính để bàn), 24px (máy tính bảng), 18px (điện thoại)
- Chiều cao dòng tiêu đề: 1,6 em
kích thước
Cũng thêm chiều rộng tối đa cho mô-đun.
- Chiều rộng tối đa: 700 pixel
Thêm mô-đun nút vào cột
Thêm văn bản vào nút
Chèn mô-đun Nút ngay bên dưới mô-đun Văn bản trong cột của bạn và nhập văn bản bạn chọn.
sự liên kết
Chuyển sang tab của Phong cách của mô-đun và thay đổi căn chỉnh của nút vào giữa.
- Căn chỉnh nút: căn giữa
Cài đặt nút
Tiếp tục bằng cách tùy chỉnh nút.
- Sử dụng các kiểu tùy chỉnh cho Nút: Có
- Kích thước văn bản nút: 12px
- Màu văn bản của nút: # 000000
- Nút nền: #FFFFFF
- Nút chiều rộng đường viền: 0 pixel
Đọc cũng: Cách hiển thị trang blog dưới dạng băng chuyền trong DIVI
- Bán kính đường viền nút: 100 px
- Khoảng cách giữa các chữ cái nút: 1 px
- Phông chữ nút: Poppins
- Nút ánh sáng mềm: Bán đậm
- Sao chép nút kiểu: TT
khoảng cách
Đồng thời thêm các giá trị lề bên trong tùy chỉnh.
- Lề nội bộ (Trên cùng và Dưới cùng): 14px
- Lề trong: Trái (40px); Phải (58px)
Phần # 2
Thêm phần "bình thường" thứ hai bên dưới phần trước.
Màu nền
Thay đổi màu nền
- Nền: #ffffff
khoảng cách
Sau đó, loại bỏ tất cả các lề nội bộ (Trên và Dưới).
- Lề nội bộ (Trên và dưới): 0px
Biên giới
Đồng thời thêm bán kính đường viền vào phần.
- Hình chữ nhật tròn (Trên cùng bên trái): 20px
- Hình chữ nhật tròn (Trên cùng bên phải): 20px
Hộp bóng
Và hoàn thành cài đặt phần bằng cách thêm một bóng hộp tinh tế.
- Độ mạnh của Box Shadow Blur: 135px
- Màu phông chữ phụ đề: rgba (0,0,0,0.18)
Thêm một dòng mới vào phần
Cấu trúc của cột
Khi bạn đã hoàn tất cài đặt phần, hãy thêm một hàng mới bằng cách sử dụng cấu trúc cột sau:
kích thước
Nếu không thêm bất kỳ mô-đun nào, hãy mở cài đặt hàng và thay đổi chúng như sau:
- Sử dụng chiều rộng máng xối tùy chỉnh: Có
- Khoảng cách cột: 1
- Hài hòa chiều cao cột: Có
- Chiều rộng tối đa: 100%
- Chiều rộng tối đa: 100%
khoảng cách
Sau đó, xóa các lề bên trong mặc định (Trên và Dưới) khỏi dòng.
- Lề nội bộ (Trên và dưới): 0px
Khoảng cách giữa các cột
Tiếp tục bằng cách mở cài đặt cột để thêm các giá trị đệm tùy chỉnh.
- Lề bên trong (Trên cùng và Dưới cùng): 100px (máy tính để bàn), 50px (máy tính bảng và điện thoại)
- Lề trong (Trái và Phải): 100 px (máy tính để bàn), 50 px (máy tính bảng và điện thoại)
Thêm mô-đun Văn bản số 1 vào cột
Thêm nội dung
Bây giờ chúng ta có thể thêm các mô-đun vào nó. Thêm mô-đun Văn bản vào cột và chèn nội dung de Votere choix.
Cài đặt văn bản
Chuyển sang tab của Phong cách của mô-đun và sửa đổi các tham số văn bản cho phù hợp:
- Phông chữ: Poppin
- Trọng lượng phông chữ văn bản: Bold
- Màu văn bản: # 000000
- Kích thước văn bản: 17px
- Căn chỉnh văn bản: Căn giữa
khoảng cách
Sau đó, thêm lề tùy chỉnh (Trên cùng và Dưới cùng).
- Lề trên cùng: 10 px
- Lề dưới cùng: 30px
Thêm mô-đun Dấu phân cách vào cột
Ngay bên dưới mô-đun Văn bản, hãy thêm mô-đun Dấu phân cách.
tầm nhìn
Đảm bảo rằng tùy chọn " Hiển thị dấu phân cách Được kích hoạt.
- Hiển thị dấu phân cách: Có
Dòng
Thay đổi màu đường thành màu đen.
- Màu nhãn: # 000000
kích thước
Đồng thời thay đổi cài đặt định cỡ bộ chia.
- Chiều rộng tối đa: 15%
- Căn chỉnh văn bản: Căn giữa
Thêm mô-đun Văn bản số 2 vào cột
Thêm nội dung
Tiếp tục bằng cách thêm một mô-đun Văn bản khác vào cột cũng như một nội dung de Votere choix.
Thêm một liên kết
Chèn một liên kết đến trang mà bạn muốn mô-đun này tham chiếu đến.
Cài đặt văn bản
Sau đó chuyển sang tab Phong cách và thay đổi cài đặt văn bản như sau:
- Phông chữ văn bản: Poppins
- Văn bản nhẹ nhàng: Rõ ràng
- Văn bản Màu Văn bản: # 777777
- Văn bản Kích thước văn bản: 15 px
- Căn chỉnh văn bản: Căn giữa
khoảng cách
Đồng thời thêm một lề (Trên và Dưới).
- Lề (Trên và Dưới): 10 px
Sao chép mô-đun văn bản # 2 khi cần thiết
Khi bạn đã hoàn thành mô-đun Văn bản thứ hai, bạn có thể sao chép nó nhiều lần nếu cần (tùy thuộc vào số lượng phần tử chân trang có thể nhấp mà bạn muốn đưa vào).
Chỉnh sửa nội dung và liên kết
Đảm bảo chỉnh sửa nội dung mô-đun và các liên kết cho từng bản sao.
Sao chép toàn bộ cột hai lần
Khi bạn đã hoàn thành cột và các mô-đun của nó, bạn có thể sao chép nó hai lần.
Màu nền của cột 2
Sau đó, mở cài đặt cho cột 2 và thay đổi màu nền.
- Nền: # f9f9f9
Chỉnh sửa nội dung và liên kết
Đảm bảo chỉnh sửa tất cả nội dung và liên kết trong mỗi cột trùng lặp.
Thêm một cột mới
Tiếp theo, thêm cột thứ tư vào hàng.
Màu nền
Thay đổi màu nền của cột mới.
- Nền: # 0fffc7
khoảng cách
Sửa đổi các lề bên trong như sau:
- Lề nội bộ (Trên cùng và Dưới cùng): 70px
- Lề trong (Trái và Phải): 50px
Thêm mô-đun 'Theo dõi chúng tôi trên mạng xã hội' vào cột 4
Thêm mạng xã hội
Tiếp tục bằng cách thêm một mô-đun " Theo dõi chúng tôi trên mạng xã hội trong cột 4 và chèn các mạng xã hội mà bạn chọn.
Đặt lại kiểu biểu tượng mạng xã hội
Bấm vào Đặt lại kiểu phần tử vai trò cho mỗi mạng xã hội.
sự liên kết
Sau đó chuyển sang tab Phong cách và sửa đổi sự liên kết của mô-đun.
- Căn chỉnh văn bản: Căn giữa
Cài đặt biểu tượng
Đồng thời thay đổi màu sắc của các biểu tượng mạng xã hội.
- Màu biểu tượng: # 000000
Thêm Mô-đun Optin Email vào Cột 4
Chèn một mod " Đăng ký email "bên dưới mô-đun" Theo dõi chúng tôi trên mạng xã hội«
Xóa nội dung và tiêu đề mô-đun
Tài khoản email
Sau đó, thêm một tài khoản email. Nếu bạn không thêm tài khoản email, mô-đun sẽ không hiển thị sau khi bạn thoát khỏi trình tạo chủ đề.
Xóa màu nền
- Sử dụng màu nền: Không
Cài đặt trường
Chuyển tab mới Phong cách và thay đổi cài đặt trường như sau:
- Các trường Màu nền: rgba (0,0,0,0)
- Trường màu văn bản: # 000000
- Phông chữ Champs: Poppins
- Trường Kích thước Văn bản: 13px
- Các trường chiều rộng đường viền: 1 px
Cài đặt nút
Đồng thời tùy chỉnh nút của mô-đun của bạn.
- Sử dụng các kiểu tùy chỉnh cho Nút: Có
- Kích thước văn bản nút: 12px
- Màu văn bản của nút: # 000000
- Nút nền: #FFFFFF
- Chiều rộng đường viền: 0px
- Bán kính đường viền nút: 100 px
- Khoảng cách giữa các chữ cái nút: 1 px
- Phông chữ nút: Poppins
- Nút làm mờ ánh sáng: Bán đậm
- Sao chép nút kiểu: TT
Xem thêm: Cách tạo biểu mẫu liên hệ cố định trong DIVI
- Đệm nút (Trên cùng và Dưới cùng): 15px
Thêm mô-đun văn bản động vào cột 4
Mô-đun tiếp theo và cuối cùng chúng ta cần để hoàn thành thiết kế này là mô-đun Văn bản.
Kích hoạt tùy chọn " Sử dụng nội dung động".
Sau đó chọn tùy chọn " ngay hiện tại".
Và thay đổi cài đặt nội dung động như sau:
- Mặt trước: Bản quyền ©
- Sau: | Đã đăng ký Bản quyền
- Định dạng ngày: Hải quan
- Định dạng ngày tùy chỉnh: 20 năm
Cài đặt văn bản
Tiếp theo, chuyển sang tab kiểu và thay đổi cài đặt văn bản:
- Phông chữ văn bản: Poppins
- Văn bản Màu Văn bản: # 000000
- Văn bản Kích thước văn bản: 16 px
khoảng cách
Hoàn thành các thông số mô-đun bằng cách thêm ký quỹ và thì đấy!
- Lề trên cùng: 50 px
Lưu các tùy chọn trình tạo chủ đề và chân trang toàn cầu
Sau khi hoàn tất, hãy nhớ lưu công việc của bạn trước khi thoát khỏi trình tạo. Chủ đề Divi.
Ngay sau khi bạn ra khỏi bố cục mẫu, hãy lưu toàn bộ thay đổi của trình tạo chủ đề và bạn đã hoàn tất!
khảo sát
Bây giờ chúng ta đã đi qua tất cả các bước, chúng ta hãy xem lại kết quả lần cuối.
Tải xuống DIVI ngay bây giờ !!!
Kết luận
Trong hướng dẫn này, chúng tôi đã chỉ cho bạn cách tạo chân trang toàn cầu tùy chỉnh đẹp mắt với trình tạo chủ đề của Divi dễ dàng như thế nào.
Chúng tôi hy vọng hướng dẫn này sẽ truyền cảm hứng cho bạn để tạo chân trang toàn cầu đẹp mắt cho các dự án Divi tiếp theo của bạn.
Nếu bạn có bất kỳ mối quan tâm hoặc đề xuất nào, hãy tìm chúng tôi trong phần bình luận để thảo luận về nó.
Tuy nhiên, bạn cũng có thể tham khảo ý kiến tài nguyên của chúng tôi, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.
Nhưng trong lúc này, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.
...
