{"id":99458,"date":"2023-12-06T10:12:45","date_gmt":"2023-12-06T10:12:45","guid":{"rendered":"\/tutorials\/?p=99458"},"modified":"2026-03-09T19:17:35","modified_gmt":"2026-03-09T19:17:35","slug":"how-to-edit-a-website","status":"publish","type":"post","link":"\/ng\/tutorials\/how-to-edit-a-website","title":{"rendered":"How to Edit a Website Effortlessly"},"content":{"rendered":"<?xml encoding=\"utf-8\" ?><p>Knowing how to edit and update your website efficiently is key to maintaining and improving your online presence. Updating your web pages regularly can improve your search engine rankings, keep site visitors engaged, and maintain your site&rsquo;s relevance with industry trends.<\/p><p>This article will show you how to edit a website with Hostinger Website Builder. We will cover everything from basic text and mobile-friendly website edits to more advanced, code-focused website editing.<\/p><p class=\"has-text-align-center\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Website-Launch-Checklist-EN.pdf\">Download website launch checklist<\/a><\/p><p>\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-basics-of-website-editing\">Basics of Website Editing<\/h2><p>Website redesign and editing is a crucial skill for maintaining an up-to-date and effective online presence. This process involves a range of tasks essential for any web developer and site owner, from refining the content on a web page to enhancing the overall web design.<\/p><p>Editing a website includes not just altering text or images. It also means optimizing HTML tags, integrating multimedia elements, and ensuring that the site&rsquo;s home page is inviting and informative.<\/p><p>When you edit websites, it&rsquo;s vital to consider how the changes will display across various devices and how they will interact with search engines.<\/p><p>Developer tools can greatly assist in this, enabling you to inspect element details, modify HTML code, or tweak JavaScript code directly. These tools are beneficial for making precise website updates and changes, especially when working with the source code of an existing website.<\/p><p>Hostinger Website Builder is the best user-friendly website editing option for those who don&rsquo;t know how to edit a web page&rsquo;s source code. Our drag-and-drop builder simplifies website maintenance and editing, letting users enter edit mode, make changes, and save their work with ease.<\/p><p>This approach is ideal for web page editing tasks like adjusting content, adding new pages, or even undertaking a complete website redesign.<\/p><?xml encoding=\"utf-8\" ?><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a class=\"hgr-tutorials-cta hgr-tutorials-cta-website-builder\" href=\"\/ng\/website-builder\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/Website-Builder_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-100488\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/Website-Builder_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/Website-Builder_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/Website-Builder_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/Website-Builder_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-how-to-edit-a-website\">How to Edit a Website<\/h2><p>Whether you&rsquo;re a seasoned web developer or new to website content management, this guide provides step-by-step website editing instructions for users of all skill levels.<\/p><p>Editing your website effectively means knowing how to navigate your web page editor properly. We will show you how to edit pages with Hostinger Website Builder below.<\/p><h3 class=\"wp-block-heading\">1. Access Hostinger Website Builder<\/h3><p>To begin making Hostinger Website Builder edits, the first step is to access the tool:<\/p><ol class=\"wp-block-list\">\n<li>Log in to <a href=\"\/ng\/support\/1583483-comprehensive-guide-to-hpanel-at-hostinger\/\">hPanel<\/a>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/hpanel.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"554\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/hpanel.png\/public\" alt=\"hPanel login page\" class=\"wp-image-99476\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/hpanel.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/hpanel.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/hpanel.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/hpanel.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>Navigate to the <strong>Websites<\/strong> section from the top menu and select the site you want to edit by clicking on <strong>Edit website<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/websites-manage-website.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"305\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/websites-manage-website.png\/public\" alt=\"hPanel Websites menu with edit website button highlighted\" class=\"wp-image-99501\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/websites-manage-website.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/websites-manage-website.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/websites-manage-website.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/websites-manage-website.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>The website builder will launch in edit mode and display your current web pages, allowing you to start making changes right away.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/editor.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"557\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/editor.png\/public\" alt=\"Hostinger Website Builder editor interface\" class=\"wp-image-99482\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/editor.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/editor.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/editor.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/editor.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>If you have a WordPress website but want to edit it with Hostinger Website Builder, expand the settings of the site via the <strong>Websites<\/strong> section and select <strong>Change to Hostinger Builder<\/strong>.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/settings-change-to-builder.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"353\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/settings-change-to-builder.png\/public\" alt=\"hPanel Websites settings\" class=\"wp-image-99502\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/settings-change-to-builder.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/settings-change-to-builder.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/settings-change-to-builder.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/settings-change-to-builder.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>If you don&rsquo;t have a website yet, follow these steps to begin creating:<\/p><ol class=\"wp-block-list\">\n<li>Select a Hostinger Website Builder or a <a href=\"\/ng\/web-hosting\">managed web hosting<\/a> plan.<\/li>\n\n\n\n<li>Log in to hPanel.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/hpanel.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"554\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/hpanel.png\/public\" alt=\"hPanel login page\" class=\"wp-image-99476\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/hpanel.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/hpanel.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/hpanel.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/hpanel.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Navigate to the <strong>Websites<\/strong> section and select <strong>Create or migrate a website<\/strong>. Follow the steps and choose Hostinger Website Builder as your platform.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/create-migrate-site.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"234\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/create-migrate-site.png\/public\" alt=\" hPanel Website menu with create or migrate a website button highlighted\" class=\"wp-image-99506\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/create-migrate-site.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/create-migrate-site.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/create-migrate-site.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/create-migrate-site.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.trustpilot.com\/reviews\/633060a0c17abd5d3c391af0\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"427\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/08\/Easy-Website-Builder.png\/public\" alt=\"\" class=\"wp-image-91652\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/08\/Easy-Website-Builder.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/08\/Easy-Website-Builder.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/08\/Easy-Website-Builder.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/08\/Easy-Website-Builder.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h3 class=\"wp-block-heading\">2. Edit Website Content<\/h3><p>When customizing the content of your web pages, you commonly need to edit text, replace images, and adjust other multimedia elements.<\/p><p><strong>How to Edit Text on a Website<\/strong><\/p><p>Effective text editing can revitalize your website&rsquo;s content, making it more engaging and relevant to your audience. Text editing is not just about correcting typos or updating information &ndash; it&rsquo;s about refining your message and enhancing readability to keep site visitors interested.<\/p><p>Modify text in Hostinger Website Builder like this:<\/p><ol class=\"wp-block-list\">\n<li>Scroll through your web page to find the text you want to edit. Click on the text area to select it.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/text-editor.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"424\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/text-editor.png\/public\" alt=\"Text editor in Hostinger Website Builder\" class=\"wp-image-99462\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/text-editor.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/text-editor.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/text-editor.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/text-editor.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>Click on <strong>Edit text<\/strong> to open the text editor.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/edit-text.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"315\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/edit-text.png\/public\" alt=\" Text editor in Hostinger Website Builder\" class=\"wp-image-99465\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/edit-text.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/edit-text.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/edit-text.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/edit-text.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Use the <a href=\"\/ng\/tutorials\/wysiwyg-web-builders\">WYSIWYG editor<\/a> to make the desired edits to the text. The changes will save automatically.<\/li>\n<\/ol><p><strong>Editing Images on Your Website<\/strong><\/p><p>Replacing outdated images or refreshing visuals is a simple yet effective way to enhance your website&rsquo;s look and feel.<\/p><p>Start editing images with Hostinger Website Builder by following these steps:<\/p><ol class=\"wp-block-list\">\n<li>Select the image you want to edit or replace.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/edit-image-closeup.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1048\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/edit-image-closeup.png\/public\" alt=\"Image selected in the website editor\" class=\"wp-image-99486\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/edit-image-closeup.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/edit-image-closeup.png\/w=293,fit=scale-down 293w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/edit-image-closeup.png\/w=1001,fit=scale-down 1001w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/edit-image-closeup.png\/w=147,fit=scale-down 147w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/edit-image-closeup.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>Click on <strong>Edit image<\/strong> to open the <strong>Image settings<\/strong>. Here, you can edit the alt text, on-page animations, and the shape and style of your image.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/image-settings.png\"><img loading=\"lazy\" decoding=\"async\" width=\"848\" height=\"1200\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/image-settings.png\/public\" alt=\" Image settings expanded\" class=\"wp-image-99489\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/image-settings.png\/w=848,fit=scale-down 848w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/image-settings.png\/w=212,fit=scale-down 212w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/image-settings.png\/w=724,fit=scale-down 724w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/image-settings.png\/w=106,fit=scale-down 106w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/image-settings.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 848px) 100vw, 848px\" \/><\/a><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>You can also perform actions like cropping, duplicating, and copying through the toolbar.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/extended-settings-image-editing.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"659\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/extended-settings-image-editing.png\/public\" alt=\"Toolbar settings expanded\" class=\"wp-image-99497\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/extended-settings-image-editing.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/extended-settings-image-editing.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/extended-settings-image-editing.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/extended-settings-image-editing.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>Alternatively, select <strong>Generate image<\/strong> to use AI to create a new custom image for your website. All you need to do is describe the visual in a few words to start the process.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/ai-image-generator.png\"><img loading=\"lazy\" decoding=\"async\" width=\"649\" height=\"1200\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/ai-image-generator.png\/public\" alt=\"AI image generator view\" class=\"wp-image-99488\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/ai-image-generator.png\/w=649,fit=scale-down 649w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/ai-image-generator.png\/w=162,fit=scale-down 162w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/ai-image-generator.png\/w=554,fit=scale-down 554w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/ai-image-generator.png\/w=81,fit=scale-down 81w\" sizes=\"auto, (max-width: 649px) 100vw, 649px\" \/><\/a><\/figure><\/div><p>Keep in mind that proper image optimization, including filling in the alt text field, is vital for <a href=\"\/ng\/tutorials\/what-is-seo\/\">search engine optimization<\/a> (SEO) and ensuring accessibility for all users.<\/p><p><div class=\"protip\">\n                    <h4 class=\"title\">Pro Tip<\/h4>\n                    <p>Learn more about how to create an <a href=\"\/ng\/tutorials\/seo-friendly-website\">SEO-friendly website<\/a> and succeed with <a href=\"\/ng\/tutorials\/website-optimization\">website optimization<\/a>.<\/p>\n                <\/div>\n\n\n\n<\/p><p><strong>Multimedia Elements<\/strong><\/p><p>Incorporating multimedia elements like videos or maps can enhance the interactivity of your website, providing a richer user experience.<\/p><p>Here is how to edit multimedia content on a web page:<\/p><ol class=\"wp-block-list\">\n<li>Select the element you want to edit &ndash; in this example, we are editing a video.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/video.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"677\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/video.png\/public\" alt=\"Video element with edit video menu available\" class=\"wp-image-99478\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/video.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/video.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/video.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/video.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>Click on <strong>Edit video<\/strong> to expand the <strong>Video settings<\/strong>. You can add animations, loop or autoplay the video, or show or hide video controls.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/video-settings.png\"><img loading=\"lazy\" decoding=\"async\" width=\"653\" height=\"1200\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/video-settings.png\/public\" alt=\" Video settings expanded\" class=\"wp-image-99471\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/video-settings.png\/w=653,fit=scale-down 653w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/video-settings.png\/w=163,fit=scale-down 163w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/video-settings.png\/w=558,fit=scale-down 558w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/video-settings.png\/w=82,fit=scale-down 82w\" sizes=\"auto, (max-width: 653px) 100vw, 653px\" \/><\/a><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>You can also use the toolbar to make edits to the positioning of the video:<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/more-settings-video.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"655\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/more-settings-video.png\/public\" alt=\"Extended toolbar settings\" class=\"wp-image-99468\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/more-settings-video.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/more-settings-video.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/more-settings-video.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/more-settings-video.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><h3 class=\"wp-block-heading\">3. Customize Website Design<\/h3><p>The design of your website should be both aesthetically pleasing and functional, as it influences how users perceive and interact with your brand. Ensure you follow the <a href=\"\/ng\/tutorials\/web-design-best-practices\">best web design practices<\/a> for the best results.<\/p><p><strong>Add New Web Page Elements<\/strong><\/p><p>Different page elements, like contact forms, buttons, and social media feeds, add more functionality to a web page.<\/p><p>To add elements on your Hostinger Website Builder site, check out these steps:<\/p><ol class=\"wp-block-list\">\n<li>Open the <strong>Add elements<\/strong> menu from the left side navigation bar.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/add-element.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"557\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/add-element.png\/public\" alt=\"Add elements menu\" class=\"wp-image-99472\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/add-element.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/add-element.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/add-element.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/add-element.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>Drag and drop your chosen element to the desired position on the web page. For this example, we&rsquo;ll select the <strong>Contact form<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/form.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"525\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/form.png\/public\" alt=\"Adding a contact form to a page\" class=\"wp-image-99491\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/form.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/form.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/form.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/form.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Click on the element to make adjustments to the content or design.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/form-editor.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1042\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/form-editor.png\/public\" alt=\"Edit form settings available\" class=\"wp-image-99463\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/form-editor.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/form-editor.png\/w=295,fit=scale-down 295w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/form-editor.png\/w=1006,fit=scale-down 1006w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/form-editor.png\/w=147,fit=scale-down 147w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/form-editor.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p><strong>Adjust Colors and Fonts<\/strong><\/p><p>Colors and fonts are the foundation of your website&rsquo;s design. Colors can evoke emotions and convey certain messages, so it&rsquo;s important to choose a palette that reflects the branding you want to set for your website.<\/p><p>The right font, on the other hand, significantly enhances the readability of your content and the usability of your website.<\/p><p>Edit site colors and fonts in Hostinger Website Builder like this:<\/p><ol class=\"wp-block-list\">\n<li>Open the <strong>Website styles<\/strong> menu.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/styles-button-menu.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"555\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/styles-button-menu.png\/public\" alt=\"Website styles menu highlighted\" class=\"wp-image-99492\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/styles-button-menu.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/styles-button-menu.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/styles-button-menu.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/styles-button-menu.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>In the <strong>Colors<\/strong> tab, you can see how many times different colors have been used across your website. Determine your <a href=\"\/ng\/tutorials\/website-color-schemes\">color scheme<\/a> and set up your primary and secondary colors here.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/website-styles.png\"><img loading=\"lazy\" decoding=\"async\" width=\"742\" height=\"882\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/website-styles.png\/public\" alt=\"Website styles menu close-up\" class=\"wp-image-99487\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/website-styles.png\/w=742,fit=scale-down 742w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/website-styles.png\/w=252,fit=scale-down 252w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/website-styles.png\/w=126,fit=scale-down 126w\" sizes=\"auto, (max-width: 742px) 100vw, 742px\" \/><\/a><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Use the <strong>Text<\/strong> tab to set up the text styles for your website. Select from predefined font groups, or click <strong>Edit text styles<\/strong> to define your preferred heading and paragraph font choices.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/website-styles-text.png\"><img loading=\"lazy\" decoding=\"async\" width=\"696\" height=\"1200\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/website-styles-text.png\/public\" alt=\"Website styles - text styles menu\" class=\"wp-image-99493\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/website-styles-text.png\/w=696,fit=scale-down 696w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/website-styles-text.png\/w=174,fit=scale-down 174w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/website-styles-text.png\/w=594,fit=scale-down 594w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/website-styles-text.png\/w=87,fit=scale-down 87w\" sizes=\"auto, (max-width: 696px) 100vw, 696px\" \/><\/a><\/figure><\/div><p>You can also adjust buttons and animation styles in this menu.<\/p><p><strong>Adjust the Web Page Layout<\/strong><\/p><p>A well-organized layout ensures visitors can easily navigate your website and find the information they need. Page sections, like image galleries, slideshows, testimonials, or headlines, make creating custom designs from ready-made templates easy.<\/p><p>The steps below demonstrate how to add a new page section in Hostinger Website Builder:<\/p><ol class=\"wp-block-list\">\n<li>Hover your cursor between two sections and click on the <strong>Add section<\/strong> button.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/add-section-on-page.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"452\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/add-section-on-page.png\/public\" alt=\"Add a section button visible between sections\" class=\"wp-image-99483\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/add-section-on-page.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/add-section-on-page.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/add-section-on-page.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/add-section-on-page.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>Select your preferred section from the template library &ndash; for example, a gallery, contact form, or footer. You can also add a blank section.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/add-section.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"605\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/add-section.png\/public\" alt=\"Add new section pop-up with section template library visible\" class=\"wp-image-99479\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/add-section.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/add-section.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/add-section.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/add-section.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>While making these adjustments, ensure that your site&rsquo;s layout is optimized for mobile devices. Follow these steps to check how the layout changes appear on mobile phones:<\/p><ol class=\"wp-block-list\">\n<li>Locate the mobile toggle in the top navigation bar.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/mobile-desktop-editor-toggle.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"99\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/mobile-desktop-editor-toggle.png\/public\" alt=\"Mobile editor icon in the top navigation bar\" class=\"wp-image-99495\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/mobile-desktop-editor-toggle.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/mobile-desktop-editor-toggle.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/mobile-desktop-editor-toggle.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/mobile-desktop-editor-toggle.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>Switch to the mobile editor by clicking on the mobile icon.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/section-highlight-mobile-editor.png\"><img loading=\"lazy\" decoding=\"async\" width=\"946\" height=\"1200\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/section-highlight-mobile-editor.png\/public\" alt=\"Mobile editor in action\" class=\"wp-image-99496\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/section-highlight-mobile-editor.png\/w=946,fit=scale-down 946w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/section-highlight-mobile-editor.png\/w=237,fit=scale-down 237w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/section-highlight-mobile-editor.png\/w=808,fit=scale-down 808w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/section-highlight-mobile-editor.png\/w=118,fit=scale-down 118w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/section-highlight-mobile-editor.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 946px) 100vw, 946px\" \/><\/a><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Move sections around with the arrow keys and consider hiding bigger elements for the best mobile viewing experience.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/edit-image-mobile.png\"><img loading=\"lazy\" decoding=\"async\" width=\"923\" height=\"1200\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/edit-image-mobile.png\/public\" alt=\"Section editing and layout adjustment options in mobile editor\" class=\"wp-image-99484\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/edit-image-mobile.png\/w=923,fit=scale-down 923w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/edit-image-mobile.png\/w=231,fit=scale-down 231w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/edit-image-mobile.png\/w=787,fit=scale-down 787w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/edit-image-mobile.png\/w=115,fit=scale-down 115w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/edit-image-mobile.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 923px) 100vw, 923px\" \/><\/a><\/figure><\/div><ol start=\"4\" class=\"wp-block-list\">\n<li>You can also use the <strong>Auto-fix layout<\/strong> tool to let AI adjust the mobile layout automatically.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/mobile-editor.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1130\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/mobile-editor.png\/public\" alt=\"AI auto-fix option in mobile editor\" class=\"wp-image-99466\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/mobile-editor.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/mobile-editor.png\/w=272,fit=scale-down 272w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/mobile-editor.png\/w=928,fit=scale-down 928w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/mobile-editor.png\/w=136,fit=scale-down 136w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/mobile-editor.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><h3 class=\"wp-block-heading\">4. Edit Website Using Code<\/h3><p>For those with coding knowledge, <a href=\"https:\/\/support.hostinger.com\/en\/articles\/7986905-website-builder-how-to-customize-your-website-s-design-using-code\">custom code editing<\/a> can unlock a new level of personalization and functionality for your website. In this section, we will go over two methods to achieve this.<\/p><p><strong>Access Developer Tools for In-Depth Customization<\/strong><\/p><ol class=\"wp-block-list\">\n<li>Open your site in a browser. We will use Google Chrome in this example.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/landingpage-dossenbach-min.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"556\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/landingpage-dossenbach-min.png\/public\" alt=\"Dossenbach template in preview mode\" class=\"wp-image-99499\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/landingpage-dossenbach-min.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/landingpage-dossenbach-min.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/landingpage-dossenbach-min.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/landingpage-dossenbach-min.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>Right-click on the web page and choose <strong>Inspect<\/strong>. This opens Chrome DevTools.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/inspect-page.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"727\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/inspect-page.png\/public\" alt=\"Inspect highlighted\" class=\"wp-image-99461\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/inspect-page.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/inspect-page.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/inspect-page.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/inspect-page.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Use the selector tool to pick elements you want to modify&#8203;&#8203;.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/inspect-h1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"491\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/inspect-h1.png\/public\" alt=\"Google Chrome DevTools window open on the page\" class=\"wp-image-99481\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/inspect-h1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/inspect-h1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/inspect-h1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/inspect-h1.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p><strong>Customize with CSS<\/strong><\/p><p>With Cascading Style Sheets (CSS), you can alter almost any aspect of your website&rsquo;s elements. Modify existing CSS styles to adjust the appearance and behavior of different components, such as the placement, size, color, opacity, and fonts&#8203;&#8203;.<\/p><p><div><p class=\"important\"><strong>Important!<\/strong> Keep in mind that any changes or CSS experiments using DevTools is only temporary. In order to make these changes live, you&rsquo;ll need to edit the CSS in the website&rsquo;s source files or through the website builder&rsquo;s CSS editor.<\/p><\/div>\n\n\n\n<\/p><p>Use DevTools to test various on-page changes like this:<\/p><ol class=\"wp-block-list\">\n<li>Select an element you want to edit.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/inspect-style-h1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"337\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/inspect-style-h1.png\/public\" alt=\"Close up of Google Chrome DevTools\" class=\"wp-image-99485\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/inspect-style-h1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/inspect-style-h1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/inspect-style-h1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/inspect-style-h1.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>The element&rsquo;s CSS code will be displayed under the Styles tab.<\/li>\n\n\n\n<li>Experiment with different attributes. For instance, to adjust the text color, locate the color property and change it to your desired shade.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/element-color-selected.png\"><img loading=\"lazy\" decoding=\"async\" width=\"420\" height=\"130\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/element-color-selected.png\/public\" alt=\"Element Styles closeup\" class=\"wp-image-99494\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/element-color-selected.png\/w=420,fit=scale-down 420w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/element-color-selected.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/element-color-selected.png\/w=150,fit=scale-down 150w\" sizes=\"auto, (max-width: 420px) 100vw, 420px\" \/><\/a><\/figure><\/div><ol start=\"4\" class=\"wp-block-list\">\n<li>To implement these changes on your site, select the element with the selector tool, then click the plus (<strong>+<\/strong>) button in the <strong>Styles<\/strong> tab. This action generates the necessary code snippet.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/new-style-rule.png\"><img loading=\"lazy\" decoding=\"async\" width=\"332\" height=\"126\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/new-style-rule.png\/public\" alt=\"New style rule closeup\" class=\"wp-image-99470\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/new-style-rule.png\/w=332,fit=scale-down 332w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/new-style-rule.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/new-style-rule.png\/w=150,fit=scale-down 150w\" sizes=\"auto, (max-width: 332px) 100vw, 332px\" \/><\/a><\/figure><\/div><ol start=\"5\" class=\"wp-block-list\">\n<li>Define the attribute you want to change, like <strong>color<\/strong>, and set your preferred value.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/h1-color.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"116\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/h1-color.png\/public\" alt=\"Code snippet closeup\" class=\"wp-image-99469\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/h1-color.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/h1-color.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/h1-color.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/h1-color.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"6\" class=\"wp-block-list\">\n<li>Combine your changes in a simple <strong>&lt;style&gt;<\/strong> line, like &lt;style&gt;.element {attribute: value !important;} &lt;\/style&gt;.<\/li>\n\n\n\n<li>Next, go to the Hostinger Website Builder editing interface and add <strong>Embed code <\/strong>to the page. Simply drag and drop the element from the <strong>Add elements<\/strong> menu to anywhere on the page.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/embed-code-element.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"619\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/embed-code-element.png\/public\" alt=\"Embed code element in Hostinger Website Builder\" class=\"wp-image-99475\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/embed-code-element.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/embed-code-element.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/embed-code-element.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/embed-code-element.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"8\" class=\"wp-block-list\">\n<li>Click <strong>Enter code<\/strong> to open the custom code editor.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/embed-code.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"910\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/embed-code.png\/public\" alt=\" Embed code editor closeup\" class=\"wp-image-99467\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/embed-code.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/embed-code.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/embed-code.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/embed-code.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>Paste your code snippet here and click <strong>Embed code<\/strong>. Save the changes and visit your site to see the update live.<\/p><p><div class=\"protip\">\n                    <h4 class=\"title\">Suggested Reading<\/h4>\n                    <p>Check out our tutorial on <a href=\"\/ng\/tutorials\/website\/how-to-inspect-and-change-style-using-google-chrome\">how to inspect and change style<\/a> aspects of your website for a more detailed guide.<\/p>\n                <\/div>\n\n\n\n<\/p><h3 class=\"wp-block-heading\">5. Add Extra Features<\/h3><p>Enhancing your website with additional features can improve its functionality and offer more value to your visitors.<\/p><p><strong>Integrations<\/strong><\/p><p>Add third-party tools and widgets, like Hotjar and WhatsApp, to your website in a few simple steps:<\/p><ol class=\"wp-block-list\">\n<li>In the website editor of Hostinger Website Builder, select the three-dot icon in the left-hand corner and choose <strong>Integrations<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/05\/Hostinger-Website-Builder-site-settings.png\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"753\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/05\/Hostinger-Website-Builder-site-settings.png\/public\" alt=\" Hostinger Website Builder site settings\" class=\"wp-image-109521\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/05\/Hostinger-Website-Builder-site-settings.png\/w=400,fit=scale-down 400w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/05\/Hostinger-Website-Builder-site-settings.png\/w=159,fit=scale-down 159w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/05\/Hostinger-Website-Builder-site-settings.png\/w=80,fit=scale-down 80w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/a><\/figure><\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>Find the integration you want to add to your site.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/integrations-homepage.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"558\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/integrations-homepage.png\/public\" alt=\"Hostinger Website Builder integrations settings\" class=\"wp-image-99477\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/integrations-homepage.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/integrations-homepage.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/integrations-homepage.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/integrations-homepage.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Follow the app-specific instructions to link your account to your website. For example, you need to add your Hotjar site ID number to connect your Hotjar account with your website.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/integrations.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"870\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/integrations.png\/public\" alt=\"Closeup of Hotjar integration settings\" class=\"wp-image-99473\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/integrations.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/integrations.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/integrations.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/integrations.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>Visit our knowledge base for more details about <a href=\"https:\/\/support.hostinger.com\/en\/collections\/3592110-integrations\">how to integrate different tools<\/a> to your Hostinger Website Builder site.<\/p><p><strong>Widgets<\/strong><\/p><p>You can also use the embed code element to add various widgets and other third-party tools to your website:<\/p><ol class=\"wp-block-list\">\n<li>Open the website editor and drag the <strong>Embed code<\/strong> element to your web page.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/embed-code-element.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"619\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/embed-code-element.png\/public\" alt=\"Embed code element in Hostinger Website Builder\" class=\"wp-image-99475\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/embed-code-element.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/embed-code-element.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/embed-code-element.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/embed-code-element.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"2\" class=\"wp-block-list\">\n<li>Click <strong>Enter code<\/strong> to open the code editor.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/embed-code.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"910\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/embed-code.png\/public\" alt=\"Embed code editor closeup\" class=\"wp-image-99467\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/embed-code.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/embed-code.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/embed-code.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/embed-code.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Paste the code you want to embed into your page to the editor and click <strong>Embed code<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/embed-code-with-code.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"864\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/embed-code-with-code.png\/public\" alt=\"Embed code editor with a code snippet\" class=\"wp-image-99480\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/embed-code-with-code.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/embed-code-with-code.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/embed-code-with-code.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/embed-code-with-code.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol start=\"4\" class=\"wp-block-list\">\n<li>Preview and test the widget on the web page before updating your website.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/12\/added-code-on-page.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"984\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/added-code-on-page.png\/public\" alt=\" Spotify playlist player embedded to a website\" class=\"wp-image-99474\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/added-code-on-page.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/added-code-on-page.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/added-code-on-page.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/12\/added-code-on-page.png\/w=768,fit=scale-down 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><h3 class=\"wp-block-heading\">6. Save and Publish Changes<\/h3><p>Once you&rsquo;ve fine-tuned your website with new web content, tweaked the design, and added more features, it&rsquo;s time to publish the changes.<\/p><p>Unlike some other website builders, Hostinger Website Builder saves your changes automatically as you edit web pages. If you need to revert to an older version of your site, you can reach out to our Customer Success team to help restore a backup.<\/p><p>Before publishing, take a moment to review all the changes. Ensure that every new element functions correctly and contributes to a cohesive user experience. Getting other people to provide feedback on bigger changes, like a new web page, is also a good idea.<\/p><p>After review, it&rsquo;s time to unveil your updated website to your audience. Utilize the <strong>Preview<\/strong> option to see your edits in full effect. Remember to check that the changes look good on a mobile phone, too. Once you&rsquo;re satisfied with the website design tweaks, publish the changes to your live website.<\/p><p><div class=\"protip\">\n                    <h4 class=\"title\">More on Website Development<\/h4>\n                    <p><a href=\"\/ng\/tutorials\/how-to-make-a-website\">How to Make a Website From Scratch<\/a><br>\n<a href=\"\/ng\/tutorials\/how-to-design-a-website\">How to Design a Website<\/a><br>\n<a href=\"\/ng\/tutorials\/mobile-friendly-website\">How to Make a Website Mobile-Friendly<\/a><br>\n<a href=\"\/ng\/tutorials\/testing-in-production\">Testing in Production<\/a><br>\n<a href=\"\/ng\/tutorials\/best-website-builder-for-photographers\/\">Best Website Builder for Photographers<\/a><br>\n<a href=\"\/ng\/tutorials\/website-maintenance-cost\">Website Maintenance Cost<\/a><\/p>\n                <\/div>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h2><p>Editing a website efficiently is a vital skill for enhancing your online presence, and Hostinger Website Builder is an ideal tool for this task.<\/p><p>From website content editing to integrating tools like WhatsApp into your website, you can manage every aspect of your site swiftly with our website builder. It is especially useful for beginners who are looking for an intuitive platform with a drag-and-drop editor, built-in elements, and AI features.<\/p><p>Ensure to conduct regular updates keep your web pages fresh. Doing so also helps you stay up to date with search engine ranking changes and audience preferences, boosting your site&rsquo;s visibility.<\/p><h2 class=\"wp-block-heading\" id=\"h-easy-website-editing-guide-faq\">Easy Website Editing Guide FAQ<\/h2><p>Find answers to the most common questions about website editing best practices below.<\/p><div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1701850411776\"><h3 class=\"schema-faq-question\">What Can I Edit on My Website?<\/h3> <p class=\"schema-faq-answer\">You can edit practically everything from text and images to layout and design. Regular edits keep your site fresh and engaging, ensuring that your content resonates with the audience and your website&rsquo;s functionality meets the latest web design and accessibility standards.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1701850425095\"><h3 class=\"schema-faq-question\">How Often Should You Update or Edit Websites?<\/h3> <p class=\"schema-faq-answer\">Regular updates are recommended to keep your content relevant and SEO rankings high. At a minimum, review your site quarterly to ensure it aligns with your business goals, but also consider more frequent updates to address user feedback and industry trends.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1701850425872\"><h3 class=\"schema-faq-question\">What Are the Benefits of Using a Website Builder to Edit Websites?<\/h3> <p class=\"schema-faq-answer\">A website builder simplifies the editing process, making it accessible to users of all skill levels without the need for extensive technical knowledge. It also offers a range of customization options and pre-designed templates that can significantly reduce the time and effort required to maintain a professional-looking website.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1701850426880\"><h3 class=\"schema-faq-question\">Can I Use Developer Tools to Edit a Website Directly?<\/h3> <p class=\"schema-faq-answer\">Yes. Browser developer tools, like those in Google Chrome, can be used to edit the HTML and CSS code of a web page directly. This is useful for web developers looking to make quick changes to the layout or test new features.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1701850456417\"><h3 class=\"schema-faq-question\">Is It Possible to Edit My Website&rsquo;s SEO Features Like Meta Descriptions?<\/h3> <p class=\"schema-faq-answer\">Definitely. Most website editing tools, including Hostinger Website Builder, provide a user-friendly interface to edit SEO features such as meta descriptions and titles. These tweaks are crucial for improving visibility on search engines and can be done without extensive coding knowledge.<\/p> <\/div> <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Knowing how to edit and update your website efficiently is key to maintaining and improving your online presence. Updating your web pages regularly can improve your search engine rankings, keep site visitors engaged, and maintain your site&rsquo;s relevance with industry trends. This article will show you how to edit a website with Hostinger Website Builder. [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/ng\/tutorials\/how-to-edit-a-website\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":357,"featured_media":143893,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"How to Edit a Website: Changing Content, Design and Features","rank_math_description":"Learn how to edit a website: 1. Access Hostinger Website Builder 2. Edit Site Content 3. Customize Site Design 4. Edit Website Using Code + more.","rank_math_focus_keyword":"how to edit a website","footnotes":""},"categories":[22601],"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":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/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-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-edit-a-website","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":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/como-editar-una-pagina-web","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/como-editar-um-site","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}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts\/99458","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/users\/357"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/comments?post=99458"}],"version-history":[{"count":19,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts\/99458\/revisions"}],"predecessor-version":[{"id":143892,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/posts\/99458\/revisions\/143892"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/media\/143893"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/media?parent=99458"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/categories?post=99458"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/ng\/tutorials\/wp-json\/wp\/v2\/tags?post=99458"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}