{"id":166,"date":"2022-11-18T14:09:29","date_gmt":"2022-11-18T14:09:29","guid":{"rendered":"https:\/\/loftocean.com\/doc\/patiotime\/?post_type=ptkb&p=166"},"modified":"2023-02-06T04:08:54","modified_gmt":"2023-02-06T04:08:54","slug":"how-to-change-the-slider-images-after-importing-a-demo","status":"publish","type":"ptkb","link":"https:\/\/loftocean.com\/doc\/patiotime\/ptkb\/how-to-change-the-slider-images-after-importing-a-demo\/","title":{"rendered":"How to change the slider images after importing a demo"},"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 For Main Demo & Seafood Demo\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
\n\t\t\t
<\/div>\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\t\t\t\t

In this video tutorial, we will show you how to change the slider images at the top of the homepage after importing the Main Demo<\/strong><\/em> or Seafood Demo<\/strong><\/em>.<\/p>

  1. On the homepage, please navigate to the Admin Bar<\/strong> at the top of the page and click “Edit with Elementor<\/strong>“.<\/li>
  2. In the Elementor editor, please click the second icon at the bottom left of the panel to open the “Navigator<\/strong>“, which helps you easily locate each element on the page.<\/li>
  3. In the “Navigator<\/strong>“, please select the first Section<\/strong> and expand it, then expand its “Column<\/strong>“, then you will find the “Inner Section<\/strong>“.<\/li>
  4. Click on the “Inner Section<\/strong>” and you can edit it. In the left panel, please click on the “Style” tab<\/strong>, there you will find “Background<\/strong>” options. You will see that the “Background Type<\/strong>” is set to “Slideshow<\/strong>” and 4 images selected. You can remove them, or click to edit the images: reorder, delete, or add new images.<\/li>
  5. This step is optional<\/strong>: Select the parent Section<\/strong> of the Inner Section<\/strong>, click on the “Style” tab in the left panel, and you will find that the parent Section also has a background image. This is because the background slideshow may sometimes not load fast enough and may not appear in the first place when opening the page. In order not to show only a blank here, we set a background image (or background color like in Seafood Demo) on the parent section, using the first image of the background slideshow of the inner section. This step is not required. You can choose to delete the background image here.<\/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 For Pastry Demo\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
    \n\t\t\t
    <\/div>\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\t\t\t\t

    In this video tutorial, we will show you how to change the slider images at the top of the homepage after importing the Pastry Demo<\/strong><\/em>.<\/p>

    1. On the homepage, please navigate to the Admin Bar<\/strong> at the top of the page and click “Edit with Elementor<\/strong>“.<\/li>
    2. In the Elementor editor, please click the second icon at the bottom left of the panel to open the “Navigator<\/strong>“, which helps you easily locate each element on the page.<\/li>
    3. In the “Navigator<\/strong>“, please select the first Section. <\/strong>In the left panel, please click on the “Style” tab<\/strong>, there you will find “Background<\/strong>” options. You will see that the “Background Type<\/strong>” is set to “Slideshow<\/strong>” and 6 images selected. You can remove them, or click to edit the images: reorder, delete, or add new images.<\/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 For Elegant Restaurant Demo\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

      If you imported the \u201cElegant Restaurant\u201d demo, you will notice that the top slider on the homepage is different from the other demos. The sliders of other demo homepages only change the background image, and the content remains unchanged.<\/p>

      But in the \u201cElegant Restaurant\u201d demo, the background image and text content in the top slider will change. This is because in the \u201cElegant Restaurant\u201d demo, we used the PatioTime Slider Element<\/strong> to create this slider. This slider is composed of multiple slides<\/strong>, and the content and background image in each slide can be different.<\/p>

      Therefore, to change the content and background in the slider, you need to edit each slide individually. Please follow the detailed steps in the following tutorial:<\/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