JSN PageBuilder 3 Configuration Manual Introduction

Transcription

1 JSN PageBuilder 3 Configuration Manual Introduction About JSN PageBuilder 3 JSN PageBuilder 3 is the latest innovation of Joomla! PageBuilder with great improvements in the interface, features, and user experience. With all of these changes, JSN PageBuilder 3 will bring the best experience of building Joomla! pages for its users. JSN PageBuilder 3 was built as a native Joomla! editor plugin. Therefore, it works perfectly on Joomla! articles, Custom HTML modules, and even third-party extensions. Besides editing articles on the backend, JSN PageBuilder 3 also allows you to edit your articles directly on the frontend thanks to the native Joomla! frontend editing mechanism. By using JSN PageBuilder 3, you can build complex Joomla! pages in minutes with no coding skills required. To learn more about its features, visit JSN PageBuilder 3 details page. ( System Requirements Joomla Requirements Joomla! 3.6+ Server Requirement Software: PHP 5.4.x or higher versions Database MySQL SQL Server PostgreSQL Web Server Apache Microsoft IIS 7 + Nginx 1.0 Browser Requirement For Backend Administration Google Chrome 10 + Firefox 4 + Getting Started Welcome to JSN PageBuilder 3, this is a quick start guide in 4 easy steps! Let s get started! Step 1: Install JSN PageBuilder 3

2 Step 1: Install JSN PageBuilder 3 After downloading, you will have an extension installation file calledjsn_pagebuilder3_x.xx.zip. In which: x.xx is the version of the extension. Install it to the Joomla! Site as usual. In Joomla! administration, go to menu Extensions -> Manager -> Install Drag and drop file to the Or browser for file button or browse for your installation file ->Click Or browser for file. The installation file will be uploaded to your server and installed in Joomla Automatically.

3 Click Finish and start using JSN PageBuilder 3. Step 2: Enable JSN Pagebuilder 3 To enable JSN PageBuilder 3, go to Content -> Articles -> Choose any article -> Switch Editor -> Choose PageBuilder 3. Or go to Extensions -> Modules -> Select Custom module type -> Switch Editor -> Choose PageBuilder 3.

4 Step 3: Have a look on JSN PageBuilder 3 interface Now that you re using JSN PageBuilder 3, here are a few key features and button that you should notice on the interface. 1 Top Menu Set up general information for articles. Able to browse and edit item via this menu by click or right - click on the item. 2 Elements Click to choose elements on the panel, drag and drop to the page content and customize them. 3 Preset Click to add new style for Box, Button and Text to have more default styles. 4 Custom Code Click to add more CSS and JS code. 5 Element Inspector Where you can configure any parameters within the page content by moving and dragging your mouse. 6 Page Content Where you create content for modules or articles, just drag and drop the elements to this area. Step 4: How to use JSN PageBuilder 3 s element

5 Step 4: How to use JSN PageBuilder 3 s element There are four steps to use an element in JSN PageBuilder 3: Step 1: Click on Element button to show the elements panel display. Step 2: Drag and drop the element you want to the page content area. Step 3: Fill content (text, video, images, etc) into your element Next steps Step 4: Style and customize your element by using element inspector This is a page from the JSN Venture Template which was build by using JSN PageBuilder 3.In this case, we used the elements below: Button Image Paragraph Heading Icon

6 Now you know how to use JSN PageBuilder 3 to create a page in Joomla. But if you want to know deeper, there are many features from JSN PageBuilder 3 can help you make your page more beautiful and faster. Read the Detail Documentation for more detail. Detail Documentation In this "Detail Documentation", you can learn how to configure each element. It has two main parts: Interface Detail: In this part, you will learn about the interface of JSN PageBuilder 3 and how it works. PageBuilder Elements: In this part, you will know how to configure and use each element by using General Tab Interface Detail To understand deeper about the JSN PageBuilder 3 interface, let s read the section by section documentation below. Top Menu In this area, you can configure the Title, Meta Data and choose to publish or unpublish. Some key features in the interface: Exit Fullscreen Click to exit Enter Page Title Enter the title of the article or module here Edit Meta Data Click to insert the Title, Meta Description and Alias Device Select Box Click to choose the device you want to customize, by default it is ALL Undo and Redo Click Undo to go back or click Redo to go forth Publish Click on the check-box to choose publish or unpublish the articles or modules View Click to preview the article or module on the visitor area Save Click to save your changes Element Inspector

7 Element Inspector You can adjust every element of JSN Pagebuilder 3 by setting in this area. There are three tabs: General, Styling and Advanced. For each element, the Styling tab and Advanced tab are same, but the General tab is different. We will talk more detail about this Element Inspector in the Page Elements documentation. Preset Click the Preset button to display this screen. You can Add new box, button or text styles here. And for each one, you can style it by configuring the customize tab on the right side. Custom code

8 Click the Custom Code button to display this pop-up; you can add your CSS and Custom JSS code into the layout. Note: These custom codes will be outputted only on the particular page you are working. Toolbar for Elements Drag and Drop: Click to grab and move the section, row, column, grid or element. Duplicate: Click to make a copy of the section, row, column, grid or element. Delete: Click to delete the element. Lock: Click to lock the element. Set default style: Click to reset the style back to the default or the style was saved before. Save: Click to save the style. Breadcrumb The secondary navigation scheme allows you to keep track of your element within building page. You can also click to select the upper element through it. Media Selector Media Selector is a feature from JSN PageBuilder 3 to help you can easily manage your media just in few clicks.

9 Media Selector allows you to do everything in the same browser window; the interface will be shown as a pop-up, and you can do all thing on it. In the left of the interface, there is a Menu Tree which shows the folders in your media storage; you can click Hide button to hide it if needed. Color Picker This tool allows you to pick a color by dragging your cursor inside the picker area to choose the color or entering the color name, color value into the boxes. Also, you can adjust by selecting the value for color and saturation bars. Google Fonts Modal While setting up for Text in each element, you can click the Setting button in the Font Family setting area to display the Google Fonts Modal pop-up.

10 Search Box: Insert the keyword to find the font you want. For example: insert Roboto and all the fonts have the phrase Roboto in their name will be shown. Sort By: You can sort the fonts by Trending, Popularity, Alphabetical, and Date Added. Also, you can sort by ASC (A - Z) or DESC (Z - A). Categories: Select the category you want, there are: Sans Serif, Serif, Display, Handwriting, and Monospace. Languages: Select the language you want. Hot Keys JSN PageBuilder integrated some hotkeys, you can follow the table below: Actions Mac OS Window Save Command + S Ctrl + S Undo Command + Shift +Z Ctrl + Shift + Z Redo Command + Z Ctrl + Z Duplicate Command + D Ctrl + D Delete Delete Backspace PageBuilder Elements Click the Elements icon on top of the left side to display the list of elements, grab the one you need and drop it into the content area and start to configure it. Let's learn about: General Setting for Page Elements General Tab for Each Element General Setting for Page Elements For all elements, you can configure it by using the setting in Element Inspector area. The General tab is different in each

11 element, but the Styling and Advanced tabs are same. So please take a look at the Styling and Advanced Tabs first. Styling Tab In this tab, you can style your element for: Text Background Box Styles Border Text You can adjust your text style by setting this box. Font: Choose the font Font Size: Adjust the font size Weight: Set the font weight Line Height: Adjust the font line height Spacing: Set the font s line spacing Color: Set the color by using color picker Transform: Transform the text to Uppercase or Inherit Style: Select the style for your text Alignment: Select the alignment for your text Background You can adjust your background style by setting this box. Color: Style your background color by using color picker Image Src: Add URL or Select background image here Position: select background image s position Repeat: Configure repeat status of background image Size: Select background image s size Box Styles Dimensions: Adjust the dimensions of the box here (in pixel) Margin: Adjust the margin of the box (in pixel) Padding: Adjust the padding of the box (in pixel)

12 Border You can adjust your border style by setting this box. Select the style of border Radius: Configure the radius of border Advanced Tab In this tab, you can set up: Display Attributes Visibility & Custom CSS Display Select the status of the element (Inline, Block, Flex) If you are choosing the Flex status, you will see the display like the box beside. Direction: Select the direct item in the flex container Wrap: Select Wrap or Nowrap Align Items: Select the align style for items Align Content: Select the align style for content Justify Content: Select to define the alignment along the main axis Attributes Add the Class and ID for the element

13 Visibility & Custom CSS Hide on?: Select the device you want to hide the element on Custom CSS: Add your custom CSS code here General Tab for Each Element Layout You can start with some pre-built grids from the Page Elements panel. There are ten demo grids available, but you can easily customize them in various ways. Below is an example of a complex grid system created with PageBuilder 3. As can be seen, you are not limited to the 12- column grid system as in Bootstrap. General Tab for Section Section Settings: Click Add Row to add new row into the layout Container Settings: Enable or disable the container. If it is enabled, you can adjust the max width

14 General Tab for Row Row Settings: Click Add Column to add new column into the row Alignment: Select the alignment of the row Reversed: Enable to reverse Equal Width: Click to enable Equal Height: Click to enable Columns: Edit the number of columns Gutter: Edit the size of Gutter Responsive Settings: Stackable: Click to enable Doubling: Click to enable Heading This element allows you to create heading text with various styles. Tag: Select the heading tag Text: Insert the heading text Icon?: Select the position of the icon Go To URL: Enter or Select the target URL here Event Tracking: Insert the Event Name for tracking on Google Analytics and choose the Pixel Event on Facebook

15 Paragraph Dropcap: Enable to adjust Text: Insert the Dropcap text Style: Select to choose Dropcap style Color: Adjust the Dropcap color by using Color Picker Font Size: Adjust the Dropcap font size Button Text: Insert the Button s text here Shape: Select the shape of button Style: Select the style of button Icon?: Select the position of icon Go To URL: Enter or Select the target URL of the button Event Tracking: Insert the Event Name for tracking on Google Analytics and choose the Pixel Event on Facebook

16 Image Image Src: Add the Image Source or Select from the Media Selector Horizontal Align: Choose to align the image by horizontal Vertical Align: Choose to align the image by vertical Image Size: Select to adjust the image size Image Style: Select the image style Go To URL: Enter the target URL will be opened by clicking the image here Event Tracking: Insert the Event Name for tracking on Google Analytics and choose the Pixel Event on Facebook Icon Icon: Select the icon type Color: Adjust the icon color by using Color Picker Size: Adjust the icon size Icon Shape: Select the icon shape Action: Enter or select the target URL of the icon Progress Progress Type: Select the progress type Style: Select the style of progress

17 Style: Select the style of progress Percent: Adjust the percentage of the progress Weight: Adjust the progress weight Heading Settings: Set up the Text, Color, Font Size and Spacing for heading of the progress Color Settings: Set up the Color of the progress List List Settings: Click Add New Item to add more item into the list List Type: Choose style of the list Tab Layout: Choose to enable the layout (Vertical, Reverse, Fitted). You can also select the align of Nav Align. Tabs: Click Add to add new tab. You can also duplicate or delete the tab.

18 Accordion Settings: You can adjust the settings of the accordion such as Enable Arrow, Arrow Position Items: Click Add button to add new item. You can also duplicate or delete the item. Google Map This element allows you to add Google Map into your page Add the Location of the map and set up the Map Type, Zoom value

19 Divider Line Color: Choose the divider line color by using Color Picker Line Weight: Adjust the divider line weight Divider Type: Select type of the divider type Content Position: Adjust the position of content on the divider Symbol Settings: Setting the symbol of divider by choosing the Symbol or Color QR Code Insert the Content, ALT text of QR Code into the boxes. Size: Adjust the QR Code size Social APP ID: Insert the App ID here Page URL: Insert the Facebook Page URL here Layout: Select the layout style Size: Select the button size Share Button: Click to choose to enable or disable the share button

20 Media Media category includes Soundcloud, Video, Vimeo and Youtube. Soundcloud Soundcloud URL: Add your Soundcloud URL here Options: Select the option of the Soundcloud Video (HTML 5) Video Source: Add the video source here Video Image Cover: Add image cover of the video here Options: Select the option for your video here Vimeo Vimeo Video URL: Enter the Vimeo URL here Video Image Cover: Add image cover of the video Ratio: Select the video ratio here Options: Select the video option here Show: Select the style of showing here

21 Youtube Youtube Video URL: Enter Youtube URL here Video Image Cover: Add image cover for the video here Ratio: Select the video ratio here Options: Select the video option here Advanced There are two small elements in Advanced: Table and Custom HTML. Table Row Settings: Configure the row settings here (General Tab for Row) Responsive Settings: Click to choose to enable or disable the Stackable Custom HTML Click Edit Content to add you HTML code

22 Joomla You can choose some elements of Joomla like JModule, JArticles, K2 or EasyBlog. With all of them, just drag the element to the page content and start to configure it. JSN PageBuilder Settings In this page, you can change the settings of JSN PageBuilder 3 like Ask To Review, Disable All Messages, Optimize Script Tags and Update The Extension. Optimize Script Tags: If it s enabled, all script tags will be moved from head section to the end of the body section. Product Update: Super Administrator of this site can set the number of hour between 2 continuous checking for new This website uses cookies to ensure you get the best product update and to receive an notification every time this product has been updated available. experience on our website. More information ( Got It!