What you’ll learn
- Add Extra CSS to editor elements
- Add Wrapper CSS to editor elements
- Add CSS to the Form
- Add CSS to the Outer Campaign
Digioh’s Campaign Editor is built to give you a ton of control without knowing any code – but with a little CSS, you can unlock even more customization in your pop-ups, forms, quizzes and other onsite experiences. There are several ways to add CSS to elements in the editor that we will discuss below.
Add CSS to Elements in the Editor
Extra CSS Styles
Text, Buttons, Images and HTML elements each have a section to add Extra CSS Styles. This lets you change the look of your element beyond the native options.
Enter the CSS Property and Value individually into the inputs. For example, to add “letter-spacing: 3px;” enter “letter-spacing” in the CSS Property, and “3px” in the Value field.
Wrapper CSS
Wrapper CSS is a container around the component, that lets you apply CSS like absolute positioning, margins, padding, or z-index.
For example, if you add z-index : 0 to a wrapper CSS, this will place the image behind a text and any other element.
Another example is using left : 10px to ensure an elements always sits 10px off the left side of the campaign.
Add CSS to Form Fields with Form CSS
While options like height and border color are available in the editor, sometimes you may need something more specific.
To add CSS to a specific ID or class of a form field, preview the campaign and inspect the element with your browser’s Dev Tools to get the ID or class of that particular element.
Note: Make sure you get the class or IDs from the preview, rather than the editor. You may have to Save and Preview to see the changes.
For example, to add a 2px bottom border to a specific field, insert the following code:
#[FIELD_ID_HERE] {
border-bottom: 2px solid black;
}
This will add a 2px black border to the bottom of that field.
You can also add styles to all of the same type of element, like all text fields or buttons.
For example, to remove the outline of all text fields when selected, add this code:
input[type=text] {
outline: none;
}
Note: If you don’t see changes, mark your new styles as !important.
Add CSS to the Outer Campaign
To add CSS that applies to the campaign itself, go to the Settings dropdown and open the Campaign Settings.
Towards the bottom is an Extra CSS Styles field. Here, you can add extra details like a shadow or margins.
Enter the information as you would normally in a stylesheet, separated by semicolons.
Save and preview your campaign to view your changes.
Additional Notes:
HTML Blocks
To maintain organization and consistency, we recommend using the dedicated CSS spaces above when customizing your campaign. However, you can also use an HTML block to add <style> code into for more custom needs.
Stylesheets
If you’re inclined to use CSS to set a lot of your styling, you can also link an external stylesheet. This stylesheet would need to reference the relevant IDs and classes from the campaign (see above “Add CSS to Form fields with Form CSS” section for details.).
To link to a CSS file for your campaign to reference, upload the CSS file to your Upload Files section.
Then select Upload Stylesheet option
Then, link to your stylesheet in an HTML block.
Depending on your CSS skills and knowledge, you can really push the envelope on your campaign designs!