Gallery Element

Gallery element is one of the most dynamic element ever created. It not only displays photographs and images but also attracts viewers. If you provide only image gallery and invite people to visit the location that would be enough to boost up your business.

Now a days, this element is a booster. If you add it to any of your site then it would not only increase the amount of your traffic but also boost up your business. To add this element to any column just simply follow these steps.

• Select Add New Element from column to open elements list modal
• Select Gallery element

A popup will appear showing three tabs - General, Styles, & Advanced. These tabs will help you to modify the gallery in your own way. The details are given below.

General Tab

The general tab holds the basic setting of gallery. You’ll find the following editing options here.

• Fields Group - Fields group holds various gallery fields.

A few field is given in the fields group so that you can know how to add other images to it and set it your way.

You can duplicate an existed field using this square icon.

You can delete an unnecessary field by clicking this basket icon. You can add a new field under existing field using this red + plus button.

You’ll find a few settings in each field inside the fields group. These settings are described below.

• Title - Title field will help you to add set a title for individual image. It’s optional. You can use it or just avoid it.
• Image - Set the image you want to display right in here.
• Alternate Text - You can provide an alternate text in case your image disappears in any of the browsers. It will let the viewer know what type os image was in it.
• Caption - An image without a caption is like a book without a title. It allows the views to know the backstory of an image.
• Tag - Now this is a surprising feature. You can set some tag if you want to keep filtered image. Imagine you’ve provided 100’s of images. Now search a special on would be really tough. So why not provide a tag to it so that later you can find it out in case you want to add any images to it or replace it. And it will be easier for your views to check images with different tags.
• Standard Grid - Standard grid will allow you set the images in the grid way. You can choose from the dropdown option as there are five options available - large, medium, small, stack and collapse. You can check them out and set the one you like.
• Gallery Alignment - Gallery alignment will help you to set the alignment of the images. There are five options available - left, center, right, between and around. You can choose any of them.
• Column - This field will allow you to set the number of image in a column that you want to show your visitors. Starting from 1 you can set up to 10 images in one single column.
• Filter - Enabling this option will help your visitors to see the images according to the tag you’re providing. It will filter the images according to your tag.
• Lightbox - Lightbox is when you click an image it will enlarge in size via popup effect to show the viewer a clear image. This option will help you to set the lightbox appearance in your way.
• Images Control - You can adjust the images through this option. There are a couple of adjusting options are provided for you. Besides, you can set the image positions from here. Click the dropdown and you’ll find the positioning options ready to use.

Styles Tab

Styles tab will help you to style up the gallery in your own way. Here you’ll find only one editing field : Image. The editing options are provided according to its field.

• Image Height - You can control the height of the image using scrolling or inserting a value in the input box situated right next to the scrolling bar.
• Image Width - You can control image width using scrolling or inserting a value in the input box situated right next to the scrolling bar.
• Normal & Hover - You might notice these two options peeping you. These are options that you’ll set for your viewer when they normally see it and when they hover over it. When you go for hovering a couple of settings will appear. Like - color and transition. Using color you can set a border color on it. And setting a transition amount will slow the hovering appearance.
• Border Type - Border type will allow you to choose what type of border you want for button or images of the slider. There are few options available - solid, double, dotted and dashed.
• Border Radius - There is a border radius available. You can control the radius of border by it. If you want a round shaped border then set the value of border radius more than 50.
• Box Shadow - Box shadow option will allow you to set a 3D effect by applying a shadow effect under the button. It will attract the viewer more.

Advanced Tab

The advanced tab has the advanced level of settings. You can edit then if you find it necessary or just leave it they way it is. Here you’ll find six fields : Element styles, Background, Border & Box Shadow, Animation, Custom CSS, and Identifier. These fields are described below in details.

• Element style - Here you’ll find the margin, padding and z-index option. Margin will help you to add space in accordance with page. Padding will help you to add space in accordance with the column. Z-index will work if you have 2 elements overlapping and you want to display the below element on top. Increment the z-index value and the below element will appear on top.
• Background - Background field will allow you to set a background in the column. You can set an image, a solid color or gradient effect of multiple color.
• Border & Box Shadow - You can give a nice designed border and box shadow to your column. Set a border type, border radius if you want a bit of round shape in the corner. And box shadow effect will give your column a floating effect. You can set color to it, spread the color or add blur it.
• Animation - Animation field will allow you to add a transition effect to the element. Select the entrance animation from the given effects, set the delay time and enable the repeat option (this is optional).
• Custom CSS - This field is available only on PRO version If you are a developer then you can add CSS code of your own to the site by using this operation. Just write the code and click the apply button. You’re CSS code will be added to the content and it won't affect the existing css effect..
• Identifier - This field holds the CSS id of every specific content. This will help you to edit the CSS section if you want to bring any changes in css style.