Chapter 7: How to use Joomla Custom Fields in JSN PageBuilder 4

As you know, Joomla Custom Fields allows Joomla users to create many customized elements to build attractive websites. In this chapter, I will guide you step by step in using Joomla Custom Fields with JSN PageBuilder 4.

Create a custom field in Joomla

In the past, we released a blog post of how to create custom fields in Joomla, so in this chapter, I will not talk of creating a custom field in Joomla again. If you want to know how to create a custom field you can check out this post.

Use Joomla Article Field Element

Joomla Article Field is a JSN PageBuilder 4 element. It allows you to add one or more Joomla Custom fields in a flexible way.

  • Step 1: You need to create at least one Joomla custom field for your article. To illustrate this step, I created a custom field, called "Price". Its type is Text.
    CSS code checking
    Price Custom Field
  • Step 2: Set the value to the custom field you have just created in the article you want to show it.
    Set the value to the custom field
    Set the value to the custom field
  • Step 3: Use Joomla Article Field element to add the custom field to any position you want on your article.
    Joomla Article Field element
    Joomla Article Field element
    Select Joomla Custom Field
    Select Joomla Custom Field
    Select Price Field
    Select Price Field
  • Step 4: Check your result at the front-end

Use Article Field Element

Article Field element is similar to Joomla Article Field element, just a small difference is that you only can use this element inside Article List element.

  • Step 1 & Step 2: Do the same as described at "Use Joomla Article Field Element" index
  • Step 3: Add a Article List element to your article.
    Article List element
    Article List element
  • Step 4: Add Article Field element into Article List element.
    Article Field element
    Article Field element
    Article Field Content
    Article Field Content
  • Step 5: Check your result at the front-end

References

It is so easy and fast now to have a custom field in your Joomla Article. I hope that this tutorial will help you build an attractive website in the shortest time. if you want to get more details of these elements, you can check out our JSN PageBuilder 4 documentation

Download JSN PageBuilder 4 for FREE


Previous chapter:

Chapter 6: Check your final works

Leave a comment

Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.

Rate this article
(0 votes)