Nếu bạn đã sử dụng WordPress thì chắc chắn bạn đã từng nghe qua Divi Theme – một công cụ cực kỳ linh hoạt giúp bạn thiết kế website mà không cần nhiều kiến thức lập trình. Một trong những tính năng nổi bật của Divi là khả năng tùy chỉnh toàn bộ website, bao gồm cả phần footer. Footer không chỉ đơn thuần là nơi kết thúc của trang web, mà còn là khu vực quan trọng để thể hiện thương hiệu và cung cấp thông tin cần thiết cho người dùng.
Hôm nay, tôi sẽ hướng dẫn bạn cách tạo một global footer đẹp mắt và chuyên nghiệp bằng Divi Theme Builder. Từ việc thêm logo, liên kết nhanh cho đến thông tin liên hệ, chúng ta sẽ thực hiện toàn bộ các bước để tạo nên một footer hoàn chỉnh và tối ưu cho mọi thiết bị.
Tại Sao Footer Lại Quan Trọng?
Footer thường bị đánh giá thấp, nhưng thực tế nó giữ nhiều vai trò quan trọng. Khi người dùng kéo xuống cuối trang, họ thường tìm kiếm những thông tin cần thiết như cách liên hệ, chính sách bảo mật hay liên kết đến các trang quan trọng. Một footer được thiết kế chuyên nghiệp không chỉ tăng mức độ tin cậy cho website mà còn góp phần nâng cao trải nghiệm người dùng.
Footer mặc định của Divi tuy đầy đủ nhưng khá cơ bản và không phù hợp với nhu cầu của nhiều doanh nghiệp, vì thế việc tùy chỉnh là vô cùng cần thiết nếu bạn muốn tạo sự khác biệt.
Bắt Đầu Với Divi Theme Builder
Để bắt đầu, bạn cần vào trang quản trị WordPress, sau đó truy cập vào Divi > Theme Builder. Đây là khu vực giúp bạn tùy chỉnh các thành phần khác nhau của website, bao gồm phần header, footer và template cho từng loại trang.
Trong Theme Builder, chọn vào template mặc định của website (Default Website Template) và nhấp vào phần “Add Global Footer”. Chọn “Build from scratch” để bắt đầu thiết kế từ đầu.
Tạo Nền Cho Footer
Khi bắt đầu tạo footer, việc đầu tiên là thiết kế nền. Vào Section Settings > Background, chọn Background Gradient với hai màu sắc, ví dụ màu xanh lá làm màu đầu tiên và màu tối hơn làm màu thứ hai. Bạn có thể điều chỉnh hướng của gradient thành 90 độ để tạo hiệu ứng ngang.
Nhấn Save để lưu các thay đổi và đảm bảo mỗi bước tiến hành đều được ghi nhớ.
Xây Dựng Phần Đầu Tiên Của Footer
Ở khu vực đầu tiên của footer, chúng ta sẽ thêm một logo. Chọn Image Module, tải lên logo với phiên bản màu sáng (để phù hợp với nền tối). Tiếp đó, vào Design > Sizing và đặt kích thước logo ở mức khoảng 220px để đảm bảo nó không quá to hoặc quá nhỏ.
Thêm Văn Bản Dưới Logo
Phía dưới logo, thêm một module văn bản. Văn bản này có thể là tagline hoặc một câu mô tả ngắn gọn về doanh nghiệp bạn. Để văn bản dễ đọc trên nền tối, đảm bảo chọn màu chữ sáng trong Design > Text.
Thêm Biểu Tượng Mạng Xã Hội
Tiếp tục, sử dụng Social Media Follow Module để thêm các biểu tượng mạng xã hội như Facebook, Twitter, Instagram, LinkedIn hoặc YouTube. Liên kết các biểu tượng này đến những kênh mạng xã hội chính thức của bạn để người dùng có thể dễ dàng kết nối.
Tạo Khu Vực Liên Kết Nhanh
Ở cột tiếp theo, thêm Text Module với tiêu đề “Quick Links”. Định dạng tiêu đề này dưới dạng Heading 2 và chọn màu chữ sáng.
Phía dưới tiêu đề, chèn một Divider để tách phần tiêu đề với nội dung. Trong Divider Settings > Design > Spacing, đặt giá trị âm (-20px) ở khoảng cách để các thành phần trông gọn gàng hơn.
Thêm Danh Sách Liên Kết
Tạo một danh sách liên kết như “Our Work,” “Blog,” và “Contact Page.” Sử dụng các phím tắt như Command + K hoặc Control + K để thêm link tương ứng cho từng mục trong danh sách.
Nhân Bản Cột
Khi đã hoàn thiện một cột, bạn có thể nhân bản cột đó hai lần để tạo thêm các khu vực liên kết khác, ví dụ “Our Services” hoặc “Explore.” Đây là cách giúp bạn tiết kiệm thời gian mà vẫn đảm bảo tính đồng nhất trong thiết kế.
Thêm Thông Tin Liên Hệ
Blurb không chỉ là một công cụ linh hoạt mà còn giúp bạn hiển thị thông tin liên hệ một cách trực quan. Bạn có thể thêm địa chỉ email, địa chỉ văn phòng hoặc giờ làm việc.
Ví dụ:
- Dùng biểu tượng email cho phần địa chỉ email.
- Biểu tượng bản đồ cho địa chỉ văn phòng.
- Biểu tượng đồng hồ cho giờ làm việc.
Tinh Chỉnh Blurb
Điều chỉnh kích thước biểu tượng trong Design > Image & Icon để nó phù hợp với nội dung văn bản. Đồng thời, căn chỉnh văn bản và biểu tượng sao cho hợp lý.
Nếu cần thêm khoảng cách, vào Design > Spacing để điều chỉnh padding và margin.
Thêm Khu Vực Bản Quyền
Thêm một hàng mới phía dưới và sử dụng Text Module cho khu vực bản quyền. Bạn có thể ghi “© 2024 [Tên doanh nghiệp] | Privacy Policy | Terms of Use”. Đừng quên liên kết đến các trang chính sách nếu có.
Để văn bản này cân đối, chọn căn giữa và sử dụng kích thước chữ nhỏ trong Design > Text.
Điều Chỉnh Footer Cho Mobile
Footer không chỉ phải đẹp trên màn hình lớn mà còn phải thân thiện với các thiết bị nhỏ như tablet hay điện thoại. Divi Theme Builder cho phép bạn kiểm tra và điều chỉnh các thiết kế ở từng kích cỡ màn hình khác nhau.
- Vào Design > Sizing để giảm chiều rộng của các cột trên tablet hoặc mobile.
- Sử dụng CSS nếu cần để tùy chỉnh phức tạp hơn.
Lỗi Thường Gặp Và Cách Khắc Phục
Trong quá trình thiết kế, bạn có thể gặp phải một số vấn đề như khoảng cách không đồng đều hoặc lỗi hiển thị ở các thiết bị khác nhau.
Một mẹo nhỏ là sử dụng CSS Class riêng cho từng phần để tránh xung đột với các thành phần khác trên website. Ví dụ, bạn có thể tạo một class như “r-footer” và áp dụng các thay đổi CSS chỉ trong khu vực footer.
Đừng quên kiểm tra toàn bộ footer trên nhiều thiết bị để đảm bảo mọi thứ hoạt động trơn tru.
Kết Luận
Footer là phần quan trọng không thể bỏ qua nếu bạn muốn website của mình trông chuyên nghiệp và đầy đủ thông tin. Với Divi Theme Builder, việc tạo một footer đẹp mắt không còn là điều khó khăn. Từ logo, liên kết nhanh đến thông tin liên hệ, bạn giờ đây có thể tự mình tạo ra một footer hoàn chỉnh, phù hợp cho mọi thiết bị.
Hãy áp dụng các bước tôi vừa chia sẻ để biến footer của bạn thành một phần không thể thiếu, giúp tăng trải nghiệm người dùng và thể hiện tính chuyên nghiệp của doanh nghiệp.