Banners are an important element of website design and can be used to enhance the user experience, increase engagement, and drive conversions.
🌟 Ex.g. Look at the top of this page.
To learn more about banner component - Click here.
A banner is typically a horizontal bar that appears at the very top of a webpage, often referred to as a “top banner” or “header banner”.
It usually contains important information or calls to action that are designed to catch the user’s attention and encourage them to take action.ds.page.banner
inside your page then refer below code snippet.-- fastn.dependency: fastn-community.github.io/banner
-- import: fastn-community.github.io/banner -- ds.page: show-banner: true -- ds.page.banner: -- banner.banner: If you like fastn, give it a ⭐️ star on [GitHub.](https://github.com/fastn-stack/fastn/) Also, follow us on [Twitter](https://twitter.com/FifthTryHQ), [Linkedin](https://www.linkedin.com/company/fastn-stack/), [Instagram](https://www.instagram.com/fastn_stack/) -- end: ds.page.banner -- ds.page.body: This is body content of your page. -- end: ds.page
Click on the download icon of the above code-block. page.ftd
file will be downloaded.
fastn serve
on your localhost. Access your localhost in the browser and open http://127.0.0.1:8000/page/
url, you will see page with a banner as seen on top of this page.FASTN/ds.ftd
global module that helps you to keep all your global properties and configurations in one .ftd
file.-- fastn.dependency: fastn-community.github.io/banner
FASTN/ds.ftd
module of midnight-rush
?You can modify a FASTN/ds.ftd
module which is already added inside your fastn
package.
Let’s learn how to modify FASTN/ds.ftd
module:
Edit FASTN/ds.ftd
module and enable show-banner: true
ftd.ui list banner:
property from page
component and add -- ftd.ui list page.banner
and its content inside your FASTN/ds.ftd
file below -- end: page.footer
as shown in below code snippet. -- import: fastn-community.github.io/banner -- import: fastn-community.github.io/midnight-rush/common -- import: fastn-community.github.io/midnight-rush export: author-bio,code,compact-text,featured-post,h0,h1,h2,h3,iframe,image,image-first,image-in-between,link,link-group,markdown,not-found-1,not-found-2,output,post,posts,rendered,tip,without-image,youtube -- component page: children wrapper: optional caption title: optional body body: boolean sidebar: true ftd.ui list right-sidebar: optional string document-title: optional string document-description: optional ftd.raw-image-src document-image: optional string site-name: $common.site-name optional ftd.image-src site-logo: $common.site-logo boolean full-width: false boolean blog: false boolean show-banner: false ftd.ui list banner: ftd.ui list hero: -- midnight-rush.page: $page.title site-logo: $page.site-logo body: $page.body show-footer: true right-sidebar: $page.right-sidebar sidebar: $page.sidebar document-title: $page.document-title document-description: $page.document-description document-image: $page.document-image github-url: https://github.com/fastn-community/midnight-rush/ github-icon: true full-width: $page.full-width blog: $page.blog show-banner: $page.show-banner banner: $page.banner hero: $page.hero -- midnight-rush.page.footer: -- midnight-rush.footer: site-logo: $common.site-logo site-url: $common.site-url logo-width: $common.logo-width logo-height: $common.logo-height footer-links: $common.footer-links social-links: $common.social-links -- end: midnight-rush.page.footer -- ftd.ui list page.banner: -- banner.banner: If you like fastn, give it a ⭐️ star on [GitHub.](https://github.com/fastn-stack/fastn/) Also, follow us on [Twitter](https://twitter.com/FifthTryHQ), [Linkedin](https://www.linkedin.com/company/fastn-stack/), [Instagram](https://www.instagram.com/fastn_stack/) -- end: page.banner -- ftd.column: spacing.fixed.em: 0.8 width: fill-container children: $page.wrapper -- end: ftd.column -- end: midnight-rush.page -- end: page
Click on the download icon of the above code-block. ds.ftd
file will be downloaded.
Replace FASTN/ds.ftd
file with this downloaded file inside your fastn
project.
Then deploy or run fastn serve
on your localhost. Access your localhost in the browser e.g.http://127.0.0.1:8000/
you will see all your pages with a banner on top of every page.