Integrating Media Into Your Projects
The Media Widgets allow you to add images, slideshows, social media posts, and even full videos to your designs.
This guide covers all of the widgets in the “Media” tab of the Nimbus808 Design Editor.
Uploading Images
To start, we’ll go over how to upload media from your local computer.
Via the Dashboard
In the Nimbus dashboard, you’d navigate to the “Media” tab, and click “Upload Media”. From here, you’d simply choose the image from your computer, and it will be uploaded to your Nimbus808 account.
You can upload any .png, .jpeg, .gif, or .svg file to add to your media library. You can also upload .mp4 and .webm video files as well!
Via the Design Editor
If you navigate to the Media tab of the design editor, then drag and drop any widget that requires media (such as the image widget), you’ll be prompted with the same media selector as above, where you’ll be able to upload your media to your Nimbus account.
Connecting to an Image Service
In order to connect your Google Drive or Unsplash accounts, you’ll want to navigate to the “Media” tab (or drag an image widget into your design) and click the “Integrations” button at the top.
This will take you to a page where you can simply click the “Connect” button for the service you’d like to link, and then log in to that service to link it to your Nimbus808 account!
Once you’re connected, you can select the service in the regular media tab, and choose files to add to your Nimbus808 image library.
Stock Image Services
Alternatively, you can search across various stock image or GIF libraries like Pexels or Klipy.
Choosing a stock image service will display a search bar you can use to find stock images. Any images used from Pexels, Klipy, or Unsplash will be added to your general Nimbus808 library.
Or you can navigate to the “Nimbus808” tab of the media page for stock icons and images included in Nimbus808 by default.
Editing User Media
When you select an image in the media library, you have various editing options available to you through the “edit” menu on the right-hand side.
For images you have basic options like brightness, contrast, saturation, temperature, and opacity.
For SVG images, you have options to customize the colors of the image.
Using Media in Your Design
Now we’ll go over how to use each of the media widgets in your design. Just like every widget in the Nimbus808 design editor, you’ll start by dragging and dropping the widget from the left sidebar.
Image Widget
The image widget displays a single image in your design.
When you initially drag and drop the image widget, you’ll be prompted to select an image from your media library. Once you do, the image widget will display as the image you selected.
Once you have an image placed, you can resize and rotate it via the widget handles on the corners and top edge respectively.
While the Image widget is selected, you have access to various properties:
- Widget Name – the name of the widget, used to identify it across the design
- Transform – allows you to numerically set the width, height, and position of the image (relative to the top-left corner of the widget). There are also buttons to auto align it vertically and horizontally
- Opacity – set the opacity of the image as a percentage
- Rotation Angle – set the rotation of the image
- Animate – open the animation panel for your image. For more information on how the animation panel works, check out our animation tool guide.
- Image – Selecting this property will open the image selection window, allowing you to replace the image that’s displayed.
- Alt Text – Lets you set the Alt Text of your image.
- Background – Toggle that enables a background for the image. When enabled, opens a color picker that allows you to customize the background color.
- Border – Toggle a border to show around the image. When enabled allows you to set the color, width, and corner radius of the border.
- Action – Allows you to define the behavior when the image is clicked on while displaying.
Slideshow Widget
The slideshow widget cycles through multiple images within your design. When you drag it into your design, it will be empty until you select images in the properties of the widget.
Most of the properties of the Slideshow widget are the same as the Image widget, so we’ll just go over what’s different.
- Images – The list of slides the slideshow will rotate through in order. You can add images through the “Add Image(s)” button (which will open the same media window as the image widget). You can re-name slides by clicking on the slide names in the list, you can remove slides from the rotation by clicking the “Trash” icon on the right side of the slide. And you can drag and drop the order of the slides via the 6 dots on the left side of the slide.
- Transition – Allows you to change various aspects of the transition between slides.
- Duration – the number of seconds a slide displays before cycling to the next slide
- Transition Animation – The specific animation the slideshow will use to move between slides
- Transition Speed – The number of milliseconds the transition animation will last for.
Video Widget
The video widget will play a video you have uploaded from your device. When you drag the video widget into the design, it will be empty until you select a video in the widget properties
Many of the properties of the video widget are the same as the Image widget, so we’ll just go over what’s different.
- Select Video – opens up the Nimbus808 media selector window, where you can select the video that will display, or upload a video to Nimbus to display
- Autoplay – Toggle if the video automatically plays when the design is displayed.
- Mute – Toggles if the video plays any sound.
- Loop – Toggles if the video re-starts when it finishes
- Show Controls – Toggles whether the video widget shows the video controls (play/pause, volume, etc.) on the display.
- Start and End Time – Allows you to define which timestamps count as the beginning and end of the video (in seconds)
- Playback Speed – allows you to define the playback speed of the video, ranges from 0.5x speed to 2x speed.
Web Embed Widgets
The “iFrame”, “YouTube”, “Instagram”, and “LinkedIn” widgets all allow you to embed web pages or social media posts into your design.
Each of these widgets have a URL property where you enter the URL you’d like to embed in the design.
The Youtube widget has a lot of the same options as the general video widget, so there aren’t any new properties to go over.
QR Code Widget
The QR code widget allows you to display a URL as a QR code in your design.
A lot of the properties for the QR code widget are similar to the image widget, but we’ll discuss which ones are different here.
- QR Code Content – Enter the URL for the QR code to link to
- Colors – allows you to change the “foreground” and “background” colors for the QR code. Make sure these colors have high contrast so the code can scan properly.
- Logo – Toggle whether you display an image in the center of the QR code. Click the “Select Logo” to pull up the image selector to choose the center logo.
Weather Widget
Teh weather widget
Many of the widget properties are the same as the image widget, but here are the ones that are different.
- City – Allows you to select which city to show the weather for.
- Forecast Type – Allows you to choose between three different forecast types:
- Current Conditions – Shows the current weather of the selected city. Can be displayed with three different layouts.
- Minimal
- Horizontal
- Detailed
- Hourly Forecast – Show the weather forecast for a set number of hours in the future. When selected adds an “Hours” option to define how many hours into the future the weather widget shows. Displays horizontally
- Daily Forecast – Shows weather forecasts for each day of the next week vertically.
- Current Conditions – Shows the current weather of the selected city. Can be displayed with three different layouts.
- Units – Toggle between Fahrenheit and Celsius for temperature display.
