Skip to content

Instantly share code, notes, and snippets.

@rayantony

rayantony/site-origin.html

Created November 22, 2014 11:52
Show Gist options
  • Save rayantony/67dc5db17af5993bae23 to your computer and use it in GitHub Desktop.
Save rayantony/67dc5db17af5993bae23 to your computer and use it in GitHub Desktop.
Download ZIP
siteorigin test of grids
Raw
site-origin.html
<!DOCTYPE html>
<html lang="en-US" prefix="og: http://ogp.me/ns#">
<head><base href="https://siteorigin.com/" />
<meta charset="UTF-8">
<meta name="viewport" content="width=1140">
<title>Page Builder Plugin - SiteOrigin</title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="https://siteorigin.com/xmlrpc.php">
<link href='//fonts.googleapis.com/css?family=Short+Stack' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="//use.typekit.net/xxt7mnr.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<!-- This site is optimized with the Yoast WordPress SEO plugin v1.6.3 - https://yoast.com/wordpress/plugins/seo/ -->
<link rel="canonical" href="https://siteorigin.com/page-builder/" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Page Builder Plugin - SiteOrigin" />
<meta property="og:url" content="https://siteorigin.com/page-builder/" />
<meta property="og:site_name" content="SiteOrigin" />
<!-- / Yoast WordPress SEO plugin. -->
<link rel="alternate" type="application/rss+xml" title="SiteOrigin &raquo; Feed" href="https://siteorigin.com/feed/" />
<link rel="alternate" type="application/rss+xml" title="SiteOrigin &raquo; Comments Feed" href="https://siteorigin.com/comments/feed/" />
<link rel="alternate" type="application/rss+xml" title="SiteOrigin &raquo; Page Builder Plugin Comments Feed" href="https://siteorigin.com/page-builder/feed/" />
<link rel='stylesheet' id='genericons-css' href='https://siteorigin.com/wp-content/themes/siteorigin2014/pages/page-builder/genericons/genericons.css?ver=4.0.1' type='text/css' media='all' />
<link rel='stylesheet' id='siteorigin-page-builder-intro-css' href='https://siteorigin.com/wp-content/themes/siteorigin2014/pages/page-builder/style.css?ver=4.0.1' type='text/css' media='all' />
<link rel='stylesheet' id='nextend_fb_connect_stylesheet-css' href='https://siteorigin.com/wp-content/plugins/nextend-facebook-connect/buttons/facebook-btn.css?ver=4.0.1' type='text/css' media='all' />
<link rel='stylesheet' id='nextend_google_connect_stylesheet-css' href='https://siteorigin.com/wp-content/plugins/nextend-google-connect/buttons/google-btn.css?ver=4.0.1' type='text/css' media='all' />
<link rel='stylesheet' id='nextend_twitter_connect_stylesheet-css' href='https://siteorigin.com/wp-content/plugins/nextend-twitter-connect/buttons/twitter-btn.css?ver=4.0.1' type='text/css' media='all' />
<link rel='stylesheet' id='siteorigin-style-css' href='https://siteorigin.com/wp-content/themes/siteorigin2014/style.css?ver=5fb6e8e245cd3569f42972da548d1d88' type='text/css' media='all' />
<!-- This site uses the Yoast Google Analytics plugin v5.0.7 - Universal disabled - https://yoast.com/wordpress/plugins/google-analytics/ -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-15939505-1']);
_gaq.push(['_gat._forceSSL']);
_gaq.push(['_trackPageview']);
(function () {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- / Yoast Google Analytics -->
<script type='text/javascript' src='https://siteorigin.com/wp-includes/js/jquery/jquery.js?ver=1.11.1'></script>
<script type='text/javascript' src='https://siteorigin.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='https://siteorigin.com/wp-content/themes/siteorigin2014/pages/page-builder/waypoints.min.js?ver=4.0.1'></script>
<script type='text/javascript' src='https://siteorigin.com/wp-content/themes/siteorigin2014/pages/page-builder/jquery.typeout-1.0.min.js?ver=4.0.1'></script>
<script type='text/javascript' src='https://siteorigin.com/wp-content/themes/siteorigin2014/pages/page-builder/jquery.transit.min.js?ver=4.0.1'></script>
<script type='text/javascript' src='https://siteorigin.com/wp-content/themes/siteorigin2014/pages/page-builder/animations.js?ver=4.0.1'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var so = {"ajax_url":"https:\/\/siteorigin.com\/wp-admin\/admin-ajax.php"};
/* ]]> */
</script>
<script type='text/javascript' src='https://siteorigin.com/wp-content/themes/siteorigin2014/js/main.js?ver=3a9c264fbe01943e84e580e202d8cea3'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://siteorigin.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://siteorigin.com/wp-includes/wlwmanifest.xml" />
<link rel='shortlink' href='https://siteorigin.com/?p=886' />
<script src="//cdn.optimizely.com/js/1662770289.js"></script></head>
<body class="page page-id-886 page-parent page-template page-template-pagespage-builder-php siteorigin-panels custom-template-page-builder">
<div id="topbar">
<div class="container">
<div id="crumbtrail">
<span class="item"><a href="https://siteorigin.com">Home</a></span><span class="sep">&gt;</span><span class="item"><strong>Page Builder Plugin</strong></span> </div>
<div class="user">
<div class="login">
Login or Signup <div class="networks">
<a href="https://siteorigin.com/wp-login.php?redirect_to=https%3A%2F%2Fsiteorigin.com%2Fpage-builder%2F&loginTwitter=1" class="network twitter">twitter</a>
<a href="https://siteorigin.com/wp-login.php?redirect_to=https%3A%2F%2Fsiteorigin.com%2Fpage-builder%2F&loginFacebook=1" class="network facebook">facebook</a>
<a href="https://siteorigin.com/wp-login.php?redirect_to=https%3A%2F%2Fsiteorigin.com%2Fpage-builder%2F&loginGoogle=1" class="network google">google</a>
<a href="https://siteorigin.com/wp-login.php?redirect_to=https%3A%2F%2Fsiteorigin.com%2Fpage-builder%2F" class="network siteorigin">siteorigin</a>
</div>
</div>
</div>
</div>
</div>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<div class="container">
<a href="https://siteorigin.com/" rel="home" id="logo">
<em class="hover"></em>
<span class="hover-text">home please</span>
SiteOrigin </a>
<nav id="site-navigation" class="main-navigation" role="navigation">
<h1 class="menu-toggle">Menu</h1>
<a class="skip-link screen-reader-text" href="#content">Skip to content</a>
<form role="search" method="get" class="search-form" action="https://siteorigin.com/">
<label>
<span class="screen-reader-text">Search for:</span>
<input type="search" class="search-field" placeholder="Search &hellip;" value="" name="s" title="Search for:" />
</label>
<input type="submit" class="search-submit" value="Search" />
</form><div class="menu-main-menu-container"><ul id="menu-main-menu" class="menu"><li id="menu-item-925" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-925"><a href="/theme/">Themes</a></li>
<li id="menu-item-887" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-886 current_page_item menu-item-887"><a href="https://siteorigin.com/page-builder/">Page Builder</a></li>
<li id="menu-item-5544" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5544"><a href="#newsletter">Newsletter</a></li>
<li id="menu-item-1579" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1579"><a href="/thread/">Support</a></li>
</ul></div> </nav><!-- #site-navigation -->
</div>
</header><!-- #masthead -->
<div id="content" class="site-content">
<div id="post-886" class="post-886 page type-page status-publish hentry page-builder-info">
<!-- The Headline -->
<div class="container">
<h1 class="headline">WordPress Page Builder</h1>
<h2 class="sub-headline">Create Responsive Pages Using The Widgets You Know and Love</h2>
</div>
<!-- The main banner part -->
<div class="main-banner-wrapper">
<div class="main-banner">
<div class="container">
<img src="https://siteorigin.com/wp-content/themes/siteorigin2014/pages/page-builder/mac.png" />
<div class="video">
<iframe src="https://player.vimeo.com/video/59561067?title=0&amp;byline=0&amp;portrait=0&amp;hd=1" width="645" height="396" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</div>
</div>
</div>
<div class="action-buttons">
<a href="http://downloads.wordpress.org/plugin/siteorigin-panels.zip" class="button">Download Page Builder</a><br>
<a href="https://siteorigin.com/page-builder/documentation/" class="documentation">Documentation</a>
</div>
<div class="text-block after-main-banner">
<div class="container">
<h1>Go Beyond Linear Page Layouts</h1>
<p>
Linear page layouts are limiting when you’re trying to express a detailed idea.
With SiteOrigin’s Page Builder, you can create columized page layouts populated with the widgets and themes you know and love.
Its drag and drop interface is so easy to learn, that you'll be up and running in no time, you don't even need to change the theme you're using.
</p>
</div>
</div>
<!-- The main banner part -->
<div class="forklift-block-wrapper">
<div class="forklift-block">
<div class="container">
<h1>We Do All The Heavy Lifting</h1>
<p>Creating CSS layouts isn’t for the faint of heart. They involve a complex balancing act of paddings, margins, floats and clears. Not something you want to be doing when you have real content to create.</p>
<p>Even column shortcodes, like some themes use, turns your content into a mess of opening and closing tags. And it doesn’t take much to break your entire layout.</p>
<p>SiteOrigin’s page builder completely abstracts all of that. All you need to do is drag, drop and create using our simple interface.</p>
<img src="https://siteorigin.com/wp-content/themes/siteorigin2014/pages/page-builder/forklift.png" class="forklift" width="218" height="331" />
</div>
</div>
</div>
<div class="widgets-block">
<div class="container">
<h2>Loads of Widgets<span>, Plus Thousands More</span></h2>
<div class="the-widgets">
<div class="row row-0" data-top="0" style="z-index: 100">
<div class="the-widget-wrapper">
<div class="the-widget widget-style-6">
<div class="genericon genericon-chat"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-3">
<div class="genericon genericon-hide"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-4">
<div class="genericon genericon-menu"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-0">
<div class="genericon genericon-category"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-9">
<div class="genericon genericon-share"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-2">
<div class="genericon genericon-user"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-9">
<div class="genericon genericon-checkmark"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-0">
<div class="genericon genericon-pinterest"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-2">
<div class="genericon genericon-attachment"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-13">
<div class="genericon genericon-edit"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-4">
<div class="genericon genericon-zoom"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-5">
<div class="genericon genericon-standard"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-4">
<div class="genericon genericon-tag"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-3">
<div class="genericon genericon-menu"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-2">
<div class="genericon genericon-user"></div>
</div>
</div>
</div>
<div class="row row-1" data-top="64" style="z-index: 99">
<div class="the-widget-wrapper">
<div class="the-widget widget-style-6">
<div class="genericon genericon-wordpress"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-2">
<div class="genericon genericon-tag"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-13">
<div class="genericon genericon-twitter"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-5">
<div class="genericon genericon-top"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-13">
<div class="genericon genericon-zoom"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-8">
<div class="genericon genericon-audio"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-6">
<div class="genericon genericon-gallery"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-2">
<div class="genericon genericon-time"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-1">
<div class="genericon genericon-close"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-6">
<div class="genericon genericon-link"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-9">
<div class="genericon genericon-twitter"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-4">
<div class="genericon genericon-show"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-2">
<div class="genericon genericon-comment"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-7">
<div class="genericon genericon-comment"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-0">
<div class="genericon genericon-user"></div>
</div>
</div>
</div>
<div class="row row-2" data-top="128" style="z-index: 98">
<div class="the-widget-wrapper">
<div class="the-widget widget-style-12">
<div class="genericon genericon-aside"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-12">
<div class="genericon genericon-aside"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-7">
<div class="genericon genericon-checkmark"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-3">
<div class="genericon genericon-aside"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-9">
<div class="genericon genericon-dribbble"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-5">
<div class="genericon genericon-time"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-13">
<div class="genericon genericon-chat"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-5">
<div class="genericon genericon-chat"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-10">
<div class="genericon genericon-github"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-13">
<div class="genericon genericon-aside"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-11">
<div class="genericon genericon-unzoom"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-3">
<div class="genericon genericon-github"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-1">
<div class="genericon genericon-hide"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-7">
<div class="genericon genericon-trash"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-12">
<div class="genericon genericon-edit"></div>
</div>
</div>
</div>
<div class="row row-3" data-top="192" style="z-index: 97">
<div class="the-widget-wrapper">
<div class="the-widget widget-style-8">
<div class="genericon genericon-tag"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-11">
<div class="genericon genericon-tag"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-9">
<div class="genericon genericon-location"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-1">
<div class="genericon genericon-audio"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-4">
<div class="genericon genericon-warning"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-7">
<div class="genericon genericon-checkmark"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-4">
<div class="genericon genericon-top"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-0">
<div class="genericon genericon-aside"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-12">
<div class="genericon genericon-menu"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-8">
<div class="genericon genericon-tag"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-10">
<div class="genericon genericon-search"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-0">
<div class="genericon genericon-day"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-11">
<div class="genericon genericon-trash"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-3">
<div class="genericon genericon-link"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-8">
<div class="genericon genericon-reply"></div>
</div>
</div>
</div>
<div class="row row-4" data-top="256" style="z-index: 96">
<div class="the-widget-wrapper">
<div class="the-widget widget-style-1">
<div class="genericon genericon-chat"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-4">
<div class="genericon genericon-video"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-4">
<div class="genericon genericon-top"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-1">
<div class="genericon genericon-tumblr"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-13">
<div class="genericon genericon-hide"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-0">
<div class="genericon genericon-top"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-0">
<div class="genericon genericon-flickr"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-12">
<div class="genericon genericon-chat"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-0">
<div class="genericon genericon-hide"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-10">
<div class="genericon genericon-menu"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-5">
<div class="genericon genericon-maximize"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-5">
<div class="genericon genericon-feed"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-7">
<div class="genericon genericon-zoom"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-3">
<div class="genericon genericon-day"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-10">
<div class="genericon genericon-star"></div>
</div>
</div>
</div>
<div class="row row-5" data-top="320" style="z-index: 95">
<div class="the-widget-wrapper">
<div class="the-widget widget-style-1">
<div class="genericon genericon-time"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-10">
<div class="genericon genericon-pinterest"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-11">
<div class="genericon genericon-category"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-5">
<div class="genericon genericon-unzoom"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-0">
<div class="genericon genericon-show"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-1">
<div class="genericon genericon-comment"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-6">
<div class="genericon genericon-wordpress"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-10">
<div class="genericon genericon-pinned"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-5">
<div class="genericon genericon-attachment"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-6">
<div class="genericon genericon-month"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-11">
<div class="genericon genericon-link"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-11">
<div class="genericon genericon-minimize"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-3">
<div class="genericon genericon-reply"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-8">
<div class="genericon genericon-pinterest"></div>
</div>
</div>
<div class="the-widget-wrapper">
<div class="the-widget widget-style-0">
<div class="genericon genericon-youtube"></div>
</div>
</div>
</div>
</div>
<p>
With countless widgets created by plugin developers from around the world, you’ll never struggle to build the page you want
</p>
</div>
</div>
<div class="text-block">
<div class="container">
<p>
WordPress has a few useful widgets.
Our Page Builder ships with a few more.
But that only scratches the surface of all the widgets available.
</p>
<p>
Need a newsletter signup form for your MailChimp newsletter? There’s a widget for that.
Need to add a self hosted video? Yup, there’s a widget for that.
It’s a smart idea to take advantage of all the hard work that these developers have put in.
Best of all, you're not forced to buy blocks or modules to get advanced functionality.
</p>
</div>
</div>
<div class="text-block">
<div class="container">
<h1>It Already Works With Your Theme</h1>
<p>
We ensured that our page builder integrates seamlessly with WordPress.
The interface looks just like you’d expect WordPress to look.
The integration goes much deeper than this though. Lets take a look at how it fits in with your site.
</p>
</div>
</div>
<div class="layers-block">
<div class="container">
<div class="layer layer-1">
<img class="layer-image" src="https://siteorigin.com/wp-content/themes/siteorigin2014/pages/page-builder/layers/design.jpg" width="1317" height="422">
<span class="layer-text">Your Theme</span>
</div>
<div class="layer layer-2">
<img class="layer-image" src="https://siteorigin.com/wp-content/themes/siteorigin2014/pages/page-builder/layers/widgets.jpg" width="1317" height="422">
<img class="shadow-image" src="https://siteorigin.com/wp-content/themes/siteorigin2014/pages/page-builder/layers/shadow.png" width="1317" height="410">
<span class="layer-text">Widgets</span>
</div>
<div class="layer layer-3">
<img class="layer-image" src="https://siteorigin.com/wp-content/themes/siteorigin2014/pages/page-builder/layers/grid.jpg" width="1317" height="422">
<img class="shadow-image" src="https://siteorigin.com/wp-content/themes/siteorigin2014/pages/page-builder/layers/shadow.png" width="1317" height="410">
<span class="layer-text">Grid Engine</span>
</div>
</div>
</div>
<div class="text-block">
<div class="container">
<div class="columns layer-info-columns">
<div class="column">
<h2>Grid Engine</h2>
<p>Look deep down into the core of the SiteOrigin page builder and you'll see our powerful grid engine. This interprets the layout you meticulously created and crafts highly efficient CSS.</p>
</div>
<div class="column">
<h2>Widgets</h2>
<p>Widgets form the building blocks of your page. After grid engine has finished creating the CSS, it sends out the message to all your widgets to get to work rendering their content using the settings you provided.</p>
</div>
<div class="column">
<h2>Your Theme</h2>
<p>And lastly, your theme dresses up your content with headers, navigation, a footer and a unique style that makes your site, yours. You're even free to switch themes after you've created content.</p>
</div>
</div>
</div>
</div>
<div class="code-block">
<div class="container">
<div class="text">
<h2>Efficient Code</h2>
<p>
Page Builder’s Grid Engine only generates the code it needs to display your visitor's current page. This is a lot more efficient than other methods that involve including a massive amount of CSS for a huge combination of grid layouts.<br/><br/>
We're not talking a small improvement either. The CSS generated by Grid Engine is up to 10-50 times lighter than typical CSS grid systems. This allowed us to move the CSS into an inline style, so it won't interfere with your performance plugins - further increasing your site's speed.<br/><br/>
All this efficiency and attention to detail translates into faster load times and lower bandwidth usage. These will make your users and clients smile.
</p>
</div>
</div>
</div>
<div class="text-block">
<div class="container">
<h1>We've Made Some Themes Too</h1>
<p>We've made a few free themes that work perfectly with our page builder, with more on the way.</p>
<div class="theme-archive">
<a href="https://siteorigin.com/theme/vantage/" class="theme-archive-item" style="background-image: url(https://siteorigin.com/wp-content/uploads/2013/09/vantage.jpg)">
<h2>Vantage</h2>
<h4><p>Next Generation Multipurpose</p>
</h4>
<div class="screenshots"> <div class="screenshot-wrapper">
<div class="screenshot">
<img src="https://siteorigin.com/wp-content/uploads/2013/09/vantage-full-313x360.jpg" />
</div>
</div>
<div class="screenshot-wrapper">
<div class="screenshot">
<img src="https://siteorigin.com/wp-content/uploads/2013/09/vantage-responsive-313x1189.jpg" />
</div>
</div>
<div class="screenshot-wrapper">
<div class="screenshot">
<img src="https://siteorigin.com/wp-content/uploads/2013/09/vantage-makeup-example-313x410.jpg" />
</div>
</div>
</div></a><a href="https://siteorigin.com/theme/current/" class="theme-archive-item" style="background-image: url(https://siteorigin.com/wp-content/uploads/2013/06/current-background.jpg)">
<h2>Current</h2>
<h4><p>Flat Software and App Theme</p>
</h4>
<div class="screenshots"> <div class="screenshot-wrapper">
<div class="screenshot">
<img src="https://siteorigin.com/wp-content/uploads/2013/06/current-screen-1-313x263.jpg" />
</div>
</div>
<div class="screenshot-wrapper">
<div class="screenshot">
<img src="https://siteorigin.com/wp-content/uploads/2013/06/current-screen-2-313x419.jpg" />
</div>
</div>
<div class="screenshot-wrapper">
<div class="screenshot">
<img src="https://siteorigin.com/wp-content/uploads/2013/06/current-screen-3-313x314.jpg" />https://siteorigin.com/
</div>
</div>
</div></a> </div>
</div>
</div>
<div class="action-buttons last">
<a href="http://downloads.wordpress.org/plugin/siteorigin-panels.zip" class="button">Download Page Builder</a><br>
<a href="https://siteorigin.com/page-builder/documentation/" class="documentation">Documentation</a>
</div>
</div>
</div><!-- #content -->
<footer id="colophon" class="site-footer" role="contentinfo">
<div class="container" >
<div class="footer-menu">
<div class="menu-footer-menu-container"><ul id="menu-footer-menu" class="menu"><li id="menu-item-656" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-656"><a href="https://siteorigin.com/about/">About</a></li>
<li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-888"><a href="https://siteorigin.com/blog/">Blog</a></li>
<li id="menu-item-5262" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5262"><a href="https://siteorigin.com/about/privacy-policy/">Privacy Policy</a></li>
</ul></div> </div>
<div id="footer-message">
<div class="message">
I'll never forget you
</div>
<div class="addo"></div>
</div>
</div>
</footer><!-- #colophon -->
</div><!-- #page -->
<div id="newsletter-signup-overlay" class="full-screen-overlay" style="display: none">
<a href="#" class="close">close</a>
</div>
<div id="newsletter-signup-modal" class="full-screen-modal" style="display: none">
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="https://siteorigin.us1.list-manage.com/subscribe/post?u=22e0c978d464421794fc99304&amp;id=71413dedec" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<h4>
Sign Up to Our Newsletter </h4>
<p>
Hear about our future releases of free themes and plugins. </p>
<div class="mc-field-group">
<label for="mce-FNAME">First Name </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-LNAME">Last Name </label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address </label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_22e0c978d464421794fc99304_71413dedec" value=""></div>
<div class="mce-submit-button">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
<div class="mce-submit-no-thanks">
<a href="#" class="no-thanks">No Thanks</a>
</div>
</form>
</div>
<!--End mc_embed_signup-->
</div>
<script type='text/javascript' src='https://siteorigin.com/wp-content/themes/siteorigin2014/js/navigation.js?ver=20120206'></script>
<script type='text/javascript' src='https://siteorigin.com/wp-content/themes/siteorigin2014/js/skip-link-focus-fix.js?ver=20130115'></script>
<script type='text/javascript' src='https://siteorigin.com/wp-includes/js/comment-reply.min.js?ver=4.0.1'></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment