{"id":55808,"date":"2022-11-25T10:00:09","date_gmt":"2022-11-25T04:30:09","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=55808"},"modified":"2024-01-02T17:42:07","modified_gmt":"2024-01-02T12:12:07","slug":"unbounce-landing-pages-development","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/unbounce-landing-pages-development\/","title":{"rendered":"Unbounce landing pages development"},"content":{"rendered":"

What Is a Landing Page?<\/h2>\n
\n

In digital marketing, a landing page is a standalone web page created specifically for a marketing or advertising campaign. It\u2019s where a visitor \u201clands\u201d after they click on a link in an email, or ads from Google, Bing, YouTube, Facebook, Instagram, Twitter, or similar places on the web.<\/p>\n

\n

What is the Unbounce Landing page:<\/h2>\n
\n

Unbounce is an AI-powered landing page builder with smart features that let you create beautiful, high-performing marketing campaigns in just a few minutes. Unbounce landing pages help you convert more traffic, more often, with all the customization you need. Use our drag-and-drop builder to create pages in Unbounce.<\/p>\n

\n

Creating an Unbounce Landing Page:<\/h2>\n
\n
    \n
  1. \u00a0Log in to the Unbounce Conversion Intelligence Platform.<\/li>\n
  2. \u00a0Click the Create New button at the top right corner.<\/li>\n
  3. \u00a0Choose the option to create a page with the Classic Builder:\n
    \"\"<\/div>\n<\/li>\n
  4. Click Start Building. A page will appear with different templates to choose from:\n
    \"\"<\/div>\n<\/li>\n
  5. Under Pick a Content-Type, landing pages should be selected by default.<\/li>\n
  6. Choose a Template from the assortment of pre-made landing page templates.\n
      \n
    • You can use the Filter drop-down menu to pick a template to suit the specific purposes of your campaign.<\/li>\n
    • You can also preview templates by clicking on them:<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n

      \"\"<\/p>\n

        \n
      1. \n
          \n
        • You can switch between screen screenicon.png and mobile mobileicon.png in this preview area by clicking on the appropriate icon.<\/li>\n<\/ul>\n<\/li>\n
        • Once you\u2019ve chosen a template, Choose a Name for your template so you\u2019ll be able to distinguish this page from other landing pages you might want to create later.<\/li>\n
        • Click the Start with this Template button to launch the Classic Builder. You’ve created and started your first page!<\/li>\n<\/ol>\n
          \n
          \n

          Adding and Editing Page Sections in the Classic Builder<\/span><\/h2>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
          \n
            \n
          • Adding multiple sections to your landing page is a great way to structure and organize your page content.<\/li>\n
          • \n
            \n
            In the Classic Builder, you can add background images to your entire page sections, adjust their size and positioning, add background videos, and more!<\/div>\n<\/div>\n<\/li>\n<\/ul>\n
            \n

            Add a Page Section in the Classic Builder<\/h2>\n
            \n
              \n
            • The Section sectionbutton.png Widget is the foundation for your landing page. To add a page section to your landing page, Drag and drop the Section sectionbutton.png widget to the center of the Classic Builder.<\/li>\n
            • \n
              \n
              Expand and contract the Section borders using the guides positioned at every corner.<\/div>\n
              \n
              \n
              Once you’ve added a page section to your landing page, you can proceed to add new elements to your page.<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n
              \n
              \n
              \n
              \n

              Editing Your Page Section Properties<\/h3>\n
              \n

              Once you’ve added or selected (single-clicked) a page section, you can edit your page section’s appearance by using the Properties tab on the right side of the Classic Builder:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

              <\/div>\n
              \"\"<\/div>\n
              <\/div>\n
              \n
              \n

              The Geometry Section<\/h3>\n

              \"\"<\/p>\n

              \n
                \n
              1. \u00a0Use the Size fields to adjust the Width and Height of your page section manually.<\/li>\n
              2. Use Gap Below to adjust the space beneath the page section.<\/li>\n<\/ol>\n
                \n

                The Border Section<\/h3>\n

                \"\"<\/p>\n<\/div>\n

                \n
                  \n
                1. \u00a0Use the Border fields to determine the type, color, thickness, and location of the section’s border.<\/li>\n
                2. The Corner Radius slider allows you round the corners of your section frame – click the + button to expand and round only certain corners, or select Ensure maximum curvature! to apply the roundest corners possible for the size of your page section.<\/li>\n<\/ol>\n
                  \n

                  The Background Section<\/h3>\n

                  \"\"<\/p>\n

                  \n
                  Use the Style drop-down menu to determine what type of background you’d like to apply to the section.<\/div>\n

                  From the drop-down, select any of the following options:<\/h4>\n

                  Solid Color:<\/span><\/strong>\u00a0Choose the color and opacity for the section’s background.<\/span><\/p>\n

                  Pattern:<\/span><\/strong>\u00a0Upload an image that will repeat and create a patterned effect for the background section. You can also change the position and tiling of your pattern by expanding the Advanced Settings.<\/span><\/p>\n

                  Gradient:<\/span><\/strong>\u00a0Select three colors to create a gradient effect for your section. Choose the base, top, and bottom colors to create your effect.<\/span><\/p>\n

                  Video:<\/span><\/strong>\u00a0Select a video source and play that video in the background of the page section.<\/span><\/p>\n

                  Image:<\/span><\/strong>\u00a0Upload an image you’d like to use as the background image for that section.<\/span><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

                  \n

                  Adding and Editing Text<\/span><\/h2>\n
                  \n

                  To add a new text block to your landing page,<\/h4>\n
                  \n
                    \n
                  1. Navigate your page in the Classic Builder.<\/li>\n
                  2. From the left-hand side controls, drag and drop the Text text_widget_button.png widget to the section of your page where you\u2019d like to add your text block.<\/li>\n
                  3. A new text block will appear on your page, which you can edit further:
                    \n\"\"
                    \nThe buttons that run along the top of your text block allow you to shift your text block’s alignment in relation to the page section where you\u2019ve placed your text block.<\/li>\n
                  4. Double-click within the dashed lines to edit the text and type in your content.
                    \nYou can use multiple text blocks on a single landing page and move them on the page as you\u2019d like.<\/li>\n<\/ol>\n
                    \n

                    Customizing, Editing, & Hyperlinking your Text<\/h2>\n
                    \n
                    You can add additional styles, formatting, or hyperlinks to the text on your page.<\/div>\n
                    \n
                    \n
                      \n
                    1. \u00a0Double-click the text in the Classic Builder.<\/li>\n
                    2. \u00a0Navigate to the Properties tab on the right side of the Classic Builder.<\/li>\n<\/ol>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                      \"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n
                      \n

                      Adding image<\/span><\/h2>\n
                        \n
                      1. To add your first image, drag and drop the\u00a0Image\u00a0<\/strong>widget\u00a0\"image5.png\"\u00a0from the left-hand side of the builder onto your landing page; this will also launch the\u00a0Choose Image<\/strong>\u00a0dialog box:\n

                        \"\"<\/li>\n

                      2. There are three options for adding images to your landing page using the Choose Image dialog box. All options are available by clicking through the tabs at the top left-hand corner of the dialog box:\n

                        \"\"<\/li>\n

                      3. You can sort through these images using the Sort drop-down menu in the top left-hand corner of the dialog box. Click the arrow on the right-hand side of the drop-down menu to toggle ascending or descending order:
                        \n\"\"<\/li>\n
                      4. You can also look for specific images using the search field at the top right-hand corner of the dialog box.<\/li>\n
                      5. To add a selected image to your landing page, double-click the image or select the image & click the Choose button at the bottom right-hand corner of the dialog box.\n

                        \"\"<\/li>\n<\/ol>\n

                        Replacing an Image<\/h3>\n
                          \n
                        • Double-click the image to relaunch the\u00a0Image Library<\/strong>, or<\/li>\n
                        • Select the image, then the\u00a0Change Image\u00a0<\/strong>button from the Properties panel:<\/li>\n<\/ul>\n

                          \"\"<\/p>\n

                          Adding Alt Text and Titles to Images<\/h3>\n

                          \"\"<\/p>\n

                          Uploading Your Images<\/h3>\n

                          In the\u00a0Choose Image<\/strong>\u00a0dialog box, click the\u00a0Upload New Image<\/strong>\u00a0button in the bottom left-hand corner of the page:<\/p>\n

                          \"\"<\/p>\n

                            \n
                          1. Your operating system will launch a folder of your files & documents; search your files\u00a0for the image you want to upload.<\/li>\n
                          2. Once you’ve found the image, click the\u00a0Open<\/strong>\u00a0or\u00a0Select<\/strong>\u00a0button.<\/li>\n
                          3. The image will appear in your\u00a0Image Library\u00a0<\/strong>in Unbounce.<\/li>\n
                          4. Select the image & click the\u00a0Choose\u00a0<\/strong>button at the bottom right-hand corner of the dialog box; the image will appear on your landing page.<\/li>\n<\/ol>\n

                            Scale & Resize Your Images<\/h3>\n

                            If the uploaded image is larger compared to the size of your landing page or template,\u00a0a dialog box will appear, alerting you of this size discrepancy:<\/p>\n

                            \"\"<\/p>\n

                            Use Full Size<\/strong>: This option will add the image to the page, regardless of size.<\/p>\n

                            Scale Image to Fit Page<\/strong>: This option will scale the image smaller to fit in the confines of the landing page (in other words, to fit within the landing page’s width).<\/p>\n

                            \"\"<\/p>\n

                            Don’t Scale: <\/strong>This option will add the image to the page, regardless of size.<\/p>\n

                            Scale Image to Fit<\/strong>: This option will scale the image smaller to fit the same width and height of the image you’re replacing it with.<\/p>\n

                            Select Multiple Images<\/h3>\n
                              \n
                            1. Hold down the Shift key on your keyboard to select multiple images simultaneously.<\/li>\n
                            2. While holding down the Shift key, use the left and right arrow keys on your keyboard to move the images:\"\"<\/li>\n<\/ol>\n

                              Remove and Delete Your Images<\/h3>\n

                              \"\"<\/p>\n<\/div>\n

                              Adding and Editing Buttons<\/h2>\n
                                \n
                              1. Navigate to the\u00a0Widget<\/strong>\u00a0Panel on the left-hand side.<\/li>\n
                              2. Drag and drop the\u00a0Button<\/strong>\u00a0\"buttonwidget.png\"\u00a0widget to the section of the page where you’d like the button to appear:<\/li>\n<\/ol>\n

                                \"\"<\/p>\n

                                The default button will appear on your page:<\/p>\n

                                \"\"<\/p>\n

                                Setting up Button Click-Actions<\/h3>\n
                                  \n
                                1. Select the button.<\/li>\n
                                2. Click the\u00a0Properties<\/strong>\u00a0tab on the right-hand side of the Classic Builder.<\/li>\n
                                3. Scroll down to the\u00a0Click Action<\/strong>\u00a0section:<\/li>\n<\/ol>\n

                                  \"\"<\/p>\n

                                  Go to URL<\/strong>: The visitor will be redirected to a URL of your choice.<\/p>\n

                                    \n
                                  • Tick the option\u00a0Pass through URL parameters<\/strong> if there are custom URL parameters or referral sources you wish to pass through with the button click.<\/li>\n
                                  • The\u00a0Target<\/strong> field controls how the page visitor is redirected, e.g., a\u00a0New tab or window<\/strong>\u00a0will launch the URL in a new tab, whereas the Same tab or window<\/strong>\u00a0will redirect the page visitor from your landing page to the chosen URL.<\/li>\n<\/ul>\n

                                    Styling & Editing Your Button with the Properties Tab<\/h3>\n

                                    The\u00a0Properties<\/strong>\u00a0tab contains five sections that allow you to edit your button further:\u00a0Geometry<\/strong>,\u00a0Click Action<\/strong>,\u00a0Button Label<\/strong>,\u00a0Appearance<\/strong>,\u00a0and Element Metadata.\u00a0<\/strong><\/p>\n

                                      \n
                                    • Use the\u00a0Size<\/strong>\u00a0fields to enter an exact numerical value in pixels for the\u00a0W<\/strong>idth and\u00a0H<\/strong>eight dimensions of your button.<\/li>\n
                                    • Use the\u00a0Position<\/strong>\u00a0fields to enter an exact numerical value in pixels to move your button to the\u00a0L<\/strong>eft of the page and the\u00a0T<\/strong>op of the page.<\/li>\n<\/ul>\n

                                      \"\"<\/p>\n

                                      Adding and Editing Forms<\/span><\/h2>\n
                                        \n
                                      1. Drag and drop the\u00a0Form<\/strong>\u00a0\"form_button.png\"Widget from the left side of the Unbounce Builder to the place on the page where you\u2019d like to add your new form. A new dialog box will appear.\"\"<\/li>\n
                                      2. Click on the form options left of the dialog box to populate your chosen form fields.<\/li>\n
                                      3. A preview of your form fields will appear in the middle of the dialog box.<\/li>\n<\/ol>\n
                                          \n
                                        • You can change the order of your form fields or delete a form field by using the directional buttons<\/strong>\u00a0or the\u00a0garbage icon<\/strong>.\u00a0\"form_fields_directional_and_garbage_button.png\"<\/li>\n
                                        • Once you\u2019ve clicked on a form field in the middle column, it will appear grey<\/strong>. You can edit the specific form field in the column on the right side of the box.<\/li>\n
                                        • If you’d like to make your form field required for submission, select the check box beside\u00a0Required Field<\/strong>\u00a0under Validation Options.<\/li>\n<\/ul>\n

                                          \"\"<\/p>\n

                                          Once you\u2019ve customized your form to your needs, click the\u00a0Done<\/strong>\u00a0button in the bottom right corner of the dialog box.<\/p>\n

                                          Editing Your Form Appearance Properties<\/h3>\n

                                          Once you\u2019ve selected your form fields and created your form, you can edit your form\u2019s appearance by using the Properties tab on the right side of the Builder. Click on the form you’d like to edit to access the Form Properties tab.<\/p>\n

                                          \"\"<\/p>\n

                                          The\u00a0Geometry<\/strong>\u00a0Section<\/h3>\n

                                          \"\"<\/p>\n

                                            \n
                                          • Use the\u00a0Size<\/strong>\u00a0fields to enter an exact numerical value in pixels for the\u00a0W<\/strong>idth of your form.<\/li>\n
                                          • Use the\u00a0Position<\/strong>\u00a0fields to enter an exact numerical value in pixels to move your form in relation to the\u00a0L<\/strong>eft of the page and the\u00a0T<\/strong>op of the page.<\/li>\n<\/ul>\n

                                            The\u00a0Label Attributes<\/strong>\u00a0<\/strong>Section<\/h3>\n

                                            \"\"<\/p>\n

                                            The\u00a0Label Attributes<\/strong>\u00a0section allows you to adjust the appearance of your form labels.<\/p>\n

                                            The\u00a0Field Attributes<\/strong>\u00a0Section<\/h3>\n

                                            \"\"<\/p>\n

                                            The\u00a0Button Settings<\/strong>\u00a0Section<\/h3>\n

                                            \"\"<\/p>\n

                                            If you want to manually set your form submission button placement, untick the\u00a0Auto position submit button<\/strong>\u00a0checkbox.<\/p>\n

                                            Adding Videos<\/span><\/h2>\n
                                              \n
                                            • A video that you’ve uploaded to a 3rd-party video hosting provider, such as Wistia, Vimeo, or YouTube, and<\/li>\n
                                            • An embed code (iframe code format).<\/li>\n<\/ul>\n

                                              Embedding a Video via iFrame<\/h3>\n

                                              To start, navigate back to your video hosting provider. Within the embed or share settings of the video hosting provider, locate an <iframe> embed code.<\/p>\n

                                              \"\"<\/p>\n

                                              Copy the embed code, and navigate to the Unbounce builder of the page you’d like to add a video for.<\/p>\n

                                              1. Navigate to the page editor in the Classic Builder.<\/p>\n

                                              2. From the builder’s Widgets Panel on the left-hand side<\/b>, drag and drop the<\/span>\u00a0Embed Video<\/strong>\u00a0<\/span>\"embed-video.png\" widget onto your page.<\/span><\/p>\n


                                              \n<\/span>\"\"<\/p>\n

                                              3. Be sure to place this widget in the space where you’d like the video to appear.<\/p>\n

                                              4. A new dialog box will appear.<\/p>\n

                                              5. Paste the embed code from your video hosting provider into the Embed a Video<\/strong>\u00a0dialog box:<\/p>\n

                                              \"\"<\/p>\n

                                              6. Click the Save Code<\/strong>\u00a0button, and you’re all set! The embedded video will appear on the landing page.<\/p>\n

                                              You can manually change the size and position of your video by clicking & dragging the video using the resize buttons, allowing you to increase or decrease your video’s size to fit the dimensions of your landing page:<\/p>\n

                                              \"\"<\/p>\n

                                              You can only test and view embedded videos on the live page (not in Preview or the builder itself).<\/p>\n

                                              Embedding a Wistia Video<\/h3>\n

                                              When embedding a Wistia video, ensure the\u00a0Embed Type is set to “Fallback”:<\/strong><\/p>\n

                                              \"\"<\/p>\n

                                                \n
                                              1. Copy the embed code from Wistia and navigate to the Classic Builder.<\/li>\n
                                              2. Drag and drop the\u00a0Embed Video<\/strong>\u00a0\"embed-video.png\"\u00a0widget onto your page.<\/li>\n
                                              3. Once you’ve pasted in the code, remove any <div> or <script> tags from the embed code, so all that remains are the <iframe> tags:<\/li>\n
                                              4. Click the blue\u00a0Save Code<\/strong>\u00a0button, and you’re all set!<\/li>\n<\/ol>\n

                                                Enabling Full-Screen Options for Wistia Videos<\/h3>\n

                                                When embedding your Wistia video, iframe embeds must contain\u00a0allowfullscreen<\/strong>\u00a0attributes for this feature to work. If\u00a0allowfullscreen<\/strong>\u00a0attributes are missing, then the fullscreen button will not appear.<\/p>\n

                                                You will also need to ensure that the attribute\u00a0allow=” fullscreen”<\/strong>\u00a0exists within the code, so that the fullscreen button will appear. See both attributes in the screenshot below:<\/p>\n

                                                \"\"<\/p>\n

                                                Adding\u00a0Video Backgrounds<\/h3>\n
                                                  \n
                                                1. Select\u00a0the\u00a0page section to which you want to add a video background.<\/li>\n
                                                2. In the\u00a0Properties<\/strong>\u00a0Tab on the right side of the Builder.<\/li>\n
                                                3. Scroll down to the\u00a0Background<\/strong>\u00a0section, and select the\u00a0Style<\/strong>\u00a0drop-down menu. Choose the\u00a0Video\u00a0<\/strong>option:<\/li>\n<\/ol>\n

                                                  \"\"<\/p>\n

                                                  Paste your video URL in the Video URL field and press\u00a0Enter\u00a0<\/strong>on your keyboard to save<\/p>\n

                                                    \n
                                                  1. To preview your video background, click the\u00a0Save\u00a0<\/strong>button at the top right-hand corner of the screen, then click the\u00a0Preview<\/strong>\u00a0button.<\/li>\n
                                                  2. A new window will open with a preview of your video background.<\/li>\n
                                                  3. Back in the Classic Builder, click\u00a0Publish or Republish<\/strong>\u00a0to publish your page.<\/li>\n
                                                  4. You’re done!<\/li>\n<\/ol>\n

                                                    Video Content and the Mobile Experience<\/h3>\n

                                                    Only certain mobile devices can support Adobe Flash-friendly content. To ensure video content works on most devices, avoid using Flash.<\/p>\n

                                                    Video backgrounds aren’t the best experience on mobile devices. When you add a video background to the desktop version of your page, the system will, by default, display a static image from your video on the mobile version of your page. Therefore, we recommend straying away from background videos for the mobile version of your landing page.<\/p>\n

                                                    <\/div>","protected":false},"excerpt":{"rendered":"

                                                    What Is a Landing Page? In digital marketing, a landing page is a standalone web page created specifically for a marketing or advertising campaign. It\u2019s where a visitor \u201clands\u201d after they click on a link in an email, or ads from Google, Bing, YouTube, Facebook, Instagram, Twitter, or similar places on the web. What is […]<\/p>\n","protected":false},"author":1249,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":31},"categories":[3429,1953],"tags":[5045,2128],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/55808"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1249"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=55808"}],"version-history":[{"count":11,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/55808\/revisions"}],"predecessor-version":[{"id":59792,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/55808\/revisions\/59792"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=55808"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=55808"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=55808"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}