Video Transcription

Good morning. Welcome to another edition of Tech Tuesday presented by Delta Media Group, where we're kind of curious. If we believe that dinosaurs have more in common with modern day birds than they did with reptiles, why is it when we got DNA out of that mosquito, did we fill in the DNA sequence gaps with frog DNA instead of bird DNA? Shouldn't all those dinosaurs be half pigeon?

Anyway, today we are going to take a look at something that doesn't have a whole lot to it, depending on how you look at it. It depends on how deep you want to go, but we're going to look at agent website set up and a little bit of customization. We're just going to take you through the basics here, because the idea is you can get really, really in depth with customization on your website, but this will at least give you what you need to cover the surface, get in and make some initial changes, that kind of thing. Let's jump into the Delta net and take a look.

The first thing we're going to look at is we're going to go down to website, all of the website stuff is under website, and down to site design. Now what this will let us do is select our initial theme. Now keep in mind, the significance to these is that these are website themes. They're not templates like they used to be. The way these work is all of the websites are a collection of modules and all of those modules can be assembled in specific ways. They can be specific colors, there are different types of modules that can go at different points on the page. These are all essentially the same as far as platform goes. They're kind of the same template except they have different models in different places. That's the kind of thing you want to pay attention to with these. Colors don't really make any difference. You can change those. These are just presets, is a good way to look at them.

As we go down here, you can see the colors, we can change those later. Those don't really matter, but the main thing you want to look at is, so this one has a large agent image up in the corner. If you like the way that agent image is laid out and you'd like kind of the layout of this one, with that small background image, the quick search and that box there, then you'll go with this one. The difference over here is it's a larger background area and you've got the background area up at the top and the agent image over here.

As we scroll down, see this one looks very similar but without the agent image. You can see the agent image is are going to show up in the bio down in this area. Also you have a little bit of a description on each of these to give you an idea of the kind of things that they'll display when you get down below the fold as you were to scroll down on these. Those are the kind of things you really want to look at. The colors you don't want to look at because you can change those later on. The background image itself, you can change later on. You don't want to worry as much about those elements.

Once you find the one you like, you can just click on preview theme, and then what it should do is load up the desktop version of what that theme will look like when your website is switched over to it. Here you can scroll down a little bit and see the different sections and everything that it includes. This one's kind of cool. It actually has ... This would be your bio section and then you have a customer reviews section or module that loads up here. Featured homes load up there. You've got a blog section here if you have a blog set up. If you don't have a blog set up, this section just won't appear on this template, or theme rather, but if you do have one set up, as you add articles to it, they'll show up here in this spot. These are actual ... That might actually be an article I wrote. I'm not sure, but this gives you an idea of what it'll look like.

Now you can also switch between the different views. This is what it'll look like on a tablet, and then this is what it'll look like on a mobile device or a smartphone. If you decide that this is the one you like, you just click on set live. Now that should be the live theme on the website. To get there, I'll just go to website, I'll click on overviews, and then up here at the top I have a preview website link. We'll click on that and we'll see that it didn't reset my session there. Well, we might be out of luck. It might not switch to the new theme for me. Let's try it again. Let's try it one more time. Site design, preview theme ...

Oh, there we go. It's taking a moment. Every now and then when you switch themes like this, it'll take a little time just because the replication is behind. What it's doing is we have multiple web servers that are all set up. Some of the servers are caught up with the change I just made and some of them aren't yet. It's kind of random as to which one I'll get. We just happen to have perfect timing during a Tech Tuesday when that would happen. There we are. Look at that. See that? Perfect.

Now that we've loaded up the new theme, what we're going to run into is we're going to change, or I'll show you how to change, some of the different elements, but know that because replication's behind we might not see the changes take place live. We might not be able to show you the results every time, but in order to customize our theme, now that our new theme is loading, you can see everything loaded up there the way it's supposed to, we'll go down to website and then modular theme editor. This gives you the options where you can actually customize the different elements of that website theme.

As we go down here, we have agent name color. We've tried to break these down into sections to make it fairly obvious what each one of these things will do. Agent information is referring to this agent information section up here. You can see that the text is black. This gives you some different options as far as that section goes. If I wanted to change just my name color, I could change it here. Let's say I want a nice dark blue for that. We'll make it stand out. Let's make it a nice bright neon green. Then if I wanted the agent designation information, so that's what's going to show up if I have designation stuff down here for my designations field on the overviews page, that can be a different color. Right now that's still set as black. I can remove the photo entirely. If I do that, it'll remove this photo, but this information will stay, or I can remove all the info. If I change this to false, that'll remove this entire agent info block. It'll remove the picture and the name and all that stuff.

We'll go ahead and switch back to true. The next thing we can control is we have the home finder bar. This refers to this block right here. It'll appear in a little bit of a different spot depending on which theme you went, but when we look over that, this is the background color. This is the non link text, the link text and the link hover text. What that's referring to is background color, blue, non link text is this because that's not actually a link, it's just text. Then this would be your linked text. You have your join and sign in, those are actually links. Then when I hover my mouse over those, that's the link hover color. If I wanted two different colors there, I can do that.

Right now we can see it's all set to white. If I go to my home finder link text, we'll change that to like a blue, and we'll make our link hover text a red, and we may or may not be able to see the changes once I save them just because things are behind, but we're going to find out. We're all set there. Now navigation refers to this section here at the top, so we can control some different elements there. To go over this navigation bar, this is the actual background color of the bar. This is the color of the font and this is the hover color of the font. The font is the buyer sellers recent transaction, the actual text there. Then when I roll over that, if I wanted that color to be different, I could do that also. That's what that hover color would change. Navigation font hover color, dropdown background color, dropdown font color, dropdown background hover color, and dropdown font hover color. It should say hover color, right?

All of those things respectively, if I rollover buyers, you can see this dropdown comes up. As I roll down this list, the background color changes. That's the background hover color. Then the text within that would be the hover color of the text. Right now it's the same, but if you wanted to, say, change this hover to a completely different color, and this white wouldn't show up on it, you could switch the text color at the same time. If I wanted these all to highlight in white and then make the text black, I could do that. I could say dropdown background hover color, we're going to change that to full white and then dropdown font hover color, we're going to change that to black. There we go.

Now when I save this, again, assuming it saves right away, you should be able to see all these turn white as I hover over them and the text will turn to black. It'll make for an interesting look. Keep in mind, we give you a lot of flexibility here as far as these colors go. You can do a lot of things with these, but you always want to be careful with making sure that the colors match up and line up. Really, follow what your brand follows.

The next thing we have here is we have a little bit of content for the homepage. In this case, there are a few different things that are featured on this homepage. One is number of reviews. In some of these themes, instead of showing the reviews in a line like this where you can actually cycle through them, it'll show all the reviews in one spot. This would allow you to determine how many reviews it shows there, or if you wanted to get rid of that section entirely, you could just change that to zero and then it would show no reviews, so that module would be gone.

Now you can put a title on the featured home section. Right here where it says featured homes, we could change that to my listings if we want. Then we can choose how many we'll load up there. It's set to six by default. I only have two active listings attached to this account, so that's why only two are showing up, but if I had six, it should show all six there. If I had, say, six or more or listings than that, I can have it randomly choose six of my listings or I could change this down to three and just let it randomly choose three of my listings. You see you have some options there as far as how many listings you can show. At this point, 3, 6, 9, or you can show up to 12 if you want. If you have more than that, you can just have it pick which 12 show up at random. In fact, it should do that by default.

Next down the line we have a section where we can choose our background graphic. You always want to be careful with the background graphic. The main thing is you want to make sure that you choose the right size and it has down here the file size needs to be less than 15 megs. Actually, ideally, you want it to be far less than that because that affects how quickly the page loads, but you should also make it 1800 pixels wide by 700 tall. Depending on the image you use and how you want it to lay out on the page, keeping in mind that as the browser window changes sizes, that will stretch and compress the image also. If you have an image with text in it, you generally don't want to use those because you can't really control what part of that image the page stays focused on because that depends on what size the browser is. Every user could have a different size browser so it's not going to show up consistently for everyone.

The general rule of thumb here, 1800 pixels wide, and you can usually, depending on the image, let the height adjust proportionally when you resize the image. Then it's a good idea to run it through something like compressor.io to actually make the file size as small as possible so that your homepage loads as quickly as possible. To set this up, you can see my options here are background graphic, so this would be just a static graphic, which is what we have now. If I go up here, that's this background graphic here. My next option would be a background slideshow. If I click on that, I can actually upload multiple images here. I would either just drag my files in or I would click add files and it would bring up my file chooser and then I can add files to this and then hit start upload and it'll upload all of my slideshow images. The idea is that those should be about the same size as your static background image would be. That's the same rules here.

Then lastly, you can also do a custom video if you want. Videos can be a little bit trickier just because of how they need to be compressed, but what it comes down to is the same thing. You want a short video that has a nice loop to it because it's just going to run in the background all the time. Ambient videos work well like a video of a beach with just some waves rolling. It has to be something that makes sense when you watch a loop.

The other thing is you want to get that file size down as low as you can also, but the quality as high as you can. We're always here to help out if you have any questions or if you need any help putting an image background on your website, or a video background on your website, or if you have a video and you want to see how that can go on your website, we can help you out with that. It can get a little complicated when it comes to compressing video, but once you have your compressed video, you can upload that the same way you would a background image. You just drag it in here or you click add files and select it and then hit start upload and it'll upload as your background image.

What I'll do is switch this to background graphic. We'll go ahead and delete the one that's there. It reminds me to go to the bottom of the page and save. Just by deleting it, I haven't actually saved any changes yet. Now I'm going to add files. I'm going to find my sample images here. Here's some background images. Then I've already, ahead of time, I've optimized a few. Let's go with a modern living room. That sounds promising. There we go. It puts my image in the list and now if I hit start upload, now my image is uploaded. It reminds me again that I'll need to save the page at the bottom in order to save my changes. I'll close that out. You can see my image showing up there, and we'll continue on.

The next thing I can do is I can adjust the header graphic by itself. The background graphic I just did is the background of this whole thing. It's this full site background graphic, but if I wanted a different graphic down here than I have up here, that is what I would use this header graphic section for. At this point, I can either choose an image that's 960 pixels wide, and it will push the header down based on the height of my image, so depending on how far you want to push down your navigation, you'll want to adjust the height of your image accordingly, but I can upload a custom image to do that or I can select from our image gallery down here. We have a lot of these leftover from holidays and things like that, that used to be available with our template system also. If you used some of our older website templates from a few years back, a lot of the same headers are still available here. If you wanted to change out your header image for different holidays and things, you can do that.

The next thing we can do is if your header doesn't have your company graphic, you can check this little box and it'll make sure that the company's logo shows up there also. Moving on down, next thing we have is the header logo. This allows you to control what logo shows up in the header. This is the company logo that shows up right here. What you can do with this, and the reason that we have this section, is you can choose from the different company logos to choose the one that's going to fit best on the graphic that you chose for the background. If you chose a really light colored graphic, there is probably a darker colored logo down here you can choose. Some of the logos, like this one for example, have like a background glow to them, so even if it's on a dark background and normally wouldn't show up, there's actually a little bit of a glow here that you can't really see very well. That sometimes comes out very well as far as those go. We'll switch to that one. Why not? There's also the ability to upload custom logos.

As we move down, the next thing we can do is the quick search section. It says quick search background graphic, but this is the background graphic edition and some settings in addition to that. If we take a look here, this is the quick search section. It's kind of that above the fold section, but below the navigation. If I put an image there, it's just going to fill in this section. The idea is if I want to use a custom header graphic and then a custom quick search background instead of a full site background like this, that's how I would do that. I would set my header graphic up here, either by choosing it or uploading one, and then I would set my quick search background graphic down here by uploading whatever custom one I want.

For this one you can see image must be 960 pixels wide. The nice thing about this one is it can be taller also because it's filling in this section instead of this section. Generally you don't want a really tall header background graphic because then it's going to push the rest of your site content way down, including your navigation and your quick search. Your quick search, let's face it, that's why people came to the website, to search for properties. We don't want to push that one down further than we have to.

Now the next thing you can do in this section is you have some ability to customize what the quick search is. Some of these options show up for everybody. You have find your next home, multiple search fields off to the right. Those are some different options that don't include the AVM. If your company has the AVM system turned on, then you'll likely want to select one of these options toward the bottom where you have tabbed boxes for find a home and what's my home worth, tabbed search form for find a home and sell a home, but this one I think sell a home goes to the ... Click on that. See, sell a home goes through to the VMA page. The difference between this one and this one is that this what's your home worth actually loads up another search form where people can type in their address and it takes them through to give them a valuation for their property. If your company does have the AVM system turned on, you'll want to go with that one. This one has the same functionality but the boxes are separated. You'll have ...

Man, I'm falling apart for loading the page today. This gives you an idea. The find a home and sell a home, the option with two separate boxes will load up the quick search on the left and then over on the right it'll load up a separate box for the what's my home's worth that takes you through to the AVM. Then next, as far as quick search goes, you can choose whether or not the auto completer will work in the quick search. If that's enabled, if someone starts typing in an address or an MLS ID or anything like that, the auto completer box will show up below that and start giving them suggestions as to what they're typing in. This functionality is very similar to what you see on most real estate websites, Zillow, Realtor.com, all of those places you start typing it out, and even Google really when you run a search. If you start typing, it starts trying to guess what you're typing. That's what this is referring to. If you don't want that functionality, you can switch that to disabled.

Then next we can control the footer logo also separately. If you have a different color in the footer of the website all the way down at the bottom .... Man, this thing's gone crazy on me. There we go. If you have a footer logo showing up down at the bottom of your website here and the background color of that section is different than the color at the top, that is the intention here. That way you can choose a different color logo for the footer than you have for the header.

Then lastly, you can control the meta tags that show up on your homepage. This is just for SEO, for search engine value. The idea is you can set up the title, which is what's going to show up in the top of your address bar here. You can set up meta keywords and meta-description tags also. Those are picked up by search engines to help describe the content that's on your website. Keywords aren't really used much anymore, but those would be just some keywords separated by commas.

Then meta-description is an actually human readable description of your website. For something like that, it's a good idea to enter something in, your name, the area that you do business in, real estate, home search, stuff like that, but make sure that it is readable because the idea is if somebody runs a search on Google, for example, and your website comes up as one of the results, it's going to show the title as what they would click on to get to your site and then it'll show a description below that title. If you have this filled in, this is where it gets that description, otherwise Google will just choose from the content on the website and make the description whatever it wants.

There you have it. I'll save my changes. I'm not super optimistic that we'll be able to see the changes right away, but we'll click it. Why not? I'm not scared. Nothing. Hang on. There we go. You can see, it actually took some of the changes into account. We've got some of my color changes are in there. I loaded up an old background on the old template, but that gives you the idea. That is how you would make the changes. Normally you'll see the changes take effect just about right away. In this case, I would probably have to sit here and refresh a little while before I see the changes take effect. It's going to happen sometimes. It doesn't happen very often, but on occasion you might just have to wait a little bit for the changes to kind of fully propagate.

There you have it. I don't know whose dog that is. There you have it. As always, thanks a lot for joining me this week. Man, nothing's working today. I'm telling you, I blame the tech guy over there. Thanks a lot for joining me. If you have any questions, concerns, comments, feel free to comment on any of our videos or send an email into support@deltagroup.com or just give us a call. Thanks a lot for joining me and I will see you again next week.