Hướng dẫn tạo Header Footer trên Elementor cực dễ ai cũng làm được

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 với giá rẻ bên dưới.

Đầu tiên để tạo Header bạn truy cập Template > Theme Bulder.

chọn template và chọn theme builder elementor pro

Tiếp theo chọn vào biểu tượng dấu + để tiến hành xây dựng Header.

chọn builder header elementor pro

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.

template header elementor

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.

chỉnh sửa nav menu elementor

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.

tùy chọn điều kiện hiển thị header elementor

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.

cài đặt sticky header elementor

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ùy chỉnh responsive header elementor

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ùy chỉnh transparent header elementor

Để 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é.

tùy chọn full with elementor header

Ở 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; }
cách thêm custom code header elementor

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é.

transparent header 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.

tùy chỉnh footer elementor pro

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é.

thiết lập condition elementor footer

Bạn có thể tạo Header và Footer 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

thêm header bằng plugin 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.

thiết lập cài đặt cho elementor header and footer builder

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ả.

thiết lập navigation menu trên elementor builder

Ở 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.

thiết lập responsive elementor header and footer builder

Đế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ó.

lưu các thiết lập header và footer elementor
Default image
Van Khai Cris

Chào bạn mình là Van Khai Cris một chàng trai 9x đến từ vùng đất Tây Nguyên đầy nắng và gió, mình là người cực kỳ đam mê công nghệ, Digital Marketing và WordPress, hy vọng có thể chia sẻ những kiến thức và kinh nghiệm của bản thân, để giúp bạn kiếm tiền online dễ dàng hơn.

guest
0 Bình luận
Đánh giá
Xem toàn bộ bình luận