Please scroll to bottom and click "Try this" to see preview of builder setting.

Front-end Builder Elements

Building Professional Sites With Ease

Heading

From h1 to h6 with many options (text align, font, color, border...) to make the heading as you want.

H1 Heading normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit sed diam vitae rhoncus. Mauris tempor interdum nibh eget vehicula. In vulputate, ipsum a dapibus scelerisque, eros enim euismod erat, at condimentum risus nisl eu ligula.

H2 Heading normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit sed diam vitae rhoncus. Mauris tempor interdum nibh eget vehicula. In vulputate, ipsum a dapibus scelerisque, eros enim euismod erat, at condimentum risus nisl eu ligula

H3 Heading normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit sed diam vitae rhoncus. Mauris tempor interdum nibh eget vehicula. In vulputate, ipsum a dapibus scelerisque, eros enim euismod erat, at condimentum risus nisl eu ligula

H4 Heading bold

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit sed diam vitae rhoncus. Mauris tempor interdum nibh eget vehicula. In vulputate, ipsum a dapibus scelerisque, eros enim euismod erat, at condimentum risus nisl eu ligula. Integer non urna sit amet ipsum elementum tincidunt et in tellus. Duis quis rhoncus felis, nec pretium tortor
H5 Heading bold
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit sed diam vitae rhoncus. Mauris tempor interdum nibh eget vehicula. In vulputate, ipsum a dapibus scelerisque, eros enim euismod erat, at condimentum risus nisl eu ligula
H6 Heading bold

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit sed diam vitae rhoncus. Mauris tempor interdum nibh eget vehicula. In vulputate, ipsum a dapibus scelerisque, eros enim euismod erat, at condimentum risus nisl eu ligula. Integer non urna sit amet ipsum elementum tincidunt et in tellus. Duis quis rhoncus felis, nec pretium tortor

Heading align

Heading align left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit sed diam vitae rhoncus. Mauris tempor interdum nibh eget vehicula. In vulputate, ipsum a dapibus scelerisque, eros enim euismod erat, at condimentum risus nisl eu ligula. Integer non urna sit amet ipsum elementum tincidunt et in tellus. Duis quis rhoncus felis, nec pretium tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vitae tincidunt sapien. Quisque sed libero malesuada, iaculis massa eu, consequat magna. Nam volutpat quis metus sit amet vehicula. Duis sit amet mollis mauris. Donec ultrices nunc non leo tempor, sagittis interdum ipsum bibendum.


Heading align center

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit sed diam vitae rhoncus. Mauris tempor interdum nibh eget vehicula. In vulputate, ipsum a dapibus scelerisque, eros enim euismod erat, at condimentum risus nisl eu ligula. Integer non urna sit amet ipsum elementum tincidunt et in tellus. Duis quis rhoncus felis, nec pretium tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vitae tincidunt sapien. Quisque sed libero malesuada, iaculis massa eu, consequat magna. Nam volutpat quis metus sit amet vehicula. Duis sit amet mollis mauris. Donec ultrices nunc non leo tempor, sagittis interdum ipsum bibendum.


Heading align right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit sed diam vitae rhoncus. Mauris tempor interdum nibh eget vehicula. In vulputate, ipsum a dapibus scelerisque, eros enim euismod erat, at condimentum risus nisl eu ligula. Integer non urna sit amet ipsum elementum tincidunt et in tellus. Duis quis rhoncus felis, nec pretium tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed vitae tincidunt sapien. Quisque sed libero malesuada, iaculis massa eu, consequat magna. Nam volutpat quis metus sit amet vehicula. Duis sit amet mollis mauris. Donec ultrices nunc non leo tempor, sagittis interdum ipsum bibendum.

Set border for heading

Solid border

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit sed diam vitae rhoncus. Mauris tempor interdum nibh eget vehicula

Dotted border

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit sed diam vitae rhoncus. Mauris tempor interdum nibh eget vehicula

Dashed border

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit sed diam vitae rhoncus. Mauris tempor interdum nibh eget vehicula

Middle solid border

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit sed diam vitae rhoncus. Mauris tempor interdum nibh eget vehicula

Middle dotted border

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit sed diam vitae rhoncus. Mauris tempor interdum nibh eget vehicula

Middle dashed border

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit sed diam vitae rhoncus. Mauris tempor interdum nibh eget vehicula

Choose any color you want

H2 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit sed diam vitae rhoncus. Mauris tempor interdum nibh eget vehicula

H2 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit sed diam vitae rhoncus. Mauris tempor interdum nibh eget vehicula

H2 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit sed diam vitae rhoncus. Mauris tempor interdum nibh eget vehicula

H2 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit sed diam vitae rhoncus. Mauris tempor interdum nibh eget vehicula

H2 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit sed diam vitae rhoncus. Mauris tempor interdum nibh eget vehicula

H2 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit sed diam vitae rhoncus. Mauris tempor interdum nibh eget vehicula

Builder settingTry this

  • Heading: from h1 to h6
  • Heading text: heading text content
  • Text align: align of heading (left, center, right)
  • Font size: font size of Heading
  • Color: color of Heading
  • Font bold: set font bold for heading
  • Font Italic: set font italic for heading
  • Uppercase: set uppercase for heading
  • Show border: Set border for heading
  • Style: border style (solid, dotted, dashed)
  • Position: border position (bottom, center)
  • Border color: color of border
  • Border width: thickness of border
  • Margin top: the distance between text and border (for bottom position only)
Copyright © 2013-present Magento, Inc. All rights reserved.