{"id":1494,"date":"2023-10-14T04:06:37","date_gmt":"2023-10-14T04:06:37","guid":{"rendered":"https:\/\/loftocean.com\/doc\/cozystay\/?post_type=ptkb&p=1494"},"modified":"2023-10-14T04:42:19","modified_gmt":"2023-10-14T04:42:19","slug":"slider","status":"publish","type":"ptkb","link":"https:\/\/loftocean.com\/doc\/cozystay\/ptkb\/slider\/","title":{"rendered":"Slider"},"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\t\t\t\t

When editing a page with Elementor, you will find the \u201cSlider (CS)<\/strong>\u201d element in the left panel. With this element, you can divide content into slides.<\/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\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\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\t\t

Before adding this “Slider” element to your page, you need to create some slides<\/strong>, each slide is a “Custom Block<\/strong>“. (What is Custom Block?<\/a>)<\/p>

Please check the tutorial below for the detailed steps.<\/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\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\t\t\t\t

Tutorial Video<\/strong><\/h3>

In this tutorial video, you can see the complete process of adding a slider to your page using “Custom Blocks<\/strong>” and the “Slider<\/strong>” element. There is a text version of the complete step-by-step description below the video.<\/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\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
\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\t\t\t\t

Text Version of the Tutorial<\/strong><\/h3>
  1. On your website dashboard, please navigate to “Custom Blocks”, create a new custom block, you can name it “Slide 1”. And edit it with Elementor.<\/li>
  2. You can speed up your work by adding pre-made templates from the CozyStay Template Library<\/strong> (What is CozyStay Template Library?<\/a>). Please open the CozyStay Template Library, select “Slides” from the dropdown filter. There are 3 pre-made slides. You can choose one and click to insert it to the page.<\/li>
  3. After adding a pre-made template, you can edit the content, background images, add new elements, etc. according to your needs.<\/li>
  4. Please save your changes, then return to the WordPress site dashboard<\/strong> > Custom Blocks page<\/strong> and repeat the above operations to create new Custom Blocks, for example, Slide 2, Slide 3, etc. Create as many custom blocks as you need in your Slider.<\/li>
  5. We assume that your slider will have three slides, so we create three custom blocks: Slide 1, Slide 2, and Slide 3. We have edited the content in each slide, and now we can add this slider to the page.<\/li>
  6. On your website dashboard, please navigate to “Pages”, edit the page with Elementor. Please add a new section, and find “Slider (CS)<\/strong>” in the Elementor’s left panel, add it to the new section we just created.<\/li>
  7. Edit the Slider. The Slider element contains two Slider Items<\/strong> by default. Click the Slider Item to expand, select “Custom Block<\/b>” as the “Content Type<\/b>“, and then select a custom block, for example, “Slide 1”.<\/li>
  8. Expand the second Slider Item and select “Custom Block<\/b>” as the “Content Type<\/b>“, and then select “Slide 2”.<\/li>
  9. You can add a new slider item, and select “Slide 3”.<\/li>
  10. In order to better display the slider, we recommend setting the “Content Width<\/strong>” of the Section<\/strong> containing the slider to “Full Width<\/strong>” and the “Column Gap<\/strong>” to “No Gap<\/strong>“.<\/li>
  11. Select the slider and navigate to the “Style” tab<\/strong>, you’ll find more options for styling your slider.<\/li><\/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":[8],"class_list":["post-1494","ptkb","type-ptkb","status-publish","hentry","ptkb_category-cs-elements"],"_links":{"self":[{"href":"https:\/\/loftocean.com\/doc\/cozystay\/wp-json\/wp\/v2\/ptkb\/1494","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/loftocean.com\/doc\/cozystay\/wp-json\/wp\/v2\/ptkb"}],"about":[{"href":"https:\/\/loftocean.com\/doc\/cozystay\/wp-json\/wp\/v2\/types\/ptkb"}],"version-history":[{"count":2,"href":"https:\/\/loftocean.com\/doc\/cozystay\/wp-json\/wp\/v2\/ptkb\/1494\/revisions"}],"predecessor-version":[{"id":1497,"href":"https:\/\/loftocean.com\/doc\/cozystay\/wp-json\/wp\/v2\/ptkb\/1494\/revisions\/1497"}],"wp:attachment":[{"href":"https:\/\/loftocean.com\/doc\/cozystay\/wp-json\/wp\/v2\/media?parent=1494"}],"wp:term":[{"taxonomy":"ptkb_category","embeddable":true,"href":"https:\/\/loftocean.com\/doc\/cozystay\/wp-json\/wp\/v2\/ptkb_category?post=1494"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}