JA Page Builder

In JoomlArt page builder, the layout includes 3 main sections. For each section, you can add as many content blocks as you want.

  1. Header: Content blocks added to the header section are displayed in pages that is assigned to same template style.

  2. Content: Content blocks added to the content section are displayed in the page only.

  3. Footer: Content blocks added to the footer section are displayed in pages that is assigned to same template style.

The settings of each content block and content in the block can be different.

Content Blocks

  1. Features Intro
  2. Headers
  3. Hero
  4. Call To Actions
  5. Contacts
  6. Clients
  7. Container-Accordion
  8. Container-Slideshow
  9. Container-Tabs
  10. Content
  11. Countdown
  12. Event
  13. Faq
  14. Gallery
  15. Pricing-Table
  16. Spotlight
  17. Statistics
  18. Team
  19. Testimonials
  20. Timeline
  21. Footers

Content Types

Each content block has many types of content:

  1. Text
  2. Buttons
  3. Icons
  4. Image
  5. Video
  6. Social
  7. Links
  8. Row
  9. Separator
  10. Form
  11. Widget

1. Text

  • General: Type, Background Color, Text Color
  • Options: Margin (Top, Bottom, Left, Right), Alignment
  • Animation
  • Icons: Left Icon, Right Icon

You can also customize text using inline text editor or using code editor.

2. Buttons

It can contain one or more buttons. You can add buttons in either horizontal layout or vertical layout.

  • General: Vertical Layout
  • Options: Margin (Top, Bottom, Left, Right), Alignment
  • Animation

Each button can be customized with the following properties:

  • General: Title, Link, Target, Button Color, Text Color, Button Size or Full Width, Hover Animation
  • Advanced: Shape, Border (Width, Style, Color), Shadow, Opacity
  • Icons: Left Icon, Right Icon

3. Icons

It can contain one or more icons. You can add icons in either horizontal layout or vertical layout.

  • General: Vertical Layout
  • Options: Margin (Top, Bottom, Left, Right), Alignment
  • Animation

Each icon can be customized with the following properties:

  • General: Value, Color, Type, Size
  • Advanced: Shadow, Opacity
  • Link: URL, Title, Target

4. Image

  • General: Source, Alignment, Alt Text, Height, Width, Link
  • Options: Margin (Top, Bottom, Left, Right), Float Alignment
  • Animation
  • Advanced: Shape, Border (Width, Style), Shadow, Opacity, Hover Animation

5. Video

  • General: Source
  • Options: Margin (Top, Bottom, Left, Right), Alignment
  • Animation
  • Advanced: Auto Play, Loop, Show Info

6. Social

  • Social IDs: Facebook, Twitter, LinkedIn, Google Plus, Pinterest, Custom Buttons
  • Options: Margin (Top, Bottom, Left, Right), Alignment
  • Animation
  • General: Type (Button or Icon), Vertical Layout, Style, Size, Shape

7. Links

It can contain one or more links. You can add links in either horizontal layout or vertical layout.

  • General: Vertical Layout, Background Color, Text Color, Hover Color, Hover Text Color, Active Color, Active Text Color
  • Options: Margin (Top, Bottom, Left, Right), Alignment
  • Animation

Each link can be customized with the following properties: 

  • General: Title, URL, Class, Target, Left Icon

8. Row

To select complete row, select parent item on any element or directly click Row from bottom navigation.

  • General: Vertical Align, Number of Columns (Width of Columns)
  • Options: Margin (Top, Bottom, Left, Right), Alignment
  • Animation

Each column in a row can contain any other content type.

9. Separator

It is a type of horizontal line.

  • General: Type, Color, Height, Width
  • Options: Margin (Top, Bottom, Left, Right), Alignment
  • Animation

10. Form

  • General: Title (Hide title), Hide Label, Type (Horizontal or Vertical), Captcha, Consent, Icon, Receivers
  • Options: Margin (Top, Bottom, Left, Right), Alignment
  • Animation
  • Messages: Successful, Error
  • Input: Text Color, Background Color, Border Color, Field Description Type

A form can contain any one or more contents and form fields. You can customize form fields using following properties:

  • General: Title, Placeholder, Help, Required, Type, Values 

11. Widget

A widget can contain either a module position or a module.

  • General: Type, Position or Module, Module Chrome
  • Options: Margin (Top, Bottom, Left, Right), Alignment