Skip to content

Instantly share code, notes, and snippets.

@cobaltapps

cobaltapps/Beaver Builder Theme Page HTML

Last active March 7, 2019 02:19
Show Gist options
  • Save cobaltapps/9c17c1958dae6d342a91ae30bc8a47b8 to your computer and use it in GitHub Desktop.
Save cobaltapps/9c17c1958dae6d342a91ae30bc8a47b8 to your computer and use it in GitHub Desktop.
Download ZIP
A stripped down mock-up of what a standard page's HTML looks like when the Beaver Builder Theme is active.
Raw
Beaver Builder Theme Page HTML
<body class="page page-id-623 page-template page-template-my-templates page-template-testing-template page-template-my-templatestesting-template-php logged-in admin-bar no-customize-support fl-preset-default fl-full-width" itemscope="itemscope" itemtype="http://schema.org/WebPage">
<div class="fl-page">
<header class="fl-page-header fl-page-header-fixed fl-page-nav-right">
<div class="fl-page-header-wrap">
<div class="fl-page-header-container container">
<div class="fl-page-header-row row">
<div class="fl-page-logo-wrap col-md-3 col-sm-12">
<div class="fl-page-header-logo">
<a href="http://example.com"><span class="fl-logo-text" itemprop="name">Beaver Builder</span></a>
</div><!-- .fl-page-header-logo -->
</div><!-- .fl-page-logo-wrap -->
<div class="fl-page-fixed-nav-wrap col-md-9 col-sm-12">
<div class="fl-page-nav-wrap">
<nav class="fl-page-nav fl-nav navbar navbar-default" role="navigation">
<div class="fl-page-nav-collapse collapse navbar-collapse">
<ul id="menu-header-menu" class="nav navbar-nav navbar-right menu">
<li id="menu-item-24" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24"><a href="http://example.com/">Home</a></li>
<li id="menu-item-783" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-623 current_page_item menu-item-783"><a href="http://example.com/?page_id=623">About Page</a></li>
<li id="menu-item-757" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-757"><a href="http://example.com/?page_id=61">Page Layouts</a>
<ul class="sub-menu">
<li id="menu-item-760" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-760"><a href="http://example.com/?page_id=63">Content/Sidebar</a></li>
<li id="menu-item-758" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-758"><a href="http://example.com/?page_id=65">Sidebar/Content</a></li>
<li id="menu-item-759" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-759"><a href="http://example.com/?page_id=67">Content/Sidebar/Sidebar</a></li>
<li id="menu-item-785" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-785"><a href="http://example.com/?page_id=70">Sidebar/Sidebar/Content</a></li>
<li id="menu-item-784" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-784"><a href="http://example.com/?page_id=71">Sidebar/Content/Sidebar</a></li>
<li id="menu-item-782" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-782"><a href="http://example.com/?page_id=73">Full Width Content</a></li>
</ul>
</li>
<li id="menu-item-780" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-780"><a href="http://example.com/?page_id=79">Blog Page</a></li>
<li id="menu-item-781" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-781"><a href="http://example.com/?page_id=83">Contact Page</a></li>
</ul>
</div><!-- .fl-page-nav-collapse -->
</nav><!-- .fl-page-nav -->
</div><!-- .fl-page-nav-wrap -->
</div><!-- .fl-page-fixed-nav-wrap -->
</div><!-- .fl-page-header-row -->
</div><!-- .fl-page-header-container -->
</div><!-- .fl-page-header -->
</header><!-- .fl-page-header-fixed -->
<header class="fl-page-header fl-page-header-primary fl-page-nav-right fl-page-nav-toggle-button" itemscope="itemscope" itemtype="http://schema.org/WPHeader">
<div class="fl-page-header-wrap">
<div class="fl-page-header-container container">
<div class="fl-page-header-row row">
<div class="col-md-4 col-sm-12 fl-page-header-logo-col">
<div class="fl-page-header-logo" itemscope="itemscope" itemtype="http://schema.org/Organization">
<a href="http://example.com" itemprop="url"><span class="fl-logo-text" itemprop="name">Beaver Builder</span></a>
</div><!-- .fl-page-header-logo -->
</div><!-- .fl-page-header-logo-col -->
<div class="fl-page-nav-col col-md-8 col-sm-12">
<div class="fl-page-nav-wrap">
<nav class="fl-page-nav fl-nav navbar navbar-default" role="navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".fl-page-nav-collapse">
<span>Menu</span>
</button>
<div class="fl-page-nav-collapse collapse navbar-collapse">
<div class="fl-page-nav-search">
<a href="javascript:void(0);" class="fa fa-search"></a>
<form method="get" role="search" action="http://example.com" title="Type and press Enter to search.">
<input type="text" class="fl-search-input form-control" name="s" class="" value="Search" onfocus="if (this.value == 'Search') { this.value = ''; }" onblur="if (this.value == '') this.value='Search';">
</form>
</div><!-- .fl-page-nav-search -->
<ul id="menu-header-menu-1" class="nav navbar-nav navbar-right menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24"><a href="http://example.com/">Home</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-623 current_page_item menu-item-783"><a href="http://example.com/?page_id=623">About Page</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-757"><a href="http://example.com/?page_id=61">Page Layouts</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-760"><a href="http://example.com/?page_id=63">Content/Sidebar</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-758"><a href="http://example.com/?page_id=65">Sidebar/Content</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-759"><a href="http://example.com/?page_id=67">Content/Sidebar/Sidebar</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-785"><a href="http://example.com/?page_id=70">Sidebar/Sidebar/Content</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-784"><a href="http://example.com/?page_id=71">Sidebar/Content/Sidebar</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-782"><a href="http://example.com/?page_id=73">Full Width Content</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-780"><a href="http://example.com/?page_id=79">Blog Page</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-781"><a href="http://example.com/?page_id=83">Contact Page</a></li>
</ul>
</div><!-- .fl-page-nav-collapse -->
</nav><!-- .fl-page-nav -->
</div><!-- .fl-page-nav-wrap -->
</div><!-- .fl-page-nav-col -->
</div><!-- .fl-page-header-row -->
</div><!-- .fl-page-header-container -->
</div><!-- .fl-page-header-wrap -->
</header><!-- .fl-page-header -->
<div class="fl-page-content" itemprop="mainContentOfPage">
<div class="fl-content-full container">
<div class="row">
<div class="fl-content col-md-12 stuff-and-stuff">
<article class="fl-post post-623 page type-page status-publish hentry" id="fl-post-623" itemscope="itemscope" itemtype="http://schema.org/CreativeWork">
<header class="fl-post-header">
<h1 class="fl-post-title" itemprop="headline">About Page</h1>
<a class="post-edit-link" href="http://example.com/wp-admin/post.php?post=623&#038;action=edit">Edit</a>
</header><!-- .fl-post-header -->
<div class="fl-post-content clearfix" itemprop="text">
<p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p>
<p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p>
</div><!-- .fl-post-content -->
<div class="fl-comments">
<div id="respond" class="comment-respond">
<h3 id="reply-title" class="comment-reply-title">Leave a Comment <small><a rel="nofollow" id="cancel-comment-reply-link" href="/?page_id=623#respond" style="display:none;">Cancel Reply</a></small></h3> <form action="http://example.com/wp-comments-post.php" method="post" id="fl-comment-form" class="fl-comment-form">
<p>Logged in as <a href="http://example.com/wp-admin/profile.php">Eric Hamm</a>. <a href="http://example.com/wp-login.php?action=logout&amp;redirect_to=http%3A%2F%2Fexample.com%2F%3Fpage_id%3D623&amp;_wpnonce=3237d8d976" title="Log out of this account">Log out &raquo;</a></p><label for="comment">Comment</label>
<textarea name="comment" class="form-control" cols="60" rows="8" tabindex="4"></textarea><br /><p class="form-submit"><input name="submit" type="submit" id="fl-comment-form-submit" class="btn btn-primary" value="Submit Comment" /> <input type='hidden' name='comment_post_ID' value='623' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
</p>
</div><!-- #respond -->
</div><!-- .fl-comments -->
</article><!-- .fl-post -->
</div><!-- .fl-content -->
</div><!-- .row -->
</div><!-- .fl-content-full -->
</div><!-- .fl-page-content -->
<footer class="fl-page-footer-wrap" itemscope="itemscope" itemtype="http://schema.org/WPFooter">
<div class="fl-page-footer">
<div class="fl-page-footer-container container">
<div class="fl-page-footer-row row">
<div class="col-md-12 text-center clearfix">
<div class="fl-page-footer-text fl-page-footer-text-1">
<span>&copy; 2016 Beaver Builder</span>
<span> | </span>
<span id="fl-site-credits">Powered by <a href="http://www.wpbeaverbuilder.com/?utm_medium=bb-pro&utm_source=bb-theme&utm_campaign=theme-footer" target="_blank" title="WordPress Page Builder Plugin">Beaver Builder</a></span>
</div><!-- .fl-page-footer-text -->
</div><!-- .col-md-12 -->
</div><!-- .fl-page-footer -->
</div><!-- .fl-page-footer-container -->
</div><!-- .fl-page-footer -->
</footer><!-- .fl-page-footer-wrap -->
</div><!-- .fl-page -->
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment