Advanced: Bootstrap to Adobe Muse | Adobe Muse CC | Muse For You

hey what's up users this is John Emmys for you here to help you build awesome website without code and this is going to be a complete tutorial on how to build a bootstrap template in Adobe muse now for those who are not familiar with what bootstrap is it's basically a very popular way to build website with code now I will be covering a few more advanced topics so if you are a beginner to Adobe muse I would recommend watching some of the earlier videos on my youtube channel so I'll go ahead and get started I do have the contents here so step one we're going to find a bootstrap template to recreate step two we're going to take a picture of the website across different break points with the fire shot web page screenshot Chrome extension step three we're going to create break points in Adobe muse step four we're going to decide if the website is going to be fixed with fluid width or adaptive step five we're going to create the guides as a reference when we're going to use the image and then create guides over the image to use as as a reference step six we're going to add elements and assets and we're going to sample fonts with the web font Chrome extension step seven we're going to add animations and effects and step eight we're going to repeat the process for the other breakpoints so I'll go ahead and we're going to start with step one and that's find a template there are many free bootstrap templates on the web with a simple google search you can find various templates and a great website for free bootstrap templates is graphic Burger calm so I'll go into Google Chrome and go into Google Chrome here and I'll go to graphic Burger calm and then the name of the template is called guide so I've already kind of worked with it a bit so I'll just type in guide there and here we have guide a free HTML template so I'll click here and then I'll scroll down here we can see the template and then here is a live demo so here you can download it and here is a live demo so I'll click here on live demo and then we can just take a look at the website and see what we'll be working with so we can see here there's some animations and effects it's a really nice and clean template looks good so we'll be recreating this in this tutorial alright so the next step is to take the screen shot of the website so let's go into the slideshow here so we found the template the next step is to take a screen shot with the fire shot Chrome extension so here is the website and before I take the screen shot I want to just take a look at the different break points so the web site does change across a few different break points here so I'll scroll down if I resize we can see that these squares here there's one square there and then it goes to another break point then there's two and then there's three and a good website to see the different break points of a website is design google.com slash resizer so here we are we can see the the different devices here and I'll go into the URL of this website I'll hit command C to copy and then here in the Google resizer I'll hit command V to paste then I'll hit enter and here we can see the web site across different devices here if I click on the laptop icon I can see the different break points so we have twelve eighty nine sixty six hundred and four eighty so here I'm going to take a look at this so we have twelve eighty there we go a hunt for t 604 eighty so it looks like 840 and 960 are fairly similar so for this I'm going to use a break point at around 1200 I'm going to use a 960 break point I'm going to use a 600 break point and for a tea break point so I'm going to have 4 break points for this website and I've decided that I'm going to use a fixed-width website I like using fixed width because elements don't move around so much and once it reaches another break point I can just change the layout and not have to worry about things changing size and things like that and that will become more clear as I'm going through this video tutorial so there I've decided to break points 1200 here is 1280 but I'll do 1290 6600 and 480 so now that I know that I'm going to use those break points the next thing is to take a screenshot of the website on those different break points so here I'm in the website and here we have the fire shot Chrome extension it's right here and I do have a quick tip on how to install the Chrome extension it's quick tip number 10 and you just type in fire shot install it into Google Chrome the Chrome extension and then you have this little icon here this s icon that allows you to take a screenshot of the website so I'm going to right click click on inspect and then I'm going to resize the browser and right up here we can see that it shows us the size or the width of the browser so the first breakpoint I want to use is twelve hundred so there it is I'm at the twelve hundred breakpoint and then I'll close the web inspector here and then I'll click on the s to take a screenshot I'll say capture entire page just like that and I did go through the entire website first so that all the elements were visible there are some animations on this website but going through the website makes all the animations come in and then everything is visible on the website so we can see there's the image looks good so here we can save as image we can save to PDF we can copy to clipboard or we can print so here I'm going to click on save as image looks good and then it creates kind of a long file name so I'm just going to say here break point 1200 and then hit enter so now I have the 1200 break point I'll go back into the website I'll right click inspect resize to 960 right there looks good close the inspector then I'll take another screen shot capture entire page goes through and takes a screenshot and then go down here save as image I'll click save as image and then here I'll click here and then say 960 hit enter I have the 960 breakpoint I'll go back to the website and right click inspect resize to 600 just like that so we're at this 600 breakpoint I'll click on the s capture entire page okay then I'll scroll down save as image save as image here I'll click here and I'll say 600 looks good and then one more time go back to the website right click inspect and I'll resize it to 480 you could go lower for you know an app iPhone 5 and iPhone 5s is 320 pixels in width but if we're doing fixed width it should work out pretty well so there I'm at the 480 breakpoint I'll click on the s capture entire page scroll down save as image I'll click save as image click here and I'll say 480 so now I have the 4 images for the 4 different break points okay so that was step 2 so let me go back to the slideshow and step 3 is create the breakpoints in Adobe muse okay so I'll go into Adobe muse I've already opened a blank site you can just go to file new site to open a site or if you are if you're on the splash screen or the home page there's a button that says new site so here I'll double click on the home page and here I want to create the breakpoints in Adobe muse so I'm going to right click on the breakpoint bar right up here I'll say right click add breakpoint and I'll say 1200 and then for the breakpoints I want them to be fixed with I don't want them to be fluid with I'm so I'm going to right-click and uncheck fluid with same for the 960 breakpoint right click uncheck fluid with and I could even use scroll effects if I wanted to because they're fixed with but I probably won't be using those in this tutorial so I'll right-click add breakpoint and I'll say 600 just like that right click Add breakpoint and I'll say 480 all right so there I have my different breakpoints looks great and I have a few guides here that I can use for reference but we'll go over that as I'm as I'm going through the design process ok so I've gone over creating the breakpoints and 480 we also want it to be we could set it to responsive but for now we'll say fluid with for 480 as well and I'll go over that a bit later but we have fixed width for all of the breakpoints so now I'll go let's go back into the slideshow we've created the breakpoints so now we're going to decide what type of website if it's going to be fixed with fluid width or adaptive I did decide that it was going to be fixed with because I just want the layout to change across different breakpoints I don't want things to move around too much in the website fluid width things would move around a bit more and adapt the design would be a specified website for a desktop tablet and mobile it would be a different layout for each website and it would basically be three websites for three different devices for this website we're just creating a fixed width website with four different breakpoints ok so now we're going to place the image into the website and we're going to create the guides so let's go back into Adobe muse so here in my finder here are the images that I saved we have the 1200 breakpoint we have the 960 breakpoint we have the 600 breakpoint in the 480 so for the 1200 I'm going to click hold and drag and place right in here into Adobe muse and I'm going to resize it to the entire width of the page here just going to drag it and there it is I'll just bring it down make sure it's at the top of the website here all right so here I have the website and this is what I'm going to use as a reference to build the the template here so now now that I've added the image I can go ahead and add guides so up here we have a ruler and to the left if you don't see the rulers you can go to view show rulers here it says hide rulers because the rulers up here are already visible and then we have hide guide do you want the guides to be visible as well so if it says if if you don't see the guides you can height you can show them it'll say show guides if they're not visible but here we can see that because it says hide we know that it's we do have access to them so the ruler is right up here and the guides are these lines here so to create a guide let me undo that to create a guide you just click on the ruler and then drag down to create a horizontal guide to create a vertical guide you click on the the left here on the ruler on the left and then bring in from the left just like that okay so there we have the image and now I'll create the guy so I'll click from the top I'll create a guide here just like that and I'll create some guides over these rectangles here so this process could take a moment but depending on how many guides you want you know depending on how much time it'll take I like to put guides over the main sections of the website so where the color changes on the website I like to put a guide so here's one section and then I'll scroll down here's another section just like that and another section right here and a section here let me zoom in a little bit a section here looks good let me move this up a little bit there perfect and it's good to zoom in because I can get more exact in there and that looks good okay we have the sections there so now that I've created a few guides and actually let me create some more guides here over these images let me zoom in here so in this tutorial I'm not going to recreate everything on the website but I'm going to go over a few sections that will cover some of the main points for the tutorial okay so there I placed the guides and that looks good perfect so if you did want to you know place more guides or just really really get everything in place before you start designing that's actually you know that'd be a good idea so that you can easily create the rectangles or the elements and have them snap to the guides so they're very useful because everything snaps to the guides okay so there I've created the guides and let's go back to the slide show the next step is step 6 which is add elements and assets so let's go back into Adobe muse the first elements are the first things I'm going to add are the sections and this is where we're going to work with the layers panel quite a bit so here in the layers panel in the dopa muse I have it here I can go to window and click on layers if I don't see the layers panel and here I want to create a new layer so I'm going to click on the new layer icon here and then I'm going to bring that layer below layer 1 and I'm going to bring the image if I can grab it here there it is bring it on layer 2 and I'm not going to explain this too much now but it'll make a bit more sense as I'm going through because basically what I want to be able to do is hide the image as I'm building the website okay so now I'm going to recreate this first section here with the image of the lady so I'll click on the rectangle tool and I'll create a rectangle 100% width I'll go to fill add image and let me find that so let me go into the finder here so when you download the template from graphic Berger right here you click on download it it'll download a zip file so you want to double-click to extract the zip file and then here is the guide free HTML template you can double click on guide and then there's a folder called images so you click there and here are all the assets from the template so here is the image of the lady so what I want to do is click on the rectangle and not the guide there so I'll click on the rectangle here I'll go to fill add image and I'll select the image here then I'll say scale to fill position it in the top center there so what's great is I can now go into the layers panel and I can uncheck the either the rectangle I just created and we can see it's exactly the same image same width and everything which looks great here's the image of the template we took a we took and here's the new image of the lady that we just added alright and as we can see in the image there's like a darker overlay over the image so what I'm going to do is make this rectangle visible I'm going to hit command C to copy then command V to paste I'm going to go to fill delete the image and I'm going to say black for the fill I'm going to set the opacity to around 40 right there looks good and just move the guide and I'll select this and place it right up there okay so there we have kind of a darker overlay over the image perfect so now I'll just go ahead and create these other sections and here so I'll select the rectangle tool let me make sure I'm on layer 1 rectangle tool and here's another section and we can see that these sections are a little bit different in color so to get this color here from this section I'll go to the fill select the sample color tool and sample that color from the image so there we have that section I'll scroll down we zoom out a little bit and select the rectangle tool draw another section and then the section is white so I'll just say white we have that section and then we have another section right here and I'll select this the sample color tool sample that color looks good and then I'll select the rectangle tool create another section this section is white then I was in a little bit more here to another rectangle and select the sample color tool and this is what that color there and then one more rectangle here at the bottom alright let's go make this white okay and what I want to do with these sections because I do want the sections to fill the entire browser with and then have the content right in the middle of the website so I'll select all of these elements that I've just created and I'll select them all in the resize option right up here I also select the drop-down and say stretch to browser width so let me make layer two not visible so now we just see the elements that we've created and the image is hidden so I'll go to file preview page and browser there it is if I scroll down we have those different sections it might not be that visible because a few of the colors are pretty light but if I resize the browser we can see that image resizes as well looks good okay so now I'm going to add some other elements and I'm actually going to add some text so if we go into the website we can see the text here and they let me bring the image back we'll use the image here as a reference so here's where I'll really work with the layers panel because we have this image here the the image in the background is not visible so I'll just select these rectangles and I'll uncheck them like that so I can see the image so here we have this text create awesome things for better web now there's another Chrome extension that I'll leave a link to in the description area below called what font and this allows you to sample or see what type of font is being used for the text on the web site so here I have the font the what font icon and if I click on it and I hover over any text it'll tell me the text the font size yeah he'll tell me the font family the font size and the color so here it's Roboto and it's robot to 100 so it's Roboto thin so here I'll go back into Adobe muse and I'll create a text box just like this and once I created the text box I now have access to the the web font drop down and to install the Roboto font I can click on add web fonts and I can type in Roboto Roboto is an edge web font and edge web fonts are pretty much google fonts and I've already installed it so here I can click OK and now I'll go into the drop-down I'll type in Roboto and here we have the Roboto edge web font you want to make sure that this WF is next to it because it will give you access to the different variations of Roboto so Roboto 100 is Roboto thin so I'll click here and then I'll type in create awesome things for better web okay and the size was 70 so I'll type in 70 here for the size and the color was white all right so there I have the text and as we can see it fits perfectly over the the text and the image looks good okay so there we've added that text and I'll add these rectangles here go to the sample color tool sample that green and here I'll select this one and sample the gray okay and then we have a menu right up here so I'll zoom in just like that and let's go back into the website and I'll click on the text here so it's Roboto regular the font size is 18 pixels and the font color is white okay so here I'll go to object insert widget menu and I'll say you horizontal and I'll place it right in there for menu type I'll say manual because we want to add more menu items and I'll add three double click I'll say about and I'll say tour and I'll say pricing okay and then I'll go into the first one here go into the web font drop-down I'll type in Roboto go into Roboto and I'll say it's Roboto regular looks good and then I'll select the menu item here I'll go into the normal state for the fil i'll say transparent then I'll drop click the drop down on the roll over I want it to be transparent on Mouse down I want it to be transparent on active I want it to be transparent as well so I don't want any color change on the rollover Mouse down or active State okay and then the font size was 18 so I'll just change the size there and I'll bring it over here and then I'll just try to line up this text over the image just like that so I might have to move things around a bit kind of make these these boxes a little bit smaller and we're getting there yep looks good maybe a little bit more yeah it looks good right there pricing is now want to make pricing yeah that looks good there alright so there I have the menu looks good and we'll add this guide text right up here so I'll go back into the website and for this it's Roboto 500 font size 32 and the color is white so go here we can see that that what font is really useful tells you exactly what type of text color and size so what was it again it was yeah 30 so here I'll go into the text create some text I'll type in guide period and for the dot there I'll go into the sample color and sample that green right in there and then guy is white the size is 30 and I'll go into Roboto and Roboto 500 would be Roboto bold and that's it let me Center it in here and this dot should also be dirty okay there goes fits nicely over the image okay and then there's this explore more about us right here so I'll click here and this is Roboto 316 pixels so let's zoom in on that section right in here create a text box and it says explore more about us okay so it was Roboto would be Roboto light and it was 16 pixels I'll Center it and make it white okay so that we have it and if it's perfectly over the image looks good and yep so explore more about us and resume it a little bit more here okay and then we have this circle here so let me select this rectangle here and I'll uncheck the rectangle so I can see the circle so I'll go into Adobe Muse I'll select the ellipse tool and I'll create an ellipse looks like it's 50 by 50 and I'll just place that right in there for the fill select the sample color I'll sample that green right in there okay no didn't sample it there we go okay and for some reason the cursor ends up being kind of a pointer but you know for the most part it's usually a an arrow but must be something with what I'm working with here and dope amuse but there we have it we've created this top part we've added a few sections from the top part using the what font Chrome extension yeah using the what font Chrome extension it tells you exactly what the fonts are here and now I'll recreate this section here but we can see how this first section looks so I'll make all the sections here at the top visible and I'll uncheck the image in the background so I'll preview in the browser and then we have it looks good I can resize and we can see the lady resizes none of the other elements really resize they change position a little bit but that's just because we need to you know design it on these other breakpoints here alright looks good so I'll create the next section so let's look at the image so I'll click on this rectangle and uncheck that rectangles we can see the elements here so here I'll create our products so I'll go into the website here and our products is 50 pixels and I want to copy this color code here so I can yeah these are not a little bit yeah so I can recreate this text here so here I'll create a text box I'll say our products and the text was 50 the color I've copied it so I can just take me a V to paste in there and it was Roboto 300 Seoul Roboto light click the drop down Roboto Roboto light and I'll Center it and there we go a place right over the text or the image looks good you can you can hardly see that there's a text box because it fits perfectly over the image okay then we have another text box here so I'll type in the text are far away behind the word Mountains far from the countries enter Ville kaalia and cons constant ya constantia there lived blind texts okay so I'll go into the website and let me sample that so it's Roboto 318 pixels in size and I'll copy this color code here so let me change the color and the text was 18 was it yep 18 and it was Roboto light mm-hmm and I'll Center it and I'll place it right over here it looks good so we notice that the line height is is a bit larger here on the website so to change the line height for text you want to use the leading option which is right up here it's these arrows that are pointing up and down and in Adobe Muse it's in percentage we can see that the what font shows us that the line height is 32 pixels Adobe muse more in percentages so you can just play with it until you get the the right line height so here's 160 I've already kind of worked with it a little bit so I know it's 160 and I must have missed some of the text because it's not lining up perfectly they're live okay all right okay Leah and Constantina let me see if I have the right 300 no that's right there live the line text okay all right there we go fits nicely right there perfect and I can even go to a line aligned to content area and make sure it's in the center that these elements are in the center perfect okay now create these elements here so for these elements I'll create one and then just copy and paste for the other elements so I'll create a rectangle tool create a rectangle over here over this image looks good then I'll create a rectangle down here and I'll recreate the text here so here let me go back into the website and for that it's Roboto bold the size is 18 pixels and I'll right-click and copy this hex color here okay I'll go to the text option say beautiful sunrise okay and the size was 18 say 18 I have the hex code copied so I'll he come and eat a paste and then it's Roboto bold and I'll Center it okay so I'll go into here and I'll just line it up looks good and I'll select the text tool and write this section here far far away behind the word mountains far from the countries oh Kalia okay let me go into the website and that font is 16 pixels Roboto light and I'll copy this hex code here so I'll change the color say 16 for the size and then I'll say Roboto light yep looks good I'll Center it and perfect and then for the leading I'll say 160 looks good almost fits perfectly yeah looks like if it's perfect a little bit more line height but that's that's good yeah that looks good there yeah okay so one other thing we notice with these images is that they have a corner radius on the on the images so I'll click on this image here or actually I haven't filled this rectangle with an image yet so I can go to fill add image and select this image here from the assets say scale to fill position it in the center and then I want to give the top of this image a corner radius from the corner radius option right up here we can click the those square those angles and it will have a corner radius of 10 so it'll be a little bit more smoother it'll have rounded edges on the left and right hand corner and then the same with this rectangle here I want to fill it with white and then we don't see the image in the background anymore and then I want a corner radius on the bottom left and on the bottom right so that they're rounded here on these edges okay looks good and then the next thing I want to do is add a shadow to this top element and this bottom element so I'll select them and I'll go to effects select shadow and for the shadow opacity I'll make it about 20 so it's a little bit smoother all right and we've created we've just created those sections so now what I'll do is I'll select all of these I'll hit command C to copy command V to paste and just paste them and those six different are those five other areas and then I'll swap out the image just like that paste again okay paste one more time and right in there okay looks good and now I'll just swap out the image so this one was the dog so I'll go to fill image and I'll select the dog here this one was that so select that this one was that one go to fill select that one the waves and select the waves are there looks good and this one was the forest alright looks good so let's see how this looks like in the browser then go into the layers panel and we'll bring that rectangle back in so the image is not visible behind it and I'll make the layer two not visible so we don't see the image I'll scroll down and there we go these are it's looking just like the template which is great this is the template here let me refresh so we don't see those those areas but there's a template and here's our Adobe Muse website pretty cool I can resize and obviously I mean yeah here we need to different break points we need to change the layout so it looks good so for the larger the larger breakpoints even if you resize the browser the content will stay in the middle and because these background sections are hundred percent way they will go across the entire browser and the content will be centered in the middle so you won't have any white space on the sides when building the website alright it's looking good okay we have this the text here and I will bring in the font smoother because I like really smooth fonts so here's the font smoother and this can be found at Meucci shop comm I'll place it right in there I'm speaking with like a low voice no but I think I'm talking a lot but here we have the text and the text is a bit smoother everything looks a bit smoother on the website looks really nice awesome so the last section that I'm going to go over because I'm not going to spend you know a couple hours designing the site here but I do want to go over this section I think it's this one here go to the layers panel and yeah we bring the image back in no it's not that section it is this section here yeah this section here so for this what I want to do is bring in the image of the MacBook so I'll place it in here and I'll line it up with this image here and when you start building the website you'll start to be able to use other elements that you've already created so for our products I'm going to copy that and paste and then oops at the zoom in tool and I'll place that right over here and I'll just say superb that's a little confusing because you can't really see it but 300 superb let me just undo that so we have our products which I copied and then let's make this a little bit larger there and I'll say superb features and then I'll just place it right over here and there it goes so because I know if I go to the website and I use what font again oops let's get let's go to the website here if I use what font this font is the same it's 50 pixels in size same color as these other headings as this heading here our products so I just copied and pasted and placed here in Adobe muse what you could do as well as you could create a a paragraph style out of these out of this styling so if I clicked on this text here and went to paragraph Styles I could create a new style from by clicking on this icon down here and here I can double click and say you know for the style name I could say head and give it let's say an h2 tag I'd either give it an each to tag or an h3 tag depending on how important I felt those headings were you know the the higher that are you know h1 is a really important heading h2 is kind of like a subhead yeah h1 is headline sub h2 as a sub head and so on so if you know for this one it would be h2 and for these headings here would be like h3 for beautiful typography eco friendly and so on alright so kind of went off on a tangent cuz I was talking about this image here but here I place the image and now what I want to do is preview in the browser so let me uncheck the image in the background and looks good and we'll bring back this this section here preview in the browser scroll down and there's the image looks good so with this image you'll notice because the image goes off the canvas we have this scroll bar down here I don't really want that because I don't want the user to you know scroll to the right and see all this empty white space here so there's a nifty little widget that I've created called the horizontal scroll disabler so I'm just going to type in horizontal and I'm just going to click hold and drag and place onto my Adobe muse website so there I have it and if I preview in the browser again that scrollbar is no longer there and there's the image if I resize looks great and it's just like the bootstrap template in here as we can see it does the exact same thing awesome so Adobe needs is a really powerful software for creating websites and I'm just really happy to be showing this method of creating it because if you're not you know you don't know much about design or you've never really designed a website this is a really useful way to to build a website and you can do this with any website you find on the Internet and now with their party widget you don't need any code to add some really cool effects and I'm going to design a little bit more and then I'll go into the animations for this website here so let me go to my layers panel I'll bring in the layer two again and then I'm going to here let me select the selection tool and I'll hide that rectangle for these check marks I'm going to use the font awesome icon set and I did create a quick tip on how to how to install the font awesome icon set I think it's quick tip number six yeah quick tip number six will show you how to install the font awesome icon set so basically I want to create these check marks here so I'll select the text box create a text box then I'll go into the font option here and I'll say font awesome and I'll select the font awesome web font and here we have the text option so here I want to go to glyphs if you don't see the gloves panel you can go to window and click on glyphs right in here and so I'll click on glyphs and here I have the font awesome icon set I can choose from over 600 font awesome icons and they're absolutely free again check quick tip quick tip number six to see how to install it into Adobe muse so here I'll click on the check mark and I'll zoom in a little bit I'll make the check mark here about 60 that looks good maybe 48 60 is a bit big there we go 48 I'll Center it and it's a bit thicker than these check marks but I'm okay with that then I'll go into the drop down the color drop-down select the sample color and I'll sample that green right in there I can even add that green to the swatches by clicking here on the add swatch option and clicking ok and then when I open the swatches panel I have access to that green color right there looks good so I'll just copy this a few times paste just like that and it's not exactly over the check mark here but looks good there okay so there we've added the check marks and looks good so I'll just go into the layers panel and I will uncheck or bring back that section there alright so let me look at a few other sections just to see if I'll go through them and design them here we you know it's just bringing in the heading these go in a little bit here is bringing in the heading writing some more text you could create a a carousel or a composition widget for this so that you could have a few testimonials I'm not going to go over that now because that would take a really long time but there is a composition and I do have a tutorial on creating a composition widget that's basically basically object insert widget and then a composition you can add a plain composition and then the triggers would be these images and then the target would be text there would be text within the target and then you can make it like a slideshow so when the user clicked on these elements there would the it would go to that testimonial yeah I'm not going to go over that because I would take a while but I might just even do a little small video tutorial on this but I'll keep it moving so let me bring back that section here we can uncheck this here you could just create a few ellipses I'll do that real quick so we go into the ellipse tool and it looks like it's 110 by 110 you get bigger on a 110 110 then I can fill it sample that color and just paste that in there just like that and these these guides are just awesome I mean they're snapping so well just like that I'll bring in this image in here yep you want to paste it outside so it doesn't fill the entire section just like that looks good and that section we went over good good good what's in this section I think that was the composition mm-hmm here is the contact form so I do want to go over that so here it says subscribe to our newsletter so here I'll just create a contact form in Adobe muse so I'll go to object insert widget form simple contact I'll paste it right in there and for this I just want the email and that's yeah that's it just the email and I don't want this message here so I'll just click in here and delete it so the label trying to get that message out of their email and we said I can do eat it now it does not let me delete that try again home address it doesn't look like I can tweet the the message part there but as you can see I can restyle the submit button and the email I can take off the label and just do something like this and create something similar to to what's here so I can go in the drop down fill it with the Green say send and make it white and do something like that Roboto light will say 24 or yet 24 so I'm just kind of you know eyeballing it a little bit but just to save a little bit of time and then we can change the leading here to bring down to the send button all right so we have send there's the email I can go in here and format the the email text yeah I'm just kind of winging it winging it a little bit to save some time alright so that we have that subscribe to our newsletter I can create some text and you could also do this with MailChimp it but you add MailChimp after the newsletter and go to the website and these is here so that's Roboto 326 and I'll copy this text so if you've watched the video this long Congrats because I've been going for a while but here let me do that and so I'm it I'm going a little bit fast now because I do want to save some time here all right so I can't delete this form in there it should be away but oh there it is you just have to click a few times and and it will delete mmm glad that's that's an option there yeah we'll send the form received text in there and this text right in there get in there so with Adobe Muse it has a few a bit of text that tells you when the forms been received or it hasn't and things like that so you can just kind of play with that alright I think that looks good I mean it's not perfect but there we have the email and open back the background section in there okay looks good so I think that's it for designing the site all the other sections are just you know adding icons and adding text which I went over here at the top as well so let me preview in the browser I'll scroll down we have that section that image the dots we have the text here looks nice and we have this section here this needs a little bit more formatting but does not look too bad I we just make this size here a bit smaller to match the Sun button but there it is and the next thing I'll move on to because I've just added the assets which took most of the video tutorial but let me just resize this a little bit yeah I can get the exact size which is the height is 50 so in here height is 50 okay so I would format that a little bit more and make sure that it matches the the Sun button here okay so the next section let me go to the slideshow I've added the element and assets I've kind of showed how to do that the next section is add effects so if we go to the bootstrap template here and I refresh and I scroll down we can see that elements are fading in from the bottom to the top there so what I'm going to do for these elements I'm gonna do it for these elements so I can just show it fairly quickly excuse me my voice is dragging a little bit okay so now I'm going to add the animation and to add animation to quite a few elements so for these elements here I want it to fade fade fade out winter is coming in so because it's a lot of different elements what I want to do is create a rectangle around all of these elements here just like that and the next thing I'm going to do is bring in these simple and sweet on scroll animations because that's the widget that I'll be using so I'll go to my library panel and if you don't see the library panel you can go to window and click library then I'll type in SSO si for simple and sweet on scroll animations widget which can be found at Muse for you chef comm and then here I'll click hold and drag and place onto my Adobe muse website and then here I'll bring in the simple and sweet on scroll innovations so you want to place the ad first at the top here first and then then the widget so here I'll click on that rectangle that we created I'll go to graphic styles I'll create a new graphic style by clicking on this icon down here that that looks like a piece of paper then I'll double click and I'll call this on scroll one because in the widget here we can see it says on scroll 1 that's the name of the graphic style name in the widget so you want to apply it to these elements as well alright so now we have the animation is fade up and it's going to start from when the top of the element reaches the bottom of the browser and we'll have a play we'll have it repeat when it play so we won't check play once and there is a video tutorial on the simple entry on scroll animations as well okay and this rectangle does need to be behind all of these elements so before it was at the top because we created it and it got placed on the top of all of these elements but we do want to place it you could place it right above all of the section rectangle so here we can see we have all these rectangles that represent the sections if you put it just above the the the last rectangle here you'll ensure that it stays behind all of the elements in here okay so there we have it and then in the simple and sweet I want to change the duration to a thousand and the easing will say ease ease out ego quad I think it's a nice one or no ease out court here just add a little bit of easing and we'll have it yet fade up looks good so I'll go to file preview page and browser and I'll scroll down and we can see it fades in nicely looks good perfect so I'll just copy and paste this rectangle behind the other elements just like that and this is just you know kind of customizing the widget and how you want your animations to to play all right so we just had those rectangles there and I'll bring all these rectangles right there looks good and you can use the the animator widget for this as well scroll down awesome you see it fades in nicely and I change the duration here too to one second if I wanted to give these another graphic style name so it has kind of a staggered delay I could go to the graphic Styles create a new graphic Styles panel double click call this article 2 and then click on scroll three and then this one I'll say uncle two and this one here on scroll three I'll paste I'm going a little bit quickly over this so if you have any questions let me know and then here for the delay I'll save the lay of Yelp's a300 then I'll paste again and then here I'll say on scroll three and for the delay we'll say 600 okay so it'll have a staggered effect element to come in flawl scroll down and perfect looks good I'll scroll down and as you can see we have those elements animating n yellowy let me close some of these tabs here get a lot of tabs open so preview again scroll down and we have those elements there looks nice okay for text it's a little bit more simple you don't have to create the rectangles let me see if this works here yeah for the textile just assign on scroll one and there's not going to be not going to do anything because it's not scrolling but for these for instance I'll just assign all integral one to these and you should fade in as well so I'll scroll down yep and they do perfect this one let me make the browser smaller so there it comes in perfect so I could assign on scroll one two just a bunch of elements and watch them animate in it just for group of elements you want to create a rectangle behind it so that all the elements animate in together so you can just create a transparent rectangle behind it assign the graphic style name that's in the widget and then then change the widget options and the delay the duration to get the desired animation okay and I'll preview one more time and I think we're at close to the end of the video tutorial we have that nice animation which is similar to with graphic burger calm type-in guide and click here and then we'll go to the live demo so I'll scroll down it's fairly similar you have to go to the website yep we have that nice animation looks good okay be superb features comes in and perfect alright so I think we're ending the video tutorial so we've added the animations for those effects I would recommend either the simple and sweet all scroll animations or the animator widget ok so let's go back to the slideshow and the last step is repeat the process for other breakpoints so let's go back into Adobe muse and we have the 960 breakpoint here and as we can see all the elements aren't there but they're not they're not in the correct place so what we can do is I'll go to my layers panel and I'll just hide everything so here what I'll do is I'll make sure I'm on layer 2 then I'll go to the finder and select the 960 breakpoint click hold and drag and place into Adobe muse so there's the image and I want to drag it to the size of the website okay there it is and then I'll bring in the layer one and so now we have the image and we have you know we can we can hide some of the rectangles and just see where things need to be placed so I can move things around and this will take a you know a bit of maneuvering and then the font here you want to make sure that format text on current breakpoint is selected and not across breakpoints because here I'm going to change the text so I'm gonna go into the website here and I'm going to use the what font and we resize the browser here to this breakpoint and here we can see that the text changes to 40 40 pixels here so I'll go into here and I'll change it to 40 and we'll bring this in like that space and bring this up just like that place it right over and it looks good and this text is fairly large this text box right in there alright so if we go to the 1200 break point that the font stays the same but here we've made the text smaller so it's just kind of playing with the different layout and moving the elements in in different places and I won't go through this too much because uh it's just this morph design thing here okay and I want to lock this image here so it doesn't move all right place that right in there and this one make it not visible and yeah so there's a just a quite a few elements in different places here I would move this the text actually looks bigger for this one yep fine text up in there so I can go into the into here and it's 18 here it's 18 as well oh yeah the text is just uh placed differently so yeah Constantine yeah yep I'll stretch out the text box oh there we go easy we have that and then these images I would actually go to this break point and I probably group everything out as grouped up that one was in groups all right click in group and right-click in group and this will just make it easier to to change them on the different layouts click and yep right-click in group and right-click and not lock right click in group okay go to the 960 and I can just try to move these around yeah and yeah so there we go so yeah so it's just moving things around and getting the layout to to match the image as well just like we did on the first breakpoint so it is a bit of work I mean but you know it'll make for a really nice website one once it's finished it'll work on all breakpoints and you can have animation on all the breakpoints there so it's kind of working with it a little bit yeah you could use the zoom out tool and kind of build it that way so I'm not going to spend too much time over this section because this section is really just moving elements around and in getting the layout correct correctly setup on the different break points so just moving things around because it's fixed width you don't have to worry about elements getting smaller or larger what will happen here I'm on the 1200 breakpoint and yeah so there is the 1200 goes to 960 we can see that the text changes and some of these elements are in the right position but I might have spend too much time with it there as you can see but there's the website looks good there's a 1200 breakpoint and let me make the image hide the image here yes we have the 960 and we have the 1200 so I'll hide both of those but yeah I won't go over too much of the yet so here I was going to hide this image on the me hide layer 1 and we're going to hide this image on this breakpoint then I'll bring in the 600 breakpoint image right there looks good just make it same width as the website and right there looks good then we'll go to the 480 breakpoint and I'll hide the 600 image on the 480 breakpoint and I'll bring in the 480 breakpoint alright let's make it the size with a breakpoint and that's it so we have that website we have this one and I'll hide the 480 on this one this one I'll hide these two and then the 1200 we'll just hide it we've already set it up just high all of it there and I'll bring in layer 1 back in there ok so here we are on the 1200 breakpoint and I'll preview one more time ok there we have it we have guide create awesome things for better web you have the elements here they come and fade in looks great alright and we have this image here perfect and everything kind of goes out of whack on the different break points but that's just a matter of moving things around on those break points here we have the MacBook and there it is you can make the browser really large and it'll stay there and we removed the horizontal scroll bar here with the horizontal scroll disabler here we have subscribe to our newsletter and of the image is still in the background there so let me remove it there yeah let's preview again alright there it is looks good so that is creating a bootstrap template in Adobe muse we went over the all the points in the PowerPoint I'll leave it a link to the graphic burger comm website here to the guide of free HTML template so you can practice and and start working from bootstrap to Adobe muse and I'll leave a link to the fire shot crow extension and to the what font Chrome extension here in the description area below so this is a great way to practice or to get started with kind of building your own website in Adobe muse there were some more advanced topics covered in this tutorial but if you already begin into a beginner to Adobe muse I'd recommend watching a few of the earlier videos on my youtube channel and adobe has some great videos as well to help you get started with the basics so that's it for this video tutorial let me just go back to the slideshow here so the steps we found a template on graphic Berger com we took a screenshot of every breakpoint where the website changed we created the breakpoints in Adobe muse I decided to use fixed width because I found it would be easier to just have the website have the website layout change on those different break points rather than everything becoming responsive and you know changing shape and things like that and I did make the sections stretch the browser width so the content stays in the middle of the website and the sections are 100% width so you don't have any empty space if the browser window gets too large what would happen is the sections would stretch to the browser width will cover the entire browser and then you'd have the content nicely centered within the browser okay we created the guides for reference with the image we place the guides to use them as a reference and then we added the elements and assets from the graphic broker website or the guide website we use the the assets that we're in the images folder um if you are creating your own website you know you want to use your own elements and your own assets and your own content in there because we use you know the text and everything from it but we did use what font to kind of sample the text as well the other text size the text type or the font family and the color so we did that and then we added the effects with the simple and sweet on scroll animations widget found at Muse for you shop comm and then we would repeat the process for the other breakpoints I didn't go over that as much because it would have taken quite a while but it's basically the same process for the other breakpoints because the elements are already in the website you can just move them round and get the the layout correct for the other breakpoints so that's it that is let me go to the first slide here that is creating a bootstrap temp template in Adobe muse hopefully this was informative I know I covered a lot of material if you have any questions feel free to ask me in the comment section below but I think it's a great way to start building a website in Adobe muse you can find any template and you know take a screenshot and just put the guide in and create a really nice layout for your own website the simple and sweet article animations can be found at me free shop comm and here I'll click on the pop-up and here you can click subscribe to get access to all widgets and any new widgets I come out with for 39 a year or if you'd like to check out with PayPal you can click here and check out with PayPal the or subscribe with PayPal scuse me and then here we have the simple and sweet onscroll animations and here you can click Add to Cart to purchase individually or again you can get access to all widgets and any new widgets I come out with for 39 a year by clicking here and here's the simple and sweet onscroll animations you can check out all the different animations you can do with it okay so there we have it you can do quite a few different animations with it I'm not going to go through the entire thing but if you want it to look there you could check out the animations there as well so you wouldn't just have to use a fade-out for the website if you wanted to use a different animation so that's it for this video tutorial let me go back to the slide show just to end on that slide yeah there we go the bootstrap - Adobe muse video tutorial I was really excited to do this video tutorial so again I do this to help people awesome website without code if you like this video tutorial you can subscribe below also in the show more section below or links to other resources and links to these for you shop comm so again thanks for watching and I'll see you in the next video tutorial thank you you you

Channel: Muse For You

Views: 83,200

Keywords: adobe muse, adobe muse cc, adobe muse tutorial, muse tutorial, bootstrap, bootstrap templates, bootstrap themes, boostrap template, bootstrap to adobe muse, adobe muse bootstrap, free bootstrap themes, free bootstrap templates, boostrap themes free, template bootstrap, recreate bootstrap template, bootstrap in adobe muse, fireshot screenshot, whatfont, sampling website, bootstrap templates free, bootstrap layout, boot strap, advanced adobe muse tutorial, muse for you

Id: 6WszgIiOTO4

Length: 70min 5sec (4205 seconds)

Published: Sun Sep 25 2016