Extended Products Grid - Category - button options

Extended Products Grid - Category - button options

Navigate to the "Settings" tab.



To change position and button options for the 'category button' attribute, click the "Category Button".



You will see the following options:



  1. category icon - select an icon for the 'category button',
  2. icon alignment - select alignment of an icon. Available when the 'category icon' option is set,
  3. style - set the style for the 'category button',
  4. margin top - set the top margin for this attribute,
  5. size - set the size of the button,
  6. full width button - set the full width button,
  7. column gap - set the size of the column gap between the 'category button',
  8. row gap - set the size of the row gap between the 'category button'.
To configure options related to positioning, check the 'click to determine the position and size' checkbox.




  1. position - select static, relative, or absolute position,
  2. left - set the horizontal position of the element's left edge. Available when position relative or absolute is set,
  3. right - set the horizontal position of the element's right edge. Available when position relative or absolute is set,
  4. top - set the horizontal position of the element's top edge. Available when position relative or absolute is set,
  5. bottom - set the horizontal position of the element's bottom edge. Available when position relative or absolute is set,
  6. width - set the width for the 'category button' attribute. Provide value in px or %. For example, 200px or 20%,
  7. height - set the height for the 'category button' attribute. Provide value in px or %. For example, 200px or 20%,
  8. z index -  set this element below/above other elements. Available when position relative or absolute is set,
  9. click to position this element inline with the bottom one and the upper one - checking this option will set the attribute inline.

      • Related Articles

      • Extended Products Grid

        Extended Products Grid element is strongly recommended for building products list view.  Adding Extended Products Grid element To use Extended Products Grid, navigate to your section in YooTheme Builder: Add a new element to the section. Extended ...

      • Extended Products Grid - Other options

        Navigate to the "Settings" tab. To change other grid options, click the "Other" button. You will see the following options: Position - select static, relative, or absolute position for extended products grid element, left - horizontal position of the ...

      • Extended Products Grid - Category - image options

        Navigate to the "Settings" tab. To change position and image options for the 'category image' attribute, click the "Category Image" button. You will see the following options: width - set the width for the 'category image' attribute. Provide value in ...

      • Extended Products Grid - Grid options

        Navigate to the "Settings" tab. To configure grid options, click the "Grid" button. You will see the following options: Enable masonry effect - creates a layout free of gaps if items have different heights, Parallax - moves single grid columns at ...

      • Extended Products Grid - Producer - button options

        Navigate to the "Settings" tab. To change position and button options for the 'producer button' attribute, click the "Producer Button". You will see the following options: producer icon - select an icon for the 'producer button', icon alignment - ...