G$earch

6 Cool Image Captions with CSS3

Posted by Harshad

6 Cool Image Captions with CSS3


6 Cool Image Captions with CSS3

Posted: 19 Oct 2012 02:43 AM PDT

CSS3 is really powerful. It used to be that we need images or a bunch of JavaScript codelines to make a simple transition effect. Nowadays we can do the same with only CSS3.

Image Creation

In this tutorial, we will show you how to create image captions with various transitions simply using CSS3.

Browser Support

This caption will be much dependent on transform and transition properties which are relatively new features, so, it would be wise to take note of the browser support needed to run the caption smoothly.

The following are browsers that already support transform and transition:

  • Internet Explorer 10+ (not released yet)
  • Firefox 6+
  • Chrome 13+
  • Safari 3.2+
  • Opera 11+

Now, let’s start the tutorial.

HTML Structure

We have 6 images; each image with a different caption style.

  <div id="mainwrapper"><!-- This #mainwrapper section contains all of our images to make them center and look proper in the browser ->  	<!-- Image Caption 1 -->  	<div id="box-1" class="box">  		<img id="image-1" src="css3-image-captions/1.jpg"/>  		<span class="caption simple-caption">  		<p>Simple Caption</p>  		</span>  	</div>        <!-- Image Caption 2 -->      <div id="box-2" class="box">          <img id="image-2" src="css3-image-captions/2.jpg"/>          <span class="caption full-caption">          <h3>Full Caption</h3>          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>          </span>      </div>        <!-- Image Caption 3 -->      <div id="box-3" class="box">          <img id="image-3" src="css3-image-captions/3.jpg"/>          <span class="caption fade-caption">          <h3>Fade Caption</h3>          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>          </span>      </div>            <!-- Image Caption 4 -->      <div id="box-4" class="box">          <img id="image-4" src="css3-image-captions/4.jpg"/>          <span class="caption slide-caption">          <h3>Slide Caption</h3>          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>          </span>      </div>            <!-- Image Caption 5 -->      <div id="box-5" class="box">          <div class="rotate"><!-- Rotating div -->              <img id="image-5" src="css3-image-captions/5.jpg"/>              <span class="caption rotate-caption">              <h3>This is rotate caption</h3>              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>              </span>          </div>      </div>        <!-- Image Caption 6 -->      <div id="box-6" class="box">          <img id="image-6" src="css3-image-captions/6.jpg"/>          <span class="caption scale-caption">          <h3>Free Style Caption</h3>          <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>          </span>      </div>  </div> <!-- end of #mainwrapper-->

Basic CSS

Before styling any element, it is always a good start to reset all the properties using this CSS reset and give them their default style values, so all browsers will render the same result (except maybe, IE6).

The styles will be separated in style.css file, so our HTML file will look neat. However, do not forget to add a link style inside the head tag to apply the styling rules in the file.

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

OK, let’s begin styling the element, starting from the html tag and the main wrapper id:

  html { background-color: #eaeaea; }    #mainwrapper {    font: 10pt normal Arial, sans-serif;    height: auto;    margin: 80px auto 0 auto;    text-align: center;    width: 660px;  }

Basic CSS

Image Box Style

We apply some common styles in the boxes containing the images. The boxes will be displayed side by side using float left. Notice that we also added overflow: hidden property; this will make all objects inside that pass through the div to be hidden.

We also declare transition property on every image inside the box, in case we need the image transition later on.

  #mainwrapper .box {      border: 5px solid #fff;      cursor: pointer;      height: 182px;      float: left;      margin: 5px;      position: relative;      overflow: hidden;      width: 200px;      -webkit-box-shadow: 1px 1px 1px 1px #ccc;      -moz-box-shadow: 1px 1px 1px 1px #ccc;      box-shadow: 1px 1px 1px 1px #ccc;  }    #mainwrapper .box img {      position: absolute;      left: 0;      -webkit-transition: all 300ms ease-out;      -moz-transition: all 300ms ease-out;      -o-transition: all 300ms ease-out;      -ms-transition: all 300ms ease-out;      transition: all 300ms ease-out;  }

Image Box Style

Caption Common Style

The caption will has some common styles and also transition property. Rather than use opacity property, we use the RGBA color mode with 0.8 for the alpha channel to make the caption look a bit transparent without affecting the text inside.

  #mainwrapper .box .caption {      background-color: rgba(0,0,0,0.8);      position: absolute;      color: #fff;      z-index: 100;      -webkit-transition: all 300ms ease-out;      -moz-transition: all 300ms ease-out;      -o-transition: all 300ms ease-out;      -ms-transition: all 300ms ease-out;      transition: all 300ms ease-out;      left: 0;  }

Caption Common Style

Caption 1

The first caption will have a simple transition effect that is commonly used for a caption. The caption will come up from the bottom when we hover over the image. To address it, the caption will have a fixed height of 30px and we apply its bottom position -30px to hide it below the image.

  #mainwrapper .box .simple-caption {      height: 30px;      width: 200px;      display: block;      bottom: -30px;      line-height: 25pt;      text-align: center;  }

Caption 2

The second type has the full width and height of the image/box dimension (200x200px) and the transition would be like a sliding door effect only that it will slide from top to bottom.

  #mainwrapper .box .full-caption {      width: 170px;      height: 170px;      top: -200px;      text-align: left;      padding: 15px;  }

Caption 3

The third caption will have fading effect. So, we added opacity: 0 for its initial state.

  #mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption {      opacity: 0;      width: 170px;      height: 170px;      text-align: left;      padding: 15px;  }

Caption 4

The fourth caption will slide from left to the right, so we fixed 200px to the left (left:200px) as its initial position.

  ** Caption 4: Slide **/  #mainwrapper .box .slide-caption {      width: 170px;      height: 170px;      text-align: left;      padding: 15px;      left: 200px;  }

Caption 5

The fifth caption will have rotating effect. It is not just the caption that will rotate, but also the image. It is more like the changing of position by rotating.

So, we add transform property with a -180 degree rotation, unless you prefer rotating your monitor to read the caption.

  #mainwrapper #box-5.box .rotate-caption {      width: 170px;      height: 170px;      text-align: left;      padding: 15px;      top: 200px;      -moz-transform: rotate(-180deg);      -o-transform: rotate(-180deg);      -webkit-transform: rotate(-180deg);      transform: rotate(-180deg);  }    #mainwrapper .box .rotate {      width: 200px;      height: 400px;      -webkit-transition: all 300ms ease-out;      -moz-transition: all 300ms ease-out;      -o-transition: all 300ms ease-out;      -ms-transition: all 300ms ease-out;      transition: all 300ms ease-out;  }

Caption 6

The last caption will have scale transform. However, in the previous captions, the text inside it will actually show along with the .caption transition shift. In this section we will make it a bit different.

The text will appear after the transition shift is done. So, we add transition-delay on the text, in this case the h3 and p tag.

  #mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p {      position: relative;      left: -200px;      width: 170px;      -webkit-transition: all 300ms ease-out;      -moz-transition: all 300ms ease-out;      -o-transition: all 300ms ease-out;      -ms-transition: all 300ms ease-out;      transition: all 300ms ease-out;  }    #mainwrapper .box .scale-caption h3 {      -webkit-transition-delay: 300ms;      -moz-transition-delay: 300ms;      -o-transition-delay: 300ms;      -ms-transition-delay: 300ms;      transition-delay: 300ms;  }    #mainwrapper .box .scale-caption p {      -webkit-transition-delay: 500ms;      -moz-transition-delay: 500ms;      -o-transition-delay: 500ms;      -ms-transition-delay: 500ms;      transition-delay: 500ms;  }

Caption Common Style

Let’s Make Them Move

In the following section, we will define the behavior of the caption when we hover over the images or boxes.

Caption Behavior 1: Show up.

For the first caption, we would like it to show up (from the bottom) when we hover over the box. To address this move we use transform property and the CSS code below tells the caption to move 100% of its weight to the top.

  #mainwrapper .box:hover .simple-caption {      -moz-transform: translateY(-100%);      -o-transform: translateY(-100%);      -webkit-transform: translateY(-100%);      transform: translateY(-100%);  }

If you don’t get the point of having negative value for the translateY, you might want to read this tutorial first to get more insight.

Caption Behavior 2: Move it down.

Conversely, the second caption will move down from the top. So, we will have positive value for translateY.

  #mainwrapper .box:hover .full-caption {      -moz-transform: translateY(100%);      -o-transform: translateY(100%);      -webkit-transform: translateY(100%);      transform: translateY(100%);  }  

Caption Behavior 3: Fade in.

The third caption is actually the easiest one. When the box is on hover the caption opacity will turn to 1 making it visible, and since we have added transition property in the caption class, the transition should run smoothly.

  #mainwrapper .box:hover .fade-caption {      opacity: 1;  }

Caption Behavior 4: Slide it to the left.

As we mention before, this caption will slide form the left, however, the image will also slide out to the right. So, here we have 2 CSS declarations.

The CSS code below indicates that when we hover over the box the caption will slide 100% of its width to the left. Notice that we now use translateX, because we want the slide to move horizontally from right to the left.

  #mainwrapper .box:hover .slide-caption {    background-color: rgba(0,0,0,1) !important;    -moz-transform: translateX(-100%);    -o-transform: translateX(-100%);    -webkit-transform: translateX(-100%);    opacity: 1;    transform: translateX(-100%);  }

When we hover over the box the image will slide out to the left.

  #mainwrapper .box:hover img#image-4 {    -moz-transform: translateX(-100%);    -o-transform: translateX(-100%);    -webkit-transform: translateX(-100%);    transform: translateX(-100%);  }  

Caption Behavior 5: Rotate it.

This caption is different from the rest, as it will not move from right or left, but will rotate. When the box is on hover, the div containing the image and the caption will rotate -180 counter-clockwise hiding the image and showing the caption.

  /** Rotate Caption :hover Behaviour **/      #mainwrapper .box:hover .rotate {      background-color: rgba(0,0,0,1) !important;      -moz-transform: rotate(-180deg);      -o-transform: rotate(-180deg);      -webkit-transform: rotate(-180deg);      transform: rotate(-180deg);  }  

Caption Behavior 6: Scale it up.

This caption will combine several transform effects. When the box is on hover the image will scale up by 140% (1.4) from its initial dimension.

  	#mainwrapper .box:hover #image-6 {      -moz-transform: scale(1.4);      -o-transform: scale(1.4);      -webkit-transform: scale(1.4);      transform: scale(1.4);  }

And if you saw the CSS above under Caption 6 heading, we have hidden the text to the left by 200px. This CSS code below tells the text to move to their initial position. So, the text will slide in from the left to the right simultaneously.

  #mainwrapper .box:hover .scale-caption h3,  #mainwrapper .box:hover .scale-caption p {      -moz-transform: translateX(200px);      -o-transform: translateX(200px);      -webkit-transform: translateX(200px);      transform: translateX(200px);  }  

Summary

Although these CSS features are cool, but it is not widely applicable yet, due to the browser support limitations we have mentioned earlier. However, keep experimenting with these new features, because this is the way we will be shaping a web page in the future.

Credits

Image thumbnails in the tutorial are taken from the following websites (screenshot):

Related posts:

  1. A Look Into: CSS3 2D Transformations
  2. Creating Advanced “Marquee” with CSS3 Animation
  3. How to Create Gmail logo with CSS3
  4. CSS3 Border-Image Property: Making Photos Really Cool!

Freelancers: Handle These 9 Client Types like a Pro

Posted: 19 Oct 2012 02:44 AM PDT

Editor’s note: This is a contributed post by Jordan Driediger, an entrepreneur, public speaker, and writer from Toronto, Canada. He is the CEO of his own company DM2 Studios LLC. He and his company are dedicated to support the creativity and inspiration in others.

The freelancer-to-client relationship is a tricky thing to deal with. Your ability to work with the various types of clients can make or break your freelancing career. To help you deal with this problematic area, here is a breakdown of the most common client characteristics that may curse your creative career.



(Image Source: Fotolia)

Every client is different. Although we can find faults with each client we work with, we as freelancers need to overlook their strange tendencies, and learn how to interact effectively with them. I hope this guide will help you identify your client’s needs, and increase your success as a freelancer.

1. The Curious

The Curious client can be a frustrating one. When you first meet them, you are thrilled that someone can be so interested in your work! They are generally hyperactive, very friendly, and very talkative.

When you begin work on a project, you may be inclined to share the ins and outs of what you do with this client. Teaching a client is fine, especially if the work you are doing for them requires ongoing maintenance. However, as time passes you may find they take up too much of your time, and can be to be a hindrance to your productivity.

How to Handle Them

They want information. This type of client doesn’t just want to know what you’ve done but also how you did it. They will request meetings on a regular basis and guides on how you performed specific tasks. Once you start feeding them, they only get hungrier. With the Curious client, it is always beneficial to address the issue directly:

Say you’re busy. Let them know bluntly that your time is limited, and that you want to focus on the work they’ve assigned – they will usually understand and respect your time.

Set time limits. You should set end times for every meeting and every phone call you have with this person. This will force both of you to focus on the work at hand.

Become a consultant. When they start asking too many questions, offer them your services as a paid consultant. This way, even if you do talk for a few hours, you will get paid for your time.

2. The Oblivious

The Oblivious client never cease to amaze you with their lack of knowledge about your work. In their defense, they are usually part of an older generation. While they can be kind and patient, they bring with them a unique set of challenges. You cannot message the Oblivious on Facebook, because they don’t have an account. You cannot use your favorite movie scene as an example, because they haven’t seen it. Don’t try to show the Oblivious how to do something on the Internet, because you’ll get a 15-minute tale about how great their nephew is with computers.



(Image Source: Brad Colbow)

How to Handle Them

They want to be reassured that they are being treated fairly. This client unfortunately has been abused in the past for their lack of knowledge, and is concerned that you will do the same. Be patient with the Oblivious. It may take extra time to communicate with them, but they can be an absolute joy to work for.

The extreme alternative is to exploit them and overcharge for your work – if you value your reputation, don’t do this. Do however:

Use terms and examples that they can relate to. Don’t bother with the long acronyms or technical terms that will only leave you with a confused and concerned client.

Use pictures and visual aids to illustrate your points. This is incredibly useful because it reinforces the authenticity of what you are saying, and promotes trust.

Write it all down. Work out a comprehensive contract with them to help them feel secure. They may not understand the details of your work, but they do understand a fair deal.

3. The Know-It-All

You can easily recognize a Know-It-All client because you will hate them shortly after meeting them. They are the ones who apparently know exactly how to do your job, yet for some reason hired you. They will interrupt you during your presentations, and not budge from a decision once it is made.



(Image Source: FreelanceSwitch)

How to Handle Them

The Know-It-All’s desires are clear: they want control, and they want respect. Their need for control is usually a reflection on insecurity within them. You can easily win their trust with some basic psychology. If your client wants control, and demands respect, then let them have it. This client can be an absolute nightmare if they don’t get their way, so use these simple tactics to win their trust:

Give them an occasional compliment. A Know-It-All will be much more inclined to accept your proposals if their input and ideas are appreciated.

Pick your battles. Don’t fight on every little issue; save your strength for when the critical moments occur.

Don’t work for them. Sometimes the best way to win is to not participate. If a client doesn’t respect you or your work, I recommend looking around for someone who does.

4. The Cheapskate

Many clients today fall under this category. The Cheapskate is on a budget, and is willing to sacrifice time and quality in exchange for a lower price. They will always chose the cheaper option, which makes it easy for you decide what tools to use for their projects.

How to Handle Them

The Cheapskate just wants the product to work. Talk to them about quality and durability all you want – they just want the job complete with the lowest total cost to them. If you want to make them happy, let them know you saved them some money. This client can actually be great to work for if you are looking for a quick payday. The trick is to make sure the product reflects the price.

Do the work quickly. Time is your most valuable asset as a freelancer. This client just wants the job done, so that’s exactly what you need to do.

Get it in writing. Some Cheapskates are so cheap that they won’t even pay you. Be sure to sign a contract with them before beginning any work.

Start the estimates high. It doesn’t matter if your prices are fair or not, this client will want a lower price. By beginning your estimates with a higher-end price, you can haggle with a Cheapskate and come to a win-win compromise.

5. The Dreamer

The Dreamer doesn’t quite live on planet Earth. Their heads are filled with crazy ideas and big plans. Whether it is in style or in function, the Dreamer envisions his or her final product as being the best thing available.



(Image Source: Fotolia)

How to Handle Them

Dreamers want their dreams to come true. This can be difficult if you are unable to live up to their high expectations. However, if you impress a Dreamer – they will absolutely adore you. Without discouraging their passion, you must bring the Dreamer back into reality. Letting them visualize and interact with your work can help them:

Ask them to show you examples. You may be hit with the line, "it is so awesome it doesn’t exist yet!" but be persistent until they are able to think rationally.

Be straightforward with prices and timeframes. Sometimes what the Dreamer wants isn’t impossible, it’s just difficult. If this is the case, give them a solid price and timeframe to do the work in.

Ask them about the details. Dreamers rarely fill in the blanks. While their end goals are usually incredible, sitting down with them and discussing the details can help both you and them get a good grasp on the scope of the project.

6. The Helper

The Helper can be sweet at first, but can get in your way if not handled correctly. They are very hands-on people, who need to interact personally with your work. A Helper can be fantastic client to work for, provided you can keep them busy.

How to Handle Them

The Helper wants to be involved in the work. They carry with them a lot of enthusiasm that needs to be released in a constructive and practical way. If a Helper wants to assist you, then give them that opportunity. This gives you a great chance to practice your skills as a delegator and team player, as well as help expedite your work for this client. When working with a Helper:

Give them tasks. Letting them assist you with some of the simpler tasks of your job can save you time and money. Be sure to identify your client’s skillsets before asking them to preform a complicated task.

Ask them to research. Whether you use the information they find or not, research tasks can keep a Helper out of your way for a long stretches of time, leaving you the freedom to focus on your job.

Make noise. As unusual as this may seem: the Helper can be easily scared off by loud noises. If they won’t leave you alone, taking a phone call or turning on a power tool will most often cause them to give you some space.

7. The Sprinter

Some clients are born Sprinters, and some are just forced to run to meet a deadline. The Sprinter always has time on their minds. They are serious when it comes to deadlines, and are often very busy people. They frequently think if a project can get done in one month; you should be able to get it done in three weeks.



(Image Source: Fotolia)

How to Handle Them

For a Sprinter – time is of the essence. Their goal is to get projects done fast. This type of client is generally hardworking, so they expect the people around them to be the same way. When dealing with a Sprinter:

Proceed with caution. Sometimes it only takes an hour to negotiate your workload for the next month. Don’t get caught in a deal that leaves you stuck with an over demanding assignment.

Guard your deadlines. You will be held accountable to the timeframes mentioned on your contract, so be realistic and flexible with them. The Sprinter may want you to complete work ahead of schedule, but don’t move from those deadlines unless you are comfortable doing so.

Pace yourself. When working for a Sprinter, follow the basic rules of productivity: stay focused, cut out distractions, take breaks, and stay organized.

8. The Underling

The Underling is not allowed to make any decisions. They are clients who work under a strict chain of command, meaning they need approval before making most decisions. They usually have no clue what is going on, and are rarely prepared for the questions you have to ask.

How to Handle Them

What the Underling wants doesn’t really matter – what matters is what their superiors want. Ultimately, if the work you give the Underling pleases the ‘guys upstairs’, you will have a very happy client. They key to dealing with an Underling is to think like an employee. Strategically plan ahead for the "let me get back to you" mentality. When working for an Underling:

Ask questions in bulk. Individual questions get lost in emails and sticky notes. The best way to save yourself time and stress is to compile a sizeable list of questions you will need answered and submit them all at once.

Prepare for the lag. You know how news reporters always take a minute to respond to questions? This is exactly what you will have with an Underling. Ask questions ahead of time so you are properly equipped for the next phase of your work.

Don’t bother explaining. If you are working for an Underling there is a good chance their boss is the next type of client on our list. This means that the Underling just needs to know the highlights of the work you’ve done, because that’s all their boss wants to hear.

9. The Delegator

The Delegator is personally my favorite client. The Delegator hired you because they know what you’re doing, and expect you do complete your work with skill and professionalism. They won’t want to be bothered with the details or bogged down by long meetings; their credo is: "you do it".

How to Handle Them

They simply want a solid finished product completed within a reasonable amount of time. The work you are doing for them is usually just a small piece in a much bigger plan. Your work will have to speak on your behalf, because the Delegator isn’t available to meet for the next two months. When working with a Delegator:

Respect their time. Delegators guard their time like they guard their very lives. When interacting with them, come prepared and keep it short.

Be direct and honest. Delegators loathe excuses. They are not interested in what tools used on a project, how long it took you, or what went wrong along the way; they want to know if the job is done, and if the product works.

Give them a document. This type of client can handle paperwork much better than they can handle human interaction (unless of course they have delegated the paperwork to someone else). By giving them a written report, you are able to keep them informed without taking up too much of their time.

Related posts:

  1. Freelancers: Collecting Comprehensive Creative Brief from Your Client
  2. Freelancing: 7 Signs It’s Time to Let Your Client Go
  3. Freelancers: How to Work Better with Your Clients
  4. Freelancers: 10 Things Clients Don’t Like Hearing

WordPress Themes & Plugins To Start Your Own Group Buying Website

Posted: 19 Oct 2012 01:12 AM PDT

It’s no surprise why group buying websites have been flooding the interwebs – let’s face it, everyone wants to pay less and get more value out of their money spent. As demands for a wider variety of deals grow, you can take advantage of this growing demand and start your own group buying site with these WordPress themes and plugins.

This list of WordPress themes come complete with plugins, widgets, and countdown timers, and are built to run your website as a Groupon "clone" (as some might call it). Once you have any of these themes installed and enabled on your WordPress website, you’ll be able to start your very own group buying website.

Group buying WordPress Themes

First, let’s check out some WordPress themes for a professional look for your group buying site.

GroupClone [ Demo ] $299

GroupClone

WPGroupbuy [ Demo ] $99

WPGroupbuy

Every Deals [ Demo ] $99

Every Deals

WPoupon [ Demo ] $99

WPoupon

Dealers [ Demo ] $42

Dealers

Dealicious [ Demo ] $99

Dealicious

Best Deals [ Demo ] $99

Best Deals

DailyDeal [ Demo ] $89

Daily Deal

Group Bying Site [ Demo ] $165

Group Buying Site

The Big Deal [ Demo ] $97

The Big Deal

DealPress [ Demo ] $69.99

DealPress

Simple Deal [ Demo ] $499

Simple Deal

Group buying WordPress Plugins

Next, we take a look at a few WP plugins that will help you manage your coupons/deals and possibly help set your site apart from other group buying sites.

Wishpond Social Campaigns Plugin

With this WordPress plugin installed you can easily design your own ‘limited time offer’ promotional campaigns. With the plugin, you can create Social Sweepstakes or Offers and even track the location of the people who clicked on your offers.

[ Download plugin | Visit Wishpond website ]

Wishpond

Spotlight Plugin

This is a ‘Daily Deal Builder’ WP plugin that allows you to offer deals to your audience. There are a few themes and payment options to choose from, giving you the flexibility to cater to special deals.

[ Download plugin | Visit Spotlight website ]

Spotlight

SyncFu WordPress Plugin

To use SyncFu’s Group Buying Widget you will need an account at SyncFu.com first. Then, you can create, manage, upload and share deals on your WordPress website, with support for multiple currency.

[ Download plugin | Visit SyncFu website ]

SyncFu

WP Deals Plugin

This plugin comes with a variety of features including PayPal payment, statistics monitoring, social media and newsletter integration to help you sell deals.

[ Download plugin | Visit WP Deals website ]

WP Deals

VoucherPress Plugin

VoucherPress lets you create custom coupons, vouchers, tickets or tokens to give away at your website. You can create your coupons with any font or text that you want, or work with ready-made templates which can be downloaded or printed through a specific URL.

[ Download Plugin | Visit VoucherPress website ]

VoucherPress

WP e-Commerce Plugin

Manage all your coupons or payment transactions with this plugin. Plus, it can be modified to suit the theme of your website.

[ Download plugin | Visit WP e-Commerce website ]

WP e-Commerce

International SMS Subscription Manager Plugin

If you want to get notifications out to users, you can use this plugin as a bulk SMS sender. Visitors insert their mobile number to subscribe and are immediately included in the texting list.

[ Download plugin | Visit International SMS Subscription Manager website ]

Bulk SMS

Related posts:

  1. 10+ WordPress Plugins to Pinterest-ize Your Website
  2. 7 Free E-Commerce WordPress Plugins
  3. 28 High Quality Mobile Themes For WordPress
  4. 21 Free Premium WordPress Themes to Impress

0 comments:

Post a Comment