To do this click the drop-down arrow to the right of the Save button, then select the share option.
In the new window, you can select the team members that can access the document. You can also choose if they have the ability to overwrite the document, if you keep this unticked they will have to save the document as a new file in their own storage.
If your HTML has the same span tags in a row like in the code sample below and you would like to have just one span tag then you can use custom JavaScript code that will fix your HTML.
<p> <span lang="en">This is span</span> <span lang="en">This is span 2</span> </p> <p> <span style="font-size: 12px">This is span</span> <span style="font-size: 12px">This is span 2</span> <span style="font-size: 12px">This is span 3</span> </p>
Please try the following custom JavaScript code that will process your HTML span tags:
var htmlLength = 0;
while (htmlLength != html.length )
{
htmlLength = html.length;
html = html.replace(/(<span[^<>]*>)([\s\S]*?)(<\/span>)(\s*)\1([\s\S]*?)\3/gi, "$1$2$4$5$3");
}
Just copy and paste it into Custom JavaScript editor and click Cleanup HTML green button under HTML editor.
After you click Cleanup HTML button all the same span tags will be merged into one <span..> tag like below:
<p> <span lang="en">This is span This is span 2</span> </p> <p> <span style="font-size: 12px">This is span This is span 2 This is span 3</span> </p>
We have a settings screen to let you easily style your tables. To use it all you have to do is click anywhere in your table. On the floating menu that comes up click the brush icon.
On the table styling screen, you can control all aspects of the table style like color, font, padding, border and table height and width.
If you’re using Chrome browser you can paste content as plain text please right click with mouse in Visual Editor and click ‘Paste as plain text’ option:
If you’re using other browser then you can paste your content into empty HTML Editor which will show text instead of HTML and then select all that text in HTML Editor and then copy it back to clipboard and paste it into Visual Editor.
We are happy to introduce a dedicated email signature generator website that has improved features and dedicated pricing:
Still, there are several ways to create an HTML email signature on WordToHTML.net as well:
We recommend creating a signature in a table. For example, if you want to create a signature with your photo on the left side and all other contact details on the right side you can start by creating a table with two columns and one row:
Then place your cursor in the left cell of that table and upload or paste your photo. We recommend either uploading a small photo or resize it when uploading:
If your photo is big our site will automatically show you a modal dialog to resize it. We recommend resizing the photo to be around 100-200 pixels wide or tall.
Below you can see the resized image file which is a small file of 6.6 KiB (kilobytes), 154×154 pixels. Depending on your photo input size you need to resize it with a slider on the left side until you’ll visually see a small photo that you want to see in your signature. Then click the blue Insert Rezied Image button.
After that, you will see your photo on the left table cell:
If you see a big photo in the Visual Editor just click on it and resize it to a small size as shown in the screenshot above (we recommend 100-200 pixels width/height).
We recommend setting the table width to 500px (+-100px) by placing the cursor in any table cell and then clicking the Table styling icon:
Then enter table width like 500px and click OK:
You can center the photo by clicking on it, then selecting Display to Break Text, and then clicking the center icon. Also, you can make the photo table cell smaller by dragging a horizontal line in the middle to the left side as shown in the screenshot below.
Optionally, if you want to have a rounded photo you can use our Image Editor. Click on the photo and then click the Image icon:
Then go to the Adjust section and pick Ellipse Crop and then click the Save button:
Then you have to select PNG format otherwise you will see a black background added to your image and click the Save button:
Then you should see a rounded photo in the Visual Editor:
Then enter all your contact details and style as you like in the right cell. Tip: by default, if you press the Enter key Visual Editor will create a new paragraph of text that has line padding, but if you hold Shift and press Enter then it will enter a break line which does not add much space between the lines.
You can test your signature by sending it to your email client or by previewing it in a browser tab etc.
Optionally you can add icons with links to your social profiles or any sites you want:
Once you’re happy with your signature you can save it online on WordToHTML or copy to the clipboard and paste it into your email client.
For example in Gmail go to all Settings and find the Signature in the General section, then Create a new or edit the existing signature.
Then paste HTML from WordToHTML.net into the signature text field like shown below, select this signature “for new emails” and click the Save Changes button at the bottom of the Settings page.
If all went fine when creating a new email in Gmail you will see your signature as shown below:
All you have to do is click an icon to select the HTML template from the toolbar:
Then select your signature template:
Once you have selected the template you can edit the content in the Visual Editor:
Replace the placeholder picture with your own in jpg or png format. We do not recommend embedding images or using SVG format because some email clients do not support it.
If you want to add more icons to your signature (like the social media links) we recommend you use icons from the Icons site or you can download PNG icons from the Icon Finder and upload them to our website.
Once you have created your signature you can then copy and paste it into your email application:
For example, an AI prompt like this:
Create a CEO HTML signature by using a table with a logo on the left side and my information on the right side. Please use CSS only as inline styles.
This should generate a similar HTML signature. To set your logo please click the image placeholder and click the Replace icon. Then either select the already uploaded logo or upload one and select it.
We recommend disabling the Full page mode to see and copy only the main HTML:
Once you update the logo image the signature will look like below. Update signature info as you need then copy it to the clipboard, and paste it in any email client you want.
You can use Word To HTML to create basic HTML content. Only p, strong/b, em/i, br, ul, ol, and li HTML tags are allowed, and no images.
If you paste complex content then Visual Editor will automatically simplify HTML to the basic tags.
To get started all you need to do is click the ‘Basic Editor mode’ link above the Visual Editor:
You will notice that the toolbar icons switch to simplified controls:
The Word to HTML Visual Editor is able to customize CSS styles for specific HTML tags and allows you to add your own CSS classes that can be used to format your content.
You can add/paste custom CSS from your website if you want to style the content the same way as on your website.
In order to add your custom CSS you have to go to the Preferences page:
h1 { color: blue }
p { padding: 20px 0 }
.redBoldStyle { color: red; font-weight: bold }
This is how you can have custom styles for tags in your Visual Editor content. In the example above you can set a blue color to all <h1> tags, custom padding for all <p> tags, and add a custom class style called ‘redBoldStyle’ that styles are then available for your use under the Paragraphs Style drop-down icon in the default editor or Formats menu in the TinyMCE editor.
To apply the style the default Visual Editor please select your text and click the Paragraph Style icon (compact toolbar mode), and then click the style you want to apply.
When using full toolbar mode please select your text and click this icon to see your custom CSS classes:
To apply the style in TinyMCE Editor please select your content and click the Formats menu, and then click the style you want to apply.
Visual Editor will add the class to your selected content:
To create sub-lists under the default Visual Editor you have to follow these steps.
To create sub-lists under TinyMCE Visual Editor you have to follow these steps.
If you want to change sub list type, just click at the first item on your sub list to place editor cursor (1) there and click either numbered (2) or not list type icons:
Clicking the Lower Alpha list type will change the list type like this:
If you are using our service to prepare content for pasting into a CMS like WordPress this feature can save you a lot of time and effort. Basically, it gives you the option to change the image links to the actual path of the site you will be putting the content on.
If your HTML contains images that are stored on WordToHTML.net (either you have uploaded them via Visual Editor File Manager or you have used Upload file & convert to HTML feature) and you would like to quickly add your HTML content and images to any CMS then you can use the ‘Custom media URL’ option shown when you use the ‘Download HTML with media’ option:
If we detect media files then we will show the following screen where you can optionally enter a custom media URL that will be prepended to all images in HTML.
For instance when using WordPress, if your media files are not organized under month/year folders (you can check it on your WordPress dashboard Settings -> Media page) then you can enter /wp-content/uploads/ and WordToHTML.net will automatically add this relative URL to all <img src=”…” /> src attributes in HTML.
If you do not enter any value then nothing will be added to image files, there will be only file names in src attributes.
Once you click the Next button we will generate a zip file that will contain your HTML file and all related images.
After that you can unzip the downloaded file, then upload all images on your website (via WordPress admin or FTP).
For instance on WordPress admin Media just click Select Files and then go to a unzipped folder where images are stored. Also you can Drag & drop images here:
Then either copy HTML to clipboard from Word to HTML or open the HTML file in any text editor (Notepad for instance) and copy the HTML to the clipboard and then paste it into your CMS.
For instance in WordPress you have to switch to Text mode (step 1 in Classic editor) and then paste HTML step 2:
After that you can switch back to Visual mode and check if you see images etc. After that you can save your page.
This feature lets you customize the tags (elements) and their attributes. You can add and delete attributes, for example, say you had this code in your file:
<p>First paragraph.</p>
And if you wanted to apply your CSS Stylesheet to the text, then you could use this feature to add this attribute:
<p class="className">First paragraph.</p>
Add attribute
Remove attribute
Remove all attributes
Append HTML to elements
Prepend HTML to elements
Remove elements
Wrap elements
Wrap inner content of elements
Unwrap elements
Replace elements
1 – Tag or attribute actions drop-down – select what you would like to do.
2 – HTML tag or comma-separated tags (elements) like p, span, div, or selectors like div.p or .someClass
More info about selectors: https://www.w3schools.com/cssref/css_selectors.asp
3 – HTML attributes like id, class, style, etc. Please note that class and style attributes are treated differently if you enter some values for them.
4 – Enumerate attribute values on/off.
5 – Start number when enumerating attribute values.
6 – Attribute or tag values. This field can contain HTML too.
7 – List of actions that will be performed on HTML.
<p>First paragraph.</p> <p>Second paragraph.</p> <p>Third paragraph.</p> <div> Last section. </div>
Output HTML after clicking Cleanup my HTML green button:
<p class="className">First paragraph.</p> <p class="className">Second paragraph.</p> <p class="className">Third paragraph.</p> <div> Last section. </div>
Please note that the div tag does not have a class attribute.
<p>First paragraph.</p>
<p>Second paragraph.</p>
<p>Third paragraph.</p>
<span>Fourth line.</span>
<div>
Last section.
</div>
Output HTML:
<p class="className">First paragraph.</p> <p class="className">Second paragraph.</p> <p class="className">Third paragraph.</p> <span class="className">Fourth line.</span> <div> Last section. </div>
Please note that the div tag has no class attribute only p and span tags.
<p>First paragraph.</p> <p>Second paragraph.</p> <p>Third paragraph.</p>
Please note that you can add numbers (enumerate any attributes, but usually it only makes sense for id attribute).
Output HTML:
<p id="prefix1">First paragraph.</p> <p id="prefix2">Second paragraph.</p> <p id="prefix3">Third paragraph.</p>
<p>First paragraph.</p> <p>Second paragraph.</p> <p>Third paragraph.</p>
Output HTML:
<p class="className">First paragraph.</p> <p class="className">Second paragraph.</p> <p class="className">Third paragraph.</p>
<p style="color: red">First paragraph.</p> <p>Second paragraph.</p> <p>Third paragraph.</p>
Note: Please enter only one CSS rule to add or replace a particular CSS style. If you enter more rules then the whole style attribute value will be replaced if the style attribute already exists for a given tag.
Output HTML:
<p style="color: red; font-weight: bold;">First paragraph.</p> <p style="font-weight: bold;">Second paragraph.</p> <p style="font-weight: bold;">Third paragraph.</p>
<p class="className className2">First paragraph.</p> <p class="className className2">Second paragraph.</p> <p class="classNameTest">Third paragraph.</p>
className was removed from the first two p tags. Output:
<p class="className2">First paragraph.</p> <p class="className2">Second paragraph.</p> <p class="classNameTest">Third paragraph.</p>
<p class="className2">First paragraph.</p> <p class="className2">Second paragraph.</p> <span class="classNameTest">Third paragraph.</span>
The value field has to be empty to delete all class attributes from p tags.
Output HTML:
<p>First paragraph.</p> <p>Second paragraph.</p> <span class="classNameTest">Third paragraph.</span>
<p class="className2">First paragraph.</p> <p class="className2">Second paragraph.</p> <span class="classNameTest">Third paragraph.</span>
Enter * char in the tag field to remove the class attribute from every HTML element. Please note that * char can be used for other tag actions too.
Output:
<p>First paragraph.</p> <p>Second paragraph.</p> <span>Third paragraph.</span>
<p class="className">First paragraph.</p>
<span class="classNameTest">Second paragraph.</span>
<p>
<span class="classNameTest">Third paragraph.</span>
</p>
Entering ‘p span’ means that all <span> tags inside of <p> tags will be affected.
Only the class attribute from the ‘Third paragraph’ span tag was removed. Output:
<p class="className">First paragraph.</p> <span class="classNameTest">Second paragraph.</span> <p> <span>Third paragraph.</span> </p>
<p id="test" class="test"><strong class="ok">Some text...</strong></p>
All attributes of the p tag were removed. Output HTML:
<p><strong class="ok">Some text...</strong></p>
<p>First paragraph.</p> <p>Second paragraph.</p> <p>Third paragraph.</p>
Each <p> tag was added <span class=”red”>some text</span> before ending </p>. Output:
<p>First paragraph.<span class="red">some text</span></p> <p>Second paragraph.<span class="red">some text</span></p> <p>Third paragraph.<span class="red">some text</span></p>
<p>First paragraph.</p> <p>Second paragraph.</p> <p>Third paragraph.</p>
Each p tag was added <span class=”red”>some text</span> after starting <p>. Output:
<p><span class="red">some text</span>First paragraph.</p> <p><span class="red">some text</span>Second paragraph.</p> <p><span class="red">some text</span>Third paragraph.</p>
<p>First paragraph. <span class="red">some text</span> </p> <p>Second paragraph. <span class="red">some text</span> </p> <p>Third paragraph. <span class="red">some text</span> </p> <span class="red">some other text</span>
Selector ‘p span’ will remove all <span> tags in <p> tags. The last <span> was not removed because it was not inside of <p> element. Output HTML:
<p>First paragraph.</p> <p>Second paragraph.</p> <p>Third paragraph.</p> <span class="red">some other text</span>
<p>First paragraph.</p> <p>Second paragraph.</p> <p>Third paragraph.</p>
Each <p> tag will be wrapped with <div class=”wrapped”>… </div>. Output HTML:
<div class="wrapped"><p>First paragraph.</p></div> <div class="wrapped"><p>Second paragraph.</p></div> <div class="wrapped"><p>Third paragraph.</p></div>
<p>First paragraph.</p> <p>Second paragraph.</p> <p>Third paragraph.</p>
Each inner text inside of <p> tags will be wrapped with <div class=”innerWrap”>…</div>. Output HTML:
<p><div class="innerWrap">First paragraph.</div></p> <p><div class="innerWrap">Second paragraph.</div></p> <p><div class="innerWrap">Third paragraph.</div></p>
<div><p>First paragraph.</p></div> <div><p>Second paragraph.</p></div> <div><p>Third paragraph.</p></div>
Output HTML:
<div>First paragraph.</div> <div>Second paragraph.</div> <div>Third paragraph.</div>
<div><p>First paragraph.</p></div> <div><p>Second paragraph.</p></div> <div><p>Third paragraph.</p></div>
Output HTML:
<p>First paragraph.</p> <p>Second paragraph.</p> <p>Third paragraph.</p>
<div><p>First paragraph.</p></div> <div><p>Second paragraph.</p></div> <div><p>Third paragraph.</p></div>
Every <p>…</p> tag was replaced with <span>…</span>. Output HTML:
<div><span>First paragraph.</span></div> <div><span>Second paragraph.</span></div> <div><span>Third paragraph.</span></div>
You can replace b tags with strong tags or strong tags with h2 tags etc.