The Basic Tools of Showit

A quick tutorial overview of the basic tools of the Showit website builder.

If you’re just getting familiar with the Showit platform, this video is the perfect place to start. In it, Krista walks you through the basic tools of Showit’s website builder. You’ll become familiar with things like…

• Showit’s website builder
• The most important design tools
• Changing fonts, headings, subheadings easily
• How to embed code for other software
• Embedding videos
• And more…

We also add notes under the video in case of any small updates. Let us know in the comments if you have any questions, or if we need to make an update to the video.
You can also find a video transcript underneath the video and subtitles are available.

Video Transcript:
Krista here from daveyandkrista.com where we help creative business owners build brands that book. So in this video we’re going to walk you through some of the tools you’ll need to become familiar with in Showit as you work on your website. And this isn’t a comprehensive overview of all the tools you’re gonna use, but it should be enough to get you started. So once you’re in your Showit account and you have either added a template that you purchased or you chose a free template to begin with. You’re going to see a few different things: You’re going to see the mobile version of your website. You’re going to see the desktop version. You’re going to see over on the right options to style individual elements, and we’ll talk through those more in a minute. And on the on the left you might either see an actual page and all of the different elements within that page, or you might see this site tab open, and here you’ll see the different sections of the site.
All right, so the site is broken up into a few different sections. First you’ll see pages, and these are the actual pages of your website, like the Homepage, the About page, any Details pages or Contact page. Next, you’ll see Blog Templates and these are not actual pages where you add blog content except for like sidebars, add headers and footers. These blog templates just exist to communicate to WordPress the styles that you want blog posts to show. And so you wouldn’t go in here to actually add blog posts when you launch your website—you’ll get a log in to WordPress from Showit. These are where you would just go in and say, I want my title to have this tan, scripty font and I want my images to be this size. So that’s what you’re going to use those blog templates for. And then lastly, you’ll see Site Canvases and Site Canvases are canvasses that when you edit them on one page, they appear any other place that they are on your website, they’ll be updated as well.
So this is great for headers and footers and the mobile navigation. I think I have this welcome header because it’s used on all of the blog templates as a Site Canvas, so that’s what Site Canvases are used for and you can tell it’s a Site Canvas because when you’re on an actual page and you’ll see these diagonal lines and you won’t be able to edit it the way that you would a regular canvas. You’ll actually have to click into it and make your edits there. This is really, really helpful to make sure that your navigation is always linking to the right places, especially if you update names or URLs or any of those sorts of things. Any page can be duplicated and renamed and used as a different page, so if you like the format of the About page and you want to use it as a different page, you can duplicate that and you can also just copy individual canvases and elements and paste them onto other pages.
You can set any page to be your Homepage, which is great. If you have a “Coming Soon” page and you don’t want your Homepage to be live right away—you want the “Coming Soon” page to be the first thing seen—I would set that to be your homepage and you can also import both canvases and templates, am pages from other templates that you have or add just completely blank pages. So the design settings tab is a great way to style a bunch of things all at once. You can come in and change your colors. And so like if we didn’t like this tan color and we wanted that to be a blue, we could click on it and either put in our hex code that we already have or we could pick the perfect shade of blue and hit okay. And then you’ll see that this heading changed.
But then if we hit save anywhere that was tan is now going to be blue. And so this won’t change all of the instances of tan; it’s only going to change instances that if you click on it, you’ll see it was using the color number three. Any place that had that color number three is going to be changed. But it’s a great way to change a bunch of elements all at once without having to go into each page and click on elements individually. I’m going to hit Command-Z to go back because they want to keep that tan for now. You can also style a bunch of your text styles all at once. And so in this type styles area, you can change all of your Titles, your Headings or Subheadings, your Paragraph, all in one swoop. Actually, I take that back—it may not change every single element. I’ll show you where it might not change things, but if you want your paragraphs or your headings to look a certain way or use a certain font, this is a great place to begin because it’s going to change the most titles and fonts and elements all in the same spot.
You can also change them on mobile and so over in the font pallet, we can choose different Google fonts to work with. And so to do that, you would click on the font and then choose the style you want. If it had multiple styles and then you would hit add Google font and now when you’re actually in your site designing, you can use this able normal if you want, you can also delete fonts. If people come to me and they say they want to completely change all of the fonts in a website, I recommend deleting all of the fonts that were loaded to start with, and then adding in your own because Showit’s going to recognize your new fonts that you added and so that’s a great way to start overwriting the fonts without having to click on every single element and making them the new font.
You can also use Font Squirrel to generate a web font and then upload that here. And so if you’re not sure how to do that, head over to the Showit Help Center because they have more details about creating custom fonts or creating web friendly fonts and uploading them to your site. All right, so now we’re going to head into an actual page and a canvas and start talking through some of the elements. For the sake of keeping my screen as big as possible for you guys to see what I’m talking about, I’m going to hide the mobile view, but if your screen is large enough, I recommend leaving the mobile view on so that when you’re designing your Desktop you don’t forget about Mobile. It’s just good to do them both at the same time because not every element is going to be updated when you design on both mobile and desktop.
And I’ve seen a lot of people—and I’ve even done this myself at first—I designed the whole desktop version and then I went to look at the mobile version and all the elements are stacked on top of each other and it was really overwhelming to try to figure out what was, what and make it look decent on mobile. So if you have the ability to keep this mobile view open and then work on them at the same time. So there are three little tools down here for adding different elements to your page. The first one is the text, and so this is where you add the titles that we just looked at and styled in the font pallet or the headings or if you want to add paragraphs. All of that is done down here and then we can make the boxes bigger. We can move them.
So this heading is centered, but if we wanted it to be aligned to the left, we get come over to the styling, the text style palette and and left align it. We could change the font size just right here and make it smaller, just in this one instance. You can choose different colors or pick a custom color and you can add headers as well as add different colored links within text. So it’s probably easier to see that here. So if you wanted to come into this paragraph and make a certain section of the text a link, I could highlight the texts that I want to be link and then click on this link icon and then set it to be a page link or a canvas link or set it to go to the URL or the top of the page. I’m going to hit Save.
And so you’ll see that it’s underlined. But if you wanted it to be a color when it was a link, we could set that right here and then you can change it to be a different hover color as well, and get rid of the underlining. And this next tool right here, you have the option to add different elements to your site. So this is where we can add a rectangle shape. And so you would just click on rectangle and then you can change the size of the shape. You can come up here and set the style. So if you wanted it to be a really light tan and you wanted to have a bright tan border, you could add all of that here. I want to show you that it does not get styled in mobile. So if you’re, this is one of those areas where if you’re styling a shape in the desktop view, you want to style it in the mobile view at the same time.
Another element that we can add to our canvas is an icon. Showit has built in icons for social media and just like basic navigation items like arrows and shopping carts, check marks—there are all sorts of things built into Showit so that you don’t have to buy or create your own graphics. If you come up to icon settings, you can change the color on both desktop and mobile. There’s a way that you can add custom icons. If you click this little help icon, it’ll walk you through how to create custom icons. And then you can size icons down or add click actions if you want them to link somewhere as well as add hovers in this section down here. We also have the option to add or embed different elements. With this embed tool, we can embed mailing lists, forms, or contact forms from other softwares.
We can embed Instagram feeds. So in another video we’ll show you how to do that. Anything that you can embed on a website should work here, and if you’re having trouble with your actual code that you’re embedding, try reaching out to Showit individually because different softwares might conflict with Showit in different ways. So if something isn’t working or looking right, reach out to Showit to see if they can help. We can also embed videos directly from YouTube and Vimeo. So if we click on the embed video tool, and then we come up to video, you can click on Vimeo and then put in the actual Vimeo Id—not the whole URL. And then the same with YouTube—you’d put in the YouTube Id and then you have options to play or hide controls or change where the video starts or ends.
You can resize it. There are lots of different options in here that make embedding a video really easy. And then the last thing that you can add is a gallery. And so you would use this gallery if you want to add multiple images all at once, so like a slide show or a gallery of your latest work. And within the gallery itself there are different options to style it. So you can choose between a simple gallery that would just be one image at a time that you clicked through, or the tiled gallery looks like a pinterest gallery, or the sliding gallery where all of the images line up next to each other on the screen. And then to add your images, you would click on this tab right here and hit manage image. And you can either drag in a bunch all at once or you can select a few and click this little arrow to add them here.
And then hit save. And they’ll all appear in your gallery right here, and so we can only see this one I’m in right now and you can’t click through it, but if I change it to the tiled gallery, you’ll see that they’re all right next to each other. And then you can come in and change the padding. You can change the background color if you want, like a full screen option. They can all have borders. It looks like they can have circle borders. So there are lots of different options to style your galleries and really make them feel cohesive with your brand. I’m gonna Command-Z, though, because those circle galleries are going to drive me crazy. The last tool is the option to add a single image or a couple images at once. So you would use this to add images like the ones down here where it’s just one image.
And to do that you would click on Media Library and then you can either drag in your own image to upload it or you can select an image and then hit add to page. And so here’s our lovely Makayla Jade. When your clicked on an image, you’ll see a few different styling options so you can add a SEO descriptions and we’ll talk more about SEO—how to optimize your Showit site— in a different video, but you can change how it’s filled or contained. If you size it down, you’ll see now that it always stays the same aspect ratio. But we could set it to stretch, we could set it to—I’m going to go back to fill. Because in fill you can see that you can change how it’s positioned within a frame. So if we wanted a tall, really tall, skinny image, but we wanted to see more of Makayla, we could change how it’s centered.
Okay, so I cleaned things up and I’m going to show you a few more elements before we wrap up. When you click on any individual element on the page, you have some options to change the positioning. So you can center things to the canvas both vertically and horizontally. You can set things to expand the full width of the canvas. You probably wouldn’t want to do that for a text, but if you want an image to span the full width of the website, this is a great way to do that. You can set images, you can set images or texts to be locked to the side of the canvas or to stretch and locked to the side of the canvas. And so within your actual website, you might just want to test out how those look, because different elements are going to look different.
So it’s kind of hard to show you right now. You can set different click actions for any images or text or boxes. So click actions would be links. So if we come in, we can set different elements to link to different pages and different sections of pages. We can set them to link to URLs or send an email. There are lots of different options built in. Within this transitions palette you can set things to slide-in or fade-in or bounce-in. I honestly don’t use that very often. There’s the option to give different elements hovers, and different elements are going to have different hover options depending on what kind of element it is. So text will give you the option of changing the colors, whereas with image you only can make it more transparent. And then the last pallete is the effects pallete. And so here you can add opacity.
So if we wanted this to be very light image, you could do that and you can add rounded corners or make it a circle automatically. So this is a great way to keep something in a circle shape without having to size it in Photoshop ahead of time. All right, so that’s it for the basic tools of Showit. So if you liked this video, make sure you subscribe to our YouTube channel, and if you have any questions about this video, let us know in the comments. You can also request a tutorial by using the form on our website over at daveyandkrista.com/showit.