Created
December 20, 2017 14:35
-
-
Save diggeddy/29d79d68eb9b130f138e9d34641ec832 to your computer and use it in GitHub Desktop.
Using Pseudo elements to add additional content to Elementor Form Widget
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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