{"id":80399,"date":"2026-04-29T16:59:14","date_gmt":"2026-04-29T20:59:14","guid":{"rendered":"https:\/\/memberpress.com\/?post_type=ht_kb&p=80399"},"modified":"2026-04-29T17:00:33","modified_gmt":"2026-04-29T21:00:33","slug":"displaying-circles-with-block-and-shortcodes","status":"publish","type":"ht_kb","link":"https:\/\/memberpress.com\/es\/docs\/displaying-circles-with-block-and-shortcodes\/","title":{"rendered":"Mostrar c\u00edrculos MemberPress con bloques y c\u00f3digos cortos"},"content":{"rendered":"\n

MemberPress provides a Gutenberg block and shortcodes for displaying Circles on any page or post. The Circle block and shortcodes give full control over how Circles appear on the website.<\/p>\n\n\n\n

This document explains how to use the Circle archive shortcode, the single Circle block, and the single Circle shortcode. These options allow Circles to be embedded anywhere, with customizable display settings.<\/p>\n\n\n\n

Circle Archive Shortcode<\/a><\/h2>\n\n\n\n

The Circle archive shortcode displays the full Circles archive on any page. This is the same listing available at the default \/mp-circle<\/code><\/strong> URL on the website. Members can browse, search, and join Circles directly from this page.<\/p>\n\n\n\n

The shortcode works with the Gutenberg block editor<\/a><\/strong> and popular page builders like Elementor and Divi.<\/p>\n\n\n\n

Adding the Archive Shortcode With Gutenberg<\/a><\/h3>\n\n\n\n

Follow these steps to add the Circles archive to any page or post:<\/p>\n\n\n\n

    \n
  1. Navigate to Dashboard > Pages > Add New Page<\/strong>.<\/li>\n\n\n\n
  2. Add a title for the page.<\/li>\n\n\n\n
  3. Add a Shortcode<\/strong> block to the page content area.<\/li>\n<\/ol>\n\n\n\n
    \"Gutenberg\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n
      \n
    1. Enter the following shortcode:<\/li>\n<\/ol>\n\n\n\n
      [mpcirc-circles]<\/code><\/pre>\n\n\n\n
        \n
      1. Click Publish<\/strong> to save the page.<\/li>\n<\/ol>\n\n\n\n
        The page will now display the Circles archive with all visible Circles.<\/p>\n\n\n\n
        \"Front-end\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n
        Adding the Archive Shortcode With Page Builders<\/a><\/h3>\n\n\n\n
        The Circle archive shortcode can be added to pages created with almost any page builder. To do this, use the page builder's shortcode module to add the Circle archive shortcode to a page.<\/p>\n\n\n\n
        For example, add the Shortcode widget in Elementor<\/strong> or the Code module in Divi<\/strong>. Then, paste the following Circle archive shortcode into it:<\/p>\n\n\n\n
        [mpcirc-circles]<\/code><\/pre>\n\n\n\n
        Important:<\/strong> Only one Circle archive shortcode can be added to each page. Embedding multiple archive shortcodes on the same page will cause conflicts.<\/p>\n\n\n\n
        Single Circle Block<\/a><\/h2>\n\n\n\n
        MemberPress includes a dedicated Gutenberg block for displaying a single Circle on any page or post. The Circle block<\/strong> provides a visual way to embed a specific Circle without writing shortcode.<\/p>\n\n\n\n
        The block uses the same rendering system as Circle pages. It respects all existing access control and visibility settings<\/a><\/strong> configured for each Circle.<\/p>\n\n\n\n
        Adding the Circle Block<\/a><\/h3>\n\n\n\n
        Follow these steps to add the Circle block to a page or post:<\/p>\n\n\n\n
          \n
        1. Navigate to Dashboard > Pages<\/strong> and open an existing page, or click Add New Page<\/strong>.<\/li>\n\n\n\n
        2. Click the Block Inserter (+)<\/strong> button to add a new block.<\/li>\n\n\n\n
        3. Search for \u201cCircle\u201d<\/strong> in the block search field.<\/li>\n\n\n\n
        4. Select the Circle<\/strong> block from the results.<\/li>\n<\/ol>\n\n\n\n
          \"Gutenberg\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n
            \n
          1. In the Block Settings<\/strong> panel on the right side, use the Select Circle<\/strong> dropdown to choose the Circle to display.<\/li>\n<\/ol>\n\n\n\n
            \"MemberPress\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n
              \n
            1. Optionally, adjust the Display<\/strong> and Feed Settings<\/strong> in the block panel to customize the Circle appearance.<\/li>\n\n\n\n
            2. Click Publish<\/strong> or Update<\/strong> to save the page.<\/li>\n<\/ol>\n\n\n\n
              The editor will show a live preview of the Circle, including the hero image, navigation tabs, feed, and posts.<\/p>\n\n\n\n
              Circle Block Display Settings<\/a><\/h3>\n\n\n\n
              The Circle block provides the same display options as the single Circle shortcode attributes<\/strong><\/a>. These settings are available in the Block Settings<\/strong> panel when the Circle block is selected:<\/p>\n\n\n\n