Stop Worrying About People Stealing Your Ideas

Ideas: the germs that grow into those great, award-winning designs we all want to have our names attached to. We all get dozens of ideas constantly, which typically range from fairly good to amazingly good. Ideas are an abundant commodity that we all have, as creative people.

In fact, most designers have more ideas than they know what to do with. Yet, most jealously hide their ideas, paranoid that someone will “steal” them and do something that will undermine their own fame as a designer.

Today, we’re going to explore some important reasons why it’s stupid to worry about anyone potentially stealing your ideas.

Ideas Mean Nothing

First of all, success is 99% execution. The sweat and hard work that go into making a design a reality is really what matters – that’s the important part. Only 1% of success is the idea. Ideas are useless on their own. We all get them – they only mean something if you make them happen. You can have ideas that are sort of ‘blah’, and yet still dominate your field through hard work.

The good news is, people who steal others’ ideas don’t realize this. They think it’s the idea itself that is valuable. But the truth is, a mediocre idea executed well is worth a lot more than a great idea executed poorly. So, if you have good ideas, and you work hard to turn them into something, you can always generate more ideas and have success as a designer.

Telling People Gives You More Ideas

Sharing your ideas will usually foster the development of new ideas. If you’re creative, that is (which you are; why else would you be reading this?). The person you share your ideas with can give you an outside perspective and some much-needed feedback about whether your idea is actually as good as you think it is.

You can also brainstorm together with others to come up with a myriad of different ideas, each one stronger than the last.

If you only have one idea, though, that’s a bad sign. It’s important to avoid ‘one-itis’ or fixating on a single idea to the exclusion of all others. You might be completely convinced that that one, single idea is the end all, be all thing that’s going to make your career, but it probably isn’t.

Success is a culmination of the little things, the daily triumphs we make each time we complete a new project that we’re proud of. So go out there and make as much work as you can.

Provide Value to Others

When you share ideas, you help the entire design community. It’s important to give back to your fellow designers who might be struggling with the same issues you did once upon a time. I’m not saying you have to give away all of your “trade secrets” (although even that’s not as taboo as it used to be).

But talking out an idea and letting others transform it in their own unique ways can inspire you as well. You might see a completely different approach to an idea that you hadn’t considered before.

all ideas grow out of other ideas quote black white

Someone Else Probably Thought of It Anyway

Exactly what it says on the tin. Ideas occur simultaneously to different people all the time, often without them even knowing it. This is why some work can look strikingly similar without the designers even having heard of each other. Great minds think alike. That’s the reason you can’t legally copyright an idea. We humans are just too similar in our thought patterns.

The key is taking an idea that other people might have already explored and doing it in your own unique way, using your experiences and skills as a designer to put an unconventional spin on it. As the saying goes, everything has been done before, but not by you.

Finally, keep in mind that ideas are rarely stolen wholesale anyway. Usually, someone takes bits and pieces of ideas from various sources (or they should, anyway). As we saw earlier, everything is a remix – not a direct copy.

Very few designers who have any pride in their abilities at all will actually want to steal your idea entirely. Those are called hacks – they’re very easy to spot, and the design community doesn’t normally tolerate them for long.

The post Stop Worrying About People Stealing Your Ideas appeared first on Speckyboy Design Magazine.

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

How WordPress Full Site Editing Could Impact the Design Process

The way we design and build WordPress themes is evolving. With the introduction of Full Site Editing (FSE), it is now possible to change every aspect of a site’s look and layout directly within the Gutenberg block editor.

Similar functionality has previously been available through the use of page builder plugins. It’s also something that the Customizer has long tried to address. But FSE provides a more cohesive experience.

Now, anyone with a block-enabled theme can perform everything from small style tweaks to massive layout overhauls. Additional plugins and coding skills are optional.

The potential impacts of this feature on the design process could be huge. Let’s take a look at what FSE brings to web design.

Building Prototypes in the Browser

For many designers, the process of building prototypes is completely separate from building the website itself. Tools such as Sketch, Figma, or Photoshop are used to create the look and layout. From there, client revisions are implemented and, once approved, it’s time to start on the theme.

With FSE, there’s an opportunity to move to a browser-based approach. Instead of having to translate a mockup into HTML, CSS, and JavaScript, the code is generated for us as we build. The mockup is a working website, rather than an abstract facsimile.

One can imagine the use of a block-based starter theme, which provides access to the basics of a typical website. The theme.json file can be used to configure default styles, which can then be tweaked within the Global Styles screen. Meanwhile, assets such as custom scripts and functionality are already in place – leaving a designer to focus more on crafting the perfect look.

This could lead to a more efficient workflow. In addition, stakeholders would get an accurate, real-time view of how a website works across multiple devices. And using the block editor eschews the need to dig into code to make design-related changes.

Like every other tool at our disposal, it’s in how we choose to use it. For some, browser-based prototyping could disrupt their creative flow. Others may see it as a major boost in productivity.

Faster Design = Less Creativity?

This approach isn’t without risk. It may lead to cutting corners and a certain sameness when it comes to design.

We’ve already seen this with some commercial theme frameworks. The same features and layouts are used ad nauseam. At worst, this might lead to designing based on convenience rather than need.

Access to theme templates via the block editor could, for example, disincentivize writing custom CSS. Instead of making an effort to create a unique look, the styles that are already available may be deemed as “good enough”.

There’s also the possibility of relying too much on the default styles that come bundled with various plugins or blocks. While some will blend into your existing theme, others require custom work to fit in.

The bottom line is that, just because Full Site Editing makes design faster, we still have to pay attention to the details.

WordPress Block Patterns

Adding Style Variations Through Child Themes

Child themes have been a part of WordPress for years. They offer a means of customizing the desired parts of a theme without the risk of losing them after an update. Update the parent theme, and the child stays intact.

FSE adds another layer, which could be useful in the design process. That is the ability to create style variations through child themes.

It involves making relevant changes to the child theme’s theme.json file. Justin Tadlock has a great write-up on the technique over at WP Tavern. There are plenty of possibilities here for web designers.

As it relates to our subject, this would allow designers to create multiple versions of a site’s design for stakeholders to consider. Switching designs is as simple as changing which child theme is active within WordPress.

Those variations could include any combination of custom color, typography, and layout. It’s great for projects where a client isn’t sure of what they want. In addition, websites that need a variety of design choices can make changes seamlessly.

These are all items that can be implemented alongside the initial design. And making such revisions in WordPress might be easier than trying to maintain multiple mockup files (which then have to be ported over to your theme).

The WordPress Themes screen

A New Way to Design for WordPress

While other content management systems offer some form of visual theme design, it’s only recently (as of version 5.9) come to WordPress. Thus, it’s a new workflow for designers who specialize in it.

Full Site Editing, like the Gutenberg block editor itself, has its quirks. It’s also in a constant state of change. New features are always right around the corner.

But even its early iterations point to changes in the web design process. For some, that could mean doing the bulk of their design work directly within a web browser. There’s great potential in terms of efficiency.

Yet, it’s also worth pointing out that FSE isn’t a requirement. The newly-termed “classic” WordPress themes still work just fine, as does the process for designing with them.

But if you’re ready for a change, FSE could be the tool you’ve been waiting for.

The post How WordPress Full Site Editing Could Impact the Design Process appeared first on Speckyboy Design Magazine.

Weekly News for Designers № 617

The start of a new era for Responsive Web Design – A look at the new techniques for creating responsive layouts with CSS.
Example from The start of a new era for Responsive Web Design

Designing our new company brand: Meta – You may have heard a little something about Facebook’s rebrand. Here’s the story behind its design.
Example from Designing our new company brand: Meta

Material Design 3 – Check out the latest version of Google’s design language.
Example from Material Design 3

Building an effective Image Component – How an intelligent image component can improve optimization and performance.
Example from Building an effective Image Component

Behind the Scenes: Having a Singular Focus for Your Web Design Business – The risks, benefits, and challenges of having a singular focus.
Example from Behind the Scenes: Having a Singular Focus for Your Web Design Business

Cleanup.pictures – Upload your image and this online tool will remove objects, text or defects.
Example from Cleanup.pictures

Anron Icons – Download this free icon set for Figma, with 480 icons available in 5 different styles.
Example from Anron Icons

An Introduction to the WordPress theme.json File – Explore this all-encompassing place for styling the block editor on both the front and back ends.
Example from An Introduction to the WordPress theme.json File

A Deep Dive Into object-fit And background-size In CSS – Get the rundown of these CSS properties, along with practical use cases.
Example from A Deep Dive Into object-fit And background-size In CSS

Web Performance Metrics Cheatsheet – This quick guide will fill you in on the most important aspects of site performance.
Example from Web Performance Metrics Cheatsheet

Is There a Perfect Solution to a Design Problem? – Why your “perfect” design doesn’t need to appeal to everyone.
Example from Is There a Perfect Solution to a Design Problem?

A Small Guide for Naming Stuff in Front-end Code – Guidelines for naming items in a descriptive and effective manner.
Example from A Small Guide for Naming Stuff in Front-end Code

Fontfacer – Upload your font files and this tool will provide you with the relevant CSS.
Example from Fontfacer

terminal.sexy – A tool for designing, editing and sharing terminal color schemes.
Example from terminal.sexy

The Top Add-Ons for the Gravity Forms WordPress Plugin – Enhance the popular WordPress forms plugin with these high-powered add-ons.
Example from The Top Add-Ons for the Gravity Forms WordPress Plugin

IconKitchen – Create your own custom app icons with this online generator.
Example from IconKitchen

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

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

8 HTML Code Snippets for Creating Responsive Newsletter Templates

Email newsletters are vital to keeping in touch with customers. And they can also serve various purposes, from sharing the latest news to providing helpful reminders. It’s still one of the best ways to reach your audience.

One of the keys to getting conversions (clicks, sales, etc.) is having a clean, easy-to-read newsletter template. But that’s not all. Your newsletters must also be responsive to account for the variety of mobile devices out there.

All told, the goal is to craft emails that are informative and look good on every screen. Thankfully, you don’t have to look far for inspiration. That’s exactly what the simple responsive email newsletter code snippets in today’s collection are for.

These sharply-designed snippets cover a variety of potential use cases. And they’d make a great starting point for your own project. Let’s get started!

Email Template Practice by Regina Catipon

This highly-visual email template provides the perfect look for showcasing your products. The mix of photos and short passages of text will help get the point across without overwhelming users. It encourages readers to click for more details.

See the Pen Email Template Practice by Regina Catipon

Simple Abandoned Cart Email Template by Maizzle

Sticking with eCommerce, abandoned cart emails offer an opportunity to casually remind customers about what’s waiting for them. In this attractive snippet, the message is simple and provides actionable information. It also leverages the popular Tailwind CSS framework.

See the Pen Simple Abandoned Cart Email Template by Maizzle

UI Guild / Email Template by Edmundo Santos

Email clients are still quite limited when it comes to compatibility with the latest CSS techniques. But here’s proof that you can still create something unique. The use of color and typography make this template stand out from the ordinary.

See the Pen UI Guild / Email Template by Edmundo Santos

Invoice email template by chetan

Some types of email messages should be as simple as possible – invoices are one of them. Some basic branding and a clear call to action are vital. It’s a solid example of a single-purpose message that provides users with exactly what they need to know.

See the Pen Invoice email template by chetan

VOH Facebook Live by Alisa Longoria

Event invitations are a great way to drum up interest in virtual or in-person happenings. This snippet not only looks great but also serves as a guide for content strategy. Recipients will instantly know what the event is, when it takes place, and how to register. That’s how you do it!

See the Pen VOH Facebook Live by Alisa Longoria

HTML Email Template – Blog by Josh Beard

Not everyone has time to check out your blog regularly. That’s where an email newsletter can help keep readers up-to-date. What makes this template sparkle is that it allows for effective branding and breaks posts down into bite-sized chunks. It’s easy for a reader to digest in a short period of time.

See the Pen HTML Email Template – Blog by Josh Beard

BMIC Newsletter Template by Tom Markart

Here’s another approach to a news-based email. It focuses on a single article while providing additional clickable headlines below. This might be a terrific option for non-profits who want to highlight a fundraising campaign, while also listing other relevant news. In addition, the typography in this snippet makes the newsletter very easy to read.

See the Pen BMIC Newsletter Template by Tom Markart

Welcome Email Template by Jude Francis

An onboarding email is a great way to welcome new users. Once again, simple is better. This snippet uses white space and clean typography to fill newbies in on the relevant details. Colorful icons also help to make specific items stand out.

See the Pen Welcome Email Template by Jude Francis

Email Templates for Every Need

In many ways, email template design lags in terms of available features. While that may be disappointing, it’s also an opportunity. Because email clients aren’t as savvy as modern web browsers, it forces designers to strip all the bells and whistles away.

This allows us to focus more on simplicity. It’s about promoting the message within rather than wowing readers with fancy extras. That’s something each of the snippets above does quite well.

Want to explore even more template options? Check out our CodePen collection and get inspired!

The post 8 HTML Code Snippets for Creating Responsive Newsletter Templates appeared first on Speckyboy Design Magazine.

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

Exploring Web Development History with Richard MacManus

The technologies web designers use today all had to start somewhere. The story of how they came to be is something that Richard MacManus wants to share with the world.

Located in New Zealand, MacManus has been involved in the industry since the 1990s. A writer and technology journalist, his latest project, Web Development History, is all about chronicling the history of the internet from a developer’s perspective.

Inside, you’ll find everything from web precursors dating back to the 1960s to the birth of JavaScript and beyond. They have all played a part in getting us to the present day.

I spoke with MacManus about the project, his beginnings in web design, and thoughts on the future of the web. His answers are lightly-edited for brevity/clarity.

How and when did you get started in web design?

I started out in the late 90s as first an “information developer” (a fancy name for a technical writer) and then a “webmaster” (not sure if this term is even used anymore!). I went on to be a “Web Manager” for a couple of New Zealand companies in the early 2000s, before starting up my tech blog ReadWriteWeb (RWW) in 2003.

I was a true web child of the 90s, in that I (am) self-taught (when it comes to) all the main web technologies. So, in those webmaster / web manager roles, I did a mix of web design, site architecture, and management, and even dabbled a bit in development. But it was when I began writing about the latest in web technology with RWW that I really found my niche.

What inspired you to start the Web Development History project?

A couple of reasons. Firstly, I’d read a lot of books and articles about the history of the web and the internet, but almost all of them (and certainly all the books) come at the subject from a business or cultural perspective.

I wanted to tackle web history from a technical point of view, and explain how the World Wide Web was actually developed and how it evolved — in a nuts-and-bolts way.

The second main reason is that, even though I spent nearly a decade covering the web technology industry with my tech blog turned media business RWW, I hadn’t necessarily delved deep into the technical foundations of the web during that time.

RWW began as one person’s exploration of the new web technologies coming out of Silicon Valley post-Dot Com boom and bust, but as RWW grew and became a proper business, it focused more on the revolutionary “Web 2.0” products and high-level trends that came along (e.g., social networking, cloud computing, the smartphone revolution, etc.).

So, with Web Development History (WDH), I wanted to return to my roots — as both a webmaster and a developer-focused blogger in the early days of RWW. My goal was to revisit the previous eras of the web and really dig into the technical foundations, to figure out how it evolved into this massive beast it is today.

Thinking of someone just coming into the industry – how can they benefit from learning its history?

I think it’s crucial for new web developers and designers to understand the foundations of what they’re building on — especially in this current era of abstracted frameworks (for JavaScript, CSS, etc.). The low-code tools available today also make it easier for people to build on the web, without necessarily understanding it.

So WDH is, I hope, a resource for people to learn the architecture of the web, how it began and then evolved over time, the most influential technologies, how web standards came to be, and so on.

Also, I think the industry is experiencing a renaissance of the web platform currently, with web standards and browser technology both at the cutting edge again — leading to Progressive Web Apps, cross-platform tools like Flutter, web components, and so on.

I cover all these new technologies, by the way, in my weekly column for The New Stack — so I see WDH as the perfect complement to the forward-looking column I also write. You have to understand the past first, before you build for the future.

Do you have a favorite facet or technology from the early web?

I love that Tim Berners-Lee invented the web browser as a read/write tool. It was an editor as well as a browser. The editing functionality, unfortunately, got stripped away as first Mosaic and then Netscape got popular, so the first era of the mainstream web (roughly 1993-2002) was ‘read-only.’

We had a term in the 90s, “brochureware,” that explains what many websites were — an extension of magazines, but they didn’t take advantage of the interactive functionality that Berners-Lee built into the web’s foundations.

Now with that said, as I’ve been writing WDH over this past year, I’ve looked more closely at technologies like CGI scripts and PHP that were being used to build early web apps in the 90s.

So, there was a lot of innovation happening with web apps. But writing to the web wasn’t something ordinary people could easily do from their browser. That was what Web 2.0 brought to the web, and indeed that was the thesis of my blog RWW.

You have a number of articles that cover the early browser wars. How do you think those events have impacted the web we use today?

It was a war that Microsoft decisively won by 1999, which unfortunately led to a period of low browser innovation — which lasted until Google Chrome came along. But there were a couple of major things that happened in the 90s in the first browser war, which influenced the direction of the web.

Firstly, Netscape introduced JavaScript in its browser in 1995 — which Microsoft promptly copied (jScript). Secondly, and perhaps less appreciated, was that Microsoft was the main influence behind the DOM (Document Object Model).

As I noted in one post, when Internet Explorer 4 was released in October 1997, it was the first browser to demonstrate a full-page object model — basically a prototype of the W3C DOM spec that would be released a year later.

So, both of those innovations, JavaScript and DOM, I think had major ramifications for our current highly interactive web.

The Web Development History home page.

You mentioned that the ultimate goal for this project is to publish a book. How will you determine when there’s enough content to go forward with it?

I’m still working out what might be the format for a book based on the blog. It may make sense to narrow the scope and choose a certain period (say, the 1990s) and develop a book proposal based on a particular theme. Or I might go all-in and write a full web development history.

So, I haven’t yet decided. Plus, it’ll also depend on what is attractive to book agents and publishers.

In terms of the blog, I do know that in 2022 I will be focusing on the 2000s — I’ve nicknamed this “season 2.” I may also change up the style of the posts; perhaps injecting more of my own personal story, since I chronicled this period for RWW and visited Silicon Valley a number of times. So, we’ll see how the blog evolves next year and whether I can continue to grow the audience.

Finally, as someone who has closely studied the web’s history, how do expect it to evolve over the next few years?

It’s an exciting inflexion point again. On the one hand, there are a bunch of very promising web platform technologies that I’ve been writing about for The New Stack. There are also potentially groundbreaking new technologies emerging — who knows how this metaverse talk will pan out, for example.

There’s also crypto and “Web3,” which I’m currently skeptical about — it’s just as likely to end in a Dot Com-like crash than become the next big thing. Again, time will tell, but I’m monitoring it.

Regardless of how it all shakes out, I think the web’s foundation is in a great place — web standards are healthy, browsers are innovating (although it’d be great if Apple got its act together and allowed other browser engines onto iOS), and there is a high level of functionality in web apps today.

I think there’s room for a move back to less complexity in the web frameworks of today, perhaps using things like web components more. But overall, I expect the web to continue to delight and surprise me over the next several years!


A big thank-you to Richard MacManus for taking time out speak with me! Be sure to check out Web Development History and connect with Richard on Twitter.

The post Exploring Web Development History with Richard MacManus appeared first on Speckyboy Design Magazine.

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

25 Free Bootstrap Dashboard & Admin Templates

In the past, the admin section of a web application tended to be built solely for functionality, with not much, if any at all, consideration for design. Thankfully things have changed. Powerful functionality and beautiful design, especially over the last few years, have been merging nicely. And with the massive rise in popularity of the Bootstrap framework, creating a beautiful and functional admin panel has never been easier.

Why would you choose to use Bootstrap at all? Well, with Bootstrap, you know exactly what you are getting. It is relatively easy to customize mobile-first framework that includes ready-made design patterns and comes packaged with a vast library of components and widgets. And perhaps more importantly, your Bootstrap build will look consistent across all screen resolutions and platforms. So it does make sense to build the dashboard or the admin panel of your web application with something that you know works well.

All of the free Bootstrap (mostly version 5) admin and dashboard templates and themes below have been pre-built to be used as a complete solution so that you can rapidly create the front-end dashboard of your web app. As well as all of Bootstrap’s handy collection of widgets, they all include many extra addons, plugins, and features (plugins for charts and graphs, calendars, file managers, and so much more). Everything you will ever need for building professional and responsive dashboards.

And on top of all of those features, these free templates have all been beautifully designed as well.

Free Bootstrap 5 Admin Templates

Star Admin 2 for Bootstrap 5 (Free)

Star Admin 2 is the new and much-improved version of the hugely popular Star Admin Pro. Now, powered by Bootstrap 5, the free template comes bundled with a multitude of layouts, widgets, components, and so much more.

Synadmin Bootstrap 5 Admin Template (Envato Elements)

The Bootstrap 5 powered Synadmin dashboard template comes bundled with over sixty HTML page templates, a huge collection of UI components (including multiple charting options), making it flexible enough to be used on any type of project.

Synadmin Bootstrap 5 Admin UI Kit

AdminWrap Bootstrap 5 (Free)

The simple and beautifully designed AdminWrap dashboard template comes with everything you would ever need for building powerful, user-friendly web applications.

AdminWrap Bootstrap Lite Bootstrap 5 Admin Dashboard Template Kit UI Free

Matrix Bootstrap 5 Admin Template (Free)

Powered by Bootstrap 5, the Matrix Admin is a fairly basic dashboard template but does offer everything you need to get the backend of your web application up and running quickly.

Matrix Admin Bootstrap 5 Admin Dashboard Template Kit UI Free

NobleUI Bootstrap 5 Admin Template (Envato Elements)

NobleUI is a lightweight and beautifully designed Bootstrap 5 powered dashboard template that includes a huge collection of reusable UI components and widgets, including charting options (ApexChart, ChartJs, Flot, Sparkline, and more).

NobleUI Bootstrap 5 Admin UI Kit

Xtreme Lite Bootstrap 5 Admin Template (Free)

The minimally designed Xtreme Admin is a Bootstrap 5 powered dashboard template that will allow you to display, track and manage all of your data in an efficient way. There is a Pro version available, but Lite does give you everything you need to get started quickly.

Xtreme Bootstrap Admin Bootstrap 5 Admin Dashboard Template Kit UI Free

Portal Free Bootstrap 5 Admin Dashboard (Free)

Portal is a clean and modern Bootstrap 5 dashboard template that offers modularly written code, making it much easier for you to edit and change the template to suit the needs of your application.

Portal  Bootstrap 5 Admin Dashboard Template Kit UI Free

Rocker Bootstrap 5 Admin Template (Envato Elements)

Rocker is a well-documented Bootstrap 5 admin template that comes bundled with over seventy pre-built page templates, and also includes color, light, and dark versions.

Rocker Dashboard Bootstrap 5 Admin UI Kit

Adminator Bootstrap 5 Admin Dashboard Template (Free)

The Adminator is a free Bootstrap 5 Admin Template that boasts a clean and simplistic design and offers a vast collection of copy and paste code snippets, utilities, custom pages, components, and widgets.

Adminator Bootstrap 5 Free Admin Dashboard Template Kit UI Free

Material Dashboard 2 Free Bootstrap 5 Admin Template (Free)

This free Bootstrap 5 template has been heavily inspired by the design aesthetics of Google’s Material Design. It comes with 60 pre-designed components and a multitude of pre-built design blocks making it a fantastic starting point for your next dashboard design.

Material Dashboard Free Bootstrap 5 Free Admin Template

Vue Material Design Bootstrap 5 Admin UI Kit (Free)

The Vue Material Design is a Bootstrap-based admin UI kit. It includes more than 500 elements, hundreds of icons, and plenty of templates and tutorials to help you design the perfect Material-inspired admin dashboard.

Vue Material Design Bootstrap 5 Admin UI Kit Free

Free Bootstrap 4 Admin Templates

Vibe – Free Bootstrap 4 Dashboard Template (Free)

Built with Bootstrap 4, Vibe is a free React.js admin template that offers a clean interface and plenty of UI elements and components to help you create a beautiful dashboard for your application. You will find a few helpful starter page templates as well.

Vibe Free Bootstrap 4 Dashboard Template

Amanda Responsive Bootstrap 4 Admin Template (on Envato Elements)

The Amanda Bootstrap 4 admin dashboard template features a beautifully designed corporate look and feel. It comes with a collection of starter page templates, and various charts widgets, email templates, toggle switches, time pickers, and many other components, elements and plugins.

Amanda Bootstrap 5 Admin UI Kit Dashboard Responsive

Now UI Free Bootstrap 4 Dashboard Template (Free)

Now UI is a Bootstrap 4 admin dashboard with a beautiful color scheme, elegant typography, a vast collection of pre-designed components and widgets, and seven pre-built HTML page templates.

Now UI Bootstrap 4 Dashboard Template Free Kit

Flatkit Bootstrap 4 Admin Template (on Envato Elements)

If you love flat design, you will love this Bootstrap admin template. It comes with six prebuilt layout templates and all the necessary UI elements and components to create the admin dashboard of your web application.

Flatkit Bootstrap 5 Admin UI Kit Dashboard Responsive

CoreUI Bootstrap 4 Admin Template (Free)

CoreUi is a free Bootstrap 4 admin template with a simple and modern color scheme. It comes with all of the components you would expect from Bootstrap, such as breadcrumbs, accordions, buttons, code editors, and more.

CoreUI Bootstrap Admin Template Kit UI Free

Gentelella – Free Bootstrap 4 Admin Template (Free)

Gentelella is an elegant admin template that features three dashboard variations and a collection of starter page templates. You will also find various UI elements, forms, tables, multi-level menus, a set of useful extra pages, and more.

Gentelella Free Bootstrap Admin Template

Light Bootstrap 4 Dashboard Template (Free)

The Light dashboard template has a spacious and minimal design. You will find tables, user profiles, icons, and Google Maps integration. The template is fully responsive and has been designed so that you can get the dashboard of your application up and running quickly.

Light Bootstrap Dashboard Template

AdminLTE – Free Bootstrap 4 Admin Template (Free)

The lightweight AdminLTE Bootstrap 4 admin template comes with six pre-designed skins, and includes a multitude of components, plugins, and page templates to help you quickly create a dashboard for your web application.

AdminLTE Free Bootstrap Admin Template

Free Bootstrap 3 Admin Templates

Bootflat Admin – Flat UI Bootstrap 3 Admin Dashboard (Free)

Bootflat Admin is an open source flat dashboard template. It’s based on Bootstrap 3 and it comes equipped with numerous templates and UI elements that will help you design a beautiful and colorful admin interface.

Bootflat Admin Flat UI Bootstrap Admin Dashboard Kit UI Free

Bracket Bootstrap 3 Admin (on Envato Elements)

Bracket Bootstrap Admin is an admin and dashboard template with a corporate look and feel. It comes with starter pages as well as various charts, email templates, toggle switches, time pickers, and many other elements.

Bracket Bootstrap Admin

Startmin – Open Source Admin Dashboard Template for Bootstrap 3 (Free)

Startmin is an open source admin dashboard template based on Bootstrap 3. It features a modern design and comes with charts, tables, form elements, and a useful set of starter pages.

Startmin Open Source Admin Dashboard Template for Bootstrap Kit UI Free

Admin.io Bootstrap 3 Admin Template (on Envato Elements)

If you’re looking for a Bootstrap 3 admin dashboard template with material design, look no further than Admin.io. This dashboard template also includes vector maps, flowcharts and graphs, icons and styling.

Admin.io Bootstrap Admin

Paper Dashboard – Free Bootstrap 3 Admin Template (Free)

Paper dashboard is a clean and minimal admin template based on Bootstrap 3. The template comes with 16 different components, 4 customized plugins, and 4 example page templates.

Paper Dashboard Kit UI Free Bootstrap Admin Template

SB Admin 2 – The Original Free Bootstrap 3 Admin Theme (Free)

The SB Admin 2 dashboard template comes with an elegant, corporate design. It comes packaged with tons of UI elements, various charts, forms, tables, and a set of demo pages that you can use as a starting point.

Kit UI Free SB Admin 2 Original Bootstrap Admin Theme

Lumino Free Bootstrap Admin Template (Free)

The Bootstrap 3 Lumino dashboard template has a fresh and clean design. It comes with dozens of widgets including forms, charts, UI Elements, panels, alerts, tooltips, menus, and much more.

Lumino Free Bootstrap Admin Template

Klorofil Free Bootstrap 3 Admin Template (Free)

The Klorofil admin template features a clean and professional design. It comes loaded with all the necessary page templates, UI elements, and components for creating any type of dashboard design.

Klorofil Free Clean Bootstrap Admin Template

Free Bootstrap 2 Admin Templates

RDash Bootstrap 2 AngularJS Admin Dashboard (Free)

RDash Angular has been built on Bootstrap 3 and Angular JS. It comes with a nice set of UI elements, tables, and a responsive, colorful design. It’s a great choice if you need a straightforward, simple interface.

RDash Angular Bootstrap 2 AngularJS Admin Dashboard Kit UI Free

Clean Dashboard Responsive Bootstrap 2 UI Theme (Free)

As the name suggests, the Clean Dashboard template has a clean design. The Bootstrap 2 dashboard template includes several unique UI elements that aren’t usually included in the Bootstrap package.

Clean Dashboard Responsive Bootstrap 2 Kit UI Free Theme

The post 25 Free Bootstrap Dashboard & Admin Templates appeared first on Speckyboy Design Magazine.

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