Like our free content? Then you'll love our exclusive Club!
Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!
Slim Divi Optin with Field Icons Free Divi Layout.
This free Divi layout uses the native Divi optin module to create a slim optin form with icons next to the name and email fields.
View the demo and download this free layout plus 24 other awesome free Divi resources by subscribing below.
Be sure to view the ‘Read Me’ file in the download package for full instructions.
If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content. 
Michelle X
Wow, the skinny form worked like a charm!! I had given up on other tutorials as to how to do this. Thank you so much
Where do the Icons come from? Do I need to add something? Everything looks great, the icons do not show up.
The icons are from the ETModules font that is included with Divi. You may want to confirm the backslash didn’t get stripped from the code. For example, the icon for the envelope should look like this in the CSS:
.ds-advent-4 .et_pb_newsletter_form p:nth-of-type(2):before {
content: ‘\e076’;
}
If the backslash was removed and you only see ‘e076’ just add it back in and do the same for the other icon.
You also need to add this to the below CSS otherwise the icons are out of alignment:
.et_pb_newsletter_field {
margin-bottom: 0vw !important;
padding-left: 0vw !important;
}
Yep, updates will do that, thanks!
I can’t get it slim, i imported exactly like u described it. Can somebody help me?
You can add the following to your child theme stylesheet or Divi > Theme Options > General > Custom CSS:
.ds-advent-4 .et_pb_newsletter_form, .ds-advent-4 .et_pb_newsletter_description {
width: 100% !important;
}
.et_pb_newsletter_description, .et_pb_newsletter_form {
float: none;
display: table;
margin: auto;
width: 100%;
}
@media (min-width: 728px){
.ds-advent-4 .et_pb_newsletter_form p {
margin-right: 1% !important;}
.et_pb_newsletter .et_pb_newsletter_fields>* {
flex-basis: 31% !important;}
}
@media (max-width: 727px) {
.et_pb_newsletter .et_pb_newsletter_fields>* {
flex-basis: 100% !important;}
}
.et_pb_newsletter_form input[type=password], .et_pb_newsletter_form input[type=text], .et_pb_newsletter_form p.et_pb_newsletter_field input[type=text], .et_pb_newsletter_form p.et_pb_newsletter_field textarea, .et_pb_newsletter_form select, .et_pb_newsletter_form textarea {
padding-left: 3.5em !important;
}
The lastest Divi update has broken the css for this form. Any chance you’ll fix and provide new css soon?
You can add the following to your child theme stylesheet or Divi > Theme Options > General > Custom CSS:
.ds-advent-4 .et_pb_newsletter_form, .ds-advent-4 .et_pb_newsletter_description {
width: 100% !important;
}
.et_pb_newsletter_description, .et_pb_newsletter_form {
float: none;
display: table;
margin: auto;
width: 100%;
}
@media (min-width: 728px){
.ds-advent-4 .et_pb_newsletter_form p {
margin-right: 1% !important;}
.et_pb_newsletter .et_pb_newsletter_fields>* {
flex-basis: 31% !important;}
}
@media (max-width: 727px) {
.et_pb_newsletter .et_pb_newsletter_fields>* {
flex-basis: 100% !important;}
}
.et_pb_newsletter_form input[type=password], .et_pb_newsletter_form input[type=text], .et_pb_newsletter_form p.et_pb_newsletter_field input[type=text], .et_pb_newsletter_form p.et_pb_newsletter_field textarea, .et_pb_newsletter_form select, .et_pb_newsletter_form textarea {
padding-left: 3.5em !important;
}
Hi Michelle
The problem Im having is the subscribe to download button doesnt change into a download button. I have subscribed several times and cant seem to get past that bit.
It takes a moment for the page to refresh – just hit the button once and be patient, you’ll see it refresh.
The Download doesn’t work!
I justed tested it and it works just fine. What issue are you having specifically?
I was also unable to download. I type in my details then get a message that says: “Subscription Error: An error occurred, please try later.”
I’ve tried in both Firefox and Chrome + have also cleared my browser cache but I still get the error message.
Sorry but we cannot replicate this issue
PS – The “Say Whaaat” subscription button works to download all 25 items, but when I clicked on an individual download button – like selecting to download only the Slim Divi Optin – I kept getting the error message.
They are not available to download individually