LUMINAL DOCUMENTATION

Luminal makes it possible for you to build your own website, regardless of your coding abilities. Luminal Template is extremely flexible and it's the foundation of what will become your new website. Luminal SiteBuilder is an exclusive website builder that makes it easy to build and drastically manipulate Luminal Template without having to deal with hundreds of files and thousands of lines of code. In fact, this entire documentation was created with Luminal Template and Luminal SiteBuilder.

Luminal Documentation guides you through the process of building your website. It contains important information, third party tools and resources, tips to improve your website, solutions to issues you may encounter, answers to questions you may have, video tutorials with commentary, and much more. Luminal Documentation assumes you have no prior knowledge of HTML, CSS, JavaScript, or website development/design in general.

GETTING STARTED

These are the first steps you should take after purchasing and downloading Luminal from Themeforest. The first steps will involve setting up localhost with XAMPP so you can start working with Luminal. Also adding Luminal to localhost, and adding pages and components created with Luminal SiteBuilder to Luminal Template. The process of building complex pages and components with Luminal SiteBuilder will not be covered here.

STEP 1: Setting up localhost with XAMPP

  • Luminal uses PHP; which is a programming language that is normally available in online web servers. XAMPP allows you to build your entire website from your computer because it provides many of the utilities that online websites need such as PHP. Localhost is your personal environment where you will build and test your website before publishing it to the internet.

1. The first step towards getting localhost running is to download and install the latest version of XAMPP from https://apachefriends.org. The installation itself is pretty straightforward. Download and install the version that matches your operating system and simply follow through with the installation.

XAMPP Installation Window
  • Leave checkboxes and folder directories unchanged in the setup window.

2. Open the XAMPP control panel once XAMPP has been installed by launching the XAMPP application in your computer.

XAMPP Control Panel
  • Your control panel may look different depending on the version you downloaded or operating system you're using.

3. On the XAMPP control panel, find and start Apache server by clicking the corresponding start button. An indicator should be shown when the server is running.

4. Open your web browser and type the following URL in the address bar: http://localhost/. If you see the XAMPP page; you successfully set up localhost.

Apache Friends Page
  • Your XAMPP page may look different than this one.

STEP 2: Adding Luminal to localhost

1. On the Windows version of XAMPP control panel; find and click the button labeled Explorer. If you are using Mac or Linux, the button should be labeled Open Applications Folder, under in the welcome tab. Clicking this button should take you to a folder named xamppfiles, which contains many folders within. Find the folder named htdocs and open it.

2. Assuming you already purchased and downloaded Luminal from themeforest, locate and unzip the downloaded Luminal folder which contains the Luminal SiteBuilder, Luminal Template, and Luminal Documentation. Move the unzipped Luminal folder inside the htdocs folder you opened in the previous step.

3. You should now be able to open Luminal on your web browser. Simply enter http://localhost/Luminal in the browser address bar and you should see something that looks similar to the image shown below, (assuming you didn't change the Luminal folder name). From here you can open the Luminal Template which will become your new website, and the Luminal SiteBuilder which you will use to build your website.

Index of Luminal
  • Your directory may look different than the one on the left.
  • Because you will be using htdocs and Luminal folders regularly as you build your website, It's recommend you create a shortcut to the htdocs and Luminal folders for quick and easy access. You should also create a bookmark to http://localhost/Luminal in your web browser.

STEP 3: The basis of Luminal

1. The basis of working with Luminal is you use Luminal SiteBuilder to create the pages and components of your website such as header, footer, and sidebar; and you download and save the pages and components to your website folder originally named Luminal Template.

In the Luminal directory page from the previous step, open Luminal SiteBuilder link in a new tab, and the Luminal Template link in a separate tab. Luminal Template folder contains the pages, components, and files that will become your new website.

2. Lets first build and change the header of our website. Enable header builder mode in the Luminal SiteBuilder by clicking the Header tab. When you're done creating a header; click the DOWNLOAD HEADER button. Save the header.html file in the components folder of Luminal Template contained in htdocs, this should replace the previous header.html file. Visit the Luminal Template tab in your web browser and refresh the page. The header you created in Luminal SiteBuilder should now be in the website. To change the sidebar and footer of your website, simply follow the same process and replace the corresponding file in the components folder. For example if you created and downloaded a footer, save the footer.html file in the components folder; replacing the previous footer.html file.

3. To replace the default home page of your website; click Page tab in Luminal SiteBuilder to enable page builder mode. Once you're done working on your page, click DOWNLOAD PAGE button. In the download panel, enter index as the file name and the title of your home page in the Title input field. Click DOWNLOAD PAGE button and save the page directly in the Luminal Template folder. Replace the previous index.php file since were trying to replace the default home page. Refresh Luminal Template page in your web browser and you should see the page you created as the new home page.

GETTING STARTED COMPLETE