Call-to-Action (CTA) buttons are an essential landing page element, used to elicit a response from the visitors. Traditionally, implementing an effective button is a tedious process involving image design and animation programming. Well, not anymore.
Introducing the new SiteKreator Call-to-Action button functionality. Available as a built-in Text and Image editor element, the CTA button is a versatile tool for point-and-click creation of buttons with mouse-over animation effects. Each button features settings for custom color, size, captions, sub-captions, icon image and more.
It takes just a couple of clicks to add and configure an interactive CTA button
Use the new SiteKreator feature to create CTA buttons that entice visitors to click.
CTA buttons work well only if you do some forethought and planning. Designing the buttons has to be part of the page layout design process and to address 4 important aspects: placement, size, color and message.
The location of a CTA button is critical to it's success. We recommend to give your CTA button a prominent placement, but remember to take your entire page layout into account when making this decision. Use the codeless options for button alignment, text flow and spacing to determine the best spot for the button.
Draw attention with prominent positioning Besides the obvious placement at the top of the page or at least above the fold, you have additional location options for increasing button conversion rates. Putting a CTA button on a distinguished area such as padded section is another way of making it stand out. If you choose a placement in the center - align the button horizontally in the center of the page to draw attention to it.
Use whitespace to detach CTAs from other elements Whitespace can transform a page design in various ways. Some of them are purely aesthetic, while in terms of CTA buttons white space has a tangible impact on their effectiveness.
Separating the button from areas with other design elements gives it visibility and makes the page feel less cluttered. If you think that a CTA button is not big enough to stand out, first try surrounding it with whitespace. Be careful not to exaggerate, otherwise you’ll loose the logical connection between the page elements.
Surround the CTA button with whitespace to make it stand out. You can easily do so, using the built-in spacing tool.
Size In cases where using white space effectively is not an option, you can use the size and shape of the CTA button to draw attention to it. The size of an element relative to its surrounding elements indicates its importance. Decide how vital certain site actions are, and size the buttons accordingly. You can do so with the help of the user-defined or pre-set options for button size and color that are available with the SiteKreator CTA button feature.
Here are some tips on how to draw visitor attention by changing the CTA button size:
CTA button size vs the surrounding elements
If the button is placed above the fold, and in order to grab visitor attention, the CTA button should be roughly 20% larger in width than the website logo element. Another easy test is to do the “5-pixel blur screenshot” test - apply a 5-pixel blur to a screenshot of the webpage and make sure that the CTA button is still visible.
CTA button size vs the less important call-to-actions
To indicate the importance of the primary call-to-action with respect to other actionable items, you can vary their sizes. Remember that the primary CTA button needs to command attention without overwhelming the page design.
You can select the preferred button size from a convenient drop-down menu to apply it. To customize a set of 3 predefined button sizes per account use the DesignPro application.
Color and Appearance
We’ve combined color theory with marketing best practices to help you create great CTA buttons. Colors are a powerful tool for encouraging feelings that lead to a desired action. You can guide website visitors to make the choices you want them to make just by using the correct colors and color combinations.
Use contrasting colors for primary CTAs When speaking of contrasting colors we actually refer to complementary colors that are located on the opposite of one another on the color wheel. When placed next to each other, compliments make each other appear brighter.
Background vs foreground color contrast
To make a CTA button stand out by changing its color, give it the complementary color of the background color.
Color contrast vs surrounding elements
For large buttons, choose a color that is less prominent compared to surrounding elements and the background. For smaller buttons you may want to choose a complementary color. But whatever color you choose, make sure you design the button in such a way that it is noticeable without interfering with the overall design.
The primary CTA button color is design-specific and automatically changes upon design update(*). You can further customize the button colors by using the DesignPro application.
Offer alternative colors for secondary CTAs
Placing the secondary action beside the primary action
In this case, the primary action can be made more prominent than the secondary action through a higher color contrast to its background than the secondary CTA button. To group the buttons together, make sure to reduce the whitespace between the two buttons relative to the other elements in the area.
Placing the secondary action below the primary action
If you want to display the secondary action below the primary action you need to have greater visual separation of the CTA buttons. In addition, it is best to use a more muted color for the default state of the secondary action.
All of the above tips can be easily applied to new or existing CTA buttons by using the customizable color options for the auto-generated CTA buttons.
Icons The presence of visual elements in CTA buttons is proven to increase conversion rates. Some of the most common examples of pictographic call-to-actions are the shopping cart icon on an “add to cart” button, and the arrow icon on a download button. Easily-recognized icons can immediately indicate meaning to website visitors, thus encouraging a desired action. It makes this feature a perfect match for both landing page CTAs and contact or subscription form buttons.
You can quickly add images for the default and mouse-over states of the button by picking them from a comprehensive built-in gallery. You can also upload a custom image to use as a button icon.
Make sure that the icon adds to the user experience by clarifying what the button is for, and doesn’t add any confusion.
Animations Another approach to improving the visual impact of a CTA button is to animate it. The new SiteKreator CTA buttons make this previously time-consuming task a breeze. It only takes a couple of clicks to bring a static button to life and make it glow, shake, pulse and more!
You can choose from 7 mouse-over transitions like dissolve, move up and enlarge. This feature reveals the mouse-over captions and subcaptions in a way that promotes attention and ensures the effectiveness of the CTA message.
In cases where you need to focus attention on a primary CTA button in an unobtrusive, but eye-catching way, use the 6 highlight animations. These effects are not triggered upon user action, but rather animate the button every 30 seconds by making it shake, move up and down, glow and more. Once enabled, this feature greatly improves the button visibility, serving as a visual reminder.
Message The CTA button feature allows for easy creation of customizable captions and sub-captions for the default and mouse-over states of the button. The text is editable and allows for testing different messages without time-consuming and costly redesigns. You can easily create effective CTA button messages by simply following the steps below.
Formulating winning button captions is all about finding the right emotional triggers.
Keep it short
Just follow this simple rule of thumb: 3 words or less.
Communicate sense of urgency or scarcity
Suggestions to perform an action will be effective if you create a sense of urgency or scarcity. Using words such as "now" or "immediately" convey such urgency. Create scarcity with messages like “Only 5 products left” to employ the law of supply and demand. The less the supply is, the greater the demand will be. Remember to include numbers when you apply urgency or scarcity. Replace “Only a few products left” with “Only 10 products left”. People trust numbers.
Use command verbs with an implied benefit
If you don’t include verbs, visitors will not be encouraged to take action. It’s proven that strong action verbs draw attention. Examples of such strong verbs are Buy, Shop, Watch, Compare, Download; Examples of weak verbs are Click, Get, Try, See, Read.
Be specific about the exact desired action
The words should describe the action or result of the CTA. When possible, avoid using “OK” or “Cancel” as it requires reading the surround text to understand the meaning of the button.
Button Sub-caption The button sub-caption is used to overcome visitor’s hesitation to take action. The hesitation usually stems from thinking that an action will be difficult, costly or unsafe. Another reason for hesitation is the lack of information of what happens after the click. Take care of these concerns to improve the number of button conversions.
Tell the visitors that taking the action is easy
Use statements such as “no forms to fill”, “one-click”, “takes only 30 seconds”
Give the visitors a peace of mind
Answer anticipated questions that visitors may want to ask before taking the action. Point out that taking the action is safe. For example, indicate that their credit cards won’t be charged at this point, that there is a money-back guarantee or that they can always opt out of the newsletter.
Give additional information on what the visitors will get or what will happen after taking the action.
Pricing and Availability In order to enable the new CTA button functionality, simply re-apply your design.
The CTA buttons are available with SiteKreator Standard, Premium and Complete packages. The DesignPro application is available with SiteKreator Premium and Complete packages.
The CTA buttons are available with all contemporary SiteKreator designs. (*) The design-specific primary color feature is enabled for the Altair, Atlas, AtlasB, Chara, Electra, Mira, Sirius, SiriusLight, Vega, VegaLight designs. The Atria, AtriaX, AtriaxLight, Kuma, Meissa, PastaArc, PastaOval and Polaris designs feature fixed button colors.
We’re happy to announce the release of two new Facebook plugins: Facepile and Follow Button, along with a 2X improvement in FaceBook application loading speed. Also all other plugins are updated to support the latest options provided by Facebook.
Facebook Social plugins are easy-to-add social components to enhance your website and increase site visitor engagement. Inclusion of Facebook Social plugins allows your site to be more relevant to Facebook’s 1+ billion users and to become social media ready. Here is what’s new:
Facepile The Facepile Plugin displays thumbnail-sized profile images of Facebook users who have “Liked” the page on your website and are Facebook friends of the visitor. To enable visitors to “Like” your website pages, insert the Like button on any page of your website. Choose pages that generate traffic, such as your blog, or pages that would benefit from the power of social credibility to increase conversions, such as landing pages.
The Facepile Plugin is a great tool for taking advantage of the social credibility. Seeing a familiar face on a web page creates an instant bond with the new visitor.
If you’ve just created your website, you may want to build up the number of “Likes” first before installing the Facepile plugin. It will maximize its impact: The more “Likes” your pages get, the greater the chances a visitor will see their friends’ profile photos in the Facepile.
Follow Button The Follow Button enables your website visitors to subscribe to the public updates of your Facebook profile directly from your website pages.
The Follow Button is useful for anyone with a following (e.g. artists, actors, politicians). Installing this button will encourage your website visitors, fans and supporters to connect with you. It will allow you to keep the conversation open and extend your overall reach.
And More... By improving the implementation architecture we are able to reduce the loading time of the Facebook application by a factor of two! Faster loading time will increase the responsiveness of your site and decrease visitor bounce rate.
Last but not least, you can now specify the exact URL your visitors will Like, Send or Comment on. This gives you more granular control over how your visitors interact with your content.
From time to time we conduct a review of our system and streamline it by retiring or replacing aged system components. As a result, we would like to announce the following features will be discontinued.
Google Checkout On November 20th, 2013, Google will discontinue support for Google Checkout. As a result, we will also no longer support Google Checkout after that date as a method of payment in our Online Payments application. The PayPal payment button will continue to be available to you and can be a direct replacement to Google Checkout. Your customers will be able to make credit card payments directly with the PayPal button.
Internal Website Statistics and Hit Counter On September 1st, 2013 we will discontinue the support for our Internal website statistics and Hit counter features. The phase out of this feature has been announced in February 2013 and existing installation will continue to work until September 1st, 2013. If you are still using this legacy feature, please switch to Google Analytics at your earliest convenience. Google Analytics is a more powerful replacement of the retired function and is available free of charge for all users.
Legacy Galleries On September 1st, 2013 we will discontinue the support for our legacy galleries. If you have created your image galleries AFTER August 2010, this change will NOT affect you. If you have a gallery that has been created before August 2010, you can convert it to the new, more elegant and functional Gallery at anytime. Just open the Gallery property sheet and click on the Convert button. Alternatively you can choose to do nothing and we will convert them automatically for you on September 1st, 2013.
Following the release of our drag-and-drop upload interface for image and video files, we are extending this new streamlined upload mechanism across our entire platform. It is now supported at over 20 file upload locations such as the Text and Image Editor, Gallery, Page Image Slideshow, Navigation Menu, and Database Editor, as well as applications such as Appointment Scheduler and the Local Promotions bundle.
To use it, look for the light grey “DRAG & DROP” drop zone, and drop files from your desktop into it. Please note that due to space restrictions some drop zones will show up only after you start dragging the files.
We are happy to announce the availability of 42 new premium icons for your web site. The new “Dutch Icon” collection can be used inside the Text and Image editor, Menu items, Section titles, Mobile home page, and more. The collection comes in two color themes: Dutch Icon Gray - gray icons on transparent background for use on black, white or light color backgrounds, and Dutch Icon White - white icons on transparent background for use on strong color or dark-color backgrounds.
The best use for these icons on your website is in the navigation menu or section title. This helps your visitors to much quicker navigate your website and find what they are looking for with a quick glimpse, without having to read all the captions. Also having such nice icons greatly improves the feel of your web site and makes it look more professional.
The new “Dutch Icon” set is available to all Standard, Premium and Complete subscribers.
On June 11th, 2013, Twitter has permanently disabled their API v1 support. This change affected all client-side third party applications on the internet. And with the new API v1.1, Twitter no longer offers client-side only application support. Unfortunately, our Twitter application is among those affected.
If you have installed the Twitter application then your site is likely affected by this. The immediate remedy is to uninstall the Twitter app and replace it with an HTML snippet generated on the Twitter site here. We have also created a tutorial to guide you through this simple process.
We've removed the Twitter application from the application catalog for now. Our development team is working on an alternative implementation which to restore this application. Currently we do not have an estimated delivery time. We apologize for any inconveniences this may have caused you.
Adding nice images can significantly increase the appeal of a web page. However, to get an image to look just right often involves many pre-processing steps. To make that job easier we are pleased to announce the following new features:
Drag-and-Drop upload of images and video
Quick image resize to preset or custom dimensions.
Crop and zoom images within the editor
Drag-and-Drop Media Upload Feature
We’re introducing a new upload mechanism that supports drag-and-drop of image and video files.
You can now now drag and drop an image or video directly into the blue drop zone located in the right properties panel. No more browsing for files or navigating the file folder hierarchy. This new mechanism also supports adding mouse-over, table and cell background images.
We have implemented this feature with the latest HTML5 technology with no Flash involved.
Built-in Image Manipulation Features
Resizing an image to the appropriate size to fit the layout is a routine chore. We are making it easier by enhancing the Text and Image editor to resize automatically on upload.
You can now drag any image into the drop zone and it will be automatically set to the default size. Choose from 3 predefined image sizes: small (150px wide), medium (250px wide) and large (400px wide), or define your own. Even though an image may be resized, the system maintains the original image so it can be adjusted later. Also all resized images will appear with enhanced detail on a high resolution retina display.
Last but not the least, you can now adjust images right in the Text and Image Editor. You can easily crop an image and zoom into a specific area of an image without using another tool. The result will be instantly available for viewing and in the context of the page. This feature also applies to mouse-over images. The image crop and zoom feature is available via the Advanced Option switch, and the source image needs to be larger than the viewed image.
We hope these new features will make it easier for you to employ images to create the exact look you are looking for. Gone are the days of adjusting the image with other tools and iterating until the final results “come out OK”. Please stay tuned as we are already busily working on the next set of enhancements and useful new features.
We are happy to announce new changes to our service plans. If you are an existing Standard SiteKreator customer you will not be affected by this change. For existing Premium and Deluxe SiteKreator customers you will have access to additional premium applications as listed on the new pricing page (Deluxe plans will receive the same applications as the new Complete plan). Everyone will be able to continue to renew the existing packages at the same price, features, and services. There will be no other changes made to your account, unless you choose to upgrade or change to one of our new service plans.
The following is a summary of the service plan changes:
We added a Starter package, this plan is limited to 10 pages and does not support Advanced Options
The Deluxe service package has been replaced with the new Complete package.
There are now 3 levels of custom design services
Availability of premium apps has been changed according the service plan.
It is now possible to format multiple cells with a single operation. Previously, in order to modify multiple cells you will need to select each cell individually and apply the same operation repeatedly. This enhancement allows you to apply the same operation to multiple cells at one time.
Give it try the next time you are in the Text and Image Editor.