{"id":14002,"date":"2025-07-28T15:53:41","date_gmt":"2025-07-28T15:53:41","guid":{"rendered":"https:\/\/www.kadencewp.com\/help-center\/?post_type=docs&#038;p=14002"},"modified":"2026-04-22T16:42:41","modified_gmt":"2026-04-22T16:42:41","password":"","slug":"add-classes-and-ids-to-blocks","status":"publish","type":"docs","link":"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-blocks\/add-classes-and-ids-to-blocks\/","title":{"rendered":"How to add Custom CSS Classes and HTML IDs to Kadence Blocks"},"content":{"rendered":"\n<p>When using <strong>Kadence<\/strong> <strong>Blocks<\/strong>, you might want to add more advanced customization to your blocks. This can include things like adding custom CSS, custom code, or using anchor links. That\u2019s where the Kadence Advanced Block Settings come in.<br><br>Most Kadence Blocks let you add <strong>Custom CSS Classes<\/strong> and\/or <strong>HTML Anchors<\/strong>, so you can easily style them, add functionality to them, or use anchor links to link to specific sections on your page. To access these settings, just select the block, open the <strong>Block Settings<\/strong> panel, go to the <strong>Advanced <\/strong>tab, and expand the <em><strong>Advanced<\/strong> block settings.<\/em><\/p>\n\n\n<style>.kb-image14002_00e3ca-5d.kb-image-is-ratio-size, .kb-image14002_00e3ca-5d .kb-image-is-ratio-size{max-width:750px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image14002_00e3ca-5d.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image14002_00e3ca-5d .kb-image-is-ratio-size{align-self:unset;}.kb-image14002_00e3ca-5d figure{max-width:750px;}.kb-image14002_00e3ca-5d .image-is-svg, .kb-image14002_00e3ca-5d .image-is-svg img{width:100%;}.kb-image14002_00e3ca-5d .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image14002_00e3ca-5d\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1759\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Custom-Classes-and-Anchors-scaled.jpg\" alt=\"Custom Classes and Anchors\" class=\"kb-img wp-image-14003\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Custom-Classes-and-Anchors-scaled.jpg 2560w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Custom-Classes-and-Anchors-300x206.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Custom-Classes-and-Anchors-1024x703.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Custom-Classes-and-Anchors-768x528.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Custom-Classes-and-Anchors-1536x1055.jpg 1536w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Custom-Classes-and-Anchors-2048x1407.jpg 2048w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Custom-Classes-and-Anchors-360x247.jpg 360w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/figure><\/div>\n\n\n\n<p>Here, you can add <em>HTML Anchors<\/em> or <em>Additional CSS Class(es)<\/em> using the available settings. Add multiple Classes or Anchors by separating them with a space.<br><br>In return, the <em>Custom CSS Class(es)<\/em> and <em>Anchor ID(s)<\/em>, will appear on the front-end code. For example, notice the <strong>Custom CSS Class<\/strong> and <strong>ID<\/strong> named <span style=\"text-decoration: underline\">custom<\/span> below.<\/p>\n\n\n<style>.kb-image14002_c3b196-c4 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image14002_c3b196-c4\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2244\" height=\"236\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Front-End-Code-Sample.jpg\" alt=\"Front End Code Sample\" class=\"kb-img wp-image-14005\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Front-End-Code-Sample.jpg 2244w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Front-End-Code-Sample-300x32.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Front-End-Code-Sample-1024x108.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Front-End-Code-Sample-768x81.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Front-End-Code-Sample-1536x162.jpg 1536w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Front-End-Code-Sample-2048x215.jpg 2048w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/07\/Front-End-Code-Sample-360x38.jpg 360w\" sizes=\"auto, (max-width: 2244px) 100vw, 2244px\" \/><\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"<p>When using Kadence Blocks, you might want to add more advanced customization to your blocks. This can include things like adding custom CSS, custom code, or using anchor links. That\u2019s where the Kadence Advanced Block Settings come in. Most Kadence Blocks let you add Custom CSS Classes and\/or HTML Anchors, so you can easily style&#8230;<\/p>\n","protected":false},"author":148263,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"doc_category":[417],"doc_tag":[],"knowledge_base":[7],"class_list":["post-14002","docs","type-docs","status-publish","hentry","doc_category-block-tutorials","knowledge_base-kadence-blocks"],"year_month":"2026-04","word_count":153,"total_views":"3511","reactions":{"happy":"0","normal":"0","sad":"5"},"author_info":{"display_name":"victormonk","author_link":"https:\/\/www.kadencewp.com\/help-center\/author\/victormonk\/"},"doc_category_info":[{"term_name":"Block Tutorials","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-blocks\/block-tutorials\/"}],"doc_tag_info":[],"knowledge_base_info":[{"term_name":"Kadence Blocks","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-blocks\/","term_slug":"kadence-blocks"}],"knowledge_base_slug":["kadence-blocks"],"taxonomy_info":{"doc_category":[{"value":417,"label":"Block Tutorials"}],"knowledge_base":[{"value":7,"label":"Kadence Blocks"}]},"featured_image_src_large":false,"comment_info":0,"_links":{"self":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/14002","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/users\/148263"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/comments?post=14002"}],"version-history":[{"count":3,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/14002\/revisions"}],"predecessor-version":[{"id":14008,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/14002\/revisions\/14008"}],"wp:attachment":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/media?parent=14002"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_category?post=14002"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_tag?post=14002"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/knowledge_base?post=14002"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}