huong-dan-tao-slider-revolution-trong-wordpress

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:

 

slider revolution

 

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

 

hinh 1

 

Bước 2: Bấm vào New Slider để bắt đầu tạo mới Slider Revolution

 

hinh 2

 

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

 hinh 3

 

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é

 

hinh 4

 

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

 

hinh 5

 

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é

 

hinh 6

 

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.

 

kich thuoc slider revolution

 

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

 

hinh 8

 

→ 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

 

hinh 9

 

  • 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

 

hinh 10

 

♦ 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

 

tuy chinh slider revolution

 

  • 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

 

hinh 11

 

  • 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

 

hinh 12

 

  • Scroll Effect: hiệu ứng cuộn

 

hinh 13

 

  • 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

 

hinh 14

 

  • 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)

 

hinh 15

 

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

 

hinh 16

 

Bước 6: Ở Slide đầu tiên chọn mục Main / Background Image

 

hinh 17

 

Bước 7: Add Layer → Image tải ảnh lên → Save Slide

 

hinh 18

 

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

 

hinh 19

 

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

 

time

 

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

 

xem trang

 

sua trang

Bước 10: Bấm vào dấu “+” để Add Element

 

add element

 

Bước 11: Chọn Element Revolution Slider

 

hinh 23

 

Bước 12: Chọn tên Slider đã tạo lúc nãy →  Save changes → Cập nhật

 

hinh 24

 

Bước 13: Xem kết quả

 

trang chu-min

 

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

» 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é:

» Khóa học thiết kế website bằng WordPress