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 A/B Image Addon
Once addon is installed, you will find the A/B Image 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 A/B Image 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 A/B Image module in a row.
- A/B Image Options
- 1) Module Title = Insert the module title that will appear at the top of the module. It will appear aligned to the left, upper-case, in H3 format.
- 2) Image URL = Upload or select an image from your media folder. The image uploaded here will appear on the left side and only show half of the image.
- 3) Second Image URL = Upload or select an image from your media folder. The image uploaded here will appear on the left side and only show half of the image.
- 4) Image Alt = (Optional) The image alt is the image "alt" attribute. Primarily used for SEO describing the image.
- 5) Image Dimension = Adjust the width and height of the image as you like.
- 6) Orientation = Choose how you want to the slider cursor to slide on the image. Either horizontal or vertical. Horizontal will display a portrait look, while the vertical will display a landscape look, for your images.
Styling A/B Image
- 1) Effects = Choose an animation that'll show how the module will appear
- 2) Background Color = Use the colour picker to pick a color for your background.
- 3) Padding = Choose the space within the module.
- 4) Margin = Choose the space outside the module
- 5) Border = Choose the colour, size, and style for each side of the border.
- 6) Additional CSS Class = Add additional CSS class for custom styling.