Webby Monks

The Blog

Digital agencies' best practices about modern web development, digital and inbound marketing.

How To Create a Full Screen Website On HubSpot COS/CMS Using fullpage.js

Since late 2015, we have witnessed more and more sites using a full-page photograph as a background in full screen websites. For those seeking more flexibility, are also using slideshows and videos for their full-screen image backgrounds.

What Is A Full Screen Website?

Full screen websites fill up the entire browser regardless of it being on the desktop or the mobile. Web designers now have the ability to be bold while using full screen images on website background, thanks to the growing screen sizes and resolutions and internet speeds reaching new levels.

Most of the full screen websites are precise about the dimension, using JS or CSS to ensure that the visible part is exactly the size of the browser window. On achieving this, you could place the elements at the extremes with CSS positioning even if the window is resized.

A full-screen website provides an exceptional user experience. The content to image ratio becomes very less and marketers need to ensure that the content is crisp that provides more information by saying less. These kind of websites are more visual in nature, which gives the marketers a challenge to opt for a design that is one step ahead of the conventional design.

Is The Full Screen Website Really That Popular?

Well, you won’t be skeptical once you look at the big brands that have adopted full screen for their online presence.

1-7.png

Here are the links to some of the websites:

Is It Possible To Create A Similar Experience On The Hubspot COS/CMS Platform?

Creating a full screen website has been a challenge for HubSpotters as it is evident from the number of posts where users admit that implementing a full screen website is complicated. Here are some forum posts:

2-6.png

One more on Stack overflow:

3-6.png

The Root Cause Of Full Screen Website Challenge On HubSpot COS/CMS

Since it is based on Twitter Bootstrap framework which is template based, the HubSpot COS/CMS is a completely module based web development platform. These modules are nested with classes generated by the HubSpot COS/CMS framework. However, in order to create a full screen website, you will require a fullpage.js that requires a simple structure. This mismatch between the nested COS/CMS and simple fullpage.js causes integration issues and as a result it becomes a challenge to create a full screen website on COS/CMS.

Let’s Compare How fullpage.js Could Be Achieved With HTML & Hubspot COS/CMS?

With the coding given below for HTML and HubSpot COS/CMS platform we are looking to achieve the following webpage.

4-6.png

 

{{cta(‘e598bdcf-639c-46b3-8c90-feb2f0efdcbc’)}}

 

Coding On HTML

There are 3 steps for creating the above given page via HTML:

  1. Create HTML:

1. The HTML structure for inserting sections with sliders will be as follows:

5-5.png

  1. 2. Include fullpage js and css
  2. 3. Bind fullpage js with html, by adding a script element on the header of the site:

6-4.png

Coding On HubSpot COS/CMS

Again there are 3 steps, however being a nested framework it becomes lengthy and complicated.

  1. 1. HTML required:

The same HTML gets nested on  HubSpot COS/CMS, as shown on below image

7-4.png

Next, you will need JS support to create a uniform structure and make it feasible for the fullpage.js plugin to bind.

8-3.png

Once you write this above code it will create the structure given below:

9.png

  1. 2. Include the JS and CSS of fullpage as given below:

CSS File :

https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.css

Js File :

https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.js

3. Now write the binding script that will initialize fullpage plugin, please see below code.

11-2.png

Once you have written code, you will see how UI will change, a live demo example link is included after below image

12-2.png

 

{{cta(‘e598bdcf-639c-46b3-8c90-feb2f0efdcbc’)}}

 

Advantages Of A Full Screen Website With fullpage.js Plugin.

The round-up of all the below given advantages boils down to one fact that a full screen website provides a win-win situation for users and developers in terms of UX and functionality respectively.

  • It gives users total control over website scrolling.
  • It’s documentation is logical and well-structured.
  • All the modern browsers are supported.
  • It is also ideal with old browsers that don’t support the CSS3.
  • It is totally responsive and renders across all mobile devices.
  • You get plenty of configuration options.
  • You get plenty of methods.
  • You get callback function.

 Conclusion

Web development has completely evolved to a stage where marketers have become an integral part of the whole process. A full screen website is a delight for the marketers as it says more visually and is successful in creating an environment that is tailor-made for the targeted audience. If there is any doubt regarding modern functionalities on the HubSpot.

 

The following two tabs change content below.
Dev Shah

Dev Shah

Dev is the Head of Marketing for HubSpot Development at WebbyMonks where he helps agencies towards Inbound Marketing tips and lead nurturing mantras. Dev utilizes and swears by the power of the HubSpot inbound marketing methodology. He loves to share valuable insights on HubSpot’s marketing software, content management system (CMS) and the best practices to set up successful inbound marketing campaigns.

Leave a Reply

Your email address will not be published. Required fields are marked *

Get your One time On-Page SEO with Monks

WCAG

Monks are expert in thorough SEO practices. Simply fill up the below form to optimize with us and get maximum results on page performance.

Thank you

We use cookies to improve your online experience and the service we offer. If you continue to use this site, we’ll assume that you’re happy to receive all cookies. Read our privacy and cookie policy