Screencast Guides: Introduction 1/3

Creating Your First Webiva site

Transcript

Hi this is Pascal from cykod. This is the first in a series of 3 screen casts showing you a couple of the capabilities of the Webiva system.

This first tutorial we’re going to start with a blank demo site drop in a design template, add in a couple pages and put some text on a page.

Subsequent screencasts will show you how to add in a blog and add a contact form for your site.

If you’d like to follow along you can download the resources necessary for this site below. Go to ttp://demo.webiva.net and request a blank site template.

All you have to do is put in your email select the blank site template and click request. Give it a couple of minutes and I’ll send you a log in that you can play around in for 20 minutes.

So here we are in the dashboard. I just logged into a blank system. This is basically configurable in a number of different ways. Add widgets to your site depending on what you want to see; here by default we have unique page views, a link to Webiva news, and any updated site content.

So lets click on website to go to site structure.you can see that all we have is just a blank site with just a home page. if we go to that home page you can see.. nothing there.

So if we click on ‘edit page’ we can jump into the Webiva page editor. In this case we don’t have any sort of template we just have a blank site so what I want to do is type in “Welcome to our website” click ‘Save Changes’ and if we reload the homepage you’ll see “Welcome to our website”

Now this isn’t all that useful so lets jump in and add in a design template into the system. So click on options, design templates, add a blank template call it ‘Main Template’ hit create.

You’ll see that there’s a couple different pieces where we can drop a template in. we have a template HTML design style and structure styles. The template HTML is where you put the main wrapper for the site so lets cut and paste from the template, which I’ve already got set up here.

We can just paste that right in. Its just some basic HTML along with a couple special cms zone tags. Next we need to drop in the design styles and the structural styles. Design styles are for ya know any styles we want to appear in a WYSIWYG editor and structural styles are the styles that make up the structure of our site, you know, our header our main divs, that sort of thing.

So I’ve got those already broken out as well. Lets cut and paste into here, lets drop it into the structural styles and back to the design styles. You’ll see if you click back it’ll add all those styles into the little sidebar and we can see more or less what stuff looks like.

Alright. Save Changes. You’ll see what it did is add in our zones that we defined in our template HTML. Lets rearrange those so they kind of match the labels above.

Here we’ve got our main zone, our main menu and our primary sidebar. These don’t necessarily need to line up but the advantage of making them line up is that if you have multiple different templates on a site all the content will show up in the right place.

Next we’re going to click on select folder cause we need to define images that are available on the site. So pop up the file manager, lets click create folder, call it template and lets go in there and upload the necessary files. Now all these files are in a zip but if you click ‘Extract Archive Files’ and click upload all those files will get extracted into this folder so we can use them as necessary.

Now this is gonna take a second because it’s gonna unzip the archive and its going to create thumbnails for all the files that we uploaded. Alright, so lets click back on the folder, click select and we have our folder selected.

Alright, so if you click save changes and jump back to our website we can now add that design template in. We do this by adding in a page modifier, selecting ‘Main Template’, click submit and now that template that we just added is on the system.

We’ll go back and reload the page. Its still gonna say “Welcome to our website” but it will say that nicely wrapped inside our site structure.

The next thing we wanna do is add in a framework. What a framework does is add in multiple pages onto a site. So we’ll do the same thing, we’ll drag in the framework to add it, then I use the right arrow keys so it shows up after the template and now we can click edit framework to add our framework into the site.

What a framework is; it allows you to add content thats going to appear in multiple places on a site. In this case we’re going to add the main menu. So we click here to say ‘Add Automatic Menu’, we want to add it to the menu zone, and we’ll use the root page as our home page because we’re going to add our other pages underneath that.

So now the next thing you need to do is add in a style. I’ve already created a new style for this, pull out of this file , so paste that in.

One of the nice capabilities of webiva is to be able to customize each of the paragraphs separately. So in this case we’ve overwritten the default feature and added in some wrapper tags for this menu. So lets hit update paragraph, close feature, and jump back to the editor. You can’t really see anything yet because we don’t have any pages in our site, but we’ll see those in a second.

Alright so the next thing you wanna do is add in one custom framework paragraph which is a ‘zone lock’. What that’ll do is make sure that that zone is not available on any of the other pages on the site, because we really don’t want anyone adding anything to the menu zone once we’ve set our menu up.

Click save changes, jump back to our website structure, now lets add those pages in. So lets add in a ‘About us’ page. Now the site feature that I just defined uses images for the page icons so I’m gonna go in and add in an image for each of these pages that I add in. You’ll see each page as multiple different image slots so you can define rollovers, disabled pages, selected pages, pretty much whatever you need it to do.

Many paragraphs are not by definition have to use images, in this case that’s what the designer wanted so thats what we ended up with.

So now that we’ve added our pages in click edit page, jump back in the page editor. Because our automatic menu is unlocked you’ll see that our menu has shown up exactly as we wanted.

So now because we set up our design styles correctly, we can add in our text. And it’ll show up exactly the way we want it in our paragraph. So lets edit header ‘About us’ lets drop in an image to the site. This pine cone image on eh left and hit select. Now we want to drop some text onto the site.

You’ll see this paragraph is showing up; it’s cutting off the image a little bit. Thatsjust cause that image is floated, paste in some text and you’ll see that it wraps nicely around the image. Click save changes. Jump back to our website, click about it and now have a nice style on the page.

If we want to jump back to the editor we can use this little flip tab on the side, click edit page, that will take us right back into the editor where we need to be.

Alright that pretty much does it for this tutorial. Lets jump back to the dashboard real quick you can see that the pages we added show up in updated site content. Makes it easy to know whats going on with your site when you have multiple people making edits.

Alright well that does it for part 1. Part 2 should be coming soon to show you how to add a blog into your site. Part 3 will show you how to add a custom contact form via the custom content system.

I hope you enjoyed this quick overview of Webiva, check out the docs on http://www.Webiva.net for more details and a sample site tutorial.

If you want to play around with Webiva for more than the 20 minutes the tutorial allows you feel free to download Webiva off of github. Check out http://www.webiva.net/docs/user for how to install it for whatever system you’re using.

This is Pascal and I hope you enjoyed it.