Custom Block Title

Learn how to change the individual block title properties.


First, you have to check the block class. You can use the browser site inspector.

E.g for: Block #5 it will be -> .rui-fp-block--5

  • Breakpoints:

      xs: 0,
      sm: 320px,
      md: 768px,
      lg: 1100px,
      xl: 1300px,
      xxl: 1900px

Sample SCSS code to add

Advanced -> Raw SCSS

/* Block #5 */
.rui-fp-block--5 {
	.rui-block-title {
		@include media-breakpoint-up(lg) {
		color: red;
		@include media-breakpoint-only(md) {
		color: purple;
		@include media-breakpoint-between(xs, sm) {
		color: blue;


Last updated