[HDSD Elementor]|Bài 2: Tạo Header cho website bằng plugin elementor pro

bài 2- hướng dẫn sử dụng elementor pro, cách tạo header bằng elementor

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.

Hãy đọc bài viết này nếu bạn chưa biết Elementor Pro là gì: TẠI ĐÂY!

Mời các bạn tiếp tục cùng theo dõi nội dung bài viết dưới đây!

Giới thiệu cách tạo header cho website bằng elementor pro (bố cục đầu trang web)

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
Tạo Header bằng plugin elementor pro

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Ế”
tạo mẫu thiết kế trong elementor pro

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:

chèn template header trong elementor pro

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:

  1. 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.
  2. 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).

  • Mình cũng đã có bài viết chia sẽ một phần mềm tạo logo hoàn toàn miễn phí. Bạn có thể tham khảo tại bài viết sau:

Phần mềm tạo logo miễn phí !

tạo header bằng elementor pro

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”

5. bai 2 tao header footer front of page bang elementor pro compressed

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”

6. bai 2 tao header footer front of page bang elementor pro compressed

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:

  1. 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
  2. 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
  3. Chiều cao ảnh
  4. Hiệu ứng cơ bản của ảnh
  5. Hiệu ứng thay đổi khi rê chuột vào ảnh
7. bai 2 tao header footer front of page bang elementor pro compressed

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.

  1. 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)
  2. 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)
  3. 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
  4. 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
  5. Positioning: Chế độ vị trí
  6. 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.
  7. Attributes: ít sử dung.
  8. Custom CSS: sử dụng cái này nếu bạn rành về code.
8. bai 2 tao header footer front of page bang elementor pro compressed

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

9. bai 2 tao header footer front of page bang elementor pro

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.

10. bai 2 tao header footer front of page bang elementor pro

Đố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é!

plugin elementor là gì

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.

tạo nút trong elementor

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:

đặt điều kiện cho elementor pro

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

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.

Nhân tiện mình gửi lời cám ơn đến bạn đã ghé thăm blog, ủng hộ giúp mình có thể động lực để chia sẽ tiếp.

Mời bạn đón xem Bài 3 trong chuỗi hướng dẫn sử dụng Elementor được cập nhập liên tục tại KQT Blog nhé!

Bài viết được viết bởi Jimmy tại kieuquangtham.com!

50 cuốn sách về phát triển cá nhân!

chia sẻ miễn phí 50 cuốn sách hay về phát triển cá nhân, hãy điền email bên dưới để nhận link chia sẻ miễn phí!

Đăng ký tại đây:

Bài viết đề xuất

0 0 votes
RATING
Đăng ký
Nhận thông báo
guest
0 BÌNH LUẬN
Inline Feedbacks
View all comments

gần 30GB dữ liệu sách nói về kinh doanh. hoàn toàn miễn phí!

Đây là kho sách nói về tư duy và các bài học kinh doanh, được chọn lọc từ các cuốn sách của những tác giả nổi tiếng trên khắp thế giới. Ví dụ: Làm chủ tư duy thay đổi vận mệnh - Adam Khoo, Cha giàu cha nghèo - Robert Kiyosaki, Tiền không phải là vấn đề - Bob Proctor...
Và nhiều cuốn sách hay khác đang chờ bạn khám phá!

TẶNG BẠN KHO SÁCH NÓI VỀ KINH DOANH
(MIỄN PHÍ)

Tặng bạn kho sách nói với gần 30GB dữ liệu, nghe trực tiếp mọi lúc mọi nơi qua Google Drive. Bạn có muốn sở hữu MIỄN PHÍ kho sách nói này không?

CONGRATULATION!

CHÚC MỪNG!

Bạn đã đăng ký thành công. Bấm nút bên dưới để nhận LINK SHARE 50 SÁCH Phát Triển Cá Nhân:

Combo khóa học Digital Marketing Online

Bộ Combo các khóa học về 12 lĩnh vực Digital Marketing Online như Google-Youtube-Affiliate-Wordpress-SEO-Web-Zalo-Tittok-Lazada-Shoppee-Photoshop-AI .., tất cả trong một ổ Goole Drive Share với giá chỉ 99K !!!

CONGRATULATION!

Chúc mừng!

Bạn đã gửi đăng ký thành công. Chúng tôi sẽ liên hệ với bạn trong thời gian sớm nhất.

Thank you so much!

CONGRATULATION!

Bạn đã đăng ký thành công
hãy nhấn nút để tải file về

CONGRATULATION!

Chúc mừng! Bạn đã đăng ký thành công. Bấm nút bên dưới để nhận LINK SHARE 30GB kho sách nói kinh doanh:

Combo khóa học Digital Marketing Online

Bộ Combo các khóa học về 12 lĩnh vực Digital Marketing Online như Google-Youtube-Affiliate-Wordpress-SEO-Web-Zalo-Tittok-Lazada-Shoppee-Photoshop-AI .., tất cả trong một ổ Goole Drive Share với giá chỉ 99K !!!