Close

Account

Documentation

Forum

Menu

Next
Prev

Legacy Section Builder

When you create a page with Landing Page Template, beside Visual Composer plugin we also provide you Section Shortcode on Legacy Section Builder page template. You can create unique page easily & fast with a lot of page elements by using shortcode.

Section Shortcode will show on landing page template, portfolio landing page, and also on admin panel (Footer for landing page & Extended Portfolio) .

Make sure if you’ve enable Legacy Section Builder when using Section Shortcode. Then you just need to add a new page, and select template Landing Page Builder – Legacy Section Builder then click Publish button.

Enable Legacy Section Builder

JKreativ Section Shortcode

JKreativ Section Shortcode List :

JKreativ Section Shortcode List

 

  • Section Builder

    • Section Title Heading

      Add heading title of section.

      Section Title Heading Settings


      Section Title Heading Settings

      Section Title Heading Options :

      • Heading Type : Select type of heading: H1, H2, H3, H4, H5 or H6.
      • Heading Position : Set where to place heading: Center, Left or Right.
      • Heading Title : Text of heading title.
      • Title Alternate : Subheading text or short description.
      • CSS Class (Optional) : Add aditional class in case you need to add custom styling for this element.

      Section Title Heading Preview


      Section Heading Preview

    • Qoute

      Show a full width quote over section or column. Nice to show wise words or motivating words.

      Quote Settings


      Quote Settings

      Quote Options :

      • Quote Text :Main text for your quote.
      • Quote Author : Set author name.
      • CSS Class (Optional) : Add aditional class in case you need to add custom styling for this element.

      Quote Preview


      JKreativ - Landing Quote Preview

    • Callout

      Show promotion text with call-to-action button.

      Callout Settings


      Callout Settings

      Callout Options :

      • Callout Text : Main callout text or heading title.
      • Callout Button Text : Text for button.
      • Buton Style : Type of button: Default, Primary, Success, Info, Warning or Danger.
      • Center Text on Callout : If checked text will have align centered.
      • CSS Class (Optional) : Add aditional class in case you need to add custom styling for this element.

      Callout Preview


      Callout Preview

    • Fullwidth Iframed Content

      Insert or include content from external sources inside your page with HTML Iframe tag.

      Fullwidth Iframed Content Settings


      Iframe Settings

      Fullwidth Iframed Content Options :

      • Iframe URL : Link of content source.
      • Iframe Height : Set height of content will be displayed.

      Fullwidth Iframed Content Preview


      Iframe Preview

  • Fullwidth Map

    Add fullwidth maps to your content.

    Fullwidth Map Settings


    Fullwidth Google Map Settings

    Fullwidth Map Options :

    • Latitude : Set Latitude coordinate of location or place you want to show on maps.
    • Longitude : Set Longitude coordinate of location or place you want to show on maps.
    • Title : Insert your map title.
    • Map Zoom : Set number of zoom level.
    • Container Height : Set container height or dimension of maps size.
    • Don’t Use Fullwidth Map : Enable this option if you want to use boxed map.

    Fullwidth Map Detail Settings


    Fullwidth Google Map Detail Settings

    Fullwidth Map Detail Options :

    • Text : Insert text for map detail.
    • URL : Insert url link or leave empty if not having url.

    Fullwidth Map Preview


    JKreativ - Fullwidth Map Preview

  • Service Element

    • Service Image

      Add list slider with images, title and description. For example it used to show list of services.

      Service Image – Wrapper Setting


      Service Image Wrapper Settings

      Service Image Wrapper Option :

      • Extra Class Name (Optional) : Add aditional class in case you need to add custom styling for this element.

      Service Image – Item Settings


      Service Image Item Settings

      Service Image Item Options :

      • Service Image : Select or upload image with size 440×440 px.
      • Service Title : Insert title of your service item.
      • Service Description : Insert short description of your service item.
      • Background Color : Set background color for item block.
      • Text Color : Set text color for all text on item block.
      • CSS Class (Optional) : add aditional class in case you need to add custom styling for this element.

      Service Image Preview


      Service Image Preview

    • Service Icon

      Add section list with icon, title and description. For example it used to show list of services.

      Service Icon – Wrapper Settings


      Service Icon Wrapper Settings

      JKreativ – Service Icon Wrapper Options :

      • Service Item Width : Set width of service item.
      • CSS Class (Optional) : Add aditional class in case you need to add custom styling for this element.

      Service Icon – Item Preview


      Service Icon Item Settings

      Service Icon Item Options :

      • Service Icon : Select icon from list.
      • Service Title : Insert title of your service item.
      • Service Description : Insert short description of your service item.
      • CSS Class (Optional) : Add aditional class in case you need to add custom styling for this element.

      Service Icon Preview


      Service Icon Preview

    • Service Block

      Add section list with icon, title and description. For example it used to show list of services.

      Service Block – Wrapper Settings


      Service Block Wrapper Settings

      Service Block Wrapper Options :

      • Service Item Width : Set width of service item.
      • CSS Class (Optional) : Add aditional class in case you need to add custom styling for this element.

      Service Block – Item Settings


      Service Block Item Settings

      Service Block Item Options :

      • Service Icon : Select icon from list.
      • Service Title : Insert title of your service item.
      • Service Description : Insert short description of your service item.
      • CSS Class (Optional) : Add aditional class in case you need to add custom styling for this element.

      Service Block Preview


      Service Block Preview

  • Blog Post List

    Add section blog post list.

    Blog List Settings


    Blog List Settings

    Blog List Options :

    • Counter Block Number : Set number of post that you want to show.
    • Read More Page Link : Insert your blog page list that will show up when clicked.

    Blog List Preview


    Blog List Preview

  • Counter

    Display counter block info with nice animation.

    Counter Wrapper Settings


    Counter Block Wrapper Settings

    Counter Wrapper Options :

    • Counter Block Wrapper : Set number of counter item.
    • CSS Class (Optional) : Add aditional class in case you need to add custom styling for this element.

    Counter Item Settings


    Counter Block Item Settings

    Counter Item Options :

    • Counter Text : Insert text for counter item.
    • Counter Number : Insert number for counter item.
    • CSS Class (Optional) : Add aditional class in case you need to add custom styling for this element.

    Counter Preview


    JKreativ - Counter Block Preview

  • Skill Animation

    Display skills info with nice animation progress bar.

    Skill Animation Wrapper Setting


    Skill Animation Wrapper Settings

    Skill Animation Wrapper Option :

    • CSS Class (Optional) : Add aditional class in case you need to add custom styling for this element.

    Skill Animation Item Settings


    Skill Animation Item Settings

    Skill Animation Item Options :

    • Skill Title : Insert title for skill bar.
    • Skill Percentage : Set percentage of skill bar.
    • Graph Color : Set graph color of skill bar.
    • CSS Class (Optional) : Add aditional class in case you need to add custom styling for this element.

    Skill Animation Preview


    Skill Animation Preview

  • Testimonial Slide

    Add slider of customer testimonials about your product or service.

    Testimonial Wrapper Setting


    Testimonial Wrapper Preview

    Testimonial Wrapper Option :

    • CSS Class (Optional) : Add aditional class in case you need to add custom styling for this element.

    Testimonial Slide Item Settings


    Testimonial Item Settings

    Testimonial Slide Item Options :

    • Testimonial Text : Insert testimonial text here.
    • Upload image : Select or upload image of testimonial author.
    • Name : Name of testimonial author.
    • Company Name or Position : Company name or position of testimonial author.
    • CSS Class (Optional) : Add aditional class in case you need to add custom styling for this element.

    Testimonial Slide Preview


    Testimonial Slider Preview

  • Client List

    Insert logo list slider of clients or brands that you use.

    Client List


    Client List Settings

    Client List Options :

    • Number of Item : Set number of item per page.
    • CSS Class (Optional) : Add aditional class in case you need to add custom styling for this element.

    Client Image


    Client Image Settings

    Client Image Options :

    • Client name : Name of client or brand.
    • Upload image : Select or upload logo image of client or brand.
    • CSS Class (Optional) : Add aditional class in case you need to add custom styling for this element.

    Client List Preview


    JKreativ - Client List Preview

  • Image Animation

    Create motion animation with images.

    Image Animation Wrapper Settings


    Image Animation Sequence Wrapper Settings

    Image Animation Wrapper Options :

    • Animation Speed : Select animation speed: Fast, Slow, or Slower.
    • Sequence Speed : Set numer of sequence speed of animation.

    Image Animation Item Settings


    Image Animation Item Preview

    Image Animation Item Options :

    • Upload your image sequence : Select or upload image that will be animated.
    • Enable fadein animation : Check it if you want to enable fade in effect in motion.
    • Enable scale animation : Check it if you want to enable scale effect in motion.
    • Animation Position : Select where to start the animation: None, Top, Bottom, Left or Right.

    To create perfect image for animation, you will need to have the same image size (width & height). For example, to create image animation like bellow you will need to 3 layer of images :

    Layer 1

    cp3

    Layer 2

    cp2

    Layer 3

    cp1

    Image Animation Item Preview


    Image Animation Sequence Preview

  • Portfolio Block

    Portfolio block using masonry effect, but you will need to arrange it as you want. it having 3 option for width (1/3, 1/2, 2/3) and also 2 option for height, (1, 2 height size).

    Portfolio Block Wrapper Settings


    Portfolio Block Wrapper Settings

    Portfolio Block Wrapper Options :

    • Portfolio Parent : Select page of portfolio list (page that using portfolio template).
    • Button portfolio parent link text : Set text of button that direct to portfolio list page.

    Portfolio Block Setting


    Portfolio Block Item Settings

    Portfolio Block Options :

    • Portfolio Item : Select portfolio item you want to add.
    • Portfolio Image : Select or upload image for portfolio cover (thumbnail). Leave it empty if you want to use default portfolio cover.
    • Block Width : Select block width: 1/3, 1/2 or 2/3
    • Block Height : Select block height: 1 or 2

    Portfolio Block Preview


    Portfolio Block Preview

  • Pricing Table

    Add pricing list of your product. Number of pricing table item: 3, 4 and 5.

    Pricing Table Before you can use Pricing Table shortcode, you need to create / post Pricing Table first. Please go to: Pricing Table Post Type for further information.

    Pricing Table Setting


    Pricing Block Setting

    Pricing Table Options :

    • Content : select pricing item that you want to display. Note: max 5 items

    Pricing Table Preview


    Pricing Table Preview

  • Product

    Add slides of your latest product.

    Latest Product Settings


    Latest Product Slider Settings

    Latest Product Options :

    • Product Number : Set number of product that you want to show.
    • Column Number : Set number of column for product slider item.
    • Product Image Dimension : Set dimention of product image.
    • Filter By Category : Choose your product item that you want to show up that filter by category. Leave empty to include all.