The 50 Best Free Bootstrap 5 Templates & Themes in 2021

Bootstrap is the most popular CSS framework ever. It is currently used on over 22% of all sites on the web, and despite the rapid rise in popularity of front-end JavaScript frameworks, it continues to grow. And with each new version (currently v5.0), it gets better and better.

Built on a mobile-first twelve column grid system, bundled with an endless list of components, utilities and helpers, and add in the fact that it is easy to customize and extend, it is no wonder that web designers and developers continue to use and love Bootstrap. It truly is the perfect framework for quickly getting started on any type of web project.

To help make life easier for you, we have collected forty of the best free Bootstrap 5 templates for you to use on your next project. We have purposefully omitted all of those starter and barebones templates from this collection, of which there is already a multitude available on the web. Instead, we have focussed on highlighting all of those fully-featured, beautifully designed, and of course, free Bootstrap templates that you can use straight away.

All of the responsive templates come packaged with pre-styled ‘ready to use’ components, and many have come bundled with additional extras, like charting libraries, pricing tables, tabs, and much more. All of these templates will save you hours of extra work and are all waiting for you to add your content and creativity.

If you’re new to Bootstrap, the best place to learn how to use the framework is to follow the steps on the official quick start guide, and you’ll be up and running in no time.

Free Bootstrap Portfolio Templates

Style Bootstrap Template (Free)

This elegant and minimally designed free Bootstrap template comes bundles with a filterable portfolio, smooth slider, and many other useful web elements.

Lendex Bootstrap 5 Personal Portfolio Template (on Envato Elements)

Lendex is the perfect foundation for building your portfolio. Built using Bootstrap 5. It comes packaged with multiple page layouts and sections, so you can develop and design your portfolio exactly how you need it.

Lendex Bootstrap 5 Personal Portfolio free bootstrap web template html html5 responsive mobile-first

Kross Single-Page Portfolio Template (Free)

Kriss is a bold, single-page portfolio template that seamlessly uses smooth scrolling to link the beautifully designed sections. This Bootstrap template could be used as a portfolio, resume, or as the homepage of a small agency.

Kross single-page portfolio template free bootstrap web template html html5 responsive mobile-first

Andle Bootstrap 5 Portfolio Web Template (on Envato Elements)

Bundled with eight various page layouts and designed in an elegant modern style, Andle is an excellent Bootstrap 5 web template for creatives and design agencies.

 free bootstrap web template html html5 responsive mobile-first

Barts Bootstrap Portfolio Website (Free)

Built using Booststrap, Barts is a super-simple web template for those that are needing to quickly create a personal portfolio or resume site.

Barts simple minimal portfolio Website free bootstrap web template html html5 responsive mobile-first

Creative Portfolio Bootstrap 5 Template (Free)

Built for both creatives and small businesses, this Bootstrap 5 template features a modern design and layout, and offers just enough to help get your website off the ground quickly.

Creative Portfolio Bootstrap 5 free bootstrap web template html html5 responsive mobile-first

Free Bootstrap Landing Page Templates

DevConf Free Bootstrap 5 Conference Template (Free)

DevConf is a free Bootstrap 5 single-page template for building the landing page of a technology or web development conference.

DevConf Bootstrap 5 Conference free bootstrap web template html html5 responsive mobile-first

Qexal Bootstrap 5 Landing Page Template (on Envato Elements)

The Qexal Bootstrap 5 web template comes bundled with nine different homepage layouts and multiple other page templates, like services, pricing, blog, contact, and much more. This is the perfect foundation for launching any type of business.

Qexal Bootstrap 5 Landing Page bootstrap web template html html5 responsive mobile-first

Simple Landing Page Bootstrap Template (Free)

You can’t get simpler than this free Bootstrap template. It has one single purpose: to allow you to build a landing page for your new products or services quickly. As well as the landing page layout, Simple also comes with an about, blog, and testimonial page templates.

Simple Landing Page free bootstrap web template html html5 responsive mobile-first

Peyso Bootstrap 5 Landing Page Template (on Envato Elements)

The beautifully designed Peyso is a Bootstrap 5 web template for startups and businesses. It comes with six different homepage layouts and three authentication pages.

Peyso bootstrap 5 Landing Page bootstrap web template html html5 responsive mobile-first

DevBook Bootstrap 5 Book & eBook Landing Page Template (Free)

DevBook is a minimally designed Bootstrap 5 landing page template for promoting or selling books or ebooks. It comes with all of the components needed for converting visitors into buyers.

DevBook book eBook landing page template free bootstrap 5 web template html html5 responsive mobile-first

Agency One-Page Bootstrap 5 Template (Free)

Agency is a single-page template that has recently been updated to Bootstrap 5. It is perfect for design agencies or small businesses that need to set up a basic landing page.

Agency One-Page Bootstrap 5 free bootstrap web template html html5 responsive mobile-first

AppKit Landin Page Template (Free)

Built on Bootstrap 4, AppKit is a free landing page template for helping you launch and promote any type of product or service.

AppKit free Bootstrap Landing Page Template

Simple Bootstrap 5 Landing Page (Free)

This simple Bootstrap 5 template comes with all of the basic features you need for quickly building a landing Page for showcasing your products or apps.

Landing Page Template feature app products free apps bootstrap

Free eCommerce Bootstrap Templates

Safia Bootstrap 5 eCommerce Bootstrap Template (Free)

This bold, dark, and minimally designed Bootstrap 5 landing page templates could be used to promote or launch any type of service or product. It would be the perfect option for either a start-up or a single product eCommerce store.

Safia bootstrap 5 landing page dark business free bootstrap web template html html5 responsive mobile-first

Alan Kitchen Bootstrap 5 eCommerce Template (on Envato Elements)

This Bootstrap 5 eCommerce template comes bundled with multiple homepage, store page, product page, and blog page layout templates. It may be too extensive for smaller stores but you could simple pick the pages and components you need.

Alan Kitchen Bootstrap 5 eCommerce Template free bootstrap web template html html5 responsive mobile-first

Majestic Bootstrap 5 eCommerce Template (Free)

Majestic is a clean Bootstrap 5 web template for eCommerce websites. It does only come with a homepage template, but if you’re an experienced web designer, you would be able to easily create a multi-page site by cleverly using the many beautifully designed homepage sections.

Majestic Bootstrap 5 eCommerce free bootstrap web template html html5 responsive mobile-first

Shop Homepage Bootstrap 5 Template (Free)

This unstyled Bootstrap 5 template is the perfect foundation for building a modern eCommerce website. There are just enough features to help you get started quickly.

Shop Homepage Bootstrap 5 ecommerce free bootstrap web template html html5 responsive mobile-first

Free Business Bootstrap Templates

Promodise Bootstrap Business Template (Free)

This Bootstrap template comes bundled with multiple homepage layouts (including a single-page layout) and templates for about, services, pricing, blog, and contact pages. This flexible and easy to edit template could be used as the homepage of any business.

Promodise business single-page free bootstrap web template html html5 responsive mobile-first

Zinc Bootstrap 5 Business Web Template (Free)

Zinc is a clean Bootstrap 5 web template for small businesses. It does come with various page layouts but works best as a smooth-scrolling single-page layout.

Zinc bootstrap 5 business landing page free bootstrap web template html html5 responsive mobile-first

CoderDocs Bootstrap 5 Documentation Template (Free)

Built for developers, CoderDocs is an open-source Bootstrap 5 documentation template. Its modern design and simple layout make it very easy to customize to suit any project.

 free bootstrap web template html html5 responsive mobile-first

Small Business Bootstrap 5 Template (Free)

This is an unstyled, barebones Bootstrap template for quickly building a small business website. It has recently been updated to Bootstrap 5.

Small Business Bootstrap 5 Bootstrap 5 ecommerce free bootstrap web template html html5 responsive mobile-first

Space Business Bootstrap 5 Template (Free)

Space is a simple one-page Bootstrap 5 template for small businesses. It features a clean design and flawless, smooth scrolling between each of the homepage’s sections.

Space Business Bootstrap 5 ecommerce free bootstrap web template html html5 responsive mobile-first

Jadoo Bootstrap 5 Travel Agency Web Template (Free)

Even though this template has been marketed as a travel agency template, it could be easily used as the homepage of many types of websites. It comes with a beautiful hero header section, sticky navigation bar, services section, smooth animated hover interactions, and much more.

Jadoo bootstrap 5 Travel Agency free web template html html5 responsive mobile-first

Little Squirrel Bootstrap 5 Education Template (Free)

Little Squirel is a clean multi-page Bootstrap 5 template for education and learning websites. As well as a multi-section homepage layout, the free template also includes course selection, pricing, and blogging templates.

Little Squirrel Bootstrap 5 learn education free bootstrap web template html html5 responsive mobile-first

Bunzo Bootstrap 5 Blogging Template (on Envato Elements)

The Bunzo Bootstrap 5 web template comes with everything you need for building a modern blog your readers will love. The bundled layout templates give you the flexibility to create the blog or online magazine you need.

Bunzo bootstrap 5 blogging free bootstrap web template html html5 responsive mobile-first

Free Bootstrap One-Page & Single-Page Templates

Swipe One-Page Bootstrap 5 Template (Free)

Swipe is a simple Bootstrap 5 template for quickly building a homepage or landing page for mobile applications. It also features a testimonial, FAQ, and downloads section.

Swipe one-page bootstrap 5 Mobile Applications free web template html html5 responsive mobile-first

Brushed One-Page Bootstrap Template (Free)

Brushed is a beautifully designed single-page Bootstrap template for design studios and agencies. It could also be the perfect template if you’re a creative looking to build a portfolio quickly.

Brushed beautiful single-page template free creatives bootstrap

Mamba One-Page Bootstrap 5 Template (Free)

Recently updated to Bootstrap 5, Mamba is a multi-purpose one-page template that has been designed to be used by various types of businesses.

Mamba clean flat one-page template creative profiles portfolio free bootstrap

Grayscale Single-Page Bootstrap 5 Template (Free)

Recently updated to Bootstrap 5, Grayscale is a multi-purpose, one-page web template that features a dark layout and smooth scrolling page animations.

Grayscale basic one-page template showcasing portfolio free work bootstrap

Freelancer One-Page Bootstrap 5 Template (Free)

Designed using the flat design aesthetic, Freelancer is a one-page template that allows developer to quickly create a portfolio or resume site.

Freelancer extremely flat single-page template free portfolio bootstrap

Free Bootstrap Multi-Purpose Templates

Scout Multi-Purpose Bootstrap Template (Free)

Due to its clean design and simple layout, Scout is a Bootstrap template that could be used on many different types of sites. Easy to edit and build upon, and comes with all of those useful web components you would expect from a professional template.

Scout multi-purpose free bootstrap web template html html5 responsive mobile-first

Knight One-Page Multi-Purpose Bootstrap 5 Template (Free)

Multi-purpose in design, the Knight Bootstrap 5 template is a great foundation if you want to quickly build a single-page business site.

Knight One-Page Multi-Purpose Bootstrap 5 ecommerce free bootstrap web template html html5 responsive mobile-first

Mountain King Multi-Purpose Template (Free)

The Mountain King Bootstrap Template comes with a clean and responsive layout and includes Typicons vector icons, masonry galleries, off-canvas menus, and smooth CSS animations.

Mountain King Bootstrap Template free html html5

Free Bootstrap Design Agency Templates

K!sbag Minimal Agency & Portfolio Template (Free)

K!sbag is a clean Bootstrap template that comes with six pre-built page layouts, including homepage, blog, about, contact, portfolio, and single project page. It could be used as either a personal portfolio or design agency website.

K!sbag minimal agency portfolio free bootstrap web template html html5 responsive mobile-first

Strane Startup Agency Bootstrap 5 Template (on Envato Elements)

With its fifteen various HTML layout templates and super-simple design, Strane is the ideal Bootstrap 5 template for creating a startup or business website.

Strane startup agency bootstrap 5 free bootstrap web template html html5 responsive mobile-first

Avana Design Agency Template (Free)

Avana is a modern Bootstrap template built for either design agencies or personal portfolios. It features a smooth-scrolling homepage, a user-friendly blogging section, and it is all brought together perfectly by its beautiful typography.

Avana free Minimal Portfolio Bootstrap Template

Amoeba Design Agency Bootstrap 5 Template (Free)

Amoeba is a simple one-page Bootstrap 5 template for design agencies. It features an about us, services, portfolio, team, and contact us sections, that scroll seamlessly with each other.

Amoeba flat one-page template creative free agencies bootstrap

Free Coming Soon Bootstrap Templates

Coming Sssoon Bootstrap Page Template (Free)

Ssssoon is a simple landing page template for anyone that needs to quickly create a basic coming soon page for their new website. With this template, you have a choice of having either an image or video background.

Coming Sssoon soon landing page free bootstrap web template html html5 responsive mobile-first

Maundy Coming Soon Bootstrap 5 Template (Free)

This simple Bootstrap 5 coming soon template features a countdown timer and an about section for adding information about your business. Just enough features to get your coming soon page online quickly.

Maundy coming soon landing page free bootstrap web template html html5 responsive mobile-first

Free Material Design Bootstrap Templates

Material Design for Bootstrap 5 (Free)

The Material Design Bootstrap 5 template allows you to use Google’s Material Design specs in your favorite front-end framework. The template includes 500+ Material UI components.

Material Design Bootstrap theme template free

Bootplus Front-End Framework (Free)

Built on Bootstrap, Bootplus is a front-end framework for faster and easier development. Google’s UI has inspired its design.

Bootplus Google styled front-end framework bootstrap free

Vintage & Nostalgic Bootstrap Templates

NES-style CSS Framework (Free)

If you’re a fan of vintage video games, then you’re going to love this free Bootstrap theme. NES.css allows you to give your websites a nostalgic 8bit-like look and feel.

nes style css Bootstrap 5 8-bit gaming video games free bootstrap web template html html5 responsive mobile-first

Bootstrap/386 DOS Web Template (Free)

Carrying on with nostalgia, with this free Bootstrap template, you can make your web pages look like vintage DOS computers from the 1980s.

Bootstrap 386 DOS css Bootstrap computer video games free bootstrap web template html html5 responsive mobile-first

Windows 95/98 Bootstrap Template (Free)

Jumping forward from the 1980s, We’re now going to take a step forward into the 1990s. Win95.CSS is a free template that will allow you build incredible websites that look like the GUI from Windows 95 and 98.

Windows 95 98 free bootstrap web template html html5 responsive mobile-first

Geo for Bootstrap (Free)

This time we’re stepping back into the early days of the web. Do you remember how websites looked back then? Not pretty at all. Geo is a free template that will allow you to recreate the way websites looked back then. Not sure why you would want to do that, but a fun project all the same.

Geo free bootstrap web template html html5 responsive mobile-first

The post The 50 Best Free Bootstrap 5 Templates & Themes in 2021 appeared first on Speckyboy Design Magazine.

8 Powerful Plugins for Integrating Social Media into WordPress

These days, no website should go without at least some basic social media integration. If you’re a content creator, enabling readers to share various services is a must. But you can also go beyond just the basic share buttons.

You might even want to automate the process of sharing that same content on your own social accounts. Then there are the methods for enabling social media login, commenting, and analytics.

If your website is powered by WordPress, adding this type of functionality couldn’t be any easier. Some plugins cover everything mentioned above and more.

Here are some outstanding free WordPress plugins that run the gamut of social media integration:

Smash Balloon Social Photo Feed

Photo galleries are a popular feature for many websites. But, if you’re already on Instagram, why reinvent the wheel?

Smash Balloon Social Photo Feed is tied to your Instagram account. Set it up and the plugin will display your feed as an attractive gallery. And it also brings back oEmbed functionality – something that had previously left WordPress core. The pro version offers advanced features, such as the ability to display hashtag feeds and image lightboxes.

WordPress Social Login (Discord, Google, Twitter, LinkedIn)

If you run an online community or membership website, users will have to fill out yet another registration form – and keep track of one more account. But with WordPress Social Login, you can enable the use of their social media accounts instead.

The plugin integrates with all the major social media networks. In addition, it works with popular WordPress plugins such as BuddyPress and WooCommerce.

WordPress Social Login (Discord, Google, Twitter, LinkedIn)

Flow-Flow Social Feed Stream

Want to combine all of your social media posts into a single feed? Flow-Flow Social Feed Stream can make it happen. It works in conjunction with the “big four”: Facebook, Instagram, Pinterest, and Twitter.

This can be a server-intensive process. That’s why the plugin utilizes AJAX and caching to speed things up. You’ll also find post-share counts, mobile compatibility, and plenty of design settings. If you’re looking for even more social networks for your feed, the pro version has you covered.

Flow-Flow Social Feed Stream

AddToAny Share Buttons

AddToAny Share Buttons is one of those plugins I find myself turning to over and over. It provides an easy-to-use and highly customizable way to add your basic social sharing icons.

Place them directly into your template or create a floating share bar. You have access to virtually every social media platform (over 100 in all), and it integrates with Google Analytics. Use the included icons or your own.

AddToAny Share Buttons

Jetpack

Indeed, with over 3 million active installs, Jetpack is one of the most widely used plugins out there. And since you may already have it installed, it’s worth mentioning that there are some powerful social media tools built right in.

Besides adding social sharing buttons, you can also automatically post your content to Facebook, Twitter, LinkedIn, and more through their Publicize feature. Your readers can also use their WordPress.com, Twitter, or Facebook accounts to comment on your posts. Who knew?

Jetpack

WPSSO

WPSSO is a plugin that works behind the scenes to make sure your WordPress website contains valid Open Graph and Schema Markup, among other things. This helps ensure that when your content is shared on social media, it’s properly read by services like Facebook, Pinterest, and Twitter. For example, this information will make sure that Twitter Cards grab the right images, etc.

Even more advanced features are available in the Pro version of the plugin.

WPSSO

Facebook for WooCommerce

If you’re running a WooCommerce shop, the free Facebook for WooCommerce plugin will help you harness the power of the popular social media network. Integration with Facebook Ads provides conversion tracking, optimization, and remarketing.

But you can also create a Facebook store that connects your WooCommerce products directly to Facebook. You can list your entire catalog on Facebook. And, when you make changes to products, they will automatically sync with the social network.

Facebook for WooCommerce

Blog2Social: Social Media Auto Post & Scheduler

Blog2Social is a suite of tools to make automatic posting of WordPress content to social media work on your terms. It connects to your Facebook, Google+, Instagram, Reddit, Twitter or other social profile and lets you customize messages, hash tags and more for each service.

It’s also great for re-sharing older posts. The Premium version features advanced scheduling, allowing for more than one concurrent profile on a specific network and more.

Blog2Social: Social Media Auto Post & Scheduler

BONUS: Scriptless Social Sharing

Minimalists and speed demons, rejoice! Scriptless Social Sharing provides an absolute barebones version of social sharing buttons. No JavaScript and no increased load times.

The plugin claims to build a set of links and can be displayed as simple icons with or without labels. Accessibility is also ensured – even if you choose not to show labels on the included icons. Frankly, I’m scared scriptless.

Scriptless Social Sharing

Becoming Fully Socialized

The ways and reasons for integrating social media into your WordPress website have grown tremendously. It’s no longer a matter of just helping users share your content (although that’s still an important piece of the puzzle).

Now, it’s also about ensuring that the social networks you care about can properly read your content. And, when users do share, you’ll want some data to see how it’s working out. Beyond that, many social network integrations add a layer of convenience for users.

With that in mind, it’s important to consider both your needs and those of visitors to your site. Choose the functionality that will make the most impact. With the plugins above, you’ll be up and running in no time.

The post 8 Powerful Plugins for Integrating Social Media into WordPress appeared first on Speckyboy Design Magazine.

The Power of Automating WordPress

I like to think of the typical WordPress website as a collection of parts. Themes, plugins, and custom code can be combined to power virtually any type of site.

But, in most cases, these various pieces don’t necessarily work together. That is, they each serve their own purpose independently of one another. Unless they’re tied into the same ecosystem (a WooCommerce extension, for example), they can usually be changed without causing a domino effect.

That has both positives and negatives. On the plus side, it’s possible to add or remove functionality at any time. But it also means that getting things to work in tandem can be difficult.

It’s a challenge for developers. There are many scenarios where you may want user actions in one plugin to also trigger a response in another. Unless these features are intentionally built into a plugin, it may require building that functionality from scratch.

That’s where the power of automating WordPress comes into play. There are now tools specifically designed to trigger a chain reaction among multiple plugins and third-party services. Best of all, they can be configured with relative ease.

If that sounds like something that could change your life (or at least your website), read on! We’ll introduce you to some WordPress automation tools and basic examples of what they can do for you.

WordPress Automation Plugins

The first step involves choosing a WordPress automation plugin. This will serve as the glue that links your site’s various plugins and services together.

There are a couple of compelling options we’ll focus on. Each has a free version that includes plenty of possibilities. If you’re looking for something more robust, commercial versions provide advanced features and wider compatibility.

Before you choose, be sure to review what’s included. While both options have similarities, there may be some key differences that will determine the best fit for your situation.

AutomatorWP

AutomatorWP comes loaded with integrations for popular plugins such as WooCommerce, BuddyPress, Gravity Forms, LearnDash, and Restrict Content Pro – among many others. In addition, you can tie in with service providers like HubSpot, Twilio, Zapier, and Zoom.

Note that integrations are limited on the free version of the plugin. Premium add-ons are available, which can be purchased individually or as part of a package deal. They expand upon the types of tasks (a.k.a. “triggers”) available in your automation workflow.

Uncanny Automator

In addition to the plugin integrations listed above, Uncanny Automator works with the likes of Easy Digital Downloads, Elementor, MemberPress, and The Events Calendar. Third-party services include Facebook, FluentCRM, and Twitter.

The free version includes over 100 automation triggers and actions. More are available via the pro version. Note that there is no a la carte option– you’ll need to buy the pro version to access the advanced functionality.

Uncanny Automator banner

Creating a Few Basic Automations

Now that we know a bit more about both AutomatorWP and Uncanny Automator, it’s time to put them to work. We’ll use them to create a couple of automations that reflect common use cases.

But first, a little background on how things are put together.

How Does It Work?

While each plugin uses slightly-different terminology, the process for adding automation to your website is essentially the same.

Both have a similar back-end UI for creating automated functionality. AutomatorWP calls them “automations,” while Uncanny Automator refers to them as “recipes.” It is possible to have multiple automations/recipes on your site.

Either way, these configurations have two components:

Triggers
A trigger is the initial step in the process when a user performs a specific task. For example, common triggers could be when a user enters a comment on a blog post or purchases a product. Triggers can be set up for either logged-in or anonymous (logged-out) users.

Actions
An action is what happens after the trigger has been completed. Let’s say a user has joined a BuddyPress group on your website. You could create an action that automatically emails them a welcome letter or adds them to a mailing list.

It’s also worth noting that a given automation/recipe can contain multiple triggers and actions. In some situations, you can even set a sequence for them.

Example #1 (Uncanny Automator): When a Customer Purchases a Specific WooCommerce Product, Add Them to a BuddyPress Group

Our first example will tie both WooCommerce and BuddyPress together. When a customer purchases the “Beanie” product from our fictional store, we’ll also add them to our “Fashion Forward” BuddyPress user group.

We’ll use Uncanny Automator to set it up. Here’s how we did it:

1. Inside WordPress, navigate to Automator > Add New.

2. Uncanny Automator will ask you to select a recipe type. In this case, we’ll want to choose “Logged-in users.”  Click on “Confirm”.

Uncanny Automator: Select a recipe type

3. Give your recipe a name – in this example, we went with: “Add Beanie Buyers to the Fashion Forward BuddyPress Group.”

4. Under the “Logged-in triggers” area, click on WooCommerce.

5. Now, you’ll see a list of possible triggers. Choose: “A user completes, pays for, lands on a thank you page for an order with a product.”

6. Next, Uncanny Automator will ask for a Trigger condition. Select “completes” and click on “Save”.

7. Here, we’ll choose the product we want to target. From the list, select “Beanie” and click on “Save”.

Now that our trigger is set, it’s time to move on to the Actions portion of the recipe.

8. Click on “Add action”.

9. From there, click on BuddyPress.

10. Select “Add the user to a group” from the action list and click on “Save”.

11. Also, be sure to change the status on the upper right of the page from “Draft” to “Live”.

When completed, the recipe should look similar to the image below.

Uncanny Automator: A finished recipe

Example #2 (AutomatorWP): When a User Submits a Gravity Form, Create a New WordPress User

Our fictional website has a technical support form (powered by Gravity Forms) that users can submit to get help. If that user doesn’t have an account on our site, we can use AutomatorWP to create one for them.

This automation requires us to know the ID numbers of the fields in our Gravity Form. That can be found by clicking on specific fields within the form editor’s UI.

1. Inside WordPress, navigate to AutomatorWP > Automations. Once on the Automations screen, click on “Add New Automation”.

2. AutomatorWP will ask you to select the automation type. Select “Anonymous” and click on “Confirm”.

AutomatorWP: Select automation type

3. Give your automation a name – in this example, we went with: “Tech Support Form Entry Creates a New User”

4. In the Triggers area, click on Gravity Forms.

5. Choose “Guest submits a form” from the list of triggers. By default, the trigger will work with any form on our site. To change to a specific form, we clicked on “any form” and selected ours (Technical Support) from the list. Click on “Save”.

AutomatorWP: Locating the desired form from a list

Now that our trigger is set, it’s time to move on to the Actions portion of the automation.

6. In the Actions area, click on “New user.”

7. We can now fill in portions of the new user’s profile with fields from our form (via the Guest submits a form action). As we mentioned, this requires us to know the ID number for the various fields. In this case, we have fields for the user’s first and last name, along with their email address.

Gravity Forms: Locating the ID number of a field

Our form’s Email field (ID: 2) will be used to populate both the Username and Email fields in the user profile.

For the user’s name, we’ll use First Name (ID: 5) and Last Name (ID: 6) from the form.

AutomatorWP: Mapping form fields to the user account profile

8. There are a few more options within this action we’ll want to address:

The default user role is “Subscriber,” but we can change that in the Role setting if needed.

We’ll turn on the Send User Notification setting. This will send an email to the new user and provide a password reset link.

Then, we’ll set What to do if the user already exists: to “Do not run the actions”.

AutomatorWP: User notificaiton settings

9. Click “Save” to save the new automation action.

10. Finally, click “Save & Activate” to put the automation to work.

When completed, the automation should look similar to the image below.

AutomatorWP: A finished automation

Making WordPress Plugins Work Together

WordPress automation plugins can turn an otherwise time-consuming process on its head. With just a few clicks, it’s possible to create some seriously useful functionality.

And while some of the more advanced options require commercial software, it may be well worth the investment. Think of how much time and effort it would take to create these features from scratch. The convenience alone is worth the price.

Finally, there’s an easy way to make your site’s WordPress plugins work together. Experiment and see how it can help improve your workflow.

The post The Power of Automating WordPress appeared first on Speckyboy Design Magazine.

Did you miss our previous article…
https://www.1clanek.info/?p=756

Weekly News for Designers № 618

Showcode – Create beautifully-styled code snippets, then export them as an image with this handy tool.
Example from Showcode

Bootstrap Icons – A free, open-source library of 1,500+ icons to use in your projects (Bootstrap or otherwise).
Example from Bootstrap Icons

10 Free WordPress Plugins for Extending BuddyPress and bbPress – Turn your WordPress website into an online community with these free plugins.
Example from 10 Free WordPress Plugins for Extending BuddyPress and bbPress

React Aria – A library of React Hooks from Adobe that provides accessible UI primitives for your design system.
Example from React Aria

Developer Tools secrets that shouldn’t be secrets – Get the inside scoop on what your browser’s developer tools are capable of.
Example from Developer Tools secrets that shouldn’t be secrets

8 CSS & JavaScript Snippets for Creating Incredible Lighting & Shading Effects – It’s now possible to add lighting and shading effects that are nearly on par with what we see in video games.
Example from 8 CSS & JavaScript Snippets for Creating Incredible Lighting & Shading Effects

Spectrum – Add a base color and this tool will generate an entire palette for you.
Example from Spectrum

A 10-step approach to inclusive branding, using the BBC as an example – A look at how the BBC put together its accessible branding.
Example from A 10-step approach to inclusive branding, using the BBC as an example

GUI Challenges – A collection of solutions to common interface challenges.
Example from GUI Challenges

Those Things You Must Do When Ending a Freelance Design Project – There are some important things that most designers never do when ending a freelance project. Here’s why you should make the effort.
Example from Those Things You Must Do When Ending a Freelance Design Project

Getting out of the Freelance Pricing Trap – Learn how to start charging what you’re truly worth.
Example from Getting out of the Freelance Pricing Trap

Jam – This Chrome extension lets you give lightning-fast feedback on live websites without the frustration of screenshots.
Example from Jam

HTML Forms Library – This library contains ready-to-use code for forms and works with popular frameworks.
Example from HTML Forms Library

CSS Buttons – Check out this open-source collection of button styles for every use case.
Example from CSS Buttons

Despite Its Critics, jQuery Forges Ahead – The popular JavaScript library is still in active development and in use by three-quarters of the web.
Example from Despite Its Critics, jQuery Forges Ahead

FlowBite – This open-source library features 400+ web components built with Tailwind CSS.
Example from FlowBite

How I made Google’s data grid scroll 10x faster with one line of CSS – This case study demonstrates the troubleshooting process and how to implement a solution.
Example from How I made Google’s data grid scroll 10x faster with one line of CSS

The post Weekly News for Designers № 618 appeared first on Speckyboy Design Magazine.

Did you miss our previous article…
https://www.1clanek.info/?p=738