Project Settings

The Project settings let you control various global styling aspects of your Blocs project.

Accessing the Project Settings

You can access the main Project settings by navigating to File > Project settings from the apps main menu.

project-settings

General Settings

Site Name

The site name value is used for social cards and for the theme name when creating a WordPress theme.

Web Address

The web address is the URL that you plan to host your site at. Populating this field is important if you want a site map generated when you export your site.

Framework

The framework dropdown menu lets you select which version of the Bootstrap framework the site will use. Please note: Projects cannot be reverted back, once they are migrated to a newer version of the framework.

Home Page

By default Blocs uses the first page in your project as the sites homepage. Using this drop down menu enables you to set the homepage to any of the pages in your project.

Language

By default Blocs doesn’t set a sites language attribute. The language drop down menu lets you set the default language attribute for all new pages. Please note, this option does not update the language attribute for currently created pages.

Beginner tip

This option does not automatically translate a sites content to another language, it simply tells the browser that the sites content is written in a particular language.

New Page Type

By default Blocs creates all new pages with the .html suffix. This option lets you set the default new page file type, to one of the supported page file formats.

CMS Settings

Blocs has integrated support for a range of premium and open source third party content management systems, allowing you to easily create powerful, dynamic websites, that can be updated and contributed to outside of the Blocs application. This drop down control lets you set a target CMS for the project. You can read more about the CMS’s Blocs supports here.

Background Color

By default sites created within Blocs have a standard white background, this colour well enables you to set a custom global background color for your entire site.

Width

The width option lets you set the maximum width that your site will stretch to fit. By default it’s set to 1170px, this means once the width of the browser it’s being viewed in is 1170px wide your website will no longer grow in width to fill the available space. Instead, it will remain at 1170px wide, but horizontally centre in the middle of the available space, within the browser window.

This value can be set to anything, for example: if you want your site to fill the browser edge to edge no mater what size the browser window is, you would change this value to 100%;

Body Classes

Classes entered into this field are added to the body tag of every page when the site is previewed or exported. Multiple classes should be separated with spaces.

The active class is the custom class that will be applied to all navigation links that match the current browser URL. This class is applied to the current active page link in the main site navigation. You can read more about the active state class and how to use it here.

Embed Project Assets

Blocs allows you to embed all assets that are used in your site, into the main Blocs project file. The main benefit of doing this is it makes the process of working across multiple Macs a lot more streamlined, as everything used in the project is housed in a single file. The major downside to embedding assets in a project file is, future changes made to those assets will not be synced and reflected within Blocs.

Global Typography Settings

project-settings-text
Using the global text options, it’s possible to control how text looks for all text objects throughout your entire project. The text in web pages is usually wrapped within HTML tags such as headers and paragraphs. These global options let you set the basic style values such as typeface, font size and colour for these tags. More advanced users can also make more detailed style adjustments using the Class Manager and Class Editor that is available with Blocs.

Global Button Settings

project-settings-buttons
The global button settings let you set the overall appearance of newly generated buttons within Blocs, whether they are dropped in as Brics or added as part of a pre-made Bloc. You can control the style, size and corner type of any button generated within your project.

Remember, the appearance of a button can also be customised per button, using the sidebar button options.

Site Images

project-settings-buttons

Adding a Favicon

To add a favicon to your site, click on the small favicon thumbnail and then select the artwork you would like to use as your site’s favicon. For best results use a .png sized at 16x16px.

The image file that is set here will be used as the site’s logo throughout the project. For example, if a new navigation Bloc is added that contains a logo, this image will be used for the logo within that Bloc, or, if the data feed of an image is set to logo, this image will be displayed.

Image Protection

When enabled, this option will add basic image protection that will prevent all images from being right clicked or dragged when viewed in a browser.

Analytics

project-settings-analytics
Analytic web services let you track user statistics for your site. These 3rd party services generally provide a small code snippet that must be added to any of the website pages you wish to track activity on. Placing the code snippet in this text area will add it to all pages within your project.

Project Attachments


Project attachments are a little like page attachments with the major difference being these attachments are added to the header sections of every page in a project. As well as adding JS and CSS files, you can also add HTML files, PHP files or even entire directories full of files that you would like included in the final export of your project.

Beginner tip

Attached JS files are placed in the export /js directory, CSS files are placed in the export /css directory and PHP files are placed in the export /includes directory. All JS and CSS files are added to the head of every page in a project.

Recapture

Google ReCapture enables users to protect the forms on their sites from spam. The ReCapture setup requires a Google recapture account and a site and security key, which need to be inputted into the relevant fields.

You can read all about getting your ReCapture site and security key from Google here and how to add ReCapture spam protection to the forms in your Blocs site here.

Site Info


These values are written into the style.css file for static and WordPress theme exports. When creating a WordPress theme these details are used to populate the theme meta data in the WordPress theme selector.

Accounts

Social

Twitter

This value is used for Twitter social cards.

Facebook

This value is used for Facebook social cards.

Facebook Admin

This value is used with fb:admins Facebook social card property.

Facebook App ID

This value is used with fb:app_id Facebook social card property.

Disqus Name

If you want to enable visitors to your site to leave comments on pages, we recommend using the 3rd party service Disqus. You can read more about setting up Disqus here.

Ecommerce

Stripe Publish Key

This value is required for Stripe purchase buttons (Get Stripe key).

Paddle Vendor ID

This value is required for Paddle purchase buttons (Get Paddle ID).

Ecwid Store ID

This value is required for Ecwid purchase buttons (Get Ecwid ID).

Snipcart API ID

This value is required for Snipcart purchase buttons (Get Snipcart ID).

Export Settings

The export settings are the same as the settings found on the advanced export sheet. These settings give you access to various options that can be used to help improve the performance of your site once it’s hosted.

Minify

Minification (also minimisation or minify), is the process of removing all unnecessary characters from source code without changing its functionality. The major benefit of using minification, is it can greatly improve the loading time of a website.

Lazy Loading

Normally when a user opens a webpage, the entire page’s contents are downloaded and rendered in a single go. While this allows the browser to cache the web page, there’s no guarantee that the user will actually view all of the downloaded content.

Instead of bulk loading all of the content when the page is accessed, content can be loaded when the user accesses a part of the page that requires it. With lazy loading, pages are created with placeholder content which is only replaced with actual content when the user needs it.

When enabled Lazy load can help to improve the loading speed of a media rich web page.

Clean Page URL’s

By default, the internal URL structure of sites created within Blocs includes the full file name, for example:

blocsapp.com/press.html

Enabling clean URL’s will remove the file extension from internal page URL’s within your site, giving them a cleaner appearance, for example:

blocsapp.com/press/

Although it is not essential, using clean URL’s can help to improve SEO.

Sitemap

This checkbox makes it possible to disable automatic sitemap generation.

Cache Bust CSS and JS

By default web browsers are designed to cache important parts of web pages. The reason for this is to help speed up load times. Cached resources are stored on the visitor’s computer, which means the next time they visit a site, these resources load faster, as they are stored locally. However, there are times when this can be problematic, for example. If you make big visual styling changes to your site and re-upload to your server, anyone visiting your site with a cached version of the style sheet, will still see the old visual styling, which may cause your site to appear broken. When enabled, cache busting adds unique suffixes to the file paths of the CSS and JS files used within your site. Once your new site is hosted, these suffixes force the visitor’s browser to re-load the code from the server and create a new cached version of the resource.

Include jQuery

If your project has its framework set to Bootstrap 5, this additional option will appear in the export settings, enabling you to include the jQuery library with your Bootstrap 5 site when it’s exported.

Export Location

This option lets you set a dedicated export location for a project. This helps to speed up the development workflow as it prevents having to reselect an export location every-time the project is exported.

Misc

The miscellaneous settings give you access to a range of other features you may wish to integrate into your site.

Disable Mobile Animation

This option lets you disable animation on the SM and XS breakpoints.

Pre-Loader Settings

To improve the presentation of your website, Blocs automatically integrates a small preloading animation. This animation is displayed in the visitor’s browser until the site is fully loaded. Once your site is fully loaded, the pre-loader will automatically disappear and the webpage will be shown.

On all new Blocs projects, asset embedding is enabled by default, however, it can also be disabled. When embedding is enabled, all newly added assets will be embedded into the project file, when embedding is disabled, Blocs will simply link to the original asset files.

Beginner tip

If you would like to use the embedded asset workflow on a Blocs project that was previously set to link to assets, you can use the bulk embed asset feature to do this.

WordPress


The WordPress options let you control various aspects of how a theme will look and function once it is exported and installed into WordPress.

Preview Thumb

This is the thumbnail used in the WordPress theme selection area, the recommended size is 1200 x 900. If no thumb image is set, Blocs will automatically generate one during export.

WordPress Admin Bar

This option lets you control whether the WordPress admin bar is visible on the front end of the website, when a user is logged in.

This option enables the featured image controls for pages in the WordPress back end.

Logo Customiser Controls

When enabled, this option will allow users to change the logo image found in a navigation Bric, with a custom one, using the WordPress customiser options found in the WordPress admin.

Auto Page Generation

This option will automatically generate all of the pages from your Blocs site in the WordPress back end, when the theme is first activated. (Please note to re-run this function the theme will need to be disabled and then re-activated).

Updated on 16th June 2021

Was this article helpful?

Related Articles