Help Center

Search for new topic

Learn how to set up, customize, and troubleshoot Keystone Themes.

jQuery(document).ready(function() { jQuery("#ezd_searchInput").focus(function() { jQuery('body').addClass('ezd-search-focused'); jQuery('form.ezd_search_form').css('z-index', '999'); }) jQuery(".focus_overlay").click(function() { jQuery('body').removeClass('ezd-search-focused'); jQuery('form.ezd_search_form').css('z-index', 'unset'); }) /** * Search Form Keywords */ jQuery(".header_search_keyword ul li a").on("click", function(e) { e.preventDefault() var content = jQuery(this).text() jQuery("#ezd_searchInput").val(content).focus() ezSearchResults() }) function ezSearchResults() { let keyword = jQuery('#ezd_searchInput').val(); let noresult = jQuery('#ezd-search-results').attr('data-noresult'); if (keyword == "") { jQuery('#ezd-search-results').removeClass('ajax-search').html("") } else { jQuery.ajax({ url: eazydocs_local_object.ajaxurl, type: 'post', data: { action: 'eazydocs_search_results', keyword: keyword }, beforeSend: function() { jQuery(".spinner-border").show(); }, success: function(data) { jQuery(".spinner-border").hide(); // hide search results by pressing Escape button jQuery(document).keyup(function(e) { if (e.key === "Escape") { // escape key maps to keycode `27` jQuery('#ezd-search-results').removeClass('ajax-search').html("") } }); if (data.length > 0) { jQuery('#ezd-search-results').addClass('ajax-search').html(data); } else { var data_error = '
' + noresult + '
'; jQuery('#ezd-search-results').html(data_error); } } }) } } function ezdFetchDelay(callback, ms) { var timer = 0; return function() { var context = this, args = arguments; clearTimeout(timer); timer = setTimeout(function() { callback.apply(context, args); }, ms || 0); }; } jQuery('#ezd_searchInput').keyup( ezdFetchDelay(function(e) { let keyword = jQuery('#ezd_searchInput').val(); let noresult = jQuery('#ezd-search-results').attr('data-noresult'); if (keyword == "") { jQuery('#ezd-search-results').removeClass('ajax-search').html("") } else { jQuery.ajax({ url: eazydocs_local_object.ajaxurl, type: 'post', data: { action: 'eazydocs_search_results', keyword: keyword }, beforeSend: function() { jQuery(".spinner-border").show(); }, success: function(data) { jQuery(".spinner-border").hide(); // hide search results by pressing Escape button jQuery(document).keyup(function(e) { if (e.key === "Escape") { // escape key maps to keycode `27` jQuery('#ezd-search-results').removeClass('ajax-search').html( "") } }); if (data.length > 0) { jQuery('#ezd-search-results').addClass('ajax-search').html(data); } else { var data_error = '
' + noresult + '
'; jQuery('#ezd-search-results').html(data_error); } } }) } }, 500) ); }); // Search results should close on clearing the input field if ( document.getElementById('ezd_searchInput') ) { document.getElementById('ezd_searchInput').addEventListener('search', function (event) { jQuery('#ezd-search-results').empty().removeClass('ajax-search'); }); } // Prevent form submission when pressing Enter in the search input field document.addEventListener("DOMContentLoaded", function () { const searchInput = document.getElementById("ezd_searchInput"); searchInput.addEventListener("keypress", function (event) { if (event.key === "Enter") { event.preventDefault(); // Prevent form submission } }); });
Portfolio

Portfolio

Estimated reading: 2 minutes 142 views

Summary: Discover how to add and customize a Portfolio Grid widget with Elementor. This guide takes you through easy steps to effectively showcase your work. Customize layouts, aspect ratios, columns, and filters to design a visually stunning portfolio that highlights your creations.

In this guide, we’ll show you how to add a Portfolio widget to your page using Elementor, making it easy to display your work.

Adding the Portfolio Widget

To add the Portfolio Grid widget to your page, follow these steps:

  1. Edit the page with Elementor.
  2. In the Widgets panel on the left, search for the Portfolio Grid widget.
  3. Drag and drop the widget onto your page.

Configuring the Portfolio Widget

Once the widget is added, the settings panel will appear on the left. Here’s where you can customize your portfolio’s look.

Portfolio Widget Settings Overview

  • Layout: Choose between Grid or Masonry layouts for a design that suits your style.
  • Aspect Ratio: Select an image aspect ratio that keeps your portfolio looking balanced.
  • Columns: Set the number of columns (from 1 to 5) for a clean, organized layout.
  • Posts per Page: Decide how many portfolio items to display per page.
  • Show Filter: Enable this option to add a category filter, allowing users to sort the portfolio.
  • Filter Design: Choose between Boxed or Underline filter styles to match your site’s overall design.

Save and Preview

Once you’ve customized the settings, click Update to save your changes. Preview your page to ensure the portfolio looks as expected.

By following these simple steps and adjusting the Portfolio widget settings, you can create a stunning, interactive portfolio that effectively showcases your work. Happy designing!

Leave a Reply

Share this Doc

Portfolio

Or copy link

CONTENTS

You are just one click away to build your brand

You get one-on-one support, personalized service, and zero agency fluff.