Anatomy Of A Web Page

A basic builder web page is not any different from the pages that you are used to build. In a standard HTML page you will need to include the jQuery and Bootstrap libraries. Additionally, you may want to include FontAwesome icon library if you wish to take advantage of hundreds of free icons that accessible from the Builder interface.

Basic Page Anatomy

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>My Page</title>
        <!-- style -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link href="{{resources}}/css/my-page.css" rel="stylesheet">
    </head>
    <body>
        <!-- .appc-page -->
        <div class="appc-page">
            {{blocks}}
        </div><!-- /.appc-page -->
        
        <!-- scripts -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <script type="text/javascript" src="{{resources}}/js/my-page.js"></script>
    </body>
</html>

In the previous example I chose to include jQuery and Bootstrap from their CDN respective location. Also notice that I am including a CSS and Javascript files name my-page.css and my-page.js respectively. This assumes that you have such files in your project resources files. The example below, is the complete code generated by the builder:

Default Code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>{{wp_title}}</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        {{wp_head}}
        <!-- style -->
        <link href="{{builder_resources}}/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
        <link href="{{builder_resources}}/vendors/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link href="{{resources}}/css/{{$post.post_name}}.css{{random before='?rand='}}" rel="stylesheet">
    </head>

    <body>
        <!-- .appc-page -->
        <div class="appc-page">
            {{blocks}}
        </div><!-- /.appc-page -->
        
        <!-- scripts -->
        <script type="text/javascript" src="{{builder_resources}}/vendors/jquery/jquery-1.10.2.min.js"></script>
        {{wp_footer}}
        <script src="{{builder_resources}}/vendors/bootstrap/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="{{resources}}/js/{{$post.post_name}}.js{{random before='?rand='}}"></script>
    </body>
</html>

Super Simple

You can let the builder create all the necessary page code and include Javascript and CSS dependancies by using this code:

<!DOCTYPE html>
<html lang="en">
    <head>
        {{header}}{{/header}}
    </head>
    <body>
        <!-- .appc-page -->
        <div class="appc-page">
            {{blocks}}
        </div><!-- /.appc-page -->
        
        {{footer}}{{/footer}}
    </body>
</html>

Leave a Reply Cancel reply