WIDGETS SPECIAL. VIDEO WIDGETS & PAGE SLIDERS


S04 | E04 | HOW TO MAKE A WEBSITE LIKE A PRO

Paul Davenport |  1 min read |  2 min video

Web School Series 4 Episode 4

NEW VIDEO IN PRODUCTION. STAY TUNED VIA YOUR INBOX OR SIGN UP NOW

We have seen how Sliders can be used as Image Sliders in Episode 3. This is quite easy to understand since we see Sliders being used frequently across the web. However, on MOBLE Widgets can feed any type of content and they don't always have to link to a Page or open up an image in a Lightbox popup. In this Episode, we start by looking at how Widgets can be used to display entire Pages in Sliders. Then we move on to show you how you can even display YouTube videos inside your own animated Widgets.


PAGE SLIDERS

Normally a Widget feed will display the Page Icon (thumbnail). It is possible however to display an entire page inside a Slider. This can be incredibly useful for Slide Show presentations to bring Keynote or Powerpoint style presentations to your website, with all the benefits of being able to be shared on the internet, and even password protected for special groups or individuals.

Page Sliders can also be incredibly useful galleries, instead of Image Sliders. Imagine if you had a series of Page Section with different background images, and you'd like to display your text in completely different ways for each Slider. With a Page Slider, anything is possible. You can even display Widgets in Widgets, Sliders in Sliders, or have a slide with a background image, followed by a background video, then Multi-Slider Gallery. Whatever you can do on a page, you can effectively display in a slide. Page Sliders are perfect for Sales and Marketing Presentations and are a valuable additional business tool that just works.


SETTING UP A PAGE SLIDER

We could easily call a Page Slider a Section Slider since more often than not you're going to set each page up as a 'Hidden' 'Section', and then Tag them. 

With this in mind, set up your Page Slider as follows:

  • Create a New Page,
  • Considering assigning it as 'Hidden' & 'Section',
  • In the Visual Page Editor considering using a fixed 'Height' to ensure all the Sections have a consistent height when they transition between each other. E.g. Set all the slides to a Height of 700px,
  • In the Page Settings, considering Hiding the Header and the Footer for the Page,
  • To create new slides quickly, simply clone the first page using the 'Clone Tool' in the main Page List area,
  • Apply the Sort Order of your slides.


Now you're ready to set up your Widget you can do this as follows:

  • Create a New Page. e.g. August Slider Show,
  • Create your layout and add a Widget,
  • Select 'Slider',
  • Select 'Section',
  • Select your 'Tags',
  • Select any other preferences that you would like to apply e.g. a Height of 700px,
  • Save. Now your Section pages will transition in a Slider.

PRO TIP ON PAGE SECTION HEIGHT

When creating new Page Sections for your Slider, you should ensure the height of each Section is exactly the same height. This will allow for a nice even look when the pages slide between each other.

Considerations for fixed height:

  • In the Page Editor, click the Pencil Icon of the innermost Frame (the one immediate wrapping your Widget).
  • Set the Height of the Frame E.g. to 700px.
  • Try not to write too much content, so that the content does not overflow the space available in the Layout. Because the image is a fixed height, surplus content will overflow the bottom of the Layout. If your content does overflow, consider changing the 'Overflow' settings to 'Scroll'. 
  • Save your Page.




MOBLE HQ
SYDNEY, AUSTRALIA

MOBLE designed and built our website in under a day. It was incredible to see how quickly the website came together. The MOBLE team took extra steps with the remaining time by designing a captivating javascript animation on the home page, they even tweaked our logo. We highly recommend MOBLE. We'll certainly be using MOBLE for future projects.




MOBLE OFFICE
SYDNEY, AUSTRALIA

A Page Slider showing a Background Image, Background Video, and Testimonial. Page Slider can display anything


VIDEO WIDGETS

On MOBLE it is possible to play YouTube, Vimeo and Wistia videos in your Widgets; such as Sliders, Grids, Masonry and Mix. You can effectively start your own video gallery on your website. This is often a surprising feature since these videos are just embed code and they are really playing from YouTube, Vimeo or Wistia Websites. So the fact that you can play this code in a gallery and even apply effects to them often leaves people wondering how it's done. Let's find out.


SETTING UP A VIDEO WIDGET

  • In the Files area, add a New File via the Top Right of the page,
  • Paste your YouTube, Vimeo or Wistia Embed code in the 'Embed Code' field,
    NB You can get video Embed Code via the share tools on YouTube, Vimeo or Wistia,
  • Notice that you can still give the Video a Title and Alt text. Therefore, you still get the SEO benefit for the file. If you just place the Embed code field on the Page you would not get this benefit. Therefore, we recommend completing the Title and Alternative text fields,
  • Finally, you should consider giving the file a Thumbnail. This is what we call the File URL. If you would like to use a Thumbnail of one of the images already uploaded to your MOBLE website:
    • 'Save' the page to Exist back to the Files Area,
    • Locate the image and ensure it is large enough. We recommend dimensions of 1440x810px,
    • YouTube Thumbnails are 1280x720px. This would also be a nice size to consider,
    • Click the blue URL to copy the File URL,
    • Now Head back to the Video Settings and Paste in the File URL. 
  • Save and Exit back to the files area,
  • Add another Video,
  • Ensure you Tag the Videos and give them a Sort Order,
  • When you're finished Tagging always remember to click Save.

MULTIMEDIA WIDGETS

Finally, it's worth reinforcing that any type of content can be displayed in a Widget at the same time. Here we see the same Widget with both Images and Videos. You can also add Blogs, Products, Events, and Pages.

You can also add Audio in the same way as Videos by using the embed code from your favourite audio platform, such as Soundcloud.

Both Video and Images in the same Widget. Click on a Video or an Image to see the interaction. If you add 'Pages' to your Widget the pages will automatically open as a page and not a popup.