While there are ultimately other design aspects throughout your Nucleus Settings (such as Typography and Theme Settings), the majority of your overall website settings will be found in your Website Design Settings.

Here are the various aspects you'll be able to change the look and style of:

  • Navigation
  • Homepage
  • Cards
  • Pages
  • Buttons

Let's take a look at each one.

Navigation

There are two different design settings when it comes to the desktop navigation menu bar of your Nucleus: style and position.

Navigation Style

You can set your desktop navigation to be full-width, rounded, or mobile.

  • For full-width and rounded, you can also make your navigation bar sticky, which means it's always visible at the top of the page as you scroll down. If this option is not selected, your navigation will disappear as you scroll down the page.
  • For mobile navigation, this means you won't have a navigation bar. Instead, your navigation menu will be accessible through the hamburger menu icon in the top right corner of your Nucleus, in the same way it always appears on mobile devices.

Navigation Position

You can set your desktop navigation to appear below your header logo or at the very top of the page.

  • If you set your navigation below your logo but set the style to be sticky, as you scroll down, the navigation will scroll to the top and then stay visible at the top of your page.

Homepage

There are three different design settings when it comes to the homepage of your Nucleus: homepage header, mobile layout, and the number of featured cards.

Homepage Header

Depending on how visible you want the header image/video to be visible on your homepage, you can set your cards to appear below the header.

  • By default, your card(s) will partially cover the bottom of your homepage header. Neither option is better than the other. It's simply a design preference.

Additionally, you can set whether you'd like your header image/video to be visible on mobile devices.

  • Hiding the header image/video on mobile devices will not only make your homepage load faster on mobile devices, but will make your homepage cleaner. But it's totally up to you!

Mobile Layout

You can set your homepage on mobile devices to either swipe horizontally (a familiar gesture like with Instagram Stories) or to a vertical scroll (a familiar gesture like with Facebook).

  • When setting your mobile layout to a horizontal scroll, you will not see the footer on your homepage. (Your footer will be visible on all other pages.) Setting your homepage on mobile to scroll, your footer will be visible on all pages, including your homepage.

Featured Cards

Aside from mobile view, you have the choice of how many featured cards you see on your homepage. A featured card appears as a horizontal card at the top of your homepage.

  • Featured cards stack on top of each other, rather than typical portrait-style cards, where they appear side-by-side in rows of 3 on desktop, and in rows of 2 on tablets.
  • Featured cards affect cards in the order they appear in the list of cards in your Homepage Panel. If you set 4 cards to appear as featured cards, the first 4 cards in the list in your Homepage Panel will appear as featured cards.
  • You can add as many featured cards as you'd like. This means all your cards on your homepage can be stacked on top of each other, showing none in the typical portrait style.

Cards

There are five different design settings when it comes to the individual cards. These settings will affect both cards on your homepage and cards in a Cards Content Block on any page of your Nucleus.

Card Shape

You can set each card to have rigid square corners, rounded corners, or extra rounded corners.

  • Nothing fancy to mention here. It's simply a matter of preference!

Card Content

There are two options when it comes to the content that appears on your card. By default, your cards will show both the title and description of your card. Select either option to remove one or both from the card view on your homepage.

  • These options affect all your portrait-style cards. We'll address the featured/full-width card titles and descriptions next.
  • These options come in handy if you're uploading images with text already one them, or if you don't want to add an overlay to your cards, making it difficult to read the text on the cards.

Featured/Full-Width Card Content

Just like with the previous setting, you can set each title and description of your featured/full-width cards to be visible or hidden.

  • Hiding only the title from these cards still allows the white box on the right to be visible, showing the description and button.
  • Hiding the description (or both the description and title) will remove the white box. The image of the card will fill the entire card, and the button will disappear as well.

Card Shadows

There's only one option here, and that's whether you wish to see a shadow beneath each card or not. By default, the shadow will appear.

  • Nothing special to note here. It's either you want the shadows or you don't.

Card Rollover Effect

Just like with card shadows, there's only one option here: whether you want animation as your cursor hovers over each card.

  • This effect only affects cards while viewing your Nucleus on a desktop. Because you don't have a cursor on tablets or mobile devices, there is no hovering animation.
  • This animation, while not necessary, is not only hip, but it's helpful to show what your cursor is currently hovering over.

Pages

While there is only one design setting here, there are a few different options to choose from. Whereas the previous settings affected the card view of each page, these particular settings affect the page view of each page on your Nucleus.

Page Headers

You can choose two different ways for the header on each page to appear: with a horizontal or an angular cut between the header image and the page content.

  • The angular cut will always angle down toward the right.

By default, your pages will show both the title and description in the header. Below the option to choose whether your header images cut flat or angular, select either option to remove one or both from the headers of all your pages.

  • These options come in handy if you're uploading images with text already one them, or if you don't want to add an overlay to your headers, making it difficult to read the text on them.

Buttons

Buttons are an important facet of any Nucleus, and help to set the overall feel of your Nucleus.

Button Shape

Just like with your cards, you can choose between square corners, rounded corners, or extra rounded corners.

  • Depending on how you want your cards to appear, good design practice would be to match your buttons with your card styles.

Save Changes

Don't forget to save your changes at the bottom by clicking the Save Changes button! And once you do, click the My Nucleus button to explore the design changes you've made.

Did this answer your question?