potfolio gallery logo

WORDPRESS PLUGINS | portfolio-gallery


User Manual

Step 1. Adding a Portfolio

To add a new Portfolio go to Porfolios> Add New Porfolio.

  • Add images. Use the standard WordPress Image uploader to add an image presing Add Project/Image button.
  • Title. Provide a title for the portfolio set.
  • Description. Provide a description for the portfolio set.
  • URL. Provide the link to be opened when hitting the image. In additon you can make the image to open in a separate window checking the box.

Step 2. General Options of Portfolio

This section will allow making changes for the specific view option of the Portfolio. Most of the view options allow styling and color options. The relevant changes will affect all portfolio using that specific view option.

2.1 Blocks Toggle Up/Down.
Element Styles
  • Element Background Color.Determine the background color for the element.
  • Element Border Width. Set the border width for the element.
  • Element Border Color. Select the element border color.
  • Toggle Button Style. Choose the style for the toggle button.
  • Show Separator Lines. Choose whether to display divider lines or not.
Main Image
  • Main Image Width. Set the main image width in pixels.
  • Main Image Height. Set the main image height in pixels.
Title
  • Title Font Size. Specify the font size for the portfolio title.
  • Title Font Color. Choose the color for the portfolio title font.
Thumbnails
  • Show Thumbnails. Choose whether to display the image thumbnails or not.
  • Thumbnails Position. Set the positioning of the thumbnails.
  • Thumbnails Width. Set the width for the image thumbnails.
Description
  • Show Description. Choose whether to display the description of the portfolio or not.
  • Description Font Size. Set the portfolio description font size in pixels.
  • Description Font Color. Select the portfolio description font color.
Link Button
  • Show Link Button. Choose whether to display Show More button.
  • Link Button Text. Define the text of the Show More button.
  • Link Button Font Size. Set the font size for the Show More button.
  • Link Button Font Color. Select the font color for the Show More button.
  • Link Button Font Hover Color. Select the font color for the Show More button when hovered.
  • Link Button Background Color. Select the background color for the Show More button.
  • Link Button Background Hover Color. Select the background color for the Show More button when hovered.
2.2 Full-Height Blocks
Element Styles
  • Block Width. Set the width of the blocks in pixels.
  • Element Background Color. Determine the background color for the element.
  • Element Border Width. Set the border width for the element.
  • Element Border Color. Select the element border color.
  • Show Separator Lines. Choose whether to display divider lines or not.
Title
  • Title Font Size. Specify the font size for the portfolio title.
  • Title Font Color. Choose the color for the portfolio title font.
Thumbnails
  • Show Thumbnails. Choose whether to display image thumbnails or not.
  • Thumbnails Position. Set the thumbnail position.
  • Thumbnails Width. Set the thumbnail width in pixels.
Description
  • Show Description. Choose whether to display the image descriptions or not.
  • Description Font Size. Determine the font size for the image descriptions.
  • Description Font Color. Choose the font color for the image description.
Link Button
  • Show Link Button. Choose whether to display Show More button.
  • Link Button Text. Define the text of the Show More button.
  • Link Button Font Size. Set the font size for the Show More button.
  • Link Button Font Color. Select the font color for the Show More button.
  • Link Button Font Hover Color. Select the font color for the Show More button when hovered.
  • Link Button Background Color. Select the background color for the Show More button.
  • Link Button Background Hover Color. Select the background color for the Show More button when hovered.
2.3 Gallery/Content Pop-Up
Element Styles
  • Element Width. Set the element width in pixels.
  • Element Height. Set the element height in pixels.
  • Element Background Color. Determine the background color for the element.
  • Element Border Width. Set the border width for the element.
  • Element Border Color. Select the element border color.
  • Element’s Image Overlay Color. Set the overlay color for the element image.
  • Element’s Image Overlay Transparency. Determine the transparency level of the overlay.
  • Zoom Image Style. Choose the light or dark options of the image zoom.
Element Title
  • Element Title Font Size. Specify the font size for the element title.
  • Element Title Font Color. Choose the color for the element title font.
Element Link Button
  • Show Link Button On Element. Choose whether to display Show More button on the element or not.
  • Link Button Text. Set the text for the Show More button.
  • Link Button Font Size. Defin the font size for the text over the button.
  • Link Button Font Color. Select the font color for the text over the buton.
  • Link Button Background Color. Select the background color for the text over the button.
Popup Styles
  • Popup Background Color. Select the popup background color.
  • Popup Overlay Color. Set the overlay color for the background.
  • Popup Overlay Transparency. Set the level of transprancy of the popup overlay.
  • Popup Close Button Style. Select the style of the Close button for the background.
  • Show Separator Lines. Choose whether to display divider lines or not.
Popup Title
  • Popup Title Font Size. Specify the font size for the popup title.
  • Popup Title Font Color. Choose the color for the popup title font.
Popup Thumbnails
  • Show Thumbnails. Choose whether to display the image thumbnails or not.
  • Thumbnails Position. Set the positioning of the thumbnails.
  • Thumbnails Width. Set the width for the image thumbnails.
Popup Description
  • Show Description. Choose whether to display the description of the portfolio or not.
  • Description Font Size. Set the portfolio description font size in pixels.
  • Description Font Color. Select the portfolio description font color.
Popup Link Button
  • Show Link Button. Choose whether to display Show More button.
  • Link Button Text. Define the text of the Show More button.
  • Link Button Font Size. Set the font size for the Show More button.
  • Link Button Font Color. Select the font color for the Show More button.
  • Link Button Font Hover Color. Select the font color for the Show More button when hovered.
  • Link Button Background Color. Select the background color for the Show More button.
  • Link Button Background Hover Color. Select the background color for the Show More button when hovered.
2.4 Full-Width Blocks
Elements Styles
  • Main Image Width. Set the width of the main image.
  • Element Background Color. Determine the background color for the element.
  • Element Border Width. Set the border width of the element.
  • Element Border Color. Select the element border color.
  • Show Separator Lines. Choose whether to display divider lines or not.
Title
  • Title Font Size. Specify the font size for the portfolio title.
  • Title Font Color. Choose the color for the portfolio title font.
Thumbnails
  • Show Thumbnails. Choose whether to display the image thumbnails or not.
  • Thumbnails Position. Set the positioning of the thumbnails.
  • Thumbnails Width. Set the width for the image thumbnails.
Description
  • Show Description. Choose whether to display the description of the portfolio or not.
  • Description Font Size. Determine the description font size in pixels.
  • Description Font Color. Select the font color for the description.
Link Button
  • Show Link Button. Choose whether to display Show More button.
  • Link Button Text. Define the text of the Show More button.
  • Link Button Font Size. Set the font size for the Show More button.
  • Link Button Font Color. Select the font color for the Show More button.
  • Link Button Font Hover Color. Select the font color for the Show More button when hovered.
  • Link Button Background Color. Select the background color for the Show More button.
  • Link Button Background Hover Color. Select the background color for the Show More button when hovered.
2.5 FAQ
First Shown Block
  • Block Width. Set the width for the block in pixels.
  • Block Background Color. Selecth the background
  • Block Border Width. Se the boder width in pixels.
  • Block Border Color. Choose the boder color.
Title
  • Title Font Size. Specify the font size for the portfolio title.
  • Title Font Color. Choose the color for the portfolio title font.
  • Toggle Button Style. Select the toggle button style from the provided options.
Description
  • Show Description. Choose whether to display the description of the portfolio or not.
  • Description Font Size. Set the portfolio description font size in pixels.
  • Description Font Color. Select the portfolio description font color.
Link Button
  • Show Link Button. Choose whether to display Show More button.
  • Link Button Text. Define the text of the Show More button.
  • Link Button Font Size. Set the font size for the Show More button.
  • Link Button Font Color. Select the font color for the Show More button.
  • Link Button Font Hover Color. Select the font color for the Show More button when hovered.
  • Link Button Background Color. Select the background color for the Show More button.
  • Link Button Background Hover Color. Select the background color for the Show More button when hovered.
2.6 Content Slider
Slider
  • Slider Background Color. Choose the background color for the slider.
  • Slider Tabs Font Color. Set the font color for the slider tabs.
  • Slider Tabs Background Color. Set the background color for the slider tabs.
  • Icons Style. Choose the icon style.
Images
  • Main Image Width. Set the main image width in pixels.
  • Main Image Height. Set the main image height in pixels.
Show Thumbnails
  • Thumbnails Width. Set the width for the thumbnails.
  • Thumbnails Height. Set the height for the imag thumbnails.
Title
  • Title Font Size. Specify the font size for the portfolio title.
  • Title Font Color. Choose the color for the portfolio title font.
Link Button
  • Show Link Button. Choose whether to display Show More button.
  • Link Button Text. Define the text of the Show More button.
  • Link Button Font Size. Set the font size for the Show More button.
  • Link Button Font Color. Select the font color for the Show More button.
  • Link Button Font Hover Color. Select the font color for the Show More button when hovered.
  • Link Button Background Color. Select the background color for the Show More button.
  • Link Button Background Hover Color. Select the background color for the Show More button when hovered.
2.7 Lightbox Gallery
Image
  • Image Width. Set the image width in pixels.
  • Image Border Width. Set the image border width in pixels.
  • Image Border Color. Select the image border color.
  • Border Radius. Set the border radius in pixels.
Title
  • Title Font Size. Specify the font size for the portfolio title.
  • Title Font Color. Choose the color for the portfolio title font.
  • Title Font Hover Color. Choose the color for the portfolio title font when hovered.
  • Title Background Color. Set a bacground color fot the title.
  • Title Background Transparency. Determine the title background transparency level.

Step 3. Inserting Created Portfolio

On the upper right hand you can identify three blocks of options for the portfolio.

  • Select The Portfolio/Gallery View. Choose one of the options for the porfolio/gallery image display.
  • Usage. Here you will see the shortcode for the created portfolio. You can add the shortcode to the page or post where you want the images to be displayed. In addition you can find the shortcode icon with each post and page within its TinyMCE editor and can click on it, select the portfolio and insert the shortcode.
  • Template Usage. If you want to use the portfolio for a custom location with the theme, you can copy and paste the provided code.
    To do so you should insert the following shorcode:


    Where N is the number ID of the created Portfolio Gallery.