{"id":4368,"date":"2025-02-10T09:27:45","date_gmt":"2025-02-10T09:27:45","guid":{"rendered":"http:\/\/34.88.191.99\/?page_id=4368"},"modified":"2025-04-07T13:49:33","modified_gmt":"2025-04-07T13:49:33","slug":"element-types","status":"publish","type":"page","link":"https:\/\/ip1sms.com\/en\/developer\/element-types\/","title":{"rendered":"Element types"},"content":{"rendered":"<h1 class=\"wp-block-heading\" id=\"element-types\">Element Types<\/h1>\n\n\n\n<p>These are definitions and descriptions of the various element types that are available. Any properties not explained on <a href=\"\/en\/.\/elements.md\/#the-data-type\">Managing Page Elements<\/a> is explained here.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"title-element\">Title element<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code\"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n{\n  \"type\": \"Title\",\n  \"id\": \"615d9a0b792a81c7e32841ef\",\n  \"order\": 0,\n  \"backgroundColor\": \"#f7f7f7\",\n  \"foregroundColor\": \"#111\",\n  \"padding\": \"2\",\n  \"margin\": \"2,0,2,0\",\n  \"textAlignment\": \"Center\",\n  \"font\": \"Roboto\",\n  \"content\": \"Welcome to the Landing\",\n  \"level\": 1,\n  \"bold\": false,\n  \"italic\": false,\n  \"underline\": false\n}\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"level\">level<\/h3>\n\n\n\n<p>Heading level. Valid values are from 1 through 5.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"bold\">bold<\/h3>\n\n\n\n<p>Whether the text content should be bolded. Defaults to <code>false<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"italic\">italic<\/h3>\n\n\n\n<p>Whether the text content should be italicized. Defaults to <code>false<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"underline\">underline<\/h3>\n\n\n\n<p>Whether the text content should be underlined. Defaults to <code>false<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"text-block-element\">Text block element<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code\"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n{\n  \"type\": \"TextBlock\",\n  \"id\": \"615db88a0f5018f08437bff5\",\n  \"order\": 1,\n  \"backgroundColor\": \"#f7f7f7\",\n  \"foregroundColor\": \"#111\",\n  \"padding\": \"2\",\n  \"margin\": \"2,0,2,0\",\n  \"textAlignment\": \"Left\",\n  \"font\": \"Roboto\",\n  \"content\": \"One row\\n\\nAnd another section\",\n  \"fontSize\": 16\n}\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"fontsize\">fontSize<\/h3>\n\n\n\n<p>The font size (in pixels) of the text content. Defaults to <code>16<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"button-element\">Button element<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code\"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n{\n  \"type\": \"Button\",\n  \"id\": \"615db9a50f5018f08437bff6\",\n  \"order\": 2,\n  \"backgroundColor\": \"#f7f7f7\",\n  \"foregroundColor\": \"#111\",\n  \"padding\": \"2\",\n  \"margin\": \"2,0,2,0\",\n  \"textAlignment\": \"Left\",\n  \"font\": \"Roboto\",\n  \"content\": \"Click me\",\n  \"link\": \"https:\/\/example.com\",\n  \"buttonType\": \"Standalone\",\n  \"size\": null,\n  \"buttonColor\": \"#89b642\"\n}\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"buttontype\">buttonType<\/h3>\n\n\n\n<p>The type of button to render. Valid values are <code>Standalone<\/code> duck <code>block<\/code>. Defaults to <code>Standalone<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"size\">size<\/h3>\n\n\n\n<p>Size modifier for the button, smaller or larger. Valid values are <code>sm<\/code>, <code>lg<\/code> duck <code>null<\/code>. Defaults to <code>null<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"buttoncolor\">buttonColor<\/h3>\n\n\n\n<p>The color (in hex) that is used for the button. Defaults to <code>#89b642<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"image-element\">Image element<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code\"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n{\n  \"type\": \"Image\",\n  \"id\": \"615dba140f5018f08437bff7\",\n  \"order\": 3,\n  \"backgroundColor\": \"#f7f7f7\",\n  \"foregroundColor\": \"#111\",\n  \"padding\": \"2\",\n  \"margin\": \"2,0,2,0\",\n  \"link\": \"https:\/\/example.com\/cool-pic.png\",\n  \"responsive\": true,\n  \"alignment\": \"Center\",\n  \"height\": null,\n  \"width\": null,\n  \"alt\": \"Image not available\"\n}\n\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"video-element\">Video element<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code\"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n{\n  \"type\": \"Video\",\n  \"id\": \"615dba8b0f5018f08437bff8\",\n  \"order\": 4,\n  \"backgroundColor\": \"#f7f7f7\",\n  \"foregroundColor\": \"#111\",\n  \"padding\": \"2\",\n  \"margin\": \"2,0,2,0\",\n  \"link\": \"https:\/\/example.com\/cool-vid.mp4\",\n  \"responsive\": true,\n  \"alignment\": \"Center\",\n  \"height\": null,\n  \"width\": null,\n  \"alt\": \"Video not available\",\n  \"previewLink\": \"https:\/\/example.com\/cool-preview.png\",\n  \"showControls\": false,\n  \"autoplay\": false,\n  \"loop\": false,\n  \"muted\": false,\n  \"embed\": false\n}\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"previewlink\">previewLink<\/h3>\n\n\n\n<p>A URL to a preview image to display when the video isn't playing. Optional, defaults to <code>null<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"showcontrols\">showControls<\/h3>\n\n\n\n<p>Whether to display (or hide) video playback controls. Defaults to <code>false<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"autoplay\">autoplay<\/h3>\n\n\n\n<p>Whether to start the video as soon as it's loaded. Defaults to <code>false<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"loop\">course<\/h3>\n\n\n\n<p>Whether to loop the video when it ends. Defaults to <code>false<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"muted\">muted<\/h3>\n\n\n\n<p>Whether the sound in the video should be muted. Defaults to <code>false<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"embed\">embed<\/h3>\n\n\n\n<p>Whether the video should be rendered as an embed (i.e. iframe) and not as a native video. Defaults to <code>false<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"common-properties\">Common properties<\/h2>\n\n\n\n<p>These properties may appear on several types and work the same way on all of them unless noted otherwise.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"textalignment\">textAlignment<\/h3>\n\n\n\n<p>The alignment of text content in the element. Valid values are <code>Left<\/code>, <code>Center<\/code>, <code>Right<\/code> duck <code>Justified<\/code>. Defaults to <code>Left<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"alignment\">alignment<\/h3>\n\n\n\n<p>The alignment of media content in the element block. Valid values are <code>Left<\/code>, <code>Center<\/code> duck <code>Right<\/code>. Defaults to <code>Center<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"font\">font<\/h3>\n\n\n\n<p>The font used for text in the element. Accepts any common web font.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"content\">happy<\/h3>\n\n\n\n<p>Text content of the element. For text blocks this is parsed as Markdown when rendered.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"link\">link<\/h3>\n\n\n\n<p>A URL to the linked content of the element. For videos and images this is the video or image, and for buttons it's the destination when it is clicked.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"responsive\">responsive<\/h3>\n\n\n\n<p>Whether to scale the video or image responsively. Defaults to <code>true<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"height\">height<\/h3>\n\n\n\n<p>The height of the video or image (in pixels). Ignored if scaling responsively. Optional, defaults to <code>null<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"width\">width<\/h3>\n\n\n\n<p>The width of the video or image (in pixels). Ignored if scaling responsively. Optional, defaults to <code>null<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"alt\">old<\/h3>\n\n\n\n<p>The alternative text to display if the video or image can't be loaded or displayed. Optional, defaults to <code>null<\/code>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Element Types These are definitions and descriptions of the various element types that are available. Any properties not explained on Managing Page Elements is explained here. Title element level Heading level. Valid values are from 1 through 5. bold Whether the text content should be bolded. Defaults to false. italic Whether the text content should [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":382,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"developer.php","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-4368","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ip1sms.com\/en\/wp-json\/wp\/v2\/pages\/4368","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ip1sms.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ip1sms.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ip1sms.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ip1sms.com\/en\/wp-json\/wp\/v2\/comments?post=4368"}],"version-history":[{"count":0,"href":"https:\/\/ip1sms.com\/en\/wp-json\/wp\/v2\/pages\/4368\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/ip1sms.com\/en\/wp-json\/wp\/v2\/pages\/382"}],"wp:attachment":[{"href":"https:\/\/ip1sms.com\/en\/wp-json\/wp\/v2\/media?parent=4368"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ip1sms.com\/en\/wp-json\/wp\/v2\/categories?post=4368"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ip1sms.com\/en\/wp-json\/wp\/v2\/tags?post=4368"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}