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

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.

1. Giới Thiệu Tạo Footer Cho Website

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

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

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:

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.

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

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.

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:

• • 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
  • Nhấp giữ chuột trái chọn vào phần tử mà bạn muốn thêm.
  • 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.
  • 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.
  • 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.

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?

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.

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:

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

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