VietNetwork.Vn

Gần đây, một trong những độc giả của chúng tôi đã hỏi liệu có cách nào dễ dàng để thêm bóng hộp trong WordPress không?

Bóng đổ có thể làm nổi bật nội dung quan trọng nhất của bạn và thu hút sự chú ý của khách truy cập. Chúng cũng có thể giúp các thiết kế trang web phẳng trông hấp dẫn và thú vị hơn.

Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách dễ dàng thêm bóng hộp trong WordPress, từng bước một.

Tại sao Thêm Box Shadows trong WordPress?

Bóng hộp, đôi khi còn được gọi là bóng đổ, là một hiệu ứng hình ảnh làm cho đối tượng trên màn hình trông giống như đang đổ bóng.

Chúng ta có xu hướng chú ý nhiều hơn đến các đối tượng xuất hiện gần chúng ta hơn. Đó là lý do tại sao nhiều chủ sở hữu trang web thêm bóng hộp vào nội dung quan trọng nhất của họ để làm cho nội dung đó trông giống như đang lơ lửng phía trên trang.

Ví dụ: nếu bạn thêm một bóng đổ lớn vào nút kêu gọi hành động thì nút đó sẽ trông gần gũi hơn với khách truy cập. Điều này sẽ thu hút sự chú ý của người đó vào nút quan trọng này.

Như đã nói, hãy xem cách bạn có thể thêm bóng hộp vào blog hoặc trang web WordPress của mình. Chỉ cần sử dụng các liên kết nhanh bên dưới để chuyển thẳng đến phương pháp bạn muốn sử dụng.

• Phương pháp 1. Cách thêm bóng hộp bằng mã (Được khuyến nghị)
• Phương pháp 2. Thêm Box Shadow bằng Plugin miễn phí (Nhanh chóng và dễ dàng)
• Phương pháp 3. Thêm bóng hộp bằng Trình tạo trang (Nâng cao)
• Phương pháp 4. Cách thêm bóng hộp bằng CSS Hero (Plugin cao cấp)

Phương pháp 1. Cách thêm bóng hộp bằng mã (Được khuyến nghị)

Khi thêm bóng hộp, cách tốt nhất là chỉ thêm nó vào các thành phần trang web quan trọng nhất của bạn. Nếu bạn thêm một hiệu ứng đổ bóng duy nhất cho mỗi khối WordPress, nó có thể khiến trang web của bạn trông lộn xộn và khó hiểu.

Điều quan trọng nữa là bạn phải giữ cho bóng hộp của mình nhất quán trên toàn trang web. Cách tốt nhất để làm điều này là xác định kiểu trong CSS bằng cách sử dụng WPCode.

WPCode là plugin đoạn mã tốt nhất được hơn 1 triệu trang web WordPress sử dụng. Nó giúp dễ dàng thêm mã tùy chỉnh trong WordPress mà không cần phải chỉnh sửa tệp tin.php.

Với WPCode, ngay cả những người mới bắt đầu cũng có thể chỉnh sửa mã trang web của họ mà không gặp rủi ro mắc lỗi và lỗi chính tả có thể gây ra nhiều lỗi WordPress phổ biến.

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin WPCode miễn phí. Để 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.

Sau khi kích hoạt, hãy truy cập Code Snippets » Add Snippet.


Tại đây, chỉ cần di chuột qua 'Thêm mã tùy chỉnh của bạn.'

Khi nó xuất hiện, nhấp vào 'Sử dụng đoạn trích.'


Để bắt đầu, hãy nhập tiêu đề cho đoạn mã tùy chỉnh. Đây có thể là bất kỳ thứ gì giúp bạn xác định đoạn trích trong bảng điều khiển WordPress.

Sau đó, mở trình đơn thả xuống 'Loại mã' và chọn 'Đoạn mã CSS'.


Trong trình chỉnh sửa mã, hãy thêm đoạn mã sau:

.shadow-effect {
box-shadow: 5px 5px 0px 2px #a9a1a1;
}
Trong đoạn mã trên, bạn có thể cần thay thế các giá trị px tùy thuộc vào loại bóng mà bạn muốn tạo.

Để giúp bạn hiểu, đây là ý nghĩa của các giá trị px khác nhau, đi từ trái sang phải:

• Độ lệch ngang. Khi bạn đặt giá trị dương, bóng sẽ bị đẩy sang trái. Nếu bạn nhập giá trị âm như -5px, thì bóng đổ sẽ bị đẩy sang bên phải. Nếu bạn không muốn thêm phần bù ngang, thì bạn có thể sử dụng 0px để thay thế.
• Bù đắp theo chiều dọc. Nếu bạn sử dụng giá trị dương thì bóng sẽ bị đẩy xuống dưới. Nếu bạn nhập giá trị âm thì bóng đổ sẽ bị đẩy lên trên. Nếu bạn không muốn bù bóng theo chiều dọc, thì chỉ cần nhập 0px.
• Làm mờ bán kính. Thao tác này làm mờ bóng để nó không có bất kỳ cạnh thô nào. Giá trị càng cao, hiệu ứng mờ càng lớn. Nếu bạn muốn sử dụng các cạnh sắc nét, hãy nhập 0px.
• Bán kính trải rộng. Giá trị càng cao, bóng càng lan rộng. Giá trị này là tùy chọn, vì vậy hãy bỏ qua giá trị này nếu bạn không muốn hiển thị mức chênh lệch.
• Màu sắc. Mặc dù màu xám là màu phổ biến nhất cho bóng, nhưng bạn có thể sử dụng bất kỳ màu nào bạn muốn bằng cách nhập mã hex. Nếu bạn không chắc nên sử dụng mã nào thì bạn có thể khám phá các màu khác nhau bằng tài nguyên như Mã màu HTML.

Khi bạn hài lòng với đoạn trích, hãy cuộn đến phần 'Chèn'. WPCode có thể thêm mã của bạn vào các vị trí khác nhau, chẳng hạn như sau mỗi bài đăng, chỉ giao diện người dùng hoặc chỉ quản trị viên.

Chúng tôi muốn sử dụng mã CSS tùy chỉnh trên toàn bộ trang web WordPress của mình, vì vậy hãy nhấp vào 'Chèn tự động' nếu nó chưa được chọn. Sau đó, mở trình đơn thả xuống 'Vị trí' và chọn 'Tiêu đề toàn trang'.


Sau đó, bạn đã sẵn sàng cuộn lên đầu màn hình và nhấp vào nút chuyển đổi 'Không hoạt động' để nút này chuyển thành 'Hoạt động'.

Cuối cùng, nhấp vào 'Lưu đoạn mã' để làm cho đoạn mã CSS hoạt động.


Bây giờ, bạn có thể thêm lớp CSS tùy chỉnh vào bất kỳ khối nào.

Trong trình chỉnh sửa nội dung WordPress, chỉ cần chọn khối mà bạn muốn thêm bóng hộp. Sau đó, trong menu bên phải, nhấp để mở rộng phần 'Nâng cao'.


Tại đây, bạn sẽ thấy các trường mà bạn có thể thêm các lớp khác nhau.

Trong '(Các) lớp CSS bổ sung', hãy nhập shadow-effect.


Khi bạn đã sẵn sàng xuất bản bóng hộp, chỉ cần nhấp vào nút 'Xuất bản' hoặc 'Cập nhật'.

Bây giờ nếu bạn truy cập trang web của mình, bạn sẽ thấy bóng hộp trực tiếp.

Phương pháp 2. Thêm Box Shadow bằng Plugin miễn phí (Nhanh chóng và dễ dàng)

Nếu bạn không thấy thoải mái khi viết mã, thì bạn có thể muốn tạo bóng đổ bằng cách sử dụng Drop Shadow Box. Plugin miễn phí này cho phép bạn thêm bóng hộp vào bất kỳ khối nào bằng trang WordPress và trình chỉnh sửa bài đăng tích hợp.


Trước tiên, bạn cần cài đặt và kích hoạt plugin. Nếu bạn cần trợ giúp, vui lòng xem hướng dẫn của chúng tôi về cách cài đặt plugin WordPress.

Không có cài đặt nào để định cấu hình, vì vậy bạn có thể bắt đầu sử dụng plugin này ngay lập tức.

Để thêm bóng đổ, chỉ cần nhấp vào biểu tượng '+' và bắt đầu nhập 'Hộp bóng đổ'. Khi khối bên phải xuất hiện, hãy nhấp vào khối đó để thêm khối đó vào trang hoặc bài đăng.


Điều này thêm bóng đổ dưới dạng một hộp trống, vì vậy bước tiếp theo là thêm một số nội dung.

Để thực hiện việc này, hãy tiếp tục và nhấp vào dấu '+' bên trong khối Hộp bóng đổ.


Sau đó, chỉ cần thêm khối bạn muốn sử dụng và định cấu hình nó như bình thường.

Ví dụ: trong hình ảnh sau đây, chúng tôi đã thêm khối Hình ảnh và chọn ảnh từ thư viện phương tiện WordPress.


Khi đã xong, nhấp để chọn khối Drop Shadow Box. Trong menu bên phải, bạn sẽ thấy tất cả các cài đặt mà bạn có thể sử dụng để tạo kiểu cho khối này.

WordPress tự động đặt chiều rộng của bóng nhưng bạn có thể thay đổi điều này bằng cách mở menu thả xuống 'Chiều rộng' rồi chọn 'Pixels' hoặc '%.'

Sau đó, bạn có thể thay đổi kích thước của nó bằng cách sử dụng các cài đặt xuất hiện.


Plugin Drop Box Shadow đi kèm với một vài hiệu ứng khác nhau như các cạnh cong và hiệu ứng 'Phối cảnh' bắt mắt.

Để xem trước các hiệu ứng khác nhau, chỉ cần mở menu thả xuống 'Hiệu ứng' và chọn từ danh sách. Bản xem trước sẽ tự động cập nhật để bạn có thể thử các phong cách khác nhau để xem mình thích phong cách nào hơn.


Bạn cũng có thể thay đổi việc plugin hiển thị bóng bên trong hộp, bên ngoài hộp hay cả hai bằng cách sử dụng các nút chuyển đổi 'Bóng bên trong' và 'Bóng bên ngoài'.

Sau đó, bạn có thể thay đổi màu của hộp và đường viền bằng cài đặt trong tiêu đề 'Màu'.

Chỉ cần lưu ý rằng 'Nền' đề cập đến bên trong Hộp bóng đổ, trong khi 'Đường viền' xuất hiện bên ngoài khối.


Nếu bạn muốn tạo một hộp bóng cong mềm mại hơn thì bạn có thể bật chuyển đổi 'Các góc được làm tròn'. Cuối cùng, bạn có thể thay đổi căn chỉnh và phần đệm, tương tự như cách bạn tùy chỉnh các khối khác trong WordPress.

Để tạo thêm bóng hộp, chỉ cần làm theo quy trình tương tự được mô tả ở trên.

Khi bạn hài lòng với giao diện của trang, chỉ cần nhấp vào 'Cập nhật' hoặc 'Xuất bản' để tất cả các bóng hộp mới của bạn hoạt động.

Phương pháp 3. Thêm bóng hộp bằng Trình tạo trang (Nâng cao)

Nếu bạn muốn thêm bóng hộp vào trang đích, trang chủ tùy chỉnh hoặc bất kỳ phần nào trong giao diệnWordPress của mình thì chúng tôi khuyên bạn nên sử dụng plugin trình tạo trang.

SeedProd là trình tạo trang WordPress kéo và thả tốt nhất. Nó cho phép bạn thiết kế các trang đích tùy chỉnh và thậm chí tạo một giao diệnWordPress tùy chỉnh mà không phải viết một dòng mã nào.

Nó cũng cho phép bạn thêm bóng hộp vào bất kỳ khối nào bằng trình chỉnh sửa kéo và thả nâng cao của nó.

Trước tiên, bạn cần cài đặt và kích hoạt plugin SeedProd. Để 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.

Lưu ý: Ngoài ra còn có phiên bản SeedProd cao cấp đi kèm với các mẫu được thiết kế chuyên nghiệp hơn, các tính năng nâng cao và tích hợp WooCommerce. Tuy nhiên, chúng tôi sẽ sử dụng phiên bản miễn phí vì nó có mọi thứ bạn cần để thêm bóng hộp trong WordPress.

Sau khi kích hoạt plugin, SeedProd sẽ hỏi mã cấp phép của bạn.


Bạn có thể tìm khóa cấp phép này trong tài khoản của mình trên trang web SeedProd. Sau khi nhập thông tin, nhấp vào nút 'Xác minh khóa'.

Sau khi nhập khóa của bạn, hãy truy cập SeedProd » Landing Pages trong bảng điều khiển WordPress của bạn.


SeedProd đi kèm với 150 mẫu được thiết kế chuyên nghiệp được nhóm thành các danh mục. Dọc phía trên cùng, bạn sẽ thấy các danh mục cho phép bạn tạo các trang sắp ra mắt đẹp mắt, kích hoạt chế độ bảo trì, tạo trang đăng nhập tùy chỉnh cho WordPress và hơn thế nữa.

Tất cả các mẫu của SeedProd đều dễ dàng tùy chỉnh, vì vậy bạn có thể sử dụng bất kỳ thiết kế nào bạn muốn.

Khi bạn tìm thấy một mẫu ưng ý, chỉ cần di chuột qua mẫu đó và nhấp vào biểu tượng dấu kiểm.


Giờ đây, bạn có thể nhập tên cho trang đích của mình vào trường 'Tên Trang'. SeedProd sẽ tự động tạo 'URL trang' bằng tên trang.

Thật thông minh khi bao gồm các từ khóa có liên quan trong URL của bạn bất cứ khi nào có thể, vì điều này có thể giúp các công cụ tìm kiếm hiểu nội dung của trang. Điều này thường sẽ cải thiện SEO WordPress của bạn.

Để thay đổi URL được tạo tự động của trang, chỉ cần nhập vào trường 'URL trang'.


Khi bạn hài lòng với thông tin mình đã nhập, hãy nhấp vào 'Lưu và Bắt đầu Chỉnh sửa Trang'. Thao tác này sẽ tải giao diện trình tạo trang SeedProd.

Trình tạo kéo và thả đơn giản này hiển thị bản xem trước trực tiếp thiết kế trang của bạn ở bên phải. Ở bên trái là menu hiển thị tất cả các khối và phần khác nhau mà bạn có thể thêm vào trang.


Khi bạn tìm thấy một khối mà bạn muốn thêm, chỉ cần kéo và thả khối đó vào mẫu của bạn.

Để tùy chỉnh một khối, hãy tiếp tục và nhấp để chọn khối đó trong trình chỉnh sửa SeedProd. Menu bên trái bây giờ sẽ cập nhật để hiển thị tất cả các cài đặt bạn có thể sử dụng để tùy chỉnh khối.

Ví dụ: nếu bạn nhấp vào khối Dòng tiêu đề thì bạn có thể nhập văn bản của riêng mình hoặc thay đổi màu văn bản và cỡ chữ.


Khi bạn đang xây dựng trang, bạn có thể di chuyển các khối xung quanh bố cục của mình bằng cách kéo và thả chúng. Để biết hướng dẫn chi tiết hơn, vui lòng xem hướng dẫn của chúng tôi về cách tạo trang đích bằng WordPress.

Để tạo bóng hộp, nhấp để chọn bất kỳ khối nào trong trình chỉnh sửa trang SeedProd. Các cài đặt trong menu bên trái có thể khác nhau giữa các khối, nhưng thông thường bạn sẽ cần nhấp vào tab 'Nâng cao'.


Tại đây, hãy tìm menu thả xuống 'Bóng' trong phần 'Kiểu'. Chỉ cần mở trình đơn thả xuống này và chọn một kiểu đổ bóng chẳng hạn như Hairline, Medium hoặc 2X Large.

Bản xem trước sẽ cập nhật tự động, vì vậy bạn có thể thử các kiểu khác nhau để xem kiểu nào trông đẹp nhất trên thiết kế trang của mình.


Nếu bạn không muốn sử dụng bất kỳ kiểu tạo sẵn nào, hãy nhấp vào 'Tùy chỉnh'.

Điều này thêm một số cài đặt mới, nơi bạn có thể thay đổi màu sắc, độ mờ, độ lan rộng và vị trí của bóng tùy chỉnh.


Xong, bạn có thể tiếp tục làm việc trên trang bằng cách thêm nhiều khối và bóng hộp.

Khi bạn hài lòng với giao diện của trang, hãy nhấp vào nút 'Lưu' rồi chọn 'Xuất bản' để hiển thị trang.


Phương pháp 4. Cách thêm bóng hộp bằng CSS Hero (Plugin cao cấp)

Nếu bạn không thoải mái khi làm việc với mã nhưng vẫn muốn tạo bóng hộp nâng cao, thì bạn có thể thử CSS Hero. Plugin cao cấp này cho phép bạn tinh chỉnh mọi phần của giao diệnWordPress mà không phải viết một dòng mã nào.

CSS Hero cho phép bạn tạo một bóng đổ duy nhất cho mỗi khối, vì vậy đây cũng là một lựa chọn tuyệt vời nếu bạn muốn tạo nhiều hiệu ứng đổ bóng khác nhau.

Trước tiên, bạn cần cài đặt và kích hoạt plugin CSS Hero. Để 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.

Sau khi kích hoạt, bạn sẽ thấy nút 'Tiếp tục kích hoạt sản phẩm' ở đầu màn hình. Hãy tiếp tục và nhấp vào nút này.


Thao tác này sẽ đưa bạn đến trang web CSS Hero nơi bạn có thể đăng nhập vào tài khoản của mình và lấy khóa cấp phép. Chỉ cần làm theo các hướng dẫn trên màn hình và bạn sẽ được chuyển hướng trở lại trang web của mình sau một vài cú nhấp chuột.

Tiếp theo, nhấp vào dòng chữ 'Customize with CSS Hero' trên thanh công cụ quản trị WordPress.


Thao tác này sẽ mở trình chỉnh sửa CSS Hero.

Theo mặc định, nhấp vào bất kỳ phần nội dung nào sẽ mở bảng điều khiển với tất cả các cài đặt mà bạn có thể sử dụng để tùy chỉnh nội dung đó.


Điều này thật tuyệt nếu bạn muốn thêm bóng hộp vào trang chủ của trang web của mình. Tuy nhiên, nếu bạn muốn tùy chỉnh bất kỳ trang nào khác thì bạn cần chuyển từ chế độ 'Chọn' sang chế độ 'Điều hướng', vì chế độ này cho phép bạn tương tác với menu, liên kết và nội dung khác như bình thường.

Để thực hiện việc này, hãy nhấp vào nút chuyển đổi 'Chọn / Điều hướng' trên thanh công cụ để nó hiển thị 'Điều hướng'.


Giờ đây, bạn có thể điều hướng đến trang hoặc bài đăng mà bạn muốn thêm bóng đổ.

Ngay khi bạn đến trang đó, hãy tiếp tục và nhấp vào nút chuyển đổi 'Chọn / Điều hướng' một lần nữa để nó hiển thị 'Chọn'.


Khi đã xong, hãy nhấp vào đoạn văn, hình ảnh, nút hoặc bất kỳ nội dung nào khác mà bạn muốn thêm bóng hộp.

Trong bảng điều khiển bên trái, hãy nhấp vào 'Thêm'.


Bây giờ bạn có thể tiếp tục và nhấp vào 'Tạo bóng', hiển thị tất cả các cài đặt bạn có thể sử dụng để tạo bóng hộp.

Để bắt đầu, bạn có thể thay đổi bóng xuất hiện bên trong hay bên ngoài khối bằng cài đặt 'Vị trí bóng'.


Sau khi đưa ra quyết định này, bạn có thể tinh chỉnh hướng của bóng đổ bằng dấu chấm nhỏ trong hộp 'Định hướng'.

Chỉ cần kéo và thả dấu chấm vào vị trí mới để xem dấu chấm di chuyển trong bản xem trước trực tiếp.


Khi bạn hài lòng với vị trí của bóng đổ, bạn có thể thay đổi màu sắc, độ mờ và độ mở rộng của nó.

CSS Hero sẽ hiển thị những thay đổi này ngay lập tức, vì vậy bạn có thể thử các cài đặt khác nhau để xem cài đặt nào trông đẹp nhất.


Để thêm bóng hộp vào các khối khác, chỉ cần làm theo quy trình tương tự được mô tả ở trên.

Khi bạn hài lòng với giao diện của trang, hãy nhấp vào 'Lưu & Xuất bản' để hiển thị trang.


Chúng tôi hy vọng hướng dẫn này đã giúp bạn tìm hiểu cách thêm bóng hộp trong WordPress. Bạn cũng có thể muốn tìm hiểu cách tạo bảng nội dung trong WordPress hoặc xem danh sách các plugin bật lên WordPress tốt nhất của chúng tôi.