Hello,
I have some code created with visual composer inside a page, adding some CSS, custom bg etc. This part works very well, but I want to transfer this code inside a widget that will be placed on the main theme sidebar so it works for the whole site. Unfortunately this isn’t plain html so it is not working.
How can I achieve that?
The code I have from the visual composer is:
—————————–
[vc_column_text css=".vc_custom_1447174742994{padding-top: 90px !important;padding-right: 20px !important;padding-bottom: 20px !important;padding-left: 20px !important;background-image: url(http://www.projectbebest.com/wp-content/uploads/2015/10/sidebar-form-optin_plain.jpg?id=1151) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}"]
Want the latest articles in your mailbox weekly? Subscribe below!
[mc4wp_form]
We respect your privacy 100%. We don't spam. Ever!
[/vc_column_text]
———————–
Thanks
Hello,
You can use an alternative method to add your code to the sidebar. I see it’s just html and css. You can add html directly inside a text box in the sidebar and create a simple div-based content and assign custom classes so you can target them with css afterwards.:
<div class="custom_widget">
<p>Want the latest articles in your mailbox weekly? Subscribe below!</p>
<div class="custom_widget_form">[mc4wp_form]</div>
<p>We respect your privacy 100%. We don't spam. Ever!</p>
</div>
An then simply create your custom css and add it in the theme panel->custom css box.
We use a chrome extension called live css to create our css code and then move it to the theme panel.
I hope this helps.
Thank you!
Hi, thanks for your fast reply but I can’t get it to work.
I try to make this class on theme’s panel:
#newsletter {
padding-top: 90px !important;
padding-right: 20px !important;
padding-bottom: 20px !important;
padding-left: 20px !important;
background-image: url("http://www.projectbebest.com/wp-content/uploads/2015/10/sidebar-form-optin_plain.jpg") !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;}"
}
and then I go inside the widget to insert this code:
<p id="newsletter" style="text-align: center;">Want the latest articles in your mailbox weekly? Subscribe below! [mc4wp_form] We respect your privacy 100%. We don't spam. Ever!</p>
but it won’t work. Any idea on what I am doing wrong?
Could you elaborate a bit more please?
Thanks a lot 🙂
Hello,
Try using this HTML code:
<div id="newsletter" style="text-align: center;">Want the latest articles in your mailbox weekly? Subscribe below! <p>[mc4wp_form]</p> We respect your privacy 100%. We don't spam. Ever!</div>
Use the same CSS and the result will be this: http://screencast.com/t/VpykdJnLdZ
