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

Tabs

Biz15.co | Learning Center > Tabs
Bio Link page, Learn, Sections, Tabs
November 13, 20230

Product Tab Style section

How to Install Tabs plugin?
How to set Title for Each Tabs
How to add products in each Tabs
How to set link in products button
How to Uploading & Retrieve Image URLs?
Live Demo

To integrate this Tabs 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

<script src="https://biz15.com/trialone/custom/js/tab-plugin.js"></script>
<script>
new CreateTabs("tabs-products" , "animate__bounceIn", 
{
themeColor : 'green',
buttonTextColor : 'white',
buttonHoverTextColor : "white",
buttonBGColor : 'red',
buttonHoverBGColor : "green",
buttonBorderRadius : "20px"
},
[
{
tabName : "Food",
products : [
{
productImageUrl : 'https://placehold.co/500x350',
productTitle: 'Product Title',
productTag : 'Non Veg',
button : {
name : 'Buy Now',
link : '#'
}
},
{
productImageUrl : 'https://placehold.co/500x350',
productTitle: 'Product Title',
productTag : 'Non Veg',
button : {
name : 'Buy Now',
link : '#'
}
},
{
productImageUrl : 'https://placehold.co/500x350',
productTitle: 'Product Title',
productTag : 'Non Veg',
button : {
name : 'Buy Now',
link : '#'
}
},
{
productImageUrl : 'https://placehold.co/500x350',
productTitle: 'Product Title',
productTag : 'Non Veg',
button : {
name : 'Buy Now',
link : '#'
}
},
],
},
{
tabName : "Non Veg",
products : [
{
productImageUrl : 'https://placehold.co/500x350',
productTitle: 'Product Title',
productTag : 'Non Veg',
button : {
name : 'Buy Now',
link : '#'
}
},
{
productImageUrl : 'https://placehold.co/500x350',
productTitle: 'Product Title',
productTag : 'Non Veg',
button : {
name : 'Buy Now',
link : '#'
}
},
{
productImageUrl : 'https://placehold.co/500x350',
productTitle: 'Product Title',
productTag : 'Non Veg',
button : {
name : 'Buy Now',
link : '#'
}
},
{
productImageUrl : 'https://placehold.co/500x350',
productTitle: 'Product Title',
productTag : 'Non Veg',
button : {
name : 'Buy Now',
link : '#'
}
},
],
},
{
tabName : "Vegetable",
products : [
{
productImageUrl : 'https://placehold.co/500x350',
productTitle: 'Product Title',
productTag : 'Non Veg',
button : {
name : 'Buy Now',
link : '#'
}
},
{
productImageUrl : 'https://placehold.co/500x350',
productTitle: 'Product Title',
productTag : 'Non Veg',
button : {
name : 'Buy Now',
link : '#'
}
},
{
productImageUrl : 'https://placehold.co/500x350',
productTitle: 'Product Title',
productTag : 'Non Veg',
button : {
name : 'Buy Now',
link : '#'
}
},
{
productImageUrl : 'https://placehold.co/500x350',
productTitle: 'Product Title',
productTag : 'Non Veg',
button : {
name : 'Buy Now',
link : '#'
}
},
],
},
{
tabName : "Burgers",
products : [
{
productImageUrl : 'https://placehold.co/500x350',
productTitle: 'Product Title',
productTag : 'Non Veg',
button : {
name : 'Buy Now',
link : '#'
}
},
{
productImageUrl : 'https://placehold.co/500x350',
productTitle: 'Product Title',
productTag : 'Non Veg',
button : {
name : 'Buy Now',
link : '#'
}
},
{
productImageUrl : 'https://placehold.co/500x350',
productTitle: 'Product Title',
productTag : 'Non Veg',
button : {
name : 'Buy Now',
link : '#'
}
},
{
productImageUrl : 'https://placehold.co/500x350',
productTitle: 'Product Title',
productTag : 'Non Veg',
button : {
name : 'Buy Now',
link : '#'
}
},
],
},
])
</script>

The result following the completion of the steps.

Live Demo

How to set Tabs Name

Create A Stunning Web Pages

  //Here you can Set Tab name, as same as for all tabs
  tabName : "Your Tab Name",

How to add Products in each Tabs

The following code shows how to add products as same as for all tabs

  products : [
      {
          // Product details
          productImageUrl : 'yourimage.png', // URL for the product image
          productTitle: 'Product Title', // Title of the product
          productTag : 'Product Tag', // Tag associated with the product
          
          // Button details
          button : {
              name : 'Buy Now', // Text on the button
              link : ' # ' // Link or action when the button is clicked
          }
      },
      //separated by commas you can Add more products if needed

How to set button link for each products

The following code shows how to set button link for each products as same as for all tabs

  button : {
      name : 'Buy Now', // Text on the button
      link : ' # ' // Link or action when the button is clicked
  }

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 : Insert an image block into your biography page.

Step Two: Select your desired image and proceed by clicking the “Submit” button.

Step Three: Now, open your image block, right-click on the image, and select “Copy Image Address.”

Step Four: Ensure that your image is not visible in the live view by disabling your status.

Here is an example of how you can use the image source (URL) in an HTML “img” tag:

    <img src="https://biz15.co/yourImage.jpg" alt="Description of the Image">

Replace ‘https://biz15.co/yourImage.jpg’ with the actual URL you received during the image upload process.

“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, Tabs
November 13, 20230

Price section with tab style

How to Add Price Section?
How to set Price value for Monthly and Annual Plan
How to set Separated button link for Monthly and Annual Plan
Live Demo

To integrate this Price section 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

      
  // Define a configuration object for the price plugin
const pricePlugin = {
    // Switch between monthly and annual pricing
    Switch:  ["MONTHLY", "ANNUAL"],
    // Define background colors for different pricing box elements
    priceBoxBg:  'hsl(230, 66%, 9%)',
    priceCenterBoxBg:  'hsl(228, 54%, 29%)',
    priceBoxBorderColor:  'hsl(232, 61%, 52%)',
    priceBoxIconColor:  'hsl(184, 94%, 58%)',
    priceCenterBoxIconColor:  'hsl(74, 100%, 76%)',
    priceBoxFeatureIconColor:  'hsl(232, 77%, 58%)',
    priceCenterBoxFeatureIconColor:  'hsl(74, 100%, 76%)',
    
    // Define details for the left pricing box ("CORE")
    PriceBoxLeft: {
        // Icon for the left pricing box
        Icon: '<i class="fa-brands fa-trade-federation"></i>',
        // Title of the left pricing box
        Title: 'CORE',
        // Monthly and Annual prices for the left pricing box
        MonthlyPrice: ['$19', '/mo'],
        AnnualPrice: ['$49', '/an'],
        // Description of the left pricing box
        Description: 'Best for solo creators',
        // List of features for the left pricing box
        FeatureList: [
            "100MB Cloud storage",
            "100+ prompt templates",
            "5 projects",
            "24/7 support",
        ],
        // Icon for features in the left pricing box
        FeatureIcon: '<i class="fa-solid fa-circle-check"></i>',
        // Buttons for Monthly and Annual plans in the left pricing box
        Button: {
            Monthly: {
                Text: 'Get Started',
                Link: '#' // Placeholder link, replace with actual URL
            },
            Annual: {
                Text: 'Get Started',
                Link: '#' // Placeholder link, replace with actual URL
            }
        },
    },
    
    // Define details for the center pricing box ("OVERDRIVE")
    PriceBoxCenter: {
        // Icon for the center pricing box
        Icon: '<i class="fa-brands fa-nfc-directional"></i>',
        // Title of the center pricing box
        Title: 'OVERDRIVE',
        // Monthly and Annual prices for the center pricing box
        MonthlyPrice: ['$79', '/mo'],
        AnnualPrice: ['$199', '/an'],
        // Description of the center pricing box
        Description: 'Most popular plan',
        // List of features for the center pricing box
        FeatureList: [
            "All Starter features",
            "1TB additional storage",
            "Unlimited projects",
            "Analytics",
        ],
        // Icon for features in the center pricing box
        FeatureIcon: '<i class="fa-solid fa-circle-check"></i>',
        // Buttons for Monthly and Annual plans in the center pricing box
        Button: {
            Monthly: {
                Text: 'Get Started',
                Link: '#' // Placeholder link, replace with actual URL
            },
            Annual: {
                Text: 'Get Started',
                Link: '#' // Placeholder link, replace with actual URL
            }
        },
    },
    
    // Define details for the right pricing box ("TEAM")
    PriceBoxRight: {
        // Icon for the right pricing box
        Icon: '<i class="fa-brands fa-connectdevelop"></i>',
        // Title of the right pricing box
        Title: 'TEAM',
        // Monthly and Annual prices for the right pricing box
        MonthlyPrice: ['$39', '/mo'],
        AnnualPrice: ['$69', '/an'],
        // Description of the right pricing box
        Description: 'Exclusively for teams',
        // List of features for the right pricing box
        FeatureList: [
            "All Overdrive features",
            "1TB additional storage",
            "50% off per member",
            "Real-time collaboration",
        ],
        // Icon for features in the right pricing box
        FeatureIcon: '<i class="fa-solid fa-circle-check"></i>',
        // Buttons for Monthly and Annual plans in the right pricing box
        Button: {
            Monthly: {
                Text: 'Get Started',
                Link: '#' // Placeholder link, replace with actual URL
            },
            Annual: {
                Text: 'Get Started',
                Link: '#' // Placeholder link, replace with actual URL
            }
        },
    }
}

 // Link to an external JavaScript file for additional functionality
<script src="https://biz15.com/trialone/custom/js/price-plugin.js"></script>

The result following the completion of the steps.

Live Demo

How to set Price value for Monthly and Annual Plan

Create A Stunning Web Pages

    // Title of the right pricing box
    Title: 'TEAM',
    // Monthly and Annual prices for the right pricing box
    MonthlyPrice: ['$39', '/mo'],
    AnnualPrice: ['$69', '/an'],

How to set Separated button link for Monthly and Annual Plan

Here’s an example of how to give separated link for monthly and Annual: for each plan as same

    Button: {
      Monthly: {
          Text: 'Get Started',
          Link: '#' // Placeholder link, replace with actual URL
      },
      Annual: {
          Text: 'Get Started',
          Link: '#' // Placeholder link, replace with actual URL
      }
    },

Try Your Self

Other Style Sections :