前言介紹
- 這款 WordPress 外掛「Awesome Sticky Header by DevCanyon」是 2015-07-13 上架。
- 目前有 300 個安裝啟用數。
- 上一次更新是 2015-11-01,距離現在已有 3471 天。超過一年沒更新,安裝要確認版本是否可用。以及後續維護問題!
- 外掛最低要求 WordPress 4.2.2 以上版本才可以安裝。
- 有 8 人給過評分。
- 還沒有人在論壇上發問,可能目前使用數不多,還沒有什麼大問題。
外掛協作開發者
外掛標籤
header | sticky menu | sticky header | awesome header |
內容簡介
如需支援請使用我們的專屬支援論壇。
完全掌控您的粘性標頭。 設置您的菜單,子菜單,次級菜單,搜索,您的顏色,背景或透明度,您的徽標等等!
在插件的管理區域中的頁面中僅預覽您的設置更改。 在您更改菜單位置,鏈接顏色,背景時,您可以立即看到它在您的網站上的外觀。
如果您需要整個頁眉的替換(包括粘性頁眉),包括頂部和底部頁眉部分以及更多菜單和面包屑,則可以購買PRO 版本稱為Awesome Header,或轉到Playground檢查它提供的常見功能的演示。
設置
DevCanyon's Awesome Sticky Header有很長的設置列表,您可以使用這些設置來使粘性標頭看起來您想要的那樣。
概況
這些是您粘性標頭的通用設置。
固定滾動位置-當滾動下多少像素時會顯示您的粘性標頭
標頭寬度-內部內容(容器)寬度,使您的標題標高100%的瀏覽器窗口寬度,但標誌和菜單與您的網站內容匹配
全寬度拉伸-您的標題是否將標高標高100%的瀏覽器窗口寬度
標題位置-如果您的主題沒有內容中心導向,例如Twenty Fourteen主題,則可以將標題放在左側/右側
展示說明-展示/隱藏網站說明(標語)
固定動畫-從頂部滑動或沒有滑動動畫顯示固定標頭
懸停過渡-用於鏈接懸停顏色或背景的過渡效果
如果您在外觀->菜單中有菜單項目說明,它也將顯示在粘性標頭中。
標頭
主要導航,子菜單,標誌,標語等的詳細設置。
選擇菜單-如果您在外觀->菜單下創建了至少一個菜單,則可以選擇哪個菜單將放到粘性標頭中
菜單深度-子菜單的三個導航級別
標誌圖像上傳-上傳要用作徽標的圖像
選擇徽標類型-標誌也可以是文本鏈接。如果是圖像,可以設置最大寬度
菜單內填充(上/下)-通過在主菜單項目頂部/底部設置填充來決定您的粘性標頭大小
徽標填充(上/下)-同上,但是在徽標/說明的頂部/底部增加了額外的空間
菜單位置-您可以使菜單居中;這樣標誌也將在菜單上方居中
菜單項目填充(左/右)-菜單項目的左/右距離-不要將它們放得太近!😉
背景圖像URL-為粘性標頭選擇背景圖像並/或設置重複圖案(例如,重複-x)
背景顏色-選擇背景實心顏色
網站標題顏色-如果將徽標設置為文本類型而不是圖像,則是您徽標的顏色
網站說明顏色-徽標下的描述文本的顏色(如果在通用設置中啟用)
菜單顏色-菜單項目的顏色
網站標題字體大小-如果徽標設置為文本類型而不是圖像,則為站點標題的字體大小
網站說明字體大小-用於描述文字的字體大小
原文外掛簡介
For support requests please use our dedicated support forums.
Get maximum control over your sticky header. Set your menu, submenus, secondary menu, search, your colors, backgrounds or transparency, your logo and much more!
Live preview of your settings changes in plugin’s page in admin area. After you change menu position, link colors, backgrounds, you can see it immediately how will it look on your website.
If you need the whole header replacement including the sticky header, with Top and Bottom header parts and more menus and breadcrumbs, you can buy PRO version called Awesome Header or go to Playground to check out demos of what common features it offers.
Settings
Awesome Sticky Header by DevCanyon has long list of settings you can use to make your sticky header look the way you want.
General
These are general settings for your sticky header.
Sticky scroll position – when will your sticky header show, after how many pixels scrolled down
Header width – inner content (container) width, so your header stretches 100% of the browser window width, but logo and menus match your website’s content
Full width stretch – whether or not your header stretches 100% of the browser window width
Header position – your header can also be placed left/right if your theme hasn’t content middle oriented, just like Twenty Fourteen theme
Show description – show/hide site description (tagline)
Sticky animation – slide sticky header from top or appear without sliding animation
Hover transition – transition effect for link hover colors or backgrounds
In Appearance -> Menus if your menu item has description, it will be whown in sticky header too.
Header
Detailed settings for main navigation, sub-menus, logo, tagline, etc.
Choose menu – if you have created at least one menu under Appearance -> Menus, you can choose which menu will go to sticky header
Menu depth – three levels of navigation for sub-menu
Logo image upload – upload image to be used as your logo
Choose your logo type – logo can also be text link; if it’s image, you can set max. width for it
Menu padding (top/bottom) – decide how big is your sticky header by putting padding on top/bottom for main menu items
Logo padding (top/bottom) – same as above but top/bottom extra space for logo/description
Menu position – you can have menu centered; this way logo is centered too, above menu
Menu items padding (left/right) – left/right distance of menu items – don’t put them too close! 😉
Background image URL – choose background image for your sticky header and/or set repeat pattern (e.g. repeat-x)
Background color – choose background solid color
Site title color – color of your logo if it’s set as text type instead of image
Site description color – color for your description text under logo (if enabled in general settings)
Menu color – color for menu items
Site title font size – font size for your site title if it’s set as text type instead of image
Site description font size – font size for your description text under logo (if enabled in general settings)
Menu font size – font-size for menu items/sub-menu
Menu item hover background color – main menu item’s background color on hover effect
Top border – top border color of sticky header; you can set width in pixels for it
Bottom border – bottom border color of sticky header; you can set width in pixels for it
Hamburger icon color – this plugin has ability to hide your menu on small screens and show this icon – set color for it; when it’s clicked, menu is shown as drop-down
Hide menu if narrower than – decide at which screen width your menu hides (becomes responsive)
Include search box – at the end of menu you can have search icon which expands search form on hover
Include secondary menu – true or false; secondary menu is additional menu which is seen as last menu item, which on hover displays one more menu (and can show more, which is doable through filters)
Choose secondary menu – which menu goes as secondary
Sub-menu background color – background color for the whole sub-menu
Sub-menu item hover background color – hover color effect for sub-menu items
Sub-menu orientation – your sub-menu items can expand to left side too!
Custom CSS
Add your own styles, such as margins, paddings, borders, etc.
This is NOT custom CSS for the whole website, only for sticky header.
Extras
Some more featues will go in here!
Transparency level – background transparency for sticky header (value range is from 0 to 100); works only when solid background color is set as background color
Sub-menu transparency level – background transparency for sub-menu (value range is from 0 to 100)
Filters
If you are awesome developer, there is plenty of space to extend sticky header’s content:
asmh_middle_before – filter for content before sticky header’s content
asmh_middle_after – after sticky header’s content
asmh_nav_menu_item – single menu item
asmh_middle_header – filter whole header’s content
asmh_middle – filter header container’s content
asmh_middle_menu_before – before main menu
asmh_middle_menu_after – after main menu
asmh_middle_menu – replace menu with something else – whole menu filter
asmh_before_brand – add content before logo & tagline area
asmh_after_brand – after logo & tagline area
asmh_nav_collapse – hamburger icon filter – use your custom button for expanding responsive menu
asmh_brand – filter logo (site title text or image)
asmh_tagline – filter site description
asmh_secondary_menu_before – for secondary menu add content before secondary menu
asmh_secondary_menu – filter for secondary menu
asmh_secondary_menu_after – add content after secondary menu
各版本下載點
- 方法一:點下方版本號的連結下載 ZIP 檔案後,登入網站後台左側選單「外掛」的「安裝外掛」,然後選擇上方的「上傳外掛」,把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二:透過「安裝外掛」的畫面右方搜尋功能,搜尋外掛名稱「Awesome Sticky Header by DevCanyon」來進行安裝。
(建議使用方法二,確保安裝的版本符合當前運作的 WordPress 環境。
1.0.1 | 1.0.2 | 1.0.3 | 1.0.4 | trunk |
延伸相關外掛(你可能也想知道)
Sticky Header Effects for Elementor 》Sticky Header Effects for Elementor 是一個插件,為 Elementor Pro 2.0 中引入的「sticky」標題特性添加了實用選項。當訪客開始向下滾動頁面時,它為用戶提...。
Sticky Menu & Sticky Header 》這款 WP Sticky Menu (或 Sticky Header) On Scroll 外掛能讓你在往下滾動並滑動到頂部時,讓任何頁面上的元素保持固定位置。通常會用於讓導覽列固定在頁面上...。
Floating Notification Bar, Sticky Menu on Scroll, Announcement Banner, and Sticky Header for Any Theme – My Sticky Bar (formerly myStickymenu) 》使用 myStickymenu 為您的網站創建一個美麗的通知欄。此外,此粘性菜單外掛還可以在滾動到一定像素點後讓您的菜單或標頭保持粘性。您也可以使用它來創建歡迎...。
JetSticky For Elementor 》JetSticky 是一款外掛,可讓使用 Elementor 建立的區段和欄位具有固定效果,在頁面向上或向下滾動時總是保持在視線中。, 當您需要將標題和區塊固定在畫面上時...。
Xpro Theme Builder For Elementor – FREE 》or Theme Builder 外掛介紹, 透過這個強大的 WordPress 外掛,您可以為文章類型、部落格歸檔、WooCommerce 產品和分類、搜尋頁面、404 頁面等創建自定義佈局...。
Announcer – Sticky Message Banner, Notification Bar – Add to Top, Bottom of your Website 》使用 Announcer 外掛程式,您可以在網站上新增美觀且專業的通知條。您可以顯示自訂的訊息,例如促銷活動、Cookie 使用注意事項、歡迎訊息、隱私權政策聲明等...。
Advanced Floating Content Lite 》它在您的免費測試網站上試用 點擊此處, https://tastewp.com/new?pre-installed-plugin-slug=advanced-floating-content-lite, Advanced Floating Content 外...。
WordPress Notification Bar 》一個快速和簡單的通知欄和呼籲行動的外掛,可用於您的網站。, , 立即升級到通知欄專業版本! », , 好處、功能和選項:, , 快速且易於安裝, 自定義消息...。
Fixed And Sticky Header 》這個 WordPress 套件可以固定標題或選單,讓它們在網頁上一直可見。, 這是一個非常好用的功能,讓使用者瀏覽網頁更快速。, 在設定選項裡(Fixed header),您...。
Sticky Header by ThematoSoup 》如需支援,請使用我們的專屬支援論壇。, 「Sticky Header WordPress」外掛可讓您的標題條件時顯示,這是一個非常棒的功能,可讓使用者更快速瀏覽網頁並消費更...。
Sticky Header 2020 》此外掛為原生自訂樣式工具提供自定義功能,並提供設定使標題欄黏著,包括設定捲動縮小、陰影、背景、間距、文字、選單和圖示顏色等。此外掛相容於 Twenty Twe...。
WP Sticky Anything – Sticky Menu & Sticky Header, Sticky Sidebar 》All-in-One WP Sticky Anything, All-in-One WP Sticky Anything on Scroll 插件可讓您在網站上使任何元素固定。它也適用於 Elementor 頁面建構器。, 有時我...。
Sticky Header On Scroll 》這是一個能夠在 WordPress 網站上輕鬆安裝的一鍵外掛程式。您只需要將主頁頭部的 class(或 ID)添加到外掛程式輸入框內即可使頁面在滾動時固定主標頭。此外...。
Aploblocks – Styling and Patterns for the block editor 》AploBlocks 將額外功能添加到 WordPress 核心區塊中。它專為區塊主題設計,可幫助您輕鬆實現令人難以置信的設計功能。如果您知道如何使用區塊編輯器,那麼您...。
Header Builder for Elementor by WPDaddy 》WPDaddy Header Builder是WordPress Elementor外掛的視覺化前端拖放生成器,您可以輕鬆地在使用Elementor頁面建構器開發的網站上建立任何標題。它非常易用且...。