10 jQuery Tooltips to AMAZE Your Visitors

10 jQuery Tooltips to AMAZE Your Visitors by Dmitriy, Divine Elemente Team | |
{clear} THUMBNAIL_BEGIN #image: jquery-tooltips.jpg; #description:

It can be pretty hard to find the stuff you need on a website. For such cases, we've collected a Top 10 jQuery tooltips

THUMBNAIL_END {/clear}

It can be pretty hard to find the stuff you need on a website when we’re in visitor's shoes. It’s like wandering in a megapolis - if there is no sign, how do we know where are we heading and where are we now? The same thing is true for every website, so we need to take care of the tooltips so our visitors know where are they heading and what this website section is.

We’ve tried to collect the most interesting and useful jQuery tooltips especially for such an occasion.


1. jQuery Tools Tooltip

Nice and stylish jQuery tooltip for your menu.

jQuery Tools Tooltip
DOWNLOAD

2. Tooltipsy

Want to have more control? This jQuery tooltip is for you.

Tooltipsy
DOWNLOAD

3. jTip

Very handy jQuery tooltips for your forms.

jTip

4. jQuery Horizontal Tooltips Menu

Attracting horizontal tooltips for your menu. Very handy and pleasant for the eyes.

jQuery Horizontal Tooltips Menu

5. jQuery Tooltip Plugin

A jQuery tooltip plugin. Useful and flexible.

jQuery Tooltip Plugin

6. qTip – The jQuery Tooltip Plugin

A qTip letting you create multilevel tips.

The jQuery Tooltip Plugin

7. Prototip 2

Another nice tooltip in white and blue colors. Just hover your mouse over and see what happens.

Prototip 2

8. jQuery (mb)Tooltip 1.6

A jQuery tooltop (ver. 1.6.) which is displayed when you hover the mouse over the text link.

jQuery (mb)Tooltip 1.6

9. jQuery Image ToolTips

Useful and practical jQuery image tooltips showing an image preview when you hover your mouse over the picture.

jQuery Image ToolTips

10. Better Tooltip

Еthereal jQuery tooltip bringing more lightness to your website.

Better Tooltip

The Details Matter

I hope these great 10 tooltips I’ve collected will be the true pathfinders for your visitors, so pick the one you like and go ahead - create the greatest website the world has ever seen and don’t forget that Divine Elemente (a PSD to WordPress tool) allows you to edit your WordPress theme with the help of these tooltips.

So

it and get to work! ;)

*Yeah, yeah, I know I’m starting to sound like your boss. Sorry!*

Read More »

jQuery Dropdown Menu Tutorials That Will Blow Your Mind

jQuery Dropdown Menu Tutorials That Will Blow Your Mind

jQuery Dropdown Menu Tutorials That Will Blow Your Mind by Dmitriy, Divine Elemente Team | |

Dropdown menus have been there since web design had become the important part of our lives. And as web design went through many phases of evolution, drop down menus didn’t stand on their place too - they evolved as well with the help of jQuery technology (jQuery Dropdown Menu).

These menus have always been a part of client’s demand for web page design, but there are so many options for setting your own DD menu, so it can be pretty hard to find the one(s) that are perfect exactly for you.

We remember about all this issue and did our best to help you get inspired so you can create a website of all time!

…. aaaaand the elevator’s going down ;)

Read More »

Billboard (Slideshow Plugin)

Billboard (Slideshow Plugin) by Dmitriy, Divine Elemente Team | |

What is 'Billboard' widget? Billboard (also known as slideshow WordPress widget) is a group of elements in Divine Elemente that forms a block with changing slides.

At present it is really trendy to use beautifully changing slides, for example, in the ‘Header’ grid block in order to show 3 - 5 best works in portfolio or cute photos in a personal blog.

Billboard (JS slideshow) video tutorial

Besides, the ‘Billboard’ slideshow widget allows not only to create jQuery slider but make do it in a beautiful JS animated way.

‘Billboard’ widget

‘Billboard’ widget

So, ‘Billboard’ consists of such elements as ‘Next’, ‘Previous’ buttons, and also any number of layers with ‘Slides’.

‘Billboard’ structure

‘Billboard’ structure

You can find the structure of the ‘Billboard’ widget on an image placed above. All the sizes of layers with ‘Billboard’ elements are calculated during ‘Billboard’ creation, and the whole block’s size is determined.

More details on how to create a ‘Billboard’ (or Javascript image slider) in Divine Elemente without any line of code can be found below.

Creation of ‘Billboard’ in Divine Elemente

First of all, let’s start from the preparation of all required elements of the ‘Billboard’ widget.

Step 1. Prepare elements in a PSD template.

Because of all elements are provided with special names of groups (PSD - hints), Divine Elemente can define them at once and assign the appropriate behavior to them automatically.

Elements assignment

Elements assignment

Note: Slides are taken in any number only from the ‘Billboard’ > ‘Slides’ group and can be set only as one layer for a slide.

‘Billboard’ elements arrangement

‘Billboard’ elements arrangement

‘Billboard’ elements (‘Previous’, ‘Next’, ‘Slides’) can be arranged together and be assigned in one copy in the ‘Header’ grid block and in one copy in the ‘Footer’ grid block, as it is shown in the image placed above.

Note: No less than one ‘Slides’ element is to be assigned for smooth work of the widget, because the ‘Next’ / ‘Previous’ buttons cannot work correctly without this element. Otherwise, they will be published as static HTML elements (‘Image’, ‘Text’, or ‘Link’).

Step 2. Launch Divine Elemente and set element’s properties.

Select elements of the ‘Billboard’ widget in the Elements panel and then set their necessary properties in the Properties panel.

‘Billboard’ elements properties

‘Billboard’ elements properties

A. Animate parameter
It allows to switch on / off an animation effect at slides changing.
B. Transition duration
It allows to choose effect’s duration at slides changing.
C. Slide duration
It allows to set time for slide display.
D. On Event parameter
It allows to select an event, after which animation effect starts working
E. Animation effect
It displays a list of supported animation effects at slides changing.

Step 3. Publish a theme and activate it.

To publish a theme on the server, you are to select your FTP account in the Command panel and click on the ‘Publish’ button. More details on how to create and set a FTP account can be found in the Publish Editor guide.

Then you are to activate the theme at the website. To do that you are to move to the backend of WordPress CMS (add “\wp-admin” in the address line), enter login and password, and move to the ‘Appearance>Themes’ section. Then please select the theme installed and press ‘Activate’.

Activate a theme

Activate a theme

Troubleshooting: elements are out of grid boundaries.

‘Billboard’ elements should not be out of the ‘Header’, the ‘Footer’ boundaries!

Troubleshooting. Elements assignment

Troubleshooting. Elements assignment

If one of the ‘Billboard’ elements is out of the grid bocks’ boundaries, the element will not be assigned!

‘Billboard’ editing

Together with the theme, the ‘Billboard’ plugin is installed in the backend of WordPress CMS, where you can edit all the required Billboard’s parameters right at the website (in other words, there is no necessity to edit a template in Adobe Photoshop and convert / upload a theme to the website all over again).
The installed plugin in WP backend

The installed plugin in WP backend

To set parameters, you are to move to the backend of WordPress CMS (add “\wp-admin” in the address line) and move to the ‘Divine > Billboards’ section.

‘Billboard’s editable parameters in the backend of WordPress CMS You may set the required parameters and ‘Billboard’ element’s data on the page opened.

‘Billboard’ element’s parameters in WordPress CMS

‘Billboard’ element’s parameters in WordPress CMS

Animation parameters are fully similar to parameters being used at the assignment of the ‘Billboard’ element - ‘Billboard > Slides’ in Divine Elemente:

  • (A) Animation effect - it displays a list of supported animation effects at slides changing.
  • (B) Transition duration - it allows to choose effect’s duration at slides changing.
  • (C) Slide duration - it allows to set time for slide display.

Besides, you can look through and set all slides of the ‘Billboard’ element, namely:

‘Billboard’ editing. Editor’s window

‘Billboard’ editing. Editor’s window

  • (А) Change the order of slides display - place the appropriate slides up or down.
  • (B) Edit a slide - click on the ‘Edit’ button and make the required changes in the open editor’s window.
  • (C) Delete a slide - click on the ‘Delete’ button opposite the unnecessary slide.
  • (D) Insert a new slide - click on the ‘Insert new slide’ button. A new slide will be added after the current one.

Editor’s functionality is similar to the Editable Content editor.

Conclusion

As you have just found out in this tutorial, creation of Billboard or JS image slider doesn’t take much time and is quite simple in Divine Elemente. At the same time, the result of Javascript image slider’s use in your design can make your work really unique and attractive.

PSD Hints, Elements And Best Practices

PSD hints, elements and best practices PSD hints, elements and best practices


Related Guides and Turorials:

  1. Editable Content
Read More »

Editable Content

Editable Content by Dmitriy, Divine Elemente Team | |

Definition and use of Divine Elemente’s new special feature: Editable Content. In this tutorial you’ll learn how to edit WordPress themes online.



Related: Elements, Properties, Publish Editor

Such elements as ‘Link’, ‘Image’, ‘Text’ have a unique property - Editable content in Divine Elemente v0.9. It is a new feature that informs your CMS after theme’s publishing that the content of such kind element’s block can be editable in WordPress CMS, right at the website frontend!

Working process with the Editable content property

Working process with the Editable content property.

A small 'Edit' label gives you a possibility to edit texts, images or insert adsense code directly at the website frontend after the publishing it from Adobe Photoshop.

You can also add your favorite YouTube reels, mp3 players, etc. with the help of the Editable content feature in Divine Elemente v0.9.

The Editable content window

The Editable content window.

And in case you are an advanced user, you can insert any HTML code or WordPress CMS plugin and extend your website’s functionality infinitely!

Below you can find more details on how to edit website content with no difficulties.


How to use Editable content?

Step 1. Create a required element / layer in Adobe Photoshop.

First of all, you are to prepare layers / group of layers for the element in your PSD template, and then, you are to assign such elements as 'Image', 'Text', or 'Link' to the layer.

Elements assignment in Adobe Photoshop using a PSD hint or in the Publish Editor of Elemente

Elements assignment in Adobe Photoshop using a PSD hint or in the Publish Editor of Elemente.

Step 2. Launch Divine Elemente and change the Editable сontent property.

And then 'Content: Editable in CMS' is to be set in the 'Properties' panel.

The Properties window

The Properties window.

Not editable in CMS (by default) - means that the field for editing in CMS is not displayed. The element is published as a static one, and its content cannot be edited in the WordPress CMS backend.

Editable (Rewrite in CMS) - means that the field for editing in CMS is displayed, and at each theme’s activation, this element’s data are rewritten by the data indicated in Adobe Photoshop (in case this element has been found in the previous theme in CMS).

Editable (Leave as is in CMS) - means that the field for the selected element’s editing in CMS is displayed, and at each theme’s activation, this element’s data remain the same as they were in CMS (in case this element has been found in the previous theme in CMS).

Step 3. Publish a theme and log in to the backend of WordPress CMS.

Theme’s activation

Theme’s activation.

Step 4. Switch on the content editing.

Find a hidden floating menu with Divine Elemente label. It is located in the top right corner of the browser window or in the top left corner (it depends on the 'Frontend label' element properties - you can find it in the Publish Editor). After that, you are to click on the checkbox 'Edit content' to enable (or disable) the editing mode.

Editable content: a hidden floating menu

Editable content: a hidden floating menu.

After you switch on the content editing mode, you’ll find the "e>" icon near editable elements. So, you can click on this icon and start editing an appropriate element.

Note: The hidden floating menu is active only if a user is logged in to the CMS as an administrator.

Step 5. Edit the element’s content.

You are to click on the icon that is near the editable element and make necessary changes of the element’s content in the appeared edit window. After that, click on the 'OK' button.

Insertion of the element’s new content and output

Insertion of the element’s new content and output.

And congratulations! After you confirm the changes made, all new entered data will be updated immediately. So, you can check your work at once with a new property of Divine Elemente - Editable content.


Conclusion

Thus, in few minutes you have learned Divine Elemente v0.9 new feature and now able to change editable content in WordPress theme directly at its frontend with help of the Editable Content.

Related Guides and Tutorials:


External:

Read More »