calls-to-action-in-wordpress-themes-call-or-text

Calls to Action in WordPress Website Headers, 2015 Theme Review

Calls to Action (CTAs) in the Header regions of WordPress themes are reminders to customers to act: “Do This Now!”.

This post is a review of contemporary WordPress themes that offer the compelling CTA options in their headers. The post explores how the CTAs appear during scrolling (are they ‘sticky’ or not?), and how they appear on desktop and mobile versions of a site.

The CTAs in Impreza and Be Theme are particularly compelling.

Impreza Calls to Action

calls-to-action-in-wordpress-website-headers-impreza

Impreza Theme (link here) offers Calls to Action in both the main menu (highlighted button) and the Action Bar (icon and link). The theme offers numerous sliding-scale (height) options for both the Header and Action Bar areas, and options to make both or either sticky. The action bar is visible on mobile view. For menu buttons, see using a button for menu item. A button can also be configured in Visual Composer to show only on mobile or tablet devices (as in the ‘Test Drive’ button to right).

Impreza comes bundled with Visual Composer (and the Ultimate Addon for VC is installed; parallax sections are available), and Revolution Slider. Also see the Creative demo. The Impreza theme seems to load very quickly. A demo of the admin panel is also available. See the other us-themes here.

Call to Action in Be Theme

Be Theme offers excellent Call to Action options in the header. One option is a Call to Action Button that appears on the right side of the header – this is perfect! The button appears on mobile view (right image).

The other CTA is a dropdown ‘sliding top’ with up to four side-by-side widgets (on Desktop) or stacked widgets (on Mobile). See the gray area below:

headers call to action in wordpress themes

On Be Theme, the main menu bar can be set to sticky, but not the Action bar (the one disadvantage of the theme). The Action Bar, Dropdown, and Button do appear on mobile views, although the Dropdown triangle partly covers the Action Bar (see image to right). The dropdown option is optional on the site of course.

Visual Composer, Revolution Slider, and LayerSlider WP are bundled with the theme.

Highlighted Menu Items in the Enfold Theme

calls-to-action-in-wordpress-website-headers-Enfold-theme

In Enfold (and most themes), menu items at the top of the page can be highlighted, thus serving as a Call to Action. For example, in the header above, “Websites” has been highlighted in red.

Also, the Info Bar in Enfold stays visible on mobile views. To the right, I have highlighted ‘Prices’ as a Call to Action.

The Enfold menu and info bar can be made sticky, in which case both stick to the top of the page.

Enfold is bundled with the Avia visual editor and with Layerslider WP.

The CSS to highlight a particular menu item in Enfold is given at the end of this post.

Calls to Action in Weaver Xtreme

Mobile Call to Action on Weaver Theme Header

The “Call or Text” button is a call to action in the header of the Clinical Skin Care by Korinne website. In this theme – Weaver Xtreme, a theme with remarkable flexibility – the header region is constructed of side-by-side widgets, which stack neatly in mobile view. The Weaver theme does not, however, offer a sticky header option, or the bells and whistles of many contemporary themes.

Calls to Action in MedicalDoctor+ Theme

Call to action medical doctor theme mobile

Call to action in header of MedicalDoctor+ theme

The “Make an Appointment” button on the header of the MedicalDoctor+ theme is a commonly sought CTA on many health related and service websites. The CTAs stack nicely on mobile view, along with the contact info. The main menu (but not the top bar) is sticky on the desktop view. The MedicalDoctor+ theme is highly rated, though not a big player in the WordPress theme market. It comes bundled with Visual Composer and Layout Slider (if I recall correctly!), both widely used. The same developer has created a charity theme with a similar call to action in the header.  See purchase and feature info here.

Donate Now Call to Action on Chairty Theme

The same developer has created a Donate Now charity theme with a similar call to action in the header.  See purchase and feature info here.

Other Themes Worth of Mention

Auto Repair Theme by Cohhe

The Auto Repair theme by Cohhe has nice calls to action (although the menus are not sticky). You can access the admin panel in sandbox mode here – the options are somewhat limited in settings, but the site is bundled with Visual Composer and Slider Revolution.

Other Themes with Calls to Action in Headers

WPLook Studio offers a nice health and medical theme with appointment button (not sticky), but Charitas and Benevolence (with donate and sticky menu)

Proteus Themes offers some nice designs, some with and others without sticky menus. The CarPress theme (with sticky menu, appointment button, and hour display), repair press (not sticky), a Construction theme (without sticky menu), legal theme (no sticky menu), mental press (not sticky), hairpress (sticky – nice!),

Vantam makes nice themes with sticky menus, action blocks, and calls to action (unfortunately, the calls to action are not responsive) – auto repair, construction, health.

Entrepreneur loads with a calendar on the main page, to make an appointment. Nice options for stylists, medical, etc.

Divi Theme is highly rated. The menu bar and action bar are both sticky, but there is no call to action option. The theme is based on the Divi Builder, an Elegant Themes visual editor.

Other themes with nice options are The7 (see the demos of client sites), and The Fox.

Enfold Theme Menu Item Highlighting – CSS Code

The CSS code for highlighting a main menu item in Enfold, where the menu item is 8296 (insert the code for your case), is below; note that the symbol > represents > in CSS.

li#menu-item-8296 > a > .avia-menu-text  {
padding: 5px;
background-color: red;
color:white;
border-radius: 5px;
}

The code for highlighting a submenu item in Enfold, where the menu item is 7222 (insert the code for your case), is

.sub_menu li#menu-item-7222 > a {
background: red;
color: white;
padding: 5px;
border-radius: 5px;
}

Related Posts

Leave a Reply

  Subscribe  
Notify of