Nasio Themes

<p>Custom Gutenberg Blocks for the WordPress Block editor. Easy to use, lightweight and super useful. Post slider, Content slider, Gallery slider, Tabs, Accordeon, Chart, Icon and Countdown blocks. Features a <a href="https://nasio-blocks.nasiothemes.com/nasio-blocks-documentation/#template-library" rel="nofollow ugc">template library</a> with predefined demo content (block patterns) to speed up the page creation process. No unnecessary code to slow you down – you can choose which blocks to activate for maximum performance.</p>
<h3>Features</h3>
<h4><a href="https://nasio-blocks.nasiothemes.com/post-slider/" rel="nofollow ugc">Post Slider Block</a></h4>
<p>Display your latest posts in a beautiful responsive slider using <a href="https://swiperjs.com" rel="nofollow ugc">Swiper.js</a> – lightweight and fully responsive vanilla JS slider with RTL support.</p>
<ul>
<li>Choose between Fullwidth Slider (single column) or Carousel (multi-column slider) display mode</li>
<li>Fully customizable settings for number of posts, category filtering and flexible display options</li>
<li>Responsive design that works on all devices</li>
<li>Support for featured images, excerpts, post metadata and more</li>
</ul>
<h4><a href="https://nasio-blocks.nasiothemes.com/content-slider/" rel="nofollow ugc">Content Slider Block</a></h4>
<p>Create beautiful responsive sliders using the WordPress <a href="https://wordpress.org/documentation/article/cover-block/" rel="ugc">Cover block</a> and Swiper.js.</p>
<ul>
<li>Choose between Fullwidth Slider or Carousel (multi-column slider) display mode</li>
<li>Fully customizable settings for slider behavior</li>
<li>Ability to add, delete and edit slides through the familiar Block Editor interface</li>
<li>Responsive design that works on all devices</li>
</ul>
<h4><a href="https://nasio-blocks.nasiothemes.com/gallery-slider/" rel="nofollow ugc">Gallery Slider Block</a></h4>
<p>Display galleries in beautiful multi-column carousels.</p>
<ul>
<li>Fully customizable settings for slider behavior</li>
<li>Ability to add a gallery using the familiar Block Editor interface</li>
<li>Ability to set custom image sizes</li>
<li>Responsive design that works on all devices</li>
</ul>
<h4><a href="https://nasio-blocks.nasiothemes.com/svg-icon/" rel="nofollow ugc">Icon Block</a></h4>
<p>Display svg icons from the WordPress <a href="https://developer.wordpress.org/block-editor/reference-guides/packages/packages-icons/" rel="nofollow ugc">Icons Library</a> or upload custom svg icons. Allow users to add beautiful and scalable svg icons on their website without excessive font libraries – only the specified icons are loaded on the frontend.</p>
<ul>
<li>Different font size, color and background color</li>
<li>Different spacing options</li>
<li>Option to add custom svg icons</li>
</ul>
<h4><a href="https://nasio-blocks.nasiothemes.com/accordeon/" rel="nofollow ugc">Accordeon Block</a></h4>
<p>Display FAQ-style section in the form of expandable/collabsible dropdowns.</p>
<ul>
<li>Show a default Open Item</li>
<li>Change header background and text color</li>
</ul>
<h4><a href="https://nasio-blocks.nasiothemes.com/tabs/" rel="nofollow ugc">Tabs Block</a></h4>
<p>Create organized content sections with tabbed navigation.</p>
<ul>
<li>Customizable tab colors and styling</li>
<li>Set default active tab</li>
<li>Responsive design that stacks tabs vertically on mobile</li>
<li>Easy content management through the Block Editor interface</li>
</ul>
<h4><a href="https://nasio-blocks.nasiothemes.com/chart/" rel="nofollow ugc">Chart Block</a></h4>
<p>Display data in beautiful, interactive charts using <a href="https://www.chartjs.org/" rel="nofollow ugc">Chart.js</a>.</p>
<ul>
<li>Support for multiple chart types: Pie, Doughnut, Bar, and Line charts</li>
<li>Fully customizable colors for chart segments and datasets</li>
<li>Interactive legends with customizable positioning</li>
<li>Data labels with custom units and threshold controls</li>
<li>Multiple datasets support</li>
</ul>
<h4><a href="https://nasio-blocks.nasiothemes.com/countdown/" rel="nofollow ugc">Countdown Block</a></h4>
<p>Create engaging countdown timers to build anticipation for sales, events, or product launches.</p>
<ul>
<li>Set custom target date and time for your countdown</li>
<li>Customizable time unit labels (Days, Hours, Minutes, Seconds)</li>
<li>Multiple display styles: Default (stacked) and Inline layout options</li>
<li>Multiple style options for countdown units</li>
<li>Unit delimiter options (e.g., “:”, “-“, ” | “) between time units</li>
</ul>
<h4>Template Library</h4>
<p>List of Block patterns (ready to use demo content) created with the Block Editor.</p>


Nasio Blocks


Since this plugin was published I started using it right away and it’s absolutely perfect. Every block loads instantly and works exactly as advertised—no glitches or bloat. The Post Slider and Gallery Slider blocks were a breeze to configure and look stunning right out of the box. The Accordion block handled FAQs flawlessly, and the Icon block’s custom icon swapping is super intuitive. I also love the flexible Buttons and Ads blocks for creating clear CTAs and ad placements. Everything is well-documented, performant, and truly lightweight. Highly recommend!


Powerful, Lightweight Block Library

Small collection of essential blocks for the WordPress Block editor

mark l chaves

<p>This plugin allows you to use of the popular <a href="https://swiperjs.com/" rel="nofollow ugc">Swiper.js</a> library in WordPress.</p>
<p>This is a minimalist plugin that is for displaying responsive cards in a slide.</p>
<ul>
<li>On a large screen device, the slide will show a horizontal card (image on the left and text on the right). </li>
<li>On a small device, the slide becomes a stacked card with the image on the top and text on the bottom.</li>
</ul>
<p>See the screengrabs below to get a visual or visit the <a href="https://streetphotography.blog/ashtabula-swiper-slider/" rel="nofollow ugc">live demo</a>.</p>
<p><strong>Note</strong>: You should be comfortable with HTML and CSS to use this plugin.</p>
<h3>Usage</h3>
<ol>
<li>Use the <a href="https://github.com/marklchaves/ashtabula/blob/master/ashtabula-demo.html" rel="nofollow ugc">demo HTML file</a> as a starter template. Add this HTML to a HTML or code block/element to your page or post.</li>
<li>To add the images, use the example CSS below as a template. Add the CSS to your <strong>Appearance</strong> > <strong>Customize</strong> > <strong>Additional CSS</strong> or your child theme’s <code>style.css</code> file.</li>
</ol>
<p>CSS example to specify the background image for the responsive card in a slide.</p>
<pre><code>/**
 * Swiper Slider Plugin Custom Styles
 */

#my-swiper-slide-1 {
 background-image: url(mybgimg-1.png);
}
#my-swiper-slide-2 {
 background-image: url(mybgimg-2.png);
}
#my-swiper-slide-3 {
 background-image: url(mybgimg-3.png);
}
</code></pre>
<h3>Credits</h3>
<p>Powered by <a href="https://swiperjs.com/" rel="nofollow ugc">Swiper.js</a>.</p>


Ashtabula

Ashtabula - A Swiper Slider Plugin for WordPress

Nasio Blocks vs Ashtabula