Woorise provides an intuitive landing page and form builder to design your landing pages with ease. However, for advanced customization, you may want to go beyond the built-in options. Adding custom CSS allows you to fine-tune styles, adjust layouts, and create unique design elements tailored to your brand.
How to add custom CSS
- In the Pages menu, select the campaign you want to edit.
- In the right sidebar, find the CSS section and click the Edit CSS button.
- You’ll be taken to the CSS editor, where you can add custom styles in the left sidebar.
- As you enter your CSS rules, they are applied automatically, allowing you to preview the changes in real time on the right side of the screen. You can also use the icons at the bottom to switch the preview between desktop, tablet, and mobile devices.
You can use your browser’s inspector to identify the correct CSS selectors for customization. If you’re not familiar with CSS or HTML, you may consider hiring a Woorise expert to assist you with advanced styling.
Please note that the CSS rules you add are applied site-wide and affect all campaigns. If you want to style a specific campaign, you’ll need to use a targeted CSS rule for that campaign.
Common CSS styles
Target a specific campaign
To target a specific campaign, you can use the .campaign-123 selector within the <body> tag, replacing 123 with your campaign’s unique ID. You can find your campaign’s ID in the post parameter of the browser’s URL when editing the page in the Create tab.
.campaign-123 {
background-color: #000;
}Transparent body background
.campaign-123 {
background-color: transparent;
}