Cách Thêm Parallax Effect Vào Bất Kỳ Theme WordPress Nào Mà Bạn Muốn

Parallaxthumb

Gần đây, một số độc giả của chúng tôi đã hỏi chúng tôi làm thế nào để thêm Parallax Effect vào theme WordPress. Dành cho bạn nào chưa biết thì Parallax Effect là một xu hướng thiết kế web trong đó phần ảnh Background cuộn chậm hơn phần nội dung nằm ở Foreground. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách dễ dàng thêm Parallax Effect vào bất kỳ Theme WordPress nào mà bạn muốn.

Parallaxeffectwp

Parallax Effect là gì?

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

Parallax Effect có thể được sử dụng trên các Landing Pages, Longform Content, Sales Pages, hoặc Homepage của các trang website doanh nghiệp. Đó là một cách tuyệt vời để làm nổi bật các thành phần khác nhau trên một trang dài.

Nhiều Theme WordPress cao cấp đi kèm với Parallax Effect có tích hợp sẵn trên trang chủ của họ. Bạn cũng có thể sử dụng Parallax Effect 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 Theme đều được tích hợp Parallax Effect vào trang WordPress và bạn không muốn sử dụng Page Builder để tạo Layout cho Trang chỉ để sử dụng Parallax Effect.

Hãy cùng xem một số cách dễ dàng hơn để thêm Parallax Effect vào bất kỳ Theme WordPress nào mà bạn muốn.

Phương Pháp 1: Thêm Hiệu Ứng Parallax Vào Bất Kỳ Theme 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ỳ đoạn Code nào vào theme WordPress của bạn. Nó rất dễ sử dụng và được đề xuất cho hầu hết người dùng WordPress.

Đ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 về cách cài đặ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.

Sau 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 Parallax Effect. Bạn sẽ nhận thấy nút “Advanced WordPress Backgrounds” xuất hiện trong phầb trình chỉnh sửa trực quan.

Wpbackground

Khi bạn nhấp vào biểu tượng “Advanced WordPress Backgrounds”, một cửa sổ tùy chỉnh sẽ bật mở và bạn có thể thử các tùy chọn khác nhau cho background của bạn.

Trước tiên, bạn cần chọn một hình ảnh để đặt làm background  và sau đó nhấn chọn vào ô tùy chỉnh “stretch” như hình ảnh sau đây.

Awbpopup

Tiếp theo, bạn cần nhấp vào nút “Select Image” để tải lên hoặc chọn một hình ảnh bạn muốn đặt làm Background. Hãy chắc chắn rằng bạn đang sử dụng một hình ảnh lớn nếu không hình ảnh Background của bạn sẽ bị nhòa.

Sau đó, bạn cần kích hoạt Parallax bằng cách chọn lựa chọn một Parallax Type cụ thể. Có một số kiểu có sẵn mà bạn có thể sử dụng, Parallax Effect được sử dụng phổ biến nhất là loại Scoll.

Nhấp vào nút Insert để 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=”image” awb_stretch=”true” awb_image=”22″
awb_image_size=”full” awb_parallax=”scroll” awb_parallax_speed=”0.5″
awb_mouse_parallax=”true” awb_mouse_parallax_size=”30″
awb_mouse_parallax_speed=”10000″]
Your Content Here
[/nk_awb]

Thay thế “Your Content Here” bằng nội dung của mà bạn đã chuẩn bị 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 Parallax Effect hoạt động như thế nào.

Parallaxbgpreview

Phương Pháp 2: Thêm Parallax Effect 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ó sự hiểu biết nhất định về cách sử dụng HTML / CSS cũng như cách các Theme WordPress hoạt động như thế nào.

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 Parallax Effect cho thư viện phương tiện WordPress của bạn bằng cách truy cập Media »Add New.

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

Copyimgurl

Tiếp theo, bạn cần thêm dòng HTML sau vào trang hoặc bài đăng mà bạn muốn hiển thị Parallax Effect. Bạn cũng có thể thêm HTML này vào Theme WordPress hoặc Child Theme của bạn.

<div class=”parallax”>

<div class=”parallax-content”>

Your content goes here…

</div>

</div>

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

.parallax { 

background-image: url(“http://example.com/wp-content/uploads/2017/08/my-background-image.jpg”);

height: 100%;

background-attachment: fixed;

background-position: center;

background-repeat: no-repeat;

background-size: cover;

margin-left:-410px;

margin-right:-410px;

}

.parallax-content {

width:50%;

margin:0 auto;

color:#FFF;

padding-top:50px;

}

Đừng quên thay thế URL Background bằng URL Background mà bạn vừa copy bên trên.

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

Parallaxeffect Css

Lưu ý: Bạn có thể cần điều chỉnh CSS để Parallax Effect hoạt động đồng nhất với bố cục 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 Parallax Effect cho bất kỳ chủ đề WordPress nào. Bạn cũng có thể muốn xem danh sách tổng hợp 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.

Nếu bạn thích bài viết này, thì vui lòng đăng ký Kênh YouTube của chúng tôi để xem video thêm nhiều hướng dẫn khác. Bạn cũng có thể theo dõi chúng tôi trên Twitter Facebook.

Leave a Reply

Your email address will not be published. Required fields are marked *

+