Styling

This is one of the most powerful features of Digishift. Setting your global color scheme here will automatically update elements across your entire site for a consistent design. You can find these settings in Appearance > Customize > Styling / Colors.

Colors #

• Body Text Color: This sets the default color for all paragraph text on your site. For best readability, ensure there is a strong contrast with the background color.
• Body Background Color: Sets the overall background color for your website. This is visible if your content or sections do not have a background image or other color set.
• Title Color: Controls the color for all post and page titles (H1, H2, H3, H4, H5, H6).
• Primary Color: This is your main brand color. It is used for key interactive elements like buttons, links, highlights, and accents. Choosing a strong, recognizable color here is crucial for your brand identity.
• Secondary Color: This is your secondary brand color, used for complementary highlights or alternative buttons. It should work harmoniously with your Primary Color.
• Link Color: Sets the color for all text hyperlinks within your content.
• Link Hover Color: Defines the color that text links change to when a user hovers their mouse over them.

Design Tip: Use the “Select Color” button to open a color picker. You can choose a color visually, or input a specific HEX, RGB, or HSL code for brand consistency. After making changes, a notice will appear: “Settings have changed, you should save them!” Don’t forget to click “Publish” to apply your new color scheme.

Navigation #

Digishift offers unparalleled control over the appearance of your header and navigation menus. You can configure different styles for various states (normal, transparent, sticky) and even specific header layouts (e.g., Header v1). Find these settings in Appearance > Customize > Header.

Default Header Style #

These settings apply to your standard header when it is not in a transparent or sticky state.

• Header Background: Set the solid background color for your header.
• Header Border Color: Choose a color for the border at the bottom of the header.
• Header Shadow: Apply a box shadow effect to the header. You can control:
  • Horizontal & Vertical Length: The shadow’s offset.
  • Blur Radius: How blurry the shadow is.
  • Spread: The size of the shadow.
  • Shadow Color: The color of the shadow itself.
• Menu Links Color: Set the color for the text in your main navigation menu.
• Menu Links Hover Color: Set the color for menu items when a user hovers over them.
• Navigation Icons Color: Set the color for icons in the header (e.g., search, user, cart).
• Navigation Icons Hover Color: Set the hover color for those icons.
• Badge Background Color: Set the background color for notification badges (e.g., cart item count).
• Badge Text Color: Set the text color for those badges.

Transparent Header Style #

Configure the header when it is set to be transparent (often used over hero images). These settings ensure your menu remains visible and legible.

• Header Border: Control the border for the transparent header (width, style, and color).
• Header Shadow: Apply a specific shadow effect only to the transparent header.
• Menu Links Color: Set a specific color for menu text over a light or dark background.
• Menu Links Hover Color: Set the hover color for the transparent header state.
• Icons Color / Hover Color: Define colors for icons in the transparent header.
• Badge Colors: Set badge colors specifically for the transparent header.

Sticky Header Style #

Configure the appearance of the header after it becomes sticky (fixed to the top of the screen on scroll).

• Header Background: Set the background color for the sticky header. This is often a solid color for better contrast.
• Header Border & Shadow: Add a border or shadow to the sticky header to make it distinct from the content below.
• Menu Links Color / Hover Color: Define text colors for the sticky state.
• Icons Color / Hover Color: Define icon colors for the sticky state.
• Badge Colors: Set badge colors for the sticky header.

Header Layout v1 #

Digishift includes multiple header layouts. Here is an example of the settings for Header v1, which includes a top bar area:

• Header Top Background Color: Set the background color for the top bar section.
• Header Top Text Color: Set the default color for text in the top bar.
• Header Top Hover Text Color: Set the color for text links on hover.
• Header Top Hover Text Background Color: Set a background color on hover for text links (optional).
• Extra Element Icon Color: Set the color for icons in the header’s extra elements (e.g., contact info).
• Extra Element Text Color: Set the color for text in the header’s extra elements.

Sub Menu (Dropdown) Styles #

Fine-tune the appearance of your dropdown navigation menus to match your site’s design perfectly. These settings control the styling of any sub-menu that appears when hovering over a parent navigation item. You can find these options in Appearance > Customize > Styling > Header > Sub Menu.

• Submenu Background Color: Set the solid background color for the entire dropdown menu panel.
• Submenu Links Color: Define the text color for the individual links within the dropdown menu.
• Submenu Links Hover Color: Set the color that dropdown menu links change to when a user hovers over them.
• Submenu Links Hover Background Color: Choose a background color that appears behind a menu link when it is hovered over. This is a key styling element for improving readability and visual feedback.
• Submenu Border Color: Apply a border color around the entire dropdown menu or to individual items within it to create definition and separation.
• Sub Menu Padding: Adjust the internal spacing (padding) within the dropdown menu. Increasing the padding creates a more spacious and easier-to-click menu, while decreasing it creates a more compact look.

Hero & Breadcrumb Styling #

Digishift allows you to style the hero section and breadcrumb trail for every type of page on your site. This ensures a consistent yet customizable branded experience. You can find these settings in Appearance > Customize > Styling > Hero/Breadcrumb.

Global Page Hero Style #

These settings provide a global default style for the hero section on all standard pages. You can override these on individual pages.

• Hero Title Color: Set the color for the page title displayed in the hero section.
• Breadcrumb Color: Set the default color for the breadcrumb text.
• Breadcrumb Link Color: Set the color for clickable links within the breadcrumb trail.
• Breadcrumb Link Hover Color: Set the hover color for breadcrumb links.
• Hero Background: Configure the background for all page heroes. You can set:
  • Background Color: A solid color.
  • Background Image: Upload a default image.
  • Background Controls: Adjust repeat, size, attachment, and position for the image.
• Hero BG Overlay: Apply a color overlay on top of the background image to improve text readability. Use the color picker and opacity slider to get the perfect effect.

Blog Archive Hero Style #

Control the styling specifically for hero sections on blog, category, tag, and date archive pages.

• Hero Title Color: Set the color for the archive title (e.g., “Blog”, “Category: News”).
• Breadcrumb Color, Link Color, Link Hover Color: Define the breadcrumb colors specifically for archive pages.
• Hero Background: Set a custom background image or color for all blog archive heroes, independent of the global page setting.
• Hero BG Overlay: Apply a specific overlay for archive page heroes.

Single Blog Post Hero Style #

Fine-tune the hero appearance for individual blog post pages.

• Hero Title Color: Choose the color for the blog post title in the hero.
• Breadcrumb Colors: Set the colors for the breadcrumb trail on single posts.
• Hero Background: Choose the background source for the hero:
  • Featured Image as Background: Automatically uses the post’s featured image as the hero background.
  • Custom Background: Allows you to set a default custom background image/color for all single posts, overriding the featured image.
• Hero Background Overlay: Apply an overlay color to the single post hero background, which is especially useful when using featured images to ensure the title remains readable.

Shop Archive Hero Style #

Style the hero section for the main Shop page and product taxonomy pages (categories, tags).

• Hero Title Color: Set the color for the shop title (e.g., “Shop”, “Category: Clothing”).
• Breadcrumb Colors: Define the breadcrumb colors for the shop pages.
• Hero Background: Upload a background image or set a color specifically for your shop hero.
• Hero Overlay: Apply an overlay to the shop hero background.

Single Product Hero Style #

Configure the hero area on individual product pages.

• Hero Title Color: Set the color for the product title.
• Breadcrumb Colors: Set the colors for the breadcrumb trail on the product page.
• Hero Background: Choose the background source:
  • Product Featured Image as Background: Uses the main product image as the hero background.
  • Custom Background: Set a custom background for all product pages.
• Hero Overlay: Apply a color overlay to the single product hero to ensure contrast for the text.

Off-canvas Menu Settings #

Configure the style and appearance of the off-canvas menu (also known as a mobile sidebar or hamburger menu). This menu is typically accessed by clicking a toggle button on mobile devices or can be used as a stylistic choice on desktop. You can find these settings in Appearance > Customize > Styling > Offcanvas.

Off-canvas Menu Style #

Control the overall look and feel of the off-canvas panel that slides in from the side.

• Off-canvas Background: Set the solid background color for the entire off-canvas menu panel.
• Off-canvas Header Background: Set a separate background color for the header area at the top of the off-canvas panel, which often contains the close icon.
• Title Color: Set the color for any titles or headings within the off-canvas menu.
• Menu Links Color: Define the text color for the navigation links listed in the menu.
• Menu Links Hover Color: Set the color that menu links change to when a user hovers over them.

Close Icon Style #

Customize the appearance of the “X” icon used to close the off-canvas menu.

• Color: Set the default color for the close icon.
• Hover Color: Set the color the close icon changes to on hover, providing visual feedback to users.

Social Icon Style #

If you choose to display social media icons in your off-canvas menu, you can style them here.

• Color: Set the default color for the social media icons.
• Hover Color: Set the hover color for the social media icons.

 Top Bar Settings #

Configure the thin informational bar that appears at the very top of your website, above the main header. This area is perfect for displaying contact information, special announcements, or a small navigation menu. You can find these settings in Appearance > Customize > Styling > Top Bar.

Top Bar Style #

• Background Color: Set the solid background color for the entire top bar.
• Text Color: Set the default color for all text and links within the top bar.

Note: After making any changes in the Customizer, a notice will appear: “Settings have changed, you should save them!” Always remember to click the “Publish” button to apply your changes to the live site.

Footer Settings #

Configure the style and appearance of your website’s footer area. Digishift provides detailed control to ensure your footer aligns perfectly with your brand. You can find these settings in Appearance > Customize > Styling > Footer.

Footer Background & Structure #

Control the overall structure and background of the footer, which is often divided into a top section (for widgets) and a bottom section (for copyright text).

• Background: Set a background for the entire footer. You can use:
  • Background Color: A solid color.
  • Background Image: Upload an image.
  • Background Controls: Adjust repeat, size, attachment, and position for the image.
• Background Opacity: Use the slider to control the opacity of the footer background (0 = fully transparent, 1 = fully solid).
• Topbar Background: Set a specific background color for the top section of the footer (where your widget areas are typically located).
• Bottom Background: Set a specific background color for the bottom copyright bar of the footer.
• Border Top / Bottom: Apply a colored border to the top or bottom of the entire footer.
• Topbar Top Border: Apply a colored border to the top of the footer’s topbar section, separating it from the content above.

Footer Text & Link Colors #

Define the colors for all text elements within the footer to ensure readability and style.

• Heading Color: Set the color for all heading tags (H1-H6) within the footer widget areas.
• Text Color: Set the default color for all paragraph text in the footer.
• Bottom Text Color: Set the color for text in the bottom copyright bar specifically.
• Links Color: Set the color for all hyperlinks within the footer.
• Link Hover Color: Set the hover color for all hyperlinks within the footer.

Footer Icon Colors #

Style the social and payment method icons that you may display in your footer.

• Social Media Icons Color: Set the default color for social media icons.
• Social Media Icons Hover Color: Set the hover color for social media icons.
• Payment Icons Color: Set the color for payment method icons (e.g., Visa, Mastercard, PayPal).

Back to Top Button Settings #

Customize the floating button that allows users to scroll back to the top of the page quickly. Find these settings in Appearance > Customize > Styling > Footer > Back to Top.

• Back to Top BG: Set the background color for the button.
• Back to Top Hover BG: Set the background color for the button when a user hovers over it.
• Back to Top Color: Set the color of the arrow icon inside the button.
• Back to Top Hover Color: Set the color of the arrow icon on hover.
• Back to Top Shadow: Apply a box shadow effect to the button to make it stand out. You can control the shadows:
  • Color
  • Horizontal & Vertical Length (offset)
  • Blur Radius
  • Spread

Shop Style (WooCommerce) Settings #

Fine-tune the visual style of your online store to create a seamless and branded shopping experience. These settings specifically target key WooCommerce elements. You can find them in Appearance > Customize > Styling > Shop Style.

Button Colors #

• Add to Cart / Checkout Buttons: Set the background color for the primary action buttons throughout your store, such as “Add to Cart” and “Proceed to Checkout”. By default, this uses your Secondary Color from the global settings.
• Add to Cart / Checkout Buttons (Hover): Set the hover background color for these buttons. By default, this uses your Primary Color from the global settings.

Product Badge & Price Colors #

• Sale Bubble: Set the background color for the “Sale!” badge that appears on product images.
• Review Stars: Define the color for the product rating stars displayed throughout the shop.
• Regular Price: Set the color for the original price text when a product is on sale. This is often styled with a strikethrough.
• Sale Price: Set the color for the discounted price text, making it stand out to customers.

Notification Color #

• Success Color: Set the color for success notification messages, such as “Product has been added to your cart.”

Blog Styles Settings #

Customize the appearance of your blog elements to create a unique and engaging reading experience for your visitors. These settings can be found in Appearance > Customize > style > Blog Styles.

Post Card & Featured Post Design #

• Blog Post Card BG: Set the background color for the individual postcards or containers on your blog archive pages (e.g., the main blog page, category, and tag archives). This is useful for creating a distinct card-based layout.
• Featured Post BG: Choose a special background color to make your sticky or featured posts stand out from the rest of the posts on your blog archive pages. This provides a visual cue to visitors that highlights your most important content.