Tip:
Highlight text to annotate it
X
In the previous video we've introduced some basic
concepts and created a basic site layout where we positioned
all the elements.
But what's left to do now is to format these elements
and preview, adding some finishing touches.
And then we'll publish and apply the site layout to our existing site.
Let's format our navigation now. To create the main navigation's
design, I'll first select the first-level navigation.
And here, we get two context-sensitive tabs
as we've seen before.
So I can treat my navigation as an element, giving a range of
standard settings. I could for example add a margin around
my navigation, which I'll do now.
But the other way that I can actually fine tune a navigation
and set specific behaviors, is by going into
the 'Navigation > formatting' tab.
For a start, I have a library of different customizable looks.
So I have the option to choose one that resembles what I'd like.
Now, these colors are close to what I'd actually like, but I want
a beige color for my active state, as distinguished from
my hover state, and I also want to fine tune my colors.
What I've actually done in advance, and which I'll show in detail
in the next video in this series, is that I've created my own
color scheme by choosing colors from the header image up here.
And what I can do then is to select the navigation and then create
a new navigation as a copy.
And hereby, I can now give the navigation a name, and there
are a myriad of different settings which I can adjust.
The first tab relates to my navigation as a whole.
I can change the background from the templates navy blue here
with my own navy blue for example.
Then I have tabs for the normal, hover and active states.
An example of what we can do here is adjusting the color.
I can also preview my progress under the 'preview' tab.
Tangora's navigation settings include graphical templates
which is what creates the glass embossing effects evident in some
of the pre-defined navigation options. If I activate a graphical
template, then I could adjust the effects here, and I'll see
that the hover and active states automatically take the
'same as normal' option, which of course I can overrule
according to my needs.
But when I turn the graphical template off,
notice that I also have the chance to place my own image
in the background of my navigation if I'd like to do that.
This can be used for repeating patterns, like underlines
or what have you, as well as for icons if you needed to do that.
There are also options to adjust text, and padding.
Padding under the 'navigation' tab is for my navigation as a whole.
And here too, the settings set under 'normal' will carry through
to the hover and active states.
The advanced tab gives me the ability to make some html tweaks
and to add my own custom CSS styles, where we've already written
the basic CSS structure to make it easy to adjust for those instances
where advanced settings come into play.
Then I have a tab called submenus.
Let me go ahead and give you a demonstration, where we'll
create a hover menu.
First I'll just hit 'OK' and come out of my navigation settings for
a sec. And then I'll insert a navigation within my first-level
navigation. It automatically declares itself as second level
navigation. Note here too that it is perfectly legal to repeat
navigation, and easy to set up.
Now I'll select my main navigation, and go to the navigation formatting
tab and then hit 'edit'. Under the 'submenus' page, I'll see that
I can select 'render page tree' and 'CSS-hover menu'. Now I could
make some adjustments to the width, as well as adjusting the CSS.
But otherwise, I could just save, and we'll see in our preview
how this will appear.
Just at the moment, I don't actually want to actually implement
this effect, so I'll just neutralize the submenu settings
I've just demonstrated, by simply choosing the
second-level navigation and deleting.
Let's take our second and third level navigations here
from scratch.
I'll choose 'create new > create new navigation style'
and then I'll give it a name, and specify that it's
a vertical navigation.
I'll adjust the color as I did before.
Now I also want my navigation's levels to be evident by how far
they are offset, and I could use the padding settings here
to achieve that effect
and you can see that the settings are cumulative for each navigation
that might be inset in the grouping. But I can also take
a hold of my third level navigation as a mergefield element, and add
margin and padding to the element as a whole, which can be an easy
way to achieve a similar effect.
Right now I have blended these approaches in my demonstration.
We've seen that we can adjust both margin and padding to mergefield
elements, and we can also adjust the padding of columns.
Now for example, I'll add a little padding in each column.
When I try to select a column that has an element that fills out the
space, you'll see that little icon appears, which I can click on
to choose the underlying column.
For my right column, I am happy
with the 'wide padding' choice, with the exception of
the left edge. To adjust the padding a bit, I'll need
to go into user-defined
and then as you can see, we can adjust any edge we'd like
with the starting point of 30 pixels, which is what
the 'wide padding' setting gives us.
Under the 'layout' tab, I can adjust the overall look of my site
including such things as font and font size, and also color.
There's a choice here called accent color, which is like
a shortcut to apply an accent color to a variety of different elements.
So for example I can add the dirty beige color that I created
from my header image up here, and if I wanted to overrule that
accent color in a given area, say down here in my footer
then I could just take hold of a given element, and do
the same operation. Note though here that my navigation settings
will control what corresponds to my accent colors in that context.
All right, so we're well under way. Let's continue by previewing
what this layout would look like, if it were applied to a live site.
Then we'll make a few finishing touches, before we publish.
If I hit the preview button here, then I'll get a message saying
that I haven't selected a preview page. If I say yes to the system's
offer to lead me to where I'll define one, I am brought to
the properties window, which I would otherwise find under
the Tangora button. Here, I'll need to navigate to the 'Manager' tab
and find the setting 'Page for preview'.
Then I get an interface where I can choose a page to preview from.
Once I've done this, then I can hit okay
and hit the preview button again.
Now I get a message telling me that I need to save before I create
a preview. Here I'll just say 'yes', and then we'll see that
the existing page as it would look, were I to apply the site layout
to a site.
Of course, as it's just a preview, everybody else right now sees
the site with its current site layout, the old Frezz layout
with the grass.
At this point, I might decide that I need to make some adjustments
to margin or padding. But I would like to add some borders
and I acutally want to add a little Google Analytics code.
So what I'd like to do now is that I'll add a border between my sub navigation
and my page content, as well as above my footer. To do this
I'll select one side of my column set, and then go to
'columns > formatting' and choose 'border > define border'.
To define a border, you'll need to choose a type, width and color.
I can add a border for each side of my mergefield, and if I define
my top border, I can then choose
'use same values for the fields below'
as a shortcut for setting this to the other sides.
Then I might deselect some sides, if I only wanted a border on
a few sides. To do this, just choosing 'none' for type is enough
I don't need to touch the width or color.
If I want to get a sense of how this will look, I could choose
to preview, as I just showed you.
But as you've already got a sense for, you'll really be able
to judge the success of certain change without even leaving
Visual Designer Site Designer.
But here, when I click off, we'll still see that we have some
yellow dotted lines that interfere with my judgment.
Well, we have a tab here called 'View'. Amongst my choices
are 'Show Column Borders', which I can deselect now, and then we get
a better impression of how this will look.
All right, I just need to add a border above my footer.
Now I still actually need to add a bit of space between my footer
and the rest of the content.
I need to choose if I should do this with margin or padding.
As I want the border to touch the border between the
sub navigation and page content, I'll choose to adjust the padding.
And then I'll add a border.
And we're good to go.
Just because you're using Tangora doesn't mean that you
can't integrate third party add-ons to your site
for example to add special effects like animations
or font-replacement.
Tangora has extensive built in statistics, but you might also want
to complement them with Google's free statistics
called Google Analytics.
So let's do it. I'll just go in to my 'page' tab up here
and then we can see we have a 'content in ' area
so I'll just copy the code and paste it in here, and hit okay.
And then I'm done.
So now I'm ready to publish my site layout and apply it to our
existing site in progress.
The way you publish a site layout is by hitting
the publish button up here.
If the site layout had already been applied to a site, then any changes
that I've made would take effect immediately. Otherwise
it is first when we apply our layout that it will take effect.
Let me return to the concept of a layout pool.
Upon creation of our site layout, we chose a layout slot.
If I hadn't done that, then I would need to assign a layout slot
to my layout now, in order to be able to use this layout.
The way I would do that is by navigating to the 'Layout pool'
area and simply clicking on an empty layout slot, and hitting
'Assign', and then I could choose the site layout of my choice.
By the way, if you ever need to delete a site layout, you need
to ensure that you have no pages using that site layout
(and here remember the recycle bin, by the way)
and after you've ensured there are no pages existing you'll
be enabled to delete the layout from your layout pool.
At that point you'll be able to delete your site layout from
your site layout overview.
I can then assign our site layout to the site in progress
and hit okay
and the site layout then is applied to every page in the solution
where the default hasn't been overruled manually under the
page's properties.
And here's our finished product.
So we've just built an entire
site layout from scratch and applied it to a running site
just like changing clothes, and we've also looked at ourselves
in the mirror, so to speak, with our preview function before
we stepped out and strutted our stuff.
We've covered a lot in these two videos, but there are a few more
topics that you may want to delve into to really master the topic.
I've just shown you how to create or modify a site layout using
Visual Designer. Table Designer is another tool which can create
site layouts which we haven't covered here, so in order
to make changes to a Table Designer layout
you'll need to learn that interface.
But if that were the case, why not take the opportunity to simply
recreate your Table-design layout in Visual Designer.
Now depending on your design, you may also have some specific desires
to the look of your site which require some customized
typographies, called CSS, which require a bit
of special knowledge.
So you may need to enlist a bit of help here.
You'll also want to make an informed choice on your
layout's width. If you happen to have an old layout
you're replacing, you'll want to make sure that it corresponds
with your old site layout.
When we're talking width, we're talking both in terms of your
site layout's width, as well as how much width you designate
for your pages.
We'll revisit this topic in our video on page layouts.
Here I should also mention that there is a possibility of creating
your widths in percentages, which can help you a lot in this effort.
And apropos page layouts, to really master layouts
you'll also want to familiarize yourself with page layouts
which determine your layout from page to page.
Thank you for watching.