{"id":384,"date":"2022-11-18T13:36:47","date_gmt":"2022-11-18T13:36:47","guid":{"rendered":"https:\/\/loftocean.com\/doc\/patiotime\/?post_type=ptkb&p=384"},"modified":"2024-03-13T09:58:44","modified_gmt":"2024-03-13T09:58:44","slug":"add-and-edit-logo-image","status":"publish","type":"ptkb","link":"https:\/\/loftocean.com\/doc\/cozystay\/ptkb\/add-and-edit-logo-image\/","title":{"rendered":"Add and Edit Logo Image"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n
\t
\n\t Change Logo Image after Importing Demos\t <\/h6> <\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

How to change the logo image in the site header after importing a demo:<\/p>

  1. Please navigate to the Admin Bar<\/strong> at the top of the page, and find “Edit with Elementor”<\/strong>.<\/li>
  2. Hover over it to show a drop-down list. Find the site header, its name will vary depending on the demo you imported, for example, it may be \u201cMountain Hotel Header\u201d, \u201cIsland Resort Header\u201d, \u201cCountryside Lodge Header\u201d, etc., the key word is “Header<\/strong>“.\"\"<\/a><\/li>
  3. Click on it to open the Elementor editor.<\/li>
  4. Now if you cannot see any elements in the editor since everything is white: In the upper right corner of the editor you can find Color Mode Simulator<\/strong>, click “DARK<\/strong>” and the editor background will turn black so you can see what’s on the page. The Color Mode Simulator<\/strong> only works in the editor, it will not affect the page in the front-end.\"\"<\/a><\/li>
  5. Click on the logo image then you can edit it.<\/li>
  6. In the left sidebar of the editor, you will find the “Custom Image<\/strong>” option. If it is turned off<\/strong>, then the logo image is the default logo image uploaded in the Customizer > Site Identity<\/strong> Section. You can choose to open the Customizer and change the logo image there.\"\"<\/a><\/li>
  7. Alternatively, you can just enable the “Custom Image”<\/strong> option, and choose another image.\"\"<\/a><\/li>
  8. To change the logo width, please click on the “Style” tab<\/strong> and change “Width<\/strong>“. Just set the width, and the height will be adaptive according to the aspect ratio of the image itself.\"\"<\/a><\/li>
  9. To edit the logo for tablet\/mobile device view<\/strong>, click the \u201cResponsive Mode\u201d icon at the bottom of the left panel of the Elementor editor, then find the icons for different devices in the top bar that appears at the top of the page. Click on the different device icons to preview and edit content and styles for different devices.\"\"<\/a><\/li><\/ol>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t
    \n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\n
    \t
    \n\t Add Logo Image with Elementor\t <\/h6> <\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    When you are using Elementor, please find “CozyStay Elements<\/strong>” in the left sidebar of the Elementor editor, and then add the \u201cSite Logo<\/strong>\u201d element\/widget to the content area.<\/p>

    \"\"<\/a><\/p>

    After adding the\u00a0Site Logo<\/strong>\u00a0element\/widget, it will display the default logo image you uploaded via the\u00a0Customizer > Site Identity<\/strong>, and it will be linked to your site\u2019s homepage automatically. You can activate the “Custom Image<\/strong>” option and choose to use a different image when editing this element.<\/p>

    More information can be found in the following chapter:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t\n