Add Custom CSS to Breakdance Builder

Published by Justin on August 19, 2022
Last Updated: August 19, 2022 | Reading Time: 3 minutes

When using page builders like Breakdance you get access to tons of pre-built page elements, allowing you to customize and style your site. However, sometimes the only way to apply a particular style to them is using Cascading Style Sheets (CSS). CSS gives you complete control over the look and feel of your site, and in this article, we'll show you how to add custom CSS to Breakdance Builder in 3 different ways.

What is CSS

CSS stands for cascading style sheets. It is a language used to style the look and feel of a web page. CSS can be used to control the font, color, size, and layout of text, as well as the background color, images, and borders of a web page.

CSS can be written in three different ways:

Inline CSS - Styles are applied directly to the HTML element using the style attribute.

Internal CSS - Styles are applied to the whole document, but only within the <style> element located in the <head> section.

External CSS - Styles are applied to the whole document, but only from an external CSS file.

The most common way to add CSS to a web page is by using an external CSS file. This is because it separates the content (HTML) from the presentation (CSS). It also makes it easier to reuse styles across multiple pages and makes your code easier to read and maintain.

How To Add Custom CSS Using Breakdance

Using Breakdance we have 2 ways we can add custom CSS to our site. We can either use a code block or add a global stylesheet. Since we're using WordPress, we can also use the theme customizer.

Method 1: Code Block

Adding a code block is the quickest way to add CSS to your page, but comes with limitations. To do this, click on the "Add Element" button and select the "Code Block" element. Then, paste your custom CSS and save. The biggest drawback to this method is that your CSS will only be applied to the element inside the code block. If you want to apply your CSS to multiple pages, you'll need to add the code block to each one individually. Luckily, our second method fixes this.

Custom Code block in Breakdance Builder

Method 2: Global CSS Styles

Breakdance has Global CSS styles, which allows you to add CSS that will be applied across your entire site. To do this, click on the Settings (...) tab when using the visual editor and select the "Global Settings" option. Then, create a CSS stylesheet and paste your custom CSS into the code area and save. Your CSS will now be applied to every page on your site. If you don't need your settings to be applied on every page, the first method will probably suffice.

visual representation of global CSS styled from breakdance global CSS

Method 3: WordPress Theme Customizer

Since you're using WordPress, you can also add custom CSS to your site using the theme customizer. To do this, go to Appearance > Customize and click on the "Additional CSS" tab. Then, paste your custom CSS into the code area and save. Your CSS will now be applied to your entire site.

This is the easiest way to add CSS to your WordPress site but will be on every single page, so it's generally discouraged. Since you're using Breakdance, you should try to keep all your global styling within the breakdance builder.

Conclusion

Adding CSS to your site is a great way to customize and control the look and feel of your web page. In this article, we showed you three different ways to add custom CSS to Breakdance Builder. Using these methods, you'll be able to apply your CSS to only the elements you want and keep your website clean and organized. Do you have any questions about adding custom CSS to Breakdance Builder? Let us know in the comments below!

Written by Justin
Justin is the founder of Gold Penguin, a web design and marketing agency that helps businesses achieve their online goals. Justin has a passion for web design and marketing, and he loves working with clients to help them grow their businesses.

Comments

Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
Made with 💛 by Gold Penguin © 2022