How to Add a Slider in WordPress
Tags: wordpress
Published: 2020-12-28 03:18:39

<!-- wp:paragraph -->

<p>To have a notable website, you should focus on the design of your site. There are various ways to give an attractive and impressive look to your site, and one of the most effective and popular ways is<strong> adding a slider</strong>. <!--more--></p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>Your site may become vivid and impressive like in the demo of <a href="https://gretathemes.com/wordpress-themes/yosemite/">Yosemite theme</a> below. <img class="aligncenter" src="https://i.imgur.com/pAhMdkP.gif" alt="WordPress website may become vivid and impressive with sliders" width="1350" height="621" /></p>

<!-- /wp:core-embed/imgur -->

<!-- wp:paragraph -->

<p>If you want to have this beautiful feature, follow us in this tutorial.</p>

<!-- /wp:paragraph -->

<!-- wp:heading -->

<h2>What is a Slider and Its Advantage?</h2>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>A slider is a way to display images, videos, <a href="https://gretathemes.com/post-page-different/">posts and pages</a> ... by slideshows on your WordPress website. Sliders also include some elements like navigations, buttons, thumbnails with different styles.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>Thanks to the slideshow, website owners can place all of their most featured content in one notable position, from which visitors can quickly get the most important information on your site. Additionally, sliders are usually designed in an eye-catching and appealing manner, so your site will be much more attractive and engaging.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>There are 4 popular ways to add sliders to your site:</p>

<!-- /wp:paragraph -->

<!-- wp:list -->

<ul>

<li>Using themes that support sliders</li>

<li>Using a slider plugin</li>

<li>Using a <a href="https://metabox.io/best-wordpress-page-builders/" rel="follow">page builder</a></li>

<li>Adding code</li>

</ul>

<!-- /wp:list -->

<!-- wp:paragraph -->

<p>We will walk you through the guidelines of the two first methods, which are enabling sliders if your theme supports it and how to use a plugin to add sliders. Now let's dig into these instructions.</p>

<!-- /wp:paragraph -->

<!-- wp:heading -->

<h2>Enable Slider in Your Theme</h2>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>Nowadays, many themes already integrate with beautiful sliders. Most of the themes allow you to enable and customize it right in the Customizer, but others may have different methods. Therefore, to add sliders, you just need to follow the instructions of the theme you are using.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>For example, I'm using the <a href="https://gretathemes.com/wordpress-themes/memory/">Memory</a> theme which provides users with featured content sliders. You can easily add and customize it by going to <strong>Customize &gt; Theme Options &gt; Featured Content</strong>. And to explore more customization of this theme, you can refer to the <a href="https://gretathemes.com/docs/memory/">thorough documentation</a> provided.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>In this case, this theme allows me to display posts but depending on your theme, you may have more choice to display like pages, custom images, categories ... And again, remember that each theme has its own way to enable and customize sliders. Therefore with every theme, you need to carefully read and follow their documentation.</p>

<!-- /wp:paragraph -->

<!-- wp:heading -->

<h2>Add Sliders Using a Plugin</h2>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>If you fancy adding sliders to your site, yet your theme doesn't support sliders, let a plugin help you out. There are many plugins that support adding and customizing sliders. In this post, we will use <a href="https://wordpress.org/plugins/smart-slider-3/">Smart Slider 3</a> plugin because it is quite easy-to-use, highly customizable, especially, free to download.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>The free version of Smart Slider 3 is available on WordPress.org. Here, I go to <strong>Dashboard &gt; Plugins</strong>, simply search and download it.</p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image"><img class="aligncenter" src="https://lh5.googleusercontent.com/C2DvQ7SsJNGL3qYV8XHe9-_Hs_jpot0vqaW8fl_QLddrgwW2tinf0oLw6F-OAqzPXjZae2mYB-S8j21Rso9ZV3kkRB0AVCarhe6jdVgG4dJPKOQ6MgdrAF7JCvfm1b0AGsqnWu3I" alt="Add Sliders Using Smart Slider 3 Plugin" width="1343" height="622" /></figure>

<!-- /wp:image -->

<!-- wp:paragraph -->

<p>After <a href="https://gretathemes.com/install-wordpress-plugin/">installing and activating the plugin</a>, let's follow these 5 steps to create your slider:</p>

<!-- /wp:paragraph -->

<!-- wp:list -->

<ul>

<li>Step 1: Create a new slider</li>

<li>Step 2. Create the inside slides</li>

<li>Step 3: Set up the content for slides</li>

<li>Step 4: Configure the slider</li>

<li>Step 5: Display the slider on your website</li>

</ul>

<!-- /wp:list -->

<!-- wp:heading {"level":3} -->

<h3>Step 1: Create a New Slider</h3>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>Hang on, there are some terms that you need to familiar with when using this plugin:</p>

<!-- /wp:paragraph -->

<!-- wp:list -->

<ul>

<li>In a slider, you can click the navigation button or swipe to move from one page to another, and these pages are called slides. In this plugin, these slides support you to display images, posts, categories, and overlays. Notice not to misunderstand between slider and slide. A slider may contain one or more slides.</li>

<li>The term "project'' here means a slider.</li>

</ul>

<!-- /wp:list -->

<!-- wp:paragraph -->

<p>First, you need to create a new slider and choose a type for the slides. Go to <strong>Dashboard &gt; Smart Slider</strong>, click<strong> New Project</strong> to start creating your own new slider.</p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image"><img class="aligncenter" src="https://lh3.googleusercontent.com/lMJjwJFm58aUuuFEAVJ__trmYRokGBPvqFFJ4Ez_PNnA4UMfo0eYAgyTh_JxbODEAO4_36cnN7-jrwyVONqtuczCMfkfuvi3IqzKjgsI4S5ZTSyIxvp_Fz6W8u477Y95Fd-eSdVQ" alt="Create a New Slider" width="1346" height="622" /></figure>

<!-- /wp:image -->

<!-- wp:paragraph -->

<p>There are 3 options for you and just click the option you want to begin. And again, no matter which option you choose, you need to follow these terms I've mentioned.</p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image"><img class="aligncenter" src="https://lh5.googleusercontent.com/4dl7nRADPDKm1-rGf4zKefTTVaCHcoVFwgWvpnayIK08IJhg9MO8-YJn5pIorNgeUDrW1Gv3zqpg9WLHH4BI-dicqM0NbN-uglg97dZsXURWnDijiq7t932E3I6m_wj78H7EeA_s" alt="There are 3 options for adding sliders" width="1346" height="621" /></figure>

<!-- /wp:image -->

<!-- wp:heading {"level":4} -->

<h4>Option 1: Create a New Project</h4>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>You should choose this option when you already have your own planned slider. You will build your slider from scratch and make your imaginative idea come true.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>This option allows you to choose one out of three different styles for your sliders in the <strong>Slider Type</strong> tab (1). And then, enter a name for your slider and the dimensions in the <strong>Settings </strong>tab (2). After you finish, click the <strong>Create </strong>button.</p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image"><img class="aligncenter" src="https://lh6.googleusercontent.com/G7UIxIEp_6gh5mNOxD1R3mfNQPYz5CZ39kHQwNa4x7ff-l3v8cQGeauW179Ml7PJ4o9385AHoDuX-mt7m5E1kAvBWWnIK4_q7fjae9NUamEC1_TIi3K2FZwWShtdkpPto0kbjplX" alt="Create a New Project with Smart Slider 3 plugin" width="1345" height="623" /></figure>

<!-- /wp:image -->

<!-- wp:heading {"level":4} -->

<h4>Option 2: Start with a Template</h4>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>If you haven't got any idea about creating a slider, don't worry! Let's take advantage of built-in templates. You can base on these beautiful and convenient suggestions to be creative as you want. Or you can simply import and edit one of them to make it yours.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>One template included 3 identical slides, which may keep the similarity between slides, yet might make your slider a little bit boring. Therefore, different from the flexibility of the first option, this way can give your slider a sense of unity. However, you can add more slides to edit differently as you want.</p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image"><img class="aligncenter" src="https://lh5.googleusercontent.com/QFUe2Ne7whhyPvnwm5Myajz9wTAh-Jdr-_npaRZrMeTNS07DfiUMLXWmuLXqtliaECbAUVd1oU79A7PcXxRzfR2_gEhcymIewF1P1ah_l1qW13ErUMNKrZ7fZiPsBZ1eQWtY_Y7V" alt="Start with a slider Template" width="1343" height="619" /></figure>

<!-- /wp:image -->

<!-- wp:heading {"level":4} -->

<h4>Option 3: Import Your Own Files</h4>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>Surprisingly, this plugin supports you to import your own slider. For example, you already attempted to build an excellent slider somewhere, and you want to use it on your website without repeating this complicated process one more time, now you should choose this option.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>To import your slider, click the plus (+) button and choose your desired file. Note that this file must be a <code>*.ss3</code> file. After that, press <strong>Import</strong>.</p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image"><img class="aligncenter" src="https://lh5.googleusercontent.com/NJlWQMTaSxa-sGYv-2Qzo6G1yNUK0b-G9NjhjyM1Sw1dp84Z-xlfz_Cpw5Jz7IdriRiu50iOhTdeof8yuMRTidDOAH4xO7QbI6sPkMkmV0ePsL255Nt-s9pRBUdvFsurnjbWJxix" alt="Import Your Own Files to the plugin" width="1346" height="623" /></figure>

<!-- /wp:image -->

<!-- wp:paragraph -->

<p>After finishing one of these 3 options, you'll be automatically navigated to the dashboard editor of this plugin, where you can create the inside slides and set up their content.</p>

<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->

<h3>Step 2: Create the Inside Slides</h3>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>Now, no matter whether you already have slides or not, you can follow these next guidelines to create the inside slides.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>If you want to add a new one, click <strong>Add Slide</strong>.</p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image"><img class="aligncenter" src="https://lh6.googleusercontent.com/FMe-IDELAPwpdTX0ZIndTI4l_QOsD7PgaT91r6-zB0tvzvCDdaFoWYRqsAEki7eGRS44f_gcqs09rD74JuLTJNdYDhAP9m4-TcAh3T1kNdD535rKtQGA3gtujwC7fDDvUbDPpPEW" alt="Create the Inside Slides" width="1349" height="622" /></figure>

<!-- /wp:image -->

<!-- wp:paragraph -->

<p>Then the option to choose a type of slide will show up above it. <strong>Note</strong>: this plugin allows you to add as many slides as you want.</p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image"><img class="aligncenter" src="https://lh3.googleusercontent.com/tfxGJiFbebwrb4YWvv05ohQ5H_q7gy9ilyw_9ZpKM2amycl-cjlYFiVZ41M7CtqiTtb_dzUc8J7_F2qUo00pNde6qrJZoX9L8UY4c-MDSwg-BigfVgjy7JykDghjnccC5whcgZ7O" alt="the option to choose a type of slide shows up" width="1348" height="624" /></figure>

<!-- /wp:image -->

<!-- wp:paragraph -->

<p>Depending on your needs, you should choose the proper types of slides from these provided options.</p>

<!-- /wp:paragraph -->

<!-- wp:list -->

<ul>

<li><strong>Image</strong>: You can choose your most outstanding images here so that it'll be outstandingly displayed in the slider. For example, when you want to exhibit your products' image for your <a href="https://gretathemes.com/best-ecommerce-wordpress-theme/">eCommerce website</a>, you should place them in your slider.</li>

</ul>

<!-- /wp:list -->

<!-- wp:image -->

<figure class="wp-block-image">

<img src="https://lh3.googleusercontent.com/JrmQLDTWnwV2PtFiIeKaSJpkeg6BPKKNld1DTCsEbE5EtUOw5VHPYkucLPjUIoJ9agiyb9dIcy225EL428Qjyb4NC4HrV2ikiOOKO3tr9ISn6EZiJTvT3XGhRNTqOgKXvMYLQN05" alt="choose the proper types of slides from the provided options" width="1347" height="617" />

</figure>

<!-- /wp:paragraph -->

<!-- wp:list -->

<ul>

<li><strong>Blank</strong>: This type allows you to flexibly edit the slides as you want from the beginning. You have to decide the layout of this slide by yourself.</li>

</ul>

<!-- /wp:list -->

<!-- wp:image -->

<figure class="wp-block-image">

<img src="https://lh3.googleusercontent.com/ZcH3mo8sNTdUECIIZ6MKyOm9K77krTdgGoGjXpsBlVVP4DSJ5Tu0b8wvei2oO9UJGonWECON0FVq7EK0Aj0ILrnITKFlrPLrLs_AzR1o17WACGQL7u0jcGOHU54fFXQ3wzKSfjt2" alt="Add a blank slides with nothing inside" width="1346" height="620" /> 

</figure>

<!-- /wp:paragraph -->

<!-- wp:list -->

<ul>

<li><strong>Post</strong>: It's highly recommended to choose a featured post here if you want to effectively get visitors' attention to your post and encourage them to read it. When you choose a post, its featured image along with the excerpt will be displayed here.</li>

</ul>

<!-- /wp:list -->

<!-- wp:paragraph -->

<p>To choose a post, click the <strong>Post </strong>tab, then a list will show up for you to choose the desired post.</p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image">

<img src="https://lh3.googleusercontent.com/FId0Myr__w3JWwI4ajZRwNn3wH_P-rYNdI3K9gdpBGo3gJB9cqsUwfqUfSXbh_gJbvewpY7rGZsNHZJYpQXMZdOEKfoZ8rpEm1lbed2hJg-rOaF8ifTw6oX99Nc-0NogsP6GRg1U" alt="Add feature image to the slider" width="1344" height="624" />

</figure>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image"><img class="aligncenter" src="https://lh6.googleusercontent.com/awQBEbH5Nt_1UbrSPx1-D5yfOhI6tSI3FMALfwYXVXPTtAnJYg7dh9cpPtbdhRUEdV_sYlmTeYLUc5l1xWcL8AJ1GlbCtjAexTaFxEuOK8WAw1bcufyRMS3oFjIOEwhXFxwGd9T4" alt="choose the desired post to display on slider" width="1350" height="626" /></figure>

<!-- /wp:image -->

<!-- wp:list -->

<ul>

<li><strong>Static overlay</strong>: A static layer will be placed on all the slides. You should use it when you want to highlight some important content from the image background.</li>

</ul>

<!-- /wp:list -->

<!-- wp:image -->

<figure class="wp-block-image">

<img src="https://lh3.googleusercontent.com/2jpQvo7ICveyMB2S_RJmN3sqyM1Qequ_FiQ7GadT1u6D_0cbK5sw6biHoiC9QFWYPcS7FktasyeUg3nUvn-u5hpZY0Ui_iirWXF18De3HAcCMOpovJzvIR8ZOoZjSUZ-NG_rWbDu" alt="A static layer will be placed on all the slides." width="1349" height="623" />

</figure>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image"><img class="aligncenter" src="https://lh6.googleusercontent.com/sBuO6gQTrMHWiM4uvXjQL7fPxeiZuLlMD2D0uZVmWZqSeOQr_zGzw185CHYSR2n1fKplmZBDg7sNwZVMkOEQy0PMXRhuZT3YYvIR1j7vmD63VvVcSOdpSfTlaYIL3iqj7SWF_7NO" alt="The Dynamic slides option helps you automatically generate a series" width="1351" height="620" /></figure>

<!-- /wp:image -->

<!-- wp:list -->

<ul>

<li><strong>Dynamic slides</strong>: This option helps you automatically generate a series of posts from a favorite category, tag, or taxonomy. With these slides, you can easily showcase notable content on your website.</li>

</ul>

<!-- /wp:list -->

<!-- wp:paragraph -->

<p>Click the<strong> Dynamic slides </strong>tab, you'll be taken to a dashboard to customize the series of posts. Now, choose the filter to create your type of series as below:</p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image"><img class="aligncenter" src="https://lh4.googleusercontent.com/iFKmopXRMoruA8pLxblKaR8SCIpvppsc9b1gN7MqyZ9DGV9ZZAYtm7LPebRQNmQvtODoJKL4gGfyFMRh7EhDeleXB-hFKZKNO1SHmY4zE554u1K-hauhpC3jv-Qxh5EgQ2gF5BFw" alt="choose the filter to create your type of series with Smart Slider 3 plugin" width="1345" height="618" /></figure>

<!-- /wp:image -->

<!-- wp:paragraph -->

<p>Then, you should modify the <strong>Order </strong>tab and <strong>Generator Settings</strong> tab as you want. Notably, you can change the number of content you want to show up here.</p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image"><img class="aligncenter" src="https://lh4.googleusercontent.com/wPWrmH6kcQ9Q9b5cNCBb9BZL6X21406fujLgjRaMuwgK-jDS9wXwaEHaZDBrS6ak0ScOOsgRCCmV5V9mbX5KAHD-AbvPndpnhQyvRKPqHDujKGVuF5WS5-8Usv_Tqf3xJ7793_SO" alt="change the number of content you want to show up with Smart Slider 3 plugin" width="1349" height="620" /></figure>

<!-- /wp:image -->

<!-- wp:paragraph -->

<p>And finally, it'll be displayed in thumbnail like this:</p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image"><img class="aligncenter" src="https://lh6.googleusercontent.com/lwWzxcXFjeWNeruVo6ma_sWRFmn7AiuwRdF3atEPEZYF8FwBdAFTyGu630EtLZoHnk_9OGSzjHyEFIInNqrLT2FmH_eqfV_OOaJCc3Y_a7eocTDNyKjgLjNZDc0WkzLqBSHZgYDF" alt="The content will be displayed in thumbnail" width="1348" height="620" /></figure>

<!-- /wp:image -->

<!-- wp:paragraph -->

<p>Your slider can showcase just one type of slides or a mixture of different types as in the example below:</p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image"><img class="aligncenter" src="https://lh6.googleusercontent.com/mEqPK8UzSZbz-M9xuuRHeIKfygWJADWyqweUI3yCo2Y56T5EB_h0WHSJjahNli4-tnk94ZE-N0iqU5oRVidQS6X6ydkMZUf1nSneXTLNrOK0AHvT4td0NsTxGkkaBf78QSfQUdv5" alt="Your slider can showcase just one type of slides" width="1348" height="621" /></figure>

<!-- /wp:image -->

<!-- wp:paragraph -->

<p>Now, after you have all the slides you want, let's move to the next step.</p>

<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->

<h3>Step 3: Set Up the Content on a Slide</h3>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>This step is to set up the content on a slide, hover over the slides, and click <strong>Edit </strong>to go to the slide editor. The manipulation to customize different types is basically the same. Therefore, I will describe how to deal with the content on the slide of the image, and you can similarly apply it to the other types.</p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image"><img class="aligncenter" src="https://lh6.googleusercontent.com/sqlujYH1KGsau7a8smhRAfSkB2X5-zz16-fU7VlpKayXPSdWhO6m_v1ZZodJljLuHH7atMHSOWVpM9EgqMpyqlbjOvKs76RZLNKsx_35xQvIwkWGhOWk3L3DzUDdD5A_Pr_JifTX" alt="Set Up the Content on a Slide" width="1349" height="622" /></figure>

<!-- /wp:image -->

<!-- wp:heading {"level":4} -->

<h4>Set-Up with a Slide of Image</h4>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>Now, click the icon of the element you want to add: heading (the title), text, image, button, row (to create a column), which all lie on the right sidebar. After that, a black box editor will appear, which includes multiple options with simple instructions for you to easily customize.</p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image"><img class="aligncenter" src="https://lh5.googleusercontent.com/0BANLGSyeS8k6znMzd0_NW2r-XQSNxfnJ93V7qj3bfZf_lIcNKV8EUeSqZwDuRWPwo-yMEiEpHzBzI-4o7h7fLD3pWxiQLlLoVWYDIWgjh5rfBOviGcjTdmqyt8Xza8cH5ZSMUn3" alt="Set Up with a Slide of Image" width="1351" height="620" /></figure>

<!-- /wp:image -->

<!-- wp:paragraph -->

<p>For example, here is the result after I add a heading (1), text (2), row (3), images (4), and buttons (5) into an image-slide and customize the font, size, position, text color, and background color using the black box editor.</p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image"><img class="aligncenter" src="https://lh4.googleusercontent.com/WpaRwwgHRjpcBMwUjmmsbo1KpY2yHw5nGFBF8qZ0THqCWNo7UMRwO9Z99OZypYqNTntq6sF0sMwGozqCZcM6e634lz4KfK_PuH4TZwHNgVwfJt1PE_zDyks1Sx5hDItCO_mHFw2b" alt="the result after I add a heading, text, row, images, and buttons into an image-slide" width="1350" height="622" /></figure>

<!-- /wp:image -->

<!-- wp:paragraph -->

<p>After that, click <strong>Save </strong>at the top of the page and then click <strong>Back </strong>to return to the Smart Slider's dashboard.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>Another example here, you can add a designed logo as an image (1), add short description text (2), and add a call-to-action button (3) as below:</p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image"><img class="aligncenter" src="https://lh3.googleusercontent.com/grM8xhm2CwLeN_y3QsM90wHg44ede6FiBU4YPveps1whtC-dO6-8HrSeoYE2H9nmCs0SHxgcZskP93IhUKPzf34MTiMjLQEqcM1s2SeGIN9o_BHCK6JPcXKFV_2nET9IRsLUJRFr" alt="you can add a designed logo as an image" width="1345" height="619" /></figure>

<!-- /wp:image -->

<!-- wp:heading {"level":4} -->

<h4>Set Up with a Slide of Post</h4>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>Now you just simply repeat these steps above on slides of other types. However, there is some note here.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>With a slide of the post, it is automatically included:</p>

<!-- /wp:paragraph -->

<!-- wp:list -->

<ul>

<li>Heading: your title of posts (1),</li>

<li>Text: post's excerpt (2),</li>

<li>And Button: the call-to-action button (3).</li>

</ul>

<!-- /wp:list -->

<!-- wp:image -->

<figure class="wp-block-image"><img class="aligncenter" src="https://lh3.googleusercontent.com/QZwrGvD0Bsxys8nO6KtkR18OyYoUSC-SwYwgAwFGUeZw6vqM-hLO6GyVU_qAQWHLakd0oIPs9hUKB0yrVNiNspeN3kPdyBJ3o0j1D66W5aJiGkYuiGVRhTd2XaJnE52_FxtiGko3" alt="Set Up with a Slide of Post" width="1349" height="620" /></figure>

<!-- /wp:image -->

<!-- wp:paragraph -->

<p>You can keep them as default or edit them to suit your taste. It's up to you! And again, it's totally the same as doing with an image. Here, I keep the original elements (1) and add more illustration images (2) as below:</p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image"><img class="aligncenter" src="https://lh3.googleusercontent.com/PdUU5cSrqDKeas2yprBBs40pAUOxfY1sL2sVn5dYza8D7ywd6GISG-hTIE_hFBbocstXGqkznchix9oD6UAK3mwi7ucB-CT7hVqN_Yy9UQwXS88jGTcFJHCsjNIvFf7e6mnnWUSI" alt="Edit the elements in a slide" width="1352" height="620" /></figure>

<!-- /wp:image -->

<!-- wp:heading {"level":4} -->

<h4>Set-Up with a Slide of Static Overlay</h4>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>With a static overlay, you can also add all elements as when doing with an image or a post. It will be placed on all your slides, so it may hide your important content on other slides. However, you can avoid it by changing the position of the overlay like that:</p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image"><img class="aligncenter" src="https://lh6.googleusercontent.com/sBuO6gQTrMHWiM4uvXjQL7fPxeiZuLlMD2D0uZVmWZqSeOQr_zGzw185CHYSR2n1fKplmZBDg7sNwZVMkOEQy0PMXRhuZT3YYvIR1j7vmD63VvVcSOdpSfTlaYIL3iqj7SWF_7NO" alt="Set Up with a Slide of Static Overlay" width="1351" height="620" /></figure>

<!-- /wp:image -->

<!-- wp:paragraph -->

<p>Additionally, this plugin doesn't allow you to change the height of this overlay, thus it may be a limited point.</p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image"><img class="aligncenter" src="https://lh5.googleusercontent.com/Q2Tloj0OTsFJ34j15oTNDIoo11uAPtUVhSebAxyvE9F2vtXfaW0tk6-1AT2rgk5L4vjEf9zBuRePUbkSe09DGjzz2g2hgweMrbiPKRVtqQ4MJaE18lHqSjHxfcfEiTfpmp5Bpw00" alt="this plugin doesn't allow you to change the height of this overlay" width="1346" height="624" /></figure>

<!-- /wp:image -->

<!-- wp:heading {"level":4} -->

<h4>Set Up with a Slide of Dynamic Slides</h4>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>Distinctively, you can easily place all the elements of one slide in all series of dynamic slides. That helps you save the time of editing the same things on different slides. For example, after adding the post's title into the slide of the current series, I click the <strong>Static Save </strong>button.</p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image"><img class="aligncenter" src="https://lh3.googleusercontent.com/3-dbnHOuDcDKEvZOSpbbi7t7Crvv5FjaTUrNlxqqi9h3Ct4-GxznxtKXT2tGaW6nkYaxkJgmzSAIxYUk98mXBMOdXtDv1tm-qRW3qUDpFT_-Hru9k_cpvPB7Kn2hdTsWeuR5X2xE" alt="Set Up with a Slide of Dynamic Slides" width="1349" height="618" /></figure>

<!-- /wp:image -->

<!-- wp:paragraph -->

<p>Then other slides of this series are automatically inserted with a title like that:</p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image"><img class="aligncenter" src="https://lh4.googleusercontent.com/FQ_Ky8slUl3uQFdwkOeMmjOU6hKWvavfFcmNoO2l2hKVMFyup3lYiEFoYz0424aPmM7tMOsG6QSrUSb_WIPWpAqnWiir_sq48tzrc38-UE0RuWlvAe9-z1arkho9CV7rUQfjm4X3" alt="Then other slides of this series are automatically inserted with a title" width="1354" height="617" /></figure>

<!-- /wp:image -->

<!-- wp:paragraph -->

<p>The copy is optional. If you want various contents of slides in a series, just skip the <strong>Static Save</strong> one and click the <strong>Save </strong>button.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>That's it! That's all you need to set up content for a slide of any provided type.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>Another tip here: you can duplicate a slide by clicking the setting icon (1), choose <strong>Duplicate </strong>(2), and then edit them as above instructions until you have all slides you want.</p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image"><img class="aligncenter" src="https://lh6.googleusercontent.com/W4HoSlWqHMdn5laJky57t6Kuj0tfnvF3yWwDIER0vQDl5SHFoSfkXCeHFCJDWutTYHGzh1u41Gh9C0qWQux_Z-FnhtGuDuiBjFxsXrXZMX9lfzH7jriox_w9BXZPqk8LERqqqj0S" alt="you can duplicate a slide by clicking the setting icon" width="1347" height="623" /></figure>

<!-- /wp:image -->

<!-- wp:heading {"level":3} -->

<h3>Step 4: Configure the Slider</h3>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>After you have all the slides, you should configure the slider to have a nicer display.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>In the project editor of the slider you want to configure, scrolling down, you'll see the <strong>My project</strong> section. There are several tabs here, which all allow you to configure your slider in many aspects.</p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image"><img class="aligncenter" src="https://lh6.googleusercontent.com/ax2Txi_vqOOzvN77G-hVRZcJ0LwIjGPQykz6vcGyMqJJXUSkxw_oQMdXjLRGP_NUmOgz4AKI2R7DOUxeD9Yuv7yyW-_bjGGr_Uj5wscT8CmbM2er0FFZUA5auk6wCmOFT1dM5tyh" alt="Configure the Slider in Smart Slider 3" width="1347" height="623" /></figure>

<!-- /wp:image -->

<!-- wp:paragraph -->

<p>The configuration here is quite friendly-user with the simple manipulation and understandable features' name. Specially, you can view the changes in your customization in the frontend by clicking this icon.</p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image"><img class="aligncenter" src="https://lh3.googleusercontent.com/9sZMEPnQy9vRADfuC9qNrdTC7f9HYoz1yAKkLNI801y5ZhC797HO8nhU6juTYFQdBjxiCFUUHrpt6R_fBFEF_M_b3k_E4TaXU6fBJh2K6s7ayXk5Nr4zQq9WGEtu4KkUYjR6jlHA" alt="The configuration of Smart Slider 3 is quite friendly-user " width="1346" height="622" /></figure>

<!-- /wp:image -->

<!-- wp:paragraph -->

<p>You can variously modify your slider with these provided features. However, if you are a beginner, you may be confused about them. Thus, you just need to notice some features I mentioned here to be easier.</p>

<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->

<h4>Change the Size</h4>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>First, you can change the size of your slider to match the size of your images to have the nicest display. Go to<strong> Size &gt; Slider Size</strong>, and type the proper number of width and height.</p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image"><img class="aligncenter" src="https://lh4.googleusercontent.com/X4fCqFf-AjUbfztvMUe1fbcR2RN3dFc4Ub65RjVY7NnhzmvztgWgHc04cDiPoE6zgvej5fuEZTG5Wtan90p5OVlkr3EAZlSfucYi1Q1nMlf3UVRVbC3nkzqQ3yLA2yw3jTecdTCi" alt="Change the Size of the slider in Smart Slider 3" width="1346" height="622" /></figure>

<!-- /wp:image -->

<!-- wp:heading {"level":4} -->

<h4>Choose the Layout</h4>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>Or you can change the layout of the slider to fit with the layout of your pages. Go to <strong>Size &gt; Layout</strong> and select<strong> Boxed</strong>/<strong>Full-width </strong>layout.</p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image"><img class="aligncenter" src="https://lh6.googleusercontent.com/s9x2Uf1_M45SFYjwSKAvQYsGaHcztm70nZUu2CFsgRDVe-zE-RL1tpYduA_PE20Gu5T5isdDDSKkiDuQU9ihLZlVgr3jX_p1fCQ9RUG1QWFQzDAHmQRHeT4Cf6zMn_jwQJMuGTQB" alt="Choose the Layout of the slider in Smart Slider 3" width="1349" height="621" /></figure>

<!-- /wp:image -->

<!-- wp:heading {"level":4} -->

<h4>Style the Navigation</h4>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>Next, it's amazing that you can highly customize the navigation on your slider such as arrows, bullets, and thumbnails. You can choose one of them or the combination in your slides. Go to <strong>Control </strong>and scroll to the desired section. Just enable/unable these elements, and then style them as you want.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>If you want your navigation to be arrow icons, go to the <strong>Arrow </strong>section and change their style.</p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image">

<img src="https://lh3.googleusercontent.com/ojGgdi00RkU_9-VwT4Ck0zPcUS7fEToWLC3EABDQmGmhRqnarkzDJBBperkU2pFQQi_SFHejGa56MDlmzcwjyj-j5r_DLEO5f_SepfgTih-clf0cG5wr0da2qpK1vT5ST8gUblTJ" alt="Style the Navigation of the slider in Smart Slider 3" width="1346" height="615" />

</figure>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image">

<img src="https://lh6.googleusercontent.com/5AXD3oQLPbfm6qs8Nmjbwi2BTWDtLslp2xqJK45BB7wFEB6fV8BxTLaGNSQnZAOOtPO1YeTlfrfjtxlLPwCVyT3g-yHj9Ui_kGf2ElO04P62C6mPfAJU6gToOad1UNlgM3_4cUcz" alt="Preview the slider" width="1345" height="621" /> 

</figure>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>Or you can place some bullets by going to the <strong>Bullet </strong>section, and style them too.</p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image">

<img src="https://lh3.googleusercontent.com/GGvgpef5Zcbq30A-TbsbUJcU5QGrlcog7_Yc3ODv85Fty32CrFYaBOddKuGw3TmvL2bl3RNaOK0G_QwqaVQvW2aUPdjCtRwGOXsuAzEW0sWOfDtCqA4mzVmjKrB7DKcY-fK7sS7l" alt="place some bullets to slider in Smart Slider 3 plugin" width="1347" height="620" />

</figure>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image">

<img src="https://lh4.googleusercontent.com/orBvWGLnNCYqwEpW68-RjbJPo7KY3mR2_cQ1QI4ZKHQ9_6TVLpPrqsZJcHUHqyZP8hnx9ayZLN4TfySiT0yDxdwPEDogpDr9syE49PzhgCPVPK_YB9eI-KUhjHDnLGY1swmqfXOm" alt="Preview the bullets of the slider" width="1348" height="622" /> 

</figure>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>Another option is displaying navigation as thumbnails. You can customize it in the <strong>Thumbnail </strong>section.</p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image">

<img src="https://lh3.googleusercontent.com/rdwYQogtrqT89dHm__y0Pmcxo7T1O1Ud3eyE2kN76bHDF8vJUHSnR9yVnlegYvpDsnmpLd02J-FlHxxvVsFqBOQrqNSz1-E3VuLLhR03bqTdyBik0eM1fJnOArXEdrW6EpfzXpk4" alt="Display the navigation as thumbnails." width="1345" height="621" /> 

</figure>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image">

<img src="https://lh4.googleusercontent.com/JN-fkkw3ZmRcuDoOF-T8r0s6ppntM4_o-2A-V5_OyTF5JqSt2DfQaD5yTxn8w8V_fhjsCkdhViZnr2ykIoDZxGRkFLqcuOKtnjAen1IVmYxq2PZI8-Vxm2DjNC0u5ql7rndBimrc" alt=" the thumbnail of the slider" width="1346" height="622" /> 

</figure>

<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->

<h4>Add the Animation</h4>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>Now, if you want your slider to have a more interesting and lively look, move on to modify the transition effect in the <strong>Animation </strong>section.</p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image"><img class="aligncenter" src="https://lh5.googleusercontent.com/3tjCfPaaM8pTKx8BCB0n5_RNfuqL3RvuIo5g1Q6Y36vIHj1MJYsUnlsIPXb65sFkcNnelnAJB0N05LKJGRyNG3f-C2xuFE9MCttuSJfxQy8fUGEhuGxH11amIhQLM-6f_TBEcaUn" alt="Add the Animation in Smart Slider 3" width="1348" height="623" /></figure>

<!-- /wp:image -->

<!-- wp:paragraph -->

<p>Here is the result of adding animation: <img class="aligncenter" src="https://i.imgur.com/t0Gm6eb.gif" alt="the result of adding animation in Smart Slider 3" width="1343" height="625" /></p>

<!-- /wp:core-embed/imgur -->

<!-- wp:heading {"level":4} -->

<h4>Enable the Autoplay</h4>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>Additionally, you can let your slideshow automatically run by going to <strong>Autoplay </strong>and enabling it.</p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image"><img class="aligncenter" src="https://lh6.googleusercontent.com/6euJv8IsDFpLU9zoeBbcrXt0kOnjsTnzD1N3a6fx5W65g2SNz42kWm-NB_AY44F7KFBMACINN8BwCtZRbWYT_wVRylLf-pv27SsYacJJ-ji9VI_ppTKWH7DLcCVK_4gzPse2-yMv" alt="Enable the Autoplay of Smart Slider 3" width="1348" height="625" /></figure>

<!-- /wp:image -->

<!-- wp:heading {"level":4} -->

<h4>Other Elements</h4>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>These're almost features that you may need to know to create a fascinating slider. Apart from that, this plugin also provides additional configuration options, such as adding images' names, adding a shadow, ... Therefore, you should carefully review and explore each customization option. This configuration may take you a little time to get a favorite slider as you want. Keep patient!</p>

<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->

<h3>Step 5: Display Your Slider on Your Website</h3>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>Now, after you have created a new slider, all you have to do is display it in the desired position. It is super easy. You just need to insert the shortcode of your slider into your posts or pages.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>First, copy the shortcode in the <strong>General </strong>tab as below.</p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image"><img class="aligncenter" src="https://lh3.googleusercontent.com/xYUGZW2otbEnpO4ebq4d0DnHoRBluNOtFKUw55T1EZgtZ-g3__k-sXe5HnFEU3qCR42qPXYm_qXE5E7KohoaJpx16A4N3e5oiAT5Oyn4Yjkx6HACtRC1d81FJC4ET0AunWobO5Qw" alt="Display Your Slider on Your WordPress Website" width="1348" height="624" /></figure>

<!-- /wp:image -->

<!-- wp:paragraph -->

<p>Next, go to <strong>Admin Dashboard &gt; Pages/Posts</strong> and choose the page or posts that you want to place the sliders. Smart Slider 3 has integration with both <a href="https://deluxeblogtips.com/beginners-guide-wordpress-gutenberg-editor/" rel="follow">Gutenberg editor</a> and Classic Editor, so don't worry about which editor you are using.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>Then paste the shortcode to the desired position as below.</p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image">

<img src="https://lh5.googleusercontent.com/EpFwqY9p1M4_2dnGxU28BjobvyXaZ8h1kjwgvvrPclhnYVFEA5U-mJGSfInVaI0imV533HgGDQxx3NvWalTD1XLU22sUGmDXK2Sq7Y3fV1qlNq6VKyeaWvEQITtwpGJN2iazTpVT" alt="choose the page or posts that you want to place the sliders" width="1366" height="622" /> 

</figure>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image">

<img src="https://lh3.googleusercontent.com/KIECIQ5TzpiVZ0yKFYRi8gY8GHHY7nO_KNGG0PDvRVyh9QPkW7UyCbNxBur4UK-og5nXzXipuzgRqgrzzuwqO_ziggrrHu22-Nnd9b5iYaw2bmwwGOB5bDQHjbDMwVa8ZEsR_kXA" alt="Insert the shortcode using Classic Editor of WordPress websites" width="1349" height="622" /> 

</figure>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>Finally, just save or update it and see the amazing result of your slider in the front-end.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p><img class="aligncenter" src="https://i.imgur.com/NSUjn5s.gif" alt="your slider display in the front-end" width="1345" height="589" /></p>

<!-- /wp:paragraph -->

<!-- wp:heading -->

<h2>Last Words</h2>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>That's cool! We have gone through the step-by-step instructions for adding sliders to your site. I hope you find the instructions understandable and easy-to-follow. With these sliders, your site will be much more attractive and appealing.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>Along with this awesome slider feature, you can also improve your site with other stuff like <a href="https://gretathemes.com/adding-lightbox-to-wordpress-for-beginners/">adding a lightbox</a> or <a href="https://gretathemes.com/add-video-background-wordpress-website/">adding video backgrounds</a>, etc. If you want to know any other tutorials, don't hesitate to leave some comments below.</p>