HTML is used to structure the content of a website, while CSS (Cascading Style Sheets) controls how that content looks and behaves. Together, HTML and CSS provide the foundation for designing webpages.
In Zoomforth, you generally don't need to work directly with HTML or CSS because the platform handles most of the design and styling for you. However, if you're developing a custom theme or need to apply a specific design, you can use CSS classes to add custom styling to your site.
For a video walkthrough and examples, see Introduction to CSS Classes in Zoomforth.
Note: Adding and using CSS classes is an advanced web design technique. You should have a working knowledge of CSS and custom theme development before using this feature.
What are CSS classes?
A CSS class is a name that you can assign to one or more elements on your site. You can then define that class in your theme's Custom CSS to apply a specific style or behavior.
Zoomforth allows you to add CSS classes to:
Subpages
Sections
Tiles
You can add multiple class names to an element. Once a class is defined in your custom CSS, you can reuse it across other elements to apply the same styling.
Add a CSS class
The following example shows how to add a hover effect to a section.
Step 1: Add the CSS class to a section
In the Site Editor, select the section you want to customize.
In the left editing panel, locate the CSS Classes field.
Enter
section-hover-effectand press Enter.Confirm that the class name appears in the field.
Save your site and click Publish.
Step 2: Define the class in Custom CSS
Go to the Themes dashboard.
Locate the theme used by your site.
Open the Theme Editor.
Select Custom CSS.
Add the following CSS:
.section-hover-effect:hover { background-color: red; }6. Save your custom CSS and click Publish.
Step 3: Test the effect
Open your live site and scroll to the section where you added the class. When you move your cursor over the section, its background should change to red.
Reuse a CSS class
One of the benefits of CSS classes is that you can reuse them across multiple elements.
For example, if you want another section to have the same hover effect:
Select the section in the Site Editor.
Add
section-hover-effectto the CSS Classes field.Save and publish your site.
The second section will now use the same hover effect without requiring additional CSS.
Why use CSS classes?
CSS classes allow you to define a style once and apply it to multiple elements. This makes it easier to maintain consistent designs across your site and reduces the amount of custom CSS you need to write.
For example, you could create a CSS class for a specific hover effect and apply it to multiple tile images. Instead of writing separate CSS for every tile, simply add the same class to each tile you want to style.
This approach allows you to create reusable, consistent styles that can be applied to different parts of your site.
Need Help?
Contact Zoomforth Customer Support through the in-app chat or email support@zoomforth.com.