Responsive Collection
👋🏼 Help us improve by answering this short survey: http://elemn.to/survey-time
In this tutorial, we will go over the responsive features and options in Elementor. We’ll review the basics of responsive design, and optimize a website’s header, content, and footer, using Elementor’s responsive section, column, and widget settings.
This tutorial will cover:
✔︎ Responsive features
✔︎ Responsive menu
✔︎ Responsive font styles
✔︎ Device-specific settings
✔︎ And much more!
Don’t forget to subscribe to our channel!
Get Elementor: https://elementor.com/
Get Elementor Pro: https://elementor.com/pro/
00:00 – 01:01 – Intro – What We’ll See in this Tutorial
01:02 – 04:08 – Elementor’s Responsive Features
04:09 – 05:59 – Responsive Menu
06:00 – 07:47 – Column Width & Wrapping
07:48 – 08:48 – Responsive Font Styles
08:49 – 09:34 – Hide and Show Elements on Different Devices
09:35 – 10:08 – Reverse Column Order in Different Viewports
10:09 – 11:24 – Hide & Show Elements – Best Practice
In this tutorial, we’ll go over how to hide a column in Elementor 2.5.
Learn More: https://elementor.com/blog/introducin…
Get Elementor Pro: https://elementor.com/pro/
In this tutorial, we examine several responsive web design challenges and explore various ways to solve them elegantly using Elementor.
Tip #1. Responsive Design Begins and Ends With Correct Planning.
In this business, no one in their right mind would set off on a project without a plan, a draft or sketch. The more forethought and planning you can invest in the design process, the better you will be able to anticipate the technical problems and adjust your ideas accordingly.
Tip #2. Positioning Elements for Mobile Responsive View
When it comes to correctly positioning sections for mobile responsive view, we suggest avoiding setting values in pixels. Setting values in percent (%) or in EM keeps them relative to the overall screen size. Thanks to the responsive mode, we were able to conclude that we should set the padding to 17% either side of the text widget, in our next example, so that we get similar positioning in both desktop and mobile view.
Tip #3. Responsive Design: A Horizontal Approach
Traditionally, web design is a vertical process, which is why many designers prefer to complete the design of the entire page for a single device before, trying to make the same design work as well on the next device. An easier way to go about this is to design our views horizontally, one section at a time, across all our devices as we go along.
Once we have made sure that section looking the way we want it to in Desktop, Tablet, and Mobile views, we can move on to the next. Where possible, duplicate sections, columns or widgets, and update the relevant content; re-use them as foundations to build the other similar elements on the page.
Tip #4. Change / Position Background Image
Certain background images, like that of the example below, may look great in the desktop view. However, it doesn’t take much experience to see how it wouldn’t work well when viewing the site on a mobile screen.
Tip #5. Create Alternative Section
As promised, we are only too happy to share our experience and insight with our community, who will no doubt be familiar with our next example. Well within the top area of our home page, we needed to come up with a solution to the 3-column text section. Rather than having this appear as 3 boring rows of text in Mobile view, we decided to create an alternative section, with the text inside a slider widget.
Read the full post: https://elementor.com/blog/responsive…
Get Elementor: https://elementor.com
Get Elementor Pro: https://elementor.com/pro/
Join Ziv Geurts, Designer & Elementor’s Lead Educator, for a step-by-step walkthrough on how to use Elementor’s responsive settings to make sure your sites look great on tablet and mobile devices. The demo site is built with Elementor Pro, but the webinar will cover many topics relevant to all users.
6 Takeaways:
✓ Optimize and style navbar hamburger menus for tablet and mobile [PRO]
✓ Use Elementor’s responsive settings to create device specific designs
✓ Control column width and alignment per device
✓ Use relative units that scale better on devices, such as EM and %
✓ Optimize your Global Fonts for different viewports
✓ Manage Motion Effects for tablet and mobile devices [PRO]
Links mentioned in the Webinar:
- How to Use Column Alignment: https://youtu.be/htUvG2Y5vaY
- How to Use Motion Effects Viewport Settings: https://youtu.be/0pjPb8orwXM
- Global Colors & Fonts Webinar: https://youtu.be/OvETB43I7_w
Don’t forget to subscribe to our channel!
Get Elementor: https://elementor.com/
Get Pro: https://elementor.com/pro
TIMESTAMPS:
00:00 Introduction
01:52 Site overview on tablet & mobile devices
03:30 Optimize & style the navbar hamburger menu for tablet and mobile
06:51 Tweak the header for mobile, device icons & alignment
09:30 Create device specific layouts using column width & responsive visibility
12:50 Optimize your global fonts for different viewports, understand default behavior & use EM to save time
18:28 Build a simple 2 column, text and image design & apply motion effects with mobile in mind
24:28 Tweak your buttons per device & understand the impact of changing values with settings that don’t have device icons
26:04 PX vs. % use relative units that scale better on devices
27:37 Applying Elementor’s responsive settings to create a custom footer layout for tablet and mobile
In this Tips & Tricks Tutorial, we learn how to create responsive-friendly Image Hotspots entirely with Elementor. Adding a layer of playful UX is a great way to increase website conversion rates and really make them stand out!
We use Elementor’s Image and Flip Box widgets to build this effect while going over the fundamentals of absolute positioning.
This tutorial will cover:
✔︎ How to create and use Image Hotspots
✔︎ Understand the Image and Flip Box widgets
✔︎ Absolute positioning
✔︎ Responsiveness with Absolute positioning
✔︎ Column Alignment
✔︎ And more!
Don’t forget to subscribe to our channel!
Get Elementor: https://elementor.com/
Get Pro: https://elementor.com/pro
Check out these tutorials to learn more about custom positioning:
- How to Use Absolute & Fixed Custom Positioning in Elementor:
- Do’s & Don’ts: Absolute & Fixed Position in Elementor:
- How to Use Custom Positioning Units For Best Mobile Responsive Behavior:
Note: This is an advanced tutorial, if you are facing difficulties keeping your flip-box icon responsive, try setting it to the top left corner by following these steps:
Click your flip-box widget and in the Style tab, set the Alignment to left and Vertical Alignment to Top
Learn how to use the custom positioning units (px.%, VH, VW) with responsive behavior in mind.
You will learn:
✔︎ The difference between px, %, VH & VW
✔︎ How to properly use these values
✔︎ Best positioning practices for mobile responsive behavior
Learn more about custom positioning here: https://www.youtube.com/watch?v=RA0T5…
Learn More: https://elementor.com/blog/introducin…
Get Elementor Pro: https://elementor.com/pro/
In this video, you will learn how to align columns side by side on WordPress pages viewed on mobile devices. By changing each column width in Elementor, you can easily align two or more column horizontally.
For more tutorials, check out our https://docs.elementor.com
