{"id":99458,"date":"2023-12-06T10:12:45","date_gmt":"2023-12-06T10:12:45","guid":{"rendered":"\/tutorials\/?p=99458"},"modified":"2026-10-06T03:01:42","modified_gmt":"2026-10-06T03:01:42","slug":"how-to-edit-a-website","status":"publish","type":"post","link":"\/ca\/tutorials\/how-to-edit-a-website\/","title":{"rendered":"How to edit a website: 4 methods for any platform"},"content":{"rendered":"<p class=\"wp-block-paragraph\">To edit a website, open it in the tool it was built with: the visual builder provided by your platform, the WordPress dashboard for WordPress sites, or a code editor and file manager for hand-coded files. Browser developer tools offer a fourth option for previewing a change privately &ndash; nothing you do there reaches visitors.<\/p><p class=\"wp-block-paragraph\">There are four editing methods:<\/p><ul class=\"wp-block-list\">\n<li><strong>Website builder.<\/strong> Click elements directly in a visual editor and publish.<\/li>\n\n\n\n<li><strong>WordPress.<\/strong> Update pages in the block editor and theme elements in the Site Editor.<\/li>\n\n\n\n<li><strong>HTML, CSS, and JavaScript.<\/strong> Open and modify source files directly.<\/li>\n\n\n\n<li><strong>Browser developer tools.<\/strong> Preview temporary changes without affecting the live site.<\/li>\n<\/ul><h2 class=\"wp-block-heading h-t-title-2\" id=\"h-which-method-should-you-use-to-edit-your-website\">Which method should you use to edit your website?<\/h2><p class=\"wp-block-paragraph\">Use the method that matches how your site was built: the builder for builder sites, the WordPress dashboard for WordPress sites, and a code editor for hand-coded sites.<\/p><p class=\"wp-block-paragraph\">Three checks tell you which setup you have. Your site runs on a website builder if your hosting or platform account has an <strong>Edit website<\/strong> or <strong>Edit site<\/strong> button that opens a drag-and-drop visual editor. It&rsquo;s WordPress if <strong>yourdomain.tld\/wp-admin <\/strong>loads a login screen. The site is hand-coded if your hosting file manager shows <strong>.html<\/strong> page files in <strong>public_html<\/strong> and no <strong>wp-content<\/strong> folder.<\/p><p class=\"wp-block-paragraph\">These three methods require account access with edit rights: the builder login, a WordPress Editor or Administrator account, or hosting file manager credentials. Without that access, only browser developer tools are available. Those edits appear only to you and disappear when you refresh the page.<\/p><p class=\"wp-block-paragraph\"><a href=\"\/ca\/tutorials\/website-builder-vs-wordpress\/\" data-wpel-link=\"internal\" rel=\"follow\">Choosing between a visual builder and WordPress<\/a> shapes how easily you&rsquo;ll make those edits, so it&rsquo;s worth settling early if you haven&rsquo;t picked a platform yet.<\/p><figure tabindex=\"0\" class=\"wp-block-table\"><table><tbody><tr><td colspan=\"1\" rowspan=\"1\"><p><strong>What you see<\/strong><\/p><\/td><td colspan=\"1\" rowspan=\"1\"><p><strong>Platform or type<\/strong><\/p><\/td><td colspan=\"1\" rowspan=\"1\"><p><strong>Editing method<\/strong><\/p><\/td><td colspan=\"1\" rowspan=\"1\"><p><strong>Permanent?<\/strong><\/p><\/td><\/tr><tr><td colspan=\"1\" rowspan=\"1\"><p><span>An Edit website or Edit site button that opens a drag-and-drop editor<\/span><\/p><\/td><td colspan=\"1\" rowspan=\"1\"><p><span>Website builder (e.g. Hostinger, Wix, Squarespace, GoDaddy)<\/span><\/p><\/td><td colspan=\"1\" rowspan=\"1\"><p><span>Visual editor<\/span><\/p><\/td><td colspan=\"1\" rowspan=\"1\"><p><span>Yes<\/span><\/p><\/td><\/tr><tr><td colspan=\"1\" rowspan=\"1\"><p><span>yourdomain.tld\/wp-admin loads a login screen<\/span><\/p><\/td><td colspan=\"1\" rowspan=\"1\"><p><span>WordPress<\/span><\/p><\/td><td colspan=\"1\" rowspan=\"1\"><p><span>Block editor and Site Editor<\/span><\/p><\/td><td colspan=\"1\" rowspan=\"1\"><p><span>Yes<\/span><\/p><\/td><\/tr><tr><td colspan=\"1\" rowspan=\"1\"><p><span>.html, .css, and .js files in File Manager or FTP<\/span><\/p><\/td><td colspan=\"1\" rowspan=\"1\"><p><span>Custom code or downloaded template<\/span><\/p><\/td><td colspan=\"1\" rowspan=\"1\"><p><span>Code editor or file manager<\/span><\/p><\/td><td colspan=\"1\" rowspan=\"1\"><p><span>Yes<\/span><\/p><\/td><\/tr><tr><td colspan=\"1\" rowspan=\"1\"><p><span>No edit access, or you just want to test something<\/span><\/p><\/td><td colspan=\"1\" rowspan=\"1\"><p><span>Any<\/span><\/p><\/td><td colspan=\"1\" rowspan=\"1\"><p><span>Browser developer tools<\/span><\/p><\/td><td colspan=\"1\" rowspan=\"1\"><p><span>No<\/span><\/p><\/td><\/tr><\/tbody><\/table><\/figure><h3 class=\"wp-block-heading h-t-title-3\">What is the difference between permanent and temporary website edits?<\/h3><p class=\"wp-block-paragraph\">A permanent edit changes the files or database your site is served from, so every visitor sees the update immediately. A temporary edit made with browser developer tools only changes the page in your own browser tab and disappears when you reload.<\/p><p class=\"wp-block-paragraph\">Website builders, WordPress, and direct code edits all make permanent changes. Use browser developer tools when you want to preview how a change looks before committing to it.<\/p><h2 class=\"wp-block-heading h-t-title-2\" id=\"h-how-to-edit-a-website-with-a-website-builder\">How to edit a website with a website builder<\/h2><p class=\"wp-block-paragraph\">To edit a website built with a website builder, log in to the builder, open the visual editor, click the element you want to change, and publish.<\/p><p class=\"wp-block-paragraph\"><a href=\"\/ca\/tutorials\/what-is-a-website-builder\/\" data-wpel-link=\"internal\" rel=\"follow\">Most website builders<\/a> work similarly: in Hostinger, Wix, Squarespace, GoDaddy, and others, you select elements in a visual editor and edit them in place, and that approach carries over if you switch builders later. <\/p><p class=\"wp-block-paragraph\"><a href=\"\/ca\/ai-website-builder\" data-wpel-link=\"internal\" rel=\"follow\">Hostinger AI website builder<\/a> offers two modes: Manual mode for visual drag-and-drop editing, and Agentic mode for describing changes to an AI that edits the site&rsquo;s files directly. Both modes publish to the live site with a single click.<\/p><p class=\"wp-block-paragraph\">To open the editor for a Hostinger AI Builder site:<\/p><ol class=\"wp-block-list\">\n<li>Log in to <strong>Hostinger dashboard<\/strong> and go to <strong>Websites<\/strong>.<\/li>\n\n\n\n<li>Find the site you want to edit and click <strong>Edit website<\/strong>.<\/li>\n\n\n\n<li>The editor opens on the last page you viewed, ready to edit.<\/li>\n<\/ol><div class=\"wp-block-image wp-block-image aligncenter size-large\"><figure class=\"wp-lightbox-container\" data-wp-context='{\"imageId\":\"6ad0461690924\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ad0461690924\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2026\/10\/1791254987810-0.png\/public\" alt=\"The hPanel Websites list showing sites with different platform types, with the Edit website button highlighted on an AI Builder site.\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p class=\"wp-block-paragraph\">The top bar shows a <strong>Saved<\/strong> indicator as you work. Click <strong>Publish<\/strong> to push all changes live. The confirmation reads <strong>Your site&rsquo;s been updated!<\/strong> with links to view on desktop and mobile.<\/p><h3 class=\"wp-block-heading h-t-title-3\">How do you edit the content of a website visually?<\/h3><p class=\"wp-block-paragraph\">Click the text, image, or section you want to change, edit it in place on the page, and publish. No code required.<\/p><div class=\"wp-block-image wp-block-image aligncenter size-large\"><figure class=\"wp-lightbox-container\" data-wp-context='{\"imageId\":\"6ad0461691243\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ad0461691243\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2026\/10\/1791254993299-0.png\/public\" alt=\"The Hostinger AI Builder editor in Manual mode with a text block selected, showing the Edit text and AI Writer options highlighted in the toolbar.\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ul class=\"wp-block-list\">\n<li><strong>Text.<\/strong> Click any text on the page. The toolbar shows <strong>Edit text<\/strong> to type directly, and <strong>AI Writer<\/strong> to rephrase, lengthen, shorten, check grammar, or change tone.<\/li>\n\n\n\n<li><strong>Images. <\/strong>Click any image. The toolbar shows <strong>Edit image<\/strong> for settings, <strong>Generate image<\/strong> to create a new one with AI, and <strong>Change image<\/strong> to upload a replacement.<\/li>\n\n\n\n<li><strong>Sections.<\/strong> Hover over any section to reveal the toolbar. Click <strong>Edit section<\/strong> to change the background and layout. Use the up and down arrows to reorder sections on the page. Click <strong>+ Add section<\/strong> between any two sections to open a picker with AI-generated options, a blank section, or pre-made templates.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Pro tip                <\/p>\n            <\/div>\n            <p class=\"protip__content\">Switch to mobile view using the phone icon in the top bar before publishing. Sections that look right on desktop sometimes need minor adjustments on smaller screens.<\/p>\n                    <\/div>\n        <\/p><h3 class=\"wp-block-heading h-t-title-3\">How do you edit a website by describing changes to AI?<\/h3><p class=\"wp-block-paragraph\">Describe the change in plain language and the AI applies it to your site&rsquo;s files. In Hostinger AI Builder, requests go in the <strong>Ask for changes<\/strong> panel in Agentic mode.<\/p><p class=\"wp-block-paragraph\"><div class=\"announcement-block announcement-block--important\">\n            <span class=\"announcement-block__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                          d=\"M12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5ZM13.637 7.65198C13.637 6.74791 12.9041 6.01501 12 6.01501C11.0959 6.01501 10.363 6.74791 10.363 7.65198C10.5335 9.53749 10.875 13.383 10.875 13.383C10.875 14.0043 11.3787 14.508 12 14.508C12.6213 14.508 13.125 14.0043 13.125 13.383V13.38L13.637 7.65198ZM11.9927 15.714C11.3714 15.714 10.8677 16.2177 10.8677 16.839C10.8677 17.4603 11.3714 17.964 11.9927 17.964H12.0073C12.6286 17.964 13.1323 17.4603 13.1323 16.839C13.1323 16.2177 12.6286 15.714 12.0073 15.714H11.9927Z\"\n                          fill=\"#FEA419\"\/>\n                <\/svg>\n                Important\n            <\/span>\n            <p class=\"announcement-block__content\">\n                Switching a Manual-mode site to Agentic mode creates a new copy of the site on a separate temporary domain. Your original Manual-mode site stays in Hostinger dashboard&rsquo;s Websites list unchanged. Connect the new copy to your live domain when you&rsquo;re satisfied with the result.\n            <\/p><\/div><\/p><p class=\"wp-block-paragraph\">Specific requests get better results. Say what to change, where it should appear, and how it should look:<\/p><p class=\"wp-block-paragraph\"><strong>Change the announcement bar to &ldquo;Free shipping on orders over $75&rdquo; and add a testimonials section below the hero with three short customer quotes, using the site&rsquo;s existing colors and fonts.<\/strong><\/p><p class=\"wp-block-paragraph\">The AI reads the site&rsquo;s files, applies the changes, and shows a summary with an <strong>Undo<\/strong> option.<\/p><p class=\"wp-block-paragraph\">To edit text directly without prompting, turn on <strong>Select &amp; edit<\/strong> above the editor preview, click the element, and type.<\/p><figure class=\"wp-block-image size-large\"><a aria-label=\"Ai builder\" class=\"hgr-tutorials-cta hgr-tutorials-cta-horizons\" href=\"\/ca\/ai-builder\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"600\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/Horizons-in-text-banner-no-code-website-builder.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-129223\"  sizes=\"auto, (max-width: 2048px) 100vw, 2048px\" \/><\/a><\/figure><h2 class=\"wp-block-heading h-t-title-2\" id=\"h-how-to-edit-a-wordpress-website\">How to edit a WordPress website<\/h2><p class=\"wp-block-paragraph\">To edit a WordPress website, log in at yourdomain.com\/wp-admin, open pages in the block editor to update their content, and go to <strong>Appearance &rarr; Editor<\/strong> to change headers, footers, menus, and site-wide styles.<\/p><p class=\"wp-block-paragraph\"><div class=\"announcement-block announcement-block--important\">\n            <span class=\"announcement-block__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                          d=\"M12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5ZM13.637 7.65198C13.637 6.74791 12.9041 6.01501 12 6.01501C11.0959 6.01501 10.363 6.74791 10.363 7.65198C10.5335 9.53749 10.875 13.383 10.875 13.383C10.875 14.0043 11.3787 14.508 12 14.508C12.6213 14.508 13.125 14.0043 13.125 13.383V13.38L13.637 7.65198ZM11.9927 15.714C11.3714 15.714 10.8677 16.2177 10.8677 16.839C10.8677 17.4603 11.3714 17.964 11.9927 17.964H12.0073C12.6286 17.964 13.1323 17.4603 13.1323 16.839C13.1323 16.2177 12.6286 15.714 12.0073 15.714H11.9927Z\"\n                          fill=\"#FEA419\"\/>\n                <\/svg>\n                Important\n            <\/span>\n            <p class=\"announcement-block__content\">\n                This guide uses WordPress 7.1 with the Twenty Twenty-Five theme. The block editor steps work the same across themes, but the Appearance submenu and theme editing options look different depending on which theme is active.\n            <\/p><\/div><\/p><h3 class=\"wp-block-heading h-t-title-3\">How to edit WordPress pages and posts with the block editor<\/h3><p class=\"wp-block-paragraph\">To edit pages and posts on WordPress, open the page in the block editor and click any block to change its content, move it, or remove it. The block editor only covers content inside the page, not site-wide elements like the header or footer.<\/p><ol class=\"wp-block-list\">\n<li>Log in to your WordPress dashboard at yourdomain.com\/<strong>wp-admin<\/strong> (or click <strong>WP Admin<\/strong> next to your site in Hostinger dashboard if you&rsquo;re using Hostinger).<\/li>\n\n\n\n<li>Go to <strong>Pages &rarr; All Pages<\/strong>.<\/li>\n\n\n\n<li>Click the page title to open it in the block editor.<\/li>\n\n\n\n<li>Click any block to select it. The toolbar above the block shows formatting, alignment, and link options.<\/li>\n<\/ol><div class=\"wp-block-image wp-block-image aligncenter size-large\"><figure class=\"wp-lightbox-container\" data-wp-context='{\"imageId\":\"6ad046169497a\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ad046169497a\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2026\/10\/1791255002762-0.png\/public\" alt=\"The WordPress block editor with a paragraph block selected and the block toolbar showing formatting options above it.\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol class=\"wp-block-list\">\n<li>Click the <strong>+<\/strong> icon to add new blocks. A block is WordPress&rsquo;s term for a single piece of content: a paragraph, image, heading, or button.<\/li>\n\n\n\n<li>Click <strong>Save<\/strong> in the top right corner.<\/li>\n\n\n\n<li>A message at the bottom of the screen shows <strong>Page updated.<\/strong> Click <strong>View Page<\/strong> to confirm the change is live.<\/li>\n<\/ol><p class=\"wp-block-paragraph\">        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Pro tip                <\/p>\n            <\/div>\n            <p class=\"protip__content\">Some WordPress sites use page builder plugins like Elementor or Divi, which replace the block editor with their own drag-and-drop interface. Edit the page inside that plugin if it opens there instead &ndash; the block editor can't access content created with those tools.<\/p>\n                    <\/div>\n        <\/p><p class=\"wp-block-paragraph\">When you create a new page, WordPress shows a <strong>Choose a pattern<\/strong> popup with ready-made layouts. Close it to start with a blank page, or pick a layout and replace the placeholder content.<\/p><p class=\"wp-block-paragraph\">The <strong>Slug<\/strong> field is in the <strong>Page<\/strong> tab of the settings sidebar on the right. Edit it to change the page&rsquo;s URL path &ndash; for example, from <strong>\/about<\/strong> to <strong>\/our-story<\/strong>.<\/p><h3 class=\"wp-block-heading h-t-title-3\">How to edit the header, footer, and menu in WordPress<\/h3><p class=\"wp-block-paragraph\">To edit the header, footer, or menu in WordPress, go to <strong>Appearance &rarr; Editor<\/strong> if you use a block theme, or <strong>Appearance &rarr; Customize<\/strong> if you use a classic theme. These elements belong to your theme rather than individual pages, so they&rsquo;re not accessible through the block editor.<\/p><p class=\"wp-block-paragraph\"><strong>Block themes<\/strong> (such as Twenty Twenty-Five):<\/p><p class=\"wp-block-paragraph\">In <strong>Appearance &rarr; Editor<\/strong>, the Design panel on the left lists your theme&rsquo;s main elements: <strong>Patterns<\/strong> for the header and footer, <strong>Navigation<\/strong> for menus, <strong>Identity<\/strong> for the site title and logo, and <strong>Styles<\/strong> for fonts and colors. <\/p><div class=\"wp-block-image wp-block-image aligncenter size-large\"><figure class=\"wp-lightbox-container\" data-wp-context='{\"imageId\":\"6ad04616955d5\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ad04616955d5\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2026\/10\/1791255008300-0.png\/public\" alt=\"The WordPress Site Editor Design panel showing Identity, Styles, Pages, Navigation, Patterns, and Templates on the left sidebar.\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p class=\"wp-block-paragraph\">Click any element to open it in the editor, make your changes directly, and click <strong>Save<\/strong> when done.<\/p><p class=\"wp-block-paragraph\"><strong>Classic themes<\/strong> (such as Astra or GeneratePress):<\/p><p class=\"wp-block-paragraph\">In <strong>Appearance &rarr; Customize<\/strong>, the live preview loads with a sidebar for header settings, menus, and site identity. Click <strong>Publish<\/strong> to save.<\/p><p class=\"wp-block-paragraph\"><strong>On any theme:<\/strong><\/p><p class=\"wp-block-paragraph\">Go to <strong>Settings &rarr; General<\/strong> to update the <strong>Site Title<\/strong> and <strong>Tagline<\/strong> fields.<\/p><h2 class=\"wp-block-heading h-t-title-2\" id=\"h-how-to-edit-a-websites-html-css-and-javascript\">How to edit a website&rsquo;s HTML, CSS, and JavaScript<\/h2><p class=\"wp-block-paragraph\">To edit a custom-coded website, open its source files, make the changes, and upload the updated files back to your server.<\/p><p class=\"wp-block-paragraph\">Code editing gives complete control over every part of the page. The main tradeoff is speed: every small change involves opening a file, editing it, and uploading it back.<a aria-label=\"Website builder vs coding\" href=\"\/ca\/tutorials\/website-builder-vs-coding\/\" data-wpel-link=\"internal\" rel=\"follow\"> <\/a><a href=\"\/ca\/tutorials\/website-builder-vs-coding\/\" data-wpel-link=\"internal\" rel=\"follow\">Whether to use a visual editor or edit the code directly<\/a> comes down to how often the site needs updating and how comfortable you are with HTML and CSS.<\/p><h3 class=\"wp-block-heading h-t-title-3\">How to open your website files for editing<\/h3><p class=\"wp-block-paragraph\">Open your website files in one of three places: your hosting file manager, an FTP (File Transfer Protocol) client, or a local copy on your own computer. Only the first two reach the server, so local edits still need uploading&hellip;<\/p><p class=\"wp-block-paragraph\"><strong>Hosting file manager<\/strong><\/p><p class=\"wp-block-paragraph\">A file manager edits files straight in your browser, with nothing to install. Most hosting providers include one in their control panel. In Hostinger dashboard, go to <strong>Files &rarr; File Manager<\/strong>. It opens at the account root, which is the main folder of your hosting account. <\/p><p class=\"wp-block-paragraph\">Double-click <strong>public_html<\/strong> to reach your site&rsquo;s files. Right-click any file and choose <strong>Edit<\/strong> to open it in a code editor inside your browser. Saving writes the change straight to the server.<\/p><div class=\"wp-block-image wp-block-image aligncenter size-large\"><figure class=\"wp-lightbox-container\" data-wp-context='{\"imageId\":\"6ad0461696215\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ad0461696215\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2026\/10\/1791255013905-0.png\/public\" alt=\"The hPanel File Manager open at the account root with the public_html folder visible.\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p class=\"wp-block-paragraph\">All site files must sit inside <strong>public_html<\/strong>. Files in the account root outside that folder are not served to visitors.<\/p><p class=\"wp-block-paragraph\"><strong>FTP<\/strong><\/p><p class=\"wp-block-paragraph\">An FTP client connects your computer straight to the server. Your hosting provider&rsquo;s control panel has your FTP credentials. In Hostinger dashboard, go to <strong>Files &rarr; FTP Accounts<\/strong> to find your hostname, username, and port (21). Connect with a client such as FileZilla, navigate to <strong>public_html<\/strong>, and open a file to edit it. FileZilla prompts you to upload it when you save.<\/p><p class=\"wp-block-paragraph\"><strong>Local project folder<\/strong><\/p><p class=\"wp-block-paragraph\">A local project folder is a copy of your site on your own computer, either downloaded from the server or unzipped from a template. Open the project folder in a code editor such as VS Code. Edit the files locally and upload changed files to <strong>public_html<\/strong> with your file manager or FTP client.<\/p><h3 class=\"wp-block-heading h-t-title-3\">What do you edit in HTML, CSS, and JavaScript?<\/h3><p class=\"wp-block-paragraph\">Edit HTML to change content and structure, CSS to change colors, fonts, and spacing, and JavaScript to change anything that responds to the user: menus that open, forms that validate, buttons that animate.<\/p><ul class=\"wp-block-list\">\n<li><strong>HTML.<\/strong> Open the <strong>.html<\/strong> file for the page you want to edit (the homepage is usually <strong>index.html<\/strong>) for<a data-wpel-link=\"internal\" href=\"\/ca\/tutorials\/what-is-html\/\" rel=\"follow\"> editing a page&rsquo;s HTML structure<\/a>: update heading text inside <strong>&lt;h1&gt;<\/strong> and <strong>&lt;h2&gt;<\/strong> tags, change link destinations in <strong>href<\/strong> attributes, or add and remove elements.<\/li>\n\n\n\n<li><strong>CSS.<\/strong> Open your site&rsquo;s <strong>.css<\/strong> file (the main one is usually <strong>style.css<\/strong>) for<a data-wpel-link=\"internal\" href=\"\/ca\/tutorials\/what-is-css\/\" rel=\"follow\"> changing a website&rsquo;s styling with CSS<\/a>: update a color value, change a font size, or adjust padding to shift the layout.<\/li>\n\n\n\n<li><strong>JavaScript.<\/strong> Open your <strong>.js<\/strong> file for<a aria-label=\"What is javascript\" href=\"\/ca\/tutorials\/what-is-javascript\/\" data-wpel-link=\"internal\" rel=\"follow\"> <\/a><a href=\"\/ca\/tutorials\/what-is-javascript\/\" data-wpel-link=\"internal\" rel=\"follow\">modifying interactive website behavior<\/a>: adjust a menu toggle, change a form validation rule, or modify an animation timing.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">    <div class=\"announcement-block announcement-block--warning\">\n        <span class=\"announcement-block__heading\">\n            <svg width=\"24\" height=\"26\" viewBox=\"0 0 24 26\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                d=\"M12 23.5C17.799 23.5 22.5 18.799 22.5 13C22.5 7.20101 17.799 2.5 12 2.5C6.20101 2.5 1.5 7.20101 1.5 13C1.5 18.799 6.20101 23.5 12 23.5ZM13.637 8.65198C13.637 7.74791 12.9041 7.01501 12 7.01501C11.0959 7.01501 10.363 7.74791 10.363 8.65198C10.5335 10.5375 10.875 14.383 10.875 14.383C10.875 15.0043 11.3787 15.508 12 15.508C12.6213 15.508 13.125 15.0043 13.125 14.383V14.38L13.637 8.65198ZM11.9927 16.714C11.3714 16.714 10.8677 17.2177 10.8677 17.839C10.8677 18.4603 11.3714 18.964 11.9927 18.964H12.0073C12.6286 18.964 13.1323 18.4603 13.1323 17.839C13.1323 17.2177 12.6286 16.714 12.0073 16.714H11.9927Z\"\n                fill=\"#BE1025\"\/>\n            <\/svg>\n            Warning        <\/span>\n        <p class=\"announcement-block__content\">\n            Changes to files on a live server take effect as soon as you save and every visitor sees them. One misplaced character can break the page, so save a copy of any file before you edit it.        <\/p>\n    <\/div>\n\n    <\/p><p class=\"wp-block-paragraph\">Each edit to HTML, CSS, or JavaScript follows the same sequence:<\/p><ol class=\"wp-block-list\">\n<li>Download or back up the file you&rsquo;re editing.<\/li>\n\n\n\n<li>Open it in a code editor or your hosting file manager.<\/li>\n\n\n\n<li>Make the change.<\/li>\n\n\n\n<li>Test locally by opening the file in a browser before uploading.<\/li>\n\n\n\n<li>Upload the updated file to your server.<\/li>\n\n\n\n<li>Reload the page with <strong>Ctrl+Shift+R<\/strong> (Windows\/Linux) or <strong>Cmd+Shift+R<\/strong> (Mac). This hard refresh pulls the page fresh from the server instead of the copy your browser saved, so you see your changes.<\/li>\n<\/ol><h3 class=\"wp-block-heading h-t-title-3\">How to edit a downloaded website template<\/h3><p class=\"wp-block-paragraph\">A downloaded HTML template is edited the same way as any site built from raw code: unzip the folder, open <strong>index.html<\/strong> in a code editor, replace the placeholder content, and upload the full folder to <strong>public_html<\/strong>.<\/p><ol class=\"wp-block-list\">\n<li>Unzip the template folder and open it in a code editor.<\/li>\n\n\n\n<li>Open <strong>index.html<\/strong> and search for placeholder text. Templates use &ldquo;Lorem ipsum&rdquo; as dummy filler text, so searching for &ldquo;Lorem&rdquo; finds it quickly. Also check for the template&rsquo;s own name or generic phrases like &ldquo;Your Name Here.&rdquo;<\/li>\n\n\n\n<li>Replace placeholder images in the <strong>images<\/strong> or <strong>assets<\/strong> folder with your own files, keeping the existing file names.<\/li>\n\n\n\n<li>Open <strong>style.css<\/strong> and update colors and fonts to match your brand.<\/li>\n\n\n\n<li>Test by opening <strong>index.html<\/strong> in a browser.<\/li>\n\n\n\n<li>Upload the full folder to <strong>public_html<\/strong> on your server.<\/li>\n<\/ol><p class=\"wp-block-paragraph\">The template requires a build step before uploading if the folder contains a <strong>package.json<\/strong> file. A build step runs a command that converts the source files into the final versions browsers can read. Check the template&rsquo;s documentation for the exact command.<\/p><h2 class=\"wp-block-heading h-t-title-2\" id=\"h-how-to-edit-a-website-temporarily-with-browser-developer-tools\">How to edit a website temporarily with browser developer tools<\/h2><p class=\"wp-block-paragraph\">Right-click the element you want to change, choose <strong>Inspect<\/strong>, and edit it in the panel that opens. You can also press <strong>Ctrl+Shift+I<\/strong> (Windows\/Linux) or <strong>Cmd+Option+I<\/strong> (Mac). The change appears only in your browser tab and disappears when you reload.<\/p><p class=\"wp-block-paragraph\">No change you make here reaches the server &ndash; even features within developer tools that appear to save changes only store them on your computer, not on the live site. To make any edit permanent, use your website builder, WordPress dashboard, or code editor.<\/p><p class=\"wp-block-paragraph\">The steps below use Chrome, but<a aria-label=\"How to inspect element using google chrome\" href=\"\/ca\/tutorials\/how-to-inspect-element-using-google-chrome\/\" data-wpel-link=\"internal\" rel=\"follow\"> <\/a><a href=\"\/ca\/tutorials\/how-to-inspect-element-using-google-chrome\/\" data-wpel-link=\"internal\" rel=\"follow\">making temporary changes with browser developer tools<\/a> works the same in Firefox, Edge, and Safari. Edge matches Chrome exactly. Firefox calls the Elements panel &ldquo;Inspector.&rdquo; Safari hides developer tools until you enable <strong>Show features for web developers<\/strong> in <strong>Safari &rarr; Settings &rarr; Advanced<\/strong>.<\/p><h3 class=\"wp-block-heading h-t-title-3\">How to change text on a website with inspect element<\/h3><p class=\"wp-block-paragraph\">To change text on a website with inspect element, locate the element through developer tools and edit its text content directly in the browser.<\/p><ol class=\"wp-block-list\">\n<li>Right-click the text you want to change and choose <strong>Inspect<\/strong>.<\/li>\n\n\n\n<li>The <strong>Elements<\/strong> panel opens and highlights the code for the element you right-clicked.<\/li>\n\n\n\n<li>Double-click the highlighted text to make it editable.<\/li>\n\n\n\n<li>Type the new text and press <strong>Enter<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image wp-block-image aligncenter size-large\"><figure class=\"wp-lightbox-container\" data-wp-context='{\"imageId\":\"6ad0461696ff7\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6ad0461696ff7\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2026\/10\/1791255019908-0.png\/public\" alt=\"Chrome developer tools with the Elements panel open, showing the selected text element highlighted in the panel and the corresponding text highlighted on the page.\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p class=\"wp-block-paragraph\">The change appears on the page immediately, but only in your browser tab.<\/p><p class=\"wp-block-paragraph\">        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Pro tip                <\/p>\n            <\/div>\n            <p class=\"protip__content\">To make the entire page editable like a document, open the <strong>Console<\/strong> tab and type <strong>document.designMode = 'on'<\/strong>, then press <strong>Enter<\/strong>. Type <strong>allow pasting<\/strong> and press <strong>Enter<\/strong> first if Chrome shows a pasting warning, then type the command directly. The page stays editable until you reload.<\/p>\n                    <\/div>\n        <\/p><h3 class=\"wp-block-heading h-t-title-3\">How to test CSS changes before making them permanent<\/h3><p class=\"wp-block-paragraph\">To test a CSS change before making it permanent, use the <strong>Styles<\/strong> panel in developer tools to try values live in the browser without touching your actual CSS file.<\/p><ol class=\"wp-block-list\">\n<li>Click the element picker icon in the top-left corner of the developer tools panel (it looks like a cursor over a box), then click the element you want to change on the page. The <strong>Styles<\/strong> panel on the right shows all CSS rules affecting that element.<\/li>\n\n\n\n<li>Click any property value to edit it. Type a new value and press <strong>Enter<\/strong> to see the result instantly.<\/li>\n\n\n\n<li>Once you&rsquo;ve settled on the right value, copy the full CSS rule.<\/li>\n\n\n\n<li>Paste it into your site&rsquo;s CSS file (for code-edited sites), WordPress&rsquo;s Appearance &rarr; Customize &rarr; Additional CSS, or your builder&rsquo;s custom CSS field.<\/li>\n<\/ol><h2 class=\"wp-block-heading h-t-title-2\" id=\"h-how-to-edit-a-website-url\">How to edit a website URL<\/h2><p class=\"wp-block-paragraph\">To edit a website URL, update the page slug &ndash; the part of the address after your domain &ndash; in your builder or WordPress settings, or change the domain through your hosting account.<\/p><p class=\"wp-block-paragraph\"><strong>Page slugs<\/strong><\/p><p class=\"wp-block-paragraph\">In Hostinger AI Builder&rsquo;s Manual mode, go to <strong>Pages<\/strong>, click the three-dot menu next to a page, and choose <strong>Page URL<\/strong>. Edit the <strong>URL Slug<\/strong> field and click <strong>Save<\/strong>.<\/p><p class=\"wp-block-paragraph\">In WordPress, open the page in the block editor. The <strong>Slug<\/strong> field is in the <strong>Page<\/strong> tab of the settings sidebar on the right. Set up a redirect from the old URL if it is already indexed by search engines. A redirect automatically sends anyone visiting the old address to the new one, so existing links don&rsquo;t break.<\/p><p class=\"wp-block-paragraph\">For hand-coded sites, the URL is the file name. To change a page from <strong>\/about-us<\/strong> to <strong>\/about<\/strong>, rename <strong>about-us.html<\/strong> to <strong>about.html<\/strong> in your file manager, then update any internal links on the site that pointed to the old address.<\/p><p class=\"wp-block-paragraph\"><strong>Domain name<\/strong><\/p><p class=\"wp-block-paragraph\">Change your domain through your hosting provider&rsquo;s control panel. In Hostinger dashboard, go to <strong>Websites<\/strong>, click the three-dot menu next to the site, and choose <strong>Change domain<\/strong> to begin<a aria-label=\"6807580 connecting a different domain to your existing website at hostinger\" href=\"\/support\/6807580-connecting-a-different-domain-to-your-existing-website-at-hostinger\/\" data-wpel-link=\"internal\" rel=\"follow\"> <\/a><a href=\"\/support\/6807580-connecting-a-different-domain-to-your-existing-website-at-hostinger\/\" data-wpel-link=\"internal\" rel=\"follow\">changing your domain name<\/a>.<\/p><p class=\"wp-block-paragraph\"><div class=\"announcement-block announcement-block--important\">\n            <span class=\"announcement-block__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                          d=\"M12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5ZM13.637 7.65198C13.637 6.74791 12.9041 6.01501 12 6.01501C11.0959 6.01501 10.363 6.74791 10.363 7.65198C10.5335 9.53749 10.875 13.383 10.875 13.383C10.875 14.0043 11.3787 14.508 12 14.508C12.6213 14.508 13.125 14.0043 13.125 13.383V13.38L13.637 7.65198ZM11.9927 15.714C11.3714 15.714 10.8677 16.2177 10.8677 16.839C10.8677 17.4603 11.3714 17.964 11.9927 17.964H12.0073C12.6286 17.964 13.1323 17.4603 13.1323 16.839C13.1323 16.2177 12.6286 15.714 12.0073 15.714H11.9927Z\"\n                          fill=\"#FEA419\"\/>\n                <\/svg>\n                Important\n            <\/span>\n            <p class=\"announcement-block__content\">\n                Changing your domain removes all email accounts and subdomains tied to the old domain. Read the warnings on the confirmation screen carefully before proceeding.\n            <\/p><\/div><\/p><h2 class=\"wp-block-heading h-t-title-2\" id=\"h-troubleshooting-website-edits-that-arent-showing-up\">Troubleshooting website edits that aren&rsquo;t showing up<\/h2><p class=\"wp-block-paragraph\">Work through the most likely causes in order: an unpublished draft, caching, or an edit made somewhere that never reaches the live site.<\/p><ul class=\"wp-block-list\">\n<li><strong>Unpublished draft.<\/strong> Both builders and WordPress save edits without pushing them live. Check for an active <strong>Publish<\/strong> or <strong>Update<\/strong> button still showing in the editor.<\/li>\n\n\n\n<li><strong>Browser cache.<\/strong> Reload the page with <strong>Ctrl+Shift+R<\/strong> (Windows\/Linux) or <strong>Cmd+Shift+R<\/strong> (Mac), or open the page in a private window to bypass the cache entirely.<\/li>\n\n\n\n<li><strong>Site or CDN cache.<\/strong> Clear the cache in your hosting control panel. In Hostinger dashboard, go to <strong>Essentials &rarr; Cache &rarr; Clear cache<\/strong>. Clear any caching plugin or CDN (Content Delivery Network) cache too.<\/li>\n\n\n\n<li><strong>Wrong file or page.<\/strong> You may have edited a staging copy (a test version of the site), a duplicate page, or a file outside <strong>public_html<\/strong>. Confirm the URL you edited matches the URL you&rsquo;re viewing.<\/li>\n\n\n\n<li><strong>Change made in developer tools.<\/strong> Developer tools edits never reach the server. Reapply the change in your website builder, WordPress dashboard, or code editor.<\/li>\n\n\n\n<li><strong>Overriding CSS rule.<\/strong> A more specific CSS rule may be overriding your change. Select the element in developer tools and check the <strong>Styles<\/strong> panel for properties crossed out &ndash; those are the ones being overridden.<\/li>\n<\/ul><h2 class=\"wp-block-heading h-t-title-2\" id=\"h-what-to-check-before-publishing-website-edits\">What to check before publishing website edits<\/h2><p class=\"wp-block-paragraph\">Before publishing any edit, preview the page on desktop and mobile, confirm links and forms still work, update the page&rsquo;s meta description if the content changed, clear the site cache, and keep a copy of the previous version.<\/p><ul class=\"wp-block-list\">\n<li><strong>Preview on both screen sizes.<\/strong> Use the mobile toggle in your builder or Chrome&rsquo;s device toolbar in developer tools.<\/li>\n\n\n\n<li><strong>Test links, buttons, and forms.<\/strong> Click through every changed element to confirm it works as expected.<\/li>\n\n\n\n<li><strong>Update the meta description.<\/strong> This is the short summary that appears under your page title in search results. Update it to match if the page content changed significantly.<\/li>\n\n\n\n<li><strong>Clear the site cache.<\/strong> Do this in your hosting control panel. If you&rsquo;re using Hostinger, go to the dashboard<strong> &rarr; Essentials &rarr; Cache &rarr; Clear cache<\/strong>.<\/li>\n\n\n\n<li><strong>Keep a backup.<\/strong> Save the previous file version, note what you changed, or use your hosting&rsquo;s backup tool before overwriting.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">For a full site launch or major redesign,<a aria-label=\"Website launch checklist\" href=\"\/ca\/tutorials\/website-launch-checklist\/\" data-wpel-link=\"internal\" rel=\"follow\"> <\/a><a href=\"\/ca\/tutorials\/website-launch-checklist\/\" data-wpel-link=\"internal\" rel=\"follow\">checking your website before publishing changes<\/a> covers additional areas like domain configuration, SEO (search engine optimization), analytics, and performance that go beyond a routine edit.<\/p><p class=\"wp-block-paragraph\">For sites that still require manual file uploads or developer time for small changes, Hostinger&rsquo;s AI website builder removes that step. Describe the change in a prompt and the AI applies it to the live site in minutes.<\/p><figure class=\"wp-block-image size-large\"><a aria-label=\"Ai builder\" class=\"hgr-tutorials-cta hgr-tutorials-cta-horizons\" href=\"\/ca\/ai-builder\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"600\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2025\/03\/Horizons-in-text-banner-no-code-website-builder.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-129223\"  sizes=\"auto, (max-width: 2048px) 100vw, 2048px\" \/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>To edit a website, open it in the tool it was built with: the visual builder provided by your platform, the WordPress dashboard for WordPress sites, or a code editor and file manager for hand-coded files. Browser developer tools offer a fourth option for previewing a change privately &ndash; nothing you do there reaches visitors. [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/ca\/tutorials\/how-to-edit-a-website\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":356,"featured_media":150815,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"How to edit a website: 4 methods explained","rank_math_description":"Not sure how to edit your website? Builder sites, WordPress, and custom code all work differently. Find the right method for your setup.","rank_math_focus_keyword":"how to edit a website","footnotes":""},"categories":[22725],"tags":[],"class_list":["post-99458","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-edit-a-website","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/como-editar-um-site\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/comment-modifier-un-site-internet\/","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/como-editar-una-pagina-web\/","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/cara-edit-website\/","default":0},{"locale":"de-DE","link":"https:\/\/www.hostinger.com\/de\/tutorials\/website-bearbeiten\/","default":0},{"locale":"it-IT","link":"https:\/\/www.hostinger.com\/it\/tutorial\/come-modificare-un-sito-web\/","default":0},{"locale":"ja-JP","link":"https:\/\/www.hostinger.com\/jp\/tutorials\/wordpress-multisite\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-edit-a-website","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-edit-a-website","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/how-to-edit-a-website","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/how-to-edit-a-website","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-edit-a-website","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-to-edit-a-website","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-to-edit-a-website","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/como-editar-una-pagina-web\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/como-editar-una-pagina-web\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/como-editar-una-pagina-web\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/como-editar-um-site\/","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/posts\/99458","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/users\/356"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/comments?post=99458"}],"version-history":[{"count":22,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/posts\/99458\/revisions"}],"predecessor-version":[{"id":150814,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/posts\/99458\/revisions\/150814"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/media\/150815"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/media?parent=99458"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/categories?post=99458"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/tags?post=99458"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}