CODEWITHSUNDEEP
htmlcsswordpress
David
David

Reputation: 111

How do I add inline CSS into the Wordpress Visual Composer?

I might be asking the wrong question (I'm not a coder), but I'm attempting to paste HTML and the inline stylesheet into the text-side (HTML-side) of the Wordpress Visual Composer to create an email layout, and the finished product of that is the entire stylesheet written out above the un-styled HTML layout, so I'm assuming inline stylesheets are not supported in this composer.

HTML view inside Visual Composer Visual view inside Visual Composer Broken email

Some back story for clarity, I'm using the plugin 'Download After Email' which only provides the standard Wordpress visual composer in order to create the email a user receives once they 'sign up'. This seemingly limits me to either jazzing up some text a little bit like I was using Microsoft Word (which isn't sufficient for a brand-focused business), or using raw standalone HTML, which isn't really sufficient for a properly formatted template.

Are there any plugins which may assist in adding CSS styling here that will work once it's displayed externally to the website, i.e. in an email browser?

Upvotes: 0

Views: 643

Answers (2)

Unbywyd
Unbywyd

Reputation: 966

Judging by the image, you have a regular editor but not Visual Composer, and this is very good because this is the only right direction! You cannot create email templates using the constructor (Visual Composer) since creating an email template requires special old school knowledge (Tables, inline styles) and clean markup. I advise you to take a ready-made template and change it to your own.

Example: https://colorlib.com/etc/email-template/3/index.html

What you need to know:

  1. You need to use html tables
  2. You need to use inline css
  3. Use full src to display images (https://yoursite.wp/.../demo.jpg) the link you can get from the media post

Not recommended:

  1. To use css styles in the header if you are interested in Gmail App support: https://templates.mailchimp.com/resources/email-client-css-support/
  2. Custom fonts
  3. Visual Composer and any other constructor

Addition:

If you can use the shortcode system I recommend creating a mini plugin for you:

  • plugins/my-custom-emails [Root directory of new plugin]

  • plugins/my-custom-emails/my-custom-emails.php [Main php file of plugin]

  • plugins/my-custom-emails/emails/ [Directory for for all your templates]

  • plugins/my-custom-emails/emails/template1.html [First demo template]

my-custom-emails.php

<?php
/*
Plugin Name: My emails
Description: My custom emails
Version: 0.1.0
*/

define('MYCELS_DIR', plugin_dir_path(__FILE__));

add_shortcode( 'myemails', 'MYCELS_SHORTCODE' );
function MYCELS_SHORTCODE($attrs) {
    if(empty($attrs['id'])) {
        return 'ID required';
    }
    $ID = $attrs['id'];
    $PATH = MYCELS_DIR . 'emails/'.$ID.'.html';
    if(file_exists($PATH)) {
        return file_get_contents($PATH);
    } else {
        return 'File with '. $ID . ' ID not exists';
    }
}

template1.html

<div>
    Template
</div>

And using:

[myemails id=template1]

Id = template name

Upvotes: 2

Maxim King
Maxim King

Reputation: 41

If you want something very customisable this plug-in would work, https://en-gb.wordpress.org/plugins/wp-html-mail/ It’s very good and would recommend! With this you have full control over CSS and the HTML also comes with templates and has so much more control for what you need!

Upvotes: 0

Related Questions