Lite/Free version Installation

Gallery plugin includes 2 versions Free/Lite and PRO/Paid.
Both versions have their own way for installation, deactivation and update.
In order to install Lite/Free version, follow the instruction below:

  1. 1

    Go to Dashboard of your WordPress website > select Plugins and click “Add New”

  2. 2

    Search for “GrandWP Gallery”

  3. 3

    After detecting the desired plugin, click “Install Now”

  4. 4

    After the installation is completed click “Activate Plugin”

  5. 5

    The plugin appears in the “Dashboard” sidebar menu. Now the plugin is ready to be used

Please, note that in the case of possible updates you will get a notification in your WordPress website Dashboard (Plugins section)

Use this method of installation in the case, if you wish to install PRO/Paid version.
If you already have been using Free/Lite version of plugin, you will need to deactivate and delete it and then install zip file with Pro version. (By deactivation, you are not going to lose any data. If you are willing to erase whole data, then uninstall the plugin)

PRO/Paid version Installation

If you already have been using plugin Free/Lite version, deactivate and delete it and then install zip file with Pro version.
(By deactivation, you are not going to lose any data. If you are willing to erase whole data, then uninstall the plugin).

  1. 1

    Go to Dashboard> Plugins and click “Deactivate” on the plugin you wish to update

  2. 2

    After plugin is deactivated, click “Delete”. No data will be lost.
    After your plugin is deleted, go to Plugins> Add New

  3. 3

    “Upload” file from the top of the page

  4. 4

    Click “Choose File” and choose zip file you have downloaded from your Grandwp.com account Click “Install Now”

  5. 5

    After installation is finished, “Activate” the plugin. The plugin is ready to be used.
    Use this method for any extension you want to update (or install for the first time)

Note that the same actions need to be done to UPGRADE existing PRO/Paid version to latest available.

Plugin install/update via FTP

If the standard upload methods of the plugin installation are not working for you, try to install via FTP.

  1. 1

    Find a FTP client

  2. 2

    Download the zip file from WordPress.org

  3. 3

    Extract zip file directory to your PC

  4. 4

    Upload the newly extracted directory to /wp-content/plugins/

  5. 5

    The plugin is ready to be activated from the website dashboard.
    After the activation is completed, plugin appears in the “Dashboard” sidebar menu

Please, note that in the case of possible updates you will get a notification in your WordPress website Dashboard (Plugins section)

Use this method of installation in the case, if you wish to install PRO/Paid version.
If you already have been using Free/Lite version of plugin, you will need to deactivate and delete it and then install zip file with Pro version.
(By deactivation, you are not going to lose any data. If you are willing to erase whole data, then uninstall the plugin)

Creating Gallery project

After the plugin is successfully activated, go to website Dashboard and detect the GrandWP Gallery plugin. Click on GrandWP Gallery submenu to have an access to available Gallery list.

  1. 1

    To create your first Gallery project, click on “New Gallery”

  2. 2

    You will be redirected to a newly created “Gallery Style” section

  3. 3

    From here add images, videos, make changes in General Options and choose current Gallery view

  4. 4

    A block with uploaded images will appear below

General Options

  1. 1

    Add a title to newly created Gallery

  2. 2

    Choose the content displaying type

  3. 3

    Set Gallery image order

  4. 4

    Sort images by offered variants

Custom CSS

  1. 1

    Use this special section to make additional CSS customizations

  2. 2

    Gallery parent selector is given in the field

  3. 3

    If general selector is chosen, theme CSS can also be overwritten

Get shortcode

  1. 1

    From this get two-type shortcodes to publish created Gallery

  2. 2

    Copy regular shortcode to insert Gallery into post and/or page

  3. 3

    Use Gallery plugin icon to insert Gallery into post and/or page

  4. 4

    Copy PHP shortcode to insert the created Gallery to template files

Views/ Styles (Justified view)

Element Styles

  1. 1

    Title Option
    Choose how to display Image title

  2. 2

    Title Horizontal Position
    Choose title horizontal position

  3. 3

    Title Vertical Position
    Choose title vertical position

  4. 4

    Title On Hover Type
    Choose title on hover effect

  5. 5

    Title Font Size
    Set title font size in px

  6. 6

    Title Color
    Set title color in HEXadecimal color system

  7. 7

    Title Background Color
    Set title background color in HEXadecimal color system

  8. 8

    Title Background Opacity (%)
    Set title background opacity in percentage

  9. 9

    Image Margin
    Set image margin in px

  10. 10

    Image Border Width
    Set image border width in px

  11. 11

    Image Border Color
    Set image border color in HEXadecimal color system

  12. 12

    Image Border Radius
    Set image border radius in px

  13. 13

    On Hover Overlay
    Turn on hover overlay on/off

  14. 14

    Lightbox
    Choose whether to turn Lightbox on/off

  15. 15

    URL Icon
    Turn URL icon on/off

  16. 16

    Image As Link
    Set image as link

  17. 17

    Open Link In New Tab
    Choose whether to open the link in a new tab

  18. 18

    Image Hover Effect
    Choose image hover effect

  19. 19

    Image On Hover Reversed Effect
    Choose whether to open the link in a new tab

  20. 20

    Image Element Shadow
    Choose whether to turn image element shadow on/off

  21. 21

    Lightbox Type
    Choose Lightbox Type

Load More Styles

  1. 1

    Load More
    Set the text you want to appear on the button

  2. 2

    Load More Position
    Choose load more button position

  3. 3

    Font Size
    Set load more text font size in px

  4. 4

    Vertical Padding
    Set load more vertical padding in px

  5. 5

    Horizontal Padding
    Set load more horizontal padding in px

  6. 6

    Border Width
    Set load more button border width in px

  7. 7

    Border Radius
    Set load more button border radius in px

  8. 8

    Border Color
    Set load more button border color in HEXadecimal color system

  9. 9

    Button Text Color
    Set load more button text color in HEXadecimal color system

  10. 10

    Background Color
    Set load more button background color in HEXadecimal color system

  11. 11

    Font Type
    Choose load more button text font type

  12. 12

    On Hover Border Color
    Set load more button border on hover color in HEXadecimal color system

  13. 13

    Text On Hover Color
    Set text on hover color in HEXadecimal color system

  14. 14

    On Hover Background Color
    Set background color for load more button text on hover in HEXadecimal color system

  15. 15

    Show Loading Icon
    Choose whether to turn loading icon on/off

  16. 16

    Loading Icon color
    Set loading icon color

Pagination Styles

  1. 1

    Position
    Choose pagination position

  2. 2

    Font size
    Set pagination font size in px

  3. 3

    Vertical Padding
    Set pagination vertical padding in px

  4. 4

    Horizontal Padding
    Set pagination horizontal padding in px

  5. 5

    Margin
    Set margin value between elements in px

  6. 6

    Border Width
    Set border width value in px

  7. 7

    Border Radius
    Set border radius value in px

  8. 8

    Border Color
    Set border color in HEXadecimal color system

  9. 9

    Pagination Elements Color
    Set pagination elements color in HEXadecimal color system

  10. 10

    Background Color
    Set pagination elements background color in HEXadecimal color system

  11. 11

    Font Type
    Choose pagination element font type

  12. 12

    On Hover Border Color
    Set pagination element border on hover color

  13. 13

    On Hover Color
    Set pagination element on hover color

  14. 14

    On Hover Background Color
    Set pagination element on hover background color

  15. 15

    Navigation Type
    Choose navigation type

  16. 16

    Navigation Text
    Set navigation text. Note that text must be separated with comma

  17. 17

    Visible Page Quantity
    Set visible page quantity

Views/ Styles (Tiles view)

Element Styles

  1. 1

    Title Option
    Choose how to display Image title

  2. 2

    Title Horizontal Position
    Choose title horizontal position

  3. 3

    Title Vertical Position
    Choose title vertical position

  4. 4

    Title On Hover Type
    Choose title on hover effect

  5. 5

    Title Font Size
    Set title font size in px

  6. 6

    Title Color
    Set title color in HEXadecimal color system

  7. 7

    Title Background Color
    Set title background color in HEXadecimal color system

  8. 8

    Title Background Opacity (%)
    Set title background opacity in percentage

  9. 9

    Image Margin
    Set image margin in px

  10. 10

    Image Width
    Set image width in px

  11. 11

    Minimal Columns
    Set minimal column number

  12. 12

    Image Border Width
    Set image border width in px

  13. 13

    Image Border Color
    Set image border color in HEXadecimal color system

  14. 14

    Image Border Radius
    Set image border radius in px

  15. 15

    On Hover Overlay
    Choose navigation type

  16. 16

    Lightbox
    Choose whether to turn Lightbox on/off

  17. 17

    URL Icon
    Choose whether to turn URL icon on/off

  18. 18

    Image As Link
    Set image as link

  19. 19

    Open Link In New Tab
    Choose whether to open the link in a new tab

  20. 20

    Image Hover Effect
    Choose image hover effect

  21. 21

    Image On Hover Reversed Effect
    Choose whether to turn reversed effect on/off

  22. 22

    Image Element Shadow
    Choose whether to turn image element shadow on/off

  23. 23

    Lightbox Type
    Choose Lightbox Type

Load More Styles

  1. 1

    Load More
    Set the text you want to appear on the button

  2. 2

    Load More Position
    Choose load more button position

  3. 3

    Font Size
    Set load more text font size in px

  4. 4

    Vertical Padding
    Set load more vertical padding in px

  5. 5

    Horizontal Padding
    Set load more horizontal padding in px

  6. 6

    Border Width
    Set load more button border width in px

  7. 7

    Border Radius
    Set load more button border radius in px

  8. 8

    Border Color
    Set load more button border color in HEXadecimal color system

  9. 9

    Button Text Color
    Set load more button text color in HEXadecimal color system

  10. 10

    Background Color
    Set load more button background color in HEXadecimal color system

  11. 11

    Font Type
    Choose load more button text font type

  12. 12

    On Hover Border Color
    Set load more button border on hover color in HEXadecimal color system

  13. 13

    Text On Hover Color
    Set text on hover color in HEXadecimal color system

  14. 14

    On Hover Background Color
    Set background color for load more button text on hover in HEXadecimal color system

  15. 15

    Show Loading Icon
    Choose whether to turn loading icon on/off

  16. 16

    Loading Icon Color
    Choose loading icon color

Pagination Styles

  1. 1

    Position
    Choose pagination position

  2. 2

    Font size
    Set pagination font size in px

  3. 3

    Vertical Padding
    Set pagination vertical padding in px

  4. 4

    Horizontal Padding
    Set pagination horizontal padding in px

  5. 5

    Margin
    Set margin value between elements in px

  6. 6

    Border Width
    Set border width value in px

  7. 7

    Border Radius
    Set border radius value in px

  8. 8

    Border Color
    Set border color in HEXadecimal color system

  9. 9

    Pagination Elements Color
    Set pagination elements color in HEXadecimal color system

  10. 10

    Background Color
    Set pagination elements background color in HEXadecimal color system

  11. 11

    Font Type
    Choose pagination element font type

  12. 12

    On Hover Border Color
    Set pagination element border on hover color

  13. 13

    On Hover Color
    Set pagination element on hover color

  14. 14

    On Hover Background Color
    Set pagination element on hover background color

  15. 15

    Navigation Type
    Choose navigation type

  16. 16

    Navigation Text
    Set navigation text. Note that text must be separated with comma

  17. 17

    Visible Page Quantity
    Set visible page quantity

Views/ Styles (Carousel view)

Element Styles

  1. 1

    Title Option
    Choose how to display Image title

  2. 2

    Title Horizontal Position
    Choose title horizontal position

  3. 3

    Title Vertical Position
    Choose title vertical position

  4. 4

    Title On Hover Type
    Choose title on hover effect

  5. 5

    Title Font Size
    Set title font size in px

  6. 6

    Title Color
    Set title color in HEXadecimal color system

  7. 7

    Title Background Color
    Set title background color in HEXadecimal color system

  8. 8

    Title Background Opacity (%)
    Set title background opacity in percentage

  9. 9

    Image Margin
    Set image margin in px

  10. 10

    Image Width
    Set image width in px

  11. 11

    Image Height
    Set image height in px

  12. 12

    Carousel Position
    Choose carousel position

  13. 13

    Background
    Choose whether to turn background on/off

  14. 14

    Background Color
    Set carousel background color

  15. 15

    Image Border Width
    Set image border width in px

  16. 16

    Image Border Color
    Set image border color in HEXadecimal color system

  17. 17

    Image Border Radius
    Set image border radius in px

  18. 18

    Lightbox
    Choose whether to turn Lightbox on/off

  19. 19

    URL Icon
    Choose whether to turn URL icon on/off

  20. 20

    Image As Link
    Set image as link

  21. 21

    Open Link In New Tab
    Choose whether to open the link in a new tab

  22. 22

    On Hover Overlay
    Choose whether to turn on hover overlay on/off

  23. 23

    Image Hover Effect
    Choose image hover effect

  24. 24

    Image On Hover Reversed Effect
    Choose whether to turn reversed effect on/off

  25. 25

    Image Element Shadow
    Choose whether to turn image element shadow on/off

  26. 26

    Lightbox Type
    Choose Lightbox Type

Navigation Styles and Settings

  1. 1

    Enable Navigation
    Choose whether to turn navigation on/off

  2. 2

    Number Of Navigated Elements
    Set number of elements to scroll after clicking on next/prev button

  3. 3

    Scrolling Duration (ms)
    Set scrolling duration in ms

  4. 4

    Autoplay
    Choose whether to turn autoplay on/off

  5. 5

    Autoplay Timeout (ms)
    Set autoplay timeout in ms

  6. 6

    Autoplay Direction
    Choose autoplay direction

  7. 7

    Autoplay Pause On Hover
    Choose whether to turn autoplay pause on hover on/off

  8. 8

    Navigation Vertical Position
    Choose navigation vertical position

  9. 9

    Navigation Horizontal Position
    Choose navigation horizontal position

  10. 10

    Play/Pause Icon
    Choose whether to turn play/pause icon on/off

  11. 11

    Space Between Icons
    Set space between icons in px

Views/ Styles (Slider view)

Element Styles

  1. 1

    Image Width
    Set image width in px

  2. 2

    Image Height
    Set image height in px

  3. 3

    Autoplay
    Choose whether to turn autoplay on/off

  4. 4

    Autoplay Timeout (ms)
    Set autoplay timeout in ms

  5. 5

    Autoplay Speed (ms)
    Set autoplay speed in ms

  6. 6

    Pause On Hover
    Choose whether to turn pause on hover on/off

  7. 7

    Image Behavior
    Choose image behavior type

  8. 8

    Effects
    Choose image effect type

  9. 9

    Loading Icon Type
    Choose loading type

  10. 10

    Loading Icon Color
    Choose loading color

  11. 11

    Fullscreen
    Choose whether to turn fullscreen button on/off

  12. 12

    Fullscreen Icon Horizontal Position
    Choose fullscreen icon horizontal position

  13. 13

    Fullscreen Icon Vertical Position
    Choose fullscreen icon vertical position

  14. 14

    Zoom
    Choose whether to turn zoom control on/off

  15. 15

    Zoom Panel
    Choose whether to turn zoom control on/off

  16. 16

    Zoom Panel Horizontal Position
    Choose zoom panel horizontal position

  17. 17

    Zoom Panel Vertical Position
    Choose zoom panel vertical position

  18. 18

    Video Play Button Type
    Choose video play button type

  19. 19

    Text Panel
    Choose whether to turn text panel on/off

  20. 20

    Text Panel Always On
    Choose whether to turn text panel always on on/off

  21. 21

    Title
    Choose whether to turn title on/off

  22. 22

    Title Font Size
    Set title font size in px

  23. 23

    Title Color
    Set title color in HEXadecimal color system

  24. 24

    Description
    Choose whether to turn description on/off

  25. 25

    Description Font Size
    Description Font Size

  26. 26

    Description Color
    Set description color in HEXadecimal color system

  27. 27

    Text Panel Background
    Choose whether to turn text panel background on/off

  28. 28

    Text Panel Background Color
    Set text panel background color in HEXadecimal color system

  29. 29

    Text Panel Background Opacity (%)
    Set Text Panel background Opacity in percentage

  30. 30

    Gallery Loop
    Choose whether to turn the gallery loop on/off

  31. 31

    Playlist
    Choose whether to turn playlist on/off

  32. 32

    Playlist Position
    Choose playlist position

  33. 33

    Thumbnails Width
    Set playlist thumbnails width in px

  34. 34

    Thumbnails Height
    Set playlist thumbnails height in px

  35. 35

    Playlist Background Color
    Set playlist background color in HEXadecimal color system

Navigation Styles and Settings

  1. 1

    Bullets
    Choose whether to turn bullets on/off

  2. 2

    Bullets Horizontal Position
    Choose bullets horizontal position

  3. 3

    Bullets Vertical Position
    Choose bullets vertical position

  4. 4

    Arrows
    Choose whether to turn arrows on/off

  5. 5

    Controls Always On
    Choose whether to turn controls always on on/off

  6. 6

    Progress Indicator
    Choose whether to turn progress indicator on/off

  7. 7

    Progress Indicator Type
    Choose progress indicator type

  8. 8

    Progress Indicator Horizontal Position
    Choose progress indicator position

  9. 9

    Progress Indicator Vertical Position
    Choose progress indicator position

  10. 10

    Play/Pause Button
    Choose whether to turn play/pause button on/off

  11. 11

    Play/Pause Button Horizontal Position
    Choose play/pause button horizontal position

  12. 12

    Play/Pause Button Vertical Position
    Choose play/pause button vertical position

Views/ Styles (Grid view)

Element Styles

  1. 1

    Image Width
    Choose image width in px

  2. 2

    Image Height
    Choose image height in px

  3. 3

    Gallery Rows Quantity
    Set space between columns in px

  4. 4

    Space Between Columns
    Set space between columns in px

  5. 5

    Space Between Rows
    Set space between rows in px

  6. 6

    Container Width (%)
    Set container width in percentage

  7. 7

    Gallery Background
    Choose whether to turn gallery background on/off

  8. 8

    Gallery Background Color
    Set gallery background color in HEXadecimal color system

  9. 9

    Title Option
    Choose how to display Image title

  10. 10

    Title Horizontal Position
    Choose title horizontal position

  11. 11

    Title Vertical Position
    Choose title vertical position

  12. 12

    Title On Hover Type
    Choose title on hover effect

  13. 13

    Title Font Size
    Set title font size in px

  14. 14

    Title Color
    Set title color in HEXadecimal color system

  15. 15

    Title Background Color
    Choose title background color in HEXadecimal color system

  16. 16

    Title Background Opacity (%)
    Set title background opacity in percentage

  17. 17

    Image Border Width
    Set image border width in px

  18. 18

    Image Border Color
    Set image border color in HEXadecimal color system

  19. 19

    Image Border Radius
    Set image border radius in px

  20. 20

    Lightbox
    Choose whether to turn Lightbox on/off

  21. 21

    URL Icon
    Choose whether to turn URL icon on/off

  22. 22

    Image As Link
    Image As Link

  23. 23

    Open Link In New Tab
    Choose whether to open the link in a new tab

  24. 24

    On Hover Overlay
    Turn on hover overlay on/off

  25. 25

    Image Hover Effect
    Choose image hover effect

  26. 26

    Image On Hover Reversed Effect
    Choose whether to turn reversed effect on/off

  27. 27

    Image Element Shadow
    Choose whether to turn image element shadow on/off

  28. 28

    Lightbox Type
    Choose Lightbox type

Navigation Styles and Settings

  1. 1

    Navigation Type
    Choose navigation type

  2. 2

    Navigation Position
    Choose navigation position

  3. 3

    Navigation Offset
    Navigation Offset in px

  4. 4

    Bullets Margin from Top
    Set bullets margin from the top in px

  5. 5

    Bullets Color
    Choose bullets color type

  6. 6

    Space Between Bullets
    Set space between bullets in px

  7. 7

    Arrows Margin From Top
    Set arrows margin from the top in px

  8. 8

    Space Between Arrows
    Set space between arrows in px

Lightbox Settings

Wide Type Styles

  1. 1

    Arrows Offset
    Set arrows offset in px

  2. 2

    Overlay Color
    Set overlay color in HEXadecimal color system

  3. 3

    Overlay Opacity (%)
    Set overlay opacity in percentage

  4. 4

    Top Panel Background Color
    Set top panel background color in HEXadecimal color system

  5. 5

    Top Panel Opacity (%)
    Set top panel opacity in percentage

  6. 6

    Image Count
    Choose whether to turn image count on/off

  7. 7

    Image Count Text Size
    Set image count text font size in px

  8. 8

    Image Count Text Color
    Set image count text color in in HEXadecimal color system

  9. 9

    Image Border Width
    Set image border width in px

  10. 10

    Image Border Color
    Set image border color in HEXadecimal color system

  11. 11

    Image Border radius
    Set image border radius in px

  12. 12

    Image Shadow
    Choose whether to turn image shadow on/off

  13. 13

    Image Swipe
    Choose whether to turn Image Swipe on/off

  14. 14

    Image Zoom
    Choose whether to turn image zoom on/off

  15. 15

    Text Panel
    Choose whether to turn text panel on/off

  16. 16

    Text Panel Vertical Padding
    Set text panel vertical padding in px

  17. 17

    Text Panel Horizontal Padding
    Set text panel horizontal padding in px

  18. 18

    Title
    Choose whether to turn title on/off

  19. 19

    Title Color
    Set title color in HEXadecimal color system

  20. 20

    Title Font Size
    Set title font size in px

  21. 21

    Description
    Choose whether to turn description on/off

  22. 22

    Description Color
    Set description color in HEXadecimal color system

  23. 23

    Description Font Size
    Set description font size in px

  24. 24

    Text Position
    Choose text position

Compact Type Styles

  1. 1

    Arrows Offset
    Set arrows offset in px

  2. 2

    Overlay Color
    Set overlay color in HEXadecimal color system

  3. 3

    Overlay Opacity (%)
    Set overlay opacity in percentage

  4. 4

    Image Count
    Choose whether to turn image count on/off

  5. 5

    Image Count Text Size
    Set image count text font size in px

  6. 6

    Image Count Text Color
    Set image count text color in in HEXadecimal color system

  7. 7

    Image Border Width
    Set image border width in px

  8. 8

    Image Border Color
    Set image border color in HEXadecimal color system

  9. 9

    Image Border radius
    Set image border radius in px

  10. 10

    Image Shadow
    Choose whether to turn image shadow on/off

  11. 11

    Image Swipe
    Choose whether to turn Image Swipe on/off

  12. 12

    Image Zoom
    Choose whether to turn image zoom on/off

  13. 13

    Text Panel
    Choose whether to turn text panel on/off

  14. 14

    Text Panel Vertical Padding
    Set text panel vertical padding in px

  15. 15

    Text Panel Horizontal Padding
    Set text panel horizontal padding in px

  16. 16

    Text Panel Vertical Padding
    Set text panel vertical padding in px

  17. 17

    Title
    Choose whether to turn title on/off

  18. 18

    Title Color
    Set title color in HEXadecimal color system

  19. 19

    Title Font Size
    Set title font size in px

  20. 20

    Description
    Choose whether to turn description on/off

  21. 21

    Description Color
    Set description color in HEXadecimal color system

  22. 22

    Description Font Size
    Set description font size in px

  23. 23

    Text Position
    Choose text position