If you would like to hide elements on your landing page that you aren't able to remove via Site Builder, you can do so by customizing the theme for your site following the instructions below.
How to Hide Landing Page Elements
- Using Chrome, right-click on the page where you have an element you'd like to hide and choose Inspect, which opens up Chrome Developer Tools.
- On the page, use the shortcut Command + Shift + C or click on the arrow icon in the upper right corner of the toolbox to enable the element selector.
- Next, highlight the element you'd like to hide on the page to display the element in the developer toolbox
- Copy the class. In the example above, the class would be course-card__price
- Head to your theme code by going to Design your Site > Theme Library > Ellipses menu > Edit code.
- In the theme editor, go to Styles > _overrides.scss.
- On a new line, add in the following:
.<insert-class-name-here> {
display: none !important;
}
Using the example above, that would look something like this:
.course-card_price {
display: none !important;
} - Click Save.
More on Code Customizations
We do not generally provide support for code customizations, however we have created these resources to help with migrating from a Legacy theme to Site Builder.
If you are looking for any further assistance with custom code, we have some other common code customization instructions here. We also have some wonderful freelance web developers on our Thinkific Experts page who you can reach out to if you need! There's also the Thinkific Store on Fiverr, for smaller, quicker jobs.