Edit Mode
How to Edit and Customize Your Website
The Crafting Area is where you edit your webpages.
You'll notice the Crafting Area divided into three core parts of the website or Blocks: header, body and footer. Along the left side of the Crafting Area is a Left Panel or Tool Bar, with all the tools necessary to create your site.
> When in your crafting area your site is in Edit Mode.
You'll notice in edit mode your website is divided into three core parts:
- Header: 1-3 top blocks (this section is global and seen across all your webpages)
- Body: all the blocks with your main content (these sections are not global and will change depending on which webpage you are on)
- Footer: 1-3 bottom blocks (this section is global and seen across all your webpages)
Along the left side is a Tool Bar, with all the tools necessary to create your site.
Get to Know The Tool Bar
In Edit Mode the tool bar is located in the panel on the left side. This has all the tools you need to edit your website.
|
PREVIEW |
With the Preview feature, you can see how your site appears on tablets and mobile devices. Click on the Tablet or Mobile icons to do so. |
|
DASHBOARD |
Where you can find different useful apps to further enhance your website, add new pages, connect analytics, connect a domain and much more. |
|
BLOCKS |
Where you can find plenty of predesigned set of elements created by our designers for you to reuse them quickly and create beautiful and converting pages on the go. |
|
ELEMENTS |
Where you can find pretty much all the elements that cover the web: starting from a single button to image to sliders and even advanced form builder. |
|
COLORS |
A fun and easy to use coloring tool, which gives you the chance to create a color palette by selecting either a flat color or a gradient from the color picker. Drag & drop your custom colot on a button, text, block, column or page background to apply. |
|
EFFECTS |
A list of web page effects, like fade, ease, rotate, parallax and more. Drag and drop them on different elements, blocks or background images to create an exciting new experience for your website visitors. |
|
PROGRESS |
A helpful, beginner-friendly checklist of steps needed to be taken to complete the basics of MGSites. |
|
PUBLISH |
After you have completed editting your website click on publish to update the changes on your custom domain. |
|
DEVICE VISIBILITY |
Click on this tool to switch device visibilty settings from Desktop Edit Mode to Mobile Edit Mode. Some elements will only be visibile on Desktop Devices or Mobile Devices. If you see a desktop or mobile icon in the top right corner of an element that tells you that the element is only visible in that platform. |
|
UNDO |
Have you ever made a big mistake while working on your Website and wished it hadn’t happened? Don’t worry, there’s a handy feature to reverse your latest action: the Undo option. It also works through Ctrl Z Windows shortcut or Command Z if you are a Mac user. |
|
SUPPORT |
Need a hand? Feel free to fire away with any questions you might have. Our Support team is never more than a click away! |
|
STATUS |
Latest synchronization - the track synchronization button is a useful feature which points the last syncing operation time. Please note that all the changes made on your page are being automatically saved so your site goes live without publishing. |
How do I change the webpage I want to edit?
> Click on the Dashboard Icon in the left panel.
> Click on the Pages App.
> Select the page you would like to edit by hovering over the page and selecting the Go Icon.
How to Open Webpages into Edit Mode
- From Edit Mode click on the Dashboard Icon in the tool bar
- Click on the Pages
- Select the page you would like to edit by hovering over the page and selecting the Go Icon
Why does my webpage look different in Edit Mode vs. Live?
While in the Crafting Area or Edit Mode you will notice two maybe even three versions of an element. Each version has an icon(s) in the upper right corner. These icons show your Device Visibility settings.
Device Visibility can be set to Always visible, Visible on Mobile, Desktop, or Tablet only.
Sometimes how an element displays in one mode is not how you would like it to display in another mode. This is why you may see more than one version of an element in the crafting area. Make sure if you correct an element in one visibility mode you correct it in other visibility modes as well or it will not auto change.
> Site Logo: When you update this in your site settings, it will auto change throughout your site.
> Headlines and Links: You will need to change the settings within each visibility mode, these elements will not auto change.
> Device Visibilty Icons
Create Different Versions of Your Website for Mobile, Tablet and Desktop Views
Whether you prefer your Tablet and Mobile versions to mirror your Desktop version or not, styling your site for every view is a top priority!
All the MGSites templates are created with responsive design in mind, so they easily adapt to different screen sizes and look good on any device, but you can always build separate versions of your website via Tablet and Mobile Edit Modes.
Mobile Version
Since you only edit your website while in the Desktop version, go to the Left Panel to switch the edit version to Mobile. Located on the Left Panel is the Monitor Icon. Click on this icon to choose the version you'd like to edit: Desktop or Mobile.
Keep in mind that all the changes made in the desktop version of your site will be applied to the mobile version as well. However, if you add any Elements on the Mobile version, the changes will only be applied to the mobile version.
As for the Tablet, you can choose the option of generating the view either from the desktop or mobile versions in the Site Settings App.
The MGSites blocks and elements can adapt to any device. To simultaneously delete an element from all the edit modes, you'll need to delete it from the version where it was first created.
Edit Your Mobile Version
Duplicate Blocks and Elements
You can customize your blocks/elements by duplicating them. Then, change the device visibility and edit away! This way you can have the same block/element, but one is created for the desktop version, while the other is for the tablet/mobile version.
- Duplicate your elements/blocks by holding down the Ctrl or Command button located on your keyboard, while simultaneously dragging and dropping it to the desired position.
- Change the visibility settings of your original block/element by clicking Visibility Settings → Device Visibility → select Desktop only.
- Head over to the Monitor Icon and switch your version to Mobile.
- Then change the visibility settings of your Mobile block/element by clicking on Visibility Settings → Device Visibility → select Mobile only.