Cách thêm hiệu ứng Parallax vào bất kỳ chủ đề WordPress nào

Gần đây, một trong những độc giả của chúng tôi đã hỏi chúng tôi làm thế nào để thêm hiệu ứng thị sai cho bất kỳ chủ đề WordPress nào? Hiệu ứng Parallax là một xu hướng thiết kế web trong đó hình ảnh nền cuộn chậm hơn nội dung nền trước. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách dễ dàng thêm hiệu ứng thị sai cho bất kỳ chủ đề WordPress nào.


Thêm hiệu ứng thị sai cho bất kỳ chủ đề WordPress nào

Hiệu ứng Parallax là gì?

Hiệu ứng Parallax là một kỹ thuật thiết kế web hiện đại, trong đó phần tử nền cuộn chậm hơn nội dung nền trước. Hiệu ứng này thêm chiều sâu cho hình ảnh nền và làm cho chúng cảm thấy tương tác.

Hiệu ứng Parallax có thể được sử dụng trên các trang đích, nội dung dạng dài, trang bán hàng hoặc trang chủ của trang web doanh nghiệp. Đó là một cách tuyệt vời để làm nổi bật các phần khác nhau trên một trang dài.

Nhiều chủ đề WordPress cao cấp đi kèm với hiệu ứng thị sai tích hợp trên trang chủ của họ. Bạn cũng có thể sử dụng hiệu ứng thị sai trong hầu hết các plugin xây dựng trang WordPress.

Tuy nhiên, không phải tất cả các chủ đề đều có hiệu ứng thị sai tích hợp và bạn có thể không muốn sử dụng trình tạo trang để tạo bố cục trang tùy chỉnh chỉ cho hiệu ứng thị sai.

Chúng ta hãy xem cách dễ dàng thêm hiệu ứng nền parallax vào bất kỳ chủ đề WordPress nào.

Phương pháp 1: Thêm hiệu ứng Parallax vào bất kỳ chủ đề WordPress nào bằng cách sử dụng Plugin

Phương pháp này không yêu cầu bạn thêm bất kỳ mã nào vào chủ đề WordPress của bạn. Nó dễ dàng hơn và được khuyến nghị cho hầu hết người dùng.

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Advanced WordPress Backgrounds. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress.

Khi kích hoạt, bạn cần chỉnh sửa trang hoặc bài đăng mà bạn muốn thêm hiệu ứng thị sai. Bạn sẽ nhận thấy nút ‘Nền WordPress nâng cao mới trong trình chỉnh sửa trực quan.

Nút nền nâng cao WordPress

Nhấp vào nó sẽ xuất hiện một cửa sổ bật lên nơi bạn có thể thay đổi các cài đặt khác nhau cho nền bạn muốn thêm.

Trước tiên, bạn cần chọn một hình ảnh làm loại nền của mình và sau đó kiểm tra tùy chọn ‘căng ra.

Cài đặt nền Parallax

Tiếp theo, bạn cần nhấp vào nút ‘Chọn Image Image để tải lên hoặc chọn một hình ảnh bạn muốn sử dụng. Đảm bảo rằng bạn đang sử dụng một hình ảnh lớn nếu không nó sẽ xuất hiện pixelated.

Sau đó, bạn cần kích hoạt Parallax bằng cách chọn loại thị sai. Có một số kiểu có sẵn mà bạn có thể thử nghiệm. Hiệu ứng thị sai được sử dụng phổ biến nhất là cuộn.

Nhấp vào nút Chèn để tiếp tục.

Plugin bây giờ sẽ thêm một shortcode bên trong trình chỉnh sửa bài đăng WordPress của bạn. Nó sẽ trông giống như thế này:

[nk_awb awb_type = liệt kê hình ảnh

Nội dung của bạn ở đây

[/ nk_awb]

Thay thế content Nội dung của bạn tại đây bằng nội dung của riêng bạn và sau đó lưu trang của bạn.

Bây giờ bạn có thể truy cập trang web của bạn để xem nó trong hành động.

Xem trước hiệu ứng Parallax

Phương pháp 2: Thêm hiệu ứng Parallax vào bất kỳ Theme WordPress nào bằng CSS

Phương pháp này đòi hỏi bạn phải có hiểu biết công bằng về HTML / CSS cũng như cách các chủ đề WordPress hoạt động.

Trước tiên, bạn sẽ cần tải lên hình ảnh bạn muốn sử dụng để tạo hiệu ứng thị sai cho thư viện phương tiện WordPress của bạn bằng cách truy cập Phương tiện »Thêm mới trang.

Sau khi tải lên hình ảnh, bạn cần sao chép URL hình ảnh bằng cách chỉnh sửa hình ảnh trong thư viện phương tiện WordPress.

Sao chep địa chỉ ảnh

Tiếp theo, bạn cần thêm HTML sau vào trang hoặc bài đăng mà bạn muốn hiển thị hiệu ứng thị sai. Bạn cũng có thể thêm HTML này vào chủ đề WordPress hoặc chủ đề con của bạn.

Nội dung của bạn ở đây…

Tiếp theo, bạn cần thêm CSS tùy chỉnh sau vào chủ đề WordPress của mình.

.thị sai {
hình nền: url ("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg");
chiều cao: 100%;
đính kèm nền: cố định;
vị trí nền: trung tâm;
lặp lại nền: không lặp lại;
kích thước nền: bìa;
lề trái: -410px;
lề phải: -410px;
}

.thị sai
chiều rộng: 50%;
lề: 0 tự động;
màu: #FFF;
đệm-top: 50px;
}

Đừng quên thay thế URL hình ảnh nền bằng hình nền của riêng bạn.

Bây giờ bạn có thể lưu các thay đổi của mình và truy cập trang web của bạn để xem nó hoạt động.

Hiệu ứng thị sai được thêm bằng CSS

Lưu ý: Bạn có thể cần điều chỉnh CSS để hoạt động với bố cục của trang web của bạn.

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách dễ dàng thêm hiệu ứng thị sai cho bất kỳ chủ đề WordPress nào. Bạn cũng có thể muốn xem danh sách lớn của chúng tôi về các mẹo, thủ thuật và hack được mong muốn nhất của WordPress.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map