{"id":255,"date":"2026-03-04T20:04:12","date_gmt":"2026-03-04T19:04:12","guid":{"rendered":"https:\/\/baqueiro.es\/store\/?post_type=bdw_plugin_doc&#038;p=255"},"modified":"2026-03-05T19:41:41","modified_gmt":"2026-03-05T18:41:41","slug":"b-pretty-gallery-swiper-gallery-with-vertical-thumbnails-for-elementor","status":"publish","type":"bdw_plugin_doc","link":"https:\/\/baqueiro.es\/store\/plugin-docs\/b-pretty-gallery-swiper-gallery-with-vertical-thumbnails-for-elementor\/","title":{"rendered":"[B] Pretty Gallery \u2014 Swiper Gallery with Vertical Thumbnails for Elementor"},"content":{"rendered":"\n<h3>Requirements<\/h3>\n<ul>\n  <li>WordPress 6.0 or higher<\/li>\n  <li>PHP 8.1 or higher<\/li>\n  <li>Elementor (free version) installed and active<\/li>\n  <li>The site must allow loading of Elementor\/Swiper assets (the widget uses Swiper provided by Elementor)<\/li>\n<\/ul><br>\n\n<h3>Installation<\/h3>\n<ol>\n  <li>Go to <strong>Plugins \u2192 Add New<\/strong> in your WordPress admin.<\/li>\n  <li>Click <strong>Upload Plugin<\/strong> and select the <code>.zip<\/code> file, or search for &#8220;Pretty Gallery&#8221;.<\/li>\n  <li>Click <strong>Install Now<\/strong>, then <strong>Activate<\/strong>.<\/li>\n  <li>Edit any page with Elementor and add the &#8220;Pretty Gallery&#8221; widget.<\/li>\n<\/ol><br>\n\n<h3>Adding the Widget<\/h3>\n<ol>\n  <li>Open the page with <strong>Edit with Elementor<\/strong>.<\/li>\n  <li>Search for <em>&#8220;Pretty Gallery&#8221;<\/em> in the widget panel.<\/li>\n  <li>Drag the widget to the desired section.<\/li>\n<\/ol><br>\n\n<h3>Content Tab Settings<\/h3>\n\n<h4>Source<\/h4>\n<ul>\n  <li><strong>Manual Selection:<\/strong> You choose the images in the &#8220;Gallery Images&#8221; control.<\/li>\n  <li><strong>Post Attachments:<\/strong> The widget uses image attachments from the current post.<\/li>\n<\/ul><br>\n\n<h4>Gallery Images<\/h4>\n<p>Appears only with Manual Selection. Select one or more images.<\/p><br>\n\n<h4>Transition Effect<\/h4>\n<p>Defines the transition effect of the main slider:<\/p>\n<ul>\n  <li>Slide<\/li>\n  <li>Fade<\/li>\n  <li>Cube 3D<\/li>\n  <li>Coverflow<\/li>\n<\/ul><br>\n\n<h4>Loop Slides<\/h4>\n<p>Enable to repeat infinitely. <strong>Note:<\/strong> With Cube 3D effect, loop is automatically disabled.<\/p><br>\n\n<h4>Transition Speed (ms)<\/h4>\n<p>Transition speed in milliseconds.<\/p><br>\n\n<h4>Autoplay Options<\/h4>\n<ul>\n  <li><strong>Autoplay:<\/strong> Enables automatic rotation.<\/li>\n  <li><strong>Autoplay Delay (ms):<\/strong> Delay between slides (only if Autoplay is active).<\/li>\n  <li><strong>Pause on Hover:<\/strong> Pauses autoplay when hovering (only if Autoplay is active).<\/li>\n  <li><strong>Start on Hover:<\/strong> Autoplay starts only when the mouse enters the gallery and stops when the mouse\n    leaves. Uses only the transition speed (no delay between slides) creating a continuous and fluid transition. Ideal\n    for interactive galleries.<\/li>\n<\/ul><br>\n\n<h4>Navigation Options<\/h4>\n<ul>\n  <li><strong>Hide Arrows on Mobile:<\/strong> Hides arrows on mobile devices.<\/li>\n  <li><strong>Hide Navigation Arrows:<\/strong> Completely hides navigation arrows on all devices.<\/li>\n<\/ul><br>\n\n<h4>Thumbnail Options<\/h4>\n<ul>\n  <li><strong>Hide Thumbnails:<\/strong> Completely hides thumbnails, transforming the widget into a simple slider.<\/li>\n  <li><strong>Thumbs Position:<\/strong> Defines where thumbnails appear relative to the main image \u2014 Right (default),\n    Left, Bottom, or Top. On mobile, thumbnails always appear below regardless of the setting.<\/li>\n  <li><strong>Hide Scrollbar:<\/strong> Hides the scrollbar of thumbnails when there are more thumbnails than available\n    space.<\/li>\n  <li><strong>Thumbs Rows (desktop):<\/strong> Number of visible thumbnails in the column on desktop.<\/li>\n<\/ul><br>\n\n<h3>Style Tab Settings<\/h3>\n<h4>Wrapper<\/h4>\n<ul>\n  <li>Gap between areas<\/li>\n  <li>Max width \/ max height of wrapper<\/li>\n  <li>Background<\/li>\n  <li>Border and Shadow<\/li>\n<\/ul><br>\n\n<h4>Main Image<\/h4>\n<ul>\n  <li>Max width \/ max height of main image<\/li>\n  <li>Object Fit \/ Object Position<\/li>\n  <li>Border radius<\/li>\n  <li>Shadow<\/li>\n<\/ul><br>\n\n<h4>Thumbnails<\/h4>\n<ul>\n  <li>Width of thumbnail area<\/li>\n  <li>Width and height of thumbnails<\/li>\n  <li>Spacing between thumbs<\/li>\n  <li>Active\/inactive opacity<\/li>\n  <li>Border and radius<\/li>\n  <li>Shadow<\/li>\n<\/ul><br>\n\n<h4>Navigation<\/h4>\n<ul>\n  <li>Arrow size<\/li>\n  <li>Color and background<\/li>\n  <li>Shadow<\/li>\n<\/ul><br>\n\n<h3>Usage Examples<\/h3>\n\n<h4>Manual Gallery (most common)<\/h4>\n<ol>\n  <li>Widget \u2192 Content \u2192 <strong>Source: Manual Selection<\/strong><\/li>\n  <li>Select images in <strong>Gallery Images<\/strong><\/li>\n  <li>Choose the <strong>Transition Effect<\/strong><\/li>\n  <li>Adjust <strong>Thumbs Rows<\/strong> to control how many thumbnails appear<\/li>\n<\/ol><br>\n\n<h4>Gallery by Post Attachments<\/h4>\n<ol>\n  <li>In WP admin, attach images to the post (media attached to post)<\/li>\n  <li>Widget \u2192 Content \u2192 <strong>Source: Post Attachments<\/strong><\/li>\n  <li>Publish\/update the page<\/li>\n<\/ol><br>\n\n<h4>Autoplay with Pause on Hover<\/h4>\n<ol>\n  <li>Enable <strong>Autoplay<\/strong><\/li>\n  <li>Adjust <strong>Autoplay Delay<\/strong><\/li>\n  <li>Keep <strong>Pause on Hover<\/strong> enabled for better UX on desktop<\/li>\n<\/ol><br>\n\n<h4>Simple Slider (without thumbnails)<\/h4>\n<ol>\n  <li>Widget \u2192 Content \u2192 <strong>Hide Thumbnails:<\/strong> Enabled<\/li>\n  <li>Configure <strong>Autoplay<\/strong> if you want automatic navigation<\/li>\n  <li>The gallery will work only with navigation arrows<\/li>\n<\/ol><br>\n\n<h4>Minimalist Gallery (banner\/carousel)<\/h4>\n<ol>\n  <li>Widget \u2192 Content \u2192 <strong>Hide Navigation Arrows:<\/strong> Enabled<\/li>\n  <li>Widget \u2192 Content \u2192 <strong>Hide Thumbnails:<\/strong> Enabled<\/li>\n  <li>Enable <strong>Autoplay<\/strong> for automatic navigation<\/li>\n  <li>Configure <strong>Autoplay Delay<\/strong> and desired effects<\/li>\n<\/ol><br>\n\n<h4>Interactive Gallery (starts on hover)<\/h4>\n<ol>\n  <li>Widget \u2192 Content \u2192 Enable <strong>Autoplay<\/strong><\/li>\n  <li>Enable <strong>Start on Hover<\/strong><\/li>\n  <li>Adjust the <strong>Transition Speed<\/strong> to control fluidity<\/li>\n  <li>The slider starts stopped and only starts when the mouse enters the gallery<\/li>\n<\/ol>\n<p><strong>Note:<\/strong> The &#8220;Autoplay Delay&#8221; is not used in this mode \u2014 the transition is continuous.<\/p><br>\n\n<h3>Accessibility<\/h3>\n<ul>\n  <li>Arrows and thumbnails use <strong>buttons<\/strong> with <code>aria-label<\/code><\/li>\n  <li>Keyboard support: <strong>Enter\/Space<\/strong> on thumbnails opens the corresponding slide;\n    <strong>Enter\/Space<\/strong> on arrows navigates between slides\n  <\/li>\n  <li>Visible focus with <code>:focus-visible<\/code><\/li>\n<\/ul><br>\n\n<h3>Troubleshooting<\/h3>\n\n<h4>The widget appears empty<\/h4>\n<p>Confirm if there are selected images (Manual mode) or attachments in the post (Post Attachments mode).<\/p><br>\n\n<h4>The arrows don&#8217;t work<\/h4>\n<p>Check if Elementor&#8217;s Swiper is loading correctly. Cache or minification conflicts may affect functionality.<\/p><br>\n\n<h4>Autoplay doesn&#8217;t start<\/h4>\n<p>Confirm if &#8220;Autoplay&#8221; is enabled and the &#8220;Delay&#8221; is greater than 0.<\/p><br>\n\n<h4>Thumbs on desktop don&#8217;t respect the quantity<\/h4>\n<p>Confirm the value of &#8220;Thumbs Rows (desktop)&#8221; and clear page builder cache.<\/p><br>\n\n<h4>The image doesn&#8217;t render on frontend (only in editor)<\/h4>\n<p>Clear site and CDN cache. Check if there&#8217;s no conflict with other plugins. Confirm that the plugin version is 1.7.0\n  or higher.<\/p><br>\n\n<h4>Styles don&#8217;t apply on frontend<\/h4>\n<p>Clear Elementor cache (<strong>Elementor \u2192 Tools \u2192 Regenerate CSS<\/strong>). Clear browser cache. Check if there&#8217;s no\n  conflicting custom CSS.<\/p><br>\n\n<h4>Stretched\/deformed thumbnails<\/h4>\n<p>Adjust &#8220;Width&#8221; and &#8220;Height of thumbnails&#8221; in <strong>Style \u2192 Thumbnails<\/strong>. Configure &#8220;Space between\n  thumbnails&#8221;. Use images with similar proportions.<\/p><br>\n\n<h4>Thumbnail position doesn&#8217;t change<\/h4>\n<p>Check if &#8220;Hide Thumbnails&#8221; is disabled. Clear Elementor and browser cache. On mobile, thumbnails always stay below\n  (this is the expected behavior).<\/p><br>\n\n<h3>Privacy &amp; Data<\/h3>\n<p>This plugin:<\/p>\n<ul>\n  <li>Does <strong>not<\/strong> set any cookies.<\/li>\n  <li>Does <strong>not<\/strong> make any external HTTP requests.<\/li>\n  <li>Does <strong>not<\/strong> collect any user data.<\/li>\n  <li>Does <strong>not<\/strong> send data to third parties.<\/li>\n  <li>Is fully compatible with GDPR, LGPD, and similar privacy regulations.<\/li>\n<\/ul><br>\n\n<h3>Uninstallation<\/h3>\n<p>Deactivating the plugin disables the widget. To fully remove:<\/p>\n<ol>\n  <li>Deactivate the plugin.<\/li>\n  <li>Delete it from <strong>Plugins \u2192 Installed Plugins<\/strong>.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Requirements WordPress 6.0 or higher PHP 8.1 or higher Elementor (free version) installed and active The site must allow loading of Elementor\/Swiper assets (the widget uses Swiper provided by Elementor) Installation Go to Plugins \u2192 Add New in your WordPress admin. Click Upload Plugin and select the .zip file, or search for &#8220;Pretty Gallery&#8221;. Click [&hellip;]<\/p>\n","protected":false},"featured_media":0,"template":"","class_list":["post-255","bdw_plugin_doc","type-bdw_plugin_doc","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/baqueiro.es\/store\/wp-json\/wp\/v2\/bdw_plugin_doc\/255","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/baqueiro.es\/store\/wp-json\/wp\/v2\/bdw_plugin_doc"}],"about":[{"href":"https:\/\/baqueiro.es\/store\/wp-json\/wp\/v2\/types\/bdw_plugin_doc"}],"version-history":[{"count":8,"href":"https:\/\/baqueiro.es\/store\/wp-json\/wp\/v2\/bdw_plugin_doc\/255\/revisions"}],"predecessor-version":[{"id":291,"href":"https:\/\/baqueiro.es\/store\/wp-json\/wp\/v2\/bdw_plugin_doc\/255\/revisions\/291"}],"wp:attachment":[{"href":"https:\/\/baqueiro.es\/store\/wp-json\/wp\/v2\/media?parent=255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}