Big Dot 2.0 WordPress Theme

Big Dot 2.0 Free WordPress theme

Free Minimalist WordPress Template

Big Dot 2.0 is a free responsive WordPress theme built on Big Dot Framework 2.0. It’s clean, mobile friendly and highly optimised. The lightweight WordPress template is packed full of features, such as an accordion, pricing table, gallery and custom map.

The theme supports WooCommerce, as well as thousands of other existing WordPress plugins.

You can customise the appearance of the theme from within the WordPress dashboard and pages can be built with simple shortcodes.

The template is a fraction of the size of many WordPress themes, making for a lightning fast loading seed.

Big Dot 2.0 is a fully open source theme, which means the possibilities for customisation are limitless, and you are free to modify and sell the theme!

Live Preview Download

Clean, Responsive WordPress Theme

The free Big Dot 2.0 WordPress theme was built with simplicity in mind. The theme looks great on conventional desktop monitors and it will change and adapt to look just as good on tablet and mobile devices too.

Big Dot Responsive WordPress theme

WooCommerce Support

The theme offers full WooCommerce support, so you can have a working online shop in a matter of minutes, right out of the box.

WooCommerce Support

Wide Range of Plugins

Big Dot 2.0 is built for WordPress and is compatible with thousands of existing plugins that are available for free on the WordPress repository.

Widget Areas

The Big Dot 2.0 WordPress theme has widget areas for you to add custom content and plugins to the two footer columns. It also has specific sidebars for both your blog and WooCommcerce (optional).

Simple Admin Panel

In the WordPress admin area, you can add your site logo, tagline, change the fonts and the social links.

Google PageSpeed Optimisation

The Big Dot WordPress theme is built using Big Dot Framework 2.0, which scores 100/100 on Google PageSeed Insights, and all of the pure HTML and CSS features from the framework are available to use on WordPress too.

Powerful Features

This free WordPress theme has a number of useful features, many of which can be used with simple shortcodes. They include:

  • Simple customisation admin area
  • Responsive buttons (call to actions)
  • Fluid column layout built with shortcodes
  • Styled lists
  • Gradient CSS photo / media frame
  • Responsive video frame
  • Pure HTML & CSS gallery
  • Responsive pricing table
  • Responsive shortcode accordion
  • Woo Commerce Support
  • Custom Map

Screenshots

  • Big Dot Framework Screenshot
    Homepage
  • Big Dot Framework Screenshot
    Pricing Table
  • Big Dot Framework Screenshot
    FAQ Accordion
  • Big Dot Framework Screenshot
    Features
  • Big Dot Framework Screenshot
    Gallery
  • Big Dot Framework Screenshot
    Custom Map

Simple Shortcode Integration

Pages can be put together using simple shortcodes, and a number of the WordPress theme’s features, such as the buttons and accordions, can be implemented with shortcodes too.

The best way to see this in action is to import the demo content that is includes with the free minimalist WordPress theme.

GitHub

Unlimited Possibilities

Although Big Dot 2.0 WordPress theme is suitable for beginners, it’s open source and has enormous potential for developers to expand and change the design.

The WordPress theme is completely free, so you can do whatever you like with it, even sell it!

 

 

Documentation

Introduction

Big Dot WordPress 2.0 has been designed to be fast, user friendly and highly customisable.
If you hadn’t done so already, download BD2.0 using the button below. You may also want to download the pure HTML & CSS version, as a good way to test customisation offline in a non-WordPress environment.

Download

Installation

  1. In the WordPress dashboard, go to ‘Appearance > Themes’ and click ‘Add New’ then ‘Upload Theme’ then ‘Chose File’
  2. Select the file big-dot-2-wordpress.zip, click ‘Open’ then ‘Install Now’
  3. Once installed, click ‘Activate’

Install Child Theme

A child themes allows you to make changes to the style.css and functions.php without them being overwritten if the theme is updated. Any other files from the main theme can be copied to here and modified too. More information on child themes.

  1. After installing the main theme, follow the same steps to install and activate the ‘big-dot-2-child.zip’ file.

Import Demo Content

It’s a good idea to start by importing the demo content.

  1. In the WordPress dashboard go to ‘Tools > Import’
  2. Select ‘WordPress’ from the bottom of the list and click ‘Install Now’
  3. Once installed, click ‘Activate Plugin & Run Importer’
  4. Click ‘Chose file’ and select ‘bigdot-demo-content.xml’ from the downloaded theme
  5. Click ‘Upload file and import’
  6. If you want to change the author of the blog posts, type in the name of a new author or select and existing author from the dropdown menu (optional)
  7. Check the ‘Download and import file attachments’ box and click ‘Submit’
  8. You may see some errors relating to post and product types. You can ignore these.

Settings

In the WordPress dashboard click on ‘Settings’

General

Here you can change the name of your site. The ‘Tagline’ will appear in the top bar of each page.

Reading

  • Under ‘Front page displays’ click the ‘A static page (select below)’ radio button
  • From the ‘Front page:’ dropdown menu, select ‘Home’
  • From the ‘posts page:’ dropdown menu, select ‘Blog’

Permalinks

Select the ‘Post name’ radio button then click ‘Save Changes’ (optional)

Site Logo

You can upload a new site logo by going to ‘Appearance > Customize > Site Identity’. It is recommended that you use a similar sized logo to the current one. Larger/smaller logos ay require a change to the style.css file.

Site Icon / Favicon

This can be changed by going to ‘Appearance > Customize > Site Identity’ and uploading a new file (recommended size 512x512px).

Tagline

This is pulled from the tagline for your site. You can change it by going to Appearance > Customize > Site Identity

Advanced Tip: The html for the tagline can be changed in the header.php file.

Social Media Icons

These are the four icons inside the header and footer of the site. As standard they represent Google+, Twitter, Facebook and LinkedIn. To change the URL for the icons, go to ‘Social Icons’ in the admin panel.

The social icons on the contact page can be changed by editing the page’s content.

Advanced Tip: The icons themselves can be changed or added to in the header.php file.

Widget Areas

The sidebar for the blog, WooCommerce (optional) and the two footer columns can be edited under ‘Appearance > Widgets’. You can add text and a wide range of plugins to these areas.

More information on Widgets.

Menus

Menus can be editing under ‘Appearance > Menus’.

Images

  1. To make images work responsively, give new images you insert the “normalimage” class. You can do this in the WordPress visual editor:
  2. Select image and clicking the pencil ‘edit’ icon
  3. Click ‘Advanced Options’
  4. Type ‘normalimage’ in the ‘Image CSS Class’ box

Advanced Tip: You can also add the ‘normalimage’ class in the WordPress text editor. Example: <img class="normalimage" src=http://mydomain/images/image.jpg>

Shortcodes

The structure of the site and the majority of features can be built using shortcodes.

Layout / Containers

You can lay out the content by enclosing it in the following shortcodes, which you can copy and paste into the visual or text editor in WordPress.

[fullwidth]
A fluid full width container
[/fullwidth]

[halfwidthleft]
A fluid left floating half width container, which becomes full width on smaller screens.
[/halfwidthleft]

[halfwidthright]
A fluid left floating half width container, which becomes full width on smaller screens.
[/halfwidthright]

[quarterwidthleft]
A fluid left floating half width container, which becomes half and full width on smaller screens.
[/quarterwidthleft]

[quarterwidthleft]
A fluid left floating half width container, which becomes half and full width on smaller screens.
[/quarterwidthleft]

[blogmain]
A fluid left floating 2/3 width container, which becomes full width on small screens. Used on the blog page, but works on normal pages too.
[/blogmain]

[blogsidebar]
A fluid right floating 1/3 width container, which becomes full width on small screens. Used on the blog page, but works on normal pages too.
[/blogsidebar]

Design Features

Most of the design features can also be activated using shortcodes.

Image Frame

[imageframe]
Your Image Here
[/imageframe]

Photo shadow

Large Icon

[Icon]
Your Image Here
[/icon]

Star

Accordion

[accordion]
[accsection acc_heading=”Accordion Heading Here“]
The content of the first accordion
[/accsection]
[accsection acc_heading=”Another Accordion Heading Here“]
The content of the second accordion
[/accsection]
[/accordion]

Responsive Video Frame

This frame can be used to contain video embeds, or anything with a 16:9 aspect ratio.

[videoframe]
<iframe style=”z-index: 0;” src=”https://www.youtube.com/embed/x8R2H51Wphk” width=”300″ height=”150″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>
[/videoframe]

 

Call to Action Button (CTA)

CTA

Button

Bulleted Lists

Bulleted lists can look like this:
<ul class=”bdcbullet”>
<li>List Item One</li>
<li>List Item Two</li>
<li>List Item Three</li>
</ul>
To achieve this, created a bulleted list, then in the WordPress text editor change <ul> to <ul class=”bdcbullet”>

Advanced Tip: To change the little green circle, create your own custom bullet, then change the link in the style.css file for the class ‘ul.bdcbullet li’

Heading

Headings can be changed by selecting text and choosing a heading inside the WordPress visual editor, or by adding <h> tags inside the WordPress text editor. For example <h1>Heading One</h1>, or <h2>Heading Two<h2>

Advanced Tip: If the heading (or anything else) is the first thing inside a full width container, you may need to add a margin at the top. You can do this by giving it this class <h1 class=”heading1top”>Example</h1> or using the shortcode [heading1top]Example[/heading1top]

Pricing Table

There is no shortcodes for this. You can edit the HTML on the ‘Responsive Pricing Table’ page and edit the CSS in the style.css file.

Advanced Tip: The pricing table works best if columns are used in multiples of 2.

Gallery

You can download the pure HTML and CSS gallery from the non-WordPress version of the theme and use that, but since we’re using WordPress, it’s easier to use an existing plugin for your gallery. We’ve used Essential Grid but there are a number of free WordPress gallery plugins you could use too.

Shop (WooCommerce)

If you want a shop on your site, you can download WooCommerce for free. The sidebar is already setup under ‘Widgets’.

Map

  • To edit the map, go to the theme directory and open ‘/map/index.html’ in a text editor
  • Line 16 is the longitude and latitude of the map marker.
  • Line 17 is the longitude and latitude of the centre of the map.
  • You can use a site like latlong.net to find the correct long and lat for your own map.
  • Using this link below you can restyle the map, pasting the new styles on line 25.

Contact Form

We’ve used the plugin Fast Secure Contact Form (FS Contact Form) on the contact page, although can also use any contact form plugin. If you do install FS Contact Form, you can import the styles used on the example template:

    1. Go to ‘Plugins > FS Contact Form > Tools’
    2. Under the ‘Restore Settings’ heading, click ‘Choose file’ and select the’ fs-settings.txt’ file
    3. Select your contact form from the dropdown menu and click ‘Restore Settings’

Google Fonts

As standard, the free Google fonts ‘Open Sans’ is used on the site. The easiest way to change this is to download the plugin Easy Google Fonts, which will then let you change any of the fonts by going to ‘Appearance > Customise > Typography’.

Support

We offer limited free support for this WordPress theme to users that keep our link in the footer. To request support or features, email will@thebig.co