Schlagwort-Archive: Wordpress

An Introvert’s Guide to Finding Success in Web Design

Our brains are capable of some amazing feats. Yet, they work in different ways that can reflect in our personality. For instance, some of us gain contentment from putting ourselves out there in the crowd, while others prefer a quite room all to themselves. We’re a species of extroverts and introverts. One is not better than the other – just different.

However, when running a design business, you might think that being an extrovert is preferable. If you’re predisposed to going out and making new connections, that would seem to be an advantage over those who aren’t as keen on networking. But that’s not necessarily the case.

Consider that some of the world’s most successful people are introverts. We’re talking about the likes of Albert Einstein, Bill Gates and JK Rowling – to name just a few. They’re proof that you don’t have to be extroverted in order to find success.

Recently, I attended a talk at WordCamp Lancaster (US) that really shed some light on the subject. Aaron Campbell gave a fascinating presentation on succeeding as an introvert. Campbell, who leads the WordPress Core Security Team, spoke from the heart – having discovered that he fits into this personality type. There was some terrific insight into how our brains work, as well as adjustments that introverts can make to help their careers better fit into their comfort zones.

He was kind enough to sit down with me and share his story, insights and some sound advice for those of us who are introverts.

Aaron Campbell

Tell us a little about your background in web design.

I started pretty early, transitioning from running a Bulletin Board System (BBS) to doing things on the web in the early 90s. I remember when GeoCities came online in the mid-nineties and really gave everyone a playground on the web. It was game changing. Not because it was my introduction to it, but because there were suddenly other people being introduced to it and I could find people to talk to about HTML! At that time, and for a while after that, it was just for fun. I enjoyed the ability to create, and code – straight HTML in the early days of the web – was the medium that my brain worked in.

In 1999 I found myself transitioning, rather unexpectedly, into web development as a career. My parents’ company needed software to help manage it. They shipped cars through the southwestern US, had an office in San Diego and wanted to open another in Phoenix, and moved thousands of vehicles using only whiteboards on the walls to track them all. I thought I’d help them find the software they needed but when we couldn’t find anything that fit, I somehow found myself saying “I’ll just write you something”. It was an extremely uninformed offer – I had no idea what I was getting myself into – but I built the software, web based, and loved it.

I’ve been doing web development in some form or another ever since.

When did you realize you were an introvert? Had you already started your business at that point?

As a kid people had labeled me shy, rather than introverted, but shy and introverted aren’t the same and as it turns out…I’m not very shy. I didn’t realize I was an introvert, or at least I didn’t start to label it as such, until I had been in business for several years already. At that time, more than now it seems, being an introvert was looked at like a disadvantage. Like you were less – less likely to succeed, less of a leader, less capable. So I was somewhat reluctant to accept it.

What sort of challenges did this create for you as a freelancer?

People often say “it’s not what you know but who you know”, and there is a lot of truth to that, good or bad. Especially in the early stages of freelancing, I needed to make those connections. I needed to get people to hire me, or convince people to send me clients, and it was exhausting. While I was “succeeding“, it was taking a ton of energy and I wasn’t sure I could sustain that level of output. Looking back now, I can see that it was mostly because I was trying to act like an extrovert, but at the time it just felt like I was slowly failing.

Being an introvert can be challenging.

In your WordCamp Lancaster session, you mentioned that you sought advice from others. What type of advice did they offer, and, did it help?

I wish I had sought advice from a wider variety of people. Instead, I sought out those that appeared to be particularly successful at the one thing I felt like I was struggling most with – interacting with people, especially in larger groups, with seemingly no effort. Basically I consulted a bunch of extroverts, and the advice I got was the opposite of helpful. “Become an extrovert” was the message and I spent well over a year, probably closer to two, trying to do just that. It was extremely unhealthy for me, not to mention unsuccessful.

It seems like, as time has gone on, you’ve become much more comfortable with who you are. How have you adapted your career to better play to your strengths?

I made a lot of small adjustments along the way and even now I’m still learning and trying to constantly adjust my career to better fit my strengths. At the beginning, as I first started to accept that my strengths were not necessarily the exact same as some of my mentors, the changes were slow and tentative. As a full-time freelancer, I tried to change my focus from local small businesses to larger, more complex projects. Not because they paid better – at first they didn’t – but because the projects better fit with my strengths as an introvert. They reduced the number of energy-consuming in-person meetings and increased the amount of time that I spent focusing on writing code or solving a problem – things that kept my brain both engaged and relaxed. But making changes is never easy, especially in your career where making a change often means letting go of something that’s working and sustaining you.

It’s important to realize that “climbing up” in your career is a bit of a misnomer. It gives the impression there are only three options – up, down, or stagnant – and people even talk about it as a “ladder” which further enforces the “one path” concept. But the truth is, there are many different ways “up”. Choosing the right direction – the one that’s right for you is not the same as the one that’s right for someone else – is just as important, more I’d argue, than just moving up.

Looking back, adapting my career to better play to my strengths was just as much passing on opportunities as it was choosing them.

Choose the right opportunities.

You’re in quite an important position right now as the WordPress Security Team Lead. How has being an introvert meshed with the responsibilities and interactions that the job requires?

When it comes to security, I think calmer heads prevail. My introverted brain, preferring to be on the calmer side, lends itself to that. Also, most security work is done behind the scenes. People don’t see it, you don’t get credit or accolades, there’s not a lot of buzz – and I’m good with that.

You speak at a lot of conferences. Do you find those engagements to be stressful?

Not any more, although they definitely take a lot of energy. They used to be stressful, when I wasn’t so aware of the energy it took (or didn’t allow myself to admit it). Running out of energy – feeling exhausted but still feeling the need to perform – is highly stressful. Expending energy, even large amounts, isn’t bad though. We make tradeoffs with our energy all the time, spending energy to get back something that we deem worth it; walking miles because you’re at a mall and enjoy shopping, staying out late with friends because you value your time with them, even making dinner because you’re hungry and want to eat. Life isn’t only about conservation of energy, but I find that spending it purposefully helps. And for me, conferences are a place I enjoy spending some of my energy.

What advice would you give to other designers and developers out there who are introverts?

When I was younger, G.I.Joe was famous for telling kids that “Knowing is half the battle”. When it came to succeeding as an introvert, this was absolutely the key for me. Read up on why introverts and extroverts are different. There are a couple great books that I highly recommend as well; The Introvert Advantage: How Quiet People Can Thrive in an Extrovert World and Quiet: The Power of Introverts in a World That Can’t Stop Talking. Being introverted isn’t worse than being extroverted (nor the reverse), they simply have different strengths. Don’t try to change who you are or succeed how someone else does, you’ll burn out. Instead work to succeed by leveraging your own unique strengths.

Be comfortable with who you are.

Introverts Can Succeed

Many thanks go out to Aaron Campbell for taking the time to share his wisdom! I have to say, his session was inspiring. As someone who is also an introvert, I found myself identifying with his struggle and buoyed by his self-awareness.

For those of us who are in the same boat, Campbell shows us a path forward. By better understanding our own needs, we can make adjustments that lead to both success and happiness.

For more information on Aaron Campbell, visit his website or connect with him on Twitter.

The post An Introvert’s Guide to Finding Success in Web Design appeared first on Speckyboy Web Design Magazine.

via Speckyboy Web Design Magazine


5 Ways the WordPress Gutenberg Editor Can Boost Revenue

Part of being a successful web designer is taking advantage of new opportunities. Some we have to hunt for, while others sort of fall into our laps. With the new Gutenberg editor for WordPress, due to be released as part of WordPress 5.0, we find one of those golden opportunities coming our way (although, some may see it more like an oncoming freight train).

This is a big change in how content is created and managed. And with an enormous user base about to be affected, there is going to be a need for experts to step in and help out. While we’re at it, we might as well make a little cash as well. Let’s look at some Gutenberg-centric ways to boost your revenue.

Train Clients in the Ways of Gutenberg

While web professionals are quite aware of Gutenberg, many of the average WordPress users out there are not. It’s safe to say that these folks are in for a bit of culture shock once they lay eyes on this very different way of doing things. This is where you come in to be that knight in shining armor.

Offer to train your clients either individually or as a group. It could be done through a webinar or in person. Show them the basics of what Gutenberg can do and how they can leverage it to improve their content. They’ll benefit from the knowledge and should be much less nervous about the change. Depending upon how in-depth you go, this could provide you with a means to make some money as you help.

Train Clients in the Ways of Gutenberg

Test Existing Sites for Compatibility

There is concern that certain themes or plugins may not play nicely with Gutenberg. And, although efforts are being made to ensure backwards compatibility, there are no guarantees. Heavily customized sites would seem especially vulnerable to suffering from an unexpected issue or ten.

The only way to know if something’s going to work is to test it out. Since Gutenberg is available as a plugin for the time being, there’s an avenue for testing until WordPress 5.0 release candidates become available.

Testing takes time, though. A staging site would have to be installed locally or on a separate bit of hosting space. From there, you have to make sure everything runs the way it is supposed to – and that’s before Gutenberg is installed. You then have the privilege of installing the editor and thoroughly testing out the site. Lastly, you have to identify and (hopefully) fix any bugs that you find.

Providing this service may drive you crazy, but it can also result in some extra cash.

Test Existing Sites for Compatibility

Retrofit Older Themes

Any website running a pre-Gutenberg theme may not be able to fully take advantage of everything the new editor has to offer. While just about every included content block should work with any theme, there may be a need to tweak styling. For instance, there is a “Cover Image” block included that allows for full-width images. However, not every theme is set up to support images of that width.

That presents an opportunity for developers. While you’re educating clients about the benefits of block-based content creation, you might want to offer to ensure that their theme can handle everything Gutenberg will throw at it.

Even if you’re not an expert with regards to how to tweak themes for Gutenberg just yet, there’s plenty of help out there. The official handbook is a great place to start.

Create Custom Blocks for Clients

One of the truly cool features of Gutenberg is the ability to create your own custom blocks. It provides a lot of flexibility in terms of what you can do. For example, you may want to create a block that allows for multi-column layouts or one that includes site-specific styles. You can really use your creativity to produce blocks that solve problems.

When working with a client on a new site, building custom blocks for them could allow you to raise prices accordingly. It’s another way to make content management easier for clients. Convenience adds value, after all.

If you’re looking for some help in creating custom blocks, check out the Gutenberg Boilerplate. It will walk you through a few examples and help to get you off the ground in building your own solutions.

Create Custom Blocks for Clients

Be a Source for Support

Let’s face it: When a client has a problem, they’re most likely going to come to you. Therefore, you will become a source of support for their Gutenberg-related issues whether you like it or not. It’s just part of our job.

But there is some money in it, depending upon the type of arrangements you have with your clients. If you charge hourly for support or sell support packages, you have an opportunity to bring in some more revenue.

There are sure to be a plethora of issues and questions that arrive in your inbox. The bright side is that you might make enough money to pay for some exercise classes or enough adult beverages to counteract the stress of providing support.

Be a Source for Support

Change Brings Opportunity

Web design is constantly evolving. So often, the changes we see in the industry are related to some great new JavaScript framework or a new way to create layouts in CSS. They tend to directly impact designers more than clients.

But what’s unique about the arrival of Gutenberg is that it is something that affects users just as much as designers. And, when a change is this significant, there’s really no way to avoid it. It puts a lot of responsibility on us, but it also provides an opportunity to increase business. In that way, Gutenberg may make your 2018 a prosperous one.

The post 5 Ways the WordPress Gutenberg Editor Can Boost Revenue appeared first on Speckyboy Web Design Magazine.

via Speckyboy Web Design Magazine

10 Examples of Unorthodox Container Shapes Created with CSS

Sometimes it feels like we have a lack of creativity when it comes to building CSS containers. They’re either round, somewhat-round, square or rectangular. They get the job done, but aren’t especially unique or exciting.

But with modern CSS and an occasional dash of JavaScript, we can design containers that really stand out amongst the circles and squares. In fact, taking a short jaunt through CodePen provides plenty of inspiration in this area.

Here are 10 unorthodox container designs that eschew the standard shapes and kick things up a notch in their own way.

Notched Boxes

Chris Coyier of CSS-Tricks fame built this example that, while subtle, offers a much fresher take on the standard box. By simply angling off the sharp edges, we have a more nuanced look. This type of effect provides a much more artistic feel while maintaining usability.

Angled Full-Width Image

Images (or any container) that stretches out over the full-width of the viewport can really benefit from doing something a bit different in terms of shape. The angled borders we see in this example are a nice way of creating a cool visual effect that doesn’t overwhelm the user. Subtle is usually better.

Accent Containers

While we often use containers as places to hold content, they can also make for nice design accents. Take this example, where a few shifts of CSS border-radius create an interesting effect that also complements the content below.

Windows (Not That Kind)

CSS clipping paths can do some amazing things. They bring one of the staples of print design into a more interactive medium. Here, we have a clip-path used to create a window-shaped effect around a set of images – complete with beautiful hover animation.

Diamond Navigation Menu

What I love about this series of diamond-shaped buttons is that they turn what could be boring (a collection of navigation links) into something unique. While this may not be 100% simple to maintain in the long-term (adding items would require more CSS), it shows that you don’t have to settle for ordinary.

Diagonal Animation

As they say, why not make your entire page a non-standard shape? Okay, they probably don’t say that. But here we have an example of someone who did create a full-screen animation that bends along with your cursor position. One practical use might be to allow users to “reveal” an object hidden underneath.

The Famous Exploding Polygons

Polygon shapes are being used quite often in web design, but not necessarily in the same way as this example. Here they are used to build a letter (“J”, in this case) that explodes as you hover over it. It makes for an interesting logo and can add a bit of unexpected fun to a website.

A Curvaceous Container

Shaping text around an image is another one of those print effects that isn’t quite so easy to port over to the web. It takes some extra effort, but here’s a look at how stunning it can be. The whole container just has much more of a natural flow to it than one with standard squared-off text.

Corner Shaping

Buttons are another element where we too often settle for standard shapes. But in the right setting, something different can be quite welcome. These buttons not only have various notched-corners, but they also offer a shape-shifting hover animation as well.

A Badge of Honor

The good old badge is great for calling attention to a specific piece of content. However, we often see it used as an image. This example uses pure CSS (err, Sass) to create the same effect. What’s nice about this setup is that you could pair this up with a CMS like WordPress to make the contents of the badge dynamic. It looks great and would save plenty of Photoshop work.

The Shape of Things to Come

The use of shaped containers can open up the doors to all kinds of creative looks and layouts. And with the advent of techniques such as CSS Grid, it’s now possible to implement shapes on a much larger scale.

While the examples above may not be a perfect fit for every use case, they are proof that the web is slowly-but-surely moving beyond the basics. So, for your next project, try to literally think outside the box (or circle).

The post 10 Examples of Unorthodox Container Shapes Created with CSS appeared first on Speckyboy Web Design Magazine.

via Speckyboy Web Design Magazine

10 Examples of Effective Website Header and Footer Design

Both a website’s header and footer play an important role in the overall user experience. Each one provides an opportunity to establish branding and offer up a large dose of utility.

Headers have long been the focus of designers, as it’s the first thing a user will see upon visiting a site. We often use it as the main source of site navigation, but it can do more. A well-thought-out header could prove to be even more useful with features like search, ecommerce functionality and accessibility options.

The footer sometimes gets ignored, being relegated to display a copyright and perhaps a few links. This is a great waste of potential – especially for content-heavy websites. While we sometimes see a footer that is more or less a rehashed copy of the header, there are other area-appropriate items that we may be missing.

Today, we’ll take a look at some header and footer layouts that can serve as an inspiration. They make great use of their space and offer users a great deal of value.




The folks behind Kicklox did a fantastic job in developing a header that is easy to use and quite useful. Their potential users are a bit unique in that they might be engineers or those in need of hiring one. What’s nice here is that they’ve actually provided users with an option for choosing which category they belong to. It’s a prime example of how we can add utility that’s specific to a site’s purpose.



Undeveloped has an incredibly minimal and sparse header – and it makes perfect sense. They’re in the domain business and their goal is to get you to either buy or sell domain names. Their header focuses solely on this goal, without any extra clutter.

BucketListly Blog

BucketListly Blog

One of my pet peeves about headers is that we often try to jam so much information into a relatively small space – even on large screens. Here, the BucketListly Blog makes great use of the available real estate, stretching the full width of an HD screen. The navigation is incredibly simple and easy to spot, while the subtly designed search field above it isn’t trying to take attention away from more important things.

Fabienne Delvigne

Fabienne Delvigne

Fabienne Delvigne’s header is attractive, compact and has everything users need. The design blends in perfectly with the content below – adding a cohesiveness that I’ve rarely seen. Plus, the more utilitarian choices on the upper right are noticeable, but not intrusive. Also worth noting is that the header folds up quite nicely into a “sticky” version upon scrolling down the page.

The New England Journal of Medicine

The New England Journal of Medicine

When designing a website for an organization like The New England Journal of Medicine, there are so many needs to consider. Users not only have to be able to easily navigate through the various sections of content, but there’s also account management, subscriptions and other potential uses that require attention. In other words: The header has to do an awful lot. Something with this many needs could easily overwhelm users, but here it doesn’t. There’s great use of space and color to help guide users through the site’s many possible choices.




It’s not often that we see a footer being used as the sole source of navigation. Weboo pulls this off quite well, with an easy-to-understand “step” method of getting from one page to the next. Even better is that you can either click or use your mouse’s scroll wheel to navigate.

Block Collider

Block Collider

This is not your typical footer. Sure, there’s your standard mailing list signup. But check out the craziness happening at the very bottom. Two large animated blocks linking to related sites add a little excitement. When was the last time you saw a footer do that?

Dorpstraat Stellenbosch

Dorpstraat Stellenbosch

There’s nothing incredibly fancy about Dorpstraat Stellenbosch’s site footer. But again, we see a design that focuses on a particular action. They want you to sign up for their email list and aren’t shy about asking – but in a tasteful sort of way.

Orenda Security

Orenda Security

Here’s a case of using the site’s footer to accomplish just as much branding as you’d typically see in a header – only on a larger scale. Orenda Security features a large, animated logo, navigation and contact info in a full-screen view. That’s something unique that you might only attempt to do with a footer, and it works quite nicely.

Dedeman Hotels & Resorts International

Dedeman Hotels & Resorts International

There’s an awful lot of utility to Dedeman’s footer area. Newsletter subscription form, social sharing and affiliated sites are all there and beautifully put together. So often, we try to make footer design elements tiny and almost unnoticeable – not so in this example. All the desired actions are big, colorful and easy to use.

The Top and Bottom of It

One of the most valuable lessons to be learned from the examples above is that it’s okay to create a header or footer that is unique to your brand. That doesn’t mean you necessarily shy away from some tried-and-true principles. But it does mean that we have some creative freedom to do things that both look good and are useful. May it inspire you to use your creativity to build something that gives users everything they need, but with your own personal touch.

The post 10 Examples of Effective Website Header and Footer Design appeared first on Speckyboy Web Design Magazine.

via Speckyboy Web Design Magazine

Expanded Course: Learn PHP for WordPress

If you’re ready to take your WordPress skills to the next level and get your feet wet with PHP, you’ll love our newly expanded course, Learn PHP for WordPress.

What You’ll Learn

In this course, Envato Tuts+ instructor Rachel McCollin will give you an overview of what PHP is and how it’s used for WordPress themes and plugins, with examples. 

Learn PHP for WordPress screenshot

You’ll go on to learn how to create a PHP file and use it to output HTML. Then you’ll learn to use functions, loops and if statements for coding custom WordPress themes and plugins.

This course has recently been updated with seven new lessons to help you understand the details of PHP and how you can use PHP with WordPress. So dive right in, or watch the introduction below if you want to find out more about it first.

Watch the Introduction



Take the Course

You can take our new course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+. 

Plus you now get unlimited downloads from the huge Envato Elements library of 460,000+ creative assets. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.

from Envato Tuts+ Code – WordPress

10 Best Ad Manager WordPress Plugins

It wasn’t very many years ago when everyone was trying to make a quick buck on a blog. Fast-forward just a few years, and the entire scene has changed radically.

Selling advertising on a website isn’t as easy as it once was. The „Golden Age of Blogging“ has certainly passed, but that doesn’t mean monetization has come to an end. It simply requires more effort on behalf of publishers and content creators.

Whether you’re selling ads to a third party or you’re using your platform to promote your own content, a solid advert plugin can make all of the difference. To get you started, here are the 10 best ad manager WordPress plugins from Envato Market:

1. Ads Pro Plugin – Multi-Purpose WordPress Advertising Manager

Ads Pro Plugin – Multi-Purpose WordPress Advertising Manager is one of the best ad manager WordPress plugins you’re going to find.

It’s a full-featured tool that provides plenty of advertising options on the front-end with a robust toolset to manage ads. 

Ads Pro Plugin - Multi-Purpose WordPress Advertising Manager

With over 20 ways to display ads, you’ll also find:

  • 3 billing models
  • 4 payment methods
  • WooCommerce integration
  • language and currency translation
  • random ads, capping option, fully customizable
  • and much, much more!

With helpful support and video guides, your ads will be up and running quickly and easily.

From full online statistics to a useful front-end user panel, the Ads Pro Plugin – Multi-Purpose WordPress Advertising Manager is the ultimate in ad manager WordPress plugins.

2. WP PRO Advertising System – All In One Ad Manager

The WP PRO Advertising System – All In One Ad Manager is one of the more robust ad manager WordPress plugins.

It not only includes all the features you would want from an ad manager, it also includes a visual banner designer.

WP PRO Advertising System - All In One Ad Manager

Features include:

  • schedule ads
  • target user tools
  • banner click heatmap
  • supports all major ad networks
  • ad buyers can purchase, manage, and edit ads
  • pay/click, pay/view, and pay/day billing contract options
  • and much, much more

From ad sales to ad designs, this turnkey solution is ready to get any WordPress site up and running with a complete advertising system.

WP PRO Advertising System – All In One Ad Manager is the easy way to manage your advertising.

3. Pro Ads Buy and Sell – WooCommerce

If you already love WooCommerce, you’re going to love the Pro Ads Buy and Sell – WooCommerce plugin.

There’s no feature bloat here—this streamlined solution leverages WooCommerce to sell advertising.

Pro Ads Buy and Sell  WooCommerce

Features include:

  • front-end ad buys and banner uploads
  • payments handled by WooCommerce
  • users can view their own banner statistics
  • and more

Pro Ads Buy and Sell – WooCommerce isn’t just an ad manager for those already running WooCommerce—although very convenient for those that already are. This is a simple ad sales solution that’s viable for anyone looking for something more straightforward.

4. Affiliate Links — WordPress Plugin for Link Shortening and Masking

Not all advertising is about banner ads. If affiliate links are your thing, you need to check out the Affiliate Links — WordPress Plugin for Link Shortening and Masking plugin.

Affiliate Links  WordPress Plugin for Link Shortening and Masking

„Affiliate Links is a premium WordPress plugin that allows you to mask any URL in order to create and shorten any internal or external links.“

Features include:

  • link click stats
  • conditional redirects
  • Google Analytics tracking
  • and more

There’s no need for a robust ad manager WordPress plugin if all you need is to manage affiliate links. This is what you need.

With Affiliate Links — WordPress Plugin for Link Shortening and Masking, take control over your affiliate links with widgets, shortcodes, and more.

5. Advanced Floating Content

Not all types of online marketing and advertising require the same tool.

If content marketing is your game, then Advanced Floating Content is what you want.

Advanced Floating Content

Features include:

  • easy to customize
  • shortcode support
  • float your content in just about any place and any way
  • supports video embedding, social media sharing, HTML code
  • and much more

Don’t let your chance float away—get your online visitors‘ attention using the Advanced Floating Content WordPress plugin.

6. Ad Overlay Anything – Videos, Images or Text

Place your advertising where your web user is looking—videos, images, and text! Ad Overlay Anything – Videos, Images or Text does exactly that, by making it easy to add an overlay over videos, images, or text.

Ad Overlay Anything - Videos Images or Text

„If a visitor to your website is viewing certain content, for example, then they are more likely to be interested in products or services relating to that content. Tailoring your advertisements this way allows you to drastically increase your conversion rates and truly make the most out of your advertising space.“

The Ad Overlay Anything – Videos, Images or Text is simple, straightforward, and highly effective.

7. Popup Banner WordPress Plugin – Float Banners

Popup Banner WordPress Plugin – Float Banners is perfect for quick and simple advertising.

You don’t always need a robust ad manager, so keep it simple with something like a popup banner.

Popup Banner WordPress Plugin - Float Banners

Features include:

  • five banner positions
  • track views, clicks, and CTR
  • customize banner behaviors
  • and more

Setting the minimum width screen width for display is one of the strongest floating banner options. If you don’t want to show banners for those on a mobile device, you can easily stop it from displaying with this feature.

Prepare your jpeg, png, or gif image file and get the Popup Banner WordPress Plugin – Float Banners started.

8. Advert Flap Pro

Advert Flap Pro is one of the most fun ways to display an advert.

It’s stylish, animated, and easy to use. And best of all, it gets your attention.

Advert Flap Pro

„Advert Flap Pro is an animated advert for WordPress sites. It is one of the most effective ways to get a message or advert out to people on your site without the intrusiveness of modals or popups.“

With over 23 styles built in, you can add as many instances as you need, schedule, and only display on specific pages.

Check out Advert Flap Pro. It’s a lot of fun, and if you don’t want it to be animated, the static version is clean and sharp.

9. Banners Rotator Generator For WordPress

Perhaps the best ad manager isn’t a WordPress plugin. Maybe it’s you?

With the Banners Rotator Generator For WordPress, you can set up and manage your own ad spaces.

Banners Rotator Generator For WordPress

Features include:

  • edit all banners
  • customizable parameters
  • WordPress upload system support
  • and more

Banners Rotator Generator For WordPress is a quick, easy, and simple way to add and manage banner ads on any WordPress site.

10. AdBlock Monetizer – WordPress Plugin

An ad manager WordPress plugin won’t help if web users are using AdBlock—blocking revenue-generating advertising.

Fight back with the AdBlock Monetizer – WordPress Plugin!

„This plugin is able to detect adblock software.“

AdBlock Monetizer - WordPress Plugin

The concept is simple:

This plugin allows visitors to view your website content with AdBlock enabled, if they agree to pay. Otherwise, they must disable AdBlock to view your website.

Features include:

  • PayPal support
  • customize price and currency
  • customize period of time the pages are accessible
  • and much more

AdBlock Monetizer – WordPress Plugin not only offers websites some relief from AdBlock, but also educates websites on the real cost of ad blockers.


There are many different ways to monetize your WordPress website with advertising. While a robust ad manager WordPress plugin may very well be the best and most effective way for many, there are still those that would greatly benefit from a unique approach.

Before diving in and purchasing the most robust solution, make a list of what you require and a list of what would be really nice to have but not essential. Once you’ve got this done, review this list and see what solution works best for what you need—and maybe even a few things you want.

Envato Market has many different advertising WordPress plugins that may also be helpful, as well as some great advertising how-to tutorials and a wide variety of helpful eBooks.

What are the most important features you look for in an ad manager WordPress plugin?

from Envato Tuts+ Code – WordPress

10 Unique Examples of Drag-and-Drop UI

Drag-and-drop has been with us for decades. It helps us to get things done on both our desktop and mobile apps and operating systems. There’s both a simplicity and intuitiveness that has led to it become one of the most universal UI features.

So it’s no wonder that drag-and-drop has invaded the web over the past few years. From uploading files in Dropbox to sorting our Trello boards – its usefulness has been proven time and again.

There are a number of creative ways we can implement these interfaces into our own designs. Let’s take a look at 10 unique examples of drag-and-drop UI from CodePen:

Learn the Basics

Before you can go really in-depth with implementing drag-and-drop, it’s important to learn some fundamentals. That’s where this simple snippet that utilizes Angular can come in handy. It’s a basic exercise in dragging a square element from one side of the screen to the other. An alert pops up when you’re finished. Nothing fancy, but it could be useful for grasping the concepts involved.

Draggable Panels

Speaking of Trello, the task management tracker’s implementation of drag-and-drop is incredibly useful. Here’s an example that stays pretty faithful to what makes Trello so cool. You can drag panels from column to column, and there’s an awesome color-changing effect when something is moved to a new spot.

Build Your Own Kaleidoscope?

This is example is both quite breathtaking and a bit trippy. It utilizes HTML 5 Canvas and some JavaScript to create a movement-aware kaleidoscope. But wait, there’s more! You can also drag an image into the UI, thus changing the image displayed within kaleidoscope. All I can say is, “far out”.

Drag a Simple Page Element

On our desktop or laptop computers, we sometimes want to move a specific element off to the side. It’s still in view – but out of the way of other, more important items. That’s exactly what this dead-simple jQuery button does for the web. Move it to anywhere on the screen for later viewing.

HTML5 Drag-and-Drop API

Did you know that HTML5 has its own drag-and-drop API? I ask only because I had no clue. Here, it’s combined with some JavaScript to enable the swapping of squares. While this is a simple example, it shows the potential of tapping into the API.

Form Builder

We often see drag-and-drop used with forms. A WordPress Plugin like Gravity Forms comes to mind, where fields can be added and repositioned quite intuitively. Here we have a form builder UI that uses HTML5 and Angular.js.

Scalable Pixel Art

Adding images via drag-and-drop is quite common. But, like the kaleidoscope above, this snippet provides a unique use case. You can drag an image into a specified div and it creates CSS-based pixel art that can be scaled to up to 20x the original size. It also outputs CSS code to paste into your project. A good representation of how useful this UI can be.

Easily Add Events

The ability to rearrange data is a prime use of dragging. This calendar example shows how we can use the UI to place events on specific dates and even switch between dates, if necessary. It shows how implementing drag-and-drop can take the pain points out of common tasks.

It’s a Knockout

The file upload field has been around for years. But drag-and-drop makes it so much more user friendly. Here we have a couple of example fields using Knockout.js. The first allows for dragging a single file, the other allowing for multiple uploads. But both offer a preview of the file, adding further visual confirmation to the UI.

Moving From a Scrollable Container

This is one we don’t see very often. The scrollable container at the top of this snippet contains boxes that can be moved to another div down below. It shows that a scrollable interface can be quite usable in this type of scenario.

Dragging You Towards a Better UI

There are a number of ways that a drag-and-drop UI can benefit the user-friendliness of your website. Hopefully, the examples above will provide you with some inspiration regarding how you can use this familiar feature to enhance your projects.

The post 10 Unique Examples of Drag-and-Drop UI appeared first on Speckyboy Web Design Magazine.

via Speckyboy Web Design Magazine