{"id":1170,"date":"2023-01-16T09:47:27","date_gmt":"2023-01-16T09:47:27","guid":{"rendered":"https:\/\/kentatheme.com\/?p=1170"},"modified":"2024-01-22T05:03:37","modified_gmt":"2024-01-22T05:03:37","slug":"how-to-create-slick-slides-in-wordpress-block-editor","status":"publish","type":"post","link":"https:\/\/kentatheme.com\/2023\/01\/how-to-create-slick-slides-in-wordpress-block-editor\/","title":{"rendered":"How to Create Slick Slides in WordPress Block Editor"},"content":{"rendered":"\n<p>Are you looking for a slider plugin that work with the WordPress Block Editor? If your answer is Yes, then you have come to the right place. In this article, we\u2019ll show you how to create Slick Slider in WordPress Block Editor. <\/p>\n\n\n\n<p>Here&#8217;s what you&#8217;ll learn in this blog:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>What is a slider, and why we should use it<\/li>\n\n\n\n<li>Pros and cons of using a slider<\/li>\n\n\n\n<li>How to create a slider in WordPress Block Editor<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">What is a slider, and why we should use it<\/h2>\n\n\n\n<figure class=\"wp-block-kenta-blocks-image kb-image kb-image-6c96e1af\"><img decoding=\"async\" src=\"https:\/\/kentatheme.com\/wp-content\/uploads\/2023\/01\/what-is-slick-slider.gif\" alt=\"\"\/><\/figure>\n\n\n\n<p>The slider (aka carousel, slideshow) is a great way to provide a variety of information to the viewer. It is widely used on the Internet to display everything. From products and services to team members. You may have seen image sliders on different websites, but don&#8217;t know what they are.<\/p>\n\n\n\n<p>If properly used, the overall appeal of your website can improve by <strong>30%<\/strong> because you provide a visual means of your accomplishments or services. It\u2019s because when it comes to a normal human being, we prioritize visual aids more than textual ones.<\/p>\n\n\n\n<p>Normally we consider slider and carousel is the same things. The truth is that they are different from one other while also providing similar functionality.\u00a0But the main difference between them comes when it comes to displaying multiple slide item simultaneously. Carousels can display more than one slide item, while the slider display only one item.<\/p>\n\n\n\n<figure class=\"wp-block-kenta-blocks-image kb-image kb-image-cda86d57\"><img decoding=\"async\" src=\"https:\/\/kentatheme.com\/wp-content\/uploads\/2023\/01\/slider-carousel.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<p>Whether you use a carousel or a slider usually depends on your needs, sometimes you want your visitor to focus on one thing at a time, but sometimes you want to show more than one, for example if you want to show many customer reviews.<\/p>\n\n\n\n<p>The good news is that it&#8217;s very easy to switch between carousel and slider, and you&#8217;ll learn how to do it later.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Pros and Cons of Using a Slider<\/h2>\n\n\n\n<p>Knowing the pros and cons of a slider can help you make the decision to use it on your website.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pros<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Can easy to convey a large amount of information in a smaller format.<\/li>\n\n\n\n<li>Visual aids are better than textual ones.<\/li>\n\n\n\n<li>No need for coding to impose text on the image of the slider.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Cons<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Multiple slide item may unseen by the visitor.<\/li>\n\n\n\n<li>Some slider plugins can cause issues for websites opened on mobile devices.<\/li>\n\n\n\n<li>Sliders can be bad for the\u00a0SEO\u00a0of your website.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Create a Slider in WordPress Block Editor<\/h2>\n\n\n\n<p>Are you using WordPress&#8217; Block Editor (aka Gutenberg Editor)? If not, <a rel=\"noreferrer noopener\" href=\"https:\/\/wordpress.org\/gutenberg\/\" target=\"_blank\">give it a try online<\/a>, as it has been the default editor since WordPress v5.0, and it provides a WYSIWYG editing experience. Your content is all made up of <strong>&#8220;blocks&#8221;<\/strong>, and WordPress provides some core blocks by default, as well as many third-party blocks provide by plugins. You can use them to create almost anything. In this post, we will use Block Editor to create an awesome slider without any other complex page builders.<\/p>\n\n\n\n<p>Slider is not support by WordPress core blocks, so we need a third-party plugin to extend it. We recommend you to use <a rel=\"noreferrer noopener\" href=\"https:\/\/kentatheme.com\/blocks\/\" target=\"_blank\">Kenta Blocks<\/a>. It provides a set of advanced responsive blocks and a library of Gutenberg templates. Each kenta block is rich in options and you can customize any style without code skill. You can also import pre-designed patterns from the template library it provides with one click instead of building from scratch.<\/p>\n\n\n\n<p>You can see how to use all the blocks <a rel=\"noreferrer noopener\" href=\"https:\/\/kentatheme.com\/docs\/kenta-blocks\/blocks-guide\/\" target=\"_blank\">here<\/a>, in this article we will only use the Slides block it provide.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Plugin Installation<\/h3>\n\n\n\n<p>Start by hovering over the\u00a0<strong>&#8220;<strong>Plugins<\/strong>&#8220;<\/strong>\u00a0menu and clicking on the\u00a0<strong>&#8220;<strong>Add New<\/strong>&#8220;<\/strong>\u00a0menu item.<\/p>\n\n\n\n<figure class=\"wp-block-kenta-blocks-image kb-image kb-image-45196084\"><img decoding=\"async\" src=\"https:\/\/kentatheme.com\/wp-content\/uploads\/2023\/01\/install-kenta-blocks-plugin.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<p>Now search and install the\u00a0<strong>&#8220;Kenta Blocks&#8221;<\/strong>\u00a0plugin.<\/p>\n\n\n\n<figure class=\"wp-block-kenta-blocks-image kb-image kb-image-8dcc3181\"><img decoding=\"async\" src=\"https:\/\/kentatheme.com\/wp-content\/uploads\/2023\/01\/install-kenta-blocks-plugin-2.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<p>After installing the\u00a0<strong>&#8220;<strong>Kenta Blocks<\/strong>&#8220;<\/strong>\u00a0plugin, click the\u00a0<strong>&#8220;<strong>Activate<\/strong>&#8220;<\/strong>\u00a0button.<\/p>\n\n\n\n<figure class=\"wp-block-kenta-blocks-image kb-image kb-image-ab245de0\"><img decoding=\"async\" src=\"https:\/\/kentatheme.com\/wp-content\/uploads\/2023\/01\/active-kenta-blocks-plugin.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<p>Installing the plugin isn\u2019t something difficult at all because it\u2019s the standard procedure for all of the plugins you install.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Creating a Slider<\/h3>\n\n\n\n<p>You can add Slides Block to any page and post. In this article let us create a new page:<\/p>\n\n\n\n<figure class=\"wp-block-kenta-blocks-image kb-image kb-image-b90b7d22\"><img decoding=\"async\" src=\"https:\/\/kentatheme.com\/wp-content\/uploads\/2023\/01\/add-new-page.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<p>Then, let&#8217;s create a blank Slider:<\/p>\n\n\n\n<figure class=\"wp-block-kenta-blocks-image kb-image kb-image-c56e35d7\"><img decoding=\"async\" src=\"https:\/\/kentatheme.com\/wp-content\/uploads\/2022\/12\/add-slides-block.gif\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Slider Settings<\/h3>\n\n\n\n<p>When you select\u00a0<strong>Slides Block<\/strong>\u00a0in the editor, you can edit the slider settings in the block properties panel on the right.<\/p>\n\n\n\n<div class=\"wp-block-kenta-blocks-row kb-row-2d2b3025 kb-row\"><div class=\"kb-row-inner-container\">\n<div class=\"wp-block-kenta-blocks-icon kb-icon kb-icon-cf3045b8\"><div class=\"kb-icon-wrap\"><i class=\"fas fa-circle-info\"><\/i><\/div><\/div>\n\n\n\n<div class=\"wp-block-kenta-blocks-paragraph kb-paragraph kb-paragraph-96ef9793\"><p>Note: Some features, such as animations, autoplay are not available in the editor.<\/p><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-kenta-blocks-row kb-row-22c19c87 kb-row\"><div class=\"kb-row-inner-container\">\n<figure class=\"wp-block-kenta-blocks-image kb-image kb-image-c6cc9191\"><img decoding=\"async\" src=\"https:\/\/kentatheme.com\/wp-content\/uploads\/2022\/12\/slides-settings-1.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-kenta-blocks-image kb-image kb-image-30038306\"><img decoding=\"async\" src=\"https:\/\/kentatheme.com\/wp-content\/uploads\/2022\/12\/slides-settings-2.jpg\" alt=\"\"\/><\/figure>\n<\/div><\/div>\n\n\n\n<p>As we mentioned before, if you want to show more than one Slider Item at a time (as a carousel), just modify the Slide To Show option to be greater than 1.<\/p>\n\n\n\n<figure class=\"wp-block-kenta-blocks-image kb-image kb-image-6a8681b3\"><img decoding=\"async\" src=\"https:\/\/kentatheme.com\/wp-content\/uploads\/2023\/01\/slides-to-show.gif\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Add Slide Item<\/h3>\n\n\n\n<p>When you select <strong>Slides Block<\/strong>, an <strong>Add Slide Item<\/strong> button will appear under the carousel and you can add a new slide Item by clicking it. (Tip: The add button does not appear when you select a <strong>Slide Item<\/strong>, you can quickly select a Slides Block by clicking on the pagination dots or navigation arrow.)<\/p>\n\n\n\n<div class=\"wp-block-kenta-blocks-row kb-row-27f6e925 kb-row\"><div class=\"kb-row-inner-container\">\n<div class=\"wp-block-kenta-blocks-icon kb-icon kb-icon-d55a36fb\"><div class=\"kb-icon-wrap\"><i class=\"fas fa-circle-info\"><\/i><\/div><\/div>\n\n\n\n<div class=\"wp-block-kenta-blocks-paragraph kb-paragraph kb-paragraph-060c42b2\"><p>Free version adds up to <strong><mark style=\"background-color:rgba(0, 0, 0, 0);color:#664d03\" class=\"has-inline-color\">4<\/mark><\/strong> Slide items, if you need more, please <a rel=\"noreferrer noopener\" href=\"https:\/\/kentatheme.com\/pricing\/\" target=\"_blank\"><strong>upgrade<\/strong><\/a><strong> <\/strong>premium.<\/p><\/div>\n<\/div><\/div>\n\n\n\n<figure class=\"wp-block-kenta-blocks-image kb-image kb-image-3ea51e17\"><img decoding=\"async\" src=\"https:\/\/kentatheme.com\/wp-content\/uploads\/2022\/12\/add-slide-item.gif\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Delete Slide Item<\/h3>\n\n\n\n<p>Once a Slide Item is selected, you can press delete key or delete it from the block toolbar.<\/p>\n\n\n\n<figure class=\"wp-block-kenta-blocks-image kb-image kb-image-b07529dd\"><img decoding=\"async\" src=\"https:\/\/kentatheme.com\/wp-content\/uploads\/2022\/12\/delete-slide-item.gif\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Customize Slide Item<\/h3>\n\n\n\n<p>After you select any slide item, you can add any block inside it, no limit! You can also customize the style of the Slide Item using our extensive options.<\/p>\n\n\n\n<figure class=\"wp-block-kenta-blocks-image kb-image kb-image-dc19c4d9\"><img decoding=\"async\" src=\"https:\/\/kentatheme.com\/wp-content\/uploads\/2022\/12\/customize-slide-item.gif\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Customize  Slides Pagination \/ Navigation<\/h3>\n\n\n\n<div class=\"wp-block-kenta-blocks-row kb-row-1f65f9a5 kb-row\"><div class=\"kb-row-inner-container\">\n<div class=\"wp-block-kenta-blocks-icon kb-icon kb-icon-99e36989\"><div class=\"kb-icon-wrap\"><i class=\"fas fa-circle-info\"><\/i><\/div><\/div>\n\n\n\n<div class=\"wp-block-kenta-blocks-paragraph kb-paragraph kb-paragraph-797ffa70\"><p>This feature requires you to upgrade to <a href=\"https:\/\/kentatheme.com\/pricing\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>premium version<\/strong><\/a>.<\/p><\/div>\n<\/div><\/div>\n\n\n\n<p>With the style options we provide, you can customize the slides Pagination(Dots)\/Navigation(Prev\/Next button) style very easily. Make your slides unique and more eye-catching by customizing them.<\/p>\n\n\n\n<div class=\"wp-block-kenta-blocks-section kb-section-6057bf25 kb-section\">\n<div class=\"wp-block-kenta-blocks-column kb-column-wrapper kb-column-wrapper-a83ec8ae\"><div class=\"kb-column kb-column-a83ec8ae\"><div class=\"kb-column-content\">\n<figure class=\"wp-block-kenta-blocks-image kb-image kb-image-423b60d1\"><img decoding=\"async\" src=\"https:\/\/kentatheme.com\/wp-content\/uploads\/2022\/12\/slides-navigation-style.jpg\" alt=\"\"\/><\/figure>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-kenta-blocks-column kb-column-wrapper kb-column-wrapper-265d6617\"><div class=\"kb-column kb-column-265d6617\"><div class=\"kb-column-content\">\n<figure class=\"wp-block-kenta-blocks-image kb-image kb-image-db074bcb\"><img decoding=\"async\" src=\"https:\/\/kentatheme.com\/wp-content\/uploads\/2022\/12\/slides-pagination-style.jpg\" alt=\"\"\/><\/figure>\n<\/div><\/div><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Creating Slides with Kenta Blocks is very easy and once you know what to do and how to do it, you\u2019ll be able to do it with one hand tied behind your back\ud83d\ude02.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Are you looking for a slider plugin that work with the WordPress Block Editor? If your answer is Yes, then you have come to the right place. In this article, we\u2019ll show you how to create Slick Slider in WordPress Block Editor. Here&#8217;s what you&#8217;ll learn in this blog: What is a slider, and why [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1172,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-container-style":"default","site-container-layout":"default","site-sidebar-layout":"default","site-transparent-header":"default","disable-article-header":"default","disable-site-header":"default","disable-site-footer":"default","disable-content-area-spacing":"default","footnotes":""},"categories":[17],"tags":[18,19,20],"class_list":["post-1170","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-slick","tag-slider","tag-slideshow"],"_links":{"self":[{"href":"https:\/\/kentatheme.com\/wp-json\/wp\/v2\/posts\/1170","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kentatheme.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kentatheme.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kentatheme.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kentatheme.com\/wp-json\/wp\/v2\/comments?post=1170"}],"version-history":[{"count":9,"href":"https:\/\/kentatheme.com\/wp-json\/wp\/v2\/posts\/1170\/revisions"}],"predecessor-version":[{"id":1197,"href":"https:\/\/kentatheme.com\/wp-json\/wp\/v2\/posts\/1170\/revisions\/1197"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kentatheme.com\/wp-json\/wp\/v2\/media\/1172"}],"wp:attachment":[{"href":"https:\/\/kentatheme.com\/wp-json\/wp\/v2\/media?parent=1170"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kentatheme.com\/wp-json\/wp\/v2\/categories?post=1170"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kentatheme.com\/wp-json\/wp\/v2\/tags?post=1170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}