Installing Builder Addons
Installing Builder Addons is exactly the same as installing WordPress plugins.
To install the addon:
- Firstly, download the addon zip file from the link provided in your Themify Member Area.
- NOTE: some browsers (eg. Safari) auto extract zip files automatically. Right-click on the download link and select "Save Linked File As" and it will allow you to download as a zip file.
- Login to your site's admin area.
- Navigate to WP Admin > Plugins > Add New.
- Now, click the "Upload Plugin" link.
- Select "Browse" and navigate to the plugin zip file which you downloaded in the first step and then select the "Install Now" button.
- This will initiate the plugin installation process, and once finished, you can then activate the plugin.
Importing the addon demo layout
Each addon zip file contains a sample Builder data file which you can import to your site. It helps you to understand how the addon demo is created.
To import the addon demo data:
- First, extract addon zip file to your local computer
- You should have a folder of the addon. Inside there is a folder named "sample", and inside that folder there is a Builder data file in a zip format (eg. "addon_name_sample-builder-layout.zip").
- To import the Builder layout, login to admin and then go to the page frontend where you want to import the Builder layout. From the top admin bar > select Themify Builder > Import / Export > Import, upload the sample zip file.
Using the Image Pro Addon
Once addon is installed, you will find the Image Pro addon module in the Themify module panel. The module is available in both backend and frontend edit mode (just like all standard modules).
- In the backend: you can find the Image Pro module in the Themify Custom Panel.
- On the frontend: you can see the modules after turning on the Builder from top admin bar > Themify Builder > Turn On Builder.
- Drag and drop a Image Pro module in a row.
- Image Pro Options:
- Module Title = (Optional) Input any module title you would like that will appear at the top of the module.
- 1) Image URL = Upload or select any image from your library.
- 2) Width and Height = Set the desired pixel width and height of the image.
- Selecting the Fullwidth option will allow the image to span across the available width of the container.
- 3) Image Appearance = Select rounded for images to have rounded edge, or circle. The circle image appearance works best for images with square image formats.
- 4) Image Filter = Choose from grayscale, grayscale reverse, sepia, or blur
- 5) Image Hover Effect = Choose from zoom in, zoom out, rotate, shine, or glow.
- 1) Image Title = (Optional) Input title text that will appear when user hover over the image. Note: For partial overlay this will appear at the bottom of the image.
- 2) Image Caption = (Optional) Input caption text that will appear when user hover over the image.
- 3) Action Button = (Optional) Input any text you would like to appear inside the action button.
- 4) Button Color = Select pre-set button color options.
- 5) Link Type = Select how you would like to users to be redirected when they click on the button
- 6) Link = Input link where you would like users to be redirected to
- 7) Overlay = Choose to use color, image, or both types of overlay
- Overlay Color = Use the color to select any type of color. You can also adjust opacity by toggling with the opacity bar beside the color picker.
- Overlay Image = Upload or select any image from your library
- 8) Overlay Effect = Choose from 12 overlay effect that'll appear as user hover over your image.
Styling Image Pro
- Click the Styling tab to start customizing the Image Pro addon.
- Background Color = Input any type of background color you would like for the addon.
- Font = The title, text, and action button all have the following styling features:
- 1) Font Family = This will change the font of all the text for the specified element on the entire module.
- 2) Font Color = This will change the font color of the entire module
- 3) Font Size = This will change the font size of all the text for the specified element on the entire module.
- 4) Line Height = Is the gap between each line of text.
- 5) Text Align = Select the text alignment you would like the text to appear.
- Padding = Adjust the padding around the addon in px or %.
- Margin = Adjust the margin around the module in px or %.
- Border = Select type, color, and width of the module border you would like.
- Action Button:
- 1) Background color = Select any color you'd like for the action button. Make sure to set the frontend pre-set button color to transparent.
- 2) Font Color = Make sure to set the pre-set button color to transparent. Set button font color.
- Additional CSS Class = Add your own custom CSS for custom styling
- Reset Styling = Click this to reset all styling done on the module
Image Pro Animation
- Click the Animation tab to add some fun animation for the Image Pro addon.
- Effect = Select from 69+ animation effects.
- Delay = Select the amount of seconds you would like the animation to take effect
- Repeat = Select the number of times you would like the animation to occur.