1. Home
  2. Docs
  3. Creative Elements
  4. Devices

Devices EA Element

Devices lets you add frames to your web or mobile design portfolio items. It helps you add device frames to your screenshots or HTML5 videos to beautifully display your design portfolio to customers. Here in this tutorial, you’re going to learn how to use the Devices element into Elementor Page Builder. So let’s get straight into it:

If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


How to Customize the Devices Element





⇒Type: Select the type of device you want to display.

⇒Media Type: Select media type either image or video.

: Set the orientation of the devices either portrait or landscape.

⇒Orientation Control: Show orientation control on the frontend.

⇒Alignment: Set the alignment of the devices either left, center or right for different dimensions.

⇒Maximum Width: Customize the maximum width of the devices.



⇒Choose Screenshot: Use an image or video in the device frame with a ratio of 16:9.

: Set the image size.

⇒Scrollable: Enable/disable the scrollable of the content.

⇒Vertical Align: Set the vertical alignment of the devices either left, center or right for different dimensions.





⇒Override Style: Override default device style yes or no. If yes, customize the device background, tone, and opacity.

⇒Skin: Set the device skin with a different style.



Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the Devices Element.

Was this article helpful to you? Yes No

How can we help?