Free Move Functionality
Important info on how to use the "Free Move" option to move and layer widgets on your pages for more design freedom and flexibility.
ShinePages Support
Last Update 10 days ago
Free Move gives you more creative control over your page designs by allowing you to visually reposition widgets outside of their normal placement in a Block, Row or Column.
It’s especially useful for creating layered designs - like overlapping images, placing a graphic partially outside of a Column, or adding decorative elements that don’t need to follow the standard page grid.
In addition, Free Move is best used sparingly, especially if you're newer to website design or aren't yet comfortable working outside of the standard page grid. You absolutely do not need to use Free Move to create a beautiful, professional-looking site! ShinePages includes a large collection of Website Templates, Page Templates and Block Templates that are already designed to look great and work beautifully across devices. When in doubt, start with those, primarily use the standard page design tools - and think of Free Move as an optional tool for adding a few extra creative touches when you need them.😊
Understanding Free Move
Every widget you add to a page has an original “home” within a Block, Row or Column. When you turn on Free Move and reposition that widget, you are changing its visual position on the page - but the widget still belongs to its original location behind the scenes.
What does that mean?
You can turn on Free Move for the smaller image and drag it upward so that it overlaps the corner of the larger image.
Visually, the smaller image is now sitting on top of the larger image. However, its original space underneath the larger image is still being reserved in the page layout. Free Move does not remove or collapse that original space.
This is important when deciding where to initially place a widget that you plan to Free Move.
The same rule applies if you move a widget so that it visually appears outside of its original Block. The widget still technically belongs to the Block where you first placed it. If you delete that original Block, the "Free Moved" widget will be deleted along with it.
The Free Move Rule
Keeping that one rule in mind will make working with Free Move much easier.
A Few Free Move Best Practices
For the main structure of your page, we recommend continuing to use the standard Block → Row → Column → Widget layout. This gives you the most predictable spacing and the best responsiveness across desktop, tablet and mobile.
- Think about the widget's original “home” before moving it, since that space will remain part of the layout.
- Remember that a "Free Moved" widget still belongs to its original Block, even if you've visually moved it somewhere else.
- Always check your design in Desktop, Tablet and Mobile views.
- If your Free Move design doesn't translate well to smaller screens, create a separate version of the Block for tablet/mobile and use the Visibility settings to show the appropriate version on each device.
❗️Pro Tip: Create a "Playground Page" to play around with the Free Move functionality and learn it's capabilities and limitations before making changes to your live site/live pages.
Copy and paste any blocks you want to play with onto this "Playground Page" - then when you have the look you want and the blocks complete - copy the updated Blocks back to the Live page and hide or delete the originals.
QUICK FREE-MOVE HOW-TOS:
1) How to "Turn On" or "Turn Off" Free Move mode: Pink = ''ON", Black = "OFF"
2) How to "Reset" of "Snap Back" to original widget placement:
3) How to "Move Forward" or "Move Backward" to layer/overlap the widget "on top" or "behind" another:
4) Explanation of L, B and Z values:
- L = "Left to Right" positioning from 0 - with 0 being the original placement of the widget within the grid on the page. This number will change as you "free move" a widget using your mouse. You can also type positive or negative numbers into this field to move the widget right or left from it's original position.
- B = "Bottom to Top positioning from 0 - with 0 being the original placement of the widget within the grid on the page. This number will change as you "free move" a widget using your mouse. You can also type positive or negative numbers into this field to move the widget up or down from it's original position.
- Z = "Layer" positioning. What position this widget lies "on top" of other widgets. This is adjusted only with the "send backward" and "send forward" arrows.
Again, Free Move is a great tool to use on occasion or with more advanced design skills. However, please note that ShinePages gives you tons of design flexibility just using the standard page-building tools and basic "grid" structure.
Click here to learn more about the standard page design tools