Nasio Blocks Documentation

Welcome to the official documentation page for the Nasio Blocks plugin.

Table of Contents

Installation

To be able to use the plugin, you need to have a self-hosted WordPress installation, running php >= 7.2 and WordPress >=6.7. For hosting, we recommend you to use the service from our partners HostArmada but any php/mysql hosting provider should also work. It is recommended that you use php 7.4 or above and the latest version of WordPress.

In your admin panel, go to Plugins and click the ‘Add New Plugin’ button.
Type in Nasio Blocks in the search form and press the ‘Enter’ key on your keyboard. If you have purchased the pro version, you need to upload the .zip file provided by email. Go to Plugins -> Add New Plugin and then click “Upload Plugin” button to install the Nasio Blocks Pro plugin.
Click on the ‘Activate’ button to use your new plugin right away. If you have purchased the pro version, you need to activate the Nasio Blocks Pro plugin You would also need to add the license key, which you have received by email.

Configuration

Navigate to Settings > Nasio Blocks in your admin panel to configure the plugin options. You will see a screen that allows you to enable or disable specific blocks:

The plugin is very lightweight and the site will run fast with all blocks in place, however, if you do not plan to use a specific block, you can disable it for maximum efficiency.

Template Library

The template library is an extremely powerful feature of this plugin that lets you add demo content to your site with a single click. In technical terms, the template library is a collection of Block patterns – a unique mixture of standard Gutenberg Blocks as well as the custom Gutenberg Blocks from Nasio Blocks plugin. With the help of the template library, you can kick-start your website with just a few clicks and without any technical knowledge. Just create a new page from your WordPress admin dashboard (page, add new page) and click on “Template Library” in the top left. You will be presented with a screen that lists all the patterns that the Nasio Blocks plugin registers. Just click on the pattern you want and it will appear on the page.

You can then customize the content the way you want it.

Nasio blocks

Nasio Blocks plugin registers 7 additional Gutenberg blocks – Post slider, Content Slider, Gallery slider, Tabs, Accordion, Chart, and Icon blocks. These are advanced Gutenberg blocks that work together with the default Gutenberg blocks provided with WordPress and aim to enrich the Block editor so you don’t need to use any additional page builders. However, if you really need a page builder like Elementor and it makes your life easier, it is still possible to use it in combination with the Nasio Blocks plugin. We will now explore the options of each of the blocks provided by the plugin and learn how to customize them.

Post Slider block

Display your blog posts in beautiful, fully-responsive carousel or a slider. To use the Post slider block, as well as with all other Gutenberg Blocks, you need to access the WordPress Block editor (also called Gutenberg). Both terms are interchangeable but for simplicity we are going to refer to it as the Block editor in this documentation. From the WordPress admin dashboard, go to Pages, and click on “Add Page” or click on Pages, hover on an existing page and click on “Edit”. Now that you are on the Block editor screen, simply click on the plus icon to insert a block and start creating content. To use the post slider block, simply type “post slider” in the search bar of the block inserter popup and click on it.

By default, the post slider will get your last 6 blog posts and display them in a 3-column layout but you can configure it easily to change the number of columns and the number of posts to loop through. To use the block, make sure you have some blog posts already created. You can check that by clicking on Posts in the WordPress admin dashboard on the left hand side of the screen. The customization options for the Post slider block can be found in the block settings tab on the right hand side of the screen. If for some reason you are not seeing them, make sure that the settings panel has been switched on.

The block settings are divided into three categories within a tab called “Settings”: carousel settings, post settings and display settings. There is also an additional tab called “Styles” that you can use to customize the colors of the slider elements. Here is a list with all the available customization options:

Settings

Carousel settings

Display Mode – choose between slider (one-column layout per view) or carousel (multi-column layout per view)
Slides Per View – Min 1, Max 5, Default 3. Choose how many slides per view should be displayed.
Slides Per Group – The number of slides to advance when going through the slides. In 90% of the cases it is the same as the slides per View.
Space Between Slides (px) – Min 0, Max 50px, Default 20px.
Transition Effect – Only when Slider display mode is selected. Choose a transition effect when sliding. Effects: slide, fade ken burns, cell split, cube, coverflow, flip, creative, cards.
Show Arrows – A toggle to switch the slider arrows (slider navigation) on or off.
Arrow Offset (px) – Choose how to position the arrows relative to the slider. The option appears only when Show Arrows switch is on. Negative values move the arrows outside of the slide.
Show Dots -A toggle to switch the slider dots (slider pagination) on or off.
Dots Position – Choose how to position the dots relative to the slider. The option appears only when Show Dots switch is on. Options: Bottom inside, Bottom outside (default), Left, Right.
Drag Slides – drag the slides with the left click of your mouse.
Slide on Scrollwheel – premium feature. Slide while scrolling down the page.
Loop Carousel – Allow the slider to start from the beginning after it finishes.
Autoplay – Let the slider advance automatically.
Autoplay Delay (ms) Min 1,000, Max 10,000, Default 3,000. The option appears only when the Autoplay switch is on.

Post settings

Post Type – premium feature. Choose the source for the slides. Can be posts or any custom post type registered on the site, e.g. Projects, Books or Movies.
Number of Posts – Min 2, Max 20, Default 6.
Category – a dropdown with all post categories. It allows you to filter the content of your post slider to display only specific blog posts. If you have selected a custom post type in the Post Type setting and it has custom taxonomies assigned to it, you will see a dropdown with the items from that taxonomy.
Include Sticky Post – you can add a sticky post to your slider.

Display Settings

Show Post Featured Image
Show Post Fallback Image
Show Post Excerpt
Show Post Author
Show Post Date

Styles

Arrows Colors

Arrows Color
Arrows Background color

Dots Colors

Dots color
Active Dot color

Content Slider block

Create content in beautiful, fully-responsive carousel or a slider. To use the Content slider block, you need to open the Block editor. Navigate to the WordPress admin dashboard, go to Pages, and click on “Add Page” or click on Pages, hover on an existing page and click on “Edit”. Now that you are on the Block editor screen, simply click on the plus icon to insert a block, type “content slider” in the search bar of the block inserter popup and click on it.

By default, the Content slider will consist of 6 slides in a 3-column layout per view but you can configure it easily to change the number of slides to loop through. To do that, select the Content slider block, click on document overview icon in the top left, hover on the last slide, select the three dots on the right and click on duplicate.

Content slider block - adding a slide — Picture 6: Adding slide to Content slider block via the Document overview.

You can use the above-mentioned approach to delete or edit a slide or you can simply click directly on the slide you want to delete or edit. To add background image to a slide, select the slide and click on “Add media”.

Content slider adding media — Picture 7: Adding image to Content slider block.

To add content to the slide, e.g. text or buttons, click on the plus icon and pick a Gutenberg block of choice.

The block settings are divided into two tabs called Settings and Styles. It is important to note that there are different settings and styles options if you select the the Cover block within each slide or the whole Content slider block. The options of the Cover block are core Gutenberg functionality. For refreshment on it, check the Cover block documentation. Our focus here are the options for the Content slider block, which are specific for the Nasio Blocks plugin.