Funnels & Pages Module

Funnel & Page Structure

When a funnel is created all individual pages of that funnel get created using a “layout”. The layout is wrapper to page. The essential html components for the head & footer are within this section. This includes html ,meta tags, css, js & additional resources that are needed for proper function of our software.

*DO NOT REMOVE THESE*

In the layout you will see special functions to the following areas that are controlled within each individual page. Those areas are HEAD, CONTENT & FOOT. These elements will render in this are when placed at the page level.

You can add your own css and js scripts as long as they don't conflict with our libraries. We utilize Bootstrap 4 for css and js libraries that control the base styling & functions of our software.

When adding your custom styles & classes you can leverage the BS4 classes to override the default or create your classes for the content that is editable.

Please be aware that overriding the style of a core class can affect multiple areas of the funnel where its being used. We recommend that you apply basic style overrides at the global level and use ID, Custom Classes or Pseudo Classes to override styles of specific components.

Default Layout Template

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 <html> <head> <title></title> <meta charset="utf-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="canonical" href="" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="author" content="WebForce HQ" /> <meta name="description" content="" /> <meta name="keywords" content="WebForce HQ" /> <meta name="content-language" content="en" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- Open Graph >>> --> <meta property="og:title" content="" /> <meta property="og:description" content="" /><meta property="og:image" content="" /> <meta property="og:url" content="" /><meta property="og:site_name" content="" /> <meta property="og:type" content="website" /><meta name="country" content="US" /> <meta name="classification" content="" /> <!-- <<< Open Graph --> <!-- Robots >>> --> <meta name="Robots" content="NOODP" /> <meta name="revisit" content="1 days" /> <meta name="revisit-after" content="1 days" /> <meta name="robots" content="index, follow" /> <meta name="alexa" content="100" /> <meta name="subject" content="" /> <meta name="robots" content="all, index, follow" /> <meta name="googlebot" content="all, index, follow" /> <--Comment This Script Out When Working Locally--> <script> window.Laravel = <?php echo json_encode([ 'csrfToken' => csrf_token(), ]); ?>; window.rollbarTokenPostClientItem= <?php echo json_encode([ 'token' => env('ROLLBAR_TOKEN_POST_CLIENT_ITEM'), 'env' => env('APP_ENV') ]); ?>; </script> <link href="<https://use.fontawesome.com/releases/v5.0.6/css/all.css"> rel="stylesheet" /> <link rel="stylesheet" href="<https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> crossorigin="anonymous" /> <link rel="stylesheet" href="<https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> crossorigin="anonymous" /> <link href="/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <link href="/css/frontEnd.css" rel="stylesheet" /> <link rel="stylesheet" href="{{ asset('css/appHtmlEditor.css') }}" crossorigin="anonymous" /> <--Insert Custom CSS Stylesheets Here--> <link rel="stylesheet" href="https://storage.googleapis.com/wfhq_xxxxxxx/filename.css"/> @yield("head") </head> <body> <div id="app"> @yield("content") </div> <script src="/js/frontEnd.js"></script> <--Insert Custom JS Here--> @yield("foot") </body> </html>

 

When preparing a webpage and assets to be used in WebForce you have a couple of options to best suit your needs.

Your img, css, js and additional files will need to be uploaded to our Google Cloud Storage Bucket. Your System administrator will receive information to access this portal. Once uploaded your files will have the following path structure: <link rel="stylesheet" href="https://storage.googleapis.com/wfhq_xxxxxxx/filename.css"/>

Use this path to link your assets from within your pages.

For Working on your pages locally or other environments outside of WebForce, you can use the default layout to get started. Simply comment out the script in the head & the 3 @yield() tags. This way you can work with all the code in one file, then when its time to place into WebForce, uncomment the layout tags & place the content into its corresponding area by editing the corresponding page.

Here Are The 3 Screens For Editing the Funnel, Layout & Individual Page.

Edit Funnel Screen

Edit Layout Screen

 

Edit Page Screen

 

 

 

Video Steps

Funnels & Pages - 1. Organizing Your Files Locally

https://www.loom.com/share/98265f3df9334924a5fc072bbda9d775

Funnels & Pages - 2. Uploading Your Assets To The Cloud

https://www.loom.com/share/59f88d96b2894c94ae970e586071d001

Funnels & Pages - 3. Linking Your Pages To The Cloud Assets
https://www.loom.com/share/c3b8e983e918412b824c6ef9b422153a

Funnels & Pages - 4. Combining WebForce Layout & HTML Content

https://www.loom.com/share/46a256e3c7454fa0bd7846b7fe3137ef

Funnels & Pages - 5. Uploading WebForce Layout & HTML Content

https://www.loom.com/share/6ed083d9a2be41ed878edf8d8c5486b3