影片教學

WordPress 響應式 網頁設計 RWD:最佳化圖片尺寸

在WordPress的響應式網頁設計(RWD)中,最佳化圖片尺寸能顯著提升頁面載入速度和用戶體驗。

為了達到這一點,建議依據不同裝置設定合適的圖片尺寸,桌機可選擇較大圖片,而手機則使用較小尺寸。

WordPress中的「Responsive Image」功能會自動根據裝置顯示適合的圖片大小。

 


1. 隱藏首頁沙發案例區塊

首頁中的沙發案例區塊需要隱藏。為此,我們可以依照以下步驟進行設定:

  1. 進入後台的「外觀」選單,選擇「頁面」並點選「首頁」。
  2. 找到需要隱藏的沙發案例區塊,點擊編輯按鈕。
  3. 向下滑動至「disable row」的選項,勾選後即可隱藏該區塊。

目前我已在前台測試,該區塊已成功隱藏。


2. 調整圖片顯示尺寸

您還提到桌機上的圖片看起來較大,但在手機上顯示則過小。我建議以下解決方法:

  • 調整圖片尺寸:將圖片的尺寸設為1200 x 667像素,這樣會更符合手機和桌機的顯示效果。

  • 分開設定桌機與手機圖片:若您希望桌機與手機顯示不同的圖片,可以使用後台的響應式設定來分別調整。具體步驟如下:

    1. 在後台編輯器中找到圖片設定,點擊「responsive」(響應式)選項。
    2. 勾選「手機隱藏」,儲存後圖片只會在桌機和平板上顯示。
    3. 接著複製該圖片區塊,再次進行設定,這次勾選「桌機和平板隱藏」。
    4. 儲存後,這個區塊只會在手機上顯示。您可以上傳尺寸為1000 x 667像素的圖片,使其在手機上更契合。

3. 結語

以上是兩種方法,您可以選擇適合的方式。如果有任何問題,隨時聯繫我。謝謝!

最新文章

原創、翻譯及轉貼的資訊都在這裡。

網站是實現夢想的工具! 開始準備建置您的網站了嗎? 加Line好友
益盛科技

我們重視設計質感與行銷價值

。網頁設計。程式設計。Joomla教學。

 

聯絡資訊

ring@des13.com

點此加我們LINE  @igodos 加line好友

406台中市北屯區文心路四段955號11樓之2(需預約諮詢)

04-37072202 /  0919-413187 

thedes13 

 
OMO電商 社群整合,輕鬆提升5倍轉換率,追蹤客戶行為,自動化行銷!想了解,快與我們聯絡! ×
點此加我們LINE 連結line帳號
Our website is protected by DMC Firewall!