Infinite Posts

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 Infinite Posts Addon

Once the addon is installed, you will find it on the Themify module panel. The module is available in both backend and frontend edit mode (just like all standard modules). In the backend, you will find the 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.

Infinite Post module screenshot outlining all the options

  • Drag and drop an Infinite Posts module in a row
  • The options below will appear:
    • Module Title = This option is used to add the title of your module
    • Post Type = This is the type of post that you would like to query (i.e. Portfolio)
    • Query By = Set to query by category, tags, or slug
    • Categories = This option is used to select which categories of posts will be displayed
    • Limit = This option sets the number of posts shown
    • Offset = This option sets how many posts should be skipped before the first one is displayed
    • Order = This option sets whether the posts will be ordered in ascending or descending order
    • Order By = This option sets what data order the posts will be based on
    • Layout = Select the type of layout that you would like to use to query your posts
      • Parallax:
        • Post Height = Set to fullheight or default
        • Background Style = Set to parallax scrolling or fullcover
        • Overlay color = Set the overlay color and adjust the opacity
      • Infinite Post parallax option panel

      • List:
        • Image Width and Height = Set the image height & width of the featured images
      • Infinite Post list option panel

      • Grid and Overlay:
        • Post Layout = This option is used to determine the layout of the posts and how they will be arranged
          • Grid 4 = Posts will be arranged in a four column layout
          • Grid 3 = Posts will be arranged in a three column layout
          • Grid 2 = Posts will be arranged in a two column layout
        • Image Width and Height = Refer to the List option above
        • Masonry Layout = Enable or disable the masonry layout
        • Gutter Spacing = Set the gutter spacing to default, narrow, or none
      • Infinite Post grid and overlay option panel

    • Pagination = Set the type of pagination that you would like to use (Infinite Scroll, Pagination links, Load More Button, No pagination)
    • Display = This option sets what content will be the output (full content, excerpt or none)

    fontend-infinite-post-option-panel-2

    • Hide Post Title = This option sets whether or not the post title will be shown
    • Unlink Post Title = This option sets whether the post title will be a link
    • Hide Post Date = This option sets whether or not the post date will be shown
    • Hide Post Meta = This option sets whether or not the post meta will be shown
    • Read More Button:
      • Hide Read More Button = Select to hide or show the "Read More" button after each post
      • Button Text = Input the text that you would like to be the button text
      • Open Link in = Select to either open the post in a lightbox, new window, or the same window
      • Button Style = Select to set the button in regular colored or outline only
      • Button Color = Set the preset button colors
      • Button Size = Set the button size that you'd like
    • Additional CSS Class = This option allows you to add any custom CSS classes you wish to be the output with the module

    Infinite Post read more button option panel

Styling Infinite Posts

Click the Styling tab to start customizing the module. The Infinite Posts module comes with six tabs: General, Post Title, Post Meta, Post Date, Post Content, and Read More Button. Below are the options for these tabs:

General Tab

  • Background Color = Use the color picker to pick a color for your background.
  • Font Options:
    • Font Family = Choose the font family of the text
    • Font Color = Choose the font color of the text
    • Font Size = Select the font size in px or in em
    • Line Height = Set the line height in px, em, or %
    • Text Align = Choose how you want to align your text
  • Padding = Add in px or in % the space in the module (around the text)
  • Margin = Add in px or in % the space outside the module (outside the text)
  • Border = Choose the color, size, and style for each side of the border

Infinite Posts addon styling options general tab

Post Title, Meta, Date, Content Tab

The Post Title, Meta, Date, and Content tabs all come with the same option panels. Each, however, affects different aspects of the post as per the title. The customization set here will overwrite the default and general tab customization you've added.

  • Font Options:
    • Font Family = Choose the font family of the text
    • Font Color = Choose the font color of the text
    • Font Size = Select the font size in px or in em
    • Line Height = Choose how you want to align your text

Infinite Posts addon styling options Post title, meta, date, and content tab

Read More Button

Below are the options found on the Read More Button.

  • Font Options:
    • Font Family = Choose the font family of the text
    • Background Color = Use the color picker to pick a color for your background.
    • Color = Choose the font color of the text.
    • Font Size = Select the font size in px or in em.
    • Alignment = Set the line height in px, em, or %.

Infinite Posts addon styling options Read More Button

Own the Online World with the New Ultra Games Skin + Get 50% OFF Ultra with code GAMES!