Adding a CSS Class to the Wrapping HTML Element in Avada

Table of Contents

1. Fundamental Concepts
2. Usage Methods
3. Common Practices
4. Best Practices
5. Conclusion
6. References

Fundamental Concepts

What is a CSS Class?

A CSS class is a selector that allows you to apply a set of styles to one or more HTML elements. You can define a class in your CSS file using the following syntax:

.my-custom-class {
    color: red;
    font-size: 16px;
}

In the above example, the class my-custom-class has been defined with a red text color and a font size of 16 pixels.

Wrapping HTML Element in Avada

In Avada, a wrapping HTML element is an element that encloses other elements. For example, a div element can be used as a wrapper for other elements like p, h1, etc. Adding a CSS class to a wrapping element allows you to style all the enclosed elements in a unified way.

Usage Methods

Method 1: Using the Avada Builder

1. Edit the Page: Log in to your WordPress dashboard, go to the page you want to edit, and click on the “Edit with Avada Builder” button.
2. Select the Wrapping Element: Click on the wrapping element (e.g., a section or a column) for which you want to add a CSS class.
3. Open the Element Settings: Look for the settings icon of the selected element and click on it.
4. Add the CSS Class: In the element settings, find the “Advanced” tab. Under the “CSS Classes” field, enter the name of your custom CSS class (e.g., my-custom-class).
5. Save the Changes: Click the “Save” button to apply the changes.

Method 2: Using Custom CSS

If you prefer to add the class directly in the CSS code, you can follow these steps:

1. Locate the Element: Inspect the HTML code of your page using your browser’s developer tools to find the wrapping element’s ID or other unique identifier.
2. Add the Class in CSS: Open your theme’s custom CSS file (usually found in the Avada theme options under “Custom CSS”). Add the following code:

#element-id {
    &.my-custom-class {
        /* Your custom styles here */
        background-color: lightblue;
    }
}

In the above example, #element-id should be replaced with the actual ID of the wrapping element.

Common Practices

Styling Multiple Elements

You can use a single CSS class to style multiple wrapping elements. For example, if you have multiple sections that you want to have the same background color, you can add the same class to all those sections.

.my-section-class {
    background-color: #f0f0f0;
}

Responsive Design

When adding a CSS class, consider making your styles responsive. You can use media queries to apply different styles based on the screen size.

.my-custom-class {
    font-size: 16px;
}

@media (max-width: 768px) {
    .my-custom-class {
        font-size: 14px;
    }
}

Best Practices

Use Descriptive Class Names

Choose class names that are descriptive and meaningful. For example, instead of using class1, use featured-section or highlighted-column. This makes your code more readable and easier to maintain.

Test Your Styles

Before publishing your changes, test your styles on different devices and browsers to ensure they look and function as expected.

Keep the CSS Clean

Avoid adding unnecessary styles to your classes. Keep your CSS code organized and modular.

Conclusion

Adding a CSS class to the wrapping HTML element in Avada is a powerful technique that allows you to customize the appearance and functionality of your website. By understanding the fundamental concepts, using the appropriate usage methods, following common practices, and adhering to best practices, you can create a more unique and visually appealing website. Whether you are a beginner or an experienced developer, these tips will help you make the most of CSS classes in Avada.

References

• Avada Documentation
• MDN Web Docs - CSS Classes

• ←Previous
• Next→