{"id":937,"date":"2023-02-06T03:53:27","date_gmt":"2023-02-06T03:53:27","guid":{"rendered":"https:\/\/loftocean.com\/doc\/patiotime\/?post_type=ptkb&#038;p=937"},"modified":"2023-06-30T09:03:27","modified_gmt":"2023-06-30T09:03:27","slug":"how-to-change-each-slides-background-of-a-slider-elegant-restaurant-demo","status":"publish","type":"ptkb","link":"https:\/\/loftocean.com\/doc\/patiotime\/ptkb\/how-to-change-each-slides-background-of-a-slider-elegant-restaurant-demo\/","title":{"rendered":"How to change Each Slide&#8217;s background of a Slider (Elegant Restaurant Demo)"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"937\" class=\"elementor elementor-937\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-52cec3f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"52cec3f\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1c6fe9a\" data-id=\"1c6fe9a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-13d42fb elementor-widget elementor-widget-video\" data-id=\"13d42fb\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/RIwCBUaJdrw&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-23f7c00 elementor-widget elementor-widget-text-editor\" data-id=\"23f7c00\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>If you imported the &#8220;Elegant Restaurant&#8221; 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>\n<p>But in the &#8220;Elegant Restaurant&#8221; demo, the background image and text content in the top slider will change. This is because in the &#8220;Elegant Restaurant&#8221; demo, we used the PatioTime Slider Element to create this slider. This slider is composed of multiple slides, and the content and background image in each slide can be different.<\/p>\n<p>Therefore, to change the content and background in the slider, you need to edit each slide individually. Please follow the steps below:<\/p>\n<ol>\n<li>Please navigate to the&nbsp;<strong>Admin Bar<\/strong>&nbsp;at the top of the page, and find \u201c<strong>Edit with Elementor<\/strong>\u201c.<\/li>\n<li>Hover over it to show a drop-down list. Find the slide: \u201cSlide-1\u201d and \u201cSlide-2\u201d.&nbsp;Click on it to open the Elementor editor.<\/li>\n<li>In the Elementor editor, please click the second icon at the bottom left of the panel to open the \u201c<strong>Navigator\u201d<\/strong>, which helps you easily locate each element on the page.<\/li>\n<li>In the \u201c<strong>Navigator\u201d<\/strong>, please select the first&nbsp;<strong>Section.&nbsp;<\/strong>In the left panel, please click on the&nbsp;\u201c<strong>Style<\/strong>\u201c<strong>&nbsp;tab<\/strong>, there you will find \u201c<strong>Background<\/strong>\u201d options. Find the \u201c<strong>Image<\/strong>\u201d option and hover over the image then you will see a small \u201cTrash\u201d icon, you can click the icon to remove the background image of this slide, or click the image to open the&nbsp;<strong>Media Library<\/strong>&nbsp;and select another image as the background image.<\/li>\n<li>Please note that the slide also has a&nbsp;<strong>default background color<\/strong>, which is black. If you\u2019d like to remove the background color, please find the \u201c<strong>Color<\/strong>\u201d option&nbsp;located above the \u201c<strong>Image<\/strong>\u201d option, click on the color block to open the Color Picker. Then you can change the backgroud color, or click the \u201c<strong>Clear<\/strong>\u201d button to remove the background color.<\/li>\n<li>Please expand the \u201c<strong>Background Overlay<\/strong>\u201d options. There you can change the overlay\u2019s opacity, or click the color block to change the overlay color, or click the \u201cClear\u201d button to remove the overlay.<\/li>\n<li>Please follow the steps above to edit&nbsp;<strong>each slide<\/strong>&nbsp;in the slider.<\/li>\n<\/ol>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"menu_order":0,"template":"","ptkb_category":[13],"class_list":["post-937","ptkb","type-ptkb","status-publish","hentry","ptkb_category-how-tos-faqs"],"_links":{"self":[{"href":"https:\/\/loftocean.com\/doc\/patiotime\/wp-json\/wp\/v2\/ptkb\/937","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/loftocean.com\/doc\/patiotime\/wp-json\/wp\/v2\/ptkb"}],"about":[{"href":"https:\/\/loftocean.com\/doc\/patiotime\/wp-json\/wp\/v2\/types\/ptkb"}],"version-history":[{"count":3,"href":"https:\/\/loftocean.com\/doc\/patiotime\/wp-json\/wp\/v2\/ptkb\/937\/revisions"}],"predecessor-version":[{"id":971,"href":"https:\/\/loftocean.com\/doc\/patiotime\/wp-json\/wp\/v2\/ptkb\/937\/revisions\/971"}],"wp:attachment":[{"href":"https:\/\/loftocean.com\/doc\/patiotime\/wp-json\/wp\/v2\/media?parent=937"}],"wp:term":[{"taxonomy":"ptkb_category","embeddable":true,"href":"https:\/\/loftocean.com\/doc\/patiotime\/wp-json\/wp\/v2\/ptkb_category?post=937"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}