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

Learn

Biz15.co | Learning Center > Learn
Blocks, Learn
December 22, 20230

How To Add Titles – Heading on biopage

Follow the below steps to add a heading block

 

 

 

Step 1: Click the heading option in a list.

 

 

 

 

Step 2: Select heading size and now enter heading in a text area.

 

 

Hear you can Select the heading size

 

 

Click submit button in the bottom of the popup .

 

 

Step 3: You can customize the heading here(color, text align, etc…)

 

 

 

Now see the video tutorial

 

 

 

Try Your Self

Other Blocks Tutorial :

Blocks, Learn
December 22, 20230

How To Add Buttons – Link on Biopage:

Follow the below steps to create a Link Block (Button)

 

 

 

Step 1: Click the Link option in a list.

 

 

 

Step 2: Enter your button link and title

 

 

Step 2.1: Enter your Button URL link in the destination URL area.

 

 

Step 2.2: Enter your Button Title in the Name area.

 

 

 

Now see the video tutorial

 

 

 

Try Your Self

Other Blocks Tutorial :

Follow the below steps to create a Image Block

 

 

 

Step 1: Click the Image option in a list.

 

 

 

 

Step 2: Choose your image and fill the followings.

 

 

Step 2.1: Choose your image

 

 

Step 2.2: Enter your image name.

 

 

Step 2.3: Enter your URL link here.

 

 

 

Now see the video tutorial

 

 

 

Try Your Self

Other Blocks Tutorial :

December 22, 20230

How To Add Image on biopage

Blocks, Learn
December 22, 20230

How to Create a V-Card

Follow the below steps to create a V-Card

 

 

 

Step 1: Click the Vcard links in a left menu.

 

 

 

 

Step 2: Click the V-card Link button in a right top of the page.

 

 

 

 

Step 3: Enter your short URL link in the following area.

 

 

 

Step 4: Now enter all you needed details.

 

 

Click update button in the bottom of the page

 

 

Now see the video tutorial

 

 

Try Your Self

Other Blocks Tutorial :

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, Call To Action, Learn, Sections
November 17, 20230

Call To Action Section with Email and Phone Collector

How To Add Call To Action Email Or Phone Collector
Where To Set Background Image
Where To Set Title
Where To Set Call To Action Height
Where To Set Email Or Phone Collector
How To Uploading & Retrieve Image URLs?
Live Demo

To integrate this Call To Action Email And Phone Collector 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 the external JavaScript file for CTA_PHONE_EMAIL_COLLECTOR -->
<script src="https://biz15.com/trialone/custom/js/cta-email-collector.js"></script>

 <!-- Initialize CTA_PHONE_EMAIL_COLLECTOR -->
<script>
// Create a new instance of CTA_PHONE_EMAIL_COLLECTOR with configuration settings
new CTA_PHONE_EMAIL_COLLECTOR({
// Specify the type of collector (in this case, for email Or Phone)
for: "email",
// Set the animation speed (in milliseconds)
animationSpeed: 50000,
// Define the height of the section
sectionHeight: "250px",
// Set the title for the CTA section
title: "Supercharge Your Digital Presence!",
// Provide a background image for the CTA section
backgroundImage: "https://img.freepik.com/free-photo/guy-shows-document-girl-group-young-freelancers-office-have-conversation-working_146671-13569.jpg?w=740&t=st=1698816493~exp=1698817093~hmac=38e57403d2bebea3627efdb49e7eb96803eaeb5246b5d30c9a3a5c066742bb43",
// Configure button settings
buttonSetting: {
// Set the text color of the button
textColor: "#ffffff",
// Set the background color of the button
buttonBgColor: "#5e6fd9",
// Set the background color of the button on hover
buttonBgColor_onHover: "#1e3799",
// Set the border radius of the button
buttonBorderRadius: '5px',
}
});
</script>

The result following the completion of the steps.

Live Demo

Where To Set Background Image

Below code for Where To Set Background Image:

{ 
// Provide a background image for the CTA section
backgroundImage: "yourimage.jpg",
}

Where To Set Title

Below code for Where To Set Title :

 { 
// Set the title for the CTA section
title: "Supercharge Your Digital Presence!",
 }

Where To Set Call To Action Height

Below code for Where To Set Call To Action Height :

 { 
// Define the height of the section
sectionHeight: "250px",
 }

Where To Set Email Or Phone Collector

Specify the collector types needed (email and phone)

Below code for Where To Set Email Or Phone Collector Button :

 { 
// Specify the type of collector (in this case, for email)
for: "email",
 }

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, Learn, Sections, Slider And Carousel
November 17, 20230

Image with clickable slide

How To Add Circular Slide
Where To Set Image
Where To Set Title And Description
Where To Set Button Link And Text
How To Uploading & Retrieve Image URLs?
Live Demo

To integrate thisĀ Circular SlideĀ 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/circleslider.js"></script>
<script>
new CircleSlider("your-unique" , {
    // TITLE
    title : "We Create Solutions for Your Business",
    // DESCRIPTION
    para : "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, aut?",
    // BUTTON TITLE
    buttonName : "Get Started",
    // BUTTON LINK
    buttonLink : "#",
    // SLIDE IMAGES
    imgages : [
        "https://biz15.co/uploads/block_images/e7591fbc7a5bf73f886b99eb2ba647d3.png",
        "https://biz15.co/uploads/block_images/94d236db7f7d419228d8075dee548593.png",
        "https://biz15.co/uploads/block_images/86a67146ccd664430b6e2cc1bdcca862.png",
        "https://biz15.co/uploads/block_images/86a67146ccd664430b6e2cc1bdcca862.png",
        "https://biz15.co/uploads/block_images/86a67146ccd664430b6e2cc1bdcca862.png",
    ]
})
</script>

The result following the completion of the steps.

Live Demo

Where To Set Image

Below code for Where To Set Image:

{ 
imgages : [
"yourimage.png",
]
}

Where To Set Title And Description

Below code for Where To Set Title And Description :

 { 
// TITLE
title : "Your Title",
// DESCRIPTION
para : "Your Description",
 }

Where To Set Button Link And Text

Below code for Where To Set Button Link And Text :

 { 
// BUTTON TITLE
buttonName : "Get Started",
// BUTTON LINK
buttonLink : "#",
 }

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, Grids, Learn, Sections
November 17, 20230

Blog Grid With Button

 

How To Add Product Grid Style – 006
Where To Set Image
Where To Set Title, description And Date
Where To Set Theme Color
Where To Set Button Link And Text
How To Uploading & Retrieve Image URLs?
Live Demo

 

 

To integrate thisĀ Product Grid Style – 006Ā 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

 

<!-- JS DATA CODE -->
<!-- Include the external JavaScript file for Product Grid Style 006  -->
<script src="https://biz15.com/trialone/custom/js/blogstylegrid.js"></script>

<!-- Initialize Product Grid Style 006 -->
<script>
// Step 1: Create a new instance of Product Grid Style 006 with theme settings and blog data
new BlogStyleGrid(
{
// Step 2: Define theme settings for the grid
themeSetting: {
style: 2,
contentBackgroundColor: "#292929",
contentBackgroundColor_onHover: "black",
contentBoxBorderRadius: "20px",

titleFontSize: "15px",
titleTextColor: "white",
paraFontSize: "12px",
paraTextColor: "whitesmoke",

dateTextColor: "whitesmoke",
dateFontSize: "10px",

buttonFontSize: "10px",
buttonBorderRadius: "15px",
buttonBackgroundColor: "blue",
buttonBackgroundColor_onHover: "darkblue",
buttonTextColor: "white",
buttonTextColor_onHover: "white",
}
},
// Step 3: Provide an array of blog data objects (you can adjust the number of entries)
[
// Step 4: Define data for the first blog entry
{
blogImage: "https://biz15.co/uploads/files/2a5f5b6b041fba102c53b259e05a5594.jpg",
date: "00 / 00 / 0000",
title: "Your Title",
para: "Your description",
button: {
text: "Know More",
link: "#",
},
},
// Repeat Step 4 for additional blog entries as needed...
]);
</script>

 

 

The result following the completion of the steps.

 

 

Live Demo

 

 

Where To Set Image

 

Below code for Where To Set Image:

 

{ 
 blogImage: "yourimage",
}

 

 

Where To Set Title, Description And Paragraph

 

Below code for Where To Set Title, Description And Paragraph :

 

{ 
  date: "00 / 00 / 0000",
  title: "Your Title",
  para: "Your description",
}

 

 

Where To Set Theme Color

 

Below code for Where To Set Theme Color :

 

themeSetting: {
style: 2,
// box style 
contentBackgroundColor: "#292929",
contentBackgroundColor_onHover: "black",
contentBoxBorderRadius: "20px",
   
// Title and Description
titleFontSize: "15px",
titleTextColor: "white",
paraFontSize: "12px",
paraTextColor: "whitesmoke",

// text color & size
dateTextColor: "whitesmoke",
dateFontSize: "10px",

// button style
buttonFontSize: "10px",
buttonBorderRadius: "15px",
buttonBackgroundColor: "blue",
buttonBackgroundColor_onHover: "darkblue",

// button color normal & hover 
buttonTextColor: "white",
buttonTextColor_onHover: "white",
}

 

 

Where To Set Button Link And Text

 

Below code for Where To Set Button Link And Text :

 

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, Grids, Learn, Sections
November 16, 20230

Classic Grid With Button

How To Add Classic Grid Style – 001
Where To Set Image
Where To Set Title, Paragraph, Price
How To Set Theme Color
Where To Set Button Link
How To Uploading & Retrieve Image URLs?
Live Demo

To integrate this Classic Grid 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

<!-- HTML CODE -->

<script src="https://biz15.com/trialone/custom/js/classicgridstyle.js"></script>  
<script>
// Define an array of product for each grid column
new ClassicGridStyle( {themeColor : 'goldenrod'} , [
{
// grid image
imageUrl: "https://biz15.co/uploads/files/f69584f6dd1c0189175095d0cdb35440.png",
// grid title
title: "Fresh and Healthy Salad",
// small title 1
calories: "60 Calories",
// small title 2
servings: "2 Person",
// grid price
price: "ā‚¹100",
// button link
link: "https://biz15.co/classic-grid"
},
 // Define product for the remaining columns here
]);
</script>

The result following the completion of the steps.

Live Demo

Where To Set Image

Below code for Where To Set Image:

 { 
imageUrl: "yourimage.png",
 }

Where To Set Title, Paragraph And Price

Below code for Where To Set Title, Paragraph And Price :

{
title: "Fresh and Healthy Salad",
calories: "60 Calories",
servings: "2 Person",
price: "ā‚¹100",
}

How To Set Theme Color

Below code for How To Set Theme Color :

{themeColor : 'goldenrod';}

Where To Set Button Link

Below code for Where To Set Button Link :

{
link: "https://biz15.co/classic-grid"
}

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 :