{"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-03-05T16:46:42","modified_gmt":"2026-03-05T16:46:42","slug":"hostinger-website-builder-how-to-add-and-customize-the-card-element","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/hostinger-website-builder-how-to-add-and-customize-the-card-element\/","title":{"rendered":"Hostinger Website Builder: How to add and customize the Card element"},"content":{"rendered":"

The Card element in Hostinger Website Builder lets you create modern, styled container layouts for your website. It 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 Website 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":"

      The Card element in Hostinger Website Builder lets you create modern, styled container layouts for your website. It supports borders, background fills, and shadows, giving…<\/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":[280],"tags":[],"class_list":["post-8175","post","type-post","status-publish","format-standard","hentry","category-website-elements"],"hreflangs":[],"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":2,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/8175\/revisions"}],"predecessor-version":[{"id":8180,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/8175\/revisions\/8180"}],"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}]}}