Computer >> Máy Tính >  >> Kết nối mạng >> Internet

Cách dễ dàng thêm hiệu ứng thị sai vào trang web WordPress của bạn

Cách dễ dàng thêm hiệu ứng thị sai vào trang web WordPress của bạn

Bạn có thể gọi nó là phô trương, bạn có thể gọi nó là kẹo mắt, nhưng hiệu ứng thị sai trong thiết kế web vẫn ở đây. Đó là một yếu tố sẽ cung cấp cho trang web của bạn yếu tố “WOW”. Mặc dù hiệu ứng này đã xuất hiện được một thời gian và có rất nhiều trang web đã triển khai nó trên thiết kế của họ, nhưng điều đó vẫn rất tuyệt.

Nếu bạn đã sẵn sàng tham gia phong trào và thêm hiệu ứng vào trang web WordPress của mình, hãy chú ý theo dõi.

Thị sai là gì?

Đối với những người không quen thuộc với thuật ngữ này, từ điển định nghĩa từ “thị sai” là “ hiệu ứng theo đó vị trí hoặc hướng của một đối tượng có vẻ khác nhau khi nhìn từ các vị trí khác nhau.

Trong thế giới thiết kế trang web, thị sai là một kỹ thuật mà hình ảnh nền di chuyển với một tốc độ khác, thường là chậm hơn so với hình ảnh nền trước. Mục đích là để tạo ảo giác về chiều sâu (hiệu ứng 3D giả) trong môi trường 2D.

Ứng dụng của thị sai đã có từ những năm 1980 trong thế giới trò chơi, nhưng các nhà thiết kế web chỉ mới bắt đầu kết hợp rộng rãi hiệu ứng này vào năm 2011 bằng cách sử dụng HTML5 và CSS3.

Đường dẫn đầu tiên:Chủ đề WordPress

Nếu bạn là người dùng WordPress, cách dễ nhất để có hiệu ứng thị sai trên trang web của bạn là sử dụng chủ đề WordPress với hiệu ứng được tích hợp sẵn. Chuyển đổi chủ đề và bạn đã hoàn tất.

Có rất nhiều chủ đề WP có sẵn thị sai, cả miễn phí và trả phí. Tìm kiếm nhanh trên Google và trong kho chủ đề WordPress sẽ cung cấp cho bạn nhiều tùy chọn hơn mà bạn có thể xử lý.

Nếu bạn muốn thử nghiệm một số chủ đề, đây là một vài ví dụ về chúng mới từ kho lưu trữ. Vì không thể kiểm tra và so sánh tất cả các chủ đề có sẵn thị sai và chỉ hiển thị cho bạn những chủ đề tốt nhất, những chủ đề này chỉ được chọn dựa trên chủ quan của thị hiếu cá nhân của tôi.

1. Khung thị sai

Cách dễ dàng thêm hiệu ứng thị sai vào trang web WordPress của bạn

2. Marvy

Cách dễ dàng thêm hiệu ứng thị sai vào trang web WordPress của bạn

3. SimpleShift

Cách dễ dàng thêm hiệu ứng thị sai vào trang web WordPress của bạn

4. Eleganto

Cách dễ dàng thêm hiệu ứng thị sai vào trang web WordPress của bạn

5. Tích phân

Cách dễ dàng thêm hiệu ứng thị sai vào trang web WordPress của bạn

6. Nhiệt thành

Cách dễ dàng thêm hiệu ứng thị sai vào trang web WordPress của bạn

7. Cây bách xù

Cách dễ dàng thêm hiệu ứng thị sai vào trang web WordPress của bạn

8. Và đừng quên chủ đề chính thức mới nhất của WordPress, Twenty Seventeen, cũng hỗ trợ tiêu đề thị sai.

Cách dễ dàng thêm hiệu ứng thị sai vào trang web WordPress của bạn

Các chủ đề này thường có một hoặc một số trình giữ chỗ cụ thể cho hiệu ứng thị sai và tất cả những gì bạn cần làm là tải hình nền lên các vị trí đó. Nhưng sự đơn giản này cũng là một nhược điểm vì bạn có ít chỗ để ứng biến.

Mỗi chủ đề đều khác nhau, nhưng bạn thường có thể tùy chỉnh hình ảnh thị sai nền thông qua menu “Giao diện -> Tùy chỉnh” và chọn menu cụ thể theo cài đặt chủ đề.

Cách dễ dàng thêm hiệu ứng thị sai vào trang web WordPress của bạn

Đường dẫn thứ hai:Plugin WordPress

Nếu bạn muốn áp dụng hiệu ứng cho các khu vực bạn chọn, bạn cần sử dụng các plugin. Mặc dù số lượng không nhiều như với các chủ đề, nhưng vẫn có rất nhiều plugin thị sai WordPress mà bạn có thể thử. Dưới đây là một vài trong số chúng từ kho plugin:Parallax Scroll, Easy WordPress Parallax Slider, cbParallax, ML Parallax, MG Parallax Slider, Easy WP Parallax Slider và Aesop Story Engine.

Hầu hết các plugin này sẽ cho phép bạn tạo các phần tử thị sai và chèn chúng vào bài đăng, trang hoặc bất kỳ khu vực được hỗ trợ nào khác bằng cách sử dụng mã ngắn. Cũng có một số tạo các phần tử trực tiếp ở nơi bạn muốn thị sai xuất hiện.

Ví dụ:trong Parallax Scroll, bạn có thể tạo một thị sai mới tương tự như tạo một bài đăng mới. Giao diện chỉnh sửa trông cũng tương tự. Để thêm hình nền thị sai, hãy sử dụng tùy chọn “Đặt hình ảnh nổi bật”. Tiêu đề và nội dung bài đăng là tùy chọn.

Cách dễ dàng thêm hiệu ứng thị sai vào trang web WordPress của bạn

Có nhiều tùy chọn mà bạn có thể tìm kiếm bên dưới hộp nội dung, nhưng chúng cũng là tùy chọn.

Cách dễ dàng thêm hiệu ứng thị sai vào trang web WordPress của bạn

Sau khi nhấn nút “Xuất bản”, bạn sẽ nhận được một mã ngắn. Chèn mã ngắn này vào bất kỳ nơi nào được hỗ trợ (bài đăng, trang, tiện ích con, v.v.) và bạn sẽ có hiệu ứng thị sai.

Cách dễ dàng thêm hiệu ứng thị sai vào trang web WordPress của bạn

Lưu ý rằng ngay cả khi bạn có thể điều chỉnh nhiều thứ trong các tùy chọn, kết quả cuối cùng của thị sai sẽ phụ thuộc nhiều vào chủ đề mà bạn sử dụng. Nếu chủ đề hỗ trợ chiều rộng đầy đủ, thì phần tử thị sai có thể xuất hiện ở chế độ toàn chiều rộng. Nếu không, bạn có thể chấp nhận những gì cuộc sống đã ban tặng cho bạn bằng vòng tay rộng mở, hoặc bạn có thể cố gắng tạo ra vẻ ngoài ưa thích của mình bằng cách sử dụng CSS và JavaScript.

Một mẹo nhỏ để thêm vào kho vũ khí của bạn:không ai nói rằng bạn không thể kết hợp chủ đề và plugin. Sử dụng nhiều hơn một plugin cũng là hợp pháp. Ví dụ:bạn có thể sử dụng Twenty Seventeen cho chủ đề của mình và cài đặt Aesop Story Engine cộng với Parallax Scroll như một phần bổ sung cho công thức web của bạn.

Giờ đây, bạn có thể thực hiện một hành trình thị sai và khiến khách truy cập của bạn ngạc nhiên trên đường đi.