JSN PageBuilder 3 Quick Tour

JSN PageBuilder 3 Quick Tour


In this video we will learn how to create an article on JSN PageBuilder 3 with Images, Headings, Paragraphs, Buttons and Joomla Module elements. Now, let’s try to create an article like the home page of joomla.org website. on the admin site, go to the Article Management page to create a new article. This article is already managed by JSN PageBuilder 3 so we don’t need to switch editor. First, drag a section to the page editor, go to the Background Image parameter in the Styling tab to select an image for the section background. Next, the Heading Elements will be dragged to change the heading text on the General tab. Go to the styling tab to select Font Family, Font Size, Line Height and more. Scroll down in settings to Box Style. With the second Heading Element, you can do the same as the first element such as change the contents, styling for text and box style. You should regularly save your article to avoid data loss. After saving the article, go back to the page editor to drag the Icon With Text section. This is a section, so you need to select a row and move it to the section with an image. Then select each block on the row to change the background color, padding and border. Now, let’s start adjusting the settings for each element in the first block. Select icon element, go to General tab to change the icon, color and size. then, visit the Styling tab to change the icon background color and styling for the icon box. Margin, Padding, Border, Dimensions and Display. The second element in this block is Heading. Select to change the content and styling for it. Third element is Paragraph. Similar to the Heading element, just select, then change the content and styling. To get the article looking the same as the demo site, in the icon with text row, we need to drag a button element. Once the button element is dropped, you need to select it, change the button text in the General tab and styling in the Styling tab. JSN PageBuilder 3 includes copy style feature as with other blocks in the Icon With Text section, you just need to change the content and paste the style of the first block. All the style adjustments of the first block , icon, text and button will be applied to subsequent blocks Once the second and third block is changed the content, go back to the first block, click on the copy style icon in the Element Toolbar and select another block, click on the paste style icon in the Element Toolbar. Your remaining work is changing the icon color and button color to match the demo site. The Copy Style feature saves you a lot of time in styling the similar blocks. Hit the Save button to save the article. With the second section you can drag and drop elements directly into the article like the first section. But in this video two other ways will be shown. First is add saved sections and the second is to use a Joomla Module element. Here is a module that was created the same as the demo site, its name is JSN PageBuilder 3 Module. The first method is add saved section you need to select the section you want to save, click on the save section to library icon on the Element Toolbar, then enter the section name to save the section. Go to the article we are building, click on Add Saved Section icon on the left side to drag the section we saved before. The section was added to the article. The second way is use a Joomla Module, go to Joomla Element list to drag the Joomla Module Element, select this element and click on the “Choose Module” button in the General tab to select a module. The module is selected is JSN PageBuilder 3 Module which we created before. Don’t forget to Save your article. In Just a few minutes, we have created an article with many elements and a variety of methods Thank you for watching. Please check other videos to learn more about how to work with the JSN PageBuilder 3.

Leave a Reply

Your email address will not be published. Required fields are marked *