It’s a fact that one of the main obstacles in building a Joomla website, especially for beginners, is that they have no idea about, or are simply too tired of, writing long lines of boring codes. As a result, except for pure-text content, they don’t know how to present their content in a visual, eye-catching way. Luckily, JSN PageBuilder can help.
In this article, I’ll show you, step by step, about how to build a simple Joomla! page using this Joomla! extension. Don’t worry if you don’t know how to code. In fact, you don’t have to write any code at all. You can choose suitable elements from 20+ advanced page elements and customize them with just a few clicks, and you can use drag-n-drop to rearrange the content section in single interface.
Before we start
Make sure that you have installed JSN PageBuilder on your Joomla! site.
1. Create a new article to build your page
Go to Content → Article Manager → Choose your current article/Add new article → Select PageBuilder (instead of Default Editor).
You also can build a page based on a module.
2. Define content layout
Click to add new rows and columns to the article. You can easily change the column widths to fit your purpose just using drag-n-drop.
In the row setting panel, you can also adjust the padding and, border, and add various type of background for the row.
3. Add and customize elements
Click “Add element” and select a suitable type for the content: JSN PageBuilder provides you with the most popular types of elements for a Joomla website.
For example, if you want to present a text slider on your page, you can use Carousel. You can find Carousel, or any other type of element simply by using the Spotlight Filter function of JSN PageBuilder.
Click and select carousel items to add your own content, including text, and background images.
In the styling tab, you can freely adjust the options of the slider. The live preview box will show you what you will get in the front end
Now you might want to add some information to your front page to introduce your company to the audience. Let’s add a heading element with the text “ABOUT US”, a small image for separation, and finally, some lines of simple text about your company.
This is what you’ll have to do in the back-end:
And this is what you get in the front-page:
4. Add a background to make your content more attractive
In case you want to add a background image to make your content more attractive, it’s super easy with the support of JSN PageBuilder.
Add a new row of elements and add your pure text there. Select Row settings to add your background. You can choose from various options, including solid color, gradient color, pattern, or image. And remember to change your text color to fit the background.
Let’s go back to your front page:
Now I think you’ve got the general principle.
- Click to select appropriate elements.
- Drag and drop.
- Customize the styles.
That’s all you have to do. Building a Joomla! page, or even a Joomla! website is now much easier with help from JSN PageBuilder. Good luck! Want to share your experience? Leave comments now. We will appreciate it much.