Community Forums › Forums › Archived Forums › Design Tips and Tricks › Horizontal Opt-in box in footer of Parallax Pro
Tagged: css, enews, horizontal opt in, parallax-pro, style trump
- This topic has 11 replies, 6 voices, and was last updated 10 years, 6 months ago by
odellmccants.
-
AuthorPosts
-
March 17, 2014 at 12:49 pm #95352
ashjoielee
MemberHi all,
Can someone guide me on how to create the horizontal opt-in such as what Brain Gardner has in his footer in the Parallax Pro?I've tried numerous things, including just adding my aweber opt in code to the footer in a widget. I'm not sure what needs to change in the css?
Thank you!
March 17, 2014 at 5:20 pm #95392kristabradford
MemberGreat question . . . I love to know as well!
Thank you!
Krista Bradford
CEO The Good Search | IntelleratiMarch 18, 2014 at 7:27 am #95452ashjoielee
MemberI followed Sridhar's post on "Horizontal Opt-in with a full width background image in Genesis"...I got close to what I wanted, but his tut is on the opt in being in the middle of the full width image that parallax uses. His tut's are so helpful, but I really want a small thin bar that doesn't use an entire section.
I think this will become more the norm as the new themes are great for this style. Wishing aweber would adjust to follow suit!
Anyway...hoping someone can post how to do this! 🙂Ash
March 18, 2014 at 9:02 am #95489Brad Dalton
ParticipantYou could inspect the CSS using Firebug from Brian Gardners site.
Looks like he's using the MailChimp Embedded form code.
March 18, 2014 at 3:55 pm #95564seanaske
MemberCan anyone find a demo of what it looks like or it being used on a site? I went back to the demo theme and it looks like it is gone. I'm driving myself crazy thinking I saw something that didn't exist.
March 18, 2014 at 4:19 pm #95568ashjoielee
MemberI think mailchimp does allow for horizontal opt-in forms. Surprised aweber doesn't.
Sites who have this are: minimadesigns.com
and briangardner.com (in footer)March 18, 2014 at 7:11 pm #95584Tom
ParticipantThe horizontal mail CTA on Brian Gardner's (current) site appears to be a MailChimp plugin with text. The text is floated left, the input form is floated right. (This is in his 'Altitude' theme.)
Mimimadesigns.com uses a widget area (an entire section, "home-section-2") in Parallax, apparently also with a MailChimp Widget ("mc-embedded-subscribe-form"). It is styled to be horizontal with CSS. You can do this too, pretty much in any widget.
@kristabradford - I know you are using Parallax ... try this. Add the Enews Extended widget. It's free, baked for Genesis, has excellent support and your theme already has CSS for it. it works with Feedburner, MailChimp, Aweber, FeedBlitz, Constant Contact and others.If you wanted to add a CTA for your mailing list after every post, add the Enews widget to the After Entry widget area, then add this bit of CSS to the bottom of style.css:
#subbox,.enews-subbox { width: 29%; } #subbutton { width: 10%; float: right; }
This is for the widget setup with FirstName, LastName, Email and the Go button. It may need some minor tweaks for media queries or if you use a different input field setup.
@ashjoielee and @seanaske - we're going to need to know more about what theme(s) you're using, but try the instructions here and tweak them as needed. This should work for any after-entry widget area, and should need only minor adjustments for other widget areas.
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]March 20, 2014 at 3:16 pm #95882seanaske
MemberThanks Tom. I appreciate the run down on the options. I'll give it a shot and see what I can get to work. Just an FYI, I'm looking at using Streamline Pro for http://www.eastphoenixhomes.com and then possible the parallax for another site.
March 21, 2014 at 12:52 pm #95976ashjoielee
MemberI give up! I'm using Parallax pro...tried everything to get opt in in a horizontal row. Not sure what CSS to copy/add from other sites.
What I have now is using Magic Action box and it has horizontal CSS added--still not displaying right. 🙁
It's at: ashjoielee.com (in footer)
March 21, 2014 at 2:41 pm #95986Tom
Participant@ashjoielee : Try this
.mab-field-name, .mab-field-email, .mab-field-submit { width: 30% !important; float: left; } .userstyle-1.magic-action-box .mab-main-action-wrap form input[type="submit"] { margin-top: 0px !important; }
Adjust as necessary for padding, margins, media queries.
You may have to install Genesis Style Trump to get your style sheets to play nice with each other.
http://wordpress.org/plugins/genesis-style-trump/
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]March 21, 2014 at 3:16 pm #95989Brad Dalton
ParticipantJuly 26, 2014 at 9:00 pm #115946odellmccants
MemberMagic Action Box plugin! I have been struggling with this on Parallax Pro as well. Magic Action Box instantly and easily gave me what I've been trying to do. i'm still learning it but it does the job.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.