Your First xEpan Website in no time

Code: DOC002

Your First xEpan Website in no time

Pre - Requisite

Before developing your first xEpan website you need to download and install it first (obviously). Installing require that you create a database first as xEpan installer will not create a database for you. For Linux based systems  your project_root folder must be provided write permission. For more on download and install click here


Step 1: Log-in to your admin panel

This is first step after your installation. Assuming your project is installed in project_root point your web browser to http://localhost/project_root/admin
You will be asked to enter your credentials. Put the one you entered at the time of installation.

Step 2: The Dashboard

Your login drops you to xEpan Dashboard which is also configurable but currently we are not explaining its parts. (It's just Getting Started).

Step 3: Creating Pages

It is not required to have all the pages created first. You can create your pages as and when required also. But for a good start we are creating a few Pages first.

Pages in our website:
Home (Default page, You don't have to create this. xEpan already have a home page always)
About Us ( A general Information About Your Company) [url: 'about-us', Menu:'About Us']
Contact Us (Google Map with a contact Us Form). [url: 'contact-us', Menu: 'Contact Us']

Click Menu  Website >> Epan Pages
Initial View
This view shows your current xEpan Pages. Pages without 'Menu' field are special pages that will not be visible in menus.
Add Page View
Adding a new Page is easy. Its various fields are explained below.
Add EpanPage Form Field Explained
Pages Created
Once Created you have full control on your pages.
You should be on Initial View.  Here you have default home page. Hit Add EpanPage button and fill the values. Various fields are explained here.


Step 4: Designing your Website

Designing xEpan website is fun. So for this getting started guide we are creating a three page website. So far, we have created three pages. But since all pages will be having same Header and Footer (It is not required for all the websites, but we are assuming for this guide) So instead of design header and footer on every page is not a good idea. Further it will not be manageable as well. To just change something, you will be needing to update all pages.

Here comes Template.

Step 5: Design Template First.

Templates are nothing special than pages. Just they have special place where pages will land. Since we need a single template and xEpan gives it by default we need to design it only.

hit Website >> xEpan Templates menu
You will see a page similar to xEpan Pages but will less fields. You must be seeing a template named 'default'.

Hit Edit Template button.


Step 6: Understand 'edit mode'

Editing a Template or Page is same. You just drag and drop components on page and manage their options. To understand better about designing you can watch videos on youtube by searching xEpan CMS. There are a plenty of.

When you hit Edit Template your browser will navigate you to edit mode. 'edit mode' is where you will design pages. Lets understand 'edit mode' first.

Step 7: Design the Header

First Thing we need is a decent header with a Logo and a Menu Bar. The {{Content}} portion on template is where your page will land. But don't bother about its position now, We will move it later on. So our layout of header is simple.

IMPORTANT: PUT EASY DROP ON FIRST ( No 7 on above figure) AND Show Border (No 6 on above figure)


Step 7.1 : Header Row and Two Columns in This Row

HEADER ROW: Now drag Row Element from toolbar to your page below {{Content}}. YES SURE BELOW IT. Row must not get dropped in Web Page.
COLUMNS IN HEADER ROW: Now Drop two Column Elements on Row
Its time to adjust columns size. First column will contain Logo and Another one will contain our Menu Bar. So Double Click each column and set their size 3 and 9 respectively. Remember xEpan works on 12 Column Grid System so full Length always denotes 12 Column span.
Set Your Logo: Drop Image in First Column, and double click it for options. In Options click select to select your logo. A File browser will open. Right Click and press Upload. Now upload your logo file and select it.
Set Menus: Now in next column we need Menus. From Toolbar select Menus and there must be a single menu for now Bootstrap Menus. Drop it to next column. Double Click it and in its options, click Get Pages.
Click at Title and Remove it, as we do not need any Title Text Here, But if you wish you can change the text.

Step 8: Move Page Content below Header Row (Learn Shortcuts)

Since this guide tends to cover as many aspects as it can in this page we kept this section separate. This section will guide you to use keyboard shortcuts in xEpan. Using shortcut can increase your layout and arrangement process a lot.

1. Double Click on Logo Image: This will select image on page and you can see its path in breadcrumb.

With Keyboard: Breadcrumb is a path of your current selected component at the bottom left position of your edit mode.
When Image is the Last node in breadcrumb press CTRL+SHIFT+UP-ARROW-KEY this shortcut selects parent node, Your breadcrumb must be showing Row >> Column now. Do it again Row must get selected. Now To move this row between sibling press CTRL+SHIFT+ this will move current selected before its previous sibling.

Press F1 for help any time in edit mode to know more shortcuts.

Without Shortcuts: Just bring your mouse over {{Content}} and there will be two handlers visible. From Moving handler move the Content Component below Row but in WebPage.


Step 9: Save the work done till now

Press CTRL+S or click save button on toolbar. Don't worry if you left Easy Drop and Show Border check-boxes on. xEpan will handle it. Your final page till now should be like this.

Step 10: Editing Home Page

This Guide is not taking every aspect or designing ways into account rather it is guiding you for your FIRST web site in xEpan. So now we move on to design our page. Just click home button.. And yes! if you want to move your menus position just .. Drag them.

When on home page we will design our page by looking a bit more functionality in xEpan. On Page you cannot edit anything made in Template. To edit any content on template while on page you save your page first and click Edit Template button.


Step 10.1: Adding a Slide Show

Our Home Page must have a slide show. Jo Just Drag and Drop Bootstrap Carousel from Slide Shows ON WEBPAGE. Currently we are not taking any other slide show as they are server side. Its easy but for your First website choose Bootstrap Carousel. Double Click It and Add A Few Slides.

Press CTRL + S


Step 10.2: Using Options to apply bootstrap classes

Now its time to learn how to implement some css options and to use a few bootstrap classes.

Make a Layout as Follows and drop a few components below Slide Show

Row >> 3 columns
1st  Column >> Title, Image and Text
2st  Column >> Title, Image and Text
3st  Column >> Title, Image and Text

Page should be looking something like this
Date: 2014-11-05
Place Your Discus Code...in Configuration