The plugin

Smart Slider 3 is a feature packed free WordPress slideshow plugin which can help you create mobile ready and search engine optimized slideshows. It offers pre-built slider templates, dynamic slides, page builder support, font management and more.

Installation

Smart Slider 3 is available in the WordPress plugin directory. To install it navigate to Plugins > Add New, search for Smart slider and click the install button. Once the installation finishes click activate to enable it.

After activation the plugin’s options can be accessed under the Smart Slider tab in your WordPress Dashboard.

The welcome tab offers a short video to get you started and also gives you access to the plugin’s global settings page.

From the plugin’s settings page you can control various options, such as automatic update check, enable the enhanced privacy mode for YouTube embeds, customize the mobile breakpoints, change the fonts used and modify the default styling for layer headings, text, buttons and more.

Once you are done with the settings you can head back to the dashboard and get started by clicking the new project button.

Create your slider

You will be prompted to select between starting a slider from scratch or picking one of the pre-built templates as a base for your slider. Let’s create an entirely new slider.

The first screen for your new project will allow you to select the type of project and slider you want to built. You can also name the slider and set its size and layout. Click create to get started.

It’s time to add some images to our slider. Click the add slide button and pick image as the slide source. If you are looking to create dynamic sliders or ones based on posts you can do so from here.

Next you will use the familiar interface of the WordPress media manager to add your images.

After the images are added you can go through the slider’s settings to tailor it to your specific needs.

Using the slider’s settings you can customize the slider’s size, controls, animations, toggle the autoplay and adjust its timings, optimize images by compressing them and many more. When you have customized the slider according to your needs you are ready to save and use it.

Slider templates

If you’d like to utilize a pre-built template you can pick “Start with a template” in the new project pop-up. You will be presented with a selection of ready made slider layouts, some of which are free. Pick your favorite and use it as a starting point. The rest of the configuration is the same as if you were starting from scratch, however if you are using a template most likely you won’t have to mess around with the slider’s settings since these will be preset by the template’s creators.

The Smart Slider 3 block

Adding the slider you’ve just created in the content is pretty easy with the help of the bundled custom block.

To utilize it search for slider or smart slider in the block selector and click on the Smart Slider 3 block.

Once the block is added click the select slider button and select your slider from the resulting pop-up.

Click insert to add the slider in the content.

That’s it, the slider was added to your content. Finish up your post, publish it and let’s check it out!

The slider

Just like that we have created a new slideshow from scratch and added it to our content.

Wrapping up

Core blocks do not offer any way to create and use a slideshow yet so third party plugins with their custom blocks come in handy in these cases by allowing us to create beautiful and captivating slideshows for our content quickly and easily.

The post How to create a slider within the block editor with Smart Slider 3 appeared first on CSSIgniter.

The plugin

MetaSlider is a free WordPress plugin which allows you to easily create responsive and SEO ready slideshows in a matter of minutes. The plugin offers a variety of customization options like transition effect, speed and more through a simple and easy to use interface, it also comes bundled width some pre-built themes which will give a more professional appearance to your slideshows.

Installation

MetaSlider is available in the WordPress plugin directory. To install it navigate to Plugins > Add New, search for MetaSlider and click the install button. Once the installation finishes click activate to enable it.

The plugin only has a few global options which can be accessed under MetaSlider > Settings.

These options allow you to set  a default name for new slideshows, base image width & height and enable full width sliders.

Create your slider

To get started just navigate to the MetaSlider tab on your WordPress dashboard.

Here you can either drag & drop some images into the box to start the process or click the Create blank slideshow button. We’re going to do the latter.

The first thing you need to do is add a title for our slider.

Do that and then click the Add Slide button on the top right to add your first slide. Once you click the button the WordPress media manager will pop-up providing you with a familiar interface where you can upload photos from your PC or use existing ones from the WordPress media library. Here you will also find an interesting feature bundled with MetaSlider, the access to the Unsplash image gallery.

The plugin allows you to browse the popular royalty free image hosting site right from the media manager and use your favorite free stock photo without ever leaving your dashboard. Rinse and repeat for the rest of your slides.

Once all the slides are added you can fine tune them by modifying each images caption, title and alt texts and the crop position.

You can also select which slider you are going to use, set the slideshow base image size, toggle navigation arrows and dots and pick a theme for the slideshow. To do that just click the Select a custom theme link.

You will be presented with a pop-up featuring the available custom themes, pick your favorite, preview it and select it for your slider.

Finally, if you wish so, you can mess around with the slider’s advanced options which control timings, direction, crop, effects and more.

Your slider is ready, click the Save button on the top right and you are good to go.

The MetaSlider block

Adding the slider you’ve just created in the content is pretty easy with the help of the bundled custom block.

To utilize it search for MetaSlider in the block selector and click on the block.

Next select your slider from the drop down.

That’s it, the slider was added to your content. The preview won’t have the same layout (i.e. custom theme) as the published post, so let’s publish the post and check it out.

The slider

The slideshow in the final published post will have the custom theme applied to it.

Wrapping up

Unfortunately the core blocks do not include a slideshow one yet, but through the magic of third party plugins creating and embedding a slideshow in our content is child’s play. In a few short minutes we have created and added to a post a slideshow with a custom theme and some royalty free stock images.

The post Block editor series – MetaSlider appeared first on CSSIgniter.

The plugin

Modula Gallery is a free gallery plugin which offers fully responsive, customizable and fast galleries for your WordPress site. It comes with a neat little feature called custom grid which allows you to easily customize your gallery’s layout and image aspect ratio to create galleries just like you want them.

Installation

The plugin is distributed via the WordPress plugin directory. To install it navigate to Plugins > Add New search for Modula Gallery and click the install button, once the plugin is installed click the activate button to activate it and you are good to go.

Modula Gallery does not offer much in terms of global options, the only interesting one would be the ability to migrate existing galleries from plugins such as Envira, NextGEN and FooGallery. This can be done under Modula > Migrate in the WordPress dashboard. This can help you be up and running with the plugin much faster if you were previously using any one of the previously mentioned gallery plugins.

Creating a gallery

To create a new gallery simply navigate to Modula > Add New and you will be presented with the new gallery creation screen.

Start by adding a title for your gallery and choose if you want to upload new images or select existing ones from the WordPress media gallery, both these procedures are handled through the familiar WordPress media manager interface. Once you are done with uploading or selecting images you will be presented with a preview of your gallery.

You can hover over any of the added images to edit its alt, caption, alignment and URL, you can also remove any image from the gallery. Now that the images are taken care of let’s move to the gallery options.

Modula Gallery offers quite a few customization options for a free plugin, although most of the tabs are exclusive to the pro version but still visible to the free users. You can control the gallery’s appearance by setting width, height, gutters, thumbnail size and image shuffle. You can also customize the captions, add social sharing links, toggle loading and hover effects, add custom CSS and toggle lazy loading for larger galleries.

Under General settings you can select the gallery type. There are three available options, the creative gallery which is an automatic masonry based layout, the classic columned one and the quite interesting custom grid type. If you choose to use the custom grid layout you can drag to resize your images and create a mosaic just the way you want it.

Once you are done customizing the gallery go ahead and save it.

The Modula Gallery block

Modula Gallery offers a custom block which can be used to add any gallery you’ve created in your content. To find the block just search for gallery in the block selector.

From the results pick the Modula Gallery block to add it in the content.

From the block’s drop down pick the gallery you want to use.

The block itself does not offer any options worth mentioning, there is a dropdown to change the selected gallery and the classic edit block button which will take you to the gallery edit screen we saw earlier.

Now that you’re done with adding the gallery to the content you can publish or update your post and check it out.

The gallery

As you can see our gallery looks exactly like the custom grid we have created earlier allowing us to highlight some images more than others and create unique galleries very easily.

The core gallery block

You don’t necessarily need a third party plugin just to create a gallery in WordPress. There is a core gallery block which is suitable for most everyday gallery creation needs. To add the block simply search for Gallery in the block inserter and pick the gallery block.

You can choose to either upload new images directly from your computer or create a gallery using photographs already uploaded to the WordPress media gallery. In both cases the procedure is done through the familiar interface of the WordPress media manager.

Once the images are added and the gallery is created you can modify its appearance. The core gallery block offers column number options, optional image crop, customizable image linking and thumbnail size.

The core gallery block with images

The configuration options are pretty simple and can be completed in no time. After that you are ready to publish the post and check out your brand new gallery.

Wrapping up

Modula Gallery is another pretty handy third party plugin to help you manage your galleries. Its custom grid and ability to import existing galleries from popular gallery plugins make it a very interesting choice. However if you are just looking to place a few images along your content and don’t have the need of an advanced gallery management solution make sure to check out the gallery core block which can be pretty handy for such a case.

The post How to create a photo gallery with the block editor with Modula Gallery appeared first on CSSIgniter.

The Banner block

The new banner block allows you to easily create banners of any kind. It is ideal for your front page, hero sections and more! Banner blocks can host any block of your choosing whether it is a GutenBee provided custom block, a core block or a block provided by a third party plugin, giving you limitless options on the final appearance of your banner. The height of the banner block is user adjustable as is the alignment of its content. The banner can be made to link to any URL you like. Appearance is also customizable with options for text & background color, border, box shadow, margin and padding options available. Additionally you can create banners with video backgrounds to make them even more eye-catching. The video backgrounds support videos from YouTube, Vimeo and even self-hosted ones.

New features

The Container block now supports video backgrounds just like the Banner block above. Use your favorite YouTube or Vimeo videos, or host your own and display them on your content grids created with the Container block.

All our blocks now have an extra panel in the block sidebar titled Visibility Settings.

This panel allows you to toggle the visibility of each block. It is split in two sections, the Viewport visibility one which offers to hide blocks either on the desktop, tables or mobiles and the Authentication visibility which either hides blocks from logged in or logged out users. Of course you can have more than one toggles enabled at any time if you wish to hide a certain block in more than one cases.

Finally we have added a text color control on the Testimonial block, and we made the size, alignment and text controls on the Icon, Icon Box and Image Box blocks responsive, giving you the ability to have different values set based on the device the block is viewed on.

GutenBee 2.8.0 is out today and it’s free, learn more, download it in the link below.

The post GutenBee 2.8.0 is here with a new block and more features appeared first on CSSIgniter.

Icon List

Use the icon list block to create captivating lists. The boring bullets are replaced with icons drawing more attention to the list. Pick your favorite icon from GutenBee’s icon font’s large selection and either apply it to all list items or have a different icon on each item. You can make the entire list item link to a URL of your choosing or just add inline links to the list item’s content. Customization options include picking between a standard or inline list layout, modifying the list’s alignment, adding item separators, modifying the size and color of the icon and content, adding a background, borders and more.

Testimonial

Looking for a flexible and easy to use block to help you display testimonials on your site? You’ve found it. GutenBee’s testimonial block can be set up in no time, just add a picture and fill in the 3 text input areas with the related info, that’s it. If you wish to change the appearance of the testimonial you can apply a circular mask to the avatar, change its location to be above, to the right, below or to the left of the text, control the font size for each text section individually, add a background image and more. The block can be easily used to create grid presentations for your team’s members by combining it with the core columns or GutenBee’s container block.

Video Embed

With the video embed block you can embed your favorite videos from YouTube or Vimeo. What makes it stand out from the core embed blocks is that you can customize the embeds by toggling the controls, enabling autoplay, toggling mute, loop and selecting a custom start time, but we’re not done yet. GutenBee’s video embed block allows you to select a cover image for your video and lazy load it to improve page loading times by avoiding to load YouTube’s or Vimeo’s player until the user actually chooses to watch them. You can now have more than one videos embedded on a single page without having to worry too much about them loading slowly.

GutenBee 2.7.0 is out today and it’s free, learn more, check out the demo and download it in the links below.

The post Three new blocks added to GutenBee appeared first on CSSIgniter.

The new editor’s main goal was to improve the content creation experience on WordPress sites by making it more flexible and more intuitive to use. Each piece of content is a block, hence it’s name “block editor”, which can be easily manipulated and moved around to help the user achieve the desired flow in their content.

WordPress offers all the basic blocks you might need to start writing all your posts, but this did not stop third party developers from extending the functionality of the existing core blocks and creating entirely new ones which offer features not yet available in core blocks. There are many major plugins which offer custom blocks which complement their product by making it easier to use with the block editor, WooCommerce is one of them, it comes with built in blocks to display product grids, featured and on-sale products, a cart and many more.

Apart from product enhancing blocks, there are many plugins in which the blocks are the products. Developers create collections of blocks which add new functionality to the block editor, such as maps, testimonials, ratings, tabs, food menus and more.

We have created a list of the 20 best such block collection plugins for you today, these are either completely free or offer great free versions, let’s have a look!

GutenBee – Gutenberg blocks

GutenBee is a free custom blocks plugin which offers more than 25 blocks to enhance your content creation experience. It improves on core blocks, such as the heading, paragraph, gallery etc, but also offers entirely new and exciting blocks like the image comparison, progress bar, slideshow, Google map and more. Custom layouts and grids can be easily created with the use of the GutenBee Container block, combined with the GutenBee Post Types dynamic block post and custom post type listings can be created in no time.

Our favorite block is the GutenBee Food Menu block which makes creating a price-list for your cafe, restaurant or bar a breeze, all it needs is the title, item description, price and a photo for each item and the beautiful and responsive menu is done. While the block’s primary target are food & drink related businesses, there is nothing that stops anyone from using it to create price-lists for other goods and services.

Page Builder Gutenberg Blocks – CoBlocks

CoBlocks tries to mix page builder functionality and new content blocks to create a truly unique block based experience. It mainly focuses on the row & columns block which helps users create complex page layouts in an intuitive way. Along with that you get new custom blocks such as an author block, an image collage, a form, hero, masonry gallery, post carousel and more.

A particularly interesting block is the events block, which either allows the user to create an event list by manually filling in events, or display them dynamically from a public on-line calendar. This is a great tool for artists to help them communicate and inform their fans on upcoming gigs and events.

Atomic Blocks – Gutenberg Blocks Collection

Atomic Blocks offers a small yet robust selection of finely made blocks to help users create more engaging content. Among them users can find a testimonial block, a profile box, a call to action, a dynamic block to display posts and pages in a grid, advanced column and container blocks to simulate page builder functionality in the editor, pricing blocks and more.

Their centerpiece is the built in Layouts block which offers pre-designed page sections and full page layouts. With the click of a button you can create a team presentation or a testimonial section for your site, create a personal landing page and more. The Layouts block is essentially a preview of what block patterns built into the editor will become.

Getwid – Gutenberg Blocks

Getwid offers a massive collection of custom blocks and along with its built in block template library users will be hard pressed to find anything missing. Everything from accordions, banners, sliders, maps, testimonials, counters, post lists and many more are come bundled with Getwid. The block template library offers ready made layouts such as a testimonial grid, a contact section and more, which can be easily inserted in the editor with a few clicks.

A noteworthy block, especially for writers and bloggers is the Table of Contents block. It will automatically detect all headings in your content and create the table of contents for your post complete with navigation links to each section.

Advanced Gutenberg – Blocks, Permissions, Layouts, Forms and CSS Styles

Advanced Gutenberg seeks to improve and enhance already existing core blocks and also bring new ones to the table. You will find many blocks corresponding to core ones but with more functionality squeezed out of them, such the advanced icon, button, image, list, table etc. Additionally you will find newsletter blocks, map, testimonial, WooCommerce products and a search bar block among others.

A very handy block available in Advanced Gutenberg is the Login/Registration block which allows users to display either a login or a new user registration form on any place on your page. The form’s appearance is highly customizable with variable width, colors, borders and more.

Gutenberg Post Blocks

This plugin focuses on creating highly customizable post grids and listings to help users achieve the perfect layout for their blog. In the plugin’s free version one can find various post lists, post grids and a post slider to pick from. Apart from the post listing blocks there is a basic heading and image block and a block library which offers a number of pre-made layouts, some of them free, which can be inserted to the editor with a few clicks.

Each post listing block is highly customizable when it comes to its appearance. All post aspects can be toggled on and off, the query can be fine-tuned to return only desired posts, extensive appearance options are available for each post section allowing users to customize alignment, style, typography, borders and spacing. Pagination is also available and very customizable as well.

Ultimate Blocks – Gutenberg Blocks Plugin

Ultimate Blocks is a custom block plugin aimed at bloggers and marketers. It aims to make it very easy for them to create better and engaging content using the block editor. Blocks offered by Ultimate Blocks include a testimonial block, a call to action, social sharing, table of contents, star rating, a review block, a how to block and more.

A very handy block for bloggers writing complex content is the content filter block. This allows readers to filter the content based on various preset filters and get through it much easier without the risk of losing focus while searching for interesting bits in larger texts.

Gutenberg Blocks – Ultimate Addons for Gutenberg

The plugin comes with a robust selection of post grid, masonry and carousel layouts, information boxes, testimonials, maps, call to action buttons and more.

We particularly liked the timeline blocks which can either automatically create timelines based on the site’s posts, or entirely custom ones with content that is added straight to the block. Timelines are highly customizable when it comes to their layouts and appearance. Typography, colors and item spacing are only some of the items that are user customizable.

Stackable – Page Builder Gutenberg Blocks

Stackable bundles more than 27 custom blocks including ones that build upon the functionality of core blocks, such as the button, advanced heading, advanced text etc, and completely new ones such as the pricing, header, icon list, notification, card and others. The design library block gives the user access to more than 300 pre-made free and premium layouts which can be inserted and used with just a few clicks.

The video popup block places a thumbnail placeholder in the content which when clicked will play a video from YouTube or Vimeo in a popup window eliminating the need for inline videos which can be annoying to many readers.

Gutenberg Blocks and Page Builder – Qubely

Qubely is a feature packed block editor toolkit which brings along custom blocks, pre-made sections and starter packs to help users get the most out of their block editor experience. Available custom blocks include maps, progress bars, headings, counters, social sharing buttons, lists, timelines and more. Along with these through the editor you can import ready made sections containing all those custom blocks, like call to actions, pricing tables, testimonial grids and more. Additionally starter packs are available to get you up and running in no time, these includes predesigned homepages, contact sections, portfolios, about pages and more for various types of businesses. Both free and premium sections and starter packs are available.

The pricing block combined with the row block help create informative and very flexible pricing tables for your services. Various layouts are available with customizable currency, typography, colors, badges, borders and many more.

Gutenberg Blocks Collection – qodeblock

Qodeblock packs more than a dozen custom blocks which enhance the block editor’s capabilities. Among them you will find a testimonial block, an author profile, a call to action, post grid, columns, containers, a pricing block and more.

The inline notice block is particularly helpful when writing instructions, guides, recipes and more and need a way to capture the reader’s attention to convey important information. The block’s color can be customized depending on the message’s importance and the notice can be dismissible.

Premium Blocks for Gutenberg

Despite what the plugin’s name might suggest, all of its offered blocks are completely free. Premium  Blocks comes with a small yet useful selection of essential blocks such as the button, maps, pricing table, section, testimonial block and more.

The dual heading block allows the user to create a heading split in two parts. The parts can be presented both in an inline and block layout allowing for the creation of various layouts. The colors, spacing and typography can be individually configured for each of the headings.

Gutenberg Blocks and Template Library by Otter

Otter employs a lightweight approach to enhancing the WordPress site building experience without affecting speed and performance. It offers a few essential content blocks such as the section block which allows custom layout creation, a slider, testimonials, pricing, sharing icons and more. Additionally it offers a template library with premade layouts for headers, testimonials, pricing tables, content and more.

One block that is kinda niche but stands out is the plugin block. This block can pull and display info of any plugin hosted in the WordPress plugin directory. It lists the plugin’s icon, name, author, rating, short description, active installs, version number and WordPress version compatibility. This can be particularly useful for plugin reviewers giving them the ability to display some key plugin info along with their content.

Page Builder Gutenberg Blocks – Kioken Blocks

Kioken Blocks is a fantastic suite of advanced Gutenberg Blocks which aims to maximize productivity and creative freedom. To achieve this it offers a multitude of custom blocks which build on existing core ones, such as the fancy buttons, split headings, divider plus, but also it adds new functionality with blocks like the video box, features, testimonials carousel, Kinetic posts and more. Additionally the Kioken Elements block gives the user access to a number of free and premium pre-made block layouts and templates to insert and use on their site.

One very interesting block is the Kinetic Wrapper which accepts any content block inside it and gives it unique functionality like animation, custom spacing, borders, colors, shadows, backgrounds, responsive options and many more.

Gutenberg Blocks by Kadence Blocks – Page Builder Features

Kadence Blocks aims to be a toolkit that makes the WordPress block editor capable of creating content usually only possible through popular page builder plugins. To do that it comes with some essential blocks to create buttons, headings, tabs, accordions, lists, forms and more and brings along the row layout block which allows for better control of columns on different screen sizes plus it packs full row editing tools like padding, backgrounds, overlays with gradients, vertical-align and much more.

The bundled testimonials block makes creating a testimonial grid or carousel a breeze. Testimonials can include rating, have toggleable sections, modifiable appearance and more.

Guteblock – Ultimate Gutenberg Blocks Plugin

Guteblock brings 21 custom blocks to the WordPress block editor to help provide users a smooth page building experience. All the essential blocks are here, a post grid block, a call to action, accordions, cards, newsletter, inline notice, authorbox and many more.

Essential Blocks for Gutenberg

Essential Blocks adds power to your post and page building experience. It provides easy-to-use blocks designed to make WordPress posts created with the block editor prettier than ever before. The plugin carries all the blocks a user might expect, testimonials, social links, team members, pricing tables, content toggles, Instagram feeds, sliders and many more.

The flipbox block can help create animated flip boxes and highlight any content inside the page. Flip boxes can be customized when it comes to size, the flip animation, colors, backgrounds, typography and more.

Editor Blocks for Gutenberg

Editor Blocks is another block collection plugin with an interesting variety of included blocks. Among them you will find a testimonial block, pricing table, a team block, an author profile, a hero block and more.

The included brands block can display a group of brands in a single row making it ideal for showcasing notable partners or clients.

Di Blocks – Awesome WordPress Blocks for Gutenberg Editor

Di Blocks offers a small collection of basic blocks to enhance the editor experience. Four of the six included blocks are based on core blocks and extend their functionality by adding customizable typography, extended color options, animations and more. Apart from these there are two more blocks available, one to add Google maps and one to add FontAwesome icons to the content.

Advanced Gutenberg Blocks

Advanced Gutenberg Blocks bundles 16 custom blocks, offers users the ability to disable built in blocks they do not use, allows editor tweaks such as changing the default width, font sizes and more. Some of the most interesting blocks offered by the plugin are the add to cart button block, the website card preview, the giphy embed block, and the text and ad block which allows users to display an ad inline with the content.

The unsplash block can be especially useful to bloggers who want to pad their content with beautiful images but don’t have any of their own. The block allows the user to search for the ideal image to insert in their content among the best free stock images.

Wrapping up

The block editor is constantly growing and has a bright future ahead of it. However the core blocks will always most likely be kept to a minimum to avoid cluttering the editor’s interface and confusing new users. This allows third party developers to unleash their creativity and publish great plugins like the ones listed above. Picking one of the above is not always easy because there is not one which covers all cases. If we had to suggest one it would be GutenBee, because it is our own plugin and we are passionate about improving it constantly and adding functionality that is essential to all of you out there. Do you have a favorite plugin? What blocks would you like to see added on GutenBee? Let us know in the comments below!

The post 20 Best Gutenberg Blocks Plugins for WordPress appeared first on CSSIgniter.

The plugin

TablePress is a very popular free WordPress plugin which makes table creation and management a trivial task. It presents the user with a spreadsheet-like interface for adding and editing data so no coding knowledge is required, data can be imported and exported from/to excel, csv, JSON and more. Sorting, pagination and table filtering are also available to the user.

Installation

TablePress is a free plugin and it is distributed via the WordPress plugin directory, making its installation pretty easy. Navigate to Plugins > Add New and search for TablePress, from the results click the install button on the TablePress card and activate it once the installation is done.

The plugin does not offer much of general settings, they can be accessed under TablePress > Settings.

You have the option to add custom CSS to modify the tables’ default styling, and also pick where to display the TablePress menu entry.

Creating a table

To start creating your table navigate to TablePress > Add New and fill in the table’s title, description and its size.

Next click the add table button to get started.

In the next screen you can add the data to the table. After adding the data you can manipulate the table by adding or removing rows and columns merging cells and more. You can also toggle the table’s header and footer, create a stripped table layout, toggle sorting, filtering and more.  Once you are done configuring the table you are ready to publish and use it.

Embedding the table with the shortcode block

Since TablePress does not offer a custom block you will have to utilize the shortcode block to embed the table in your content. To get the shortcode just navigate to the TablePress tab in your dashboard, hover over the table you want to use and click the show shortcode link.

Copy the shortcode and create a new post or page. From the block finder search for the shortcode block and add it to the content.

Paste your shortcode in the block and publish the post.

The table

Your table is now embedded in your content and ready to be used.

The core table block

The block editor offers a core table block which allows you to create simple tables easily without having to write the table markup yourself. Search for table in the block finder and select the block.

After adding the block you have to select the table size and select the table style between the default and one with stripes.

Next click the Create Table button to start adding your data.

The block offers a few options to modify the table cell width and toggle the header and footer sections.

The table is now ready to be published and viewed.

Wrapping up

Adding tables in WordPress content is a lot easier than it used be. Both custom plugins and the core block can assist you in creating a table to display your data quickly without having to write the markup yourself. The core block is ideal if you want to quickly display some data and don’t have a need for any advanced functionality. If on the other hand you need to offer searching, filtering and sorting to your readers third party plugins like TablePress are the way to go.

The post How to add tables in your WordPress pages appeared first on CSSIgniter.

The plugin

Social Photo Feed by Smash Balloon allows you to display posts from any Instagram account you might own either in the same feed or multiple ones. It is responsive, offers a highly customizable appearance, supports infinite loading via a load more button, offers shortcodes and custom blocks for easy embedding and more. For mehr Informationen on social media reaches and how to achieve them, check out this link!

Installation

Installing the plugin is very easy since the plugin can be found in the WordPress plugin directory. Simply navigate to Plugins > Add New in your WordPress dashboard and search for Smash balloon Social Photo Feed, click the install button and then the activate one to get started.

Plugin options

The plugin’s options

After activating the plugin you need to configure it. To do that navigate to Instagram Feed > Settings in the WordPress dashboard. On the main settings page you will find the button to connect your Instagram account, options for preserving the plugin’s settings after it’s uninstalled and a setting for how often you want the feed refreshed.

Connecting with Instagram

To connect your Instagram account with the plugin you start by clicking the big blue button. A pop-up will ask if this is a personal or business account, select the proper option and click to proceed.

Account type selection box

After clicking Connect you will be redirected to the Instagram login screen, fill in your credentials and accept the authorization, you will then be brought back to the plugin’s settings with your account connected.

Customize the feed

After connecting your account you can visit the Customize tab in the plugin’s settings page to modify the default feed appearance.

Feed customization options

Here you can customize the size of the feed, number of photos displayed, feed columns, image sorting, toggle the feed header, button appearance and more.

Finally in the Display Your Feed tab you will find all the available shortcode attributes which you can use wherever you embed your feed to create unique feeds that deviate from the default layout.

Embedding the feed

Now that you have connected your account and configured the feed’s default appearance you are ready to use it in posts and pages. To do that edit any post and page with the block editor and search for Instagram in the block selection pop-up.

From the results select the Instagram Feed.

The Instagram Feed block

Modifying the feed

The block offers a box where you can add shortcode settings to override the default appearance of the feed. For example you can configure the block to display a different number of posts and columns. Just add the proper attributes in the box and apply the changes.

The final result

After adding and configuring the feed block you can publish and check out the final result.

The final result.

Core Instagram embedding options

If you noticed earlier when searching for the Instagram feed block, there is another one called Instagram.

This is a core block which can be useful if you are looking to embed an Instagram post in your content. To get the embed URL visit any Instagram post in your browser, click the three dots on the top right of the post and click to copy the link from the pop-up.

Paste the copied URL in the Instagram block’s input field and embed it.

Now you have the Instagram post embedded along with your content.

Wrapping up

In this short guide we saw two ways to embed Instagram content using the block editor. Core blocks give us the ability to embed single Instagram posts and custom blocks provided by plugins take it one step further with embedding entire feeds.

The post How to add an Instagram feed on your website with Smash Balloon Social Photo Feed appeared first on CSSIgniter.

The plugin

Envira Gallery Lite is an easy to use gallery management plugin which offers a drag & drop gallery builder, responsive galleries, block editor integration and is optimized to be fast and SEO friendly. Or you can use this guide from Web 20 Ranker, which is much more simplified than the previous one.

Installation

Envira Gallery Lite can be installed directly from the WordPress plugin directory. Simply navigate to Plugins > Add New, search for envira gallery and proceed to install and activate the plugin as usual.

After activating the plugin you can learn more about it, access its documentation and various useful tutorials under Envira Gallery > Get Started.

The get started section

Creating a gallery

To create your first gallery navigate to Envira Gallery > Add New.

Start by giving your gallery a name and choose the source of your gallery images. You can either upload images straight from your computer or choose the other sources option to select galleries from the WordPress media gallery.

Once the images have been uploaded they will be visible in the Gallery tab below the image selection box.

Images added to the gallery.

Images can be removed, re-order and have their metadata, such as title, alt etc, edited from this tab.

The next tab is where most of the flexibility of Envira Gallery Lite lives, the gallery configuration options.

Gallery configuration options.

Here you can select the gallery’s number of columns, configure the lazy loading effect, set row height and margins, pick the desired gallery thumbnail size and toggle image cropping. The final tab available in the free version is the lightbox tab which allows you to toggle the lightbox and choose the image size which will be displayed in it.

Once you are done with the gallery configuration you can publish it like any other post and it’s ready to use in your content.

The Envira Gallery block

Envira Gallery, keeping up with the times, offers a custom block to help users easily embed their galleries in posts and pages. Using the block is pretty straight forward. Just search for gallery in the block inserter’s search box and select the Envira Gallery block.

Once the block is added you can either select an existing gallery from the drop down or create one inline by uploading images from your computer or picking them from your media library.

The Envira Gallery block

Since we have already created a gallery earlier we’re going to pick it from the drop down.

Upon selecting a gallery you will get a preview of the gallery in the editor and will be presented with some basic gallery options.

The block’s options

Basic gallery features such as the column number, row height and margins and lightbox can be configured from the block, more advanced configuration needs to be handled from the gallery creation page as seen earlier.

Our gallery is now inserted in the content, the post is ready to be published.

The gallery

Let’s check out our embedded gallery!

The final result.

The core gallery block

WordPress also offers you a way to create galleries using the gallery core block. However this block offers only basic gallery functionality and is more suited for on the fly gallery creation and not so much as a gallery management system. To add the block simply search for gallery in the block inserter and select the core gallery block.

Once the block is inserted you are ready to create a gallery either by uploading images from your computer or choosing ones already in the media gallery.

After the images are added you have the ability to modify the gallery’s column number, toggle the image cropping, change where the images link to when clicked and their thumbnail size.

The core gallery block with images

With the configuration done you can publish or update your post and check out the newly created gallery using the core gallery block.

Wrapping up

In this installment of our block editor series we have seen yet another handy plugin to help us create, manage and use our galleries in posts and pages via the provided custom block. We also took a look at what’s provided out-of-the-box with WordPress when it comes to gallery creation. The comparison provides valuable information so we’re able to make an informed decision on which tool to pick when it comes to gallery management for our next WordPress based project.

The post How to add an image gallery using the block editor with Envira Gallery appeared first on CSSIgniter.

The plugin

WPForms Lite or Contact Form by WPForms – Drag & Drop Form Builder for WordPress to use its full name is a very popular free form creation plugin brought to you by the folks behind WPBeginner. The plugin was built to be as easy to use as possible for beginners, but also powerful enough to cover the needs of advanced users and large companies. You can build contact, subscription, feedback and other types of forms easily via drag & drop in no time, additionally it offers some premade form templates which allow you to be up and running with a contact form in mere seconds.

Installation

To install and activate the plugin simply navigate to Plugins > Add New in the WordPress dashboard and search for WPForms, click the install and activate buttons and you are done.

Creating your first form

After the plugin is activated you will be presented with its onboarding page which includes various information regarding the plugin and its functionality both for the free and premium versions. You also have access to video tutorials and written guides. To create our first form all we have to do is click the orange Create Your First Form button.

The form builder

In the next screen you can name your form and to either select one of the premade form templates which include a simple form, a suggestion form and a newsletter sign up form, or start from scratch with a blank one. In this tutorial we will be using the simple contact form since the fields it includes cover the needs of most modern websites.

The Simple Form

These days it is imperative to make your users aware of any personal information about them you might process and/or store and you also need to have their consent. To achieve this we will be adding a checkbox to the form which allows the user to agree with the site’s terms of service and privacy policy. To add the new field simply drag the Checkboxes box from the Standard Fields to the left of the form, and drop it just above the submit button. Once the field is added click on it to see its options.

The options of the Checkboxes field.

Via the field’s options you can change its label, add more choices, perhaps if you require separate consent for the TOS and Privacy policy, add a description and make the field required. The advanced options tab gives you the ability to add CSS classes for custom styling, modify the layout for multiple options, hide the label, or even display a disclaimer or TOS inline with the field.

The form options

Now that we are done with our form’s fields let’s have a look at the form’s settings. To access the settings click the Settings button on the left sidebar.

The form settings

Under the general tab you can rename the form, add CSS classes for custom styling, change action texts etc. Under the notifications tab you can set the email address you want your contact requests to be sent to, modify the default subject and more. Finally from the confirmations tab you can set an automated reply to be sent to anyone using the contact form.

Our form is ready, now we need to save it, to do that click the orange save button on the top right of the screen and then click the X to exit the form creator.

Save the form and exit the form builder.

The contact page

Our contact page base

To create the base for our contact page we have use the Google Maps block from the GutenBee plugin, right below the map we have added a bit of text and below that we have created a 1/3 – 2/3 column layout using the Columns core block. On the left column we added a list with some useful information and on the right one we will add our newly created contact form.

The WPForms block

Add the WPForms block.

To add the form block just click the plus sign, search for forms and select the WPForms block from the list.

Select your form.

Once the block is added you will be presented with a drop-down menu from which you can select the contact form we have just created.

The form block’s options.

We can now see the our form along with the block’s options to toggle the form’s title and description.

The final result

Now our contact page is complete with maps, info and a contact form, here’s the final result.

The final result.

Wrapping up

Through this small guide we can see that with the help of the block editor and a few custom blocks we can create a complete and functional contact page for our site in no time at all!

The post How to add a contact form using the block editor with WPForms Lite appeared first on CSSIgniter.