DESIGN 01 / 16LightSquareVertical
Light Before / After — Square, Vertical
A before/after comparison — shows life before and after using your product — on a light background. Marker: square; layout: before on top, after below.
Best forShowing the change your product makes. Works nicely for nuts, dry fruits and healthy snacks.
Where to place itAfter the problem section.
How to use: add the BD Before / After (COD) block and choose light · square · vertical in its style settings
What you can customize in this widget
ColorsTitle color, Tag color, Before background, After background, Bar color, Knob background, Knob color, Accent, Background, Box background, Box border color
Font & text sizeTitle size, Tag size, Knob size
Size & spacingHead gap, Tag radius, Bar width, Radius, Box margin, Box background size, Box radius
Layout & styleStart position, Text align, Orientation, Tag style, Label position, Knob style
Animation & effectsHover move, Hover, Animation, Shadow
Show / hide optionsHint, Show tags, On, Orig
Text, images & linksBefore image, After image, Label before, Label after, Title, Subtitle, Aspect, Aspect mobile, Fit, Frame, Tag edge, Primary, Ink, Border, Padding, Box padding, Box background image, Box overlay, Box overlay o, Box border, Key, Product, W0
বাজারের বাদাম বনাম আমাদের এ-গ্রেড দানা
টেনে দেখুন — দানার সাইজ আর রঙের পার্থক্য
DESIGN 02 / 16OutlineRingHorizontal
Outline Before / After — Ring, Horizontal
Before/after comparison in outline boxes. Marker: ring; layout: before and after side by side.
Best forShowing the change your product makes. Works nicely for pickles and homemade foods.
Where to place itRight after the hero.
How to use: add the BD Before / After (COD) block and choose outline · ring · horizontal in its style settings
What you can customize in this widget
ColorsTitle color, Tag color, Before background, After background, Bar color, Knob background, Knob color, Accent, Background, Box background, Box border color
Font & text sizeTitle size, Tag size, Knob size
Size & spacingHead gap, Tag radius, Bar width, Radius, Box margin, Box background size, Box radius
Layout & styleStart position, Text align, Orientation, Tag style, Label position, Knob style
Animation & effectsHover move, Hover, Animation, Shadow
Show / hide optionsHint, Show tags, On, Orig
Text, images & linksBefore image, After image, Label before, Label after, Title, Subtitle, Aspect, Aspect mobile, Fit, Frame, Tag edge, Primary, Ink, Border, Padding, Box padding, Box background image, Box overlay, Box overlay o, Box border, Key, Product, W0
কাঁচা আম থেকে নানির আচার
রোদে শুকিয়ে সরিষার তেলে রান্নার আগে ও পরে
DESIGN 03 / 16DarkDotVertical
Dark Before / After — Dot, Vertical
Dark before/after comparison with strong contrast. Marker: dot; layout: before on top, after below.
Best forShowing the change your product makes. Works nicely for spices and masala.
Where to place itBefore the price section.
How to use: add the BD Before / After (COD) block and choose dark · dot · vertical in its style settings
What you can customize in this widget
ColorsTitle color, Tag color, Before background, After background, Bar color, Knob background, Knob color, Accent, Background, Box background, Box border color
Font & text sizeTitle size, Tag size, Knob size
Size & spacingHead gap, Tag radius, Bar width, Radius, Box margin, Box background size, Box radius
Layout & styleStart position, Text align, Orientation, Tag style, Label position, Knob style
Animation & effectsHover move, Hover, Animation, Shadow
Show / hide optionsHint, Show tags, On, Orig
Text, images & linksBefore image, After image, Label before, Label after, Title, Subtitle, Aspect, Aspect mobile, Fit, Frame, Tag edge, Primary, Ink, Border, Padding, Box padding, Box background image, Box overlay, Box overlay o, Box border, Key, Product, W0
আস্ত থেকে খাঁটি গুঁড়া
ধুয়ে, শুকিয়ে, গুঁড়া — রং কৃত্রিম নয়
DESIGN 04 / 16SolidCircleHorizontal
Solid Before / After — Circle, Horizontal
Before/after with solid colored panels. Marker: circle; layout: before and after side by side.
Best forShowing the change your product makes. Works nicely for honey and gift items.
Where to place itMid-page, before reviews.
How to use: add the BD Before / After (COD) block and choose solid · circle · horizontal in its style settings
What you can customize in this widget
ColorsTitle color, Tag color, Before background, After background, Bar color, Knob background, Knob color, Accent, Background, Box background, Box border color
Font & text sizeTitle size, Tag size, Knob size
Size & spacingHead gap, Tag radius, Bar width, Radius, Box margin, Box background size, Box radius
Layout & styleStart position, Text align, Orientation, Tag style, Label position, Knob style
Animation & effectsHover move, Hover, Animation, Shadow
Show / hide optionsHint, Show tags, On, Orig
Text, images & linksBefore image, After image, Label before, Label after, Title, Subtitle, Aspect, Aspect mobile, Fit, Frame, Tag edge, Primary, Ink, Border, Padding, Box padding, Box background image, Box overlay, Box overlay o, Box border, Key, Product, W0
চাক থেকে সরাসরি বোতলে
হ্যান্ডেল টেনে দেখুন মধুর যাত্রা
DESIGN 05 / 16LightPillVertical
Light Before / After — Pill, Vertical
A before/after comparison — shows life before and after using your product — on a light background. Marker: pill; layout: before on top, after below.
Best forShowing the change your product makes. Works nicely for mustard oil, ghee and kitchen staples.
Where to place itAfter the problem section.
How to use: add the BD Before / After (COD) block and choose light · pill · vertical in its style settings
What you can customize in this widget
ColorsTitle color, Tag color, Before background, After background, Bar color, Knob background, Knob color, Accent, Background, Box background, Box border color
Font & text sizeTitle size, Tag size, Knob size
Size & spacingHead gap, Tag radius, Bar width, Radius, Box margin, Box background size, Box radius
Layout & styleStart position, Text align, Orientation, Tag style, Label position, Knob style
Animation & effectsHover move, Hover, Animation, Shadow
Show / hide optionsHint, Show tags, On, Orig
Text, images & linksBefore image, After image, Label before, Label after, Title, Subtitle, Aspect, Aspect mobile, Fit, Frame, Tag edge, Primary, Ink, Border, Padding, Box padding, Box background image, Box overlay, Box overlay o, Box border, Key, Product, W0
সরিষা থেকে ঘানি ভাঙা তেল
দেশি সরিষা আর তার খাঁটি তেল — পাশাপাশি
DESIGN 06 / 16OutlineSquareHorizontal
Outline Before / After — Square, Horizontal
Before/after comparison in outline boxes. Marker: square; layout: before and after side by side.
Best forShowing the change your product makes. Works nicely for nuts, dry fruits and healthy snacks.
Where to place itRight after the hero.
How to use: add the BD Before / After (COD) block and choose outline · square · horizontal in its style settings
What you can customize in this widget
ColorsTitle color, Tag color, Before background, After background, Bar color, Knob background, Knob color, Accent, Background, Box background, Box border color
Font & text sizeTitle size, Tag size, Knob size
Size & spacingHead gap, Tag radius, Bar width, Radius, Box margin, Box background size, Box radius
Layout & styleStart position, Text align, Orientation, Tag style, Label position, Knob style
Animation & effectsHover move, Hover, Animation, Shadow
Show / hide optionsHint, Show tags, On, Orig
Text, images & linksBefore image, After image, Label before, Label after, Title, Subtitle, Aspect, Aspect mobile, Fit, Frame, Tag edge, Primary, Ink, Border, Padding, Box padding, Box background image, Box overlay, Box overlay o, Box border, Key, Product, W0
বাজারের বাদাম বনাম আমাদের এ-গ্রেড দানা
টেনে দেখুন — দানার সাইজ আর রঙের পার্থক্য
DESIGN 07 / 16DarkRingVertical
Dark Before / After — Ring, Vertical
Dark before/after comparison with strong contrast. Marker: ring; layout: before on top, after below.
Best forShowing the change your product makes. Works nicely for pickles and homemade foods.
Where to place itBefore the price section.
How to use: add the BD Before / After (COD) block and choose dark · ring · vertical in its style settings
What you can customize in this widget
ColorsTitle color, Tag color, Before background, After background, Bar color, Knob background, Knob color, Accent, Background, Box background, Box border color
Font & text sizeTitle size, Tag size, Knob size
Size & spacingHead gap, Tag radius, Bar width, Radius, Box margin, Box background size, Box radius
Layout & styleStart position, Text align, Orientation, Tag style, Label position, Knob style
Animation & effectsHover move, Hover, Animation, Shadow
Show / hide optionsHint, Show tags, On, Orig
Text, images & linksBefore image, After image, Label before, Label after, Title, Subtitle, Aspect, Aspect mobile, Fit, Frame, Tag edge, Primary, Ink, Border, Padding, Box padding, Box background image, Box overlay, Box overlay o, Box border, Key, Product, W0
কাঁচা আম থেকে নানির আচার
রোদে শুকিয়ে সরিষার তেলে রান্নার আগে ও পরে
DESIGN 08 / 16SolidDotHorizontal
Solid Before / After — Dot, Horizontal
Before/after with solid colored panels. Marker: dot; layout: before and after side by side.
Best forShowing the change your product makes. Works nicely for spices and masala.
Where to place itMid-page, before reviews.
How to use: add the BD Before / After (COD) block and choose solid · dot · horizontal in its style settings
What you can customize in this widget
ColorsTitle color, Tag color, Before background, After background, Bar color, Knob background, Knob color, Accent, Background, Box background, Box border color
Font & text sizeTitle size, Tag size, Knob size
Size & spacingHead gap, Tag radius, Bar width, Radius, Box margin, Box background size, Box radius
Layout & styleStart position, Text align, Orientation, Tag style, Label position, Knob style
Animation & effectsHover move, Hover, Animation, Shadow
Show / hide optionsHint, Show tags, On, Orig
Text, images & linksBefore image, After image, Label before, Label after, Title, Subtitle, Aspect, Aspect mobile, Fit, Frame, Tag edge, Primary, Ink, Border, Padding, Box padding, Box background image, Box overlay, Box overlay o, Box border, Key, Product, W0
আস্ত থেকে খাঁটি গুঁড়া
ধুয়ে, শুকিয়ে, গুঁড়া — রং কৃত্রিম নয়
DESIGN 09 / 16LightCircleVertical
Light Before / After — Circle, Vertical
A before/after comparison — shows life before and after using your product — on a light background. Marker: circle; layout: before on top, after below.
Best forShowing the change your product makes. Works nicely for honey and gift items.
Where to place itAfter the problem section.
How to use: add the BD Before / After (COD) block and choose light · circle · vertical in its style settings
What you can customize in this widget
ColorsTitle color, Tag color, Before background, After background, Bar color, Knob background, Knob color, Accent, Background, Box background, Box border color
Font & text sizeTitle size, Tag size, Knob size
Size & spacingHead gap, Tag radius, Bar width, Radius, Box margin, Box background size, Box radius
Layout & styleStart position, Text align, Orientation, Tag style, Label position, Knob style
Animation & effectsHover move, Hover, Animation, Shadow
Show / hide optionsHint, Show tags, On, Orig
Text, images & linksBefore image, After image, Label before, Label after, Title, Subtitle, Aspect, Aspect mobile, Fit, Frame, Tag edge, Primary, Ink, Border, Padding, Box padding, Box background image, Box overlay, Box overlay o, Box border, Key, Product, W0
চাক থেকে সরাসরি বোতলে
হ্যান্ডেল টেনে দেখুন মধুর যাত্রা
DESIGN 10 / 16OutlinePillHorizontal
Outline Before / After — Pill, Horizontal
Before/after comparison in outline boxes. Marker: pill; layout: before and after side by side.
Best forShowing the change your product makes. Works nicely for mustard oil, ghee and kitchen staples.
Where to place itRight after the hero.
How to use: add the BD Before / After (COD) block and choose outline · pill · horizontal in its style settings
What you can customize in this widget
ColorsTitle color, Tag color, Before background, After background, Bar color, Knob background, Knob color, Accent, Background, Box background, Box border color
Font & text sizeTitle size, Tag size, Knob size
Size & spacingHead gap, Tag radius, Bar width, Radius, Box margin, Box background size, Box radius
Layout & styleStart position, Text align, Orientation, Tag style, Label position, Knob style
Animation & effectsHover move, Hover, Animation, Shadow
Show / hide optionsHint, Show tags, On, Orig
Text, images & linksBefore image, After image, Label before, Label after, Title, Subtitle, Aspect, Aspect mobile, Fit, Frame, Tag edge, Primary, Ink, Border, Padding, Box padding, Box background image, Box overlay, Box overlay o, Box border, Key, Product, W0
সরিষা থেকে ঘানি ভাঙা তেল
দেশি সরিষা আর তার খাঁটি তেল — পাশাপাশি
DESIGN 11 / 16DarkSquareVertical
Dark Before / After — Square, Vertical
Dark before/after comparison with strong contrast. Marker: square; layout: before on top, after below.
Best forShowing the change your product makes. Works nicely for nuts, dry fruits and healthy snacks.
Where to place itBefore the price section.
How to use: add the BD Before / After (COD) block and choose dark · square · vertical in its style settings
What you can customize in this widget
ColorsTitle color, Tag color, Before background, After background, Bar color, Knob background, Knob color, Accent, Background, Box background, Box border color
Font & text sizeTitle size, Tag size, Knob size
Size & spacingHead gap, Tag radius, Bar width, Radius, Box margin, Box background size, Box radius
Layout & styleStart position, Text align, Orientation, Tag style, Label position, Knob style
Animation & effectsHover move, Hover, Animation, Shadow
Show / hide optionsHint, Show tags, On, Orig
Text, images & linksBefore image, After image, Label before, Label after, Title, Subtitle, Aspect, Aspect mobile, Fit, Frame, Tag edge, Primary, Ink, Border, Padding, Box padding, Box background image, Box overlay, Box overlay o, Box border, Key, Product, W0
বাজারের বাদাম বনাম আমাদের এ-গ্রেড দানা
টেনে দেখুন — দানার সাইজ আর রঙের পার্থক্য
DESIGN 12 / 16SolidRingHorizontal
Solid Before / After — Ring, Horizontal
Before/after with solid colored panels. Marker: ring; layout: before and after side by side.
Best forShowing the change your product makes. Works nicely for pickles and homemade foods.
Where to place itMid-page, before reviews.
How to use: add the BD Before / After (COD) block and choose solid · ring · horizontal in its style settings
What you can customize in this widget
ColorsTitle color, Tag color, Before background, After background, Bar color, Knob background, Knob color, Accent, Background, Box background, Box border color
Font & text sizeTitle size, Tag size, Knob size
Size & spacingHead gap, Tag radius, Bar width, Radius, Box margin, Box background size, Box radius
Layout & styleStart position, Text align, Orientation, Tag style, Label position, Knob style
Animation & effectsHover move, Hover, Animation, Shadow
Show / hide optionsHint, Show tags, On, Orig
Text, images & linksBefore image, After image, Label before, Label after, Title, Subtitle, Aspect, Aspect mobile, Fit, Frame, Tag edge, Primary, Ink, Border, Padding, Box padding, Box background image, Box overlay, Box overlay o, Box border, Key, Product, W0
কাঁচা আম থেকে নানির আচার
রোদে শুকিয়ে সরিষার তেলে রান্নার আগে ও পরে
DESIGN 13 / 16LightDotVertical
Light Before / After — Dot, Vertical
A before/after comparison — shows life before and after using your product — on a light background. Marker: dot; layout: before on top, after below.
Best forShowing the change your product makes. Works nicely for spices and masala.
Where to place itAfter the problem section.
How to use: add the BD Before / After (COD) block and choose light · dot · vertical in its style settings
What you can customize in this widget
ColorsTitle color, Tag color, Before background, After background, Bar color, Knob background, Knob color, Accent, Background, Box background, Box border color
Font & text sizeTitle size, Tag size, Knob size
Size & spacingHead gap, Tag radius, Bar width, Radius, Box margin, Box background size, Box radius
Layout & styleStart position, Text align, Orientation, Tag style, Label position, Knob style
Animation & effectsHover move, Hover, Animation, Shadow
Show / hide optionsHint, Show tags, On, Orig
Text, images & linksBefore image, After image, Label before, Label after, Title, Subtitle, Aspect, Aspect mobile, Fit, Frame, Tag edge, Primary, Ink, Border, Padding, Box padding, Box background image, Box overlay, Box overlay o, Box border, Key, Product, W0
আস্ত থেকে খাঁটি গুঁড়া
ধুয়ে, শুকিয়ে, গুঁড়া — রং কৃত্রিম নয়
DESIGN 14 / 16OutlineCircleHorizontal
Outline Before / After — Circle, Horizontal
Before/after comparison in outline boxes. Marker: circle; layout: before and after side by side.
Best forShowing the change your product makes. Works nicely for honey and gift items.
Where to place itRight after the hero.
How to use: add the BD Before / After (COD) block and choose outline · circle · horizontal in its style settings
What you can customize in this widget
ColorsTitle color, Tag color, Before background, After background, Bar color, Knob background, Knob color, Accent, Background, Box background, Box border color
Font & text sizeTitle size, Tag size, Knob size
Size & spacingHead gap, Tag radius, Bar width, Radius, Box margin, Box background size, Box radius
Layout & styleStart position, Text align, Orientation, Tag style, Label position, Knob style
Animation & effectsHover move, Hover, Animation, Shadow
Show / hide optionsHint, Show tags, On, Orig
Text, images & linksBefore image, After image, Label before, Label after, Title, Subtitle, Aspect, Aspect mobile, Fit, Frame, Tag edge, Primary, Ink, Border, Padding, Box padding, Box background image, Box overlay, Box overlay o, Box border, Key, Product, W0
চাক থেকে সরাসরি বোতলে
হ্যান্ডেল টেনে দেখুন মধুর যাত্রা
DESIGN 15 / 16DarkPillVertical
Dark Before / After — Pill, Vertical
Dark before/after comparison with strong contrast. Marker: pill; layout: before on top, after below.
Best forShowing the change your product makes. Works nicely for mustard oil, ghee and kitchen staples.
Where to place itBefore the price section.
How to use: add the BD Before / After (COD) block and choose dark · pill · vertical in its style settings
What you can customize in this widget
ColorsTitle color, Tag color, Before background, After background, Bar color, Knob background, Knob color, Accent, Background, Box background, Box border color
Font & text sizeTitle size, Tag size, Knob size
Size & spacingHead gap, Tag radius, Bar width, Radius, Box margin, Box background size, Box radius
Layout & styleStart position, Text align, Orientation, Tag style, Label position, Knob style
Animation & effectsHover move, Hover, Animation, Shadow
Show / hide optionsHint, Show tags, On, Orig
Text, images & linksBefore image, After image, Label before, Label after, Title, Subtitle, Aspect, Aspect mobile, Fit, Frame, Tag edge, Primary, Ink, Border, Padding, Box padding, Box background image, Box overlay, Box overlay o, Box border, Key, Product, W0
সরিষা থেকে ঘানি ভাঙা তেল
দেশি সরিষা আর তার খাঁটি তেল — পাশাপাশি
DESIGN 16 / 16SolidSquareHorizontal
Solid Before / After — Square, Horizontal
Before/after with solid colored panels. Marker: square; layout: before and after side by side.
Best forShowing the change your product makes. Works nicely for nuts, dry fruits and healthy snacks.
Where to place itMid-page, before reviews.
How to use: add the BD Before / After (COD) block and choose solid · square · horizontal in its style settings
What you can customize in this widget
ColorsTitle color, Tag color, Before background, After background, Bar color, Knob background, Knob color, Accent, Background, Box background, Box border color
Font & text sizeTitle size, Tag size, Knob size
Size & spacingHead gap, Tag radius, Bar width, Radius, Box margin, Box background size, Box radius
Layout & styleStart position, Text align, Orientation, Tag style, Label position, Knob style
Animation & effectsHover move, Hover, Animation, Shadow
Show / hide optionsHint, Show tags, On, Orig
Text, images & linksBefore image, After image, Label before, Label after, Title, Subtitle, Aspect, Aspect mobile, Fit, Frame, Tag edge, Primary, Ink, Border, Padding, Box padding, Box background image, Box overlay, Box overlay o, Box border, Key, Product, W0
বাজারের বাদাম বনাম আমাদের এ-গ্রেড দানা
টেনে দেখুন — দানার সাইজ আর রঙের পার্থক্য
