Accordion blocks are perfect for FAQs, feature lists, product specifications, terms and conditions, or any content where you want to present information clearly without overwhelming visitors with walls of text. By letting users click to reveal only the information they need, you create a cleaner, more engaging page experience.

Requirements: The Accordion block is available in all our license plans.

Adding the Accordion Block to Your Pages

Follow these steps to add an Accordion block to your SeedProd page:

Step 1: Add the Block

Under Design > Blocks, drag and drop the Accordion block into the desired section of your page.

The Accordion block appears in the Blocks panel and can be dragged into any section or column on your page.

Step 2: Configure Content Settings

Once added, click on the Accordion block to open its settings. In the Content tab, you can manage your accordion items and customize their appearance.

Accordion Items:

• Accordion 1, Accordion 2, etc.: Click on each accordion item to edit its title and content. Each item represents a collapsible section that users can expand or collapse
• Add New Item: Click this button to add additional accordion sections to your block. You can add as many items as you need to organize your content effectively

Typography and Spacing:

• Font Size: Adjust the size of the text within your accordion content to match your design preferences
• Space Between: Control the vertical spacing between accordion items (default is 24 pixels). Increase this value for more breathing room or decrease it for a more compact layout

Icon Customization:

• Icon Align: Choose where the expand/collapse icon appears relative to the accordion title (typically left or right alignment)
• Closed Icon: Select which icon displays when an accordion section is collapsed. This helps users identify sections they can expand
• Closed Icon Color: Choose the color for the icon when the accordion is in its collapsed state
• Open Icon: Select which icon displays when an accordion section is expanded, providing visual feedback about the section’s state
• Open Icon Color: Choose the color for the icon when the accordion is in its expanded state

The Content tab provides options to manage accordion items, adjust typography, control spacing, and customize the expand/collapse icons.

Step 3: Customize the Design

In the Advanced tab, you can customize the visual appearance of your Accordion block:

Styles:

• Typography: Fine-tune the font family, weight, style, and other text properties for accordion content
• Text Color: Set the color for the text inside accordion content sections
• Header Typography: Control the font properties specifically for accordion titles/headers
• Header Color: Choose the color for accordion headers when they’re in the closed state
• Header Open Color: Set a different color for headers when their sections are expanded, providing clear visual feedback
• Background Color: Add a background color to your accordion sections for better visual separation
• Divider Color: Choose the color of the lines that separate accordion items
• Text Shadow: Add shadow effects to your accordion text for depth and readability
• Shadow: Apply shadow effects to the entire accordion block or individual items

Spacing:

• Margin: Control the outer spacing around your accordion block (Top, Right, Bottom, Left). This determines how much space appears between the accordion and surrounding elements
• Padding: Adjust the inner spacing within your accordion sections (Top, Right, Bottom, Left). This creates breathing room between the content and the accordion borders

Attributes:

• CSS ID: Displays the auto-generated unique identifier for your accordion block. This ID is created automatically by SeedProd for custom styling or JavaScript targeting
• Custom Class: Add custom CSS classes to apply specific styles from your theme or custom CSS
• Custom Attributes: Add any HTML attributes to the accordion wrapper element. Enter each attribute on a new line using the format: attribute-name|value (e.g., aria-label|FAQ Section)

Device Visibility:

• Hide on Desktop: Hide the accordion block on desktop screens
• Hide on Tablet: Hide the accordion block on tablet devices
• Hide on Mobile: Hide the accordion block on mobile devices

Animation Effects:

• Entrance Animation: Choose from various animation effects that play when the accordion scrolls into view. This adds visual interest and draws attention to your content

The Advanced tab offers extensive styling options including typography, colors, spacing, and visual effects to match your brand.

Step 4: Save Your Changes

Once you have finished configuring the Accordion block and customizing its appearance, make sure to save your work.

You’ve successfully added an Accordion block to your page! This versatile block helps you present large amounts of information in a clean, user-friendly format that encourages engagement without overwhelming visitors. Experiment with different header colors, icon styles, and spacing options to create an accordion that matches your brand and serves your audience.

Requirements: The Additional Information Block is available in our Elite license.

Adding the Additional Information block to your Single Product template

Follow these steps to integrate the Additional Information block into your Single Product template:

1. Navigate to Design > Blocks > WooCommerce Template Tags > Additional Information and drag the Additional Information block onto the page.
   
2. Once added, click on the Additional Information block to access its settings. Here, you can adjust settings for Header content, Typography styles, Header Color, Text Color, and toggle Header visibility.
   
3. Explore the Advanced tab to fine-tune spacing, attributes, and device visibility settings.
   
4. That’s it! Remember to save your progress to ensure all configurations are retained.

By following these steps, you may integrate the Additional Information block into your Single Product templates. This block feature not only enhances the presentation of product data but also enriches the overall experience for your customers, providing detailed information in an organized manner.

Whether you’re showcasing a portfolio, displaying product photos, creating a photo gallery, or highlighting team members, the Advanced Gallery block offers the flexibility and styling options you need to create visually stunning image collections that engage your visitors.

Requirements: The Advanced Gallery block is available in all our license plans.

Adding the Advanced Gallery Block to Your Pages

Follow these steps to add an Advanced Gallery block to your SeedProd page:

Step 1: Add the Block

Under Design > Blocks, drag and drop the Advanced Gallery block into the desired section of your page.

The Advanced Gallery block is located under Design > Advanced and can be dragged into any section of your page.

Step 2: Configure Content Settings

Once added, click on the Advanced Gallery block to open its settings. In the Content tab, you can add images and configure how your gallery displays.

Gallery Images:

• Type: Choose between Single (one image) or Multiple (image gallery) display mode
• Image / Choose New Image: For Single type, click to select an image from your media library
• Add Gallery Images: For Multiple type, click to select multiple images at once to create your gallery. You can select as many images as you need

Select Single to display one image, or Multiple to create a multi-image gallery.

Click Add Gallery Images to select multiple images from your media library.

Settings:

• Column: Set the number of columns in your gallery grid. More columns create a tighter layout, while fewer columns give each image more prominence
• Spacing: Control the gap between images in your gallery. Adjust this value to create tighter or more spacious layouts
• Link: Choose where images link when clicked. Options include None (no link), Media File (opens full-size image), or Custom URL (links to a specific page)
• Aspect Ratio: Select the proportions for your images. Options include 1:1 (square), 3:2, 4:3, 9:16 (portrait), 16:9 (landscape), and 21:9 (ultra-wide). This ensures all images display consistently
• Image Size: Choose which size version of your images to display: Thumbnail, Medium, or Large. Larger sizes show more detail but load slower

Overlay:

• Background Overlay: Toggle to enable or disable a color overlay that appears over your images. This helps text and information stand out
• Title: Choose what to display as the title overlay on images. Options include None, Title, Caption, Alt text, or Description from your image metadata
• Description: Choose what to display as the description overlay. Options include None, Title, Caption, Alt text, or Description
• Text Color: Set the color for overlay text to ensure good contrast and readability
• Background Color: Choose the color of the overlay background that appears behind text
• Header Typography: Customize the font properties for overlay titles, including font family, size, weight, and style

The Settings section lets you customize columns, spacing, links, aspect ratio, image size, and overlay options.

Step 3: Customize the Design

In the Advanced tab, you can customize the visual appearance of your Advanced Gallery block:

Styles:

• Image Shadow: Add shadow effects to your images for depth. Choose from None, Hairline, Small, Medium, Large, X Large, 2X Large, or Bottom Drop Shadow
• Image Border: Enable borders around your gallery images
• Border Radius: Control the roundness of image corners. Higher values create more rounded corners, while zero creates sharp corners
• Border Style: Choose the border appearance: Solid (continuous line), Dotted (small dots), or Dashed (short dashes)
• Border Color: Select the color for your image borders
• Border Width: Set individual border thickness for each side (Top, Right, Bottom, Left). This allows you to create unique border effects

Spacing:

• Margin: Control the outer spacing around your gallery block (Top, Right, Bottom, Left). This determines how much space appears between the gallery and surrounding elements
• Padding: Adjust the inner spacing within your gallery block (Top, Right, Bottom, Left). This creates breathing room between the gallery content and its edges

Attributes:

• CSS ID: Displays the auto-generated unique identifier for your gallery block. This ID is created automatically by SeedProd for custom styling or JavaScript targeting
• Custom Class: Add custom CSS classes to apply specific styles from your theme or custom CSS
• Custom Attributes: Add any HTML attributes to the gallery wrapper element. Enter each attribute on a new line using the format: attribute-name|value (e.g., data-gallery|portfolio)

Device Visibility:

• Hide on Desktop: Hide the gallery block on desktop screens
• Hide on Tablet: Hide the gallery block on tablet devices
• Hide on Mobile: Hide the gallery block on mobile devices

Animation Effects:

• Entrance Animation: Choose from various animation effects that play when the gallery scrolls into view. Options include Bounce, Fade In, Zoom In, Rotate In, and many more. This adds visual interest and draws attention to your gallery

The Advanced tab provides options for image shadows, borders, spacing, attributes, device visibility, and animation effects.

Step 4: Save Your Changes

Once you have finished configuring the Advanced Gallery block and customizing its appearance, make sure to save your work.

You’ve successfully added an Advanced Gallery block to your page! This powerful block lets you showcase single or multiple image galleries with complete control over layout, styling, and interactive effects. Experiment with different column layouts, aspect ratios, and overlay styles to create a gallery that perfectly matches your brand and engages your audience.

Alert boxes are perfect for highlighting critical information that needs immediate attention, such as special promotions, important updates, system notifications, or time-sensitive announcements. With customizable styles and colors, you can ensure your messages stand out and capture your visitors’ attention.

Requirements: The Alert block is available in all our license plans.

Adding the Alert Block to Your Pages

Follow these steps to add an Alert block to your SeedProd page:

Step 1: Add the Block

Under Design > Blocks, drag and drop the Alert block into the desired section of your page.

The Alert block is located under Design > Advanced and can be dragged into any section of your page.

Step 2: Configure Content Settings

Once added, click on the Alert block to open its settings. In the Content tab, you can customize your alert message and appearance.

Alert:

• Type: Choose from predefined alert styles – Info (blue, for general information), Success (green, for positive confirmations), Warning (yellow/orange, for cautions), or Danger (red, for critical alerts). Each type comes with appropriate colors to convey the right message tone
• Dismiss Button: Toggle to show or hide a close button that allows visitors to dismiss the alert. Enable this for non-critical messages that users may want to hide
• Title: Enter the main heading for your alert message. This should be concise and attention-grabbing
• Description: Add detailed text to explain your alert message. This provides context and additional information beyond the title
• Title Align: Set the horizontal alignment for your alert title (left, center, or right)
• Description Align: Set the horizontal alignment for your alert description text
• Title Font Size: Adjust the size of the title text to ensure it’s prominent and readable
• Description Font Size: Control the size of the description text for optimal readability
• Title Tag: Choose the HTML heading tag for your title (h1, h2, h3, h4, h5, or h6). This affects both SEO and visual hierarchy
• Show Icon: Toggle to display or hide an icon next to your alert message. Icons provide quick visual cues about the alert type
• Icon: Select a custom icon to display with your alert. Choose an icon that matches your message purpose

The Content tab lets you configure the alert type, message content, alignment, and icon settings.

Step 2a: Choose a Template Style

In the Templates tab, you can select from pre-designed alert styles to quickly change the overall appearance of your alert box.

• Choose from four different template designs, each with unique layouts and visual treatments. Preview each style to find the one that best matches your page design

The Templates tab provides four pre-designed styles to quickly customize your alert’s appearance.

Step 3: Customize the Design

In the Advanced tab, you can customize the visual appearance of your Alert block:

Styles:

• Typography: Control the font properties for your alert title, including font family, weight, and style
• Text Typography: Customize the font properties for your alert description text
• Color: Set the color for your alert title text
• Description Color: Choose the color for your alert description text
• Dismiss Color: Set the color for the dismiss button (X icon) that closes the alert
• Title Background: Add a background color specifically for the title area of your alert
• Background Color: Set the overall background color for the entire alert box
• Text Shadow: Add shadow effects to your alert text for depth and readability. Choose from None, Hairline, Small, Medium, Large, X Large, 2X Large, or Custom

Spacing:

• Margin: Control the outer spacing around your alert block (Top, Right, Bottom, Left). This determines how much space appears between the alert and surrounding elements
• Padding: Adjust the inner spacing within your alert box (Top, Right, Bottom, Left). This creates breathing room between the content and the alert borders

Attributes:

• CSS ID: Displays the auto-generated unique identifier for your alert block. This ID is created automatically by SeedProd for custom styling or JavaScript targeting
• Custom Class: Add custom CSS classes to apply specific styles from your theme or custom CSS
• Custom Attributes: Add any HTML attributes to the alert wrapper element. Enter each attribute on a new line using the format: attribute-name|value (e.g., role|alert)

Device Visibility:

• Hide on Desktop: Hide the alert block on desktop screens
• Hide on Tablet: Hide the alert block on tablet devices
• Hide on Mobile: Hide the alert block on mobile devices

Animation Effects:

• Entrance Animation: Choose from various animation effects that play when the alert scrolls into view. Options include Bounce, Fade In, Zoom In, Rotate In, and many more. This draws immediate attention to your important messages

The Advanced tab provides extensive styling options including typography, colors, spacing, and animation effects.

Step 4: Save Your Changes

Once you have finished configuring the Alert block and customizing its appearance, make sure to save your work.

You’ve successfully added an Alert block to your page! This powerful block helps you deliver important information effectively and capture visitor attention with eye-catching, color-coded messages. Experiment with different alert types, template styles, and custom colors to create alerts that match your brand and communicate your message clearly.

Anchor links are perfect for long-form content, FAQ sections, table of contents navigation, or any page where you want to help visitors quickly reach specific sections without scrolling. By setting up anchor points throughout your page, you create a more accessible and user-friendly experience.

Requirements: The Anchor block is available in all our license plans.

Adding the Anchor Block to Your Pages

Follow these steps to add an Anchor block to your SeedProd page:

Step 1: Add the Block

Under Design > Blocks, drag and drop the Anchor block into the desired section of your page where you want visitors to be able to jump to.

The Anchor block can be placed at any location on your page where you want to create a jump-to destination.

Step 2: Configure the Anchor Name

Once added, click on the Anchor block to open its settings. You’ll see a single field where you can set the anchor name.

• Anchor Name: Enter a unique, descriptive name for this anchor point. Use lowercase letters and hyphens instead of spaces (e.g., “about-section”, “pricing-details”, “contact-form”). This name becomes the identifier you’ll use to link to this section

Set a unique name for your anchor. For example, if you name it “whatwedo”, you’ll link to it using “#whatwedo”.

Step 3: Link to Your Anchor

To create a link that jumps to your anchor, add a hash symbol (#) followed by your anchor name to any button, text link, or navigation menu item.

For example, if you named your anchor “whatwedo”, use “#whatwedo” as the URL in your button or link settings. When visitors click this link, the page will automatically scroll to the section where you placed the Anchor block.

You can create multiple anchor blocks on the same page, each with a unique name, allowing you to build comprehensive jump-to navigation throughout your content.

Create multiple anchors on the same page to build a complete jump navigation system.

Step 4: Save Your Changes

Once you have finished configuring the Anchor block and setting up your anchor name, make sure to save your work.

You’ve successfully added an Anchor block to your page! This simple but powerful block creates seamless navigation that helps visitors jump directly to the content they need. Experiment with multiple anchors throughout your page to build intuitive, user-friendly navigation that enhances the overall browsing experience.

Requirements: The Animated Headline block is available in all our license plans.

Adding the Animated Headline Block to Your SeedProd Pages

Follow these simple steps to incorporate the Animated Headline block into your website:

1. Navigate to the Design > Blocks section and drag and drop the Animated Headline block onto the desired page.
   
2. Once added, click on the Animated Headline block to access its settings. In the Content tab, you will find options to customize the styles, text, and animation of the headline.
   
3. Explore the Advanced tab to discover additional styles and customization options.
   
4. Don’t forget to save your work to ensure your changes are preserved.

That’s it! By following these steps, you can easily incorporate the Animated Headline block into your website and create eye-catching headlines that engage and captivate your audience. Remember to explore the various animation styles and effects available to find the perfect fit for your content.

Requirements: The WooCommerce Archive Products Block is available in the Elite license plan.

Adding the Archive Products block to your Product Archive template

To integrate the Archive Products block into your Product Archive template, follow these steps:

1. Go to WooCommerce Template Tags > Archive Products and drag the Archive Products block onto your product archive template.
   
2. Once added, click on the Archive Products block to access its settings. Here, you can customize the number of columns to display your products, set limits for product display, enable pagination, and modify query options.
   
3. Explore additional styling, spacing, attribute, and device visibility options in the Advanced tab to further enhance the appearance of the Archive Products block.
   
4. Ensure to save your work to preserve your configurations.

That’s it! By following these steps, you can integrate the Archive Products block into your Product Archive template to present your product listings in a visually appealing manner, thus providing customers with a comprehensive overview of the products available in your shop.

Requirements: The Before After Toggle block is available in all our license plans.

Adding the Before and After Toggle Block to Your SeedProd Pages

Follow these steps to incorporate the Before and After Toggle block into your SeedProd pages:

1. Under the Design > Advanced section, drag and drop the Before After Toggle block onto your page.
   
2. Once added, click on the Before After Toggle block to access its settings. In the Content tab, you’ll be able to set Before and After images:
   
   You will also find Orientation Controls which will allow you to allow you to set the slider orientation as either horizontal or vertical. You can also enable the “Move On Hover” feature, which enables users to toggle between images without clicking on them. Additionally, you can set an overlay color.
   
   The Comparison Handle Controls will allow you to customize the style of the toggle handle.
   

   

3. In the Advanced tab, you’ll find additional options to customize the styles and typography of the Before/After labels. You can also set attributes, adjust spacing, and configure device visibility.
   
4. Remember to save your work to preserve any changes made.

That’s it! With the Before After Toggle block, you can create an interactive and engaging comparison experience using side-by-side images. Users can easily compare the differences and transitions between the two images by moving the handle, providing a visually compelling experience on your website.

Requirements: The Button block is available in all our license plans.

Adding the Button Block to Your SeedProd Pages

Follow these steps to incorporate the Button Block into your website:

1. Go to Design > Blocks and drag and drop the Button block onto the desired section of your page.
   
2. Once added, click on the Button block to access its settings. In the Content tab, you’ll find options to edit the button’s text, subtext, link, and add before/after icons.
   
3. The Templates tab provides predefined templates that you can choose from to style your button.
   
4. Explore the Advanced tab to further customize your button’s appearance.
   
5. Save your work to preserve any changes made.

That’s it! You can now easily add buttons to your web pages using the Button Block, enhancing the user experience and improving navigation on your website.

Requirements: The Business Reviews block is available in all our license plans.

Using the Business Reviews Block on Your SeedProd Pages

Follow these steps to incorporate the Business Reviews Block into your website:

1. Start by adding your Google or Yelp API Keys in the SeedProd Settings:
   
   Click here to find your Google Place ID.
   Click here to find your Yelp Business ID.
   
2. Navigate to the page you want to edit, and under Design > Advanced, simply drag and drop the Business Reviews block onto the page.
   
3. Once the block is added, click on it to open its settings. In the General tab, you have the option to display Google Places reviews, Yelp Reviews, or both. It’s important to note that you’ll need to add your Google and Yelp IDs for the reviews to be displayed on the page.
   
   Click here to find your Google Place ID.
   Click here to find your Yelp Business ID
   
4. In the Settings tab, you can select the type of layout (Grid or Carousel), specify the number of reviews to display, and determine the desired amount of columns. Please note that the maximum total number of reviews allowed by Google and Yelp combined is 8.
   
5. The Filters tab enables you to filter reviews by Rating or Review Date, and also set a minimum rating that reviews should meet in order to be displayed.
   
6. In the Reviewer Info tab, you can enable or disable the Reviewer Image, Reviewer Name, and the link to the Google or Yelp reviews.
   
7. The Review Date tab offers controls to enable or disable the Review Date, change its color, and select its type: Numeric or Relative.
   
8. In the Rating Date tab, you can enable or disable star ratings and adjust the icon size and colors.
   
9. The Review Text tab provides controls to display the content of the reviews and style the text.
   
10. The Advanced tab offers additional options to add more styles, as well as controls for border, spacing, attributes, animation effects, and device visibility options.
    
11. Make sure to save your work to ensure your changes are preserved.

That’s it! By using the Business Reviews block, you can effortlessly showcase authentic reviews, boost credibility, and enhance the user experience on your website. Start harnessing these capabilities and build customer trust today!