Building Library
The Building Library consists of Basic (Elements) and Advanced (Block) Components built inside of the Content Block panel that enable users to rapidly advance their development building capabilities.
The "Content Block" panel expands the frontend development capabilities through a drag & drop interface.
Panel Components
Drag & Drop Building
Page Blocks
The Content Block Panel includes 3 sections:
BASIC (Elements) / ADVANCED (Blocks) / INTEGRATIONS (3rd Party)
CONTENT BLOCKS
BASIC
The basic content block tab is made up of Elements that enable a user to drag blocks into a website that has been developed inside of the platform.
These Element Components work in two ways.
1. Pre-built
Template: Elements will adopt the styling of the template.
2. File > New: Elements will adopt the styling of the template.
PRE-BUILT LIST
The "Pre-Built" Elements are pre-defined by CrownPeak as building blocks for existing templates.
These Element Components do not have any styling.
CONTENT BLOCKS
ADVANCED
The advanced content block tab is made up of two parts seperated by "Custom-Built" and "Pre-Built" Block Components.
A user can drag Blocks into a website that has been developed inside of the platform.
These Block Components work in two ways.
1. Pre-built
Template: Blocks do not adopt the styling of the template.
2. File > New: Blocks will not adopt the styling of a template.
CUSTOM-BUILT LIST
The "Custom-Built" Blocks are built by the agency, developer or user who is has a pre-designed website. Unable to be defined by CrownPeak.
These Block Components have styling.
PRE-BUILT LIST
The "Pre-Built" Block (Components) are pre-defined by CrownPeak as building blocks for new templates.
These Block Components have styling.
CONTENT BLOCKS
INTEGRATIONS
The integrations content block tab is made up of two parts seperated by "Custom-Built" and "Pre-Built".
Components that enable a user to drag blocks into a website that has been developed inside of the platform.
Page Building
These above elements are the building blocks for any successful page layout.
Use the BASIC tab for websites pre-built and implemented into the CMS. These blocks allow you to further exand or adjust your page.
Use the ADVANCED tab for websites pre-built or new websites inside the CMS. These blocks allow you to further exand or adjust your page as well as build page templates from the ground up.
Use the INTEGRATIONS tab for websites pre-built and implemented into the CMS. These blocks allow you to further exand or adjust your page.
Pre-Built Pages
Page Building
Component Code Snippets
Component 1: Header
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <section class="image-edge"> <div class="col-md-6 col-sm-4 p0 col-md-push-6 col-sm-push-8"> <img alt="Screenshot" class="mb-xs-24" src="img/phone2.png"> </div> <div class="container"> <div class="col-md-pull-0 col-sm-7 col-sm-pull-4 v-align-transform col-md-6"> <h1 class="large mb40 mb-xs-16">Clean & Simple<br>Building Library</h1> <h6 class="uppercase mb16">PAGE BUILDING THROUGH PRE-BUILT & CUSTOM-BUILT LIBRARIES</h6> <p class="lead mb40">With predefined content blocks users can expand existing website properties or build pages directly in the content management experience. </p> <a class="btn-lg btn" href="#">ExploRE LIBRARY</a> </div> </div></section> |
Component 2: Centered Columns
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 | <section class="bg-dark"> <div class="container"> <div class="row mb64 mb-xs-24"> <div class="col-sm-12 col-md-10 col-md-offset-1 text-center"> <h3>Building library gives you the flexibility to build your site using pre-built and custom- built purpose-made content blocks.</h3> </div> </div> <div class="row"> <div class="col-sm-6 text-center"> <div class="feature"> <div class="text-center"> <i class="ti-layout-grid2 icon-lg mb40 mb-xs-24 inline-block color-primary"></i> <h5 class="uppercase">Expert, Modular Design</h5> </div> <p> Customers love our block-based approach to template building, <br class="hidden-sm">it makes assembling beautiful pages fast and enjoyable, leaving <br class="hidden-sm"> more time to craft your perfect layout. </p> </div> </div> <div class="col-sm-6 text-center"> <div class="feature"> <div class="text-center"> <i class="ti-heart icon-lg mb40 mb-xs-24 inline-block color-primary"></i> <h5 class="uppercase">Flexibility for Developers</h5> </div> <p> We haven't forgotten developers, that's why we've built Foundry <br class="hidden-sm"> from the ground-up as a powerful, easy to understand framework <br class="hidden-sm"> with a particular focus on code readability. </p> </div> </div> </div> </div> </section> |
Component 3: Icon Image Overlay
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 | <section class="image-bg overlay parallax"> <div class="background-image-holder"> <img alt="Background" class="background-image" src="img/cover15.jpg"> </div> <div class="container"> <div class="row"> <div class="col-sm-4"> <div class="feature feature-1 boxed"> <div class="text-center"> <i class="ti-package icon"></i> <h5 class="uppercase">Unique Concepts</h5> </div> <p> 10 Fresh and unique concepts included out of the box. From portfolio to property showcase, Foundry's adaptable look is perfect for your next project. </p> </div> </div> <div class="col-sm-4"> <div class="feature feature-1 boxed"> <div class="text-center"> <i class="ti-infinite icon"></i> <h5 class="uppercase">Infinite Potential</h5> </div> <p> With over 100 pre-made HTML templates included, it's easier than ever to find a look that suits you. If not, just create your own with Variant Page Builder! </p> </div> </div> <div class="col-sm-4"> <div class="feature feature-1 boxed"> <div class="text-center"> <i class="ti-heart icon"></i> <h5 class="uppercase">Developer Friendly</h5> </div> <p> We haven't forgotten developers, that's why we've built Foundry from the ground-up as a powerful, easy to understand framework, with a focus on code readability. </p> </div> </div> </div> </div> </section> |
Component 4: Call to Action
1 2 3 4 5 6 7 8 9 10 11 12 13 | <section class="bg-dark pt64 pb64"> <div class="container"> <div class="row"> <div class="col-sm-12 text-center"> <h2 class="mb8">CrownPeak Building Library</h2> <p class="lead mb40 mb-xs-24">Page Builder, Over 100 Page Templates</p> <a class="btn btn-filled btn-lg mb0" href="#purchase-template">DEMO TODAY</a> </div> </div> </div></section> |
Component 5: Footer
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 | <footer class="footer-2 bg-dark"> <div class="container"> <div class="row"> <div class="col-sm-4"> <a href="#"><img class="image-xxs fade-half" alt="Pic" src="img/logo-light.png"></a> </div> <div class="col-sm-4 text-center"> <span class="fade-half"> © Copyright 2015 - All Rights Reserved </span> </div> <div class="col-sm-4 text-right"> <ul class="list-inline social-list"> <li><a href="#"><i class="ti-twitter-alt"></i></a></li> <li><a href="#"><i class="ti-facebook"></i></a></li> <li><a href="#"><i class="ti-dribbble"></i></a></li> <li><a href="#"><i class="ti-vimeo-alt"></i></a></li> </ul> </div> </div> </div></footer> |
