BootFrame is a clean and professional responsive WordPress business theme designed with versatility in mind. BootFrame is highly customizable with unlimited color and font options, logo upload, social media icons and much more that can be adjusted via Costomizer. You can easy build for your business site, portfolio, blog, one page or any other site.
BootFrame is built on Bootstrap framework and supports Site Origin's Page Builder which allows you to build any page layout required. It's also integratet with popular plugins: Contact Form 7, WPML, Polylang, Shortcodes Ultimate, Meta Slider
To install this theme you must have a working version of WordPress already installed. Extract the
zipped package to your desktop, in the extracted package you will find the .zip file which is
the WordPress theme.
You can install the theme in two ways:
The first option how to install this Theme would be to directly upload the theme .zip file via
WordPress Theme Uploader:
The second option how to install this Theme would be the upload via FTP manager. After extracting theme .zip file you have to upload the extracted folder to /wp-content/themes/ folder on your server.
After the theme installation you will be redirected to the plugin activation page. If you want to enjoy all the options offered by the theme or you are going to import the demo content you need to install all plugins listed below:
Plugin Name | Why You should install it? |
---|---|
Page Builder by SiteOrigin | A drag and drop, responsive page builder that simplifies building your website. |
Smartlib Tools | Some extra features to your theme: Portfolio, Testimonials, FAQ and Team Members Post Types. |
Meta Slider | Easy to use slideshow plugin. Create SEO optimised responsive slideshows with Nivo Slider, Flex Slider, Coin Slider and Responsive Slides. |
Shortcodes Ultimate | Supercharge your WordPress theme with mega pack of shortcodes |
SiteOrigin Widgets Bundle | A collection of all our widgets, neatly bundled into a single plugin. |
Contact Form 7 | Contact Form 7 can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. |
Black Studio TinyMCE Widget | Adds a new "Visual Editor" widget type based on the native WordPress TinyMCE editor. |
To make your WordPress website look like the live demo you can use quick demo import panel. You can import content just after installation on the activation page by using button “go to import data panel’ or anytime go to the menu Appearance > Import Demo Data. You will be redirected to the Import Demo Data panel where you can use Import Demo Data button.
Importing demo data (post, pages, images, theme settings, ...) is the easiest way to setup your theme. It will allow you to quickly edit everything instead of creating content from scratch. When you import the data following things will happen:
Before you begin, make sure all the required plugins are activated.
On the Import Demo Data panel please click import only once and wait, it can take a couple of minutes.
There are 8 page templates used on this theme:
There are 2 types of category layout in this theme:
There are 3 main widget areas (sidebars) on this theme:
Page Builder also supports most standard widgets so you can use widgets in grid-based page content.
This theme supports 3 main types of widgets:
The theme gives you a collection of widgets to add to theme sidebars and Page Builder pages. There are following awesome widgets:
Widget Name | Destination area | Describe |
---|---|---|
BootFrame Call to Action | Page Builder grid | simple text widget with Title, Image URL, A text/html area, Link Text and Link URL |
BootFrame Counter Boxes | Page Builder grid | dynamically counts up to a targeted number (from 0) |
BootFrame Display Page Content | Page Builder grid | display content from selected page |
BootFrame Extend Content | Page Builder grid, Sidebar | similar to call to action widget, designed for page builder columns |
BootFrame Extended Recent Posts | Sidebar | display a list of the most recent posts with thumbnail, excerpt and post date |
BootFrame Last Articles in Columns | Sidebar | Displays the latest articles in Columns |
BootFrame One Author Profile | Sidebar | Short info about author with avatar |
BootFrame Our Team Columns | Page Builder grid | Display your team members in columns (Team Meber post type from Smartlib Tools plugin) |
BootFrame Portfolio Items | Page Builder grid | Display portfolio items in columns (Portfolio post type from Smartlib Tools plugin) |
BootFrame Recent Galleries | Sidebar | Display last galleries (based on the post format chosen ) |
BootFrame Recent Video | Sidebar | Display last video posts (based on the post format chosen ) |
BootFrameSearch | Sidebar | Display search form |
BootFrame Section Header | Page Builder grid | Display header above page builder sections |
BootFrame Social Icons | Sidebar | Display Social Icons (settings from Smartlib Tools plugin) |
BootFrame Testimonials | Page Builder grid | Display tetsimonials post in columns (Portfolio post type from Smartlib Tools plugin) |
BootFrame Video Widget | Sidebar | Display video in sidebar |
Navigate to Appearance > Menus. You can create menus and put them in position via the 'Theme Locations' setting.
BootFrame supports two locations for custom WordPress menus:
With the plugin Smartlib Tools included in the theme you can add new post types which extend your site with specific content:
Post Formats is a popular feature that is part of the WordPress core. A Post Format is a piece of meta information that can be used by a theme to customize its presentation of a post. You can choose the corresponding format of the Post to correctly add a video, audio, gallery or standard post.
BootFrame supports the following post formats:
You can also use other post formats which are not graphically highlighted:
Standard, Link, Image, Quote, Status, Audio, Chat
You can use Portfolio custom post type to showcase your projects on the front page of your site. Remember: to use Portfolio items post type you have to install and activate Smartlib Tools plugin included in the theme.
The portfolio section uses a custom post type called Portfolio items. This is how you add a new portfolio post:
To display the latest portfolio items on your page you should use proper page template.
You can choose one of 4 templates:
We’ve used the built-in WordPress Customizer for this theme.
Theme Customizer is the powerfull tool which allows you to configure the website settings and see all the changes instantly in a Preview frame. In the Customizer there are several sections categorizes all settings into groups. Each section contain one or many settings. To use the Customizer, go to Appearance -> Customize in the dashboard or you can also go to Appearance > Themes and click on either the “Customize” button.
Most of the settings will autoupdate in the live preview window, please note in order to save your changes you must click the blue “Save & Publish” button.
The Site Title is displayed in the title bar of a web browser. Tagline is a short description or catchy phrase to describe what your page is about.
You can easily remove the default logo, upload your own custom logo and change favicon.
Enable or disable Loading animation (preloader)
Enabling this option will display photos using prettyPhoto lightbox
Allows adjust the background color. Select the desired colors using the color pallet or type in the color Hex (#) Value.
You can upload a background image for your website
In this tab you find text area fields where you can type in your own CSS or JavaScript code like Google Analytics:
In this section you can set urls to your social profiles. It will be displayed as icons on header and footer section on the website.
It also allows you to specify which social buttons will be displayed on post pages Your visitors will be able to easily share your content on the most popular social networks: Twitter, Facebook, Google Plus and Pinterest.
This section lets you control all of the main text/font colors or typographic properties for many different elements of your site. For each customizable element, the following properties can be modified:
These theme incorporate all types of Bootstrap buttons. This section lets you control all of the buttons properties like font family, background or font color. Buttons are part of layout and you can use these Buttons in an Page, Post or even a Text Widget. You can modify 6 types of buttons:
Navbar is the most important part of website. In this section you can set the global layout for the header. It places the site identity and the navigation side by site.
The highest-placed section( above main navigation) . In this section you can optionally display language switcher (after WPML vs Polylang installation), some information, small menu or social media icons.
You can switch of top bar (only navbar will be displayed)
You can place short information like phone number in the top bar
Switch on/switch off social media icons
This is the large dark bar at the top of your page that contains your primary menu links and search form. Within this panel you can adjust the background color of the bar, background opacity and position of the bar.
You can decide if your navbar becomes fixed to the top of your screen when you scroll. You will notice that as you scroll down your page, your menu bar remains fixed to the top of the screen and shrinks to provide more readable space on the screen.
It allows you to specify if search icon and search form will be placed in the navbar.
In this section you can adjust the size, style and color of your primary navigation menu.
This customizer section is dedicated to your website footer. Footer was divided into 3 layout sections: Footer Sidebar, Bottom Menu and Copyright & Social icons.
Footer Sidebar is divided into 4 columns where you can add widgets. To add/edit widgets inside, please navigate to Appearance > Widgets section and choose widgets for Footer Sidebar. You can also decide if footer sidebar will be displayed.
In this customizer section you can easily change your footer style:
You can edit or switch off some components:
The layouts panel is where you can adjust layout or sidebar size and layout variants for your website. You can change global layout scheme (customizer section) or specify individual content type layout schemes on the verery single page (Page Options metabox).
In this customizer section you can change:
In this section you can change main Blog sections settings like date or author displaying. You should note that some settings are visible only if you go to proper page in your preview window. If e.g. you want change post date visibility on category pages you should display any category page in the preview window (e.g. by choosing in menu) and then blog category options will appear on Customizer panel (on the right side).
In this section you can change main Blog sections settings like date or author displaying. You should note that some settings are visible only if you go to proper page in your preview window. If e.g. you want change post date visibility on category pages you should display any category page in the preview window (e.g. by choosing in menu) and then blog category options will appear on Customizer panel (on the right side).
By default, WordPress shows your most recent posts in reverse chronological order on the front page of your site. Many WordPress users want a static front page or splash page as the front page instead.
If you wish to display an alternative page You can select “A static page” under the heading “Front page displays”. You will need to create the desired page before they will appear in drop down menu.
In the demo site you can see static front page created with page builder.
SiteOrigin Page Builder is a WordPress plugin which lets you build pages using widgets as building blocks you can drag-and-drop into a responsive layout. It's a comfortable tool to content creation that'll help you create your home, contact, about us or any other page with a linear layout based on rows and columns.
First, let’s take a look at the interface. Page Builder adds an extra tab to the standard WordPress editor.
Clicking on this tab brings up the Page Builder interface.
You can use the toolbar to add a widget, add a new row of columns or to load prebuilt layouts.
Use these buttons to delete and move a row. The up/down icon acts as a handle to pick up and drag the row up or down.
Open a new page by navigating to Pages > Add New
Click on the Page Builder tab to start creating your content. This tab is connected to your visual editor.
Now, we’re ready to start creating a page with Page Builder.
Open the page you want to edit using Page Builder by navigating to Pages > All Pages and clicking the page you wish to edit.
If you have not used Page Builder on this page before, it will open in the default visual editor. Click on the Page Builder tab.
Confirm that you’d like to copy the existing content from the visual editor into Page Builder. Any content you create with Page Builder will overwrite the existing content for that page, so we recommend that you copy your content over.
Page Builder copies all of your content to a Visual Editor widget in a single column row. This setup gives you an accurate representation of how your content looked before. Open the Visual Editor widget if you need to access this content.
Page Builder works with all post types, not just standard pages. First, navigate to Settings > SiteOrigin Page Builder. Then, make sure the post type you want to use it for is selected under Post Types.
More information and support forum you find here: https://siteorigin.com/page-builder/documentation/
BootFrame is integrated with Shortcodes Ultimate plugin. With this plugin you can easily create tabs, buttons, boxes, different sliders, responsive videos and much, much more. Turn your free theme to premium in just a few clicks. Shortcodes Ultimate offers over 40 useful shortcodes – many with conditions that can be used to tailor their use – that cover everything from adding spoiler tags and other accordion-like hidden areas to animations, buttons, icons and even formatting your pages and posts into columns.
Shortcodes Ultimate provides you with a useful button for adding shortcodes in the post/page editing screen.
Contact Form 7 plugin is used on the contact form page and we already have styling in place to match the theme.
For all those who prefer translation with files included into theme we recommend to use .mo/.po files. Those files works in pair so for each language you need to have 2 files with the same name but different extension. For example if you want to translate theme into Polish language, you're files should be pl_PL.mo and pl_PL.po
For editing this files you need to use Poedit software which is very easy to use. All you need to do is upload those files into this software, edit them and upload into "languages" folder where theme is installed.
BootFrame was tested with WPML and Polylang(free) plugins and is fully compatible. If you want to have multilingual website, this is the best way to do it. If you want to use this plugins, you must purchase it first (WPML) or download (Polylang) and then install into your wordpress installation. Below we serve links that will be useful:
Polylang - https://wordpress.org/plugins/polylang/ WPML - https://wpml.org/
BootFrame has integrated language switcher from WPML or Polylang. It appears when one of the plugin is activated.
BootFrame is integrated with Smartlib Tools plugin that allows you to quickly and painlessly add social sharing and following features to all your posts, pages and custom post types.
BootFrame provides new extra fields to WordPress user profile. Your User Profile can be accessed via Users -> My Profile in your dashboard. If you are logged in as administrator You can also edit each user's profile( go to Users-> All Users -> click on user name in user list). In user profile you will find two types user extra fields:
Once downloaded, unzip the compressed folder to see the structure of (the compiled) BootFrame. You'll see this structure:
assets - This folder containsl css files, javascript, all installed plugins and images
dev - all less files needed to create the template stylesheet. Also includs javascript
style.css - main css file (optionally compiled from LESS),
Plugins
Animate.css - A cross-browser library of CSS animations.
flexslider - fully responsive jQuery slider toolkit.
prettyPhoto - a jQuery lightbox clone
Font awesome - scalable vector icons
jQuery countTo - plugin that will count up (or down) to a target number at a specified speed
waypoints - library that makes it easy to execute a function whenever you scroll to an element
BootFrame has modular components for making these easier to re-use anytime when needed. Template is created with Twitter Bootstrap 3.3 Framework
Layout is based on 12-columns Bootstrap grid system. Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be immediate children of rows.
Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.
more information you can find here: http://getbootstrap.com/css/#grid
All templates are divided into content sections. There are two types od sections:
default content section - it has max witdth 1170px (it can be modify in less files)
<section class="smartlib-content-section">
----
</section>
fluid sections - it covers 100% width of the screen
<section class="smartlib-full-width-section">
----
</section>
You can build content by adding and removing these sections. Most of the sections are build in the following way:
<section class="smartlib-content-section smartlib-light-section smartlib-full-width-section smartlib-animate-object animated fadeInUp">
<div class="container">
<!-- Features Section -->
<header class="smartlib-section-header text-center">
<h2>Heading</h2>
</header>
<div class="row">
<div class="col-md-12">
</div>
</div>
<!-- /.row -->
</div>
</section>
Single page template is divided into 3 Areas
top navbar - can be found in between the commented tags - !-- Navigation --
main content area - can be found in between the commented tags - !-- Page Content --
footer
<footer>
</footer>
For advanced editing the theme includes the LESS files to generate the Bootstrap CSS as well as Grunt tasks to speed up development. If you’re familiar with how to use these tools you can make use of them. If not, there are some basic instructions below about setup and usage.
To use Grunt and LESS you’ll need to have Node installed. Below are the basic steps for using the Grunt and LESS files to update the core Bootstrap CSS files.
Install dependencies: npm install
Make sure grunt is available at the command prompt.
You can install grunt-cli as described on the Grunt Getting Started page.
Modify one of the LESS files: ‘bootframe/dev/less/‘.
You should avoid editing files in the ‘bootframe/dev/less/bootstrap/‘ folder.
In the command prompt, type grunt or grunt watch to build the CSS for a theme.
Use the grunt watch command to watch the folders and automatically build the CSS each time a LESS file is saved.
Grunt Files
Grunt is a task-based command line build tool for automating repetitive tasks like minification, compilation, unit testing, linting, etc. The included Grunt file will create your CSS files and minify them across both the HTML and Runway Child theme. The Grunt file will not update the Standalone version of the theme.
BootFrame has support for Grunt so you can create your custom template very easily automated. There Gruntfile.coffee file inside template root directory.
dev/bootstrap-variables.less : the variables file from Bootstrap. This is where a large amount of the customization to Bootstrap’s existing styles takes place.
dev/project-variables.less: main project variables. In this file you can customize the color of your site’s elements, the default spacing, fonts which are not included in bootstrap-variables.less file
dev/general.less - main template stylesheet
dev/project-style.less - main project stylesheet. This is the file where you should place your css code
Learn more about setting up and installing Grunt.