Widgets

Devices

Estimated reading: 5 minutes 461 views

A Devices is a handy widget for showcasing information on various types of devices, such as mobile phones, tablets, laptops, and desktop computers.

You can customize the widget by adding backgrounds from color, images, or videos sourced from popular platforms like YouTube, Vimeo, Wistia, or Self hosted videos. This enables you to enhance the visual appeal of the widget to match your preferences or branding.

Additionally, you can choose whether or not to allow scrolling within the widget, and you can add text and various types of icons, including icons and Lottie, as part of your content within the device frames.

The Devices widget features the following controls:

Content

  • Device: Select devices from Mobile, Tablet, Laptop, Desktop, Browser.
  • Tablet Device: Select the tablet device(applicable for Tablet Device only).
  • Laptop Device: Select the laptop device(applicable for Laptop Device only)
  • Desktop Device: Select the desktop device(applicable for Deskto[ Device only)
  • Browser Themes: Choose from Dark or Light(applicable for Browser theme Device only)
  • Title: Enter the title.
  • Orientation: Select orientation from Portrait or Landscape(applicable for Mobile & tablet)
  • Orientation Control: Enable the option to turn on the orientation mode(applicable for Mobile & tablet).
  • Icon Type: Choose an icon from Lottie or an icon.
Devices: Content Settings
Devices: Content Settings
  • Background: Choose a background from Color, Image, or Video.
    • Color
      • Color: Select the background color.
Devices: Background Settings(Color)
Devices: Background Settings(Color)
  • Image
    • Image: Upload a background image.
    • Enable Scroll: Select the option to enable the scrolling.
      • Direction: Select direction from horizontal or Vertical.
      • Speed: Specify the speed.
      • Trigger: Choose trigger from Hover or Scroll.
Devices: Background Settings(Image)
Devices: Background Settings(Image)
  • Video
    • Type: Choose from YouTube, Vimeo, Wistia, or Self-Hosted.

Youtube

  • Link: Enter the YouTube video link.
  • Start time: Enter the video’s start time in seconds.
  • End Time: Enter the video’s end time in seconds.
  • Autoplay: Enable the option to autoplay the video while onload.
  • Related Videos From: Select either from the Current Video Channel or Any Random Video.
    • Player Control: Enable the option to display player controls like play, pause, volume, and more.
    • Modest Branding: Enable the option to disable the YouTube logo from displaying in the control bar.
  • Mute: Allow the option to mute the video.
Devices: Video Background Settings(Youtube)
Devices: Video Background Settings(Youtube)

Vimeo

  • Link: Enter the video link.
  • Start time: Enter the start time of a video.
  • Autoplay: Enable the option to autoplay the video while onload.
  • Loop: Enable the option to play video continuously.
  • Mute: Allow the option to mute the video.
  • Intro Title: Display the video’s Title.
  • Intro Portrait: Display author’s profile image.
  • Intro Byline: Display the video’s author’s name.
  • Controls Color: Select the color for video player controls.
Devices: Video Background Settings(Vimeo)
Devices: Video Background Settings(Vimeo)

Wistia

  • Link & Thumbnail Text: Enter the link and thumbnail text from the respective wistia’s video.
  • Autoplay: Enable the option to autoplay the video while onload.
  • Mute: Allow the option to mute the video.
  • Loop: Enable the option to play video continuously.
  • Show Playbar: Enable the option to display the progress bar of the video.
Devices: Video Background Settings(Wistia)
Devices: Video Background Settings(Wistia)

Self Hosted

  • External URL: If you have an external URL of the video, you can enable this option.URL: Insert a URL of the video
  • Choose File: If there is no external link to the video, you can upload the video.
  • Start time: Set the start time of a video.
  • End Time: Set the end time of a video.
  • Autoplay: Enable the option to autoplay the video while onload.
  • Player Control: Enable the option to display player controls like play, pause, volume, and more.
  • Loop: Enable the option to play video continuously.
Devices: Video Background Settings(Self Hosted)
Devices: Video Background Settings(Self Hosted)
  • Aspect Ratio: Select the aspect ratio.

Style

Device

  • Width: Specify the width of device.
  • Device Color: Select the color of device.
  • Tone: Choose a tone from light or dark.
  • Opacity: Specify the opacity value.
Devices: Device Style Settings
Devices: Device Style Settings

Image

Note: These options are applicable when Image is selected as background.

  • Object Fit: Choose from fill, cover, or contain.
  • Object Position: Select the image position.
Devices: Image Style Settings
Devices: Image Style Settings

Content

Text

  • Typography: Set the typography.

Normal

  • Text Color: Select the text color of text.
  • Background Type: Choose from Classic or Gradient.
Devices: Content Style Settings(Normal)
Devices: Content Style Settings(Normal)

Hover

Styling controls for the hover state are available under this section. This will work when someone hovers the content.

Devices: Content Style Settings(Hover)
Devices: Content Style Settings(Hover)
  • Border Radius: Set the border radius.
  • Padding: Set the padding.
  • Gap: Specify the gap between content.
Devices: Content Style Settings
Devices: Content Style Settings

Icon

Normal

  • Primary Color: Select the primary color of icon.
  • Secondary Color: Select the secondary color of icon.
Devices: Icon Style Settings(Normal)
Devices: Icon Style Settings(Normal)

Hover

Styling controls for the hover state are available under this section. This will work when someone hovers the icon.

Devices: Icon Style Settings(Hover)
Devices: Icon Style Settings(Hover)
  • Size: Set the size of the Icon using %, EM, REM, VW, or PX.
  • Padding: Set the padding for the Icon.
  • Rotate: Set the rotation of your Icon in degrees.
  • Border Width: Set the border’s width using %, EM, REM, VW, or PX.
  • Border Radius: Set the border’s radius using PX,%, EM, or REM.
Devices: Icon Style Settings
Devices: Icon Style Settings

Orientation

  • Size: Specify the size of orientation.
  • Color: Select the color of orientation.
Devices: Orientation Style Settings
Devices: Orientation Style Settings

Check out the Demo page of Devices.

Share this Doc

Devices

Or copy link

CONTENTS