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
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.
Want to have more control? This jQuery tooltip is for you.
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.
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!
Billboard (Slideshow Plugin)
by Dmitriy, Divine Elemente Team
| May 30, 2011
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.
So, ‘Billboard’ consists of such elements as ‘Next’, ‘Previous’ buttons, and also any number of layers with ‘Slides’.
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.
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.
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 (‘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
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
Troubleshooting: elements are out of grid boundaries.
‘Billboard’ elements should not be out of the ‘Header’, the ‘Footer’ boundaries!
Troubleshooting. Elements assignment
If one of the ‘Billboard’ elements is out of the grid bocks’ boundaries, the element will not be assigned!
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
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
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
(А) 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.