hey I'm Ryan from Tonic Site Shop and welcome to
TONIC Orientation! You're probably here because you're new to Showit or you may be new to TONIC
and you're wondering is this right for me or even how does it all work with Showit and with TONIC
well this is going to be the perfect video for you I'm going to tell you a little bit about who
we are and then I'm also going to show you what Showit is like and how you can really build out a
website in a day and it's really that easy we've had tons
of people come to us and say I literally
launched my website in a single day and these aren't just single page websites that they're
launching in today these are full-blown you know multi-page websites and it's really that easy so
I really I want to show you that I'm excited about that here at TONIC we create website templates we
also create website add-ons and canva products but I'm going to be focusing on our website templates
today we have 17 website template designs that you can go and
look through and see which one fits
your brand or your style the most the great thing about all of them are they all come with multiple
Pages like homepages about Pages Services Pages portfolio Pages blog Pages everything you need
to get your business up and running online one of our most popular website designs is Amo sour
am sour is a really beautiful design and it's really created for any sort of creative business
if you're a fashion blogger or if you're an in influencer or maybe you're
a photographer this
website template will work for you it's got a beautiful hero section brand intro as scen in
motto or your statement your mission you can link to your services your portfolios here we've
got a testimonial section A nice call to action section again some more click action or call to
action sections throughout here a section with you know blog posts um and it just keeps going
so again this is just the homepage but you can see all the different pages that this Amo sour
temp
late comes with and so it's a really great template for most businesses another really great
template that we offer is Negron Negron is very clean and elegant and modern I really like this
template a lot and lastly Clover Club is a really great template that a lot of photographers choose
it's light it's fresh it really focuses on images so you'll kind of see that as you're scrolling
through this template your eyes are just drawn to images all the time and so I would just go through
our shop
and click view demo on all of them and take a look at which ones you like you can also
get in touch with us and our site stylist will get back to you and be able to help you select a
website template that fits your needs all right so with all that said let's jump into showit I
want to show you the basics of showit and then I'm going to show you how easy it is to update
text and images and all that good stuff when you log in to showit you're first going to land on
your homepage on this left
side you're going to see a bunch of settings and then your right side
is also going to be settings so the left and right panels are where a lot of the magic happens and
then right in the center you're going to see your design down here you're going to see show mobile
and desktop so if I click on that you're going to be able to see what your website looks like
on mobile and what your website looks like on desktop and this is a really cool feature because
with a lot of popular website buildi
ng platforms you only get to design the desktop and then they
will like automate the mobile side of your website and a lot of times it doesn't look good but I'll
give you some really cool examples of how editing your mobile side separately works in your favor
when we get to the design portion of it but for now I'm just going to show you the desktop when
you are inside of Showit you're going to see two tabs up here the site Tab and the page tab site
is going to show you you all of your pages
listed so again within the amarto sour website template
you'll see all of these pages that come with it this calendar one actually doesn't come with it
but I'll show you how I created that I basically just took the freebies page and I duplicated it
so you can duplicate any page as many times as you want and then now you can go and you can edit
this page and make it look different and it's a whole new page for you so this is basically how
I did this calendar page I just kept let's chat I ad
ded an image and then this is an embed code
box which again I will show you later on in the tutorial if we jump over to the page tab we're
going to see a list of our canvases canvases are basically just sections on our website so you can
see if I hover over this canvas called press which is listed right here uh you can see that it is
highlighted in blue and that is the entire entire canvas there are also site canvases so if I scroll
to the top here you're going to see this canvas right here
kind of has these black and gray zebra
stripes going through it and that just indicates that it is a site canvas a site canvas is a canvas
that if I update anything like if I say website menu and I go back to the homepage you can see
it's updated website menu but it's not only just updated on the homepage it's updated on the about
page as well so you can see this is a whole new page that text updated so if you have the same
exact canvas on multiple Pages it's going to update on every singl
e page so that's the power of
site canvases it makes editing your website really really fast now a lot of people may be looking at
this template and going there's a lot of pages on here I'm not going to use them all what do I do
am I just going to have random pages on our our website and the answer is no you can hide pages
and always get these Pages back whenever you want let's say you don't have a newsletter so what
we can do is we can uncheck the publish button and that is going to still
allow you to see the
page on your website it's also going to allow you to still edit the page but if you publish your
page let's go ahead and publish ours if I go to the newsletter page it's not going to show. It'll
just give us a 404 so let's click on this and do newsletter and you'll see it's a 404 even though
we have that page on our website now if I publish it again and then I hit publish and then I go back
and I refresh you'll see our newsletter page shows up so you can hide pages real
ly easily and show it
so you don't have to use them and as your business grows or or you add a new service you can always
unhide pages and really optimize your website that way now you just noticed me using the publish
button what the publish button is going to do it is going to publish the edits that we make to our
live site so you can see I have a domain connected here it's demo.tonicsiteshop.com and when I hit
publish it is going to update the entire website to the most current version s
o if I make any
edits it's going to publish those edits however sometimes you don't want to publish you want to
preview the website because you're still working on it that's where this nice preview button
comes in handy so let's go ahead and hit preview and then we can click on this URL it's going to
give you kind of like a demo URL and then you can take this you mean you can even send this to your
friends and then when you're finally ready you can go and hit publish so now that we've taken
a look
at how to really navigate through Showit I want to show you how to really style a website and how to
update your text and images and buttons when we're working with a show website there are three main
things that we are really working with and the three things are going to be text boxes shapes
and images those three things really make up what a website is let's work on text boxes first
let's say this website template is going to be for a Content creation agency called social chair
so the first thing we want to do is update the text on the hero section so let's say this says
something like finally content that just works you can see that it's dropping down to another
line all we need to do is stretch out the text box and it'll fit on one line and then to center
it perfectly what you can do is you can just drag it over and you'll see that there are some
grid lines that are really nice and easy to use or let's just put it back over here we can go to
size and position an
d we can hit Center to Canvas like that and that will Center the text box to
your canvas so you have freedom to put this text box wherever you want you can also align things
really easily as well let's update the hero text here and let's also make it all caps so let's
hit text style and you can see here we have color we can select a different font if we want
uh we can update the size also the line height letter spacing and letter case this is the one we
were looking for so we want to click
on uppercase and you'll see that it goes all caps and let's
just move this text box in a little bit because I want that plus sign to be on the second line and
then we'll go back to size and position and just Center it now you can see that our hero text here
has overlapped our paragraph so all we need to do is select the paragraph behind it and then just
move it down and then we can click and drag over all three of these text boxes and we can Center
them so you can see that Showit has really
nice guidelines so we know that we're in the center
there you can also use the Align to Canvas tools so let's just hit Center and Center horizontally
now if we want to update the image background all we need to do is doubleclick on the background
and you're going to see canvas background show up and what we can do is we can select an image or
a video or you can select none none is basically just going to be a solid color so you can have
any color that you want using a hex code but we're go
ing to do an image and we're going to update the
image to be something like that I think that looks pretty good and then if we want the text to pop a
little bit more what we can do is we can take the opacity of the image and drag it down a little
bit and you can see that the black background is coming through the image a little bit more
and it looks really good because now that white text is really popping um on top of the image so
just like that within a few seconds we've totally updated t
he hero section to really match our brand
so let's move on to the next section let's go to the brand Bio Section here now I really like the
layout of this section so I don't want to move things around but I do want you guys to see how
easy it is to move things around if you wanted to just with a few clicks I've redesigned that
section or what I prefer and what I recommend is leaving it how the original template came
and then just updating your text because it's a lot easier and this is obvi
ously a design
that Jen and Jeff have designed themselves and they have 20 years of design background
you can see here that this image is also a JF so Showit supports GIF images jpegs and
pngs we're going to update the images and the text here to say something along the
lines of hello we social chair and we're going to drop that text down just a hair so it
fits on two lines that looks great I'm going to keep that paragraph just for the sake of the
tutorial and then let's update these image
s here and then we'll do this one as well awesome and
so just like that you guys can see how easy it was to update the text and the images on this
section now let's jump over to the mobile side because I want to show you what happens when we
do edit the website on mobile and how important it is to actually edit the mobile as you go so
you can see here on our hero section we updated the image and the text and so uh we need to
to make sure that we adjust the text on the mobile side as well no
w a lot of people will
say why doesn't it just do this automatically and I'll show you a really great reason uh why
here so let's say uh we want this text two lines we're going to center it we're also going to pull
that down and pull the paragraph down and again with a few clicks we have made this section
fit perfectly and look really clean now the reason that we like to have control over mobile
as well is because sometimes you may want this specific text box to be custom size so we want
i
t to fit on two lines so let's keep bogging it down perfect now we can go up with the text box
we can drag these up and we can even make this whole section A little bit shorter and by doing
all of that you can see that we've updated the look of the mobile site but the desktop version
has not changed which is really cool jumping down to our brand bio we just have to do the same
thing let's just make the text a little bit smaller move this text box up and I'm going to
select everything all th
e text and hit align to group I want to center it so everything centers
and then I'm going to Center to canvas and that just makes everything look nice and tidy so again
I think it's been a few minutes and we've already updated two sections on our website so you can see
how easy it is to really make your own website and create a website in a day and that's what we
really want people to be able to do is not be held back by their website to actually grow
their dream we want people to be able
to use their website and grow their business and really
live out their dreams and not have the headache of why does my website look you know so bad it
doesn't match my personalized experience that I give my clients and so again something that we
want you guys to have is that online now another thing a lot of people ask us is about video so I
want to show you how you can utilize video one of the coolest things about Showit is these video
backgrounds so again we're just going to double click
until we see canvas background here media
type is going to be video and let's just delete that video and I have one uploaded already
so let's click on that and you'll see that we can hit preview and then if we refresh our new
video shows just like that now there's a few other features that I want to show you first being click
actions click actions are basically the ability to link out to other pages on your website you can
link text boxes you can link images here let me just show you here l
et's click on this image
and we want to link this image to our service page and so if I click on the image and then
click on click actions you'll see that this is set to page and then we can select which page we
want that to link to same with this text box and then this one is going to our portfolio if we go
to the very top here and we have our story this is going to be linking to our about page so you
can see a lot of the buttons are already pre-ink based on what the C this is about but le
t's say
you wanted this to go to our the contact page so let's say this says contact me and we click
on page and then contact and we want to do the same for the actual button background page and
contact I'll show you what linking to a canvas looks like this navigate button can be linked to
scroll automatically scroll you down to the brand bio so if I go to the website here right now this
doesn't do anything it's just saying navigate and indicating that you should scroll down but
what if we
want that to be an actual button that Scrolls to a specific canvas we can click
on navigate and then we can click on the type of link as canvas and then we're going to hit brand
bio now when we hit preview and we preview our website and we click on navigate you'll see that
it Scrolls us down here so you can link that navigate button to any canvas on this exact
page that you want which is really cool now the next thing I want to show you is the embed
code box basically it allows you to embe
d code from third-party uh tools that you you and your
business use like flow desk you can also connect your cenly to your website through an embed code
box and so let me show you how this actually works all right I went ahead and removed our embed
and I'm going to show you how you can do this yourself so when you're in Showit and you hover
over this toolbx here you're going to see embed code and then all we need to do is drag the embed
code box to where we want and then size it I had it li
ke that and I think that looks really good
again you can do anything you want you can move the image to the right side and the calendar to
the left side if you would like now all we need to do is copy the embed code that cenly has given
you you can double click inside the edit code box and hit paste then hit save and Showit takes care
of the rest for you this page is now totally set up for you to send out to your clients for them
to book calls with you so you can see when they log into this
page people can then click on um
a date and a time and then they can go out and fill out the information and schedule the event
all from your website rather than sending them to an external link all right last but not least one
of the most common questions we get is how does blogging work with Showit and TONIC with every
single TONIC website you get blog templates so these templates are your blog list page so this
is going to be where it's kind of like your blog homepage right people can g
o and scroll through
your blog post and then they can click on one and when they click on one that's going to take them
to the single blog post now you may be looking at this and going like what am I looking at here
this is a template of what every single blog post is going to look like so you don't actually have
to touch anything on any of these Pages these are already set up for you you can see that you have
category Pages you have two different styles of category Pages category dark and
category light
uh you have a search results page you also have a page template so if you have other pages in
your WordPress area this is the template that it's going to use and then you have a 404 page as
well this is already linked up so let me go ahead and go to our blog and show you how this works
so here is our demo blog you can see that we have live blog posts in here and we can tell that
these are actual live blog posts because if we go to our actual ual template here the images are
different so you don't actually have to go and change images on your blog page that automatically
happens when creating blog posts and when someone clicks on read post they'll be taken to the actual
blog post where the user can then go and read the content again this is the single post this doesn't
actually have to be um updated you don't have to go and add your title here or anything this is
all going to be taken care of when creating blog posts through WordPress if you decide to have
a Bl
og with your website you're going to have a WordPress installation on your website which
basically means you can go to your website.com wp-admin and it's going to open up this admin
dashboard for you to be able to create posts so let's go ahead and click on posts and you can see
that I have a bunch of posts in here um that I've created to create a post all you need to do is
click on ADD new post and let's just add a title here so this is our demo blog post title and then
we can add our cont
ent maybe we want to add an image we want to select from our media library
here and then let's go ahead and hit publish if we go back to our blog you're going to see
see automatically that our featured post is updated so demo blog post title and then as
we scroll down our first one here is demo blog post uh if we click inside of it it's going
to use that same single post template so we actually don't have to do anything for our
blog inside of Showit it all gets taken care of through WordPre
ss and it will automatically
update on our Showit website I really hope that this orientation has helped you if you guys
have any other questions please feel free to reach out to us we're more than happy to help
you select a website template if you get your website template and you're having troubles
updating something we're more than happy to walk you through how to fix that uh we love
to teach you how to do it yourself so you as a business owner have the ability to update your
website on
the Fly I think that's really important for business owners to be able to do that and not
have to rely on website design agencies to do it for them so again we're really excited for you
guys to explore TONIC and Showit happy editing
Comments