{"id":7524,"date":"2026-01-18T23:40:28","date_gmt":"2026-01-18T23:40:28","guid":{"rendered":"https:\/\/sweepwidget.com\/docs\/sweepwidget-design-options-complete-styling-guide"},"modified":"2026-03-07T00:35:19","modified_gmt":"2026-03-07T00:35:19","slug":"sweepwidget-design-options-complete-styling-guide","status":"publish","type":"post","link":"https:\/\/sweepwidget.com\/docs\/sweepwidget-design-options-complete-styling-guide","title":{"rendered":"SweepWidget Design Options: Complete Styling Guide"},"content":{"rendered":"\n

SweepWidget offers extensive design customization options to help you create giveaways that perfectly match your brand. This comprehensive guide covers every setting available in the Design tab, from basic media options to advanced styling controls.<\/p>\n\n\n\n

Accessing Design Options<\/strong><\/h2>\n\n\n\n

To access design options:<\/p>\n\n\n\n

    \n
  1. Create or edit a giveaway<\/li>\n\n\n\n
  2. Click on the Design<\/strong> tab in the left sidebar<\/li>\n<\/ol>\n\n\n\n

    The Design tab has two views:<\/p>\n\n\n\n

      \n
    • Basic view<\/strong> – Shows featured media, background, and logo options<\/li>\n\n\n\n
    • Expanded view<\/strong> – Click + Add Custom Styling To Form<\/strong> to reveal all style settings<\/li>\n<\/ul>\n\n\n\n
      \"\"<\/figure>\n\n\n\n

      Basic Design Options<\/strong><\/h2>\n\n\n\n

      Featured Photo or Video<\/strong><\/h3>\n\n\n\n

      Add visual media to your giveaway widget to showcase prizes or enhance engagement.<\/p>\n\n\n\n

      Option<\/th>Description<\/th><\/tr><\/thead>
      Image<\/strong><\/td>Upload a photo or graphic (JPG, PNG, GIF, WebP)<\/td><\/tr>
      YouTube Video<\/strong><\/td>Embed a YouTube video by pasting the URL<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

      Image Format Options<\/strong><\/h4>\n\n\n\n

      When using an image, choose how it displays in the widget:<\/p>\n\n\n\n

      Format<\/th>Description<\/th>Best For<\/th><\/tr><\/thead>
      Full Width<\/strong><\/td>Large image spanning 100% width at top of widget<\/td>Hero images, banners<\/td><\/tr>
      Small Left<\/strong><\/td>Small image floated left, text wraps right<\/td>Product thumbnails<\/td><\/tr>
      Small Right<\/strong><\/td>Small image floated right, text wraps left<\/td>Product thumbnails<\/td><\/tr>
      Small Above<\/strong><\/td>Small centered image between title and description<\/td>Icons, small products<\/td><\/tr>
      Small Below<\/strong><\/td>Small centered image below description<\/td>Secondary visuals<\/td><\/tr>
      Medium Above<\/strong><\/td>Medium centered image between title and description<\/td>Product photos<\/td><\/tr>
      Medium Below<\/strong><\/td>Medium centered image below description<\/td>Product photos<\/td><\/tr>
      Custom Dimensions<\/strong><\/td>Specify exact width and\/or height in pixels<\/td>Precise sizing needs<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

      Custom Dimensions Tip:<\/strong> To maintain proportions, enter only width OR height (leave the other at 0). The image will scale proportionally.<\/p>\n\n\n\n

      Background Image or Color<\/strong><\/h3>\n\n\n\n

      Customize the hosted landing page background:<\/p>\n\n\n\n

      Option<\/th>Description<\/th><\/tr><\/thead>
      Image<\/strong><\/td>Upload a background image (displays as cover)<\/td><\/tr>
      Color<\/strong><\/td>Choose a solid color or gradient using the color picker<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

      Note:<\/strong> Background settings only apply to the hosted landing page, not embedded widgets.<\/p>\n\n\n\n

      Custom Logo<\/strong><\/h3>\n\n\n\n

      Add your brand logo to the hosted landing page header. The logo appears above the widget and can link to a URL of your choice.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      Style Settings (Expanded View)<\/strong><\/h2>\n\n\n\n

      Click + Add Custom Styling To Form<\/strong> to access detailed styling controls.<\/p>\n\n\n\n

      White-Labeling<\/strong><\/h3>\n\n\n\n

      At the top of Style Settings, you’ll find:<\/p>\n\n\n\n

      Remove SweepWidget branding (top logo + “Powered by SweepWidget” footer)<\/strong><\/p>\n\n\n\n

      Check this box to remove all SweepWidget branding for a fully white-labeled experience. Available on Business plan and above.<\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      Container Settings<\/strong><\/h2>\n\n\n\n

      Control the overall widget container appearance:<\/p>\n\n\n\n

      Setting<\/th>Description<\/th>Default<\/th><\/tr><\/thead>
      Border color<\/strong><\/td>Color of the widget border<\/td>#eeeeee (light gray)<\/td><\/tr>
      Border width<\/strong><\/td>Thickness of the border in pixels<\/td>1px<\/td><\/tr>
      Border radius<\/strong><\/td>Corner roundness in pixels (0 = square corners)<\/td>10px<\/td><\/tr>
      Max width of widget<\/strong><\/td>Maximum width the widget can expand to<\/td>600px<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

      Body Settings<\/strong><\/h2>\n\n\n\n

      Customize fonts and colors for the main widget content:<\/p>\n\n\n\n

      Setting<\/th>Description<\/th>Default<\/th><\/tr><\/thead>
      Font family<\/strong><\/td>Choose from 900+ Google Fonts<\/td>Roboto<\/td><\/tr>
      Color<\/strong><\/td>Main body text color<\/td>#555555<\/td><\/tr>
      Font size<\/strong><\/td>Body text size in pixels<\/td>16px<\/td><\/tr>
      Body background color<\/strong><\/td>Background color of the widget body<\/td>#ffffff (white)<\/td><\/tr>
      Title font color<\/strong><\/td>Color of the giveaway title<\/td>#555555<\/td><\/tr>
      Title font size<\/strong><\/td>Size of the giveaway title in pixels<\/td>24px<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
      \"\"<\/figure>\n\n\n\n

      Top Row Settings<\/strong><\/h2>\n\n\n\n

      The top row displays the countdown timer and entry counts. Customize its appearance:<\/p>\n\n\n\n

      Setting<\/th>Description<\/th>Default<\/th><\/tr><\/thead>
      Background color<\/strong><\/td>Background of the top stats row<\/td>#ffffff (white)<\/td><\/tr>
      Entry count color<\/strong><\/td>Color of the entry count numbers (e.g., “55”)<\/td>#4a3aff (purple\/blue)<\/td><\/tr>
      Entry count font size<\/strong><\/td>Size of entry count numbers<\/td>24px<\/td><\/tr>
      Row 2 font color<\/strong><\/td>Color of labels like “Days”, “My Entries”<\/td>#777777 (gray)<\/td><\/tr>
      Row 2 font size<\/strong><\/td>Size of the label text<\/td>15px<\/td><\/tr>
      Countdown subtitle text<\/strong><\/td>Custom text displayed centered below the countdown and entry count boxes (e.g., “30 Days till winner is picked!”)<\/td>Empty (none)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
      \"\"<\/figure>\n\n\n\n

      Buttons, Inputs & Links Settings<\/strong><\/h2>\n\n\n\n

      Control the appearance of interactive elements:<\/p>\n\n\n\n

      Buttons<\/strong><\/h3>\n\n\n\n
      Setting<\/th>Description<\/th>Default<\/th><\/tr><\/thead>
      Buttons background color<\/strong><\/td>Background color of all buttons<\/td>#4a3aff (purple\/blue)<\/td><\/tr>
      Buttons font color<\/strong><\/td>Text color on buttons<\/td>#ffffff (white)<\/td><\/tr>
      Buttons font size<\/strong><\/td>Button text size in pixels<\/td>15px<\/td><\/tr>
      Buttons border radius (edges)<\/strong><\/td>Corner roundness of buttons<\/td>4px<\/td><\/tr>
      Entry button text value<\/strong><\/td>Text displayed on the main entry button<\/td>“Enter Giveaway”<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

      Input Fields<\/strong><\/h3>\n\n\n\n
      Setting<\/th>Description<\/th>Default<\/th><\/tr><\/thead>
      Input fields border color<\/strong><\/td>Border color of text inputs<\/td>#c4c4c4 (light gray)<\/td><\/tr>
      Input fields border width<\/strong><\/td>Border thickness of inputs in pixels<\/td>1px<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

      Links & Icons<\/strong><\/h3>\n\n\n\n
      Setting<\/th>Description<\/th>Default<\/th><\/tr><\/thead>
      Link \/ lock icon color<\/strong><\/td>Color of links and lock icons<\/td>#4a3aff (purple\/blue)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
      \"\"<\/figure>\n\n\n\n

      More Options<\/strong><\/h2>\n\n\n\n

      Additional display and visibility settings:<\/p>\n\n\n\n

      Entry Count Visibility<\/strong><\/h3>\n\n\n\n
      Setting<\/th>Description<\/th><\/tr><\/thead>
      Hide “My Entries” count<\/strong><\/td>Hides the participant’s personal entry count<\/td><\/tr>
      Hide “Total Entries” count<\/strong><\/td>Hides the total entries from all participants<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

      Entry Methods Display<\/strong><\/h3>\n\n\n\n
      Setting<\/th>Description<\/th><\/tr><\/thead>
      Hide entry methods until after the participant logs in<\/strong><\/td>Only shows entry methods after user enters their details<\/td><\/tr>
      Entry method icon style<\/strong><\/td>Choose Circle or Square icons for entry methods<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

      Widget Position<\/strong><\/h3>\n\n\n\n
      Option<\/th>Description<\/th><\/tr><\/thead>
      Left<\/strong><\/td>Aligns widget to the left of the page<\/td><\/tr>
      Center<\/strong><\/td>Centers the widget (default)<\/td><\/tr>
      Right<\/strong><\/td>Aligns widget to the right of the page<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

      Custom CSS<\/strong><\/h3>\n\n\n\n

      Check Add custom CSS code<\/strong> to open a CSS editor for advanced styling beyond the built-in options.<\/p>\n\n\n\n

      Content Visibility<\/strong><\/h3>\n\n\n\n
      Setting<\/th>Description<\/th><\/tr><\/thead>
      Hide title<\/strong><\/td>Removes the giveaway title from display<\/td><\/tr>
      Hide description<\/strong><\/td>Removes the description text<\/td><\/tr>
      Hide the lines above the title and below the entry methods<\/strong><\/td>Removes separator lines for a cleaner look<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

      Visual Effects<\/strong><\/h3>\n\n\n\n
      Setting<\/th>Description<\/th>Default<\/th><\/tr><\/thead>
      Border shadow<\/strong><\/td>Adds a subtle drop shadow around the widget<\/td>Enabled<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
      \"\"<\/figure>\n\n\n\n

      Complete Settings Reference<\/strong><\/h2>\n\n\n\n

      Here’s a quick reference of all design settings with their default values:<\/p>\n\n\n\n

      Category<\/th>Setting<\/th>Default Value<\/th><\/tr><\/thead>
      Container<\/td>Border color<\/td>#eeeeee<\/td><\/tr>
      Container<\/td>Border width<\/td>1px<\/td><\/tr>
      Container<\/td>Border radius<\/td>10px<\/td><\/tr>
      Container<\/td>Max width<\/td>600px<\/td><\/tr>
      Body<\/td>Font family<\/td>Roboto<\/td><\/tr>
      Body<\/td>Text color<\/td>#555555<\/td><\/tr>
      Body<\/td>Font size<\/td>16px<\/td><\/tr>
      Body<\/td>Background color<\/td>#ffffff<\/td><\/tr>
      Body<\/td>Title color<\/td>#555555<\/td><\/tr>
      Body<\/td>Title size<\/td>24px<\/td><\/tr>
      Top Row<\/td>Background color<\/td>#ffffff<\/td><\/tr>
      Top Row<\/td>Entry count color<\/td>#4a3aff<\/td><\/tr>
      Top Row<\/td>Entry count size<\/td>24px<\/td><\/tr>
      Top Row<\/td>Label color<\/td>#777777<\/td><\/tr>
      Top Row<\/td>Label size<\/td>15px<\/td><\/tr>
      Top Row<\/td>Countdown subtitle text<\/td>Empty (none)<\/td><\/tr>
      Buttons<\/td>Background color<\/td>#4a3aff<\/td><\/tr>
      Buttons<\/td>Font color<\/td>#ffffff<\/td><\/tr>
      Buttons<\/td>Font size<\/td>15px<\/td><\/tr>
      Buttons<\/td>Border radius<\/td>4px<\/td><\/tr>
      Buttons<\/td>Entry button text<\/td>Enter Giveaway<\/td><\/tr>
      Inputs<\/td>Border color<\/td>#c4c4c4<\/td><\/tr>
      Inputs<\/td>Border width<\/td>1px<\/td><\/tr>
      Links<\/td>Link\/icon color<\/td>#4a3aff<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

      Design Tips & Best Practices<\/strong><\/h2>\n\n\n\n
        \n
      • Match your brand colors<\/strong> – Use your brand’s primary color for buttons and accent elements<\/li>\n\n\n\n
      • Keep it readable<\/strong> – Ensure sufficient contrast between text and background colors<\/li>\n\n\n\n
      • Use the preview<\/strong> – Changes appear in real-time in the preview panel on the right<\/li>\n\n\n\n
      • Test on mobile<\/strong> – Preview how your design looks on smaller screens<\/li>\n\n\n\n
      • Start with defaults<\/strong> – The default settings work well for most cases; customize only what you need<\/li>\n\n\n\n
      • Use consistent fonts<\/strong> – Choose a font family that matches your website<\/li>\n\n\n\n
      • Consider white-labeling<\/strong> – For professional presentations, remove SweepWidget branding<\/li>\n\n\n\n
      • Use Custom CSS sparingly<\/strong> – Only use when built-in options don’t meet your needs<\/li>\n<\/ul>\n\n\n\n

        Common Customization Examples<\/strong><\/h2>\n\n\n\n

        Minimal\/Clean Design<\/strong><\/h3>\n\n\n\n
          \n
        • Hide title and description lines<\/li>\n\n\n\n
        • Hide entry counts<\/li>\n\n\n\n
        • Set border width to 0<\/li>\n\n\n\n
        • Disable border shadow<\/li>\n<\/ul>\n\n\n\n

          Bold\/High Contrast Design<\/strong><\/h3>\n\n\n\n
            \n
          • Use your brand’s primary color for buttons<\/li>\n\n\n\n
          • Increase button font size<\/li>\n\n\n\n
          • Use a bold button border radius (20px+ for pill-shaped)<\/li>\n\n\n\n
          • Add a background color or image to the landing page<\/li>\n<\/ul>\n\n\n\n

            Professional\/Corporate Design<\/strong><\/h3>\n\n\n\n
              \n
            • Enable white-labeling<\/li>\n\n\n\n
            • Add your company logo<\/li>\n\n\n\n
            • Use your corporate font family<\/li>\n\n\n\n
            • Set button border radius to 0 for square buttons<\/li>\n\n\n\n
            • Use subtle, professional colors<\/li>\n<\/ul>\n\n\n\n

              Plan Requirements<\/strong><\/h2>\n\n\n\n

              Most design options are available on all plans. Some features require specific plans:<\/p>\n\n\n\n

              Feature<\/th>Required Plan<\/th><\/tr><\/thead>
              Basic design options<\/td>All plans (including Free)<\/td><\/tr>
              White-labeling (remove branding)<\/td>Business and above<\/td><\/tr>
              Custom CSS<\/td>Pro and above<\/td><\/tr>
              Custom logo<\/td>All plans<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"

              SweepWidget offers extensive design customization options to help you create giveaways that perfectly match your brand. This comprehensive guide covers every setting available in the Design tab, from basic media options to advanced styling controls. Accessing Design Options To access design options: The Design tab has two views: Basic Design Options Featured Photo or Video Add visual media to your giveaway widget to showcase prizes or enhance engagement. Option Description Image Upload a photo or graphic (JPG, PNG, GIF, WebP) YouTube Video Embed a YouTube video by pasting the URL Image Format Options When using an image, choose how it displays in the widget: Format Description Best For Full Width Large image spanning 100% width at top of widget Hero images, banners Small Left Small image floated left, text wraps right Product thumbnails Small Right Small image floated right, text wraps left Product thumbnails Small Above Small centered image between title and description Icons, small products Small Below Small centered image below description Secondary visuals Medium Above Medium centered image between title and description Product photos Medium Below Medium centered image below description Product photos Custom Dimensions Specify exact width and\/or height in pixels Precise sizing needs Custom Dimensions Tip: To maintain proportions, enter only width OR height (leave the other at 0). The image will scale proportionally. Background Image or Color Customize the hosted landing page background: Option Description Image Upload a background image (displays as cover) Color Choose a solid color or gradient using the color picker Note: Background settings only apply to the hosted landing page, not embedded widgets. Custom Logo Add your brand logo to the hosted landing page header. The logo appears above the widget and can link to a URL of your choice. Style Settings (Expanded View) Click + Add Custom Styling To Form to access detailed styling controls. White-Labeling At the top of Style Settings, you’ll find: Remove SweepWidget branding (top logo + “Powered by SweepWidget” footer) Check this box to remove all SweepWidget branding for a fully white-labeled experience. Available on Business plan and above. Container Settings Control the overall widget container appearance: Setting Description Default Border color Color of the widget border #eeeeee (light gray) Border width Thickness of the border in pixels 1px Border radius Corner roundness in pixels (0 = square corners) 10px Max width of widget Maximum width the widget can expand to 600px Body Settings Customize fonts and colors for the main widget content: Setting Description Default Font family Choose from 900+ Google Fonts Roboto Color Main body text color #555555 Font size Body text size in pixels 16px Body background color Background color of the widget body #ffffff (white) Title font color Color of the giveaway title #555555 Title font size Size of the giveaway title in pixels 24px Top Row Settings The top row displays the countdown timer and entry counts. Customize its appearance: Setting Description Default Background color Background of the top stats row #ffffff (white) Entry count color Color of the entry count numbers (e.g., “55”) #4a3aff (purple\/blue) Entry count font size Size of entry count numbers 24px Row 2 font color Color of labels like “Days”, “My Entries” #777777 (gray) Row 2 font size Size of the label text 15px Countdown subtitle text Custom text displayed centered below the countdown and entry count boxes (e.g., “30 Days till winner is picked!”) Empty (none) Buttons, Inputs & Links Settings Control the appearance of interactive elements: Buttons Setting Description Default Buttons background color Background color of all buttons #4a3aff (purple\/blue) Buttons font color Text color on buttons #ffffff (white) Buttons font size Button text size in pixels 15px Buttons border radius (edges) Corner roundness of buttons 4px Entry button text value Text displayed on the main entry button “Enter Giveaway” Input Fields Setting Description Default Input fields border color Border color of text inputs #c4c4c4 (light gray) Input fields border width Border thickness of inputs in pixels 1px Links & Icons Setting Description Default Link \/ lock icon color Color of links and lock icons #4a3aff (purple\/blue) More Options Additional display and visibility settings: Entry Count Visibility Setting Description Hide “My Entries” count Hides the participant’s personal entry count Hide “Total Entries” count Hides the total entries from all participants Entry Methods Display Setting Description Hide entry methods until after the participant logs in Only shows entry methods after user enters their details Entry method icon style Choose Circle or Square icons for entry methods Widget Position Option Description Left Aligns widget to the left of the page Center Centers the widget (default) Right Aligns widget to the right of the page Custom CSS Check Add custom CSS code to open a CSS editor for advanced styling beyond the built-in options. Content Visibility Setting Description Hide title Removes the giveaway title from display Hide description Removes the description text Hide the lines above the title and below the entry methods Removes separator lines for a cleaner look Visual Effects Setting Description Default Border shadow Adds a subtle drop shadow around the widget Enabled Complete Settings Reference Here’s a quick reference of all design settings with their default values: Category Setting Default Value Container Border color #eeeeee Container Border width 1px Container Border radius 10px Container Max width 600px Body Font family Roboto Body Text color #555555 Body Font size 16px Body Background color #ffffff Body Title color #555555 Body Title size 24px Top Row Background color #ffffff Top Row Entry count color #4a3aff Top Row Entry count size 24px Top Row Label color #777777 Top Row Label size 15px Top Row Countdown subtitle text Empty (none) Buttons Background color #4a3aff Buttons Font color #ffffff Buttons Font size 15px Buttons Border radius 4px Buttons Entry button text Enter Giveaway Inputs Border color #c4c4c4 Inputs Border width 1px Links Link\/icon color #4a3aff Design Tips & Best Practices Common Customization Examples Minimal\/Clean Design Bold\/High Contrast Design Professional\/Corporate Design Plan Requirements Most design options are available on all plans. Some features require specific plans: Feature Required Plan<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71],"tags":[],"class_list":["post-7524","post","type-post","status-publish","format-standard","hentry","category-design"],"yoast_head":"\nSweepWidget Design Options: Complete Styling Guide - SweepWidget Help Docs<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sweepwidget.com\/docs\/sweepwidget-design-options-complete-styling-guide\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"SweepWidget Design Options: Complete Styling Guide - SweepWidget Help Docs\" \/>\n<meta property=\"og:description\" content=\"SweepWidget offers extensive design customization options to help you create giveaways that perfectly match your brand. This comprehensive guide covers every setting available in the Design tab, from basic media options to advanced styling controls. Accessing Design Options To access design options: The Design tab has two views: Basic Design Options Featured Photo or Video Add visual media to your giveaway widget to showcase prizes or enhance engagement. Option Description Image Upload a photo or graphic (JPG, PNG, GIF, WebP) YouTube Video Embed a YouTube video by pasting the URL Image Format Options When using an image, choose how it displays in the widget: Format Description Best For Full Width Large image spanning 100% width at top of widget Hero images, banners Small Left Small image floated left, text wraps right Product thumbnails Small Right Small image floated right, text wraps left Product thumbnails Small Above Small centered image between title and description Icons, small products Small Below Small centered image below description Secondary visuals Medium Above Medium centered image between title and description Product photos Medium Below Medium centered image below description Product photos Custom Dimensions Specify exact width and\/or height in pixels Precise sizing needs Custom Dimensions Tip: To maintain proportions, enter only width OR height (leave the other at 0). The image will scale proportionally. Background Image or Color Customize the hosted landing page background: Option Description Image Upload a background image (displays as cover) Color Choose a solid color or gradient using the color picker Note: Background settings only apply to the hosted landing page, not embedded widgets. Custom Logo Add your brand logo to the hosted landing page header. The logo appears above the widget and can link to a URL of your choice. Style Settings (Expanded View) Click + Add Custom Styling To Form to access detailed styling controls. White-Labeling At the top of Style Settings, you’ll find: Remove SweepWidget branding (top logo + “Powered by SweepWidget” footer) Check this box to remove all SweepWidget branding for a fully white-labeled experience. Available on Business plan and above. Container Settings Control the overall widget container appearance: Setting Description Default Border color Color of the widget border #eeeeee (light gray) Border width Thickness of the border in pixels 1px Border radius Corner roundness in pixels (0 = square corners) 10px Max width of widget Maximum width the widget can expand to 600px Body Settings Customize fonts and colors for the main widget content: Setting Description Default Font family Choose from 900+ Google Fonts Roboto Color Main body text color #555555 Font size Body text size in pixels 16px Body background color Background color of the widget body #ffffff (white) Title font color Color of the giveaway title #555555 Title font size Size of the giveaway title in pixels 24px Top Row Settings The top row displays the countdown timer and entry counts. Customize its appearance: Setting Description Default Background color Background of the top stats row #ffffff (white) Entry count color Color of the entry count numbers (e.g., “55”) #4a3aff (purple\/blue) Entry count font size Size of entry count numbers 24px Row 2 font color Color of labels like “Days”, “My Entries” #777777 (gray) Row 2 font size Size of the label text 15px Countdown subtitle text Custom text displayed centered below the countdown and entry count boxes (e.g., “30 Days till winner is picked!”) Empty (none) Buttons, Inputs & Links Settings Control the appearance of interactive elements: Buttons Setting Description Default Buttons background color Background color of all buttons #4a3aff (purple\/blue) Buttons font color Text color on buttons #ffffff (white) Buttons font size Button text size in pixels 15px Buttons border radius (edges) Corner roundness of buttons 4px Entry button text value Text displayed on the main entry button “Enter Giveaway” Input Fields Setting Description Default Input fields border color Border color of text inputs #c4c4c4 (light gray) Input fields border width Border thickness of inputs in pixels 1px Links & Icons Setting Description Default Link \/ lock icon color Color of links and lock icons #4a3aff (purple\/blue) More Options Additional display and visibility settings: Entry Count Visibility Setting Description Hide “My Entries” count Hides the participant’s personal entry count Hide “Total Entries” count Hides the total entries from all participants Entry Methods Display Setting Description Hide entry methods until after the participant logs in Only shows entry methods after user enters their details Entry method icon style Choose Circle or Square icons for entry methods Widget Position Option Description Left Aligns widget to the left of the page Center Centers the widget (default) Right Aligns widget to the right of the page Custom CSS Check Add custom CSS code to open a CSS editor for advanced styling beyond the built-in options. Content Visibility Setting Description Hide title Removes the giveaway title from display Hide description Removes the description text Hide the lines above the title and below the entry methods Removes separator lines for a cleaner look Visual Effects Setting Description Default Border shadow Adds a subtle drop shadow around the widget Enabled Complete Settings Reference Here’s a quick reference of all design settings with their default values: Category Setting Default Value Container Border color #eeeeee Container Border width 1px Container Border radius 10px Container Max width 600px Body Font family Roboto Body Text color #555555 Body Font size 16px Body Background color #ffffff Body Title color #555555 Body Title size 24px Top Row Background color #ffffff Top Row Entry count color #4a3aff Top Row Entry count size 24px Top Row Label color #777777 Top Row Label size 15px Top Row Countdown subtitle text Empty (none) Buttons Background color #4a3aff Buttons Font color #ffffff Buttons Font size 15px Buttons Border radius 4px Buttons Entry button text Enter Giveaway Inputs Border color #c4c4c4 Inputs Border width 1px Links Link\/icon color #4a3aff Design Tips & Best Practices Common Customization Examples Minimal\/Clean Design Bold\/High Contrast Design Professional\/Corporate Design Plan Requirements Most design options are available on all plans. Some features require specific plans: Feature Required Plan\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sweepwidget.com\/docs\/sweepwidget-design-options-complete-styling-guide\" \/>\n<meta property=\"og:site_name\" content=\"SweepWidget Help Docs\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-18T23:40:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-07T00:35:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/sweepwidget.com\/docs\/wp-content\/uploads\/2026\/01\/styling-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"838\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"SweepWidget\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"SweepWidget\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/sweepwidget-design-options-complete-styling-guide#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/sweepwidget-design-options-complete-styling-guide\"},\"author\":{\"name\":\"SweepWidget\",\"@id\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/#\\\/schema\\\/person\\\/4cca2bc9c600116750eca1bfff6648e0\"},\"headline\":\"SweepWidget Design Options: Complete Styling Guide\",\"datePublished\":\"2026-01-18T23:40:28+00:00\",\"dateModified\":\"2026-03-07T00:35:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/sweepwidget-design-options-complete-styling-guide\"},\"wordCount\":1247,\"image\":{\"@id\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/sweepwidget-design-options-complete-styling-guide#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/styling-1-1024x572.png\",\"articleSection\":[\"Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/sweepwidget-design-options-complete-styling-guide\",\"url\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/sweepwidget-design-options-complete-styling-guide\",\"name\":\"SweepWidget Design Options: Complete Styling Guide - SweepWidget Help Docs\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/sweepwidget-design-options-complete-styling-guide#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/sweepwidget-design-options-complete-styling-guide#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/styling-1-1024x572.png\",\"datePublished\":\"2026-01-18T23:40:28+00:00\",\"dateModified\":\"2026-03-07T00:35:19+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/#\\\/schema\\\/person\\\/4cca2bc9c600116750eca1bfff6648e0\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/sweepwidget-design-options-complete-styling-guide#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/sweepwidget-design-options-complete-styling-guide\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/sweepwidget-design-options-complete-styling-guide#primaryimage\",\"url\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/styling-1.png\",\"contentUrl\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/styling-1.png\",\"width\":1500,\"height\":838},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/sweepwidget-design-options-complete-styling-guide#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"SweepWidget Design Options: Complete Styling Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/#website\",\"url\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/\",\"name\":\"SweepWidget Help Docs\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/#\\\/schema\\\/person\\\/4cca2bc9c600116750eca1bfff6648e0\",\"name\":\"SweepWidget\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/08ae098bc2290a9a645af1c26ddd7704f98d09c88bf65a55b5c4bc1e585f31f4?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/08ae098bc2290a9a645af1c26ddd7704f98d09c88bf65a55b5c4bc1e585f31f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/08ae098bc2290a9a645af1c26ddd7704f98d09c88bf65a55b5c4bc1e585f31f4?s=96&d=mm&r=g\",\"caption\":\"SweepWidget\"},\"sameAs\":[\"https:\\\/\\\/sweepwidget.com\\\/docs\"],\"url\":\"https:\\\/\\\/sweepwidget.com\\\/docs\\\/author\\\/sweepwidget\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"SweepWidget Design Options: Complete Styling Guide - SweepWidget Help Docs","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/sweepwidget.com\/docs\/sweepwidget-design-options-complete-styling-guide","og_locale":"en_US","og_type":"article","og_title":"SweepWidget Design Options: Complete Styling Guide - SweepWidget Help Docs","og_description":"SweepWidget offers extensive design customization options to help you create giveaways that perfectly match your brand. This comprehensive guide covers every setting available in the Design tab, from basic media options to advanced styling controls. Accessing Design Options To access design options: The Design tab has two views: Basic Design Options Featured Photo or Video Add visual media to your giveaway widget to showcase prizes or enhance engagement. Option Description Image Upload a photo or graphic (JPG, PNG, GIF, WebP) YouTube Video Embed a YouTube video by pasting the URL Image Format Options When using an image, choose how it displays in the widget: Format Description Best For Full Width Large image spanning 100% width at top of widget Hero images, banners Small Left Small image floated left, text wraps right Product thumbnails Small Right Small image floated right, text wraps left Product thumbnails Small Above Small centered image between title and description Icons, small products Small Below Small centered image below description Secondary visuals Medium Above Medium centered image between title and description Product photos Medium Below Medium centered image below description Product photos Custom Dimensions Specify exact width and\/or height in pixels Precise sizing needs Custom Dimensions Tip: To maintain proportions, enter only width OR height (leave the other at 0). The image will scale proportionally. Background Image or Color Customize the hosted landing page background: Option Description Image Upload a background image (displays as cover) Color Choose a solid color or gradient using the color picker Note: Background settings only apply to the hosted landing page, not embedded widgets. Custom Logo Add your brand logo to the hosted landing page header. The logo appears above the widget and can link to a URL of your choice. Style Settings (Expanded View) Click + Add Custom Styling To Form to access detailed styling controls. White-Labeling At the top of Style Settings, you’ll find: Remove SweepWidget branding (top logo + “Powered by SweepWidget” footer) Check this box to remove all SweepWidget branding for a fully white-labeled experience. Available on Business plan and above. Container Settings Control the overall widget container appearance: Setting Description Default Border color Color of the widget border #eeeeee (light gray) Border width Thickness of the border in pixels 1px Border radius Corner roundness in pixels (0 = square corners) 10px Max width of widget Maximum width the widget can expand to 600px Body Settings Customize fonts and colors for the main widget content: Setting Description Default Font family Choose from 900+ Google Fonts Roboto Color Main body text color #555555 Font size Body text size in pixels 16px Body background color Background color of the widget body #ffffff (white) Title font color Color of the giveaway title #555555 Title font size Size of the giveaway title in pixels 24px Top Row Settings The top row displays the countdown timer and entry counts. Customize its appearance: Setting Description Default Background color Background of the top stats row #ffffff (white) Entry count color Color of the entry count numbers (e.g., “55”) #4a3aff (purple\/blue) Entry count font size Size of entry count numbers 24px Row 2 font color Color of labels like “Days”, “My Entries” #777777 (gray) Row 2 font size Size of the label text 15px Countdown subtitle text Custom text displayed centered below the countdown and entry count boxes (e.g., “30 Days till winner is picked!”) Empty (none) Buttons, Inputs & Links Settings Control the appearance of interactive elements: Buttons Setting Description Default Buttons background color Background color of all buttons #4a3aff (purple\/blue) Buttons font color Text color on buttons #ffffff (white) Buttons font size Button text size in pixels 15px Buttons border radius (edges) Corner roundness of buttons 4px Entry button text value Text displayed on the main entry button “Enter Giveaway” Input Fields Setting Description Default Input fields border color Border color of text inputs #c4c4c4 (light gray) Input fields border width Border thickness of inputs in pixels 1px Links & Icons Setting Description Default Link \/ lock icon color Color of links and lock icons #4a3aff (purple\/blue) More Options Additional display and visibility settings: Entry Count Visibility Setting Description Hide “My Entries” count Hides the participant’s personal entry count Hide “Total Entries” count Hides the total entries from all participants Entry Methods Display Setting Description Hide entry methods until after the participant logs in Only shows entry methods after user enters their details Entry method icon style Choose Circle or Square icons for entry methods Widget Position Option Description Left Aligns widget to the left of the page Center Centers the widget (default) Right Aligns widget to the right of the page Custom CSS Check Add custom CSS code to open a CSS editor for advanced styling beyond the built-in options. Content Visibility Setting Description Hide title Removes the giveaway title from display Hide description Removes the description text Hide the lines above the title and below the entry methods Removes separator lines for a cleaner look Visual Effects Setting Description Default Border shadow Adds a subtle drop shadow around the widget Enabled Complete Settings Reference Here’s a quick reference of all design settings with their default values: Category Setting Default Value Container Border color #eeeeee Container Border width 1px Container Border radius 10px Container Max width 600px Body Font family Roboto Body Text color #555555 Body Font size 16px Body Background color #ffffff Body Title color #555555 Body Title size 24px Top Row Background color #ffffff Top Row Entry count color #4a3aff Top Row Entry count size 24px Top Row Label color #777777 Top Row Label size 15px Top Row Countdown subtitle text Empty (none) Buttons Background color #4a3aff Buttons Font color #ffffff Buttons Font size 15px Buttons Border radius 4px Buttons Entry button text Enter Giveaway Inputs Border color #c4c4c4 Inputs Border width 1px Links Link\/icon color #4a3aff Design Tips & Best Practices Common Customization Examples Minimal\/Clean Design Bold\/High Contrast Design Professional\/Corporate Design Plan Requirements Most design options are available on all plans. Some features require specific plans: Feature Required Plan","og_url":"https:\/\/sweepwidget.com\/docs\/sweepwidget-design-options-complete-styling-guide","og_site_name":"SweepWidget Help Docs","article_published_time":"2026-01-18T23:40:28+00:00","article_modified_time":"2026-03-07T00:35:19+00:00","og_image":[{"width":1500,"height":838,"url":"https:\/\/sweepwidget.com\/docs\/wp-content\/uploads\/2026\/01\/styling-1.png","type":"image\/png"}],"author":"SweepWidget","twitter_card":"summary_large_image","twitter_misc":{"Written by":"SweepWidget","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sweepwidget.com\/docs\/sweepwidget-design-options-complete-styling-guide#article","isPartOf":{"@id":"https:\/\/sweepwidget.com\/docs\/sweepwidget-design-options-complete-styling-guide"},"author":{"name":"SweepWidget","@id":"https:\/\/sweepwidget.com\/docs\/#\/schema\/person\/4cca2bc9c600116750eca1bfff6648e0"},"headline":"SweepWidget Design Options: Complete Styling Guide","datePublished":"2026-01-18T23:40:28+00:00","dateModified":"2026-03-07T00:35:19+00:00","mainEntityOfPage":{"@id":"https:\/\/sweepwidget.com\/docs\/sweepwidget-design-options-complete-styling-guide"},"wordCount":1247,"image":{"@id":"https:\/\/sweepwidget.com\/docs\/sweepwidget-design-options-complete-styling-guide#primaryimage"},"thumbnailUrl":"https:\/\/sweepwidget.com\/docs\/wp-content\/uploads\/2026\/01\/styling-1-1024x572.png","articleSection":["Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/sweepwidget.com\/docs\/sweepwidget-design-options-complete-styling-guide","url":"https:\/\/sweepwidget.com\/docs\/sweepwidget-design-options-complete-styling-guide","name":"SweepWidget Design Options: Complete Styling Guide - SweepWidget Help Docs","isPartOf":{"@id":"https:\/\/sweepwidget.com\/docs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sweepwidget.com\/docs\/sweepwidget-design-options-complete-styling-guide#primaryimage"},"image":{"@id":"https:\/\/sweepwidget.com\/docs\/sweepwidget-design-options-complete-styling-guide#primaryimage"},"thumbnailUrl":"https:\/\/sweepwidget.com\/docs\/wp-content\/uploads\/2026\/01\/styling-1-1024x572.png","datePublished":"2026-01-18T23:40:28+00:00","dateModified":"2026-03-07T00:35:19+00:00","author":{"@id":"https:\/\/sweepwidget.com\/docs\/#\/schema\/person\/4cca2bc9c600116750eca1bfff6648e0"},"breadcrumb":{"@id":"https:\/\/sweepwidget.com\/docs\/sweepwidget-design-options-complete-styling-guide#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sweepwidget.com\/docs\/sweepwidget-design-options-complete-styling-guide"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sweepwidget.com\/docs\/sweepwidget-design-options-complete-styling-guide#primaryimage","url":"https:\/\/sweepwidget.com\/docs\/wp-content\/uploads\/2026\/01\/styling-1.png","contentUrl":"https:\/\/sweepwidget.com\/docs\/wp-content\/uploads\/2026\/01\/styling-1.png","width":1500,"height":838},{"@type":"BreadcrumbList","@id":"https:\/\/sweepwidget.com\/docs\/sweepwidget-design-options-complete-styling-guide#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sweepwidget.com\/docs\/"},{"@type":"ListItem","position":2,"name":"SweepWidget Design Options: Complete Styling Guide"}]},{"@type":"WebSite","@id":"https:\/\/sweepwidget.com\/docs\/#website","url":"https:\/\/sweepwidget.com\/docs\/","name":"SweepWidget Help Docs","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sweepwidget.com\/docs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/sweepwidget.com\/docs\/#\/schema\/person\/4cca2bc9c600116750eca1bfff6648e0","name":"SweepWidget","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/08ae098bc2290a9a645af1c26ddd7704f98d09c88bf65a55b5c4bc1e585f31f4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/08ae098bc2290a9a645af1c26ddd7704f98d09c88bf65a55b5c4bc1e585f31f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/08ae098bc2290a9a645af1c26ddd7704f98d09c88bf65a55b5c4bc1e585f31f4?s=96&d=mm&r=g","caption":"SweepWidget"},"sameAs":["https:\/\/sweepwidget.com\/docs"],"url":"https:\/\/sweepwidget.com\/docs\/author\/sweepwidget"}]}},"_links":{"self":[{"href":"https:\/\/sweepwidget.com\/docs\/wp-json\/wp\/v2\/posts\/7524","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sweepwidget.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sweepwidget.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sweepwidget.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sweepwidget.com\/docs\/wp-json\/wp\/v2\/comments?post=7524"}],"version-history":[{"count":2,"href":"https:\/\/sweepwidget.com\/docs\/wp-json\/wp\/v2\/posts\/7524\/revisions"}],"predecessor-version":[{"id":7704,"href":"https:\/\/sweepwidget.com\/docs\/wp-json\/wp\/v2\/posts\/7524\/revisions\/7704"}],"wp:attachment":[{"href":"https:\/\/sweepwidget.com\/docs\/wp-json\/wp\/v2\/media?parent=7524"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sweepwidget.com\/docs\/wp-json\/wp\/v2\/categories?post=7524"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sweepwidget.com\/docs\/wp-json\/wp\/v2\/tags?post=7524"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}