Table of Contents
The HTML Code Editor is a powerful tool in our Docs editor that allows you to create custom looks and styles for your articles using HTML. While our editor provides a user-friendly interface for creating beautiful articles without needing to work with HTML, we understand that some users prefer the flexibility and control that HTML offers. With the HTML block tool, you can bring your own HTML expertise and get creative with your article designs.
Adding the HTML Block
To add the HTML block to your article, follow these steps:
- Click the “+” (plus sign) to the left of a new line in the editor or type “/” (forward slash) to open the shortcut menu.
- Choose the “HTML block” option from the menu.
The HTML block accepts any valid HTML5 tags and event handlers that can be used within the <body> of an HTML document. However, please note that the <script> and <style> tags are not supported within the HTML block.
If you need to include <script> or <style> elements in the <head> section across your Docs site, refer to the “Customize Your Docs Site” documentation for more information.
Converting HTML Block to Editor Format
If you want to convert your HTML block into regular editor text, you can do so by following these steps:
- Click the kebab menu (three dots menu) in the top-right corner of the HTML block.
- Select the “Convert to editor format” option from the menu.
After converting to editor format, only the customizations supported directly by the Docs editor will remain. Any HTML classes, inline CSS, or other customizations will be removed.
Example Uses of HTML Block
Here are a few examples of what you can do with the HTML block. While these examples cover some common use cases, please note that you are not limited to these options.
Embedding a Video From Other Hosts
If you want to embed a video from a host other than YouTube, Vimeo, Loom, CloudApp, or Wistia, you can use the HTML block. Simply paste the embed code provided by your video hosting platform into the HTML block.
Here’s an example of an embed code you might get from hosting your videos on Kapwing:
“`html
Video edited on Kapwing
“`
You may need to add CSS to your video embeds to ensure they look good across all screen sizes and devices. To do this, wrap the video embed with the classes video and widescreen:
“`html
“`
If you encounter any issues with embedding your video, feel free to contact us with a link to the article that’s giving you trouble.
Adding a Call to Action Link to Open Docs Beacon
To add a call-to-action link that opens your Docs Beacon, you can use the HTML block. This requires specific code with event handlers to ensure the link works correctly on your Docs site and any Beacons that display your articles.
Here’s a sample HTML code for a CTA link:
“`html
If you encounter any issues with placing an order, reach out to our team and we’ll be happy to help!
“`
Using Definition Lists for Detailed Steps
To create detailed step-by-step instruction lists, you can use the definition list element <dl>. This element consists of a term <dt> and a description <dd>.
Here’s an example of using a definition list for detailed steps:
“`html
- 1
- Go to the Winchester.
- 2
- Have a nice cold pint.
- 3
- Wait for this to all blow over.
“`
By default, the background color behind the <dt> elements in a definition list is grey. If you want to change this color, you can use the following CSS selector in your custom CSS:
“`css
fullArticle dt {
background: yourcolorchoice;
}
“`
Using Additional CSS Styles
In the HTML block, you can apply additional CSS styles to elements using either built-in classes provided by Docs or your own custom classes. Here are some examples:
Built-in Classes
Docs provides some built-in classes that you can use in the HTML block to style elements. Note that if you have applied custom CSS, these classes may work differently.
- Image lightbox: You can use the class
lightboxto create an image that expands to full size when clicked. Wrap the image with a<figure>element and add a<figcaption>to provide a caption.
“`html
“`
- Remove image border: By default, images in Docs have a rounded border. To remove the border, add the class
noBdrto the<img>tag.
html
<img src="https://yourfilelocation.com/image.png" class="noBdr" alt="Image of a Banana">
Custom Classes
If you have added custom CSS to customize your Docs site, you can apply your own custom classes in the HTML block to style elements.
For more information on adding custom CSS to Docs, refer to the “Customize Your Docs Site: Use CSS” documentation.
Conclusion
The HTML Code Editor in our Docs editor allows you to leverage your HTML expertise to create custom looks and styles for your articles. By using the HTML block, you can incorporate HTML elements, embed videos, add call-to-action links, create detailed step-by-step instructions, and apply additional CSS styles. Experiment with the HTML block to bring your own creative ideas to your articles and make them truly unique.
Leave a Reply