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

  • http://www.legendswebdesign.com sarah
    Can more than one billboard be placed in the template or do the billboard in the header and footer have to be the same? Can there be 2 separate billboards in the header?
  • Dmitriy, Divine Elemente Team
    The current Divine Elemente plugin allows to create the two separate billboards: one at the header and one at the footer areas. Also, the current functionality will be modified soon (at the new WordPress framework, which we are developing at this moment)
  • Rich
    I want to build a band page how do you add videos and mp3′s ?
  • Vera
    hello, I live in Israel and use localized WP version, that is in Hebrew. I do not know if you are aware of it, but in that version everything is RTL – the whole control panel is switched RTL, for one. When I activate the Divine Elemente plugins, this feature is corrupted, and most of the control panel switches to LTR. It is very uncomfortable to use, as the functionalities are then divided – some on the right, some on the left, some paritally seen… When I turn the plugins off – everything returns to its place. How to fix that? Thank you, Vera
  • http://www.divine-project.com Ivan, Divine Elemente Team
    Hi Vera, we’ve consider your suggestions. Please subscribe to our newsletter to receive fixes in upcoming updates.
  • Pingback: Create WordPress Theme (Part 4): Modify WordPress Theme

  • Pingback: Top 10 Best WordPress Widgets - Free Blogging Tricks : Free Blogging Tricks

  • Pingback: Top 10 Best WordPress Widgets - Free Blogging Tricks : Free Blogging Tricks

  • Pingback: Create WordPress Theme (Part 2): Design a PSD Template