How to change images.
Select the image, photo, or graphic you want to change simply by clicking anywhere on the image:
> The option menu for editing will appear. Upload your image by clicking on the ‘Upload’ button and choosing the image you want from your computer. Once you've found what are you looking for, just click open and your desired image is here.
> If you have already uploaded some images and you want to use them, choose the ‘Select Image From Media’ option and pick the one you want to add.
Add Images & Videos to Your Website
Never underestimate the power of great visuals on your website! They play a critical role in your website design and overall look and feel.
The good news is you don't need to have designer or coding skills to enrich your website with an eye-catchy content. MGSites is based on drag and drop functionality, meaning you simply need to drag the desired widget and place it wherever you want.
+ Click on the Elements section on the Left Panel to get started.
Adding Images
Check out the Image Element for a single photo or Gallery and Image Slider Elements if you wish to add multiple images in one section.
You can also customize the images and sliders by adding special Effects.
To add a Background image to your click on Block Settings (three dots on the top left corner of your block) > Block Background > Upload an image from your device or choose from Unsplash's Free Stock Collection.
Embedding Videos
Drag and drop the Video Element from the Elements section. Then, paste your Youtube, Vimeo or Custom Video Link (.mp4, .ogg or .webm formats) in the proper field.
To add your Video as a Block Background, click on the Block Settings > Block Background > Paste your link to the Video tab.
How to add Images.
From the crafting board > Click on the Element Icon in the tool bar to the left of the crafting page > add an image using the Image Element:
> Add an image by dragging and dropping the Image Icon on to the crafting area. where you would like to place your image, photo, or graphic. You can hover over the crafting area to see where exactly it can be placed, and the grey line will indicate whether it's in grid or full width.
> Click anywhere on the image area and the options for editing will appear.
> Upload an image by clicking on the ‘Upload’ button and choosing the image you want from your computer. Once you've found what are you looking for, just click open and your desired image is here.
> If you have already uploaded some images and you want to use them, choose the ‘Select Image From Media’ option and pick the one you want to add.
How to change the hero image or background image.
You can change out your Hero Image the same way you change a regular image. Except this one is set as a 'block' background image.
> Just click hover over the desired block, go to Block Settings hitting the 3 dots in the upper left corner of the Block and upload the ‘Background’ image from your computer or select one from your 'Media'.
> Move the pointer to choose the preferred image area.
> When it’s all set, push the ‘Save’ button.
How to add videos.
From the Elements section just dragging and dropping the ‘Video’ icon to the Crafting Area.
> Before going any further, please keep in mind, that there's no option to upload a video directly to Tranesites but embedding videos from another host such as YouTube, Vimeo or Custom links.
> Once you have uploaded or selected a video you would like to use from the supported video types, copy and paste the link to your video directly into the box on the video element you dropped on your crafting board. (The box is under the play arrow and says paste your YouTube or Vimeo Video link.)
Supported Video Types
Youtube
Vimeo
Custom - .mp4, .ogg or .webm formats
How to change videos.
> Just click anywhere on the desired video element, go to video settings, under Video URL copy and paste the new video link here.
> You can change out the video thumbnail from here as well. Click on the thumbnail image, click on the (X) in the upper right hand corner to discard the current thumbnail image.
> Choose a new image by browsing from you computer or selecting one in your media.
How to change colors.
If you want to make your site more colorful and eye-catching by changing the color of any element, make sure to use the ‘Colors’ tool from the Tools Panel on the left. You'll find a set of various color shades available on the Palette, both Flat and Gradient.
> To add a new color, click '+' and pick the desired color from the Dialog Window.
> You can specify the Hue simply moving the first pointer, while the second pointer determines the color Saturation.
> Playing with the color Opacity using the next pointer can be really eye-appealing while dropping the color on different elements or a certain block. You can find the recently applied colors below, as well as insert the color codes you prefer.
> Want to experiment with colors? Go ahead and use Gradient colors here. You can change the color patterns: Liner or Radial move the controllers to specify the desired style.
> After adding the desired color to the Palette, simply drag and drop the color to the specific site element