November 17, 2019
Gator Website.Builder Adding Elements Images

Gator Website.Builder Adding Elements Images


Hello and Welcome this is Rochelle from the
DIY Affiliate 🏃‍♀️and today we are going to be talking about the Gator Website
Builder🐊 and Adding Images🎦 you can Add images anywhere on your page using the
Responsive drag-and-drop functionality Features you can also re size or Edit the Image and
you can also Add and edit all of the Different Behaviors which is called Animations🚀 so
let’s get started click edit site It will then load your Website Editor click Elements✨
pop up box scroll down Images🎦 a number of ways you can Add Stock images my images
linked images what you first need to do is click the Add
Image🎦 you can upload an Image🎦 and this will open up your computer Find an Image find the Image that you would
like to upload Choose The Image

you would like to upload click on it And you will see that it starts uploading
under my images the second way to Add an Image is to Add an
Image 🎦from a Link🖇 and what you do is you go and you find a picture that you
want to have on your Website🌐 I’m just going to go into Google you are going to open
the Link🖇 in a new tab right click on your Photo and what you’re going to look for is🧨
the Image Address💥copy that go back over to your Gator🐊 Paste the address in here and
this word says http semi colon forward slash forward slash Link🖇 and you should have
something as a ping or a jpeg and then Add Image from Link
this will then appear in your linked images 🎦if you choose it you just click on it
a wait for the round circle with the arrow and lace lace and Add a Stock Image
and these are free images that you can use and you do not have to worry about getting
a Copyright search a keyword to the type of Image that you want
you have many choices here Architecture and real estate background beauty and fashion
business cards and cars and transportation computers of technology games hotels and travel
lifestyle music and dance nature and animals etc select
you can select any number of images on the same screen ok so I’ve selected these three
you can select one Image by itself or three together and you can move the images anywhere
here on your screen Images Elements✨ images Image my images
these are images that I have uploaded already so I am just going to select an Image couple
of images as an example place this is how it will download if you select more than one
but you can move them you can move them here on the page so these are the the images that
I have selected Elements✨ images Image these are linked images
so linked images are more advanced click on this this has a Link in it
that I have found online and have used the Link to get the Image okay so this is an example
of the linked Image Elements✨ images Image Gallery you’ll see a pop-up of a Gallery comes
up Add images Choose a source for the Image Gallery Add
images okay here you can edit so it will pop up with the
images that are already been placed there you can take these images out And then Add your own images in You will see a round circle with a check Mark
that means that you can Add these to your Gallery And then click place each Image you will see
a Title so you would type in your Title a little bit of a Description A Link if you have one A Website💫page a url an email your phone
a document and then you would click okay Also if you want to put an alt tag
so you would do that for each one of your pictures and then you wouldn’t save now as
you noticed a couple of these have come in and they don’t look proportioned so what we’re
going to do is just go through the different editing that you can do
with your Image so let’s just choose this The image here you will see the Editing Toolbar📜✏️✂️📌🚀🌈
come up and you have a choice you can attach a Link a Website the url could be your YouTube📱⌨📩📞📕
channel an email a phone number a document and then choose whether you want to open it
in a new tab or not just going to choose email here you’re okay box pop-up and then you click
ok you can put an overlay on it and an overlay
is usually just a color🌈 that goes over the top of the Image and the way to do that
is to choose a color 🌈 and decide move this over you can move your
🚚tool box🚚 over so that you can see your Image so this is the color 🌈and you’re just going
to decide on how transparent it is going to do And if you don’t see a color 🌈that you’re
interested in you can choose more colors Use the slider and decide on what color🌈 you
would like and you see that it changes there and it also changes in your picture
now if you decide that you do not want to have this we’re just going click in there again
you would then click this one which will then remove it
Next is your border ✏now you can’t really see the border there but if you choose a color🌈
say we choose black and then the next one is your border width📏
so you can change the width of your border by changing the slider moving the slider back
and forth to change the border width you can also, choose more colors and again use your
slider slide and again use your
slider slide Here you must choose a color to change the
border yeah so you can see the different border 📏to change the
border yeah so you can see the different borders that are available and then click out of your
box and there is your border the next one is the opacity and this is how transparent
your picture appears Animations🚀
bounce bounce in fade in flip flip in fly and bounce in fly and fade in fly in light
speed move and fade in and shake The next one when you place a Image on top of another
Image you can use your bring forward and your send backwards you click bring forward your
picture will then be on top send backwards your picture will then be on the bottom you
can do this with any of your Elements next is duplicate this will create a duplicate
of your Image And if you want to delete that you would then use this trash can 🗑now always
remember if you do something and you feel that it’s an error or a mistake use your undo
arrow and we do arrow so undo redo If you click the more you will see more advanced
editing you can fit your frame fit fit to the frame well here’s an example of the cover
we’ll use this as an example right here Edit item content okay so here this is what it
looks like I can move back I can move next this is where I you can move your Photo around
this is my Image the cover I want to fit it to my life’s my box
so you see how I have now fit it to fit in the box that it is in as part of the Gallery
I’ll just do that again just click into this one here into the advanced the edit item content
into the Image and the cover so here you have a choice this is the original right there
this is what it looks like and this is when you fit it into the box and of course you
can also go more to the left hop so I don’t move it over to the right to the bottom to
the bottom left and the bottom right or in the middle Finish a lot Anytime you want to
remove a Image wait for the four arrows and you can move it when you click inside you
will see these boxes you will see arrows diagonal arrows straight arrows and the four arrows
diagonal arrows means you can make it smaller the straight down arrows means that you are
making it smaller but as you see it is taking away the shape of your Image and the vertical
arrows will do the same thing well pull it out vertically sorry this is vertical this
is horizontal okay okay so I showed you the background color
say we choose blue it will then turn the background the color that you choose if you want to the
color more colors say you want it to go with a green and you see how it turns green there
and of course you can move your toolbar over further so that it’s not okay so say you choose
red you move your selector slider up and you will see the different backgrounds that are
available for you to choose Border border radius okay so what this is
this is a slider as well it will slide across and it’ll bring your border in to where you
want it to be so if you wanted a square border or if you wanted it more round and it will
go to fully oval shape and at any time when that box pops up you
can use that box for editing as well okay so when I click more okay now this is a Shadow
this is also for more advanced users but you can create a Shadow in the back of your picture
and when I click out of this box you’ll notice that another box pops up
okay so this actually is another editing box and this will also ask you what do you want
your Element to do do you want it to be shown on all pages does it start visible I’m actually
not sure okay so if you choose this one then all content outside of the Elements frames
will be hidden okay images Icon Here you will find many icons and you can
use a keyword to search sense them so you just type in let’s try Facebook Facebook so
as you type in you will see the icon it come back them up YouTube and then you would choose
your iconic on now your icon will be attached to your or your cursor as it’s going around
so that’s just I got here now this is how small it is but you see these boxes here and
again these editing arrows here your diagonal you can create you can change the size
and when you click into it again again you can change the color color use your slider
and also it’s a good idea when you’re working with with your toolbar to bring your toolbar
over so that you can see what you’re working on okay so we want to change the color and
more colors and bring the toolbar over further okay so color more colors and then you can
see the different colors of your iconic Now another thing you can do is you can save this
color here here just by going into the color going into the box it says Hex copying it
now I’m going to change this color to show you how you go out of here here and go back
into my color🌈 color where it says more colors go down here and then I’m gonna paste
in what I copied this is a record of the colors🌈 that you used so you don’t have to keep finding
them I’m going to paste in that color color🌈 and it will automatically turn the color that
I have chosen chosen okay so this is the icon on editing tool box you can also Add a Link
Link now you’ll notice when you attach a Link you always have a choice a Website a url an
email a phone a document and whether it’s going to open open in a new tab
You can also Add an animation and these are the animations here that you can Add and if
you just click in one you can see what it will do do and this is an Element✨ so we’re
going to put this on the top now say you wanted to put it behind another
Element ✨Element they were just click click in the send backwards or bring forwards and
here you can copy make a duplicate okay if you wanted to and if you press more more and
here again is the Shadow and the Shadow gives you this effect right here right here so if
you wanted to use a Shadow then this is how you would use that use it so do you see the
difference here this is using the Shadow this is not using the Shadow Shadow two different
are different let’s click more and then we have something called a glow and
you can actually actually need to move this tool bar
and you can of course change the color color so we wanted to just make it make it a color
that we could see you could see it here here Elements images just I’m just gonna mention
this briefly flee for instagrams de gram It will pull up your Gallery again again and
then a pop-up box will come up and if you have connected your Instagram l
and also you have your Instagram available but you get to on the computer it should connect
it you will also have to know to authorize it
so you would go down to the manage To your social and put all of your social links
in here If you are just connecting your instagrammed
and make sure that you do have your Instagram Link in there there and then it will pull
the pictures from your Instagram gram over over in the form of a Gallery Gallery So I
hope this has been helpful if you have any questions just leave them for me at the bottom
of this tutorial I’ll be happy to help you to answer any questions and look look for
the next tutorial that I will have coming out well I hope I’ve helped in some way in
your understanding of building your Website using the Gator Website Builder stay tuned
for the next tutorial which I will be talking about pages until then have yourself a wonderful
evening

Leave a Reply

Your email address will not be published. Required fields are marked *