Bài 2: Cách Tạo Header Cho Website Bằng Plugin Elementor Pro

Chào các bạn đến với chuỗi bài viết về cách sử dụng Elementor Pro. Trong bài này mình sẽ hướng dẫn bạn tạo header cho website bằng plugin elementor pro.

1. Giới Thiệu Cách Tạo Header Cho Website Bằng Elementor Pro

Header là một bố cục sắp xếp những gì hiển thị ở đầu 1 trang web. Dường như website nào cũng có phần header.

Header là phần đầu tiên khách truy cập nhìn thấy. Do đó nó thường chứa những thông tin quan trọng như: logo thương hiệu, menu, hộp tìm kiếm, số điện thoại, nút kêu gọi..

Bằng cách sử dụng plugin elementor pro bạn sẽ dễ dàng tạo ra một Header thu hút.

Bước 1: Tạo Header Cho Website

Đầu tên bạn truy cập vào trang quản trị wordpress. Nếu đã cài elementor bạn sẽ nhìn thấy một biểu tượng “Template” nằm bên bảng điều khiển bên trái màn hình.

Bạn click chọn vào: Template >> Theme Builder >> Thêm mới

Một giao diện của Elementor sẽ hiện ra giống hình bên dưới. Trong danh sách xổ xuống bạn chọn Header và đặt tên mẫu là tên gì tùy ý bạn sao cho dễ nhớ là được.

Ví dụ: mình đặt tên mẫu là Header 2 như hình dưới: Xong nhấp vào nút “TẠO MẪU THIẾT KẾ”

Một giao diện tiếp theo sẽ hiện ra, ở tab tùy chọn “KHỐI” và danh sách chọn đang là “HEADER” bạn kéo roll và chọn cho mình một mẫu ưu thích.

Khi rê chuột vào từng mẫu sẽ tự động hiện lên nút “CHÈN”. Bạn click chọn vào nút “CHÈN” để sang bước tiếp theo:

Kế tiếp, một giao diện thể hiện các thông số cho phép bạn chỉnh sửa Header một cách trực quan.

Đến đây, bạn để ý cho mình 2 phần:

• • Phần đều khiển elementor nằm bên trái màn hình. Đây là nơi bạn thiết lập thông số hiển thị cho các phần tử nằm bên phải.
  • Phần kết quả hiển thị nằm bên phải màn hình. Đây là nơi kết quả được thay đổi tức thì theo thời gian thực khi bạn thay đổi bất kì 1 thông số nào bên trái bảng điều khiển.

Bạn nhìn thấy phần Header sẽ có các phần tử: Logo thương hiệu, menu, số điện thoại (hoặc nút kêu gọi hành động).

Bước 2: Chỉnh Sửa Các Phần Tử

Để chỉnh sửa từng phần tử. Ví dụ muốn thay đổi phần Logo thương hiệu. Bạn rê chuột vào logo sẽ thấy xuất hiện 3 nút màu xanh dương.

• • Dấu “X” là gỡ bỏ phần tử.
  • Dấu 2 hình vuông xếp chồng là nhân đôi phần tử
  • Dấu cây bút là chỉnh sửa phần tử.

Bạn click trỏ chuột vào nút thứ 3. Bảng điều khiển bên trái sẽ hiện ra các thông số. Với 3 tab:

• • Nội dung -> Chứa các thay đổi liên quan đến nội dung như thay đổi hình ảnh, văn bản
  • Kiểu -> Chứa các thông số kích thước, font chữ, kiểu viền, hình nền
  • Nâng cao -> Chứa các tính năng nâng cao liên quan đến hiệu ứng, chuyển động..

Đầu tiên là Tab NỘI DUNG. Vì phần tử đang dưới dạng một hình ảnh nên bạn có thể thay đổi một hình khác vào.

Các bạn rê chuột vào hình ảnh, click chọn “CHỌN ẢNH”

Thư viện sẽ được mở ra để bạn chọn hình ảnh logo có sẵn hoặc upload một file mới lên. Sau khi chọn ảnh xong bạn nhấp vào “CHÈN MEDIA”

Ở tab NỘI DUNG có các thông số phía dưới các bạn có thể tự mày mò đến khi nào tùy thích thì thôi nhé.

Ở tab “KIỂU”, bạn sẽ có các thông số để tùy thích thay đổi:

• • Chiều rộng ảnh, nhớ chọn đơn vị là px nhé: thay đổi chiều rộng hình ảnh bằng thanh trượt dễ dàng
  • Chiều rộng tối đa của ảnh: thường áp dụng cho các hình ảnh có kích thước lớn
  • Chiều cao ảnh
  • Hiệu ứng cơ bản của ảnh
  • Hiệu ứng thay đổi khi rê chuột vào ảnh

Nâng cao

Ở tab NÂNG CAO, tương tự bản cũng có vô số các lựa chọn để tự thiết lập phần tử theo ý mình.

• • Nâng cao: cho phép bạn chỉnh sửa các khoảng cách đến viền Margin, padding, thiết lập Z-index, ID CSS (gán biến để gọi), Class CSS (chỉ cần khi bạn biết về code)
  • Hiệu ứng chuyển động: scrolling Effects (hiệu ứng lúc kéo thanh cuộn), Mouse affects (hiệu ứng chuột), Sticky (hiệu ứng dính), Extrance Animation (hiệu ứng khi vừa nhìn thấy lần đầu)
  • Nền: Bình thường-> Kiểu nền (có các kiểu cổ điển và pha màu gradient), Di chuột->Khi rê chuột màu nền sẽ đổi
  • Viền: Cho phép bạn thiết lập các kiểu viền và hiệu ứng khi di chuột
  • Positioning: Chế độ vị trí
  • Resonsive: Chế độ hiển thị phù hợp theo từng loại thiết bị. Bạn có thể thiết lập một phần tử hiển thị trên máy tính. Nhưng cho ẩn trên điện thoại di động.
  • Attributes: ít sử dung.
  • Custom CSS: sử dụng cái này nếu bạn rành về code.

Tương tự các bước ở trên, bạn có thể hoàn toàn làm chủ việc chỉnh sửa cho các phần tử còn lại.

Bước 3: Thêm Phần Tử Mới

Sẽ có trường hợp bạn sẽ cần thêm các phần tử mới. Có rất nhiều phần tử mới như: hình ảnh, văn bản, tiêu đề, bút kêu gọi, video, icon…

Tại bảng điều khiển bên trái bạn click chuột vào cái cái biểu tượng 9 hình vuông (giống khối rubic). Tại “TAB THÀNH PHẦN” bạn kéo xuống chọn phần tử mà cần thêm vào.

Ví dụ ở đây mình cần thêm 1 nút kêu gọi hành động vào Header. Đại loại như “SHOP CỬA HÀNG. MỜI BẠN BẤM VÀO ĐÂY!”.

Mình chỉ việc rê chuột, nhấp trái giữ phần tử và thả vào vị trí cần hiển thị.

Sau khi thêm phần tử xong, bạn sẽ toàn quyền chỉnh sửa bằng bảng bên trái giống như cách đã hướng dẫn ở bước 2.

Đối với nút kêu gọi, bạn phải chèn link liên kết vào với tùy chọn “mở trong cửa sổ mới” nhé!

Bước 4: Xuất Bản, Đặt Điều Kiện Hiển Thị Cho Header

Sau khi thiết kế xong. Bạn click vào nút “XUẤT BẢN” để hoàn tất các bước thiết lập.

Một giao diện cuối cùng hiện ra để bạn thiết lập các điều kiện hiển thị.

• • INCLUDE = Hiển thị Header bao gồm tại các trang được chọn
  • EXCLUDE = Hiển thị Headerngoại trừ tại các trang được chọn
  • ENTIRE SITE = Hiển thị Headerkhi khách lần đầu truy cập vào trang
  • ARCHIVES= Hiển thị Headertại trang lưu trữ
  • SINGULAR = Hiển thị Headertại một trang được chọn
  • ALL SINGULAR = Hiển thị Headertại tất cả trang

Nếu bạn muốn Header hiển thị tại tất cả các trang thì bạn thiết lập các điều kiện giống như mình bên dưới:

Trong một số trường hợp bạn loại trừ, thì chỉ việc thêm điều kiện EXCLUDE với tùy chọn các trang mà bạn không muốn Header hiển thị.

Xong nhớ nhấp SAVE & CLOSE để lưu lại và tận hưởng thành quả nhé!

2. Tạm Kết

Vậy là mình vừa hướng dẫn bạn cách tạo header cho website bằng plugin elementor pro. Hy vọng với bài viết này bạn sẽ tự tạo cho mình một header thật bắt mắt, nhằm thu hút thêm nhiều độc giả ghé thăm.

Nguồn: kieuquangtham.com