SIGN UP

CSS Class for Website Elements

A handy tool for modifying design elements in Zero Block
You can add a CSS class name for any Zero Block element from the context menu. This feature simplifies elements editing: you can define a class for the title, image, gallery, or any other element, and then specify its name 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
New feature
Cases
Team
Contacts
We develop services to help people run their businesses and improve their management systems
How to make it
Step 1
Create a design in Zero Block

Step 2
  • Right-click the title, select Add CSS class name
  • Set a name for the style, such as "gradient", for example

Step 3
  • Add the HTML element to Zero Block
  • Copy the code below and paste it into the HTML element using the Edit Code button

<style>
.gradient {
        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);
}

.gradient .tn-atom {
    display: inline;
}
</style>
Save the changes in Zero Block and publish the page

Done!
EXAMPLE # 2
Custom Gallery Arrows
INTERIOR

DESIGN
STUDIO
Let’s make your home a better place
How to make it
Step 1
Create a design in Zero Block

Step 2
  • Right-click the gallery, select Add CSS class name
  • Set a name for the style, such as "gallery", for example

Step 3
  • Add the HTML element to Zero Block
  • Copy the code below and paste it into the HTML element using the Edit Code button

<style>
.gallery .t-null__slds-arrow {
 opacity: 0;
}

.gallery .t-slds__arrow-left {
  background: url('https://static.tildacdn.com/tild3139-6463-4139-b830-653761616437/left_custom_arrow.svg');
}

.gallery .t-slds__arrow-right {
  background: url('https://static.tildacdn.com/tild6262-3932-4634-b166-373237616466/right_custom_arrow.svg');
}

.gallery .t-slds__arrow {
    background-size: 50px 50px;
   background-repeat: no-repeat;
   background-position: center;
 width: 75px !important;
    height: 75px !important;
   left: -40px !important;
}

@media (max-width: 480px) { 
 .t396__elem .t-slds__arrow {
    width: 40px !important;
     height: 40px !important;
    background-size: 30px 30px;
    left: -20px !important;
 }
}
</style>
Save the changes in Zero Block and publish the page

Done!
How to upload your own arrows to the gallery
To upload your own arrows to the gallery, add the links to the left and right arrow images as the SVG files to HTML code. To do this, upload images to any cloud service or to any Tilda page. Then open the uploaded image in a new tab and copy the link.

Example of the links used in the code above
Left arrow: https://static.tildacdn.com/tild3139-6463-4139-b830-653761616437/left_custom_arrow.svg
Right arrow: https://static.tildacdn.com/tild6262 -3932-4634-b166-373237616466 / right_custom_arrow.svg
EXAMPLE # 3
Adding a Blur Effect Behind Your Text
TRIVIA
Cases
Team
Contacts
Breathtaking content starts with your own experience, not only exploring others' thoughts
Think of the text as a starting point for your own words
Step 1
Create a design in Zero Block

Step 2
  • Right-click the shape, select Add CSS class name
  • Set a name for the style, such as "blur", for example

Step 3
  • Add the HTML element to Zero Block
  • Copy the code below and paste it into the HTML element using the Edit Code button

<style>
.blur {
        backdrop-filter: blur(20px);
        border-radius: 20px;
        -webkit-backdrop-filter: blur(20px);
}
</style>
Save the changes in Zero Block and publish the page

Done!
There are several ways of adding HTML code to Tilda
If you want to add a code to a single page, do this using the HTML element, or block T123. If you want to use the code for the entire website or several pages, add it to the header.
Set complex gradients to the title, modify gallery arrows, buttons, and more. Your creativity is limitless.
Made on
Tilda