step 2 – change theme · theme to use. • when you publish it is not full screen. it is about...
TRANSCRIPT
Step 2 – Change Theme• First, I will explain the new Themes.• The new Themes now works with Mobile Devices. The older
Themes did not work as well with Mobile Devices. That’s why they changed the Themes.
• All of the new Themes have a Section Element on pages that allows you to change background color on a page. The older Themes did not have Section Element and you can’t change background color on a page.
• When you scroll down on most of the new Themes, it still shows the navigation bar. The older Themes did not do that. That’s why in the older Themes, if it is a long page, you may want to put a link at the bottom to the Back to the Top of the page. Step 9 shows how to do that.
• Next is more about new Themes.
• All of the new Themes comes with 3 or more pages. All new Themes come with pictures and some have Text also on the Home page, but not pictures and Text on the other pages. The older Themes did not have pictures.
• I don’t like the Pictures on the home page, but you can remove them and I will show you how to remove them in Step 3. I think the reason they added Pictures is you see different type of websites and also what you add yourself. That’s why I recommend remove the Pictures and you can add your own Pictures.
• Next explains what the older Themes can do and the new Themes can not do.
• Some of the older Themes allow Background images outside of the pages. The new Themes does not allow that, but some allow background color vs. images, like Black. That’s why I have a Tip to find an older Theme, called Lucent Theme.
• Next, I will explain the first Theme we selected and after that we will practice adding 4 more of them to see which one you want. Note – once we add 4 of them, you can go back to the one you want using Recently Used, which I will show you later.
• If you don’t like any of them, there are a lot of other Themes you can try them at home.
• Why use the first Theme we selected?• It only has a few images on the Home page that you can
remove. Most of the other Themes has more images and text. When you add another Theme, it does not add there images and text, which is good.
• It shows more pages on the navigation bar then other Themes.
• When you scroll down, the navigation stays on the top, which is good with a long page.
• It shows the Site Title on the Top, because the pages don’t have Headers.
• Note – when you add a page, it shows a Header. But, you can make it No Header that I will show in Step 4.
• If you don’t want any Headers on your pages, this is one Theme to use.
• When you publish it is not full screen. It is about 1115, which is next. All the other 4 ones we will do is in a full screen.
• Here is a sample with a Header that is about 1115 width and the page is about 960.
• To change the width of the header and/or page, you can Edit HTML/CSS. The second on-line training shows it. Next is to add a second Theme.
Click on Theme Tab First, next is what happens
Click on Change Theme
• Next is what happens.
• Page changes and you then see Themes.• If it is not on Personal, click on Personal. Next is
what to choose. If you don’t see Other, click on.
• Once you click on Personal, scroll down just below the first ones.
• Then hover over this one and click on Choose.• The reason is it changes the space on the top,
which is next.
• You see it on the Build tap and you don’t see as much space at the top.
• Sometimes the Site Title is different. You have to go to Settings again and click on Save again to change the Site Title.
• Next is this Theme options.
• As I mentioned before, you don’t see the images from the new Theme, because it is just section.
• I already changed the Site Title.• Next is this Theme options. First click on Theme
again.
• You see Light highlighted. When you can click on Dark, it changes full Background to Black and changes the Text to white. Next is a sample of clicking on Dark.
• You see the full Background to Black and the Text is white. You also see Dark highlighted.
• You can click on Light on the left to go back to the original. I recommend you do that.
• Next is click on Theme Options.
• When you click on Theme Options, you see 3 options. When you click on OFF next to Fixed Navigation, it changes to ON. Once it is ON and you Publish, Fixed navigation keeps the navigation menu displaying at the top of your site as the user scrolls down, which I recommend.
• Next is Full Width.
• You see Fixed Navigation is ON.• When you click on Full Width
ON, it changes to OFF. Once you Publish the Width changes to about 1100. You can do that if you want.
• Next is Animation Header Scroll.
• I did not change the Full Width to OFF, but you can.
• When you click on Animation Header Scroll OFF, it changes to ON. Animation Header Scroll causes the headline and sub-headline text to shrink as you scroll down.
• Note – I tried it and did not understand it. So, don’t do it.
• Next is the Third Theme.
• First click on < to go back to the Themes.
• Then click on Change Theme which is next.
• It goes back to Theme and click on Change Theme.• Next is to find the Third Theme.
• Theme Gallery opens and you may be on Personal.• They added a Theme that is the same Picture and
name, but it shows Venue 2 at the end. I tried it and it is not good. Next is the original one.
• The original one is under Other. If you are not in Other and click on it and next is what happens.
• When you in Other, you to scroll down to the bottom and you see the same name and Picture. When you hover over it, it shows Superset vs. Venue 2. You then click on Choose and next is what happens.
• Once you Choose, you see Title in the middle and you don’t see Navigation bat, but there is a Icon.
• The good news is you can show the Navigation bar using the Theme Options, which I will show later.
• Click on Theme again and next is what happens.
• Once you click on Theme, you see the Navigation Background options.
• You can change the Color, which I will show later.• You can show the Navigation bar using the Theme
Options. Click on it and next is what happens.
• When you click on Theme Options it shows Collapse Navigation ON.
• When you click on ON, it changes to OFF and it shows the Navigation bar, which is next.
• Note – Search Box is Pro Version.
• You then see it and you can change the background color.
• To change the background color, you click on < in the upper left.
• Next is what happens.
• Note – I already added some pages, which we will do later.
• It goes back to Theme and you can click on a different color, like I did and you see it. I tried to customize it with Edit HTML/CSS and I could not do it. You can click on other Color to text it.
• Note – It shows the Site Title. You can not show it, that we will do later.
• Next is the forth Theme.
• Next is how to go the forth Theme. Click on Change Theme again.
• Theme Gallery opens again and click on Event.• Next is to find the forth Theme.
• Once you click on Event, hover over the Theme on the left and then click on Choose.
• Next is what happens.
• You see Site Title and the Navigation bar with a different Background Color.
• Next is how to add Header.
• First click on Pages to add Header and then click on Home. The reason is that this Theme changes Color on Navigation Background and Header.
• Next is what happens.
• Then click on No Header and then click on Header.• Next is what happens.
• You then see Navigation below the Header and you see the Header color different.
• Then click on Theme and next you will see the options.
• Once you Choose, click on Theme and you see the Navigation/Header Background options.
• You can change the Color, which I will show next.• You also see Theme Options, which I will show
later.
• When you click on another color, like this one, it changes the color on the Header and background navigation.
• Click on Theme options and next is what happens.
• You see Header Color is ON.• Click on it to turn it OFF and next is what happens.
• You then see Header Color is OFF and the Header is back to the original. The Navigation background color stay’s the same. It also stay’s the same with No Header.
• Click on < to go back to Theme, which is next.
• Next is the Fifth Theme.• Click on Change Theme again and next is to find
the Fifth Theme.
• It goes back to Theme Gallery. As I mentioned before, they added one new Theme with Navigation on the left. Next I will first show you the new one. After that, I will show you the old Theme and I recommend you select the old one.
• To see the new one, click on Online Store and you see it on the top in the middle. Next is how to get to the older Theme.
• You click on Personal. You have to Scroll Down to the bottom.
• Next is what happens.
• At the bottom, you see the old one with Navigation on the left. You hover over it and click on Choose and next is what happens.
• The Site Title changed again. I decided to change Site Title again, which is next. You also see the Text background is different.
• Click on Theme again and next is the options.
• You see color options for the navigation when you are on a page, like home. Next is a sample of clicking on a Blue one.
• Here is a sample of clicking on a Blue one. • Next is the other options when you click on +.
• When you click on +, you see Primary and Accent color options. Primary is to customize the Navigation Color. Accent is to change the background color of Site Title and Text on Header.
• Next is Accent.
• When you click Accent a new window opens with color options. Next is a sample of clicking on a Red one.
• Here is a sample clicking on a Red one. When you click on Primary, the process is the same.
• Next is to use Recently Used. You click on Change Theme again.
• You goes to the Theme Gallery and then click on Recently Used.
• Next is what Happens.
• You then see the recently used ones. Note – I tried the new one, so you see more on mine. You may have to Scroll Down a little, then first click on Choose in the Second Theme.
• Next is what happens.
• You then see the Second Theme with the Header in the Home page. As I mentioned before, sometimes the Site Title changes. You go back to Settings and save again. Next explains Headers.
• The Headers are the same on all of the new Themes, but you can change the background image or change to color. You also can change the size of the Header. Step 3 – Part 3 shows you how to do all of that.
• The Older Theme Header is different. You can change the background image, but you can’t change to color. Also, you can’t change the size of the Header.
• I like the Header in the forth Theme, because the Navigation Bar is below the Header. I also like the fifth one, because Navigation is on the left and Header width is smaller.
• As I mentioned before, you can Add your own Header with Section Element, which is a Tip. Next is a Sample.
• Here is a sample of creating your own Header with Section Element. I added Text, Image and Background Color. You may want to create your own Header with the Tip. If you need help with it, contact me [email protected]
• Next is other options.
• I use a Free program called PicPick to create Images.• You can create an Image with background color,
add Photos and Text. Once complete, you can save it as an Image with PicPick.
• You can do a Screen Capture with PicPick of the Create your own Header that has a Photo, Text and background color. You can then save it as an Image.
• You also can create a Frame on the Image and save it as an Image. Next is a sample of doing a Screen Capture and add a Frame and upload it.
• Here is a sample. The Tip – How to create image with background color shows how to do it with PicPick.
• Next is more about Headers.
• The other reason for Headers is to add Text, like the Site Title, so you don’t see the Site Title in the Navigation Bar. Step 3 – Part 2 shows you how to do that.
• Once you make changes to a Header and you want it on other pages, you have to copy the page. Step 4 – Part 1 shows you how to do that.
• If you create your own Header, you can copy it to other page. Note – when you create your own Header, it is the only one that allows adding more images, which I like. The Tip – Add your own Header with Section Element shows you copy and add image.
• The Older Theme is the only one that allows you to Save Header to all pages.
• Next explains more about the Older Theme.
• Why use the Older Theme?• As I showed before, background image outside the
page, that you can change, which is in the on-line training.
• It has Site Title longer on the left then the Second Theme, but it does not show as many pages on the navigation bar as the First Theme.
• Note – when you don’t show the Site Title on the Navigation, you see more pages on the navigation bar, like the First Theme. If you don’t want to show it, you can add it to Headers, which is in Step 4.
• When you scroll down, the navigation does not stay on the top. If the page is large, you may want to add a Footer, which I will show you in Step 11.
• Next is more details.
• As I mentioned before, the reason why they changed to new Themes is they work better with Mobile and Tablets. The Older Themes, like this one does not work as well on Mobile and Tablets.
• When you publish this Theme, it is not full screen. It is 960, which is next. To change the width, you have to Edit HTML/CSS.
• Next is what it looks like when you Publish it.
• This is what it looks like when you Publish. Note – I changed the Header image.
• Next is how to get to this Old Theme.
• As I mentioned before, there is a Tip to find an Older Theme, called Lucent Theme.
• If you have a Weebly account about 2 years ago, you can find it on the Theme Gallery. The Tip shows you how to do that. If you have a new Weebly account, the Tip has a link to get the Older Theme.
• This is the End of Step 2.