{"id":8175,"date":"2026-02-24T09:39:25","date_gmt":"2026-02-24T09:39:25","guid":{"rendered":"https:\/\/www.hostinger.com\/support\/?p=8175"},"modified":"2026-08-21T09:19:34","modified_gmt":"2026-08-21T09:19:34","slug":"hostinger-ai-builder-manual-mode-how-to-add-and-customize-the-card-element","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/hostinger-ai-builder-manual-mode-how-to-add-and-customize-the-card-element\/","title":{"rendered":"Hostinger AI Builder: How to add and customize the Card element in manual mode"},"content":{"rendered":"

Add a Card element to your Hostinger AI Builder manual mode website to create modern, styled container layouts. The Card element supports borders, background fills, and shadows, giving you full control over how your content is structured and presented.<\/p>

Adding a Card element<\/h2>
    \n
  1. Open your website in Hostinger AI Builder.<\/li>\n
  2. Click the Add elements<\/strong> panel on the left side of the builder.<\/li>\n
  3. Locate the Card<\/strong> element and drag it onto your page.<\/li>\n<\/ol>

    \"\"<\/p>

    Customizing the Card element<\/h2>

    Once the Card element is on your page, click it to open the settings panel. From there, you can adjust the following:<\/p>

      \n
    • Borders<\/strong> – set the border color and width.
      \n\"\"<\/li>\n
    • Background fill<\/strong> – choose a solid color or a gradient.<\/li>\n
    • Drop shadows<\/strong> – select a preset shadow or create a custom one.
      \n\"\"<\/li>\n
    • Sizing<\/strong> – adjust the dimensions to fit your layout structure.<\/li>\n<\/ul>

      With these options, you can match the Card element to any section or design style on your website.<\/p>\n","protected":false},"excerpt":{"rendered":"

      Add and style a Card element in Hostinger AI Builder manual mode.<\/p>\n","protected":false},"author":594,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"include_on_kodee":true,"footnotes":""},"categories":[293],"tags":[],"class_list":["post-8175","post","type-post","status-publish","format-standard","hentry","category-ai-builder"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/support\/hostinger-website-builder-how-to-add-and-customize-the-card-element","default":1}],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/8175","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/users\/594"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/comments?post=8175"}],"version-history":[{"count":5,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/8175\/revisions"}],"predecessor-version":[{"id":16673,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/8175\/revisions\/16673"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/media?parent=8175"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/categories?post=8175"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/tags?post=8175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}