{"id":259,"date":"2026-04-23T11:49:59","date_gmt":"2026-04-23T11:49:59","guid":{"rendered":"https:\/\/help.excelerate.app\/?post_type=docs&#038;p=259"},"modified":"2026-06-12T16:08:35","modified_gmt":"2026-06-12T16:08:35","password":"","slug":"button","status":"publish","type":"docs","link":"https:\/\/help.excelerate.app\/en\/help\/button\/","title":{"rendered":"Button"},"content":{"rendered":"<div data-elementor-type=\"wp-post\" data-elementor-id=\"259\" class=\"elementor elementor-259\">\n\t\t\t\t<div class=\"elementor-element elementor-element-35ffb3dd e-con-full e-flex e-con e-parent\" data-id=\"35ffb3dd\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4368a179 elementor-widget elementor-widget-text-editor\" data-id=\"4368a179\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h2>Video tutorial<\/h2><div class=\"elementor-element elementor-element-a9dff80 elementor-widget elementor-widget-fp-text\" data-id=\"a9dff80\" data-element_type=\"widget\" data-widget_type=\"fp-text.default\"><div class=\"elementor-widget-container\"><div class=\"text\"><p>Learn in the following video tutorial how to create the element<\/p><\/div><\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7bbb5e9b elementor-widget elementor-widget-video\" data-id=\"7bbb5e9b\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;vimeo&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<iframe class=\"elementor-video-iframe\" allowfullscreen allow=\"clipboard-write\" title=\"Vimeo video player\" src=\"https:\/\/player.vimeo.com\/video\/1198578446?color&amp;autopause=0&amp;loop=0&amp;muted=0&amp;title=1&amp;portrait=1&amp;byline=1#t=\"><\/iframe>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-10d5ac50 elementor-widget elementor-widget-text-editor\" data-id=\"10d5ac50\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h2>1. Create Link Button.<\/h2><p>With the Button element, you can link to an external page anywhere, display an overlay, insert a download button, and add an overlay.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-44af981 elementor-widget elementor-widget-hotspots\" data-id=\"44af981\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"hotspots.default\">\n\t\t\t\t\t            <div class=\"excelerate-hotspots\">\n                <img decoding=\"async\" class=\"excelerate-hotspots-image\" src=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/04\/Button_link-1.jpg\" \/>\n                <div class=\"excelerate-hotspots-hotspots\">\n                                                <div class=\"excelerate-hotspots-hotspot\" style=\"top: 41%; left: 31%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    1                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Link Button<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Select the link type button to link content. Add a label and a link.<\/div>\n                                <\/div>\n                            <\/div>\n                                            <\/div>\n\t\t    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-091d47f elementor-widget elementor-widget-text-editor\" data-id=\"091d47f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h2>2. Create Overlay Button<\/h2><p>First, select the appropriate type for the overlay and then click on Add Overlay. In the new editing window, you can now enter your content. Close the overlay by clicking on Done.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-74bc409 elementor-widget elementor-widget-hotspots\" data-id=\"74bc409\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"hotspots.default\">\n\t\t\t\t\t            <div class=\"excelerate-hotspots\">\n                <img decoding=\"async\" class=\"excelerate-hotspots-image\" src=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/04\/Overlay_button.jpg\" \/>\n                <div class=\"excelerate-hotspots-hotspots\">\n                                                <div class=\"excelerate-hotspots-hotspot\" style=\"top: 41%; left: 50%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    1                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Overlay Button<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Select the Button overlay type to display content in an overlay. Edit the overlay as usual.<\/div>\n                                <\/div>\n                            <\/div>\n                                                        <div class=\"excelerate-hotspots-hotspot\" style=\"top: 41%; left: 50%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    2                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Overlay Button<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Select the Button overlay type to display content in an overlay. Edit the overlay as usual.<\/div>\n                                <\/div>\n                            <\/div>\n                                            <\/div>\n\t\t    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5c2b86f elementor-widget elementor-widget-text-editor\" data-id=\"5c2b86f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h2>3. Create Download Button<\/h2><p>Select the download button type to offer content via link or PDF upload from the media library.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0c6e6f6 elementor-widget elementor-widget-hotspots\" data-id=\"0c6e6f6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"hotspots.default\">\n\t\t\t\t\t            <div class=\"excelerate-hotspots\">\n                <img decoding=\"async\" class=\"excelerate-hotspots-image\" src=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/04\/Download-button.jpg\" \/>\n                <div class=\"excelerate-hotspots-hotspots\">\n                                                <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 41%; left: 68%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    1                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\"><\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Select the Button overlay type to display content in an overlay. Edit the overlay as usual.<\/div>\n                                <\/div>\n                            <\/div>\n                                                        <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 41%; left: 68%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    2                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Overlay Button<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Select the Button overlay type to display content in an overlay. Edit the overlay as usual.<\/div>\n                                <\/div>\n                            <\/div>\n                                                        <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 41%; left: 68%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    3                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Download Button<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Select the download button to make content available for download.<\/div>\n                                <\/div>\n                            <\/div>\n                                            <\/div>\n\t\t    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-24374bc elementor-widget elementor-widget-text-editor\" data-id=\"24374bc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<h2>4. Create Next button<\/h2><p>Select the Continue button type to go to the next section.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fbae5ee elementor-widget elementor-widget-hotspots\" data-id=\"fbae5ee\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"hotspots.default\">\n\t\t\t\t\t            <div class=\"excelerate-hotspots\">\n                <img decoding=\"async\" class=\"excelerate-hotspots-image\" src=\"https:\/\/help.excelerate.app\/wp-content\/uploads\/2026\/04\/Weiter.jpg\" \/>\n                <div class=\"excelerate-hotspots-hotspots\">\n                                                <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 41%; left: 86%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    1                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\"><\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\"><\/div>\n                                <\/div>\n                            <\/div>\n                                                        <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 41%; left: 86%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    2                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Overlay Button<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Select the Button overlay type to display content in an overlay. Edit the overlay as usual.<\/div>\n                                <\/div>\n                            <\/div>\n                                                        <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 41%; left: 86%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    3                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Download Button<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Select the download button to make content available for download.<\/div>\n                                <\/div>\n                            <\/div>\n                                                        <div class=\"excelerate-hotspots-hotspot excelerate-hotspots-hotspot-right\" style=\"top: 41%; left: 86%;\">\n                                <div class=\"excelerate-hotspots-hotspot-icon\">\n                                    4                                <\/div>\n                                <div class=\"excelerate-hotspots-hotspot-content\">\n                                    <div class=\"excelerate-hotspots-hotspot-headline\">Next button<\/div>\n                                    <div class=\"excelerate-hotspots-hotspot-text\">Use the next button so learners can get to the next section.<\/div>\n                                <\/div>\n                            <\/div>\n                                            <\/div>\n\t\t    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Video Anleitung Erfahre in dem folgenden Video Tutorial, wie du das Element erstellst https:\/\/vimeo.com\/1198578446 1. Link Button erstellen. Mit dem Element Button kannst du an einer beliebigen Stelle auf eine externe Seite verlinken, einen Overlay anzeigen ein Download Button und ein Overlay einf\u00fcgen. 1 Link Button W\u00e4hle den Link typ Button um inhalte zu verlinken. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[5],"doc_tag":[],"class_list":["post-259","docs","type-docs","status-publish","hentry","doc_category-basiselemente"],"year_month":"2026-09","word_count":263,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"name":"Excelerate","author_nicename":"excelerate","author_url":"https:\/\/help.excelerate.app\/en\/author\/excelerate\/"},"doc_category_info":[{"term_name":"Creator - Basis Elemente","term_url":"https:\/\/help.excelerate.app\/en\/docs-category\/basiselemente\/"}],"doc_tag_info":[],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs\/259","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/comments?post=259"}],"version-history":[{"count":13,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs\/259\/revisions"}],"predecessor-version":[{"id":3780,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/docs\/259\/revisions\/3780"}],"wp:attachment":[{"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/media?parent=259"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/doc_category?post=259"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/help.excelerate.app\/en\/wp-json\/wp\/v2\/doc_tag?post=259"}],"curies":[{"name":"WP","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}