Showit Web Design Shortcuts: Tricks to Designing Websites Faster

I love designing websites and ShowIt the flexibility and just how easy it is to move elements around a page.

But when I first got started on the platform, there were so many things I didn’t know that added a ton of extra time in the design process and cause me to just make a lot of mistakes along the way. So today I am going to share some tips with you to hopefully save you from making the same mistakes that I did.

Before we dive in I’m Galen from Local Creative Co. I have been a web designer for nine years at this point. I absolutely love what I do. And I love sharing what I learned with you along the way.

If you’re a fellow designer, make sure you check out the link in the description to a free workshop. I’m hosting all about the behind the scenes of my client and design process.

And if you’re new to the show at platform, I’m going to leave a link below to the extended trial so that you can try it out for yourself and see if it’s going to be a good fit for you.

All right. Let’s head over to my laptop so I can share my screen with you. And you can see some of my favorite tips and tricks to save you a ton of time in your show at web design process.

This is a look behind the scenes at one of my ShowIt templates. Before we go into too much depth, I want to remind you that this is not a ShowIt tutorial. And if you’d like a specific tutorial video about how to get started with ShowIt. I can do that in another video. This one is specifically going to be about tips to help speed up your web design workflow in ShowIt.

If you’re already familiar with the ShowIt platform, you know, that the desktop view is designed completely separately from the mobile view, which adds a lot of flexibility, but it also adds one more step in the design process.

And I want to help make this easier for you.

I’m going to delete this button as part of the example and create a new one. Let’s start by adding a rectangle shape. And I’m going to make my button look like this. And then I’m going to add text over the button, just like this. And because this is a dark background, let’s make this text light. And maybe I want to center the text and I want to make this uppercase add a little letter spacing here to space it out and let’s call this click here.

There we go. Now I have a button and I like the look of this on the desktop view. And a lot of people design the entire desktop view before jumping back to the mobile view and realizing they have made a mess of things.

I highly recommend you keep the mobile view visible as you’re designing, or you at least check in on it once in awhile, because you really want to pay attention to that mobile view as your designing the desktop, you and I’ll share why in just a second.

What a lot of people tend to do is they get their button looking the way they want to, and then they decide that they want to use this button multiple times throughout a page. So say I have a call to action at the bottom of this section. Maybe I want to add another call to action with this section here.

And then maybe I want to do one further down the page.

So for this example, I’m just going to. Select this button here. I’m going to copy the button, click down to this canvas here and I will paste the button and I’m just using the shortcuts control C and control V or on a Mac command C and command V to copy and paste this element around the page.

And you can see now I have matching buttons on this top section and then another matching button on. Canvas here. And this is looking really nice. And I love that. I know that these buttons are going to be the exact same size and look the same everywhere on the page.

But what do I have now done is if you go over to the mobile view, you can see that my button looks really terrible on the mobile view of this top section.

And then it looks equally terrible on the mobile view of this second canvas here. This is not what we want to have happen.

What I highly recommend you do before you start copying and pasting different elements around your canvases, around different pages. You want to make sure that any elements that you’re going to be duplicating throughout your site, that you have designed them on desktop and on mobile before you duplicate that item, I’m going to hit undo here.

Before I copy and paste this button and I am going to fix the design of this on mobile.

Let’s see here. This is let’s check the width and the height of the element. It is 264 pixels wide by 65 high. Let’s make this the same width. I might actually make it a little smaller on mobile. There it is. I’m going to move this down.

Stretch it out a little bit. I’m going to use my align features over here to get that looking just how I want to then I need this click here, text. There it is. I’m going to move this down as well. And to get this style. To match exactly what I have here. I am actually going to hit control C or command C when I have the desktop version clicked.

I’m going to come over here to the mobile version and I am going to hit command shift v. Which copies the style settings from one element to another. So command V pastes the element, but command shift V paste the style settings from one element to another element. So now you can see that this now has the white background and matches perfectly.

This is a really helpful tool. If you are trying to make a bunch of elements, look the same, or have the same properties. So now. This on the top section looks good. This on this section here, it looks good. I can copy this command C this time I’m not doing a special paste. I am just doing a regular paste command V.

And you can see. That here now it has the same SA style settings. As the desktop version. I can still move this around. I still have to move it to the proper spot. Right. And make sure if I really wanted to be good here, I would select all of these and just make sure they are properly aligned. And then over here on the mobile view, uh, to select multiple items, I am going to click the first item, hold down, command, click the second item, drag it down to where I want to go. And then on mobile, I’m going to make sure it is centered by using this align to canvas centered option. And I’m going to give this just a little bit more space here. Um, so the nice thing again that I did here was I made sure that this particular button, that the way.

Looks on desktop and the way it looks on mobile are good. It has all the settings that I want before I start duplicating it around my site, because otherwise I’m just going to create a ton more work for myself. Another thing that you might want to do before you start duplicating elements, and I probably should have done that here to.

Is look at the hover, um, the hover animations for a particular element before I duplicate it. So for this, for example, maybe I want the opacity, um, to come down and I can say on hover, maybe I want this to be 80%. Um, and then I maybe want the same for this here to hover custom. And I. Set this for, um, 80% as well.

You could set this for the page, like as a page default, but see, now this one, this element here has a custom custom hover. This element has a custom hover, but this button down here has no hover. And that is because I set these two are not connected. Right. I set the hover, uh, anime. After I had already pasted it to this section.

So it’s really important to save yourself a ton of time to make sure that you have your buttons or whatever element it is that you’re duplicating across your site, that you have that designed on desktop and on mobile, and that you have all the hover elements or any other animations set before you start copying and pasting so that you don’t have to go back and re add all those animations.

But in this case, because I have the animation here, but I don’t have it on this button here. I am going to click to this text here. Oops. Didn’t mean to move that control Z to undo. I’m going to click to this text here. I am going to command C or control C. If you’re on a PC, I’m going to command C click this.

I’m going to come down here and I’m going to hit command shift V that’s that special paste. And that is going to paste that hover over. On to this element here, would it have been faster if I had just done this before? If I had just added the hover element before I copied and pasted? Yes, but this is a quick way to fix it.

So again, for this, I’m going to hit command C. I’m going to come down and hit the button background, command shift V. And you’re going to see that hover element is copied from this one here to this button down here.

The next quick tip I have for you is all about moving elements around a page while keeping it aligned. So what I’m going to do here is I’m actually going to make two buttons. So this button is already here and I want to actually put a button either below that or next to it. Let’s actually do a button next to it.

I’m going to hit control C and because I actually want to paste the element again, I’m going to hit control V. Which is going to make a, another version of this button. And if I come into the page elements here, you can see that there are now two, uh, two versions of this button and say, I want it to drag it and have it like aligned perfectly.

I can just drag it next to it and make sure it’s aligned. Right. That’s one way to do. It might be off by a couple of pixels. And I could check that by going to size and position and seeing that this one is 5 81 by, uh, or it’s. Um, the X value is 5 81 and the Y value is 4 56. Let’s check this one. Oh, it looks like I actually did a pretty good job getting it exactly right.

But here’s another way to do that. I’m going to click this and before I start dragging the other. I’m going to hold down shift and then start dragging the button. And what this does is it makes it so that it can only go on the same plane. I can also do this for vertical movement. So say I wanted to move this up and down.

I hold shift and then I start moving it. And I can’t drag side to side at all. I’m only able to move it on the same plane. So this is really helpful for aligning elements. Exactly. Again, I’m going to click ship. Drag it over and I can do the same on the mobile design here. I’m going to highlight this button.

I’m going to click over to mobile here and drag this section down a little bit. And what I’m going to do is I’m going to click this button on desktop to make sure that I’m selecting the right button. And then over here, I’m going to hold. And click and drag down. And that way I know that it’s exactly centered.

I could also just drag it down and then align it to the center of the canvas.

But I really love this shift, click and drag trick to making sure that everything stays nice, neat, and aligned.

The next thing I want to talk about is aligning elements on a page from one canvas to the next, or even just in the same canvas. So here I have a layout with a photo on the left and text on the right, and then down here, we have texts on the left and a photo on the right. And when I look at this and I think about best practices for web design, I want to make sure there’s some symmetry to the design and that things are aligned properly.

So I want this. To be as far from the left side of the screen, as this image is from the right side of the screen, just to create that equilibrium and that balance on the page. So, what I can do is I can click this first image here, go to size and position. And I can see that this image, the, uh, on the X plane, it is 168 pixels from the left side of the page.

And just to make that a little bit simpler, let’s make that 160, and then let’s change the width of this. Right now it’s 338 pixels. Let’s change it to three 50 pixel. And 500. That looks pretty good. So now it’s 160 pixels from the side here. It’s with this 350 and its height is five hundreds. Let’s come down to this image here and make sure this is the same.

So 350, and let’s make sure this is 500. There we go. Now, both images are exactly the same size and then the other thing I want to do. Is, I want to make sure that this, this space here is equivalent to this space here. And you can see this one here is looking a little bigger than this space on the right here.

And for those of you that hate math, I apologize. This does require a little bit of math, but I think it is really helpful to just making sure that your site has that symmetry. So you’re not just winging it. So for this one, again, 160, 160 to be exact pixels here. And for this one down here. It’s 1200 pixels across, but if I were to put it at 160, it would obviously be on the left side of the screen.

So what I’m going to do. Knowing that this is 1200 pixels across. I’m going to do just a little bit of math here. I’m going to do 1200 minus. I’m going to do 1200 minus 350, because that is the width of the image. And then I’m going to do minus another 160, because that’s how many pixels I want it from the side.

So now we’re working backwards. This is 1200. We’re going back 160 and then back another three 50 to try to figure out what the distance is between the left edge of the screen. And the beginning of the image. And the answer is 690. So I’m going to click on this image now. And my X. Which right now is set to 730.

It should be 690. There we go. And now I can see that this space here looks much more, even to this space on the left here. This is a really simple way to make sure that your site has some symmetry and that it’s really smooth from start to finish.

I would also probably do the same thing from the text here. Make sure that these text blocks are all the same width and that these ones here are also the same with obviously the buttons match because I copied and pasted them from one section to the other. But I really like things to seem consistent throughout the site.

Now let’s talk about canvas views. Canvas views can be used for a number of different things on ShowIt, but they’re great for displaying testimonials or different tabs of contents that you can click through from one to the next.

When you’re creating a canvas that has multiple views, it’s really important to make sure that you fully design the view each view on mobile and on desktop before duplicating your view and creating the next one.

That’s because the problem that we experienced with the buttons earlier can happen here as well. For example, let’s say I want to change this style a little bit. Maybe I want to change the button color. For example, we could change this to be that red color.

There we go. I changed this and I’m like, okay, this is starting to look good. Maybe I want to drag the photo over more. We could really play around with this and do it however we want. Right. And then I’m like, okay, this looks great. But if I now go to the next view, you can see that next view still has the old style.

And yes, I could go through and I could say, okay, what is the width of this image? It’s 7, 10. I could come here and adjust this to also be 7 10, and then I could move it over and figure out what the X value is for this to make sure the two match.

There’s a lot of work that goes into manually making sure that each view looks like the previous view and the easiest way to do that is to just start with a fully designed view and then duplicate that one so that the others automatically match.

The first time I did this, I created my views. I made them all agree on desks. And then I realized that none of my views were designed for mobile and I had to go back and customize each and every one, I actually ended up just deleting my views and duplicating the original one. Once I had finished the design and then re adding back in my content, which was just unnecessary.

If I had followed these best practices to begin with,

the next tip I have for you is updating your text properties. You’re going to find yourself copying and pasting elements around your site as we discussed earlier, because you want your site to have that cohesive feel. So a canvas from your homepage could be used again on your about page, for example, but if you are not updating your text properties, as you go from one page to the next, you’re going to find that at the end of your site, when you’re done with the design.

That you have to go back through and update, and double-check every single text property because you’ve copied and paste them all over your site and you didn’t update them to begin with.

So, for example, this heading here, I’m going to click into text properties. I’m going to make sure that this is set as a heading too, for this one here.

I’m going to make sure it’s set as a heading three. And for this paragraph, I want to make sure this has a P tag then for any buttons on your site, you want to make sure they have a P or even better. A div element assigned to them, uh, because there’s not really any valuable content in the button itself, but this is really good, best practice to do.

When you’re first adding text to your website, in case you do decide to copy and use that element again somewhere else on your site. So you don’t have to update and double-check them every single time.

Speaking of reusing elements across your site, I wanted to bring up site canvases and mentioned that while site canvases are most frequently used in navigation or footer elements on your site, you can use them for any element on your site that might be repeated exactly as it is on multiple pages.

So for example, in this section here where I am highlighting some publications for this fictional brand, I might make this a site canvas because I might want to use it in a few different places across my site. And this will save you a ton of time in case you ever want to make updates and add more publications in the future.

Maybe it’s on your, about page, your contact page or your homepage or something like that. Instead of having to just copy this canvas onto multiple pages and updating them all every time you want to make a change, make it a site canvas. So you only update it once and it updates across your entire site.

Thanks so much for watching. I really hope you enjoyed this, ShowIt tutorial. And if you have other questions about how ShowIt works or how to create your own ShowIt website, let me know in the comments below. So I can use you as inspiration for my next video.

As always make sure to subscribe and I’ll see you next time.