SIGN UP
FEBRUARY 25, 2022
CSS Class For Blocks
You can now assign a CSS class to blocks in the Settings panel. This feature simplifies block editing: You can define a class for the block and then specify its title in HTML.

Below you'll find some examples and a step-by-step guide on how to use the new feature.
Example #1
Gradient Titles
ABOUT US
Renner Yoga offers unique yoga classes for people of all skill levels. We will introduce you to a new way of life and feelings.

Block AB501

How to make it
Step 1
Add a block with a heading, e.g. AB501.

Step 2
  • Open the block settings, select Add CSS class name;
  • Set a name for the style, e.g. "uc-about."

Step 3
  • Add a T123 block ("Embed HTML Code");
  • Copy the code below and paste it to the T123 block.

<style>
.uc-about .t-title {
        background: linear-gradient(45deg, #e9474a 0%, #70358f 50%, #1e4be2 100%);
        background: -webkit-linear-gradient(45deg, #e9474a 0%, #70358f 50%, #1e4be2 100%);
        -webkit-background-clip: text;
        -moz-background-clip: text;
        -webkit-text-fill-color: rgba(255, 255, 255, 0); 
        -moz-text-fill-color: rgba(255, 255, 255, 0);
}
</style>
→ Save the changes and publish the page.

Done!
Example #2
Images with Rounded Corners
Some Words About Us
We are an interior design studio based in Wales. We work in three contemporary design styles: functional minimalism, eco, and modernist nouveau. We have a database of designers and architects inside and outside the company.

Block AB903

How to make it
Step 1
Add a block with the photo, e.g. AB903.

Step 2
  • Open the block settings, select Add CSS class name;
  • Set a name for the style, e.g. "uc-about."

Step 3
  • Add a T123 block ("Embed HTML Code");
  • Copy the code below and paste it to the T123 block.

<style>
.uc-about .t-bgimg {
        border-radius: 40px;
}
</style>
→ Save the changes and publish the page.

Done!
Example #3
Hover Effect for Buttons
Example #3
Hover Effect for Buttons
Only for desktop versions
Hover over button
High Quality
We are a leading firm in providing quality and value to our customers. Each member of our team has at least 5 years of legal experience. We like what we do.
Learn more
Good Support
Our managers are always ready to answer your questions. You can call us during the weekends and at night. You can also visit our office for a personal consultation.
Learn more

Block FR301

How to make it
Step 1
Add a block with a button, e.g. FR301.

Step 2
  • Open the block settings, go to the "Button" tab;
  • Set the initial color for the button text under Text Color. No need to specify border and background color;
  • Click "Add CSS Class Name" and set a name for the style, e.g. "uc-about."

Step 3
  • Add a T123 block ("Embed HTML Code");
  • Copy the code below and paste it to the T123 block.

<style> 
.uc-features .t-btn { 
    box-shadow: inset 0 0 0 2px #1f5bff; 
    position: relative; 
    transition: color 0.25s; 
    box-sizing: border-box; 
} 
 
.uc-features .t-btn::before, 
.uc-features .t-btn::after { 
    content: ''; 
    position: absolute; 
    border: 2px solid transparent; 
    width: 0; 
    height: 0; 
    top: 0; 
    left: 0; 
    box-sizing: inherit; 
} 
 
.uc-features .t-btn:hover { 
    color: #60daaa !important; 
} 
 
.uc-features .t-btn:hover::before, 
.uc-features .t-btn:hover::after { 
    width: 100%; 
    height: 100%; 
} 
 
.uc-features .t-btn:hover::before { 
    border-top-color: #60daaa; 
    border-right-color: #60daaa; 
    transition: width 0.15s ease-out, height 0.15s ease-out 0.15s; 
} 
 
.uc-features .t-btn:hover::after { 
    border-bottom-color: #60daaa; 
    border-left-color: #60daaa; 
    transition: height 0.15s ease-out, width 0.15s ease-out 0.15s; 
} 
</style>
→ Save the changes and publish the page.

Done!
Please note that modifying the code is recommended only for users experienced with CSS. Tilda does not provide support for any issues related to third-party code.
Made on
Tilda