Warning: Trying to access array offset on value of type bool in /home/co/public_html/mn/wp-content/themes/barrel/archive.php on line 68

Hero Section

Biz15.co | Learning Center > Hero Section
Bio Link page, Hero Section, Learn, Sections
November 17, 20230

Background Shape Style Section

How To Add Background Shape Style – 001

Where To Set Image

Where To Set Title And Description

How To Set Theme Color

How To Set Content Left To Right And Right To Left

Where To Set Background Shape

Where To Set Button Link And Text

How To Uploading & Retrieve Image URLs?

Live Demo

To integrate this Background Shape Style – 001 into your biography page, please follow these installation instructions.

Step One: Insert a Custom HTML Block.

Step two: Just Paste below JS code into your Custom HTML block

  
      <script src="https://biz15.com/trialone/custom/js/shapesectiondesigns.js"></script>
      <script>
        new ShapeSectionDesigns(
        {
            style : 1,
            theme : {
                titleColor : "hsl(300, 100%, 30%)",
                buttonColor : "white",
                buttonBgColor : "black",
                buttonHoverColor : "white",
                buttonHoverBgColor : "hsl(300deg 100% 30%)",
            },
            sectionAlign : "left",
            title : "The Journey of John Fashion",
            para : "At John Fashion, we're driven by a deep passion for creating unique and timeless designs.",
            shape : 3,
            image : "https://biz15.co/uploads/files/b9507b7be121112399fd4998390f3856.png",
            button : {
                text : "Know More",
                link : "#"
            }
        }
        )
      </script>

The result following the completion of the steps.

Live Demo

Where To Set Image

Below code for Where To Set Image:

{ 
      image : "yourimage.png",
      }

Where To Set Title And Paragraph

Below code for Where To Set Title And Paragraph :

{ 
      title : "Your Title",
      para : "Your Paragraph",
      }

How To Set Content Left To Right And Right To Left

Below code for How To Set Content Left To Right And Right To Left :

{ 
      sectionAlign : "left",
      }

How To Set Theme Color

Below code for How To Set Theme Color :

theme : {
              titleColor : "hsl(300, 100%, 30%)",
              buttonColor : "white",
              buttonBgColor : "black",
              buttonHoverColor : "white",
              buttonHoverBgColor : "hsl(300deg 100% 30%)",
          },

Where To Set Background Shape

Below code for Where To Set Background Shape :

{ 
      shape : 3,
      }

Where To Set Button Link

Below code for Where To Set Button Link :

button : {
              text : "Know More",
              link : "#"
          }

To upload an image and retrieve its source (URL), please follow these steps :

Select or Prepare Your Image: Begin by choosing the image you wish to upload, ensuring it’s in an appropriate format (e.g., JPG, PNG).

Step One : on Your Dashboard Select “File Link” panel and click “File link” button on your Top Right corner

Step Two: Select your desired image and and its name then proceed by clicking the “Create File Url” button.

Step Three: Now, you can see bellow figure that highlighted the image url and just “Copy Your Image Address.”

“Follow the previously mentioned steps to upload and obtain the image URL for all of your images.”

Try Your Self

Other Style Sections :

Bio Link page, Hero Section, Learn, Sections
November 16, 20230

How to Add Collage Section – 001

How To Add Collage Section – 001
Where To Set Images
Where To Set Title And Description
Where To Set Date
Where To Set Button Link
How To Uploading & Retrieve Image URLs?
Live Demo

To integrate this Collage Section – 001into your biography page, please follow these installation instructions.

Step One: Insert a Custom HTML Block.

Step two: Just Paste below JS code into your Custom HTML block

      <!-- Include the JavaScript file for the CollageSection001 component -->
      <script src="https://biz15.com/trialone/custom/js/collagesection001.js"></script>
      
      <script>
          // Create a new instance of the CollageSection001 component
          new CollageSection001(
          {
              // Set the subtitle for the collage section
              subTitle: "Summer collection",
      
              // Set the main title for the collage section
              title: "TRENDY AND CLUSSI FOR NEW SEASON",
      
              // Provide a description for the collage section
              description: "I'm very much of the 'buy better' persuasion but never really knew where to look.",
      
              // Specify the date for the collage section (currently placeholder values)
              date: "00 / 00 / 0000",
      
              // Set the link for the button in the collage section
              btnLink: "https://example.com/",
      
              // Specify the URL for the image in the top-left position of the collage
              leftTopImg: "https://biz15.co/uploads/files/841f9e410b39fdcf5dd4007184cc6429.jpg",
      
              // Specify the URL for the image in the bottom-left position of the collage
              leftBottomImg: "https://biz15.co/uploads/files/73aab86b868ed854ee349204a9504c2f.jpg",
      
              // Specify the URL for the image in the center position of the collage
              centerImg: "https://biz15.co/uploads/files/cddfa7af68648a2e7395b686ab6c06d6.jpg",
      
              // Specify the URL for the image in the top-right position of the collage
              rightTopImg: "https://biz15.co/uploads/files/04fbb3c8976b268cd95ac57afb3af22a.jpg",
      
              // Specify the URL for the image in the bottom-right position of the collage
              rightBottomImg: "https://biz15.co/uploads/files/2fc4ff310e1665c85291a5052636d0e0.jpg",
          });
      </script>

The result following the completion of the steps.

Live Demo

Where To Set Images

Below code for Where To Set Images :

 { 
// Specify the URL for the image in the top-left position of the collage
leftTopImg: "yourimage.jpg",
      
// Specify the URL for the image in the bottom-left position of the collage
leftBottomImg: "yourimage.jpg",
      
// Specify the URL for the image in the center position of the collage
centerImg: "yourimage.jpg",
      
// Specify the URL for the image in the top-right position of the collage
rightTopImg: "yourimage.jpg",
      
// Specify the URL for the image in the bottom-right position of the collage
rightBottomImg: "yourimage.jpg",
 }

Where To Set Title And Description

Below code for Where To Set Title And Description :

{
// Set the subtitle for the collage section
subTitle: "Your Sub Title",
      
// Set the main title for the collage section
title: "Your Title",
      
// Provide a description for the collage section
description: "Your Description",
}

Where To Set Date

Below code for Where To Set Date :

{
// Specify the date for the collage section (currently placeholder values)
date: "00 / 00 / 0000",
}

Where To Set Button Link

Below code for Where To Set Button Link :

{
// Set the link for the button in the collage section
btnLink: "https://example.com/",
}

To upload an image and retrieve its source (URL), please follow these steps :

Select or Prepare Your Image: Begin by choosing the image you wish to upload, ensuring it’s in an appropriate format (e.g., JPG, PNG).

Step One : on Your Dashboard Select “File Link” panel and click “File link” button on your Top Right corner

Step Two: Select your desired image and and its name then proceed by clicking the “Create File Url” button.

Step Three: Now, you can see bellow figure that highlighted the image url and just “Copy Your Image Address.”

“Follow the previously mentioned steps to upload and obtain the image URL for all of your images.”

Try Your Self

Other Style Sections :

Bio Link page, Hero Section, Learn, Sections
November 15, 20230

Stylish Mobile Frame Section

How To Add Mobile Shape Design

Where To Change Mobile Inner Background Image

Where To Change Title And Sub Title

Where To Set Background Shape Color

How to Uploading & Retrieve Image URLs?

Live Demo

To integrate this Mobile Shape Design into your biography page, please follow these installation instructions.

Step One: Insert a Custom HTML Block.

Step two: Just Paste below JS code into your Custom HTML block

<script src="https://biz15.com/trialone/custom/js/mobileshapedesign.js"></script>

<script>
// Sample data (you can replace it with your dynamic data)
new Data(
{
// mobile image
imageSrc: "https://biz15.co/uploads/block_images/b162b90616e78411827e403143253c40.png",
// mobile inner background image
phBgImg: "https://img.freepik.com/free-photo/animated-eraser-drawing-still-life_23-2149911061.jpg?w=360&t=st=1699611152~exp=1699611752~hmac=e432bf1fe202e53edc3bd03cd33de6125e31978957fdb58dadd3bfadf22ff9e1",
// title
title: "CALENDAR APP",
// sub title
subTitle: "UI DEIGN CONCEPT VECTOR MOCKUP",
// background shapes color
color1:"#f7a3a1",
color2:"#fec697",
}
);
</script>

The result following the completion of the steps.

Live Demo

Where To Change Mobile Inner Background Image

Below code for Where To Change Mobile Inner Background Image :

{
// mobile inner background image
phBgImg: "yourimage.jpg",
}

Where To Change Title And Sub Title

Below code for Where To Change Title And Sub Title :

{
// title
title: "Your Title",
// sub title
subTitle: "Your Sub Title",
}

Where To Set Background Shape Color

Below code for Where To Set Background Shape Color :

{
// background shapes color
color1:"#f7a3a1",
color2:"#fec697",
}

To upload an image and retrieve its source (URL), please follow these steps :

Select or Prepare Your Image: Begin by choosing the image you wish to upload, ensuring it’s in an appropriate format (e.g., JPG, PNG).

Step One : on Your Dashboard Select “File Link” panel and click “File link” button on your Top Right corner

Step Two: Select your desired image and and its name then proceed by clicking the “Create File Url” button.

Step Three: Now, you can see bellow figure that highlighted the image url and just “Copy Your Image Address.”

“Follow the previously mentioned steps to upload and obtain the image URL for all of your images.”

Try Your Self

Other Style Sections :

Bio Link page, Hero Section, Learn, Sections
November 14, 20230

Background Image Shape Lines Section

How To Add Shape Lines Section
Where To Set Title, Short Title, Paragraph And Section Alignment
Where To Change Image
Where To Set Button Details And Style
Where To Change Shape Design
How to Uploading & Retrieve Image URLs?
Live Demo

To integrate this Shape Lines Designs Section Plugin into your biography page, please follow these installation instructions.

Step One: Insert a Custom HTML Block.

Step two: Just Paste below JS code into your Custom HTML block

    <!-- Include external JavaScript file for shape masking designs -->
    <script src="https://biz15.com/trialone/custom/js/shapemaskingdesigns.js"></script>
    <!-- Initialize ShapeMaskingDesigns object with specific parameters -->
    <script>
        // Create a new ShapeMaskingDesigns object
        new ShapeMaskingDesigns({
            // Image URL for the design
            image: "https://biz15.co/uploads/block_images/a6b839437d32e768dcf8de0734afb80c.jpg",
            // Type of shape used for masking (e.g., "ghost-line" , "ghost-line2" , "vertical-line" and "cutter-line")
            shape: "ghost-line",
            // Alignment of the design section (e.g., "left" and "right")
            sectionAlign: "left",
            // Title of the design
            title: "Shape Masking Design",
            // Short title or designer information
            shortTitle: "Designed by Saran kumar",
            // Description or content for the design
            paragraph: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, impedit?",
            // Button details, including text, link, and styling
            button: {
                text: "KNOW MORE",
                link: "#",
                color: "white",
                backgroundColor: "black",
                hoverColor: "white",
                hoverBackgroundColor: "#dc3545",
            }
        });
    </script>

The result following the completion of the steps.

Live Demo

Where To Set Title, Short Title, Paragraph And Section Alignment

Below Code For Where To Set Title, Short Title, Paragraph And Section Alignment :

    title: "Title of the design",
    shortTitle: "Short title or designer information",
    paragraph: " Description or content for the design",
    // Alignment of the design section (e.g., "left" and "right")
    sectionAlign: "left",

Where To Change Image

Below code for Where To Change Image :

    image: "your-image.jpg",

Where To Set Button Details And Style

Below code for Where To Set Button Details And Style :

    // Button details, including text, link, and styling
    button: {
        text: "KNOW MORE",
        link: "#",
        color: "white",
        backgroundColor: "black",
        hoverColor: "white",
        hoverBackgroundColor: "#dc3545",
    }

Where To Change Shape Design

Design shape links just copy and paste this link in a JS data : (shape: ” “,)

Below code for Where To Change Shape Design :

    // Type of shape used for masking (e.g., "ghost-line" , "ghost-line2" , "vertical-line" and "cutter-line")
    shape: "ghost-line",

To upload an image and retrieve its source (URL), please follow these steps :

Select or Prepare Your Image: Begin by choosing the image you wish to upload, ensuring it’s in an appropriate format (e.g., JPG, PNG).

Step One : on Your Dashboard Select “File Link” panel and click “File link” button on your Top Right corner

Step Two: Select your desired image and and its name then proceed by clicking the “Create File Url” button.

Step Three: Now, you can see bellow figure that highlighted the image url and just “Copy Your Image Address.”

“Follow the previously mentioned steps to upload and obtain the image URL for all of your images.”

Try Your Self

Other Style Sections :

Bio Link page, Hero Section, Learn, Sections
November 14, 20230

Geometrical Three Shapes Designs Style Section

How To Add Three Shapes Designs
Where To Set Title And Description
Where and How to Set Shape Type
Where and How to Add Your Images in Three Shape Designs
How to Uploading & Retrieve Image URLs?
Live Demo

To integrate this Three Shapes Designs into your biography page, please follow these installation instructions.

Step One: Insert a Custom HTML Block.

Step two: Just Paste below JS code into your Custom HTML block

    <!-- Include external JavaScript file -->
    <script src="https://biz15.com/trialone/custom/js/threeshapedesigns.js"></script>
    
    <!-- Initialize the ThreeShapeDesigns object with an array of designs -->
    <script id="threeShapeDesigns">
    
        // Create an instance of ThreeShapeDesigns
        new ThreeShapeDesigns([
            // Design details for the first item in the array
            {
                // Design style (e.g., "triangle" , "circle" , "square")
                style: "triangle", 
    
                // URLs for three images associated with the design
                image1: "image-1.jpg",
                image2: "image-2.jpg",
                image3: "image-3.jpg",
    
                // Title of the design
                title: "Your Title Goes Here",
    
                // Title color
                titleColor: "blue",
    
                // Paragraph describing the design
                paragraph: "Your Paragraph Goes Here"
            }
        ]);
    </script>

The result following the completion of the steps.

Live Demo

Where to Set Title And Description

Here’s an example of Where to Set Title And Description

    // Title of the design
    title: "Your Title Goes Here",

    // Title color
    titleColor: "blue",

    // Paragraph describing the design
    paragraph: "Your Paragraph Goes Here"

Where and How to Set Shape Type

Here’s an example of Where and How to Set Shape Type ,

options : “triangle” , “circle” and “square”

    // Design style (e.g., "triangle" , "circle" , "square")
    style: "triangle", 

    // Design style (e.g., "triangle" , "circle" , "square")
    style: "circle", 

    // Design style (e.g., "triangle" , "circle" , "square")
    style: "square",

Where and How to Add Your Images in Three Shape Designs

This design only and must need three images

below code for Where and How to Add Your Images in Three Shape Designs :

    // URLs for three images associated with the design
    image1: "image-1.jpg",
    image2: "image-2.jpg",
    image3: "image-3.jpg",

To upload an image and retrieve its source (URL), please follow these steps :

Select or Prepare Your Image: Begin by choosing the image you wish to upload, ensuring it’s in an appropriate format (e.g., JPG, PNG).

Step One : on Your Dashboard Select “File Link” panel and click “File link” button on your Top Right corner

Step Two: Select your desired image and and its name then proceed by clicking the “Create File Url” button.

Step Three: Now, you can see bellow figure that highlighted the image url and just “Copy Your Image Address.”

“Follow the previously mentioned steps to upload and obtain the image URL for all of your images.”

Try Your Self

Other Style Sections :