How To Use The WordPress Custom HTML Block - Elegant Themes

• Divi Expand Menu Collapse Menu

  Divi Features

  • All Features

    All Features

  • 200+ Elements

    200+ Elements

  • 2,000+ Layouts

    2,000+ Layouts

  • Quick Sites

    Quick Sites New!

  • No-Code Design

    No-Code Design

  • Theme Builder

    Theme Builder

  • Ecommerce

    Ecommerce

  • Workflow

    Workflow

  • Marketing

    Marketing

  • Developers

    Developers

  • Site Examples

    Site Examples

  • Integrations

    Integrations

  Divi Products & Services

  • Divi

    Divi Theme & Builder

    The #1 WordPress Theme & Builder

  • Divi Marketplace

    Divi Marketplace

    Divi Modules, Layouts & Themes

  • Divi Cloud

    Divi Cloud

    Cloud Storage For Divi Designers

  • Divi AI

    Divi AI New!

    Build Divi Websites With AI

  • Divi Teams

    Divi Teams

    Collaboration for Divi Agencies

  • Divi Hosting

    Divi Hosting

    Fast WordPress Hosting For Divi

  • Divi VIP

    Divi VIP

    Amazing Support + Big Discounts

  • Divi Dash

    Divi Dash

    WordPress Site Manager

  Get Divi Today
• Divi For Expand Menu Collapse Menu
  • Web Design Agencies

    Web Design Agencies

    Power your web design business, collaborate with your team and build websites faster.

  • Web Design Freelancers

    Web Design Freelancers

    Bring your client's ideas to life quickly and efficiently. Build any type of website with Divi.

  • Small Business Owners

    Small Business Owners

    Divi makes it easy for anyone to build their own website. Build visually, no coding required.

  • Online Store Owners

    Online Store Owners

    It's easy for anyone to start their own online store with Divi. Sell products and design your own website.

• All Products Expand Menu Collapse Menu
  • Divi Theme

    Divi Theme & Page Builder

    The #1 WordPress Theme & Visual Page Builder

  • Divi Builder Plugin

    Divi Page Builder Plugin

    Harness the Power of Divi With Any Theme

  • Extra Theme

    Extra Magazine Theme

    The Best Theme for Bloggers and Online Publications

  • Bloom Plugin

    Bloom Email Opt-Ins

    The Ultimate Email Opt-In Plugin for WordPress

  • Monarch Plugin

    Monarch Social Sharing

    The Best Way To Promote Social Sharing

  Join To Download
• Contact Expand Menu Collapse Menu
  • Contact

    Get In Touch

  • Sales Questions

    Chat With Sales

  • Accounts & Billing

    Accounts & Billing

  • Technical Support

    Technical Support

  • Community

    Ask The Community

  • Documentation

    Documentation

  Chat With Us!
• Account Expand Menu Collapse Menu
  • Downloads

    Product Downloads

  • Divi Cloud

    Divi Cloud

  • Team

    Manage Team

  • Username & API Key

    Username & API Key

  • Account Details

    Account Details

  • Billing

    Billing Info

  • Subscriptions

    Subscriptions

  • Special Offers

    Special Offers

  • Support

    Customer Support

  • Log Out

    Log Out

  My Downloads Username Password Remember me

  Forgot Your Username or Password?

Pricing How to Use the WordPress Custom HTML Block

Last Updated on September 12, 2022 by Randy A. Brown 1 Comment

Blog / WordPress / How to Use the WordPress Custom HTML Block Play Button

The Custom HTML Block lets you add HTML content and edit it without having to view the page or post as HTML. You can embed HTML and even use it to mark up your text and then convert it to a Paragraph Block with styled text if you want. This block is great for those that prefer to work in HTML and it’s one of the best ways to embed certain types of code, such as Google Maps.

In this article, we’ll take a close look at the Custom HTML Block. We’ll see how to add it to your posts and pages, look at its settings and options, see tips on how to use it, and see the frequently asked questions.

Subscribe To Our Youtube Channel

Table Of Contents

• 1 How to Add the Custom HTML Block to your Post or Page
• 2 Custom HTML Block Settings and Options
  • 2.1 Custom HTML Block Toolbar
• 3 Tips and Best Practices for Using the Custom HTML Block Effectively
• 4 Frequently Asked Questions about the Custom HTML Block
  • 4.1 What does the Custom HTML Block do?
  • 4.2 How can the Custom HTML Block be used?
  • 4.3 Will it color-code the markup?
  • 4.4 Does the Custom HTML Block run the HTML?
  • 4.5 Are all HTML tags support?
• 5 Conclusion

How to Add the Custom HTML Block to your Post or Page

To add the Custom HTML Block to your content, place your cursor where you want the block to appear and select the Inserter tool. A search box will open where you can enter a search term or scroll through your options. Search for html and select the block when it’s displayed in the results.

Alternately, you can type /html where you want the block to appear and hit enter or select it from the options above the block area.

You now have a Custom HTML Block within your content where you can add HTML. We’ll see some examples with code as we go through the settings.

Custom HTML Block Settings and Options

Unlike most blocks, the Custom HTML Block does not include options in the editor sidebar. You’ll find all the options you need in the toolbar.

Custom HTML Block Toolbar

Click anywhere within the block to see its tools. If you don’t see them all, click under the block in a new area, and then the rest of the tools will display when you select the block again.

Each block has its own specific controls where you can select options for the block. A small set of block options above the toolbar allows you to change the block type, convert to blocks, and open the options.

Let’s look at each setting in detail.

Custom HTML Change Block or Style

Selecting HTML in the options opens a dropdown box where you can transform the block to other types of blocks. Options include Code, Columns, or Group.

Code – transforms the Custom HTML Block to a Code Block so you can display different types of code.

Columns – places the block within columns.

Group – adds the block to a group so you can adjust them as a single block.

Custom HTML Block Drag Tool

The drag tool includes six dots that you can grab with your mouse to move it.

Then, simply drag the block anywhere you want within your content and drop it. A blue line will appear that indicates where the block will be dropped as you drag the block around.

Once you see the blue line appears where you want the block, let go of the mouse button and your block will be placed in its new location.

Custom HTML Block Move

The up and down arrows move the block one content section every time you click them. The screen will scroll as the block automatically moves into its new location. This is an easy way to move the block a section or two.

Custom HTML Block HTML and Preview

The HTML and Preview buttons let you select how the block works with HTML in the editor. The HTML button is selected by default. This shows the HTML in its code form rather than executing it. This example shows the HTML of a Google Map.

Selecting Preview shows how the HTML will look on the frontend as it’s executed within the browser. It’s easy to switch back and forth between the views to edit the HTML and see how it would look to the end-user. This is an excellent way to make edits and quickly view the results. This example shows an embedded Google Map as it would appear within the content.

As another example, here’s some HTML to add styling to a line of text. This is the HTML view, where I can create and edit the HTML.

Here’s the Preview mode that shows how it will look on the front end.

Custom HTML Block Options

On the far right of the toolbar are three dots in a vertical stack. These three dots open a set of 10 options in three divisions that allow you to hide the settings, convert to blocks, copy, duplicate, insert before or after, move to, add to reusable blocks, group, or remove the block.

Here’s what the Custom HTML Block options can do:

Hide More Settings – this hides the right sidebar, expanding your workspace.

Convert to Blocks – this converts the content to the other appropriate blocks. Text will be converted to Paragraph blocks, images to Image blocks, etc. Embedded code, such as the Google Map code that I used in my example, will remain as a Custom HTML Block. If other HTML within the block can be converted, it will be removed from the block at placed in a different block.

Copy – this copies the block to your clipboard so you can paste it anywhere within the editor.

Duplicate – this places a duplicate of the block under the original.

Insert Before – this adds a block area before the Custom HTML Block so you can place another block.

Insert After – this adds an area after the block where you can place another block.

Move To – this lets you move the block up or down with the arrow keys. You’ll move a blue line. When it reaches the location that you want, hit enter and the block is moved instantly.

Add to Reusable Blocks – the adds the Custom HTML Block to your reusable blocks so you can use it again on any page or post.

Group – this adds the block to a group so you can adjust the blocks as a single unit.

Remove Block – this deletes the block.

Tips and Best Practices for Using the Custom HTML Block Effectively

Use this block to style your text and edit HTML first and then use the Convert to Blocks tool to create paragraphs or other types of content. This gives you more control over the content and is especially helpful if you don’t need to keep the HTML version. You can view the preview as you go. This keeps you from having to change between the visual and code editors in the WordPress settings in the sidebar.

Use this block for embedded maps, ads, videos, etc. This keeps you from having to change to the Code Editor view and add the code into other types of blocks, such as the Paragraph Block.

Using this block rather than the Code Editor version of your pages and posts keeps you from having to work with the page and post tags. This creates a cleaner work environment that’s easier to use.

Whether you’re adding your own HTML or embedding the code from another source, use the Preview feature often to ensure your HTML will execute the way you intend.

Don’t use the script tag in the block. It might be removed and then your code wouldn’t work.

Frequently Asked Questions about the Custom HTML Block

What does the Custom HTML Block do?

It allows you to enter HTML into a field so you can work with it while keeping the page or post in the Visual Editor.

How can the Custom HTML Block be used?

Any HTML with the supported tags can be added. You can use the block for ads, maps, videos, anything with iframes, tables, etc. It’s also an easy way to markup your text and then convert it to a Paragraph Block.

Will it color-code the markup?

No, the markup in the block looks like any text editor.

Does the Custom HTML Block run the HTML?

It runs the HTML as normal on the front end. In the editor, it can run the HTML or show you the code. It’s up to you which you view, and you can select between the two options at any time with a single button click.

Are all HTML tags support?

No. You can see a list of HTML tags that are supported on the WordPress Supported Code page.

Conclusion

That’s our look at the Custom HTML Block. This block isn’t just for developers. The main advantage of using this block is you don’t have to switch between the visual editor and code editor to work with HTML. This means you can work with the rest of your content showing as normal. You can then work with HTML in the block and preview it at any time. The Custom HTML Block provides an easy way to work with HTML in the block editor.

We want to hear from you. Do you use the Custom HTML Block? Let us know about your experience in the comments.

Featured Image via enterlinedesign / shutterstock.com

• Facebook
• Twitter
• LinkedIn
• Pinterest

Want To Build Better WordPress Websites? Start Here! 👇

Take the first step towards a better website.

What are your goals? Build websites for my freelance clients. Empower my web design agency. Build my own website for my business. Build my own online store. Get Started

By Randy A. Brown

Randy A. Brown is a freelance writer from east TN specializing in WordPress and eCommerce. He's a longtime WordPress enthusiast and loves learning new things and sharing information with others. If he's not writing or reading, he's probably playing guitar.

Explore Divi, The Most Popular WordPress Theme In The World And The Ultimate Page Builder

Learn About Divi

Check Out These Related Posts

What Size Image To Use On WordPress (Key Factors & Tips)

Posted on November 17, 2024 in WordPress

Are you experiencing slow website loading speeds? The low website speed could result from many factors, and large image sizes are one of them. If you have a website with a great deal of content, image size could likely be one of the factors behind your site’s slow speed. Hence, it is...

View Full Post

Divi Dash vs Competitors: Which One’s Best For WordPress Management?

Posted on November 10, 2024 in WordPress

Managing multiple WordPress websites can be difficult, especially as a freelancer or budding web agency. Keeping track of updates, ensuring security, and optimizing performance for each site can be time-consuming. Additionally, when managing dozens or even hundreds of websites, you’re much...

View Full Post

How to Make a Responsive Website in 2024 (No Coding)

Posted on November 9, 2024 in WordPress

Is your website not performing well on mobile devices? Poor layout or slow loading times can cause users to leave your site before they even engage with your content. In today’s mobile-first world, a responsive website is no longer just an option—it’s a necessity. Whether you’re...

View Full Post

1 Comment

1. Chuck Bartok September 1, 2021

   Does this work with Classic Editot?

   Reply

Leave A Reply Cancel reply

Comments are reviewed and must adhere to our comments policy. Comment Name Email Address

Δ

Recent Posts

• New Starter Site for Bed and Breakfasts (Quick Install)
• How To Maintain Your Website In 2024
• What Size Image To Use On WordPress (Key Factors & Tips)
• How To Make An Ecommerce Website In 2024 (Easy Guide)
• How To Approach Small Business Web Design (2024 Guide)

Categories

• Business
• Community
• Design
• Divi Resources
• Editorial
• Marketing
• Resources
• Theme Releases
• Tips & Tricks
• WordPress

Follow Us

• Facebook
• Twitter
• LinkedIn
• Dribbble
• RSS
• YouTube

Colorful Shapes

974,872 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

Sign Up Today

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Facebook 156k Followers Facebook Group 75k Members Twitter 64k Followers Newsletter 325k Subscribers Youtube 188k Subscribers Dribbble 6k Followers

Divi Features

• All Features Explore Divi
• Divi Modules
• Divi Layouts
• Quick Sites Brand New!
• No-Code Builder
• Workflow
• Ecommerce Websites
• Theme Builder
• Marketing Platform
• Speed & Performance
• Developers
• Premium Support

Products

• Divi Theme
• Divi Marketplace
• Divi Cloud
• Divi AI
• Divi Teams
• Divi VIP
• Divi Hosting
• Divi Dash
• Extra Theme
• Bloom Plugin
• Monarch Plugin
• Plans & Pricing Get Divi Today

Resources

• Documentation
• Help Articles & FAQ
• 24/7 Support
• Developer Docs
• System Status

Blog

• Recent Posts
• Product Updates
• Divi Resources
• Business
• WordPress
• Best Plugins
• Top Tools
• Best Hosting

Community

• Divi Meetups
• Divi Facebook Group
• Divi Examples
• Divi Integrations
• Divi Reviews
• Community Forum
• Affiliate Program

Company

• About Us
• Careers
• Contact Us
• Terms of Service
• Privacy Policy

Copyright © 2024 Elegant Themes ®

Get Started With Divi