簡易語法操作教學

2022-05-262022-05-27

【教學】Banner廣告圖｜設定滿版呈現

您是否覺得您的網站Banner圖不夠吸引消費者的目光呢？
現在請跟著以下步驟就可以輕鬆將Banner圖設定為滿版囉！

【前台呈現樣式示意圖】
▼ Banner未滿版

▼ Banner滿版

********************以下為Banner設定滿版操作步驟 ***********************

步驟 1：頁面新增Banner圖
網站維護＞頁面維護＞首頁＞點選放大鏡＞新增「一頁式banner輪播 jo」元件，上傳Banner圖檔〔建議尺寸寬1920、高度不限〕及編輯元件內容。

步驟 2：設定「一頁式banner輪播 jo」元件滿版
（1）網站維護＞頁面維護＞首頁＞點選放大鏡
（2）點選「設定」
（3）是否滿版欄位選擇「是」
（4）點選下方藍色按鈕【設定】

步驟 3：設定「頁面」滿版
（1）網站維護＞頁面維護＞首頁＞點選鉛筆
（2）頁面滿版欄位選擇「是」
（3）點選下方藍色按鈕【儲存】

以上步驟設定完成後，即完成Banner滿版設定囉。

若貴司針對此功能有操作上的疑問或者是建議歡迎加入我們JOO的LINE@客服詢問唷~ LINE@ : https://lin.ee/66MSHfk （@427sdtqt）

2021-11-042022-05-27

【教學】自適應 YOUTUBE 影片｜隨螢幕比例RWD

直接使用YouTube產生的嵌入碼，使用行動裝置瀏覽網頁會有爆版的情況，

為了讓YouTube影片在電腦與手機都能讓完整呈顯，需要對這段原始碼做些微調整！

使用YouTube的嵌入碼，如下：

↑這段嵌入碼是尚未修改過的

直接貼進網頁並用手機瀏覽時會如下圖呈現：

難到不能讓影片也隨著螢幕同比例RWD嗎？

「可以的！」只要對YouTube產生的嵌入碼，稍作修改就沒問題囉！

【步驟一：將以下原始碼完整的複製下來】

<!–嵌入碼貼在這下面–>

<!–嵌入碼貼在這上面–>

</div>

<style>

.ytb_video_box{ max-width:1180px; padding:5px; margin:0 auto; background:#FFF; -webkit-border-radius:8px; -moz-border-radius: 8px; border-radius:8px; margin-bottom:10px;}

.ytb_video_container { max-width:1180px; margin:0 auto; position:relative; height:658px; overflow:hidden;}

.ytb_video_container iframe,.ytb_video_container object,.ytb_video_container embed { position:absolute; top:0; left:0; width:100%; height:100%; max-height:658px;}

@media screen and (max-width:1280px) {

.ytb_video_container{ padding-bottom:56%; height:0;}

}

</style>

【步驟二：把YouTube產生的嵌入碼，一起貼進來】

<!–嵌入碼貼在這下面–>

<!–嵌入碼貼在這上面–>

</div>

<style>

.ytb_video_box{ max-width:1180px; padding:5px; margin:0 auto; background:#FFF; -webkit-border-radius:8px; -moz-border-radius: 8px; border-radius:8px; margin-bottom:10px;}

.ytb_video_container { max-width:1180px; margin:0 auto; position:relative; height:658px; overflow:hidden;}

.ytb_video_container iframe,.ytb_video_container object,.ytb_video_container embed { position:absolute; top:0; left:0; width:100%; height:100%; max-height:658px;}

@media screen and (max-width:1280px) {

.ytb_video_container{ padding-bottom:56%; height:0;}

}

</style>

使用修改後的原始碼，影片就能如下圖一樣完整呈現囉！

【進階調整】

如何修改影片的最大寬度？

找到以下這一段↓

.ytb_video_box{ max-width:1180px; padding:5px; margin:0 auto; background:#FFF; -webkit-border-radius:8px; -moz-border-radius: 8px; border-radius:8px; margin-bottom:10px;}

黃色標記的地方可以隨適合的寬度自行調整喔！

2020-11-032022-05-27