Sau khi đã biết Cách tạo Menu trong WordPress ở bài viết trước. Bài viết này sẽ tiếp tục hướng dẫn các bạn cách tạo Slider Revolution trong WordPress, dạng nhiều hình ảnh kích thước lớn như banner có thể lướt qua, kéo qua rất bắt mắt để giới thiệu, nhấn mạnh về sản phẩm, mục địch website của mình. Hãy cùng tìm hiểu Slider Revolution là gì và tác dụng, mục đích của nó trong WordPress là gì nhé.
Slider Revolution là gì?
Như thế này, mình có nói sơ qua ở trên Slider được hiểu như là những banner với kích lớn có thể lướt qua, kéo qua hoặc tự lướt qua tự động. Thường Slider được đặt ở dưới thanh Menu, một số ít thì đặt trên thanh Menu do thẩm mỹ, sở thích của từng người. Mình sẽ cho các bạn xem qua hình ảnh minh họa dưới đây:
Cài đặt plugin Slider Revolution như thế nào?
Slider Revolution thật chất nó là một plugin như những plugin khác, chúng ta chỉ cần cài đặt vào là sử dụng được. Vậy cài đặt như thế nào? Hãy nghe mình nói 2 điểm lưu ý ở đây:
- Thứ nhất: Khi bạn kích hoạt theme xong thì trong lúc cài đặt các plugin sẽ có sẵn plugin Slider Revolution, các bạn chỉ cần bấm vào cài đặt và kích hoạt. Ở đây nếu theme của bạn mua bản quyền thì sẽ có sẵn plugin Slider Revolution trong đó, còn những theme khác sẽ có hoặc không có. Trong bài viết này mình sẽ hướng dẫn các bạn tạo Slider Revolution trên theme the7.
- Thứ hai: Nếu theme của bạn không có plugin Slider Revolution thì phải làm sao? Cũng đơn giản thôi, bạn chỉ cần lên trang codecanyon.net là có thể mua được, tức là bạn phải tốn phí, bạn bấm vào đây để tải plugin về cài đặt và sử dụng bình thường nhé.
Sau khi bạn đã cài đặt plugin, nó sẽ thêm một mục trình đơn vào bảng điều khiển WordPress chính của bạn. Bây giờ chúng ta bắt đầu vào vấn đề chính là tạo Slider Revolution nhé.
Các bước tạo Slider Revolution
Bước 1: Ở bảng điều khiển WordPress vào Slider Revolution → Slider Revolution
Bước 2: Bấm vào New Slider để bắt đầu tạo mới Slider Revolution
Bước 3: Tìm hiểu và tùy chỉnh từng mục trong phần cài đặt Slider
1. Content Source: chọn Default Slider, nghĩa là chúng ta chọn kiểu hiển thị mặc định của Slider
2. Slider Title & ShortCode: đặt tiêu đề cho Slider để chút nữa sẽ sử dụng. Lưu ý là bạn phải đặt tên giống nhau ở 2 ô như hình nhé
3. Select a Slider Type: chọn kiểu Slider. Bạn muốn Slider theo kiểu nhấn nút qua lại thì chọn như hình dưới
4. Slide Layout: chọn kiểu kích thước Slider và chỉnh kích thước Slider trên các thiết bị. Ở đây mình chọn Auto là tự động, kiểu này thì Slider của bạn khi hiển thị sẽ được hóp, thụt vào 2 bên, tạo khoảng trắng 2 bên, còn nếu bạn muốn full luôn chiều rộng thì chọn Full-Width nhé
Bên dưới các bạn chọn mục Desktop Large và nhập chiều dài, chiều cao của ảnh các bạn sẽ đưa vào, vì nếu không khớp sẽ bị lệch rất xấu.
5. Customize, Build & Implement: để mặc định. Thật ra phần này bạn có thể bỏ qua, cũng không cần thiết nên không cần phải quan tâm
→ Các bạn có thể tùy chỉnh các thuộc tính khác của Slider qua các mục dưới đây
Bước 4: Ở đây là tùy chỉnh thêm những tính năng khác nếu bạn muốn như tắt tính năng load gây khó chịu khi mở Slider trên website hoặc chọn kiểu nút bấm qua lại… rất nhiều, các bạn xem tiếp nhé
- Genaral Settings: cài đặt chung: đặt các tùy chọn trình chiếu, thiết lập thời gian trình chiếu mặc định của bạn (thời lượng hiển thị cho trình chiếu), chỉnh sửa chuyển tiếp / hình động và nền mặc định, bật thanh tiến trình (và chỉnh sửa vị trí và kiểu), chỉnh sửa cài đặt thứ nhất, slide tiếp theo về tập trung và vô hiệu hóa blur
- Layout & Visuall: giao diện và hình ảnh: chỉnh sửa bóng, lớp phủ, nền trượt chính, cho phép trình tạo bộ tải, tắt slide trên điện thoại di động (hoặc dưới độ rộng cụ thể) và chọn vị trí slide trên trang
♦ Nếu các bạn muốn tắt đi kiểu load thi vào Slider trong web thì làm như mình nhé. Các bạn chọn mục Layout & Visuall như hình. Sau đó chọn tab Spinner. Ở phần Choose Spinner các bạn chỉ cần chọn chế độ Off là được
- Navigation: điều hướng: tùy chỉnh các tùy chọn và cài đặt cho mũi tên, các tab và hình thu nhỏ. Cũng cho phép điều hướng cảm ứng, vuốt, điều hướng bàn phím và cuộn chuột
- Parallax & 3D: cho phép hỗ trợ song song và / hoặc 3D cộng với sửa độ nhạy chuột và độ sâu vùng ngang
- Scroll Effect: hiệu ứng cuộn
- Problem Handlings: xử lý sự cố: bật tính năng dự phòng và gỡ rối bất kỳ lỗi trượt nào
- Google Fonts: phông chữ của Google: tải các phông chữ tùy chỉnh của Google cho slide của bạn (thêm các phông chữ nào bạn muốn hoặc cần thêm các lớp văn bản khớp với phần còn lại của trang web với các trang trình bày của bạn)
Bước 5: Bấm Save Settings để lưu lại. Sau đó các bạn quay ra lại phần Slider chính
Bước 6: Ở Slide đầu tiên chọn mục Main / Background Image
Bước 7: Add Layer → Image tải ảnh lên → Save Slide
Bước 8: Thêm Slide thứ 2 → Add Blank Slide và làm tương tự như trên. Các Slide khác cũng làm tương tự như vậy
Ngoài ra các bạn có thể tùy chỉnh thêm các tùy chọn khác ở mục Add Layer đó như tạo nền mờ, hiệu ứng, hình ảnh, video, button….Còn nếu bạn muốn các tùy chỉnh của mình như chữ, hình ảnh…xuất hiện trước, sau thì các bạn kéo xuống dưới khung Slider sẽ có cho các bạn chỉnh về thời gian xuất hiện nhé. Các bạn lưu ý là nhớ lưu lại
Bước 9: Sau khi các bạn đã tạo xong Slider giờ thì các bạn phải lấy nó ra bên ngoài để xuất hiện trên website. Vào Xem trang → Sửa trang
Bước 10: Bấm vào dấu “+” để Add Element
Bước 11: Chọn Element Revolution Slider
Bước 12: Chọn tên Slider đã tạo lúc nãy → Save changes → Cập nhật
Bước 13: Xem kết quả
Như vậy là đã xong cách tạo Slider Revolution trong WordPress (theme the7), bài viết rất chi tiết phải không các bạn? Vì quá trình tạo Slider này khá là chi tiết và nhiều bước nên nếu đọc một lần vẫn chưa làm được thì các bạn hãy đọc lại nhiều lần. Hi vọng sau khi đọc xong bài viết này các bạn có thể tự tạo Slider cho mình. Và để đón xem bài viết tiếp theo thì các bạn xem thêm ở dưới nhé.
Học viện MOA “Học được, làm được”
Xem thêm những bài viết hướng dẫn học thiết kế website bán hàng online chuyên nghiệp bằng WordPress:
» Hướng dẫn cách tạo menu trong WordPress
» Khóa học Thiết kế website bằng wordpress
» Hướng dẫn cách đăng bài viết và sản phẩm trên WordPress
» Kiến thức WordPress đầy đủ nhất
Để hiểu rõ hơn và có thể tự tay thiết kế website bằng WordPress cho riêng mình thi bạn hãy đến với khóa học thiết kế website bằng WordPress tại học viện MOA nhé:
