響應模式
響應模式

Elementor 響應模式行動版編輯教學

編輯修改Elementor網站頁面時,最後別忘了檢查行動版(響應模式)的內容需不需要修改唷!

目錄

有時候是不是明明已經修改了電腦版,但是行動版卻沒有改到、不是正確的內容?有可能你編輯的區塊,電腦版與行動版是要分開修改的唷!

在調整RWD版面時會因應不同情況使用區塊隱藏功能,在切換行動版時會比較準確的呈現完整的版面,若你在Elementor後台編輯時看到灰色物件代表該物件現在是隱藏的

接下來要教大家如何切換版面修改行動版的區塊(以Elementor 3.2.2版本示範):

切換 Elementor 響應模式

開啟該頁面的Elementor後台編輯,可以從前台進入,也可以從後台進入。(忘記怎麼進入後台可以看:如何進入編輯頁面?

mobile edit 1 1
elementor 後台編輯

左下角有一個電腦、手機的圖示,可以點選它切換響應模式。

mobile edit 2
響應模式

Elementor 響應模式介面

上排中間有電腦、平板、手機三個圖示可以點選,最右邊顯示目前網頁的寬度及高度。

可以看到目前頁面中有灰色的區塊,代表該區塊現在在電腦版是隱藏的,在前台並不會看到它。

mobile edit 2 1
行動裝置符號

我們將介面切換到平板模式,可以看到剛剛隱藏的區塊現在變成有顏色的區塊,代表它在平板時會呈現,而剛剛電腦版的彩色區塊現在變成灰色區塊,代表它現在是隱藏的。

你可以在平板模式修改編輯彩色區塊,讓它跟電腦版呈現的內容是一樣的。

mobile edit 3 1
平板模式

我們再切換到手機版看看,目前的手機螢幕寬高有百百種,最新更新的Elementor版本的響應模式可以直接拉左、右、下方調整你想看的螢幕寬高呈現。

在平板模式時也可以唷!若想看平板橫式時的呈現可以主動調整。

mobile edit 4 1
手機版模式

左邊的 Elementor 工具列收起,就可以看到前台在這個行動裝置寬度會呈現的樣子。灰色區塊也會隱藏起來

mobile edit 5 1
預覽畫面

修改好之後要記得按儲存唷!

資料來源:Mobile Responsive Editing

延伸閱讀:

各種ChatGPT及AI工具應用、指令手冊、解決方案,每週更新。
學習最新AI工具,就上Learn AI
AI如何讓工作更輕鬆、更有效率?立刻學習!
LA廣告-1
LA廣告-2
LA廣告-3
Related Post

最新文章

WordPress自架網站:架站前需知道的 11 個常見問題

這篇詳盡的指南將探討WordPress自架網站過程中可能遇到的常見問題,包括技術錯誤、安全風險、性能問題等。文章將提供針對每種問題的實用解決方案和預防策略,幫助讀者了解如何提升網站安全性、提高性能,並確保網站長期穩定運行。無論您是初學者還是有經驗的網站管理員,本文都將成為您不可或缺的資源。

hero section

如何創建出色的網站主頁橫幅(Hero Section)設計?

在本文中,我們深入探討如何創建出色的網站主頁橫幅 (Hero Section) 設計。從選擇相關的圖像到設計簡短、有力的標語,我們提供實用的技巧和建議,幫助您吸引用戶的注意力並引導他們實現目標。了解如何平衡視覺吸引力和用戶需求,確保您的網站主頁橫幅既美觀又高效。

WordPress 後台

WordPress 後台速度慢該如何解決?10+個簡單方法

本文探討了多種解決 WordPress 後台運行緩慢的策略,包括選擇性能更強的主機、精簡必要的外掛、以及定期清理和最佳化數據庫。我們還介紹了如何通過實施快取技術來提升網站速度。這些簡單實用的方法將幫助您改善 WordPress 後台的響應速度,提升整體網站的管理效率和用戶體驗。

網站架設費用

網站架設費用:從基本到進階配置的全面費用分析

本文將提供一個全面的網站建設費用分析,涵蓋從基礎設置到高級功能的所有成本要素。這包括域名、代管、設計、安全協議以及響應式網頁設計(RWD)等現代網站的必備技術。無論您是新手還是尋求升級現有網站的業主,這篇文章都將為您提供寶貴的指導和費用預算建議。

Selected Post

精選文章

網頁設計該知道的6件事

6 個關於網頁設計的重要事項

在這個不斷變化的網絡時代,網頁設計也經歷了巨大的變革。在開始或進行網站設計之前,有哪些重要事項值得了解呢?讓我們分享給您!