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.
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 - Step 3: Use Joomla Article Field element to add the custom field to any position you want on your article.
Joomla Article Field element Select Joomla Custom 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 - Step 4: Add Article Field element into Article List element.
Article Field element 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:
Leave a comment
Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.