Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save diggeddy/29d79d68eb9b130f138e9d34641ec832 to your computer and use it in GitHub Desktop.
Save diggeddy/29d79d68eb9b130f138e9d34641ec832 to your computer and use it in GitHub Desktop.
Using Pseudo elements to add additional content to Elementor Form Widget
/* Elementor - additional content on Form Widget */
/* Basic code to add text content via Pseudo elements */
.elementor-form-fields-wrapper >div:nth-child(1) {
display: flex;
flex-flow: column;
align-items: left;
}
.elementor-form-fields-wrapper >div:nth-child(1):before {
content: "PUT YOUR TEXT CONTENT HERE";
}
/* Advanced code to add background image and title via Pseudo elements */
.elementor-form-fields-wrapper >div:nth-child(1):before {
content: "My Additional Content goes here";
font-size: 20px; /* styling of font */
font-weight: 600;
color: white;
display: block; /*styling the background and adding an image */
width: 100%;
padding: 50px 50px 50px 50px;
background-image: url("IMAGE URL GOES HERE");
background-position: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment