Morisstudio.com – Hướng dẫn Banner trang Home – sử dụng Slider Revolution

Trang Home website Morisstudio.com sử dụng Slider Revolution

Quản trị tại

1. Tạo 1 Slider mới:

Nhấp vào tùy chọn New slider:

Nhập tiêu đề slider: Chọn tên cho slider để dễ nhớ và dễ dàng sử dụng ở các trang khác. Mục content Source và Select a Slider Type chọn Default.

Chọn bố cục slider: tùy chỉnh kích thước chiều rộng và chiều cao hiển thị của Slider cho từng loại thiết bị tùy thuộc vào nội dung hình ảnh và cách bố trí website, thường mặc định sẽ chọn Full-Width. Các phần kích thước cho laptop – tablet – mobile có thể để auto dựa theo kích thước desktop hoặc tùy chỉnh kích thước tùy ý.

Lưu lại: 

2. Thêm ảnh/video cho slider:

Bấm chọn slider cần thêm ảnh/video – tại tab Slide Editor – chọn Slide cần thêm ảnh:

Có 2 dạng background thường được sử dụng trong Slider đó là ảnh từ thư viện, hoặc video từ youtube

  • Thêm ảnh: 
  • Thêm  video youtube: 

Thêm 1 slide ảnh/video khác:

Sau đó tiến hành thêm ảnh/video như bước trên.

Lưu lại: 

Thêm các layer –  nội dung hiển thị trên slider: 

  • Text / HTML : để thêm tiêu đề, mô tả hoặc , liên kết..
  • Hình ảnh
  • Layers Audio & Video . Chọn phương tiện bạn muốn chèn và chọn một tệp từ thư viện phương tiện hoặc chèn liên kết (YouTube, SoundCloud, v.v …). Sau đó, thêm cài đặt để bật tính năng lặp lại, tự động phát, trình chiếu tiếp theo ở cuối, khối lượng cơ bản, phân đoạn bắt đầu / kết thúc và tải trước.
  • Button :  thêm nút, có thể chỉnh sửa màu, nền, màu đường viền, biểu tượng, phông chữ, trạng thái di chuột và văn bản..
  • Shapes Chọn nền, màu sắc / kích thước đường viền, bán kính ranh giới hình (0 cho hình vuông, 100 cho hình tròn),
  • …..
    Lưu lại sau khi hoàn tất.

3. Chỉnh hiệu ứng zoom cho background Slider:

  • Chọn Slider cần chỉnh hiệu ứng – tại tab Main Background – chọn tab Ken Burns – gạt sang On:
  • Điều chỉnh các thông số zoom cho Slide ở phần bên trái, bên phải là trình xem thử:
  • Lưu lại sau khi hoàn tất.

4. Chỉnh hiệu ứng chuyển ảnh cho Slider:

Chọn Slide cần chỉnh – Tại tab Slide Animation – chọn kiểu hiệu ứng tùy thích từ danh sách các hiệu ứng bên trái và có thể xem preview trực tiếp, sau đó lưu lại:

5. Chèn Slider vào Dự án hoặc các Trang:

  • Chọn dự án hoặc trang cần chèn.
  • Cách 1: Tại mục Page Builder – tab Elements – chọn add Revolution Slider:

    Chọn edit Item vừa thêm và chọn Slider muốn hiển thị, Lưu lại, lưu ý đưa block này lên đầu trang nếu nó chưa nằm ở đầu trang:
    Lưu trang lại và xem kết quả.

  • Cách 2: Scroll xuống đến mục Page option -> Chọn tab Header – chọn Silder Revolution -> chọn slider cần hiển thị

  • Lưu trang – dự lại lại và xem kết quả

Webkimcuong Solutions – Chuyên thiết kế & thi công website chuyên nghiệp – Ecommerce – Web App Mobile

Email: info.webkimcuong@gmail.com

Hotline: 0909.490.6190396.08.23.23

Was this article helpful?

Related Articles

Leave A Comment?

You must be logged in to post a comment.