{"id":65873,"date":"2016-03-07T07:36:29","date_gmt":"2016-03-07T12:36:29","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=65873"},"modified":"2016-05-16T10:35:07","modified_gmt":"2016-05-16T14:35:07","slug":"landing-page-html-templates-with-builder-how-to-edit-template-and-export-content","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/landing-page-html-templates-with-builder-how-to-edit-template-and-export-content.html","title":{"rendered":"Landing Page HTML templates with builder. How to edit template and export content"},"content":{"rendered":"

This tutorial shows how to work with Landing Page HTML templates with builder. <\/p>\r\nLanding Page HTML templates with builder. How to edit template and export content<\/a>\r\n

    \r\n
  1. \r\n

    Make sure you have uploaded builder folder to your hosting. Open builder using the link like http:\/\/yoursite.com\/builder (please replace yoursite.com with actual website domain name). Go to Menu<\/strong> and click on the appropriate section. Each section has a set of elements:<\/p>\r\n\r\n\"Landing<\/a>\r\n<\/li>\r\n

  2. \r\n

    Drag element to the canvas. You can add several elements to the canvas. You can view page source code of particular element using source<\/strong> button. You can also reset<\/strong> element to original state or remove<\/strong> it using appropriate buttons:<\/p>\r\n \r\n\"Landing<\/a>\r\n<\/li>\r\n

  3. \r\n

    Builder has the following Building Modes<\/strong>: Elements<\/strong> (you can add elements to canvas in this mode), Content <\/strong>(you can modify content like text and links in this mode), Details <\/strong>(you can change styles and icons in this mode):<\/p>\r\n\r\n\"Landing<\/a>\r\n<\/li>\r\n

  4. \r\n

    Select Building Mode Content<\/strong> in order to change content on your site. Click on section with content. You can modify text in visual editor. Also, you can set font styles. Use Undo and Redo buttons in order to restore content to a previous state. You can also view the content in html mode:<\/p>\r\n\r\n\"Landing<\/a>\r\n\r\n<\/li>\r\n\r\n

  5. \r\n

    You can also set links in editor. Select text you would like to link. Add link:<\/p>\r\n\r\n\"Landing<\/a>\r\n\r\n<\/li>\r\n\r\n

  6. \r\n

    Select Details<\/strong> building mode in order to change links and styles. Let’s change button link and color. Click on the button. Buttons, icons and other elements may have different options. Style section is editable for specific elements only<\/em>. Change hover background color and text color. Apply changes:\r\n\r\n<\/p>\r\n\r\n\"Landing<\/a>\r\n\r\n\r\n<\/li>\r\n

  7. \r\n

    We have changed background color and text color. Click on Link<\/strong> tab. You can choose a page, page block or set custom link. We have set custom link. Be sure to apply changes after modifications:<\/p>\r\n\r\n\"Landing<\/a>\r\n<\/li>\r\n

  8. \r\n

    You can also change icon in Details<\/strong> building mode. Make sure Details<\/strong> building mode is selected and click on the icon. Go to Icons<\/strong> section. Select the desired icon. Apply your changes:<\/p>\r\n\r\n\"Landing<\/a>\r\n<\/li>\r\n

  9. \r\n

    Let’s change Gallery images.<\/strong> Make sure you have selected Details <\/strong>Building mode. Click on the image. Go to link<\/strong> section. Currently image is linked to the image. It means that image will show up in the lightbox:<\/p>\r\n\r\n\"Landing<\/a>\r\n<\/li>\r\n

  10. \r\n

    Go to Image<\/strong> section. Enter path to a new image or upload it. We are going to upload an image. Apply changes:<\/p>\r\n\r\n\"Landing<\/a>\r\n<\/li>\r\n

  11. \r\n

    Go to link<\/strong> section. And specify path to new image. You can copy path of uploaded image in Image<\/strong> section. Apply changes:<\/p>\r\n\r\n\"Landing<\/a>\r\n<\/li>\r\n

  12. \r\n

    We have changed the image:<\/p>\r\n\r\n\"Landing<\/a>\r\n<\/li>\r\n

  13. \r\n

    Save changes <\/strong>you have performed in builder using Save changes (!)<\/strong> button:<\/p>\r\n\r\n\"Landing<\/a>\r\n<\/li>\r\n

  14. \r\n

    Export website<\/strong>:<\/p>\r\n\r\n\"Landing<\/a>\r\n<\/li>\r\n

  15. \r\n

    Fill out the form and click Export Now<\/strong>:<\/p>\r\n\r\n\"Landing<\/a>\r\n<\/li>\r\n

  16. \r\n

    Zip file with exported website will be downloaded to your computer. You should upload zip file to your hosting and unzip it using hosting file manager (in case such option is available). Alternatively, you can unzip file and upload files using FTP. We are going to upload files using hosting file manager:<\/p>\r\n\r\n\"Landing<\/a>\r\n<\/li>\r\n

  17. \r\n

    Please check your site:<\/p>\r\n\r\n\"Landing<\/a>\r\n<\/li>\r\n\r\n<\/ol>\r\n\r\n

    Feel free to check the detailed video tutorial below:<\/p>\r\n\r\nLanding Page HTML templates with builder. How to edit template and export content<\/a>","protected":false},"excerpt":{"rendered":"

    This tutorial shows how to work with Landing Page HTML templates with builder.<\/p>\n","protected":false},"author":39,"featured_media":65892,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2039],"tags":[1951,616,1048,576,1117,572],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/65873"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/39"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=65873"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/65873\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/65892"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=65873"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=65873"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=65873"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}