Bài 3: Hướng dẫn tạo Footer cho website by Plugin Elementor

hướng dẫn tạo footer cho website

Chào các bạn đến với series bài viết về cách sử dụng Elementor Pro. Trong bài thứ 3 này mình sẽ hướng dẫn bạn tạo Footer 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!

Giới thiệu tạo Footer cho website (bố cục chân trang web)

Footer là một bố cục sắp xếp những thông tin hiển thị ở chân 1 trang web. Hầu hết website nào cũng có phần Footer.

Footer là phần cuối cùng khách truy cập nhìn thấy khi kéo thanh cuộn đến chân trang. Do đó nó thường chứa những thông tin như: logo thương hiệu, đoạn giới thiệu, ghim maps địa chỉ, số điện thoại, liên kết trang..

hướng dẫn tạo footer cho website
Giao diện Footer tại KQT Blog

Bằng cách sử dụng plugin elementor pro bạn sẽ nhanh chóng tạo ra một giao diện Footer xuất sắc như ý muốn.

Bước 1: Bắt đầu tạo Footer 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 Footer cho website

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 Footer 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à Footer 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à “FOOTER” 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 mẫu footer elementor

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 Footer một cách trực quan.

các phần tử trong footer

Ở chỗ này bạn để ý cho mình 2 phần:

  • Phần bảng đề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ử hiển thị kết quả thiết kế nằm bên phải.
  • Phần kết quả hiển thị thiết kế 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 mẫu Footer sẽ có sẵn các phần tử: Logo thương hiệu, đoạn trích giới thiệu thương hiệu, liên kết trang, form đăng ký nhận tin.

Bước 2: Chỉnh sửa các phần tử tạo Footer cho website

Để chỉnh sửa các phần tử bạn rê chuột vào khung nhìn của phần tử đó, nó sẽ hiện nút chỉnh sửa để thay đổi nội dung phần tử gồm 3 nút chức nă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ử.

Ví dụ: để chỉnh sửa Site logo ở chân Footer từ mẫu có sẵn. Bạn rê chuột vào phẩn tử logo, click chuột chọn vào nút chỉnh sửa màu xanh da trời. Bên trái sẽ lập tức hiện ra bảng điều khiển các thông số cho bạn chỉnh sửa gồm 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..

Mỗi phần tử đều có 3 tab chỉnh sửa như vậy. Đến bước này mọi thay đổi đều rất dễ dàng và nhanh chóng, mình nghĩ sẽ không có nhiều khó khăn cho bạn. Việc thay đổi nội dung có các thao tác đều tương tự nhau. Nên nếu bạn đã chỉnh sửa được 1 trong các phần tử, bạn sẽ làm chủ được cách chỉnh sửa cho các phần tử còn lại.

Về giải thích chức năng của từng Tab mình đã hướng dẫn rõ trong bước 2 của bài viết “Bài 2: Tạo Header bằng plugin elementor pro” bạn có thể đọc thêm.

chỉnh sửa phần tử footer

Ngoài ra, bạn còn có thể di chuyển các phần tử sang vị trí khác tùy thích. Bằng cách nhấp và giữ chuột trái vào nút “Chỉnh sửa” hiện ra khi bạn rê chuột. Kéo phần tử đến vị trí mới và thả ra.

di chuyển phần tử

Bước 3: Thêm phần tử mới tạo Footer cho website

Giả sử mình muốn thêm một phần tử mới vào trang. Cụ thể là thêm ghim vị trí địa chỉ bản đồ Google Maps vào Footer. Các bước như sau:

  1. Bạn nhấp vào khối giống rubic phía bên trên tay phải bảng điều khiển, sẽ hiện ra cho bạn các phần tử mới để thêm
  2. Nhấp giữ chuột trái chọn vào phần tử mà bạn muốn thêm.
  3. Kéo phần tử đến vị trí bạn muốn nó hiển thị, khi nào thấy có 1 line màu xanh hiện lên là nơi đó sẽ chứa phần tử mới của bạn định thêm vào.
  4. Rê chuột vào góc trên bên phải phần tử để hiện ra nút chỉnh sửa, bấm vào nút hình cây bút.
  5. Bảng điều khiển bên trái sẽ hiện ra với 3 Tab quen thuộc Nội dung-Kiểu-Nâng cao. Giúp bạn chỉnh sửa dễ dàng. Ví dụ mình nhập vào địa chỉ cửa cửa là Tp HCM.
thêm phần tử footer
chỉnh sửa phần tử maps footer

Bạn có rất nhiều lựa chọn phần tử mới để thêm bớt vào. Nhiệm vụ của bạn là chỉ việc KÉO & THẢ vào vị trí tùy ý. Rồi chỉnh sửa các thông số cho phù hợp với website. Quá đơn giản phải không?

phần tử mới elementor

Bước 4: Xuất bản, đặt điều kiện hiển thị cho Footer

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.

xuất bản footer

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ị. Các thuật ngữ được giải thích như bên dưới:

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

Nếu bạn muốn Footer 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:

các điều kiện xuất bản footer

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 Footer 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 tạo Footer 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 Footer thật xuất sắc, nhằm tạo ra một giao diện trang web thật thu hút giúp tăng trãi nghiệm cho khách truy cập.

Mời bạn đón xem Bài 4 trong chuỗi hướng dẫn sử dụng Elementor được cập nhập hàng tuần 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 !!!