Hướng dẫn tạo header footer trên Elementor theo phong cách cầm tay chỉ việc, không yêu cầu bạn phải biết lập trình, cách tạo header và footer áp dụng cho mọi theme và hỗ trợ responsive cho nhiều thiết bị. Để tạo được header và footer dễ dàng hãy chắc chắn rằng theme của bạn tương thích với Elementor.
Tạo header với Elementor
Đầu tiên để tạo header với Elementor hãy chắn chắc rằng bạn đã nâng cấp lên Elementor Pro, bởi vì tạo header tùy chỉnh là một tính năng nâng cao, khi mua bản pro bạn sẽ được sử dụng miễn phí các template header do nhà sản xuất cung cấp.
Trường hợp bạn không có đủ kinh phí để nâng cấp lên Elementor Pro bạn có thể sử dùng plugin Elementor Header & Footer Builder miễn phí để tùy chỉnh header và footer cho website của mình, nhưng khuyết điểm của nó đó là khả năng tùy chỉnh không được sâu. Trong phần này mình sẽ hướng dẫn bạn tùy chỉnh header và footer bằng Elementor Pro thôi nhé, bạn có thể tham khảo group mua chung Elementor Pro trên mạng.
Đầu tiên để tạo header bạn truy cập template > theme builder.
Tiếp theo chọn vào biểu tượng dấu + để tiến hành xây dựng header.
Chọn danh sách header có sẵn sau đó ấn nút chèn, bạn cũng có thể tùy chỉnh header theo ý thích mà không cần sử dụng template.
Sau khi import template thành công hãy truy cập element để chỉnh sửa các thuộc tính cho nó, chú ý phần tử nav menu bạn có thể tùy chọn 1 menu bất kỳ để hiển thị, vào phần menu elements để thêm search form hoặc menu cart theo tính năng của website.
Cuối cùng bạn chọn xuất bản và chọn điều kiện hiển thị entire site để áp dụng header cho toàn bộ website, bạn cũng có thể áp dụng điều kiện theo danh mục sản phẩm, theo bài viết, theo taxonomy.
Sticky header trên Elementor
Để ghim menu bạn chọn section cần ghim vào tùy chọn nâng cao, tiếp theo vào hiệu ứng chuyển động chọn sticky bottom hoặc top tùy theo nhu cầu, có thể chọn thêm tùy chọn hiển thị trên thiết bị hoặc hiệu ứng chuyển động cho từng section. Nếu bạn muốn header có khoảng cách với phía trên hãy sét thông số cho phần offset, lưu ý thông số này tính theo đơn vị pixel, mặc định hãy để thông số là 0.
Chọn biểu tượng responsive ở góc trái màn hình để thiết lập hiển thị cho mỗi loại thiết bị khác nhau.
Tạo transparent header cho Elementor
Cách thiết lập transparent Header cho toàn bộ trang bạn chọn section, tiếp theo chọn kiểu nền và kéo về 0, lưu ý cách thiết lập này sẽ làm trong suốt toàn bộ header cả ở trạng thái thông thường và trạng thái sticky.
Để tạo transparent header cho duy nhất sticky header trên elementor bạn thực hiện lần lượt các bước tạo header, ghim header và cuối cùng thêm code css vào phần custom CSS, chú ý bạn nên chọn full width section để header hiển thị đẹp nhất nhé.
Ở phần custom CSS bạn thêm đầy đủ code css bên dưới vào.
selector.elementor-sticky--effects{ background-color: rgba(133,130,255,0) !important }
selector{ transition: background-color 4s ease !important; }
selector.elementor-sticky--effects >.elementor-container{ min-height: 80px; }
selector > .elementor-container{ transition: min-height 1s ease !important; }
Thành quả sẽ có header trong suốt y hệt như bên dưới, lưu ý hãy set điều kiện hiển thị hoặc tạo nhiều header để phù hợp với nội dung trên website nhé.
Tạo Footer bằng Elementor
Tương tự như cách tạo header bạn truy cập vào template > theme builder, tiếp tục chọn footer builder, chọn mẫu mà bạn yêu thích cuối cùng tiến hành chỉnh sửa.
Khi chỉnh sửa hoàn tất bạn chọn xuất bản và tiếp tục chọn add condition, chọn include entire site để thiết lập footer cho toàn bộ trang web, tương tự như cách tùy chỉnh header bạn nhớ tùy chỉnh hiển thị cho cả thiết bị mobile và tablet nhé.
Cách tạo header footer trên Elementor bản miễn phí
Bạn có thể tạo header và hooter theo cách ở trên nhưng yêu cầu phải nâng cấp Elementor của mình lên phiên bản pro, đối với những bạn có kinh phí eo hẹp hãy tạo theo cách này để tiết kiệm bớt chi phí, đầu tiên bạn cài đặt thêm plugin Elementor Header & Footer Builder sau đó kích hoạt, cách cài đặt và kích hoạt như thế nào mình sẽ không hướng dẫn lại nữa vì nó quá dễ rồi.
Sau khi cài đặt và kích hoạt xong bạn vào tab giao diện chọn > Elementor Header and Footer Builder
Điền lần lượt các thông tin từ trên xuống dưới, type of template chọn header, display on chọn entire website, user roles hãy để như mặc định. Cuối cùng chọn lưu nháp và sửa với Elementor.
Khi vào phần chỉnh sửa của Elementor bạn tiến hành tạo 1 section với 3 cột, thêm lần lượt 2 phần tử bắt buộc đó là: navigation menu và logo site, các thành phần khác bạn có thể tùy biến theo tính năng của website, thao tác đơn giản bạn chỉ cần kéo và thả.
Ở phần này bạn có thể kéo thả tùy thích theo nhu cầu của bạn những hãy nhớ thêm đầy đủ các thành phần chính bao gồm: giỏ hàng, logo, search box, nav menu và tùy chỉnh hiển thị cho nhiều thiết bị khác nhau.
Đến đây phần hướng dẫn đã xong, đối với builder Footer bạn cũng làm tương tự thôi, đây là cách tạo header và footer miễn phí tuy nhiên tính năng lại bị hạn chế khá nhiều, mình khuyên bạn nên builder bằng Elementor Pro như vậy sẽ tiện lợi hơn, chi phí Elementor Pro hiện nay cũng rất rẻ.
Trường hợp bạn đã builder xong tất cả nhưng thấy header vẫn chưa được áp dụng, hãy truy cập lại phần cài đặt kiểm tra các điều kiện và type cuối cùng ấn cập nhật, chú ý xóa cache trên CloudFlare hoặc plugin cache nếu có.
