Notice: The called constructor method for WP_Widget in jehanne_ExtendedWidget is deprecated since version 4.3.0! Use
__construct()
instead. in /home/users/9/9161226715/domains/wpblogs.ru/themes/wp-includes/functions.php on line 3763

Notice: The called constructor method for WP_Widget in jehanne_SocialIcons is deprecated since version 4.3.0! Use
__construct()
instead. in /home/users/9/9161226715/domains/wpblogs.ru/themes/wp-includes/functions.php on line 3763

Notice: The called constructor method for WP_Widget in jehanne_Image is deprecated since version 4.3.0! Use
__construct()
instead. in /home/users/9/9161226715/domains/wpblogs.ru/themes/wp-includes/functions.php on line 3763
Image Widget – Just another WP Themes Sites site
Notice: The called constructor method for WP_Widget in jehanne_ExtendedWidget is deprecated since version 4.3.0! Use
__construct()
instead. in /home/users/9/9161226715/domains/wpblogs.ru/themes/wp-includes/functions.php on line 3763

Image Widget: Documentation

This is an example page. It’s different from other pages in Jehanne theme because it uses Full Width/No column Home page Template. You can choose this template for your front page. You can see Jehanne Image widgets at the top of this page. This is a Demo Page and Instruction for the Jehanne Image Widget.

How to start

You can find Jehanne Image Widget at Appareance >> Widgets screen of your admin panel. Drag-and-Drop it into any sidebar and customize by your own Image/Title/Desctiption/Link/Link Caption and animation settings.

Widget Settings

  1. COUNT: number of images in a widget. Press “Save” button after changing this property. After save new blocks should appear in the settings.
  2. Columns count: you can choose a number of columns to be shown in Jehanne’s widget by changing widget’s settings. It can have from 1 to 4 columns.
  3. Main settings for every Image:
    • IMAGE: you can choose an image from your media library by pressing button “Upload image”. This field should contain an id of an image from the media library.
    • HEADER: title of the image.
    • TEXT: description.
    • LINK: link for button.
    • BUTTON CAPTION: the button’s caption text.
  4. No Margins: use this property to make layout without space between images.
  5. Paddings: use this property to add a space at different sides of an Image Widget.
    • PADDING RIGHT(%): the right padding for the entire widget.
    • PADDING LEFT(%): the left padding for the entire widget.
    • PADDING TOP(PX): the top padding for the entire widget.
    • PADDING BOTTOM(PX): the bottom padding for the entire widget.
  6. Display description block: this property allows you to add an additional title/description box for this widget on left or right side. Press “Save” button after changing this property. After save new settings (MAIN TITLE/MAIN DESCRIPTION/right) should appear in the settings.
    • MAIN TITLE: additional title.
    • MAIN DESCRIPTION: additional description.
    • right: position of additional block (right or left).
  7. CSS3 effects: you can choose from 10 different hovers (Demo in the header). Every Image can have unique effect.
  8. JQuery animation: there are animation options for every Image in a widget:
    • Animate: you can switch off animation on scroll by changing this property.
    • Once: this setting force animation to be vissible on first scroll only.
    • Zoom In: add Zoom In class to the current Image when it is visible on the screen.

    There are animation options for all Images in widget:

    • Step Animation: allows you to add hover effects with time interval.
    • Play Hover for all Elements at once: animate all Images when mouse comes over any Image in the widget.

Inage Size

Images with different dimensions can cause layout issues if you have 2 and more rows.

Have fun!