FitText

Installing Builder Addons

Note: Builder Addons require the Themify Builder. You can use it with either any Themify theme or the Builder plugin.

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.

screenshot

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 FitText Addon

Once addon is installed, you will find the FitText 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 FitText 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.

screenshot

  • Drag and drop a FitText module in a row
  • The options below will appear
    • 1) Insert the text you would like to appear. Texts auto-adjusts to fully fit the container. Adjust the padding at the styling tab to create space. The text will remain responsive and will auto-adjust when viewed in difference devices.
    • 2) Optional: Insert a link that will redirect when clicked.
      • 3) Open as a lightbox = Open link in a lightbox
      • 4) Open in a new tab = Open link in a new tab

fittext_frontend

Styling FitText

  • 1) Click the Styling tab to start customizing the FitText module. Anything customization done in the styling panel will affect the entire module.
  • 2) Effects = Choose an animation that'll show how the module will appear
  • 3) Background Image = Choose an image from your media folder or upload an image to show as your background.
  • 4) Background color = Use the colour picker to pick a color for your background.
  • 5) Background repeat = Choose if you want your image to repeat vertically, horizontally, not to repeat, or to appear as a fullcover image.
  • 6) Font Family = Choose font family that will change the font of all the text for the entire module.
  • 7) Font Color = Choose font color that will change the font of all the text for the entire module.
  • 8) Text Align = Choose how you want to align your text.

fittext_styling

  • 9) Text Decoration = Choose underline, overline, line through, or none
  • 10) Padding = Choose the space within the module. Add padding to adjust the spacing around the text.
  • 11) Margin = Choose the space outside the module

fittext_styling_2

  • 12) Border = Choose the colour, size, and style for each side of the border.
  • 13) Additional CSS Class = Add additional CSS class for custom styling.

fittext_styling_3