全畫面/全幅 櫥窗slider
如何在網站的首頁上放置全畫面/全幅 櫥窗slider
圖片 最佳解析度 1920x1070
1.打開Weebly的HTML / CSS編輯器 “主題”,然後點擊左下方的“編輯HTML / CSS”。
2:創建新的頁面佈局
要創建新的頁面佈局,在左側 點擊 “標題類型>新標題類型”,然後 將此頁面佈局命名為 “ slider.html”。
現在,在左側,點擊 “ no-header.html”頁面佈局,在右側,選擇並複製此文件中的所有HTML代碼,在左側,
點擊新的“ slider.html”頁面佈局,在右側,選擇並刪除此文件中的所有HTML代碼,
然後貼上從“ no-header.html”頁面佈局複製的HTML代碼。
3.在“ slider.html”頁面佈局中,在右側,向下滾動並找到您的main 主要內容區域的<div>。
將下面的代碼複製貼上到主要內容區域的<div>上方:
<div id="slider">{slider:content}</div>
4.
在左側,找到 “ main.less”CSS文件。向下滾動並找到主題的主要內容CSS代碼,
然後將滑塊的CSS代碼貼上到main 主要內容CSS代碼正下方,或是找到 .container { 的上方位置貼上
#slider {
background:#fff;
position:relative;
z-index:0;
}
#slider > div > div > div,
#icontent #slider > div > ul > li > .element-box > div > div > div {
height:initial!important;
}
#slider .wslide-slide-inner1 {
position: initial!important;
}
#slider .wslide-slide-inner2 {
top: 0!important;
left: 0!important;
width: 100%!important;
}
#slider .wslide-slide-inner2 img {
width: 100%!important;
}
#slider .wslide-caption-text {
font-family: 'Yanone Kaffeesatz';
font-size: 2em;
}
5.選擇“slider”頁面佈局
回到Weebly編輯器後,將新的slider頁面佈局應用於首頁。為此,請轉到頂部,左側的“頁面”,
選擇您的主頁-或您選擇的任何頁面-並在“頁面類型”選擇 “slider”。
注意:如果無法選擇“slider”頁面佈局,只需更新您的Weebly編輯器即可。
6.增加 幻燈片“ Slideshow”元件
選擇在頂部“建構”,將“幻燈片”元件和拖放它到最頂端區域。此拖放區域將跨越您網站的整個寬度。
出現``幻燈片''元素的幻燈片樣式選項時,點擊 ``簡單幻燈片'',然後點擊 `` 繼續''。
增加圖像,並確保其尺寸為 1920x1070。
上載圖像後,點擊幻燈片,點擊 “間距”,然後將上邊距和下邊距設置為“ 0”。
完成 ! 太棒了 !
圖片 最佳解析度 1920x1070
1.打開Weebly的HTML / CSS編輯器 “主題”,然後點擊左下方的“編輯HTML / CSS”。
2:創建新的頁面佈局
要創建新的頁面佈局,在左側 點擊 “標題類型>新標題類型”,然後 將此頁面佈局命名為 “ slider.html”。
現在,在左側,點擊 “ no-header.html”頁面佈局,在右側,選擇並複製此文件中的所有HTML代碼,在左側,
點擊新的“ slider.html”頁面佈局,在右側,選擇並刪除此文件中的所有HTML代碼,
然後貼上從“ no-header.html”頁面佈局複製的HTML代碼。
3.在“ slider.html”頁面佈局中,在右側,向下滾動並找到您的main 主要內容區域的<div>。
將下面的代碼複製貼上到主要內容區域的<div>上方:
<div id="slider">{slider:content}</div>
4.
在左側,找到 “ main.less”CSS文件。向下滾動並找到主題的主要內容CSS代碼,
然後將滑塊的CSS代碼貼上到main 主要內容CSS代碼正下方,或是找到 .container { 的上方位置貼上
#slider {
background:#fff;
position:relative;
z-index:0;
}
#slider > div > div > div,
#icontent #slider > div > ul > li > .element-box > div > div > div {
height:initial!important;
}
#slider .wslide-slide-inner1 {
position: initial!important;
}
#slider .wslide-slide-inner2 {
top: 0!important;
left: 0!important;
width: 100%!important;
}
#slider .wslide-slide-inner2 img {
width: 100%!important;
}
#slider .wslide-caption-text {
font-family: 'Yanone Kaffeesatz';
font-size: 2em;
}
5.選擇“slider”頁面佈局
回到Weebly編輯器後,將新的slider頁面佈局應用於首頁。為此,請轉到頂部,左側的“頁面”,
選擇您的主頁-或您選擇的任何頁面-並在“頁面類型”選擇 “slider”。
注意:如果無法選擇“slider”頁面佈局,只需更新您的Weebly編輯器即可。
6.增加 幻燈片“ Slideshow”元件
選擇在頂部“建構”,將“幻燈片”元件和拖放它到最頂端區域。此拖放區域將跨越您網站的整個寬度。
出現``幻燈片''元素的幻燈片樣式選項時,點擊 ``簡單幻燈片'',然後點擊 `` 繼續''。
增加圖像,並確保其尺寸為 1920x1070。
上載圖像後,點擊幻燈片,點擊 “間距”,然後將上邊距和下邊距設置為“ 0”。
完成 ! 太棒了 !