{"id":5732,"date":"2024-04-14T20:49:31","date_gmt":"2024-04-14T12:49:31","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5732"},"modified":"2024-04-14T20:49:31","modified_gmt":"2024-04-14T12:49:31","slug":"insert-elements-section","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/insert-elements-section\/","title":{"rendered":"Insert Elements section"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p>The Insert Elements Section enables you swift, visual entry to the different components you can include in your project.<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-center\" data-rt-type=\"image\" data-rt-align=\"center\" data-rt-max-width=\"349.5px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94b13bdd37d12dce6d95f_5e613110d215137550bb19f5_59411642fd1195416668a1fa_elements252520panel.jpeg\" alt=\"The Webflow Elements Panel\" title=\"64b94b13bdd37d12dce6d95f_5e613110d215137550bb19f5_59411642fd1195416668a1fa_elements252520panel\"><\/div>\n<\/figure>\n<p>The section is categorized into basic groups. For instance, the Font style area encompasses all elements concerning text. Another division for Forms comprises all the structures you can utilize to create a form. Below are all the categories and their corresponding kinds of elements:<\/p>\n<ul>\n<li>Layout<\/li>\n<li>Fundamental<\/li>\n<li>Typography<\/li>\n<li>Content Management System<\/li>\n<li>Media<\/li>\n<li>Forms<\/li>\n<li>Components<\/li>\n<\/ul>\n<p>There are three methods to include elements from the Insert Elements Section to the ongoing page:<\/p>\n<ul>\n<li>Tap to insert on spot<\/li>\n<li>Drag onto workspace<\/li>\n<li>Drag into the outline<\/li>\n<\/ul>\n<h5>Nice to be aware of<\/h5>\n<h6>You can additionally include elements onto the workspace utilizing <strong>Rapid discover (CMD+E\/CTRL+E)<\/strong>. Get familiar with how to employ rapid discover.<\/h6>\n<h2><strong>Tap to insert on spot<\/strong><\/h2>\n<p>Inserting by tapping is a speedy approach to insert an element onto the workspace.<\/p>\n<ol>\n<li>Pick an existing element on the page.<\/li>\n<li>Uncover the Insert Elements section.<\/li>\n<li>Hit on the element you desire to insert.<\/li>\n<li>The fresh element will be inserted onto your page.<\/li>\n<\/ol>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-center\" data-rt-type=\"video\" data-rt-align=\"center\" data-rt-max-width=\"80%\" data-rt-max-height=\"45%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/219974087\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/219974087\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<p>Where the incorporated element initially emerges is affiliated with the picked element. Thus, if the chosen element is a text, media, or button element, the inserted element will appear beside or beneath the selected element.<\/p>\n<p>If you\u2019ve initially chosen a parent element, like a div block or a container, the fresh element will be inserted inside this structural element, at the base.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-width=\"80%\" data-rt-max-height=\"45%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/219974400\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/219974400\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<p>If you do not possess an element selected and you tap to include an element, it will be inserted at the base of the page inside the Body element.<\/p>\n<p>You can always modify the position of an element by dragging it wherever you desire.<\/p>\n<h2><strong>Drag onto workspace<\/strong><\/h2>\n<p>The second method to insert elements from the Insert Elements Section is by dragging and depositing the element onto the Workspace.<\/p>\n<p>While you drag in an element, the orange indicator notifies you of which parent element you&#8217;re positioning it into. The blue indicator reveals the location of the element inside the parent element.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-width=\"80%\" data-rt-max-height=\"45%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/219974916\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/219974916\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<p>If you have the Outline tab open on the right, you can additionally observe precisely where you\u2019re placing this element as you drag to relocate it on the workspace.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-width=\"80%\" data-rt-max-height=\"45%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/219975414\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/219975414\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<h2><strong>Drag into outline<\/strong><\/h2>\n<p>The third approach to insert an element onto your page is by utilizing the Outline.<\/p>\n<p>In the Outline, you can witness the complete visual plan of your page. Consequently, you can drag and release an element from the Insert Elements section right into the Outline with accuracy.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-width=\"80%\" data-rt-max-height=\"45%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/219975517\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/219975517\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<h2><strong>Default positioning of elements<\/strong><\/h2>\n<p>Upon inserting an element onto the workspace, it is positioned in relation to its peer elements. This standard positioning is governed by the default visibility settings of both the added element and its peer elements.<\/p>\n<p>Hence, if you\u2019re adding an element with default Visibility Setting of Block, it will consistently manifest on its solitary line, above or beneath the adjacent elements.<\/p>\n<p>While adding elements that possess a Visibility Setting of Inline Block, they will be positioned beneath or above Block elements or beside other Inline Block elements. All elements in the Insert Elements section are Block elements, barring these elements that are Inline Block:<\/p>\n<ul>\n<li>Link Block<\/li>\n<li>Button<\/li>\n<li>Image<\/li>\n<li>Lightbox Link<\/li>\n<li>Dropdown<\/li>\n<li>Form Button<\/li>\n<\/ul>\n<p>The only element that has a Visibility Setting of Inline is the Text Link element. The placement of Inline elements behaves similarly to Inline Block elements.<\/p>\n<p>Learn more about the Visibility Setting.<\/p>\n<p>You can modify the visibility settings of most elements from the Styles Panel.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Use the Add Elements panel to get quick, visual access to various elements you can add to your Webflow project.","protected":false},"author":2,"featured_media":5733,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[290],"tags":[],"class_list":{"0":"post-5732","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-elements","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5732","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=5732"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5732\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5733"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5732"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5732"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5732"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}