- /
- /
- /
How to customize Icegram’s Gallery Templates
Icegram's Gallery tries to cover as many use cases as possible. However, we also acknowledge that there’s no size that fits all. So here's a detailed walkthrough on how you can personalize Icegram's Gallery Templates to fit your needs.
Customizing the background
Suppose you want to add your own image as a the background image in place of the default one.Follow these steps:
- Go to the Custom Code section in the Campaign Editing panel.
- Locate the class #ig_this_message
- Search for the parameter ‘background-image’
- Replace the URL mentioned in there to the URL of the background image of your choice
- Hit Save and Preview
Alternatively, you could also modify other parameters like;
- Background-size.
- Background-position
- Background-repeat
Customizing the font
The next thing, you might want to change is the font of the Gallery item.
Here’s how you should proceed:
- Change the WP Editor mode from visual to text.
- Identify the class applied to the text you want to modify.
For example: The text mode looks something like this;Since 1987 – Trusted By Bike Enthusiasts All Over The WorldBecome A Member Of
The World's Elite Bike GangAnd you want to change the font family for the class ig_sub_heading
- Locate the class in the Custom CSS section
- Change the parameters you wish to modify
- Hit save and publish
Note: If you wish to use any other font-family then kindly embed the Google font code within the Custom CSS.
How to get the Google Font code?
- Go to Google fonts
- Select the Font you like
- Click on the + sign next to the font
- Open the Family Selected tab
- Copy paste the link (refer to the image) in a new tab
- You will get the entire code
- Copy paste this code in the Custom CSS section
Customizing the close button
You can also style the button in the Gallery items.
Here’s how:
- Go to the Custom CSS section
- Locate the class #ig_this_message .ig_close
If you have a close button image embed it in the background-image URL
Also if you want to use the default ones, simply change the value of background-position: Xpx center - Save and publish the campaign