Hình nền WordPress có tất cả các dạng. Bạn có thể tải lên hình nền cho toàn bộ trang web của mình, đặt nó phía sau các nút hoặc đặt nền màu đồng nhất cho trang đăng nhập của bạn. Bất kể bạn muốn đặt chúng ở đâu, điều cần thiết là phải hiểu những điều cơ bản về tải lên hình ảnh, bao gồm cả hình ảnh nền.

Bài viết này giải thích hình nền là gì và bạn có thể chỉnh sửa nó như thế nào để có kết quả tốt hơn. Chúng tôi cũng sẽ trình bày cách nhanh chóng kích hoạt hình nền trên trang web của bạn và giải quyết bất kỳ sự cố nào có thể xảy ra trong quá trình này.

Bị kích thích? Hãy bắt đầu nào!

Table of Contents

Xem hướng dẫn bằng video của chúng tôi để thêm hình nền WordPress:

Hình nền WordPress là gì?

Hình nền WordPress đóng vai trò là hình nền đầy đủ của trang web của bạn. Nó còn được gọi là nền tùy chỉnh.

A WordPress background image example
Một ví dụ hình nền WordPress

Nền cũng có thể là một màu đồng nhất.

Bất kể tùy chọn bạn chọn là gì, tệp functions.php sẽ xử lý hình nền trong chủ đề WordPress. Nó cũng được hiển thị bởi tệp header.php từ WordPress.

Do đó, các nhà phát triển chủ đề có quyền kiểm soát tốt hơn đối với việc tính năng nền tùy chỉnh có được kích hoạt cho chủ đề WordPress của bạn hay không. Bạn vẫn có thể Bật hoặc Tắt chức năng này, nhưng chủ đề trang web của bạn thường quy định các cài đặt mặc định.

Có một số loại nền bạn có thể triển khai trên WordPress. Bạn có thể tạo nền trang web đầy đủ tiêu chuẩn hoặc nền nằm sau các phần tử cụ thể như thanh bên và bài báo.

Hình nền tùy chỉnh cũng có thể có cho các vị trí cụ thể hơn trên trang WordPress:

  • Đằng sau một trang hoặc bài đăng WordPress
  • Trên trang danh mục WordPress
  • Bên trong khối nội dung cho một trang hoặc bài đăng
  • Trên trang Đăng nhập
  • Phía sau Menu điều hướng
  • Trên các trang Bảo trì hoặc Sắp có

Nhìn chung, nếu hỗ trợ nền tùy chỉnh được bật trong một chủ đề, người dùng có thể tải lên hình ảnh hoặc chọn màu để lấp đầy toàn bộ nền của trang web.

Các cài đặt nằm trong bảng điều khiển WordPress trong Giao diện> Tùy chỉnh> Hình nền . Tuy nhiên, các loại nền khác có thể thực hiện được thông qua trình tạo trang kéo và thả, plugin và các tùy chọn khác nhau.

Tải hình nền lên trang tổng quan chỉ là một phần của quá trình. Sau đó, bạn cần định cấu hình cài đặt hình nền. Đôi khi bạn có thể để nguyên cài đặt, trong khi những lần khác, điều quan trọng là phải định cấu hình lại cài đặt để đảm bảo hình ảnh trông tuyệt vời.

Cài đặt cho hình nền WordPress bao gồm:

  • Màu nền
  • Định cỡ
  • Vị trí hình ảnh
  • Hình ảnh có lặp lại hay không
  • Các tùy chọn để lấp đầy màn hình hoặc kéo dài hình ảnh

Trước tiên, chúng tôi sẽ đề cập đến các phương pháp hay nhất khi sử dụng hình nền WordPress. Sau đó, chúng ta sẽ đi vào cách đặt hình nền WordPress trong các tình huống khác nhau.

Nhiều kiểu nền

Một lợi thế thực sự của nền WordPress là chúng không phải là tất cả các hình ảnh tĩnh. Bạn có thể bắt gặp nhiều loại hình nền khác nhau, từ video đến mẫu ảnh cho đến trình chiếu.

A background image example on Kinsta's site
Một ví dụ về hình nền trên trang của Kinsta

Bạn thường có thể triển khai các hình nền độc đáo với sự trợ giúp của CSS hoặc plugin tùy chỉnh (hoặc cả hai). Chúng tôi chỉ cho bạn cả hai phương pháp trong bài viết này.

Dưới đây là một số kiểu nền cần xem xét:

  • Hình ảnh nền tiêu chuẩn: Đây là những hình ảnh tĩnh (PNG, JPG và các định dạng hình ảnh khác) trải dài trên hầu hết không gian trang web và nằm sau nội dung chính. Những lợi ích của chúng bao gồm sự đơn giản, các tùy chọn cho ảnh có độ phân giải cao và hỗ trợ mặc định bởi WordPress Core. Những nhược điểm bao gồm từ xu hướng làm rối tung khả năng hiển thị của các yếu tố tiền cảnh đến hình ảnh lớn, độ phân giải cao làm chậm trang web của bạn.
  • Hình nền màu đồng nhất: Hình nền màu đồng nhất rất hữu ích khi bạn muốn thêm một số rung động vào trang web của mình nhưng không có hình ảnh phù hợp với thương hiệu của bạn hoặc hình ảnh có vẻ đẹp làm nền. Nền màu cũng thể hiện hình ảnh sạch sẽ, chuyên nghiệp hơn và chúng không mất nhiều thời gian để thực hiện. Chúng rất phù hợp để so khớp thương hiệu của bạn mà không cần mã tùy chỉnh hoặc plugin.
  • Gradient Backgrounds: Nền gradient chuyển từ màu này sang màu khác. Nó hấp dẫn về mặt trực quan hơn là một màu đồng nhất, không mất nhiều thời gian để thêm và bạn có thể thêm một màu với nhiều plugin. Nhược điểm chính là tiền cảnh có thể hiển thị tốt ở một đầu của gradient nhưng không hiển thị ở đầu kia.
  • Nền hoa văn hoặc họa tiết: Tất cả nền hoa văn và họa tiết đều là ảnh, nhưng chúng tập trung vào các mục lặp lại trong hình ảnh hoặc kết cấu cận cảnh, như một tấm gỗ hoặc một bãi cỏ. Phần tốt của một mẫu hoặc kết cấu là nó hoạt động tuyệt vời như một nền, biết cách bạn có thể kéo dài nó ra và hầu hết mọi người sẽ không nhận thấy nếu có sự phá vỡ trong mẫu khi hình ảnh không đủ lớn.
  • Hình nền trình chiếu hình ảnh: Nền trình chiếu hình ảnh cho phép chủ sở hữu trang web chia sẻ nhiều loại thiết kế hoặc ảnh trong nền, thúc đẩy nỗ lực điều chỉnh tâm trạng khi khách hàng cuộn qua trang web của bạn. Tuy nhiên, trình chiếu có thể gây mất tập trung hoặc làm chậm trang web của bạn.
  • Nền video: Nền video hấp dẫn, thú vị khi xem và dễ dàng khắc họa bản chất thương hiệu của bạn. Tuy nhiên, chúng cũng dẫn đến các vấn đề về hiệu suất nếu không được thực hiện đúng cách và có thể khiến phễu bán hàng của bạn mất đi sự chú ý. Ngoài ra, video nền phải có kích thước hoàn hảo và phát vào đúng thời điểm. Chúng cũng có thể đắt tiền trừ khi bạn chọn video có kho miễn phí.

Các phương pháp hay nhất để sử dụng hình nền WordPress

Đặt hình nền tùy chỉnh có vẻ như là một nhiệm vụ dễ dàng. Chỉ cần tải hình ảnh lên đúng vị trí và xem nó xuất hiện trên giao diện người dùng, phải không?

Hầu hết thời gian là vậy, nhưng những lần khác, bạn sẽ thấy rằng hình nền có thể hơi rắc rối. Đó là lý do tại sao chúng tôi khuyên bạn nên làm theo các phương pháp hay nhất cho hình nền WordPress để loại bỏ càng nhiều vấn đề càng tốt.

Mẹo sử dụng hình nền WordPress

Gắn bó với hình ảnh chất lượng cao

Độ phân giải của hình nền dự định của bạn thường tạo ra hoặc phá vỡ bản trình bày của nó. Bạn có thể nghĩ rằng hình ảnh bạn chụp bằng điện thoại thông minh là hoàn hảo để làm hình nền, nhưng rất có thể nó cần có chất lượng cao hơn nhiều.

Free stock photos on Unsplash
Kho ảnh miễn phí trên Unsplash

Bạn có thể trả tiền cho một hình ảnh miễn phí bản quyền từ một trang web như Shutterstock. Những trang web đó thường có hình ảnh cấp độ chuyên nghiệp đã được chuẩn bị sẵn và sẵn sàng tải lên dưới dạng hình nền lớn. Bạn cũng có thể tìm thấy rất nhiều trong số chúng trên các trang hình ảnh có sẵn miễn phí.

Hình nền có thể không được hiển thị toàn bộ trên trang web của bạn, vì phần lớn hình nền bị che bởi nội dung. Tuy nhiên, hình ảnh thực tế được hiển thị trên toàn bộ màn hình.

Nếu bạn không sử dụng hình ảnh chất lượng cao, bạn có nguy cơ nhìn thấy hậu cảnh bị kéo căng.

Đảm bảo hình ảnh nền được định cỡ phù hợp

Cùng với độ phân giải hình ảnh, kích thước vật lý của hình ảnh cũng quan trọng rất nhiều.

Tất cả các màn hình đều có tỷ lệ khung hình khác nhau. Và các thiết bị di động còn làm cho nó phức tạp hơn. Nhưng mục đích là sử dụng hình ảnh đẹp cho màn hình lớn nhất. Nếu không, bạn sẽ có nguy cơ hình ảnh bị kéo dài ra hoặc không hiển thị đúng cách một lần nữa.

Nói chung, một quy tắc tốt là tuân theo kích thước ảnh nền WordPress tối thiểu là 1024 x 768 pixel. Tuy nhiên, các chuyên gia khác đề xuất một cái gì đó giống như 1920 x 1080 pixel. Nhìn chung, cách hành động tốt nhất của bạn là ở đâu đó trong khoảng 1000 đến 3000 pixel đối với chiều rộng, tùy thuộc vào vị trí hiển thị của nó.

WordPress background image dimensions
Kích thước hình nền WordPress

Yếu tố tiếp theo bạn cần quan tâm là tỷ lệ khung hình. Hình nền bao phủ toàn bộ trang web hay chỉ là phần tư trên cùng?

Về mặt kỹ thuật, một trang web có tỷ lệ khung hình dọc (chiều cao dài hơn chiều rộng). Vì vậy, bạn có thể xem xét các loại hình ảnh. Tuy nhiên, hình nền phần — như hình nền cho tiêu đề hoặc quảng cáo biểu ngữ — nên vẫn ở định dạng ngang (chiều rộng dài hơn chiều cao).

Ngoài ra, tỷ lệ khung hình phổ biến nhất cho máy tính để bàn ngày nay là 16: 9 . Còn lại xung quanh mục tiêu đó sẽ giúp ích. Chủ đề hoặc plugin đáp ứng có thể tự động điều chỉnh hình nền để xem trên thiết bị di động.

Cuối cùng, việc kiểm tra hình nền của bạn trên một trang web thực tế và nhiều loại thiết bị sẽ giúp đưa ra quyết định cuối cùng dễ dàng hơn nhiều.

Tối ưu hóa trước khi tạo hình nền WordPress

Như với tất cả các hình ảnh được tải lên WordPress, bạn đang tự coi mình là kẻ phá hoại nếu bạn không tối ưu hóa chúng trước khi xuất bản lên internet. Điều này đặc biệt quan trọng đối với hình nền vì chúng thường hiển thị trên nhiều trang trong toàn bộ trang web của bạn. Thêm vào đó, chúng là những bức ảnh lớn và chiếm một lượng lớn không gian trên màn hình.

Hình ảnh lớn hơn gây ra một lượng lớn sự căng thẳng cho máy chủ của bạn. Duy trì độ phân giải của hình ảnh, nhưng tối ưu hóa kích thước của hình ảnh để trang web của bạn tải nhanh chóng.

Bạn có hai tùy chọn để tối ưu hóa ảnh:

  1. Tối ưu hóa hình ảnh nền (và tất cả hình ảnh trang web) trước khi tải chúng lên WordPress. Hoàn thành quy trình thủ công này với sự trợ giúp của các công cụ như Photoshop Express, GIMP và Pixlr.
  2. Tự động hóa quá trình tối ưu hóa bằng cách cài đặt một plugin WordPress có thể thay đổi kích thước và thu nhỏ ảnh khi tải lên.

Đọc hướng dẫn tối ưu hóa hình ảnh chuyên sâu của chúng tôi về cách tối ưu hóa hình ảnh để cải thiện hiệu suất web.

Kiểm tra hỗ trợ nền trước khi cài đặt chủ đề

Thật không may, không phải tất cả các chủ đề đều hỗ trợ hình nền tùy chỉnh. Đó thường là do nền không phù hợp với thiết kế tổng thể của chủ đề, vì vậy nhà phát triển đã chọn tắt hoàn toàn.

Tuy nhiên, nếu bạn thực sự muốn có một nền trên trang web của mình, bạn nên kiểm tra danh sách các tính năng khi tải xuống một chủ đề mới, đặc biệt nếu bạn định trả tiền cho một chủ đề cao cấp. Nhiều trang web bán chủ đề cung cấp thông tin về việc một chủ đề có hỗ trợ hình nền hay không.

Ví dụ: các chủ đề được liệt kê trong Thư viện Chủ đề WordPress cho biết hỗ trợ cho hình nền tùy chỉnh dưới dạng thẻ. Bạn cũng có thể tìm thấy tham chiếu đến nền tùy chỉnh trong mô tả chủ đề.

'Custom Background' support for themes
Hỗ trợ ‘Nền tùy chỉnh’ cho các chủ đề

Các trang web chủ đề khác thường bao gồm thông tin tương tự về hình nền tùy chỉnh. Nếu không, hãy liên hệ với nhà phát triển để tìm hiểu xem có thể theo bất kỳ cách nào không và nếu ghi đè khối hình nền (được đề cập bên dưới) sẽ gây ra bất kỳ sự cố nào với chủ đề.

Cân nhắc việc sử dụng một trình tạo trang trực quan để tạo hình ảnh nền dễ dàng hơn

Các nhà xây dựng trang như Gutenberg, WPBakery, Divi và Elementor, cung cấp danh sách các khối và mô-đun ấn tượng để chèn các phần tử như hình ảnh và hộp văn bản vào bất kỳ đâu trên trang web.

Elementor website builder
Trình tạo trang web Elementor

Nếu không có trình tạo kéo và thả, việc định cấu hình ảnh nền sẽ trở nên khó khăn hơn một chút. Đặc biệt khó khăn khi cố gắng giải quyết bất kỳ vấn đề nào bạn có thể gặp phải.

Các trình tạo trang cũng có xu hướng thay thế chức năng hình nền mặc định được cung cấp thông qua WordPress. Bạn có thể ghi đè các hạn chế của chủ đề hoặc bất kỳ phần tử bị thiếu nào giúp hiển thị hình nền trong mã.

Đảm bảo Hình nền của bạn là Hợp pháp

Tính hợp pháp luôn được đề cập khi nói về hình ảnh, đặc biệt là những hình ảnh được công bố trên internet. Có một xu hướng ngày càng tăng trên phương tiện truyền thông xã hội, nơi mọi người dường như cho rằng việc thêm tín dụng vào ảnh sẽ tự động giúp bạn sử dụng ảnh đó.

Đó là sai.

Ai lấy ảnh thì sở hữu. Ngay cả khi hình ảnh đó đến từ một bức ảnh nhanh trên iPhone — họ ngay lập tức có quyền bảo vệ bản quyền cho bức ảnh đó ở Hoa Kỳ và nhiều quốc gia khác.

Nếu bạn muốn có quyền hợp pháp để sử dụng ảnh của người khác, bạn sẽ cần có tuyên bố bằng văn bản từ chủ sở hữu bản quyền cho phép bạn sử dụng hình ảnh của họ — một email đơn giản sẽ làm được điều đó. Thậm chí sau đó, bạn có thể phải gán cho bức ảnh nếu người đó yêu cầu bạn.

Chúng tôi có một hướng dẫn toàn diện về việc bảo vệ hình ảnh trên trang web của bạn, nhưng bài viết cũng nêu ra những thông tin có giá trị cho những người quan tâm đến việc sử dụng ảnh từ các nguồn khác.

Phần khó khăn đối với hình nền là việc thêm ghi công thường không thực tế, vì WordPress không có chỗ để kết hợp chú thích hiển thị cho hình nền. Và không, bạn không thể thêm ghi nhận tác giả vào một trang hoặc bài đăng blog ngẫu nhiên và mong đợi điều đó đóng vai trò là tín dụng cho hình nền trang web đầy đủ.

Để bảo vệ bản thân và tôn trọng những người chụp ảnh, hãy xem xét một trong những điều sau khi tìm nguồn cung cấp hình nền WordPress:

  • Tự chụp ảnh. Đó là cách dễ nhất để đảm bảo bạn không vi phạm tài sản có bản quyền của bất kỳ ai khác.
  • Trả tiền cho ảnh trên các trang web như Shutterstock và iStockPhoto. Những thứ này đôi khi đắt tiền, nhưng đối với một hình nền, nó có thể bóp vào ngân sách của bạn.
  • Hãy xem xét một trang web hình ảnh miễn phí như Unsplash hoặc Pexels. Tuy nhiên, hãy đảm bảo rằng ghi công không bắt buộc! Đôi khi, bạn có thể xác định vị trí hình ảnh trên các trang web này, nơi ghi nhận tác giả được đề xuất nhưng không bắt buộc.
  • Liên hệ với nhiếp ảnh gia hoặc nghệ sĩ và hỏi xem bạn có thể sử dụng miễn phí hay không. Đây có thể là tất cả những gì bạn cần, đặc biệt nếu bạn cung cấp một thứ gì đó để đổi lại.
  • Hãy nghĩ đến việc bỏ qua hình nền hoặc cân nhắc sử dụng nền màu thay vì ảnh.

Làm cách nào để đặt hình nền trong WordPress?

Có nhiều cách khác nhau để đặt hình nền trong WordPress. Các phương pháp này thường thay đổi dựa trên vị trí bạn muốn đặt hình ảnh.

Ví dụ: bạn có thể quyết định rằng bạn muốn giữ nguyên hình nền trong toàn bộ trang web của mình. Mặt khác, có thể bạn muốn tìm cách hiển thị hình nền độc đáo cho tất cả các trang của mình.

Vì có rất nhiều khả năng tồn tại, chúng tôi sẽ trình bày cách thêm hình nền hoặc màu vào các phần sau:

  • Toàn bộ trang web
  • Một trang WordPress
  • Một bài đăng trên WordPress
  • Một khối nội dung riêng lẻ
  • Tiêu đề WordPress
  • Một trang lưu trữ danh mục
  • Trang đăng nhập WordPress
  • Menu Điều hướng
  • Một trang bảo trì

Cách thêm hình nền vào tiêu đề và menu WordPress

Trước khi bạn bắt đầu: Kích hoạt hỗ trợ nền tùy chỉnh trên WordPress (Nếu cần)

Các nhà phát triển chủ đề quyết định số phận của các khả năng nền của trang web. WordPress có chức năng được tích hợp trong cốt lõi, nhưng một nhà phát triển chủ đề có thể tắt nó đi, khiến bạn không có cài đặt trang tổng quan nào để bật nó.

Nếu tại bất kỳ thời điểm nào trong các hướng dẫn sau, bạn thấy rằng chủ đề của mình là lý do khiến bạn thiếu tùy chọn Nền tùy chỉnh , hãy xem xét các bước sau để khắc phục nhanh nó.

Hỗ trợ nền tùy chỉnh chính cho WordPress được xử lý bởi tệp functions.php . Mở tệp đó và chèn mã sau nếu mã bị thiếu:

$defaults = array(    'default-color'         => '',    'default-image'         => '',    'default-repeat'        => '',    'default-position-x'    => '',    'default-attachment'    => '',    'wp-head-callback'      => '_custom_background_cb',    'admin-head-callback'   => '',    'admin-preview-callback' => '' ); add_theme_support( 'custom-background', $defaults );

Hãy nhớ rằng phần tử thực sự kích hoạt hỗ trợ nền là hàm add_theme_support() với mọi thứ trong đó. Mã đó bật tính năng nền trong bảng điều khiển WordPress, bạn có thể sử dụng tính năng này trong nhiều hướng dẫn sau trong bài viết này.

Cũng có thể thêm hình nền mặc định cho toàn bộ chủ đề thông qua tệp functions.php . Chỉ cần chuyển đến khu vực từ mã trước với giá trị default-image và thêm URL của hình ảnh vào khoảng trống giữa ' ' sau dấu => .

Đây là một cách nhanh chóng và dễ dàng để bật các hình nền tùy chỉnh trong bảng điều khiển WordPress.

Đã nói rằng, chúng tôi khuyên bạn nên thay đổi chủ đề nếu ngay từ đầu nó không có hỗ trợ nền. Việc loại bỏ tính năng nền tùy chỉnh có thể có mục đích riêng hoặc có thể nhà phát triển chủ đề nhận thấy nó đang gây ra quá nhiều vấn đề với thiết kế.

Cách thêm hình nền vào toàn bộ trang web WordPress của bạn

Nếu chủ đề của bạn cung cấp khả năng thêm hình nền tùy chỉnh (và nhiều hình nền khác), nó sẽ giúp bạn dễ dàng hơn nhiều.

Để bắt đầu, hãy chuyển đến bảng điều khiển WordPress của bạn và nhấp vào Giao diện> Tùy chỉnh .

Click the 'Customize' link under the Appearance menu
Nhấp vào liên kết ‘Tùy chỉnh’ trong menu Giao diện

Điều đó đưa bạn đến Công cụ tùy chỉnh chủ đề WordPress , với cài đặt tùy chỉnh ở bên trái và bản xem trước trang web ở bên phải.

Tại đây, hãy tìm và nhấp vào tab Nền .

WordPress background image in editor
Hình nền WordPress trong trình chỉnh sửa

Thay vào đó, nếu bạn có thể chọn Giao diện> Nền , bạn có thể sử dụng nó cho một tuyến đường trực tiếp hơn đến cài đặt này.

Click the 'Background' link under Appearance menu
Nhấp vào liên kết ‘Nền’ trong menu Giao diện

Khu vực tùy chỉnh Nền quản lý các yếu tố nền cho toàn bộ trang web của bạn.

Nhấp vào nút Chọn Hình ảnh để tiếp tục.

Click on the 'Select Image' button
Nhấp vào nút ‘Chọn Hình ảnh’

Trong cửa sổ Chọn Hình ảnh , hãy chọn một hình ảnh phù hợp để làm hình nền cho thương hiệu và kiểu trang web của bạn. Nói chung, mẫu màu trung tính với bóng đen, trắng hoặc xám thường giúp đảm bảo rằng hầu hết văn bản và nội dung của bạn trông vẫn đẹp với nền đằng sau nó.

Sau khi bạn chọn hình ảnh của mình, hãy nhấp vào nút Chọn hình ảnh để tiếp tục.

Choose the background image
Chọn hình nền

Nền bạn đã triển khai bây giờ sẽ xuất hiện trong bản xem trước trang web.

Xem nội dung của bạn có còn nổi bật và có vẻ khả quan hay không với hình ảnh đã chọn. Đôi khi bạn có thể thấy rằng bạn cần phải hoán đổi hoàn toàn nền hoặc thay đổi những thứ như văn bản hoặc màu liên kết.

Một hình thu nhỏ nhỏ của nền cũng hiển thị trong bảng Cài đặt , cho bạn biết rằng hình ảnh đã được triển khai.

WordPress background image thumbnails
Hình thu nhỏ hình nền WordPress

Một số cài đặt bổ sung có sẵn cho nền WordPress, bao gồm cả trường Đặt trước.

Nhấp vào trường Đặt trước để thay đổi định dạng của hình ảnh bằng cách sử dụng thiết kế và căn chỉnh đặt trước.

The 'Preset' option for WordPress background images
Tùy chọn ‘Đặt trước’ cho hình nền WordPress

Bạn có thể chọn từ các cài đặt trước sau:

  • Mặc định : Điều này thường giống với Lặp lại , nhưng nó có thể phụ thuộc vào chủ đề của bạn. Cài đặt Mặc định thường hoạt động tốt nhất, nhưng nó phụ thuộc vào hình ảnh được sử dụng.
  • Màn hình lấp đầy: Cài đặt này kéo dài hình ảnh để đảm bảo rằng tất cả các phần của màn hình được che phủ, ngay cả khi nó có nghĩa là cắt hình ảnh, để hình ảnh tràn ra khỏi màn hình. Nó hoạt động tốt với nhiều hình ảnh có độ phân giải cao nhưng có thể gây ra hiện tượng nhòe với hình ảnh có độ phân giải thấp.
  • Vừa với màn hình : Tùy chọn này duy trì tỷ lệ co của ảnh gốc và cố gắng sử dụng tỷ lệ đó để vừa với hình ảnh trên màn hình hiện tại. Nó làm rất tốt việc giữ cho hình ảnh gần với trạng thái ban đầu của nó nhưng có thể không bao phủ tất cả các khu vực hậu cảnh.
  • Lặp lại: Điều này sử dụng các phần của chức năng Fill Screen , mở rộng và kéo dài hình ảnh, nhưng nó cũng lặp lại hình ảnh khi nó không thể bao phủ thành công toàn bộ màn hình. Đối với các mẫu, điều này thường trông rất tuyệt. Nhưng đối với một số hình ảnh, nó có thể tạo ra một ranh giới cứng giữa các hình ảnh lặp lại.
  • Tùy chỉnh: Cài đặt này cung cấp cho bạn quyền kiểm soát nhiều nhất đối với nền, cung cấp một số tùy chọn để tùy chỉnh kích thước hình nền WordPress, như cách nó lặp lại trên trang, kéo dài hoặc di chuyển khi người dùng cuộn.

Không có quy tắc nào về việc Cài đặt sẵn nào hoạt động tốt nhất vì hình ảnh có các kích thước, độ phân giải và chi tiết khác nhau. Do đó, tốt nhất bạn nên bắt đầu với cài đặt trước Mặc định và sau đó kiểm tra từng cài đặt trước khác để xem cái nào trông phù hợp nhất cho hình nền của bạn.

Nếu vẫn không thành công, hãy chuyển đến cài đặt Tùy chỉnh để thực sự cụ thể với các lựa chọn của bạn.

'Fill Screen' preset for WordPress Background Images
Cài đặt trước ‘Fill Screen’ cho hình nền WordPress

Cài đặt sẵn Fit to Screen không hoàn toàn phù hợp với hình ảnh này, chủ yếu là do hình ảnh gốc dài hơn nhiều so với chiều rộng, để lại một khoảng không gian đáng kể ở bên phải. Tôi có thể thay đổi Vị trí Hình ảnh thành Trung tâm , nhưng rất có thể nó sẽ để lại khoảng trắng ở hai bên.

The 'Fit to Screen' preset
Cài đặt trước ‘Vừa với màn hình’

Cài đặt tiếp theo cần xem xét là công cụ Vị trí hình ảnh . Nhấp vào mũi tên để di chuyển hình nền của bạn xung quanh, điều chỉnh hướng để đặt tiêu điểm của hình ảnh về phía trung tâm hoặc lấp đầy màn hình.

Giống như cài đặt Cài đặt sẵn, công cụ Vị trí hình ảnh yêu cầu một quá trình đoán và kiểm tra tác phẩm của bạn, vì hình ảnh gốc và nội dung của nó quyết định nó trông như thế nào.

WordPress background image position
Vị trí hình nền WordPress

Tiếp theo, có một trường hộp kiểm để tạo hình nền Cuộn với Trang .

Khi hộp này được chọn, hình nền dính vào nội dung nền trước và cuộn cùng với người dùng khi người đó di chuyển lên hoặc xuống trên trang.

Enabling the 'Scroll with Page' option
Bật tùy chọn ‘Cuộn với Trang’

Bỏ chọn hộp đó có xu hướng thay đổi hướng chung của hình nền, tuy nhiên, tính năng nổi trội của nó là yêu cầu nền vẫn tĩnh trong khi người dùng cuộn xuống trang.

Các mục nội dung nền trước (như các sản phẩm trong trường hợp này) lướt trên ảnh nền, tạo ra một hiệu ứng hấp dẫn.

Disabling the 'Scroll with Page' option
Tắt tùy chọn ‘Cuộn với Trang’

Làm việc với cài đặt sẵn tùy chỉnh

Khi chọn một thứ gì đó ngoài cài đặt trước Tùy chỉnh , bạn sẽ không nhận được nhiều cài đặt bổ sung để định cấu hình.

Tuy nhiên, việc chọn cài đặt trước Tùy chỉnh sẽ mở ra một số trường khác cần xem xét.

Ví dụ: bạn có thể chọn Lấp đầy màn hình hoặc Vừa với màn hình , sau đó kết hợp ảnh đó với hình nền lặp lại hoặc không lặp lại, kết hợp các phần tử của giá trị đặt trước từ trước đó. Và bạn vẫn nhận được tùy chọn Cuộn với Trang .

Presets and Image Sizes for background images
Cài đặt sẵn và Kích thước hình ảnh cho hình nền

Xem liệu có thể sử dụng hình ảnh gốc mà không có bất kỳ chỉnh sửa hoặc cài đặt nào hay không. Đôi khi ảnh gốc là một kết hợp gần như hoàn hảo để dùng làm nền, vậy tại sao lại làm rối tung những thứ đã sẵn sàng?

Tuy nhiên, kích thước của nó cũng có thể quá lớn đối với trang web của bạn hoặc có thể tỷ lệ khung hình không hoàn toàn phù hợp. Bất kể, chúng tôi khuyên bạn nên thử nghiệm với cài đặt này để tìm hiểu xem nó có phù hợp với bạn hay không.

Setting the background image size
Đặt kích thước hình nền

Sau khi bạn quyết định cài đặt nền hoàn hảo của mình (đối với hướng dẫn này, tùy chọn Mặc định trông đẹp mắt), hãy nhấp vào nút Xuất bản để hiển thị các thay đổi trên trang web của bạn.

Hit the 'Publish' button
Nhấn vào nút ‘Xuất bản’

Truy cập giao diện người dùng của trang web của bạn để xem hình nền đang hoạt động.

Trang chủ là một nơi tuyệt vời để bắt đầu. Bạn sẽ nhận thấy rằng khu vực tiêu đề và hình ảnh chào mừng không có nền. Đó là bởi vì hình ảnh chào mừng ở đầu trang đã bao phủ toàn bộ phần ngang của màn hình dưới dạng hình ảnh anh hùng toàn màn hình.

Đối với tiêu đề và menu, bạn sẽ học cách định cấu hình các nền đó trong một số hướng dẫn sau.

Seeing the WordPress background image
Nhìn thấy hình nền WordPress

Hãy nhớ rằng nền WordPress tùy chỉnh chung sẽ kích hoạt trên mọi trang và bài đăng trên trang web của bạn. Đó là một tính năng toàn cầu dành cho những ai muốn một cách nhanh chóng để xây dựng thương hiệu cho trang web của họ và thêm một số điểm nổi bật.

Ví dụ: truy cập trang Cửa hàng trên trang web này sẽ thấy thông tin cơ bản đằng sau việc lựa chọn sản phẩm.

The WordPress background image in another page
Hình nền WordPress trên một trang khác

Cách đặt màu nền thay vì hình ảnh cho toàn bộ trang web của bạn

Quá trình kích hoạt màu nền trên toàn bộ trang web của bạn không khác nhiều so với khi bạn bật hình nền. Bắt đầu bằng cách đi tới Giao diện> Nền trong bảng điều khiển, sau đó tìm trường Màu nền .

Nhấp vào nút Chọn Màu để mở thêm cài đặt để chọn và chuyển đổi các màu khác nhau cho nền của bạn.

 

Selecting a solid color as background
Chọn một màu đồng nhất làm nền

Bảng màu cung cấp nhiều tùy chọn để bạn quyết định chọn màu. Đầu tiên là nhập hoặc dán mã màu. Tất cả các màu đều có mã màu duy nhất và bạn có thể tìm thấy những màu này và mã liên quan của chúng bằng cách tìm kiếm nhanh trên internet.

Tùy chọn khác là nhấp vào xung quanh bảng màu để tìm màu hoàn hảo cho nền. Họ thậm chí còn có các mẫu màu phổ biến ở phía dưới cùng của bảng điều khiển nếu bạn muốn chọn một trong những màu đơn giản hơn.

Để kích hoạt màu nền, hãy đảm bảo màu được chọn và hiển thị trong bản xem trước Chọn màu .

Choosing a 'Background Color'
Chọn ‘Màu nền’

Bạn sẽ thấy nền màu trong bản xem trước WordPress Customizer. Nếu không, điều đó rất có thể có nghĩa là bạn đã cài đặt nền hình ảnh đè lên nền màu.

Tất cả những gì bạn phải làm để hiển thị nền màu là nhấp vào nút Xóa bên dưới bản xem trước Hình nền .

Remove WordPress background image
Xóa hình nền WordPress

Bây giờ màu sắc xuất hiện trong toàn bộ trang web của bạn, đằng sau nội dung. Giống như bạn làm với nền hình ảnh, bạn nên xem qua trang web của mình để đảm bảo rằng tất cả văn bản, hình ảnh và liên kết vẫn hiển thị với nền mới.

Previewing a solid orange WordPress background
Xem trước nền WordPress màu cam chắc chắn

Cách thêm hình nền vào trang WordPress

Nhưng điều gì sẽ xảy ra nếu bạn muốn chèn một hình ảnh trên WordPress để hiển thị dưới dạng nền trên một trang WordPress duy nhất? Phần trước đã phác thảo các cài đặt chung cho hình nền trên toàn trang web.

Hãy xem hướng dẫn bằng video của chúng tôi để thêm hình nền vào các trang, bài đăng và khối nội dung đơn WordPress

Nhiều người thích thêm hình nền vào trang của họ vì bạn có thể kết hợp một chủ đề hoặc cảm nhận nhất định vào một trang áp dụng cho nội dung. Ví dụ: trang Giới thiệu về chúng tôi có thể có thông tin cơ bản về Los Angeles nếu công ty ở LA. Hoặc phần giới thiệu sách của tác giả có thể bao gồm nền phù hợp với chủ đề của câu chuyện.

Trong phần này, chúng tôi sẽ hướng dẫn cách thêm hình nền WordPress vào trang bằng một phương pháp chính và một vài lựa chọn thay thế nếu bạn không ngại chi tiền cho một plugin hoặc chọn một trình tạo trang.

Lưu ý: Không quan trọng bạn sử dụng Gutenberg hay Classic WordPress Editor.

Đối với nền dành riêng cho từng trang, các phương pháp này dường như hoạt động tốt nhất:

  • Thêm nền trang duy nhất với CSS tùy chỉnh.
  • Sử dụng một plugin cho phép tạo nền cho từng trang.
  • Kết hợp nền tùy chỉnh trên mỗi trang với sự trợ giúp của trình tạo trang.

Việc thêm CSS tùy chỉnh của riêng bạn vào một trang bao gồm việc tìm ID lớp cho trang đó và gọi URL nền, trong mô-đun CSS tùy chỉnh, trong cài đặt trang WordPress. May mắn thay, không khó để tìm ra ID lớp của một trang, vì chúng tôi có thể tra cứu nó, hoặc bạn có thể đã biết nó là gì.

Truy cập trang trên trang web của bạn, nơi bạn chỉ muốn làm nền cho trang đó.

Adding a page specific WordPress background image
Thêm hình nền WordPress cụ thể cho một trang

Nhấp chuột phải vào bất kỳ đâu trên trang để hiển thị menu thả xuống trên màn hình của bạn. Chọn công cụ Kiểm tra ở cuối trình đơn thả xuống.

Mô-đun Kiểm tra hiển thị mã hóa từ chính trang đó, cùng với CSS tùy chỉnh được sử dụng trên toàn cầu cho trang web của bạn. Đó là một khu vực hữu ích để định vị thông tin về một trang hoặc bài đăng trên trang web của bạn.

Inspecting a webpage
Kiểm tra trang web

Hộp Kiểm tra có các dòng mã từ trang, nhưng chúng tôi chỉ quan tâm đến thẻ lớp được chỉ định cụ thể cho trang này. Để làm rõ, mỗi trang WordPress có một thẻ lớp làm mã nhận dạng.

Sử dụng chức năng tìm kiếm và nhập nội dung hoặc class để body vị dòng mã có thẻ page-id .

Trong trường hợp này, ID là page-id-352 , nhưng ID của bạn sẽ khác.

Bạn muốn sao chép toàn bộ phần mã với từ khóa page-id-# , bao gồm cả dấu gạch ngang.

Finding the page ID in WordPress
Tìm ID trang trong WordPress

Với ID trang được lưu ở đâu đó để sử dụng trong vài bước tiếp theo, hãy quay lại trang tổng quan WordPress của bạn và nhấp vào Giao diện> Tùy chỉnh .

Go to the theme customizer
Đi tới công cụ tùy chỉnh chủ đề

Chọn tab CSS bổ sung trong WordPress Customizer.

'Additional CSS' section in the Customizer
Phần ‘CSS bổ sung’ trong Customizer

Phần này cho phép bạn nhập hoặc dán bất kỳ CSS tùy chỉnh nào mà bạn muốn để thao tác các mục trên toàn bộ trang web của mình. Trong trường hợp này, nó có ích khi ghi đè hình nền mặc định và tạo hình nền cho một trang chứ không phải các trang khác.

Dán mã sau vào trường CSS bổ sung, nhưng hãy nhớ thay thế “ # ” bằng số thực mà bạn đã lấy làm ID trang từ các bước trước. Ngoài ra, bạn phải đặt URL hình ảnh thực thay cho văn bản điền mà chúng tôi có trong đó ( http://YOURIMAGEURL.jpeg ).

body.page-id-# { background-image: url("http://YOURIMAGEURL.jpeg"); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }

Đối với ví dụ này, ID trang được điền là 352 và chúng tôi có một URL hình nền được dán từ Thư viện phương tiện của chúng tôi.

Nếu cần, vui lòng thay đổi cài đặt nền tùy chỉnh nếu bạn gặp sự cố khi khớp hình nền của màn hình. Ví dụ: bạn có thể muốn sửa đổi các yếu tố như kích thước, tệp đính kèm hoặc vị trí của hình nền WordPress. Nếu không, hãy để nguyên chúng như trong mã ví dụ.

Adding custom CSS to a WordPress site
Thêm CSS tùy chỉnh vào trang WordPress

Nhấp vào nút Xuất bản khi bạn hài lòng với CSS tùy chỉnh.

Click the 'Publish' button
Nhấp vào nút ‘Xuất bản’

Với CSS tùy chỉnh đó, trang được chỉ định bao gồm hình nền bằng cách sử dụng cài đặt định vị và kích thước của mã. Không có trang nào khác trên trang web của bạn sẽ hiển thị cùng một nền trừ khi bạn lặp lại CSS cho các ID trang khác nhau.

The background image now shows on the page
Hình nền bây giờ hiển thị trên trang

Như đã đề cập trước đây, các tùy chọn khác của bạn để thêm nền duy nhất vào trang WordPress bao gồm sử dụng trình tạo trang hoặc plugin cho phép tạo hình nền trên các trang riêng lẻ.

Tuy nhiên, cách rẻ nhất và nhanh nhất để đặt hình nền trên một trang riêng lẻ là sử dụng phương pháp mã CSS được hiển thị ở trên.

Cách thêm hình nền vào bài đăng WordPress

Hầu hết các hình nền được chèn vào phía sau các trang WordPress hoặc mỗi trang trên toàn bộ trang web.

Tính năng nền tùy chỉnh mặc định trong WordPress không liên quan gì đến các bài đăng riêng lẻ, ngoài thực tế là nền này cũng sẽ hiển thị cho các bài đăng trên blog. Điều đó không lý tưởng cho tất cả các tổ chức vì các bài đăng trên blog khác nhau có thể có các chủ đề khác nhau.

Những blog như vậy có thể được hưởng lợi từ những hình ảnh nền độc đáo của riêng họ. Tuy nhiên, các bài đăng trên WordPress không có cài đặt hình nền của riêng chúng, khiến nó phức tạp hơn một chút.

Do đó, chúng tôi có một số tùy chọn cần xem xét khi thêm hình nền vào bài đăng (bạn sẽ nhận thấy chúng giống như khi làm việc với hình nền dành riêng cho trang):

  • Chèn hình nền bằng CSS tùy chỉnh.
  • Sử dụng một plugin để triển khai nền trên các bài đăng riêng lẻ.
  • Cài đặt trình tạo trang trực quan cho hình nền của bài đăng.

Giống như phần trước về nền trang duy nhất, bạn có thể thêm nền cho từng bài cụ thể bằng cách sử dụng trình tạo trang hoặc plugin.

Thấy rằng việc tạo nền cụ thể cho bài đăng không khác nhiều so với nền cụ thể cho từng trang, chúng tôi sẽ chỉ đề cập ngắn gọn về các bước để xử lý quy trình này cho một bài đăng riêng lẻ.

Khi sử dụng CSS tùy chỉnh để triển khai nền cụ thể cho bài đăng, bạn sử dụng mã giống như cách bạn làm cho nền trang, với một điểm khác biệt: bạn phải tìm ID bài đăng thay vì ID trang.

Do đó, hãy mở giao diện người dùng của một bài đăng WordPress mà bạn muốn chèn nền.

WordPress background image for posts
Hình nền WordPress cho bài viết

Nhấp chuột phải vào bài đăng và chọn tùy chọn Kiểm tra. Hoàn thành tìm kiếm trong mã để tìm phần lớp nội dung trong mã. Tìm phần postid-# — đó là ID bài đăng bạn cần chèn vào CSS tùy chỉnh.

find post id

Bạn sẽ nhận thấy rằng định dạng cho ID bài đăng hơi khác trong ví dụ này so với ID trang, trong đó thẻ postid-# không có dấu gạch ngang giữa “bài đăng” và “id” giống như với page-id-# . Ngoài ra, đây không phải là những quy tắc cứng. Bạn có thể tìm thấy các định dạng khác nhau cho các thẻ.

Bây giờ, hãy chuyển đến bảng điều khiển WordPress của bạn và nhấp vào Giao diện> Tùy chỉnh . Điều hướng đến tab CSS bổ sung .

Gio to 'Additional CSS' section
Gio đến phần ‘CSS bổ sung’

Dán mã sau vào trường CSS tùy chỉnh đó:

body.postid-# { background-image: url("http://YOURIMAGEURL.jpeg"); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }

Sau đó, lấy số ID bài đăng mà bạn đã tìm thấy từ bài đăng mong muốn trước đó. Thay thế “#” trong mã CSS bằng số. Ngoài ra, hãy thay đổi văn bản http://YOURIMAGEURL.jpeg bằng URL thực của hình nền bạn muốn hiển thị, giữ dấu ngoặc kép xung quanh nó.

Adding the custom CSS for a specific post id
Thêm CSS tùy chỉnh cho mộtbài đăng cụ thể

Đảm bảo rằng bạn nhấn nút Xuất bản trước khi rời khỏi tab CSS bổ sung, vì điều này sẽ lưu các thay đổi của bạn trên trang web và cho phép bạn xem nền trên giao diện người dùng.

Hit the 'Publish' button to save changes
Nhấn nút ‘Xuất bản’ để lưu các thay đổi

Với những thay đổi CSS đó, bây giờ bạn có thể quay lại giao diện người dùng của bài đăng trên blog WordPress đó để xem nền mới. Kiểm tra các trang và bài đăng blog khác trên trang web của bạn để xem không có trang nào khác có nền trừ khi bạn triển khai cùng một mã cho các ID bài đăng đó.

See the background image on the post
Xem hình nền trên bài

Cách thêm hình nền vào một khối nội dung riêng lẻ

Các khối nội dung riêng lẻ của trình soạn thảo khối WordPress Gutenberg cho phép nhiều tùy chọn hiển thị nội dung, bao gồm hộp văn bản, hình ảnh và thư viện.

Những thứ này chia nhỏ nội dung của bạn thành các phần riêng biệt. Vì vậy, bạn có thể thêm màu nền hoặc hình ảnh chỉ cho khối đó.

Ví dụ: giả sử bạn đang viết một bài đăng trên blog về tình trạng của ngành quần áo bán lẻ. Bạn muốn kết thúc hoặc bắt đầu bài đăng bằng lời kêu gọi hành động để mọi người đăng ký hội thảo trên web tiếp theo của bạn. Sẽ rất hợp lý nếu phần này nổi bật bằng cách sử dụng màu nền hoặc hình ảnh.

Thật không may, trình chỉnh sửa khối của WordPress không cung cấp cài đặt toàn diện, nơi bạn có thể thêm nền vào bất kỳ khối nào. Tuy nhiên, một số khối có tùy chọn kết hợp nền màu.

Ngoài ra còn có một khối, được gọi là khối Bìa, là khối gần nhất mà chúng ta có thể thêm hình nền cho một khối trong bài đăng hoặc trang. Bìa cho phép bạn phủ văn bản và một số mục phương tiện, làm cho nó phù hợp với mục tiêu cuối cùng của chúng tôi.

Dưới đây là các kỹ thuật sử dụng để thiết lập hình ảnh hoặc nền màu cho một khối WordPress riêng lẻ.

Đặt nền màu cho một khối

Cách đơn giản nhất để thêm sự sống động cho một khối duy nhất là thêm nền màu. Nó không lạ mắt như nền hình ảnh, nhưng nền màu thực sự là loại nền duy nhất trong trình chỉnh sửa khối WordPress có sẵn cho các khối tiêu chuẩn.

Lưu ý: Một số khối không có bất kỳ cài đặt nền nào. Nếu đúng như vậy, tốt nhất bạn nên sử dụng một khối Bìa và chồng các khối khác lên trên nó, như được trình bày sâu hơn trong bài viết này.

Ví dụ, khối Đoạn văn có cài đặt để kích hoạt nền màu.

Để bật tính năng này, hãy chọn khối, sau đó tìm Cài đặt màu trong tab Chặn ở phía bên phải.

Changing the background 'Color settings'
Thay đổi nền ‘Cài đặt màu’

Phần này hiển thị các trường Màu văn bản và Màu nền .

Đi tới khu vực Màu nền và chọn một màu từ danh sách các tùy chọn có sẵn. Bạn cũng có thể chọn liên kết Màu tùy chỉnh để chèn mã màu của riêng mình hoặc chọn một màu duy nhất.

Như bạn có thể thấy, khi cài đặt đó được thực hiện, nền của khối Đoạn văn sẽ chuyển sang màu khác — trong trường hợp này là màu xanh lam.

Choosing a background color
Chọn màu nền

Thêm nền màu vào bất kỳ khối WordPress nào

Như đã đề cập trước đây, không phải tất cả các khối WordPress đều có tính năng nền tích hợp này. Bạn nên làm gì nếu bạn muốn tạo một thư viện hoặc một số phần tử khối khác, không cung cấp tùy chọn nền?

Giải pháp nhanh nhất là sử dụng tính năng Khối nhóm trong WordPress.

Để làm như vậy, hãy chọn nhiều khối đã có trong nội dung của bạn. Đối với ví dụ này, tôi sẽ chọn đồng thời cả khối Đoạn văn và khối Thư viện .

Nhấp vào biểu tượng hình vuông xếp chồng lên nhau trên menu xuất hiện.

The 'Our Team' section on a page
Phần ‘Nhóm của chúng tôi’ trên một trang

Chọn tùy chọn Nhóm trong menu thả xuống.

Thao tác này lấy bất kỳ khối nào bạn hiện đã chọn và kết hợp chúng thành một nhóm, cho phép bạn di chuyển hoặc chỉnh sửa tất cả chúng cùng nhau thay vì các khối riêng biệt.

Group the sections as a block
Nhóm các phần thành một khối

Điều này đặt Nhóm làm khối riêng của nó. Nó có nghĩa là bạn có thể chuyển đến tab Cài đặt khối ở phía bên phải của trang để tìm cài đặt của nó.

Tìm tab Cài đặt Màu và nhấp vào đó.

Change the 'Color settings' for the grouped block
Thay đổi ‘Cài đặt màu’ cho khối được nhóm

Giống như khối Đoạn văn tiêu chuẩn, khối Nhóm cũng có tính năng Màu nền.

Chọn màu bạn thích nhất cho tình huống này để thấy rằng mọi thứ trong nhóm đó bây giờ phải có nền màu đó.

Điều tuyệt vời về khối Nhóm là nó có một khối khác không có tính năng nền (như khối Thư viện) và cho phép bạn kích hoạt nền cho nó.

Setting the background color as blue
Đặt màu nền là xanh lam

Thêm nền hình ảnh vào một khối WordPress

Các khối WordPress nằm trong cả trang và bài đăng. Do đó, chúng ta có thể thực hiện chiến thuật này trong một trong hai. Bạn chỉ có thể chèn bất kỳ nội dung nào bên trên nền của khối được nhóm — hoặc chỉ trong một khối WordPress.

Để bắt đầu quá trình này, hãy nhấp vào nút Thêm Khối hoặc biểu tượng “ + ” và tìm kiếm Khối bìa .

Chọn khối đó để chèn vào bài đăng hoặc trang của bạn.

Adding a cover image block
Thêm khối ảnh bìa

Sau đó, bạn phải nhấp vào nút Tải lên hoặc Chọn Phương tiện , nút này cho phép bạn tìm kiếm những hình ảnh mà bạn có thể sử dụng làm nền.

Click on the 'Select Media' button
Nhấp vào nút ‘Chọn phương tiện’

Chọn hình ảnh bạn muốn và nhấp vào nút Chọn .

Choose the image and click the 'Select' button
Chọn hình ảnh và nhấp vào nút ‘Chọn’

Bây giờ bạn có thể xem hình ảnh đó làm nền cho khối Cover.

Vui lòng nhấp vào khối đó để bắt đầu nhập nội dung đoạn văn, vì tính năng chính là để chồng văn bản.

Điều tuyệt vời về khối Bìa là nó cung cấp một số tùy chọn định dạng, cho phép bạn chuyển từ tiêu đề sang định dạng đoạn văn trong vài giây.

WordPress background image in section
Hình nền WordPress trong phần

Để thêm các khối khác trên nền đó, hãy nhấp vào nút biểu tượng “ + ” trong chính khối Bìa. Bạn có thể phải nhấn phím Enter một lần để hiển thị nút.

Click the plus sign within the block section
Nhấp vào dấu cộng trong phần khối

Giống như thêm một khối nội dung trong một bài viết thông thường, khối Bìa cho phép bạn cuộn qua tất cả các khối nội dung tiềm năng trong WordPress.

Điều đó có nghĩa là bạn có thể đặt Hình ảnh, Thư viện, Cột hoặc bất kỳ loại khối WordPress nào trong khối Bìa, làm cho nó trở thành giải pháp lý tưởng cho nền hình ảnh với một khối riêng lẻ.

search for block
tìm kiếm khối

Đối với ví dụ này, tôi đã chèn một hình ảnh và định dạng nó một chút để làm cho nó trông có thể chấp nhận được trong khối Bìa.

Mỗi khối bạn đặt trước nền có cài đặt tùy chỉnh riêng trong tab Khối bên phải, vì vậy hãy cân nhắc chỉnh sửa chúng khi bạn thả chúng vào khối Bìa.

An image block example with WordPress background image
Một ví dụ về khối với hình nền WordPress

Tại một số điểm, bạn có thể muốn chỉnh sửa hoặc tùy chỉnh chính hình nền. Nếu đúng như vậy, hãy chọn Khối che, sau đó chuyển đến tab Cài đặt khối ở phía bên phải của trang.

Điều này cho thấy vô số cài đặt để điều chỉnh cho hình nền, bao gồm những điều sau:

  • Bôi cảnh đa được sửa chưa
  • Nền lặp lại
  • Bộ chọn tiêu điểm
  • Kích thước
  • Lớp phủ
  • Độ mờ
  • Nâng cao
Changing the block settings
Thay đổi cài đặt khối

Một trong những cài đặt quan trọng hơn cần xem xét là ở cuối bảng Cài đặt khối .

Cuộn xuống để tìm phần Lớp phủ . Mở phần này để hiển thị danh sách các lớp phủ màu và các tùy chọn để làm cho các màu đó đồng nhất hoặc chuyển màu.

Đây là một tùy chọn tuyệt vời để thay đổi một chút màu nền của bạn để phù hợp với thương hiệu của bạn hoặc làm nổi bật nội dung nền trước của bạn. Bạn cũng có thể điều chỉnh Độ mờ để đảm bảo rằng lớp phủ màu không lấn át hoàn toàn nền.

Changing the block's background color
Thay đổi màu nền của khối

Thay vào đó, hãy xem xét plugin Gutenberg Blocks của Stackable Page Builder để mở ra các công cụ nâng cao hơn cho hình nền trên các khối riêng lẻ.

Cách đặt hình nền đằng sau tiêu đề WordPress

Cho đến bây giờ, chúng ta đã nói về cách thêm hình nền vào toàn bộ trang web WordPress của bạn, cùng với các phương pháp cho hình nền trên các khu vực cụ thể như khối, bài đăng và trang WordPress. Nhưng còn khu vực chứa menu và logo của bạn thì sao?

Đôi khi, nền đằng sau tiêu đề của bạn là tất cả những gì bạn cần.

Đặt hình nền cho tiêu đề sẽ tạo thêm cảm giác mới cho trang web của bạn, đặc biệt nếu có một kỳ nghỉ đang diễn ra hoặc một đợt giảm giá lớn nào đó mà bạn có thể làm nổi bật.

Để bắt đầu, hãy chuyển đến Giao diện> Tiêu đề trong bảng điều khiển WordPress.

Lưu ý: Bạn cũng có thể tìm cài đặt tiêu đề bằng cách đi tới phần Giao diện> Tùy chỉnh> Tiêu đề .

WordPress Dashboard > Appearance > Header
Bảng điều khiển WordPress> Giao diện> Tiêu đề

Bây giờ bạn sẽ thấy bản xem trước trang chủ của mình ở bên phải màn hình, cùng với cài đặt Tiêu đề ở bên trái của màn hình.

Mô-đun Header giải thích các kích thước ưa thích cho bất kỳ hình nền tiêu đề nào, vì vậy bạn có thể chọn cắt bớt hình ảnh của mình trước khi tải lên hoặc đợi cho đến khi bạn nhận được hình ảnh trên trang tổng quan WordPress của mình.

Dưới tiêu đề đầu trang Hiện tại , nhấp vào nút Thêm hình ảnh mới .

Click the 'Add new image' button
Nhấp vào nút ‘Thêm hình ảnh mới’

Tiêu đề rất phức tạp vì bạn muốn đảm bảo rằng tất cả các liên kết và yếu tố văn bản (không kể đến biểu trưng của bạn) trông rõ ràng như pha lê trên đầu hình ảnh nền.

Do đó, chúng tôi khuyên bạn nên thử nghiệm các hình ảnh nền và xem xét các hình ảnh có màu sắc và hoa văn đồng nhất hơn. Họ sẽ không làm khó bạn khi nhìn thấy các mục và biểu tượng menu của bạn.

Chọn một hình ảnh lý tưởng cho bạn, sau đó nhấp vào nút Chọn và Cắt để tiếp tục.

Choose an image
Chọn một hình ảnh

Chúng tôi thích công cụ xén tích hợp sẵn vì nó tự động cung cấp kích thước phù hợp cho hình nền tiêu đề. Điều này sẽ đẩy nhanh quá trình so với việc chỉnh sửa ảnh trước đó bằng Photoshop.

Di chuyển hộp cắt ảnh đến vị trí có ý nghĩa nhất cho hình nền của bạn. Hãy thoải mái kéo một trong các góc nếu bạn cần cắt ảnh nhiều hơn.

Khi bạn đã có hình ảnh cắt hoàn hảo, hãy nhấp vào nút Cắt hình ảnh .

Crop the image
Cắt hình ảnh

Hình nền tiêu đề được kích hoạt ngay lập tức trong bản xem trước của WordPress Customizer, giúp bạn thấy chính xác những gì khách hàng của bạn sẽ nhìn với loại hình nền này.

Bạn sẽ nhận thấy rằng hình nền của tiêu đề không tràn vào phần còn lại của nội dung trang. Thay vào đó, nó vẫn nằm trong tiêu đề, đằng sau bất kỳ thứ gì hiện đang nằm ở đó, chẳng hạn như biểu trưng, dòng giới thiệu, menu và thanh tìm kiếm.

Select the header background image
Chọn hình nền tiêu đề

Một tùy chọn khác cho nền tiêu đề của bạn là tải lên một số hình ảnh và xoay chúng ngẫu nhiên, thêm một chút rực rỡ và ngạc nhiên cho trang web của bạn bất cứ khi nào người dùng truy cập vào trang chủ.

Để làm cho điều này hoạt động, trước tiên bạn phải có một số hình ảnh được tải lên hộp cài đặt Tiêu đề. Nhấp vào nút Thêm Hình ảnh Mới để hoàn tất quá trình đó.

Sau khi bạn có nhiều hình ảnh, hãy nhấp vào nút Ngẫu nhiên hóa các tiêu đề được tải lên để kích hoạt tính năng hiển thị nền tiêu đề khác nhau mọi lúc.

Adding more headers
Thêm nhiều tiêu đề hơn

Bạn có thể nhận thấy rằng việc thêm hình nền vào tiêu đề khiến bạn khó thấy một số mục trong tiêu đề, như menu hoặc giỏ hàng của bạn.

Nếu đúng như vậy, chúng tôi khuyên bạn không nên xóa ngay hình ảnh tiêu đề. Thay vào đó, hãy chuyển đến trường Màu văn bản và Màu liên kết để xem liệu có bất kỳ điều chỉnh nào có thể hữu ích hay không.

Cài đặt Màu văn bản kiểm soát bất kỳ văn bản nào trong tiêu đề không được siêu liên kết đến một trang bên trong hoặc bên ngoài khác. Nhiều khi điều đó chỉ có nghĩa là dòng giới thiệu, nếu bạn có, nhưng đôi khi bạn có thể có các mục khác như tổng giỏ hàng hoặc các biểu tượng mạng xã hội cũng thay đổi màu sắc theo văn bản.

Hộp còn lại dành cho Màu Liên kết. Rất có thể bạn sẽ thấy nhiều thay đổi hơn khi điều chỉnh màu này vì nó bao gồm tất cả các mục menu được liên kết với các trang khác.

Text color over the WordPress background image
Màu văn bản trên hình nền WordPress

Đây là một ví dụ về những gì sẽ xảy ra khi bạn chọn một màu mới cho cả Màu văn bản và Màu liên kết . Bạn có thể thấy rằng dòng giới thiệu và tên trang web đã thay đổi, menu đổi thành màu trắng và hầu hết các yếu tố tiêu đề khác như biểu tượng giỏ hàng cũng vậy.

Checking the header elements
Kiểm tra các phần tử tiêu đề

Đối với những người không quan tâm đến việc sử dụng hình nền cho tiêu đề của bạn, bạn cũng có tùy chọn sử dụng nền đồng màu.

Đối với điều này, hãy tìm trường Màu nền trong cùng một khu vực Cài đặt tiêu đề.

Nhấp vào nút Chọn Màu và chọn từ bảng màu để xem kết quả xem trước. Bạn cũng có thể thay đổi màu văn bản khi sử dụng màu nền.

Setting a background color
Đặt màu nền

Sau khi kiểm tra những gì hoạt động tốt nhất cho tiêu đề của bạn và quyết định chọn hình nền hoàn hảo cho tiêu đề đó, hãy nhấp vào nút Xuất bản cho tất cả để xem các thay đổi.

Và nếu bạn gặp bất kỳ sự cố nào khi hiển thị các thay đổi trên giao diện người dùng, hãy xem xét xóa bộ nhớ cache WordPress của bạn.

Click the 'Publish' button
Nhấp vào nút ‘Xuất bản’

 

Cách thêm hình nền vào danh mục và trang đăng nhập WordPress

Cách thêm hình nền vào danh mục WordPress

Trang lưu trữ danh mục WordPress tổng hợp tất cả các bài đăng được liệt kê trong một danh mục nhất định. Ví dụ: nhiều trang web có danh mục cho các loại bài đăng tùy chỉnh như Sản phẩm. Theo mặc định, tất cả các trang web WordPress đều có danh mục cho các bài đăng. Những người bạn không phân loại được gắn thẻ với danh mục Chưa được phân loại.

Vì các trang lưu trữ danh mục tổng hợp nội dung tương tự, nên việc bao gồm hình nền có liên quan trên các trang đó để giới thiệu danh mục tốt hơn là điều hợp lý. Ví dụ: bạn có thể có nền định hướng công nghệ cho danh mục Thiết kế web hoặc nền có hoa văn hình vỏ sò hoặc bãi biển cho danh mục Du lịch.

Phương pháp CSS tùy chỉnh (được nêu bên dưới) là lựa chọn rẻ nhất. Tuy nhiên, bạn cũng có thể xem xét các trình tạo trang và trình cắm khác nhau để xem chúng cho phép tạo nền trên các trang danh mục.

Để hoàn thành tác vụ này với CSS, hãy mở bảng điều khiển WordPress của bạn và chuyển đến Giao diện> Tùy chỉnh .

Chọn tab CSS bổ sung để mở mô-đun cho phép nhập CSS của riêng bạn.

Go to the 'Additional CSS' section
Chuyển đến phần ‘CSS bổ sung’

Mở một trong các trang lưu trữ danh mục của bạn trên trang web WordPress của bạn. Thông thường, các trang này có URL như sau: http://yourwebsitedomain.com/category/travel . Bạn cần thay đổi phần du lịch thành bất kỳ danh mục nào bạn có trên trang web của riêng mình và chuyển phần trang web của bạn thành tên miền thực của bạn.

Nhấp chuột phải vào bất kỳ đâu trên trang danh mục và nhấp vào Kiểm tra. Nó sẽ hiển thị công cụ Kiểm tra trong trình duyệt của bạn, với mã của trang đó được hiển thị cho bạn xem.

Right click on the webpage and select 'Inspect'
Nhấp chuột phải vào trang web và chọn ‘Kiểm tra’

Tìm kiếm “body” hoặc “class” để định vị lớp CSS cho các trang danh mục, cùng với lớp cho danh mục này nói riêng.

Đối với tình huống này, lớp CSS của chúng tôi là “danh mục du lịch”, vì tôi có một danh mục có tên “Du lịch” trên trang web.

Lưu thẻ CSS để sử dụng sau này.

Note down the category listed
Ghi lại danh mục được liệt kê

Sau đó, điều hướng trở lại phần CSS bổ sung trong WordPress Customizer của bạn.

Dán mã sau vào hộp đó, chuyển category-travel của riêng bạn và đặt URL hình ảnh thực vào vị trí có nội dung http://YOURIMAGEURL.jpeg .

body.category-travel { background-image: url("http://YOURIMAGEURL.jpeg"); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }
Add the custom coding for WordPress background image
Thêm mã tùy chỉnh cho hình nền WordPress

Nhấp vào nút Xuất bản để lưu các thay đổi.

Adding the 'Custom CSS' code
Thêm mã ‘CSS tùy chỉnh’

Cuối cùng, quay lại trang lưu trữ danh mục trên giao diện người dùng của trang web WordPress của bạn. Bây giờ nó sẽ hiển thị cùng một trang trước đó, nhưng với nền được chỉ định trong mã CSS. Nếu bạn gặp bất kỳ sự cố nào với định dạng ảnh nền WordPress, hãy chuyển trở lại bảng điều khiển CSS bổ sung để điều chỉnh các yếu tố như vị trí, kích thước và chức năng lặp lại của nền.

Go to the category page
Đi tới trang danh mục và xem hình nền

Cách thêm hình nền vào trang đăng nhập WordPress của bạn

Trang đăng nhập WordPress có hai phiên bản: một dành cho người dùng thường xuyên truy cập trang web của bạn và muốn đăng ký và đăng nhập vào trang web của bạn, và phiên bản còn lại dành cho người dùng nội bộ, như quản trị viên và tác giả.

Các trang đăng nhập này tách biệt với hoạt động chính của trang web của bạn (hầu hết các tệp nằm trong tệp wp-login.php ). Vì vậy, công cụ hình nền tùy chỉnh sẽ không tràn vào các mô-đun đăng nhập.

Bạn có thể thực hiện việc này bằng cách sử dụng một plugin có tên là Custom Login Page Customizer. Để bắt đầu, hãy cài đặt và kích hoạt plugin cho trang WordPress của bạn.

LoginPress plugin
Plugin LoginPress

Ở bên trái, một tab mới trong menu bảng điều khiển WordPress hiển thị cho LoginPress.

Đi tới Đăng nhập, nhấn> Cài đặt .

Go to LoginPress settings
Chuyển đến cài đặt Đăng nhập

Tại đây, bạn có thể điều chỉnh cài đặt plugin trước khi thêm nền và tùy chỉnh bất kỳ phần nào khác của trang đăng nhập.

Ví dụ: nó cung cấp các cài đặt để tự động ghi nhớ người dùng, hiển thị các trường mật khẩu tùy chỉnh và hết hạn phiên sau một khoảng thời gian nhất định.

Changing the LoginPress settings
Thay đổi cài đặt Đăng nhập

Để kích hoạt hình nền tùy chỉnh cho trang đăng nhập, hãy nhấp vào LoginPress> Customizer .

Go to 'LoginPress > Customizer'
Chuyển đến ‘LoginPress> Customizer’

Thao tác này sẽ đưa bạn đến WordPress Customizer, nơi một trang mới đã được thêm vào cho các công cụ LoginPress. Bạn sẽ nhận thấy các tab cho Chủ đề, Biểu trưng, Nền và hơn thế nữa.

Cũng có thể tùy chỉnh trang đăng nhập bằng cách nhấp vào các nút trong bản xem trước trực quan.

Setting a LoginPress theme
Đặt chủ đề LoginPress

Chúng tôi sẽ không đề cập đến tất cả các cài đặt khác vì hiện tại chúng tôi chủ yếu tập trung vào nền.

Nhấp vào tab Nền để tiếp tục.

Go to the 'LoginPress' background tab
Chuyển đến tab nền ‘LoginPress’

Yêu cầu đầu tiên của doanh nghiệp là quyết định xem bạn muốn nền màu hay nền hình ảnh.

Nếu bạn muốn có nền màu, hãy tìm trường Màu nền và nhấp vào Chọn màu . Điều này sẽ hiển thị một bảng màu để bạn chọn chính xác màu nào phù hợp với doanh nghiệp của bạn.

Như bạn có thể thấy, thay đổi cũng có hiệu lực trong bản xem trước WordPress Customizer.

Select the 'LoginPress' background color
Chọn màu nền ‘LoginPress’

Ngay bên dưới cài đặt Màu nền , có phần Hình nền .

Bật khóa chuyển Bật hình nền để hiển thị bộ sưu tập các hình nền được tạo trước.

Enable the WordPress background image
Bật hình nền WordPress

Không có nhiều thứ để lựa chọn trong phiên bản miễn phí, nhưng plugin sẽ bổ sung thêm nếu bạn quyết định nâng cấp lên phiên bản cao cấp.

Hãy tiếp tục và kiểm tra những hình nền được tạo sẵn này để xem liệu chúng có thể phù hợp với thương hiệu của bạn hay không.

Setting a background gallery
Đặt thư viện nền

Đường dẫn nhiều khả năng hơn là tải lên hình ảnh của chính bạn làm nền trang đăng nhập.

Tìm tiêu đề Hình nền và nhấp vào nút Chọn Hình ảnh .

Choose the 'Select Image' option
Chọn tùy chọn ‘Chọn hình ảnh’

Bạn được đưa đến Thư viện phương tiện WordPress để tải ảnh lên từ máy tính của mình hoặc chọn một trong số chúng đã có bên trong WordPress.

Chọn ảnh mong muốn của bạn và nhấp vào nút Chọn ảnh .

Choose the WordPress login background image
Chọn hình nền đăng nhập WordPress

Hình nền được kích hoạt sẽ xuất hiện dưới dạng hình thu nhỏ trong bảng Customizer và bản xem trước thực tế của trang đăng nhập của bạn.

Set the background image options
Đặt các tùy chọn hình nền

Bây giờ bạn có tùy chọn để nhấp vào nút Xuất bản và dán những gì trên màn hình. Hoặc, bạn có thể cuộn xuống cài đặt bổ sung để đảm bảo rằng chế độ xem tốt nhất của hình ảnh đã tải lên hiện đang hoạt động.

Nhấp vào trường thả xuống Lặp lại nền và kiểm tra các tùy chọn như Lặp lại , Không lặp lạiLặp lại-x .

Tùy thuộc vào kích thước ảnh của bạn, bạn có thể thấy hoặc không thấy ảnh di chuyển xung quanh một chút.

Choose the 'Background Repeat' settings
Chọn cài đặt ‘Lặp lại nền’

Tiếp theo, hãy xem qua các tùy chọn Chọn Vị trí để di chuyển hình nền nhiều hơn nữa.

Theo mặc định, họ đặt hình ảnh ở giữa màn hình, nhưng đôi khi nó trông đẹp hơn nếu bạn đặt hình ảnh ở đâu đó như phía dưới bên phải hoặc phía trên bên trái. Hãy thử tất cả chúng để tìm ra cái nào phù hợp nhất cho hình nền của bạn.

Select the Background position
Chọn vị trí Nền

Về sau, trình đơn thả xuống Kích thước hình nền WordPress có các cài đặt về cách hình ảnh bao phủ không gian màn hình, điều chỉnh kích thước của hình ảnh với mọi tùy chọn đặt trước.

Một lần nữa, hãy kiểm tra những thứ này để quyết định xem cái nào trông đẹp nhất. Bạn có thể thấy rằng một cái gì đó như cài đặt Vùng chứa cung cấp chế độ xem được cải thiện thay vì cài đặt Tự động hoặc Bìa.

Set the WordPress background image size
Đặt kích thước hình nền WordPress

Và đó là tất cả những gì cần có để tải lên và kích hoạt hình nền cho trang đăng nhập của bạn!

Cài đặt cuối cùng là ở đó nếu bạn muốn hiển thị video làm nền thay vì hình ảnh. Bật cài đặt đó nếu bạn có một video thú vị liên quan đến doanh nghiệp của mình và không thu hút quá nhiều sự chú ý từ những người đăng nhập vào trang web.

Đăng kí để nhận thư mới

Enabling 'Background Video'
Bật ‘Video nền’

Khi mọi thứ đã hoàn tất, hãy nhấp vào nút Xuất bản để bật nền trang đăng nhập của bạn và xem nó được hiển thị bất cứ khi nào người dùng cố gắng đăng ký hoặc đăng nhập vào trang web.

Cách thêm hình nền vào menu điều hướng của bạn

Bạn có thể nhận thấy một số trang web có menu lạ mắt bao gồm hình nền hoặc biểu tượng. Đây là một thực tế phổ biến trong thế giới Thương mại điện tử, nơi thương hiệu có thể có một menu lớn với các danh mục và hình nền cho mỗi nút danh mục.

Nếu bạn quan tâm đến việc thêm hình nền vào menu của mình, hãy xem bài viết của chúng tôi về các plugin menu WordPress tốt nhất. Nhiều plugin menu này cung cấp các tùy chọn để bao gồm hình ảnh và nền màu trong menu của bạn.

Xem như cách có một số plugin để thêm nền nhất định cho menu điều hướng, chúng tôi sẽ cung cấp hướng dẫn cho hai, một trong số đó cho phép tạo nền phía sau menu con của bạn. Ngược lại, cái còn lại thêm nền vào menu di động của bạn.

Để thêm hình nền vào các menu con khác nhau, hãy cài đặt và kích hoạt plugin WP Mega Menu. Plugin này cho phép bạn kích hoạt và quản lý menu mega với nhiều cấp độ thả xuống. Nó lý tưởng cho các cửa hàng trực tuyến lớn, nhưng nó cũng thực hiện thủ thuật cho các menu nhỏ hơn, đặc biệt nếu bạn muốn thêm hình nền hoặc các biểu tượng.

WP Mega Menu plugin
Plugin WP Mega Menu

Bắt đầu bằng cách tìm tab WP Mega Menu trong bảng điều khiển WordPress.

Nhấp vào mục menu Chủ đề .

Go to the 'Themes' panel
Đi tới bảng điều khiển ‘Chủ đề’

Tại đây, bạn có thể xem danh sách các chủ đề mặc định được plugin tạo cho menu của bạn.

Bạn có thể nhấp để chỉnh sửa bất kỳ chủ đề nào hoặc thêm thiết kế của riêng bạn từ đầu.

The many Mega Menu Themes
Nhiều chủ đề Mega Menu

Mỗi chủ đề có cài đặt riêng trong đó bạn chỉ định các yếu tố như tiêu đề chủ đề, tùy chọn thanh menu và biểu trưng thương hiệu. Mọi phần trong menu của bạn đều có thể tùy chỉnh được, từ menu thả xuống đến menu con.

Tuy nhiên, đối với nền menu, bạn chỉ cần biết mình muốn chọn chủ đề nào.

Set the Mega Menu theme settings
Đặt cài đặt chủ đề Mega Menu

Đi tới Giao diện> Menu trong bảng điều khiển.

Go to 'Appearance > Menus'
Đi tới ‘Giao diện> Thực đơn’

Bạn sẽ thấy một mô-đun mới liên kết đến Cài đặt Mega Menu .

Nhấp để Bật menu lớn, sau đó chọn bất kỳ mục nào bạn thích nhất cho trang web của mình.

Cuối cùng, nhấp vào nút Lưu .

Click the 'Enable' button
Nhấp vào nút ‘Bật’

Bây giờ, hãy chuyển sự chú ý của bạn sang khu vực Cấu trúc Menu .

Cuộn qua bất kỳ mục menu hiện tại nào của bạn sẽ thấy nút WP Mega Menu . Đây là nơi bạn tùy chỉnh bố cục và thiết kế cho từng phần thả xuống.

Nhấp vào nút WP Mega Menu cho bất kỳ mục menu nào bạn muốn. Đối với trường hợp này, chúng tôi sẽ thêm một menu lớn thả xuống vào tab Cửa hàng.

Lưu ý: Chúng tôi giả định rằng bạn đã có một menu được định cấu hình trên trang web WordPress của mình. Đọc hướng dẫn Menu thả xuống WordPress của chúng tôi nếu bạn cần trợ giúp về điều đó.

Add the mega menu to your site
Thêm menu lớn vào trang web của bạn

Trong cửa sổ bật lên mới, hãy lật công tắc để bật Mega Menu cho mục menu cụ thể đó.

Sau đó, bạn có thể thêm một hàng thả xuống và kéo một số tiện ích con từ phía bên trái vào hàng đó. Ví dụ: chúng tôi sẽ kéo danh sách các sản phẩm để chúng hiển thị khi ai đó cuộn qua mục menu Cửa hàng.

Click the 'Add Now' button
Nhấp vào nút ‘Thêm ngay bây giờ’

Để thêm hình nền vào khu vực thả xuống này, hãy nhấp vào nút Tùy chọn ở góc dưới bên trái.

Choose the 'Options' link
Chọn liên kết ‘Tùy chọn’

Tìm trường Tải lên Hình nền .

Nhấp vào nút Tải lên để tìm ảnh phù hợp trong Thư viện phương tiện của bạn để sử dụng ảnh đó làm nền.

Select the 'Upload Image' button
Chọn nút ‘Tải lên Hình ảnh’

Hình thu nhỏ của hình ảnh sẽ xuất hiện sau khi bạn chọn nó từ Thư viện phương tiện.

Có một số cài đặt khác cần xem xét, vì vậy hãy kiểm tra những cài đặt đó nếu bạn muốn.

Verify the thumbnail
Xác minh hình thu nhỏ

Đảm bảo nhấp vào nút Lưu thay đổi ở cuối bảng điều khiển Tùy chọn .

Click the 'Save Changes' button
Nhấp vào nút ‘Lưu Thay đổi’

Bạn cũng cần nhấp vào Lưu Menu trở lại trong khu vực Cấu trúc Menu của bảng điều khiển WordPress.

Click the 'Save Menu' button
Nhấp vào nút ‘Lưu Menu’

Bây giờ, điều hướng đến giao diện người dùng của trang web của bạn để xem menu. Nếu bạn cuộn qua mục chúng tôi vừa tùy chỉnh, bạn sẽ thấy một phần thả xuống có hình nền.

The menu now has a background Image
Menu bây giờ có hình nền

Một cách khác để thêm hình nền vào menu là sử dụng menu di động, đáp ứng hiển thị khi ai đó truy cập trang web của bạn thông qua thiết bị di động.

Bạn có thể đặt nền phía sau menu di động với sự trợ giúp của plugin WP Mobile Menu.

WP Mobile Menu plugin
Plugin WP Mobile Menu

Sau khi cài đặt và kích hoạt plugin WP Mobile Menu, hãy chuyển đến Tùy chọn Menu Di động trong bảng điều khiển WordPress.

Go to the 'Mobile Menu Options' link
Đi tới liên kết ‘Tùy chọn Menu Di động’

Plugin cung cấp một số cách để định cấu hình menu di động của bạn. Yêu cầu chung là bật một trong các định dạng menu và cho biết menu WordPress nào bạn muốn sử dụng cho menu di động đó.

Ví dụ: chúng ta có thể nhấp vào công tắc Bật Menu Trái (bật menu di động nằm ở bên trái màn hình) và chọn tùy chọn Menu chính từ menu thả xuống Bên trái . Điều này liên kết Menu chính hiện tại của chúng tôi với menu di động, vì vậy khách truy cập sẽ thấy các tab giống nhau.

Set the menu options
Đặt các tùy chọn menu di động

Nó phụ thuộc vào loại menu di động bạn tạo, nhưng vì chúng tôi đang tạo menu bên trái, chúng tôi có thể nhấp vào tab Menu bên trái để hiển thị các cài đặt thích hợp để thêm nền.

Choose the left menu settings
Chọn cài đặt menu bên trái

Cuộn xuống trường Hình nền bảng và nhấp vào dấu “ + ” để mở Thư viện phương tiện.

Adding a mobile menu background image
Thêm hình nền menu di động

Chọn một hình ảnh từ Thư viện phương tiện của bạn và thêm nó vào trường.

Bạn sẽ thấy phiên bản hình thu nhỏ của hình nền để xác nhận.

Chọn nút Lưu thay đổi để kích hoạt nền.

Verify the background image with the thumbnail
Xác minh hình nền bằng hình thu nhỏ

Được xem như cách plugin tạo menu di động, menu có thể chỉ hiển thị khi trình duyệt của bạn được đặt ở độ rộng hẹp hoặc khi bạn truy cập trang web của mình trên điện thoại hoặc máy tính bảng.

Menu mới được hợp nhất dưới biểu tượng bánh hamburger (ba đường ngang).

Nhấp vào đó để kiểm tra menu mới với nền.

Click the hamburger menu icon
Nhấp vào biểu tượng menu bánh hamburger

Như thể hiện trong ảnh chụp màn hình, nền được đặt phía sau toàn bộ menu di động để mọi người có thể nhìn thấy.

Mobile menu with a background Image
Menu di động có hình nền

Cách thêm hình nền WordPress vào trang bảo trì

Tất cả các trang web đôi khi yêu cầu bảo trì và đôi khi quá trình bảo trì mất nhiều thời gian nên việc hiển thị trang bảo trì sẽ hữu ích.

Hình nền đóng một vai trò lớn khi làm việc với các trang bảo trì. Hầu hết các trang bảo trì bao gồm hình nền toàn màn hình và có thể một số văn bản hoặc liên kết với nhiều tài nguyên hơn.

Nếu bạn đã có một trang bảo trì và nó không bao gồm hình nền, hãy xem xét các bước sau để tạo ra một môi trường đẹp khi bạn có thể cần phải đóng trang web của mình khỏi công chúng trong một khoảng thời gian.

Bạn có thể thêm hình nền vào trang bảo trì với sự trợ giúp của plugin Bảo trì. Cài đặt và kích hoạt plugin trên trang web của bạn.

Maintenance plugin
Plugin bảo trì

Khi nó hoạt động, hãy tìm nút Bảo trì đang Bật / Tắt ở đầu bảng điều khiển.

Nhấp vào nút để chuyển đến trang Cài đặt của plugin Bảo trì.

Click the 'Maintenance is off' link
Nhấp vào liên kết ‘Bảo trì đã tắt’

Một cách khác để truy cập trang Cài đặt là nhấp vào mục menu Bảo trì trong menu bên của trang tổng quan.

Click the 'Maintenance' menu item
Nhấp vào mục menu ‘Bảo trì’

Trang Cài đặt của plugin Bảo trì có một bộ sưu tập khá nhiều tùy chọn để tùy chỉnh, nhưng khu vực chính cần xem xét là mô-đun Cài đặt chung . Tại đây, bạn có thể viết Dòng tiêu đề và Mô tả, cả hai đều đóng vai trò là văn bản phủ lên trên nền mà chúng tôi sắp chèn.

Tiêu đề Trang hiển thị trong tab trình duyệt, vì vậy bạn cũng nên cân nhắc tùy chỉnh nó.

Bạn có thể sử dụng plugin Bảo trì cho bất kỳ thứ gì từ các trang bảo trì đến các trang sắp ra mắt, vì vậy bạn có thể nhập nội dung như “Trang web của chúng tôi đang được bảo trì” hoặc bạn có thể hiển thị một chút thông tin về công ty của mình và bao gồm biểu mẫu để mọi người nhập trong địa chỉ email của họ.

Adding a headline for the maintenance page
Thêm tiêu đề cho trang bảo trì

Tiếp tục, plugin cung cấp một tùy chọn để tải lên biểu trưng của bạn, biểu trưng này cũng phủ lên trên hình nền.

'Upload Logo' button
Nút ‘Tải lên Biểu trưng’

Nhấp vào nút Tải lên biểu trưng và chọn biểu trưng của bạn để xem hình thu nhỏ của nó trong trang tổng quan.

Logo for the maintenance page
Biểu trưng cho trang bảo trì

Cuối cùng, trường Hình nền yêu cầu bạn nhấp vào Tải lên Hình nền.

Tải lên hình ảnh từ máy tính của bạn hoặc đi qua Thư viện phương tiện của bạn để tìm nền phù hợp cho trang bảo trì.

Lưu ý: Hình ảnh nền bảo trì tốt nhất có kích thước lớn, độ phân giải cao và theo hướng ngang. Thay thế nền “Chế độ chân dung” có sẵn trong cài đặt bên dưới.

Click the 'Upload Background' button
Nhấp vào nút ‘Tải lên Nền’

Sau khi bạn chọn nền, nó sẽ xuất hiện dưới dạng bản xem trước hình thu nhỏ nhỏ hơn trong trang tổng quan.

The background image thumbnail
Hình thu nhỏ của hình nền

Mặc dù hình nền có hướng ngang có ý nghĩa nhất đối với máy tính để bàn và màn hình rộng hơn, nhưng nhiều người kết thúc trên trang web của bạn bằng cách sử dụng màn hình có hướng dọc, giống như điện thoại được giữ theo chiều dọc.

Do đó, hình nền rộng hơn trông sẽ không đẹp. Đó là lý do tại sao plugin cung cấp Hình ảnh nền ở chế độ dọc đóng vai trò như một giải pháp thay thế, được hoán đổi một cách thích ứng bất cứ khi nào người dùng truy cập trang bằng cách sử dụng màn hình hướng dọc.

Điều quan trọng là phải đưa hình ảnh vào trường này, vì vậy hãy nhấp vào nút Tải lên hình ảnh cho hướng thiết bị dọc .

Upload a portrait orientation background image
Tải lên hình nền hướng dọc

Lần này, hãy tìm một hình ảnh cao hơn chiều rộng (chế độ dọc). Bạn luôn có thể cắt hình nền gốc để tạo thành ảnh chân dung hoặc bạn có thể tải lên một hình ảnh hoàn toàn khác để lấp đầy chỗ trống.

Đánh dấu hình ảnh bạn muốn và nhấp vào nút Chọn Hình ảnh để chèn hình ảnh đó vào trang tổng quan.

Choose the background image
Chọn hình nền

Tất cả các cài đặt này không có ý nghĩa gì trừ khi bạn kích hoạt Chế độ bảo trì.

Để điều đó xảy ra, hãy tìm nút Bật / Tắt Bảo trì ở đầu trang Cài đặt.

Setting the maintenance page On or Off
Đặt trang bảo trì ‘Bật’ hoặc ‘Tắt’

Lật công tắc để công tắc có nội dung “Bật”, sau đó chọn nút Lưu thay đổi .

Enabling the maintenance page
Bật trang bảo trì

Truy cập giao diện người dùng của trang web của bạn để đảm bảo hình nền và trang bảo trì hiển thị đúng cách.

Có một cơ hội tốt là nó không.

Có hai lý do cho điều này: Trước hết, bạn phải đăng xuất khỏi tài khoản Quản trị viên WordPress để xem trang web Chế độ bảo trì. Thứ hai, bạn có thể cần xóa bộ nhớ cache của trang web để cập nhật nội dung thay đổi.

See the website in Maintenance Mode
Xem trang web trong ‘Chế độ bảo trì’

Ví dụ: khi tôi đăng xuất khỏi Tài khoản Quản trị, trang bảo trì sẽ hiển thị khi tôi truy cập bất kỳ trang nào.

Hình nền ở đó, cùng với các tùy chỉnh của tôi như biểu trưng và mô tả văn bản.

The background image on the maintenance page
Hình nền trên trang bảo trì

Bên cạnh đó, việc thay đổi kích thước cửa sổ trình duyệt thành nhiều hướng dọc sẽ giúp nền chế độ dọc đúng vị trí.

Bạn cũng sẽ thấy chế độ dọc khi truy cập trang web trên điện thoại hoặc máy tính bảng.

The background image in portrait mode
Hình nền ở chế độ dọc

Một loại hình nền khác với plugin được gọi là Hình ảnh trình tải trước. Về cơ bản, điều này sẽ tải một hình ảnh nhanh với hiệu ứng động trước khi hiển thị trang, nền và nội dung bảo trì thực tế.

Giống như hình nền thông thường, nhấp vào nút Tải lên Trình tải trước để tìm hình ảnh đẹp và thêm hình ảnh đó vào trang tổng quan.

Một lần nữa, nhấp vào nút Lưu thay đổi và xóa bộ nhớ cache.

Click the 'Upload Preloader' button
Nhấp vào nút ‘Tải lên Trình tải trước’

Theo mặc định, hiệu ứng Hình ảnh Trình tải trước quay xung quanh trong giây lát, sau đó nó biến mất để hiển thị trang bảo trì và hình nền.

Việc bạn có muốn giữ loại hiệu ứng này hay không là hoàn toàn phụ thuộc vào bạn.

Adding an intro effect to the background image
Thêm hiệu ứng giới thiệu vào hình nền

Một số yếu tố nền khác có sẵn để bạn thử nghiệm trong bảng Cài đặt của plugin Bảo trì.

Ví dụ: bạn có thể muốn thêm màu nền thay vì hình nền.

Nếu đúng như vậy, hãy chuyển đến trường Màu Nền và Chọn Màu phù hợp với thương hiệu của bạn.

Open the background color field
Mở trường màu nền

Màu nền không hiển thị cho trang bảo trì trừ khi bạn tắt tất cả các hình nền khác.

Vì vậy, hãy chắc chắn rằng bạn xóa Hình nền.

Removing the background image
Xóa hình nền

Bạn cũng phải xóa hình nền của Chế độ chân dung.

Cần một giải pháp lưu trữ mang lại cho bạn lợi thế cạnh tranh? Kinsta giúp bạn bao phủ bởi tốc độ đáng kinh ngạc, bảo mật hiện đại và tự động mở rộng quy mô. Kiểm tra các kế hoạch của chúng tôi

Set the Portrait Mode background image
Đặt hình nền của Chế độ chân dung

Lưu các thay đổi và xóa bộ nhớ cache. Sau đó, truy cập giao diện người dùng của trang web của bạn để xem màu nền có hiệu lực.

Check your site's frontend
Kiểm tra giao diện người dùng của trang web của bạn

Các cài đặt cần xem xét bao gồm các mục như màu phông chữ, họ phông chữ và độ mờ nền.

Chúng tôi cũng khuyên bạn nên suy nghĩ về việc bạn có cần phải đăng nhập giao diện người dùng hay không. Điều này cung cấp một cách để người dùng đăng nhập vào tài khoản của họ và có quyền truy cập vào hồ sơ nếu cần.

Khi mọi thứ đã hoàn tất, hãy nhấp vào nút Lưu thay đổi .

Set the font color
Đặt màu phông chữ

Plugin Bảo trì cũng cung cấp một số chủ đề được tạo sẵn với hình ảnh nền đẹp, bố cục và văn bản được thiết kế chuyên nghiệp.

Bạn có thể tìm thấy các chủ đề cho các bố cục trang và bảo trì sắp ra mắt, cùng với các trang để thu thập địa chỉ email và thông tin liên hệ khác.

Bạn phải mua các chủ đề để sử dụng chúng.

Purchasing a premium theme
Mua một chủ đề cao cấp

Tùy thuộc vào ngân sách của bạn, chúng khá rẻ và trông tuyệt vời.

An example of a template
Ví dụ về một mẫu

Đối với những người không quan tâm đến việc mua một chủ đề, tất cả các cài đặt được đề cập ở trên đều do bạn sử dụng. Bạn cũng có thể vào mô-đun CSS tùy chỉnh để định cấu hình trang bảo trì và hình nền theo cách bạn muốn.

Go to the 'Custom CSS' module
Chuyển đến mô-đun ‘CSS tùy chỉnh’

Hãy nhớ rằng, cài đặt trang bảo trì hiếm khi có hiệu lực trừ khi bạn đăng xuất khỏi tài khoản quản trị và nhấp vào nút Clear Cache .

Bạn có thể tìm thấy nút Clear Cache ở góc trên bên phải của bảng điều khiển khi sử dụng Kinsta. Nếu sử dụng một máy chủ lưu trữ khác, hãy xem xét một trong nhiều plugin bộ nhớ đệm trên thị trường.

Click the 'Clear Cache' button
Nhấp vào nút ‘Xóa bộ nhớ cache’

Sau khi xóa bộ nhớ cache và lưu cài đặt của mình, bạn sẽ thấy một hình nền đẹp bổ sung cho trang bảo trì!

Checking the maintenance page
Kiểm tra trang bảo trì

Cách thêm nền WordPress bằng trình tạo trang của bên thứ ba

Bài viết của chúng tôi về các trình tạo trang tốt nhất cung cấp danh sách các tùy chọn để chọn trình tạo trang với các tính năng kéo và thả. WordPress đã bao gồm một trình tạo trang trong Gutenberg, nhưng nhiều chủ sở hữu trang web thích các giải pháp khác.

Phần sau giải thích cách triển khai nền bằng cách sử dụng một số trình tạo trang phổ biến, bao gồm Elementor, Beaver Builder và Page Builder của SiteOrigin.

Thêm nền WordPress với Elementor

Elementor, trình tạo trang phổ biến nhằm tăng tốc quá trình sản xuất trang web một cách đáng kể, cung cấp một plugin miễn phí với một số công cụ hình nền.

Ngoài ra, Elementor thể hiện tính linh hoạt của nền trực quan cho các phần khác nhau của trang web của bạn thay vì giới hạn nền cho toàn bộ trang web. Ví dụ: bạn có thể thêm nền phía sau bất kỳ phần khối xây dựng nào và hiển thị các nền khác nhau từ trang này sang trang khác.

Để bắt đầu, hãy cài đặt và kích hoạt plugin Elementor.

Elementor website builder
Plugin Elementor

Elementor phân tán cài đặt nền của nó trên toàn bộ trình tạo, giúp dễ dàng chọn một phần tử và triển khai nền nếu cần. Do đó, về mặt kỹ thuật, bạn có thể truy cập bất kỳ trang hoặc bài đăng nào với mong muốn có quyền truy cập vào nút tải lên nền.

Trong trường hợp này, chúng tôi sẽ chuyển đến Trang chủ của trang web thử nghiệm của chúng tôi. Truy cập trang bạn chọn bằng cách chọn từ danh sách tại Trang> Tất cả các trang . Bạn cũng có thể làm tương tự với Bài đăng .

Khi đã ở trên trình chỉnh sửa trang WordPress mặc định, hãy nhấp vào nút để Chỉnh sửa với Elementor .

Click the 'Edit with Elementor' plugin
Nhấp vào plugin ‘Chỉnh sửa với Elementor’

Thao tác này sẽ chuyển chế độ xem trên màn hình của bạn sang Trình chỉnh sửa phần tử. Ở đây, phía bên trái có một menu với các mô-đun kéo và thả để xây dựng và chỉnh sửa trang của bạn.

Chức năng nền không có sẵn trong một phần hoặc khối mà thay vào đó là trong Cài đặt chính cho trang đó.

Do đó, hãy nhấp vào biểu tượng Cài đặt nhỏ (trông giống như một bánh răng) ở góc dưới bên trái của trình chỉnh sửa.

Click the settings icon
Nhấp vào biểu tượng cài đặt

Điều này hiển thị một phần cho cài đặt trang chung.

Nhấp vào tab Kiểu ở đầu phần Cài đặt Trang .

Go to the 'Style' tab
Chuyển đến tab ‘Kiểu’

Bên dưới Kiểu, tìm trường Loại Nền và nhấp vào biểu tượng Bàn chải sơn để thêm nền chuẩn.

Setting the 'Background Type' field
Đặt trường ‘Loại nền’

Tiếp theo, chọn loại nền bạn muốn xuất hiện. Ví dụ, trường Màu cho phép bạn chuyển nền sang màu đồng nhất. Ngoài ra còn có tùy chọn Gradient trong trường Background Type nếu đó là phong cách của bạn.

Setting the background color field
Đặt trường màu nền

Nhấp vào nút Chọn Hình ảnh trong trường Hình ảnh để hiển thị Thư viện Phương tiện của bạn và chọn hình nền phù hợp cho trang này.

Go to the 'Choose Image' button
Nhấp vào nút ‘Chọn Hình ảnh’

Như thường lệ, hãy kiểm tra các hình nền của bạn và tuân theo các kích thước tối ưu và các phương pháp hay nhất (độ phân giải cao và hướng dọc cho hầu hết các hình ảnh), sau đó chọn hình ảnh hoạt động tốt và nhấp vào nút Chèn phương tiện .

Click the 'Insert Media' button
Nhấp vào nút ‘Chèn phương tiện’

Hình nền đã chọn bây giờ xuất hiện trong bản xem trước trang web Elementor ở bên phải. Bạn có thể cần điều chỉnh các phần khác của nội dung để đảm bảo các mục như văn bản và hình ảnh hiển thị khi ở trên nền.

Elementor cung cấp các cài đặt nền hình ảnh như Vị trí, Tệp đính kèm, Lặp lại và Kích thước Hình nền WordPress. Sửa đổi cài đặt để xác định xem nền của bạn có thể trông đẹp hơn dưới dạng tệp đính kèm cố định hay có thể có hướng trên cùng bên phải hoặc kích thước thay thế.

Nhấn nút Cập nhật để lưu tất cả các thay đổi đối với trang và xuất bản nền mới cho trang web của bạn.

Adding a new background
Thêm nền mới
Phần nền với Elementor

Elementor cung cấp chức năng nền nâng cao cho phần lớn các phần được thêm vào các trang của bạn.

Tất cả những gì bạn phải làm là chọn một phần trên trang Elementor và sửa đổi cài đặt Nền để giới hạn nền chỉ ở khu vực đó.

Ví dụ, chúng ta có thể chọn phần Trình soạn thảo văn bản này để xem cài đặt phần Văn bản.

Choose the text section with Elementor
Chọn phần văn bản với Elementor

Chọn tab Nâng cao và tìm phần Nền bên trong tab đó.

Go to the 'Background' section
Chuyển đến phần ‘Nền’

Cài đặt Nền bao gồm Loại nền , Màu , Hình ảnh và hơn thế nữa, giống như các cài đặt chúng ta đã thấy đối với cài đặt nền chung của trang. Sự khác biệt duy nhất là nó hạn chế các cài đặt này trong phần đã chọn.

Chọn biểu tượng Paint Brush cho Background Type , sau đó nhấp vào nút Choose Image bên dưới trường Image .

Click the 'Choose Image' button
Nhấp vào nút ‘Chọn Hình ảnh’

Chọn một hình ảnh từ Thư viện phương tiện và nhấp vào nút Chèn phương tiện .

Choose the image and click the 'Insert Media' button
Chọn hình ảnh và nhấp vào nút ‘Chèn phương tiện’

Như bạn có thể thấy, hình nền vẫn nằm trong ranh giới của phần đó khi ngồi phía sau nội dung đã được tạo cho phần đó.

Sử dụng các bộ chọn Vị trí , Phần đính kèm , Lặp lạiKích thước để sửa đổi cách trình bày hình nền trong phần.

Cuối cùng, hãy nhấp vào nút Cập nhật để lưu các thay đổi của bạn.

Click 'Update' to see changes
Nhấp vào ‘Cập nhật’ để xem các thay đổi

Thêm hình nền với Beaver Builder

Plugin Beaver Builder bao gồm phiên bản Lite với một số công cụ nền cơ bản. Đây là một trong những trình tạo trang phổ biến nhất trên thị trường, cung cấp nhiều mô-đun nội dung cho các mục như video, hình ảnh, đoạn văn, v.v.

Bên cạnh tất cả những điều đó, nó cho phép bạn triển khai hình ảnh nền, màu sắc hoặc video, sử dụng các công cụ trực quan và CSS để đặt phần tử nền trên toàn bộ trang web, một trang hoặc một phần riêng lẻ trên một trang.

Đầu tiên, hãy cài đặt plugin Beaver Builder để bắt đầu.

Beaver Builder plugin
Plugin Beaver Builder

Đi tới bất kỳ trang hoặc bài đăng nào để chỉnh sửa nó với Beaver Builder.

Bạn phải chuyển đổi các trang đã tạo trước đó sang định dạng Beaver Builder. Thay vào đó, bạn có tùy chọn tạo trang từ đầu và chọn chỉnh sửa trang trong Beaver Builder.

Để chuyển đổi một trang hiện tại thành Beaver Builder, hãy mở trình chỉnh sửa trang đó và nhấp vào biểu tượng dấu ba chấm để mở menu View ở góc trên bên phải.

Go to the page's settings menu
Chuyển đến menu cài đặt của trang

Cuộn xuống để tìm và chọn liên kết Convert to Beaver Builder .

Nó cố gắng biên dịch tất cả nội dung bạn có trên trang của mình và chuyển các phần tử đó thành các mô-đun Beaver Builder tương thích.

Click the 'Convert to Beaver Builder' link
Nhấp vào liên kết ‘Chuyển đổi thành Beaver Builder’

Để tạo một trang từ đầu, hãy chuyển đến Trang> Thêm mới .

Sau đó nhấp vào nút Launch Beaver Builder .

Click the 'Launch Beaver Builder' button
Nhấp vào nút ‘Khởi chạy Beaver Builder’

Plugin Beaver Builder đưa bạn đến giao diện chính diện của trang web. Nó chiếm phần lớn màn hình hoạt động như một trình soạn thảo giao diện người dùng thực sự, nơi bạn nhấp vào các phần tử và di chuyển xung quanh các hộp bằng chuột.

Cách đầu tiên để thêm nền thông qua Beaver Builder là tải nền lên một khối phần. Điều này có thể chiếm hầu hết trang hoặc một phần nhỏ của trang, tùy thuộc vào kích thước khối phần của bạn.

Sau khi được chọn, hãy tìm nút Cài đặt Hàng (biểu tượng ).

Nhấp vào biểu tượng đó để hiển thị cài đặt cho hàng đó. Bạn cũng có thể làm điều này với các phần và cột, và các loại khối khác.

Edit the row settings
Chỉnh sửa cài đặt hàng

Bảng Cài đặt xuất hiện trên đầu bản xem trước trang web của bạn. Nhấp vào tab Kiểu , sau đó tìm phần Nền.

Trong Nền , nhấp vào menu thả xuống để hiển thị tất cả các loại nền.

Go the 'Style' tab
Chuyển đến tab ‘Kiểu’

Bạn có một số loại Nền để xem xét, một trong số đó là dành cho Ảnh. Những người khác bao gồm:

  • Màu sắc
  • Dốc
  • Video
  • Mã nhúng
Set the type for WordPress background image
Đặt loại cho hình nền WordPress

Hãy thử nghiệm các loại nền khác nhau.

Ví dụ: bạn có thể thấy rằng nền Gradient trông đẹp hơn hình ảnh. Mỗi loại nền bao gồm các cài đặt riêng của nó. Trong trường hợp này, kiểu Gradient yêu cầu hai màu cho gradient di chuyển từ màu này sang màu khác.

'About The Company' section
Phần ‘Giới thiệu về Công ty’

Chọn Nền ảnh hiển thị các trường để chọn từ Thư viện phương tiện hoặc dán vào URL cho hình ảnh. Nhấp vào liên kết Chọn Ảnh nếu sử dụng Nguồn Ảnh của Thư viện Phương tiện.

Click the 'Select Photo' link
Nhấp vào liên kết ‘Chọn ảnh’

Tìm ảnh nền yêu thích của bạn và nhấp vào nút Chọn ảnh .

Choose the media
Chọn phương tiện

Beaver Builder thả ảnh vào không gian nền đã chọn từ trước. Phần Cài đặt Ảnh hỏi bạn muốn định dạng ảnh như thế nào. Chọn từ các tùy chọn như Kích thước , Lặp lại , Vị tríPhần đính kèm .

Set the background image size
Đặt kích thước hình nền
Ảnh nền toàn cầu và toàn trang của trình tạo hải ly

Beaver Builder hoạt động với các công cụ thiết kế mặc định của WordPress để tận dụng các tính năng nền được tích hợp sẵn.

Do đó, bạn có thể vào tab Appearance> Background để kích hoạt hình nền cho toàn bộ trang web của mình.

Thay vào đó, hãy mở bất kỳ trang web nào trong Beaver Builder và nhấp vào menu thả xuống Công cụ ở góc trên bên trái.

Tại đây, hãy nhấp vào tùy chọn Cài đặt chung.

'Global Settings' for Beaver Builder
‘Cài đặt chung’ cho Beaver Builder

Global Settings Panel cung cấp khả năng thay đổi toàn bộ trang web của bạn, ghi đè hoặc sửa đổi mã hóa WordPress tích hợp sẵn. Do đó, chúng tôi muốn chèn một khối mã CSS để thay đổi toàn bộ hình nền của trang web (trên toàn cầu).

Nhấp vào tab CSS trong Cài đặt chung và dán đoạn mã sau vào trường:

body { background-image: url("URL to Image"); background-repeat: no-repeat; background-position: center top; background-attachment: fixed; background-size: 100%; background-color: #0f1066; }
Thay thế URL thành Văn bản hình ảnh bằng URL cho ảnh nền mong muốn. Bạn cũng có thể thay đổi những thứ như chức năng lặp lại, tệp đính kèm và kích thước nền bằng mã CSS.
Go to the CSS tab
Chuyển đến tab CSS

Sẽ có ý nghĩa hơn khi sử dụng Beaver Builder cho nền trang tùy chỉnh, vì mỗi trang có hình ảnh riêng làm nền.

Trên trình chỉnh sửa trang của bạn, hãy mở lại menu Công cụ .

Chọn tùy chọn Layout CSS & Javascript .

Layout CSS & JavaScript button
Nút bố cục CSS & JavaScript

Dán mã tương tự vào tab CSS, thay đổi URL thành Văn bản hình ảnh thành URL thực và điều chỉnh bất kỳ cài đặt nào bạn muốn:

body { background-image: url("URL to Image"); background-repeat: no-repeat; background-position: center top; background-attachment: fixed; background-size: 100%; background-color: #0f1066; }
Như bạn có thể thấy, toàn bộ nền thay đổi đối với hình ảnh URL mà bạn có trong mã hóa CSS. Hãy nhớ rằng bảng điều khiển Layout CSS / Javascript chỉ kiểm soát trang hiện tại. Bạn sẽ không thấy nền trên bất kỳ trang nào ngoài trang này.
Adding custom CSS
Thêm CSS tùy chỉnh

Thêm một hàng hoặc nền tiện ích đơn giản với Trình tạo trang bằng SiteOrigin

Trình tạo trang của SiteOrigin là một công cụ tạo trang web trực quan kéo và thả khác. Nó bị hạn chế về khả năng chèn hình nền cho toàn bộ trang web (bạn sẽ sử dụng công cụ Nền tùy chỉnh WordPress tiêu chuẩn). Tuy nhiên, nó cung cấp các cài đặt để thêm hình nền và màu sắc cho các hàng và tiện ích con được SiteOrigin sử dụng.

Đầu tiên, tải xuống và kích hoạt plugin Trình tạo trang bằng SiteOrigin.

Page Builder by SiteOrigin plugin
Trình tạo trang bằng plugin SiteOrigin

Điều hướng đến một trang mới hoặc xem xét thêm hàng SiteOrigin vào một trang hiện tại trên trang web.

Mỗi phần SiteOrigin yêu cầu bạn Thêm Widget hoặc Thêm hàng . Bạn cũng có cơ hội duyệt qua các Bố cục được tạo sẵn nếu bạn không muốn bắt đầu thiết kế từ đầu.

Tin tốt là cả widget và hàng trong SiteOrigin đều có cài đặt để bao gồm hình nền.

Do đó, hãy nhấp vào nút Thêm tiện ích hoặc Thêm hàng để tiếp tục.

Add a new widget or row
Thêm tiện ích hoặc hàng mới

Trong ví dụ này, chúng ta sẽ xem xét thư viện Widgets .

Tại đây, bạn có thể chọn một trong nhiều tiện ích con do SiteOrigin cung cấp, từ Menu và Trang điều hướng đến Đăng nội dung và Danh sách sản phẩm.

Chúng tôi sẽ chọn tiện ích Sản phẩm cho ví dụ này, nhưng bạn có thể chọn một trong nhiều tiện ích con khác dựa trên nhu cầu thiết kế của bạn. Ngoài ra, bạn có thể nhóm các tiện ích con này với một Hàng, sau đó thêm hình nền vào hàng đó để nền xuất hiện phía sau nhiều tiện ích con.

Choose the 'Products' widget
Chọn tiện ích ‘Sản phẩm’

Tiện ích hoặc hàng mới kết thúc trong trình chỉnh sửa trang SiteOrigin. Hầu hết SiteOrigin vẫn nằm trong bảng điều khiển WordPress, vì vậy không có nhiều trình chỉnh sửa giao diện người dùng như với các trình tạo trang khác.

Để thêm nền vào bất kỳ mục SiteOrigin nào, hãy cuộn qua phần tử và nhấp vào liên kết Chỉnh sửa .

Click the 'edit' link
Nhấp vào liên kết ‘chỉnh sửa’

Tôi đã chọn tiện ích Sản phẩm cho ví dụ này, nhưng mỗi tiện ích có cài đặt riêng để định cấu hình giao diện của nó trên trang web của bạn.

Các công cụ nền nằm bên dưới menu thả xuống Thiết kế . Nhấp vào đó để tiếp tục.

The 'Design' tab for WordPress background image
Tab ‘Thiết kế’ cho hình nền WordPress

Tìm trường Hình nền và nhấp vào nút Chọn Hình ảnh .

Bạn cũng có tùy chọn để dán URL Bên ngoài cho hình nền.

Choosing the background image and color
Chọn hình nền và màu sắc

Thư viện phương tiện hiển thị cho bạn những hình ảnh hiện tại mà bạn đã tải lên WordPress. Nhấp vào hình ảnh phù hợp nhất với nền này và chọn nút Xong để thả nó vào mô-đun SiteOrigin.

Click the 'Done' button
Nhấp vào nút ‘Hoàn tất’

Bây giờ trường Hình nền hiển thị phiên bản hình thu nhỏ của ảnh đó.

Cuộn xuống qua các cài đặt để định cấu hình mọi thứ từ Hiển thị Hình ảnh Nền đến Màu Phông chữ cho văn bản lớp phủ.

Nói chung, bạn sẽ có thể nhận được kết quả mong muốn bằng cách chọn Màn hình bìa. Có vẻ như plugin SiteOrigin mặc định hiển thị Tiled, vì vậy bạn có thể phải thay đổi điều đó.

Đảm bảo nhấp vào nút Hoàn tất khi bạn đã hoàn thành cài đặt tùy chỉnh của mình cho nền.

The WordPress background image settings
Cài đặt ‘Hình nền’ của WordPress

Tiện ích con (trong trường hợp này là tiện ích Sản phẩm) đi vào trình chỉnh sửa SiteOrigin WordPress cho trang đó. Bạn có thể kéo phần tử này vào bất kỳ đâu bạn muốn trên trang và thêm các tiện ích con và hàng mới phía trên và bên dưới nó.

Bạn phải nhấp vào nút Xem trước hoặc Cập nhật , sau đó điều hướng giao diện người dùng của trang để xem kết quả.

Go to the 'Products' section
Đi tới phần ‘Sản phẩm’

Nền hiện tại tôi đã thêm xuất hiện trong các giới hạn của tiện ích Sản phẩm từ trước đó. Hình nền này rõ ràng cần một số chỉnh sửa để làm cho nó trông đẹp hơn, nhưng đó là một bước khởi đầu chất lượng để lưu trữ trong không gian với một hình nền trông sáng tạo hơn nhiều.

Check the section background
Nền phần

Thêm hình nền độc đáo với Brizy

Người xây dựng trang cuối cùng cho phần trình diễn này, Brizy, cung cấp các mẫu thời trang và giao diện frontend cao cấp để thêm các thiết kế khác thường và các tùy chỉnh nhanh chóng.

Brizy Page Builder bao gồm một tập hợp các mô-đun kéo và thả phong phú để kết hợp vào trang web hiện tại của bạn. Nó cũng cho phép bạn bắt đầu từ một mẫu trống và xây dựng toàn bộ trang web của bạn với Brizy.

Do đó, bạn sẽ rất vui khi biết rằng Brizy cũng có một công cụ nền cho mọi yếu tố bạn đưa vào thông qua trình tạo trang. Chưa kể, Brizy có một số kiểu nền độc đáo, như thêm video lặp vào nền hoặc bản đồ đầy đủ.

Để tận dụng các cài đặt nền này, hãy cài đặt và kích hoạt plugin Brizy để bắt đầu.

The Brizy page builder plugin
Plugin trình tạo trang Brizy

Phần lớn quy trình thiết kế Brizy yêu cầu bạn bắt đầu với một mẫu trống. Brizy sẽ cố gắng chuyển đổi các thiết kế cũ của bạn thành các mô-đun Brizy, nhưng chúng tôi thấy rằng tốt nhất là nên bắt đầu lại.

Truy cập Trang hoặc Bài đăng trong bảng điều khiển WordPress của bạn và bắt đầu xây dựng trang với tiêu đề và có thể là một số nội dung.

Bạn sẽ thấy một nút để Chỉnh sửa Với Brizy . Nhấp vào đó để được chuyển đến trình tạo trang Brizy đầy đủ.

Click on the 'Continue to edit with Brizy' button
Nhấp vào nút ‘Tiếp tục chỉnh sửa với Brizy’

Trình tạo trang Brizy hiển thị bản xem trước đầy đủ về trang web của bạn với các nút, văn bản và hình ảnh. Nếu trang trống, hãy nhấp vào nút Bắt đầu tạo trang của bạn .

Click the plus icon to start building your page
Nhấp vào biểu tượng dấu cộng để bắt đầu xây dựng trang của bạn

Tìm các tab Bố cục và Khối trong thanh menu phía trên.

Bố cục cung cấp các trang web được tạo sẵn, chứa đầy nội dung demo và sẵn sàng hoạt động miễn là bạn tùy chỉnh nội dung của chính công ty mình. Các khối là các phần nhỏ hơn của các trang web, nhưng chúng vẫn được tạo sẵn và thường dễ sử dụng và thao tác hơn so với việc bạn tự tạo một khối.

Không quan trọng bạn đi theo hướng nào. Duyệt qua các bố cục và khối và thêm bao nhiêu tùy thích vào trang. Đây chỉ đơn giản là những yếu tố bạn sẽ sử dụng để tạo thành một trang web hoàn chỉnh.

Layouts and Blocks sections
Các phần Bố cục và Khối

Sau khi bạn có một vài khối hoặc bố cục trên trang web, hãy quay lại màn hình trình chỉnh sửa để xem tác phẩm của bạn.

Bạn sẽ thấy rằng mỗi phần khối đều có biểu tượng Cài đặt ở phía trên bên phải của khối, biểu tượng này thường hiển thị khi bạn cuộn qua phần đó.

Bấm vào đây cho khối bạn chọn. Chúng tôi sẽ thêm nền cho khối đó.

Click the 'Settings' icon
Nhấp vào biểu tượng ‘Cài đặt’

Bảng Cài đặt khối vẫn ở góc trên bên phải. Cuộn qua các biểu tượng menu để xem tất cả chúng làm gì.

Một trong số đó là cho Màu sắc , và do đó, chúng có nghĩa là một nền màu. Bạn có thể thay đổi điều đó và thêm gradient nếu bạn muốn gắn bó với chế độ xem nền màu đồng nhất hoặc gradient.

The 'Color' button for background
Nút ‘Màu’ cho nền

Nút biểu tượng ở bên trái chứa cài đặt Nền .

Nhấp vào nút đó để mở các công cụ nhanh chóng để tải hình nền lên khối này.

WordPress background image button
Nút hình nền WordPress

Brizy cung cấp ba mục nền phương tiện:

  • Hình ảnh
  • Video
  • Bản đồ

Trước tiên, hãy thử loại Hình ảnh để hiểu cách nó hoạt động với bố cục hiện tại của bạn.

Nhấp vào khu vực Tải ảnh lên để tìm ảnh trong thư viện phương tiện và thêm ảnh đó vào nền.

WordPress background image type
Loại hình nền WordPress

Chúng tôi đã tìm thấy một bức ảnh bảng gỗ cho hướng dẫn này và chỉ ra rằng chúng tôi không muốn có hiệu ứng thị sai.

Điều này tạo thêm một hiệu ứng dễ chịu vì nền màu đóng vai trò như một lớp phủ, nhưng chúng ta vẫn thấy kết cấu của gỗ đằng sau nó.

Hãy nhớ rằng bạn luôn có thể điều chỉnh trường Thị sai để làm cho hình nền trở thành nền cố định, động hoặc cuộn.

Background image with no parallax
Hình nền không có thị sai

Và đó là cách bạn chèn ảnh nền với Brizy!

Phần tốt nhất về Brizy là bạn có thể tiếp tục di chuyển qua thiết kế và nhấp vào nút Cài đặt của từng phần.

Một phần xuống, chúng ta có thể chèn thêm một hình nền khác mà không mất nhiều thời gian vào nó.

Adding another background image
Thêm hình nền khác

Và để chứng minh sức mạnh của các loại nền khác, chúng ta có thể nhấp vào Loại nền bản đồ , nhấn vào một địa chỉ và xem bản đồ của vị trí đó xuất hiện ngay phía sau nội dung nền trước.

Bản đồ được đặt dưới dạng nền đầy đủ và có chức năng thu phóng nếu nó không xuất hiện đúng với cài đặt mặc định.

Add a map as WordPress background image
Thêm bản đồ làm hình nền WordPress

Cuối cùng, chúng tôi khuyên bạn nên xem công cụ video nền Brizy, nằm trong cùng phần với công cụ nền hình ảnh. Nó hoạt động bằng cách chèn URL video (YouTube hoặc Vimeo), hiển thị video đầy đủ ngay phía sau nội dung nền trước. Nó thậm chí còn cung cấp một cài đặt để lặp lại video và chọn thời điểm bắt đầu khi người dùng cuộn qua phần.

URL for WordPress background image
URL cho hình nền WordPress

Ảnh gif động dưới đây cung cấp một ví dụ ngắn gọn về video đang hoạt động, mặc dù nó có thể sử dụng một số chỉnh sửa.

Background with Video
Nền có video

Định cỡ hình ảnh nền, tìm nguồn và chỉnh sửa cơ bản

Chúng tôi đã đề cập trước đó trong bài viết rằng mặc dù không có kích thước hoàn hảo cho hình nền, chúng tôi khuyên bạn nên bắt đầu ở mức không nhỏ hơn 1024 x 768 pixel và tuân theo tỷ lệ khung hình phổ biến như 16: 9 . Tỷ lệ khung hình không quan trọng bằng kích thước và độ phân giải thực của hình ảnh vì bạn có thể cắt hình ảnh hoặc để WordPress làm điều đó cho bạn.

Bạn cũng cần phải tìm đúng nơi để mua hoặc mượn ảnh nền WordPress nếu bạn không có kế hoạch chụp ảnh của riêng mình.

Nơi để Tìm Hình ảnh Nền Thích hợp

Để tìm kiếm hình nền của bạn, hãy xem hướng dẫn của chúng tôi về cách tìm và thêm kho ảnh mà không cần rời khỏi WordPress. Chúng tôi cũng có một danh sách các nguồn thị trường hữu ích để tìm kiếm các ảnh kho có độ phân giải cao, nhiều trong số đó là miễn phí.

Nhìn chung, chúng tôi khuyên bạn nên thử tự chụp ảnh nền. Nếu điều đó là không thể hoặc bạn không có kinh nghiệm về nhiếp ảnh hoặc thiết kế đồ họa, hãy nghĩ đến việc sử dụng các nguồn tài nguyên nhiếp ảnh miễn phí. Bạn cũng có thể chọn trả tiền cho ảnh nền từ một trong nhiều trang web hình ảnh có sẵn cao cấp, một số trang web tính phí hàng tháng để tải xuống một loạt ảnh.

Một số điểm nổi bật từ các liên kết đó bao gồm:

  • Unsplash – Miễn phí và không cần ghi công.
  • Visual Hunt – Ảnh miễn phí. Hầu hết các hình ảnh không yêu cầu ghi công.
  • Pexels – Miễn phí mà không cần ghi công.
  • Pixabay – Miễn phí với hầu hết các hình ảnh không yêu cầu ghi công.
  • iStockphoto – Một gói đăng ký trả phí khá thấp cho hình ảnh miễn phí bản quyền.
  • Shutterstock – Hình ảnh miễn phí bản quyền với mức phí đăng ký hợp lý.

Cách thay đổi hình nền WordPress bằng CSS tùy chỉnh

Như chúng ta đã tìm hiểu, bạn có thể thêm hình nền WordPress bằng các công cụ WordPress tích hợp tiêu chuẩn hoặc một plugin. Bạn chọn con đường nào không quan trọng, miễn là bạn đạt được kết quả mong muốn. Ngoài ra còn có tùy chọn sử dụng CSS tùy chỉnh để cách điệu hình nền hoặc thêm nó vào trang web của bạn.

Chúng tôi sẽ không đề cập đến sự phức tạp của CSS tùy chỉnh, xem mỗi hình nền và chủ đề sẽ có một quy trình khác nhau như thế nào. Tuy nhiên, chúng tôi khuyên bạn nên đọc hướng dẫn của chúng tôi về cách chỉnh sửa, thêm và tùy chỉnh CSS trong WordPress. Bài viết bao gồm các mẹo hữu ích để thêm hình nền vào bất kỳ phần nào của trang web, từ các mục menu đến các khối trang cụ thể.

Khắc phục các sự cố thường gặp với hình nền WordPress

Tất cả các trang web WordPress đều có khả năng thêm nền. Tuy nhiên, điều đó không có nghĩa là tính năng cốt lõi hoạt động cho tất cả các trang web. Ví dụ: bạn có thể thấy rằng chủ đề bạn đang sử dụng không hỗ trợ hình nền tùy chỉnh. Hoặc có thể bạn tiếp tục tải một nền lên, nhưng nó trông không ổn lắm (quá lớn hoặc quá mờ).

Gặp phải sự cố với nền WordPress thật khó chịu và thật không may, hơi phổ biến. Chúng tôi đã tổng hợp một số vấn đề phổ biến nhất với hình nền bên dưới và lập biểu đồ cho từng quá trình hành động.

Cách khắc phục 5 vấn đề thường gặp nhất với ảnh nền trong WordPress

Chủ đề của tôi không hỗ trợ hình nền WordPress

Các nhà phát triển chủ đề kiểm soát tính năng Hình nền tùy chỉnh trong WordPress. Họ có thể bật hoặc tắt tính năng này, tùy thuộc vào việc họ có muốn bật hỗ trợ nền tùy chỉnh hay không. Nền bị tắt khi không cần thiết hoặc có thể xung đột với thiết kế tổng thể của chủ đề.

Nếu bạn thấy rằng chủ đề của mình không hỗ trợ nền tùy chỉnh hoặc nó hạn chế khả năng của bạn khi thêm nền, hãy xem xét các giải pháp sau:

  • Trao đổi chủ đề lấy một chủ đề hỗ trợ hình nền tùy chỉnh. Tìm Hình nền tùy chỉnh trong danh sách tính năng khi mua hoặc tải xuống chủ đề.
  • Sử dụng plugin nền để ghi đè tính năng mặc định nền tùy chỉnh đang bị chặn.

Mặc dù có thể bao gồm mã hóa tùy chỉnh của riêng bạn hoặc đi vào tệp chủ đề để tạo nền tùy chỉnh phản ứng, chúng tôi thường khuyên bạn không nên sử dụng cả hai tùy chọn. Hành động tốt nhất của bạn là xác định một chủ đề hỗ trợ hình nền hoặc thêm một plugin cho phép hình nền nhưng không làm xáo trộn nhiều chức năng của chủ đề.

Hình nền WordPress của tôi quá tối hoặc có màu sai

Ảnh nền bị tối có thể xuất phát từ nhiều cài đặt chạy dọc theo chính ảnh nền. Hầu hết thời gian, nó liên quan đến bộ lọc lớp phủ hoặc nền kém màu.

Đối với hầu hết các trường hợp nền bị đổi màu, bạn phải kiểm tra chủ đề hoặc plugin kiểm soát chính nền đó.

Tìm cài đặt gần trường nền yêu cầu bộ lọc hoặc lớp phủ. Bạn cũng có thể tìm thấy một tính năng độ mờ cần được xóa để nền của bạn hiển thị chính xác.

Nếu vẫn không thành công, chủ đề có thể có bộ lọc nền được mã hóa cứng vào các tệp chủ đề. Trong trường hợp đó, hãy liên hệ với nhà phát triển chủ đề để biết những gì có thể sửa màu nền.

Hình nền WordPress của tôi không ở đúng vị trí

Hình nền hiển thị không đúng vị trí có xu hướng làm hỏng thiết kế tổng thể trang web của bạn. Bạn có thể thấy rằng nền quá xa về bên trái hoặc bên phải, hoặc có thể những gì được cho là tiêu điểm trung tâm của nền hoàn toàn không xuất hiện trên màn hình.

May mắn thay, di chuyển xung quanh nền chỉ mất một vài lần nhấp vào nút.

Đi tới Giao diện> Nền trong bảng điều khiển WordPress. Tìm hình ảnh bạn hiện đã tải lên làm nền và tìm trường Vị trí . Trường này cho phép bạn di chuyển vị trí của nền, với các tùy chọn để di chuyển nó sang trái, phải, trên cùng, dưới cùng hoặc các góc.

Chúng tôi khuyên bạn nên nhấp vào tất cả các nút định vị để xem kết quả mà chúng tạo ra. Sau khi bạn tìm đúng vị trí, hãy lưu trang.

Hình nền WordPress của tôi lặp đi lặp lại nhiều lần

Các họa tiết và nền chắc chắn thường trông đẹp hơn khi được lặp lại, để biết chúng sẽ bỏ qua các lỗi hình ảnh như thế nào. Tuy nhiên, nhiều hình ảnh trông rất tệ khi lặp đi lặp lại làm nền, đặc biệt là những hình ảnh có nhiều chi tiết và mức độ màu sắc khác nhau.

Bố cục ảnh nền lặp lại sẽ hữu ích nếu ảnh nguồn của bạn không đủ lớn để bao phủ toàn bộ nền mà không bị kéo dài ra. Do đó, WordPress đôi khi mặc định bố cục lặp lại để duy trì độ phân giải của hình ảnh.

Giải pháp chính cho vấn đề này nằm trong phần Nền của Giao diện> Nền trong WordPress. Với ảnh được tải lên làm nền, hãy thử các cài đặt trước như Điền vào màn hình , Vừa với màn hình hoặc Tùy chỉnh , thay vì tùy chọn Đặt trước Lặp lại .

Tuy nhiên, bạn có thể thấy rằng cố gắng lấy một hình ảnh nhỏ hơn để che toàn bộ màn hình nền gây ra kết quả khó chịu. Trong trường hợp đó, giải pháp tốt nhất là thay thế hoàn toàn hình ảnh nguồn nền và tìm một hình ảnh lớn, độ phân giải cao và sẵn sàng xuất bản lên web.

Hình nền WordPress của tôi được kéo dài

Hình nền được kéo dài có nghĩa là cài đặt nền tùy chỉnh của bạn cố gắng lấy một hình ảnh nhỏ hơn và bao phủ toàn bộ màn hình bằng hình ảnh.

Bạn cũng có thể thấy điều này xảy ra với hình ảnh lớn hơn, có độ phân giải cao nếu chúng không khớp với tỷ lệ khung hình yêu cầu. Đối với hình ảnh nền kéo dài, hãy nghĩ về tệp nguồn. Chọn một hình ảnh khác phù hợp là lựa chọn tốt nhất.

Một vấn đề khác là bạn có thể định cấu hình sai cài đặt nền. Kiểm tra những thứ như vị trí hình nền và được kéo dài trên canvas ở chế độ Fill Screen . Bạn có thể chỉ cần duy trì kích thước ban đầu hoặc thêm chức năng Lặp lại để làm cho tất cả hoạt động tốt.

Mẹo khắc phục sự cố cơ bản khác

  • Các nhà phát triển chủ đề có toàn quyền đối với tính năng nền tùy chỉnh trong WordPress. Nếu bạn đã cài đặt một chủ đề và không thể làm cho nền hoạt động, cách tốt nhất của bạn là liên hệ với nhà phát triển chủ đề hoặc cài đặt một chủ đề mới để xem liệu cách đó có khắc phục được sự cố hay không.
  • Màu nền và hình ảnh tùy chỉnh thường ghi đè lên bất kỳ mã CSS tùy chỉnh nào mà bạn triển khai để kiểm soát kích thước, vị trí hoặc nguồn của hình ảnh nền của bạn. Bạn có thể phải gắn bó với cài đặt nền của chủ đề thay vì sử dụng CSS tùy chỉnh.
  • Một chủ đề có thể được bán với một nền tùy chỉnh đã được kích hoạt. Thông thường, tất cả những gì bạn phải làm là thay thế ảnh nền bằng một ảnh mới. Đôi khi, cần phải nhấn vào các tệp chủ đề hoặc sử dụng CSS tùy chỉnh để ghi đè cài đặt chủ đề.

Plugin hình ảnh nền WordPress tốt nhất

Nếu bạn muốn có thêm khả năng chỉnh sửa cho hình nền, quan tâm đến hình nền video hoặc các công cụ cho phép hình nền dành riêng cho trang, bạn có thể xem xét các plugin hình nền WordPress sau:

Hình ảnh nền toàn màn hình đơn giản

Simple Full Screen Background Image plugin
Plugin hình ảnh nền toàn màn hình đơn giản

Plugin Hình nền Toàn màn hình Đơn giản không khác nhiều so với công cụ hình nền mặc định trong WordPress, ngoại trừ việc nó thêm các tính năng tự động cho những thứ như thay đổi kích thước và tỷ lệ cho trình duyệt.

Nhìn chung, plugin này hoạt động tốt nhất cho những người nhận thấy rằng chủ đề của họ chặn khả năng thêm nền hoặc có thể họ đang gặp sự cố với công cụ nền WordPress tích hợp sẵn. Nó ghi đè những gì bạn có trên WordPress và thêm nút Nền đặc biệt trong bảng điều khiển WordPress của bạn để tải lên ngay lập tức một hình ảnh từ máy tính của bạn.

Thats tất cả để có nó!

Plugin cũng có phiên bản Premium cung cấp khả năng mở rộng được cải thiện, hỗ trợ số lượng hình nền không giới hạn và các hiệu ứng độc đáo, v.v.

Nền WordPress nâng cao

AWB - Advanced WordPress Backgrounds plugin
AWB – Plugin Nền WordPress nâng cao

Plugin Advanced WordPress Backgrounds có một cách tiếp cận khác với nền WordPress, cho phép bạn tận dụng các hiệu ứng độc đáo làm tăng thêm gia vị cho nền của bạn. Một ví dụ về điều này là nền thị sai, có thể từ từ di chuyển cùng với người dùng khi họ cuộn qua trang web của bạn.

Plugin cũng cung cấp hỗ trợ cho video. Nền video được lấy từ những nơi như YouTube và Vimeo hoặc thậm chí bạn có thể tự lưu trữ chúng.

Nó cũng có thể có một màu đồng nhất hoặc nền có kết cấu. Tất cả các loại nền này đều bao gồm các tính năng nâng cao mà bạn không thể tìm thấy với công cụ nền WordPress cơ bản. Một số trong số này bao gồm các hiệu ứng cuộn và mở rộng tỷ lệ, hiệu ứng độ mờ và các tùy chọn tốc độ tùy chỉnh.

Nó hỗ trợ Gutenberg và có thể đi cùng với trình chỉnh sửa WordPress tiêu chuẩn và nhiều trình xây dựng trang trực quan khác. Cuối cùng, bạn có thể sử dụng các tùy chọn CSS tùy chỉnh của nó để thêm nhiều phong cách hơn nữa cho hình nền của bạn.

Hình ảnh hoàn hảo + Retina

Perfect Images + Retina plugin
Hình ảnh hoàn hảo + plugin Retina

Plugin Perfect Images + Retina có ích như một giải pháp hai trong một. Nó cho phép bạn quản lý kích thước và giao diện hình nền WordPress đồng thời tái tạo hình thu nhỏ và thay thế hình ảnh. Việc quản lý hình ảnh khá ấn tượng và nó đặc biệt quan trọng đối với hình nền có độ phân giải cao.

Plugin cũng cung cấp một tính năng nền nếu bạn sử dụng phiên bản cao cấp của nó. Nó tạo ra một tương đương võng mạc cho hình ảnh nền đó để hình ảnh trông giống như chúng được yêu cầu, ngay cả trên màn hình có độ phân giải cao.

Sự bảo trì

Maintenance plugin with WordPress background image
Plugin bảo trì với hình nền WordPress

Bảo trì là một plugin đơn giản và dễ sử dụng để thiết kế các trang bảo trì và sắp ra mắt. Plugin Bảo trì có cả phiên bản miễn phí và cao cấp, nhưng phiên bản miễn phí đủ để kích hoạt trang bảo trì và thêm hình nền với văn bản và trường lớp phủ.

Bạn thậm chí có thể tải lên biểu trưng của riêng mình, tùy chỉnh những thứ như phông chữ và biểu tượng, và chọn nhiều mẫu khác nhau với hình nền đẹp của riêng chúng. Bạn cũng có thể cài đặt nhiều mẫu được tạo sẵn, nhưng hầu hết chúng đều yêu cầu giấy phép cao cấp của plugin.

Bản tóm tắt

Một hình nền WordPress cơ bản không cần thêm nỗ lực để thêm và hiển thị trên toàn bộ trang web của bạn. Đó là một chức năng được tích hợp trong WordPress Core, vì vậy, thật dễ dàng để hoán đổi hình nền cho các sự kiện hoặc ngày lễ nhất định. Bạn cũng có thể gắn bó với một nền tảng suốt đời.

Bên cạnh nền WordPress chuẩn, bạn có thể sử dụng mã CSS, plugin và trình tạo trang tùy chỉnh để triển khai tất cả các loại nền trên trang web WordPress của mình. Từ nền hình ảnh trên các trang cụ thể đến nền cho nút menu của bạn, khả năng là không có hồi kết.

Bây giờ là lúc để thêm nền mà bạn luôn muốn vào trang web WordPress của mình.

Chúng ta có bỏ lỡ điều gì không? Vui lòng để lại nhận xét nếu bạn gặp sự cố khi thêm hoặc quản lý hình nền WordPress.


Tiết kiệm thời gian, chi phí và tối đa hóa hiệu suất trang web với:

  • Trợ giúp tức thì từ các chuyên gia lưu trữ WordPress, 24/7.
  • Tích hợp Cloudflare Enterprise.
  • Tiếp cận khán giả toàn cầu với 34 trung tâm dữ liệu trên toàn thế giới.
  • Tối ưu hóa với Giám sát Hiệu suất Ứng dụng được tích hợp sẵn của chúng tôi.

Tất cả những điều đó và hơn thế nữa, trong một kế hoạch không có hợp đồng dài hạn, hỗ trợ di chuyển và đảm bảo hoàn tiền trong 30 ngày. Kiểm tra các kế hoạch của chúng tôi hoặc nói chuyện với bộ phận bán hàng để tìm ra kế hoạch phù hợp với bạn.