# Nectarblocks

> The ultimate Wordpress Gutenberg editor experience. Design Websites that Wow.

This file contains all documentation content in a single document following the llmstxt.org standard.

## Scroll Into View

The **Scroll Into View** trigger plays a preset animation once, when the element is scrolled into view, and then leaves it in place. It's the simplest trigger type — perfect for quickly adding common entrance animations. To build your own custom scrubbed animation instead, see the **[Scroll Position](./scroll-based)** type.

    ## How to use
    1. Select the **[Nectar block](../blocks/overview)** you want to animate
    2. Open the **Block Settings** panel and scroll to **"Block Animation"**
    3. Click **Add Animation Trigger**
    4. Choose **Scroll Into View** as the trigger type
    5. Pick an animation **Type** and configure its settings

    Click **Preview Animation** to play it right on the editor canvas.

### Animation Types

Choose a **Type**, then refine it with the options that apply to it:

- **Slide** — slide in from a direction. Set **From** (Left, Right, Up, Down) and a **Distance** (how far it travels).
- **Fade** — fade in or out.
- **Grow** / **Shrink** — scale up or down into place.
- **Rotate** — rotate into place.
- **Flip** — flip in from a direction (**From**).
- **Reveal** — uncover the element with a clip-path wipe. Choose a **Mode** (Directional or Inset), optionally **Fade In**, and set **Inset** and **Roundness** amounts.

Most types share a **From / To** (play direction — animate *in* or *out*), a **Duration**, a **Delay**, and an **Easing** curve (presets or a custom cubic-bézier; see [Easing](./scroll-based#easing--playback)).

### Staggering Child Elements

By default the animation applies to the block itself. Under **Target**, switch to **Children** to instead animate the block's direct children, and set a **Stagger** delay to offset each child's start — an easy way to cascade a grid of cards, list items, or columns into view. (Children targeting is scoped to the Scroll Into View trigger and does not affect any Scroll Position or Interaction triggers on the same block.)

Use **Trigger On** to choose which devices (desktop / tablet / mobile) the animation runs on.

---

## Interaction

The **Interaction** trigger animates a block in response to a visitor **hovering or focusing** it — for buttons, cards, icons, images and any other block. Unlike the scroll triggers, an interaction animation plays forward on hover/focus and reverses when the pointer leaves.

### Adding an Interaction animation

1. Select the **[Nectar block](../blocks/overview)** you want to animate
2. Open the **Block Settings** panel and scroll to **"Block Animation"**
3. Click **Add Animation Trigger**
4. Choose **Interaction** as the trigger type
5. Add the properties you want to animate and set their **From** / **To** values

The interaction type is **On Hover/Focus**, so it also fires for keyboard users who tab to the element.

### Trigger target — self or another block

By default an interaction animates the block it's attached to (**Use Self**). Switch the **Trigger** to **Pick Trigger Block** to animate this block when a *different* block is hovered — for example, hovering a card wrapper to animate an arrow icon inside it. Select the source block from the block tree.

### Animation Properties

Click **Add Animation Property** and set a **From** and **To** value for each. The same property set as Scroll Position is available — Transforms (Translate, Scale, Rotate, Skew, Perspective), Width, Height, Opacity, Box Shadow, Color, Background Color, Filters and Masks.

- **Duration** — how long the hover animation takes (in seconds).
- **Easing** — a cubic-bézier preset or custom curve, or a **Spring** easing (Gentle, Wobbly, Stiff) for bouncy motion.

### Per-Property Timing

Open a property's **Timeline** to give it its own **Offset** (0–100, when it starts) and **Duration** (1–100, how much of the interaction it occupies), so properties can cascade instead of all moving together.

Per-property timing is unavailable when **Spring** easing is selected — with a spring, all properties animate together.

Use **Trigger On** to choose which devices the interaction runs on. You can preview the hover state directly on the editor canvas while configuring it.

---

## Animation System

### Overview

Nectarblocks has a robust system for triggering animations on your elements. You can quickly add common preset animations, or build your own complex, multi-property animations through an intuitive interface — all rendered on the front end by a single, consolidated **GSAP** bundle for smooth, performant playback.

### Video Tutorial

### The Animation System

    When editing any **[Nectar block](../blocks/overview)** that supports the Animation block control, you'll find the settings in the sidebar under the **"Block Animation"** section.

    Click the **Add Animation Trigger** button to add a trigger. Each block can hold one trigger of each type, and you can combine them — for example, a **Scroll Into View** entrance plus an **Interaction** hover effect on the same block. Once a trigger is added, its settings slide in.

    ## Trigger Types
    1. **[Scroll Into View](./in-view)** — play a preset animation (Slide, Fade, Grow, Reveal and more) once, when the element scrolls into view. The simplest way to add a polished entrance, with optional staggering of child elements.
    2. **[Scroll Position](./scroll-based)** — scrub a custom animation between a **Start** and **End** state based on the element's scroll position. Supports pinning, per-property timing, and color animation.
    3. **[Interaction](./interaction)** — animate a block on **hover/focus**, targeting the block itself or another block on the page.

### What's new in the Animation System

- **Per-property timing** — for **Scroll Position** and **Interaction** animations, each property has its own **Offset** (when it starts) and **Duration** (how much of the timeline it occupies), shown in a timeline view, so properties can cascade rather than all moving at once.
- **Spring physics** — alongside cubic-bézier easing, choose a **Spring** easing (Gentle, Wobbly, Stiff) with optional custom tension/friction/mass for natural, bouncy motion.
- **3D & perspective** — the **[Transform control](../block-controls/transform-control)** adds `translateZ`, 3D rotation, a **Perspective** value and a **Transform Origin**, with `preserve-3d` applied automatically so nested 3D transforms compose correctly.
- **Color animation** — animate **Text Color** and **Background Color** between two values.
- **Editor previews** — preview animations directly on the canvas before publishing.

Beyond the general Animation System, specific **[Nectar blocks](../blocks/overview)** provide their own unique animation settings. For instance, the **[Text](../blocks/text)** block offers animation settings for animating each letter individually. Another example includes the **[Row](../blocks/row)** and **[Column](../blocks/column)** Blocks, which feature animation settings associated with background layers (such as parallax and zoom effects).

---

## Scroll Position

The **Scroll Position** trigger lets you craft a custom animation by defining a **Start** and **End** state and scrubbing smoothly between them based on the element's current scroll position.

    ## Adding a Scroll Position animation
    1. Select the **[Nectar block](../blocks/overview)** you want to animate
    2. Open the **Block Settings** panel and scroll to **"Block Animation"**
    3. Click **Add Animation Trigger**
    4. Choose **Scroll Position** as the trigger type
    5. Add the properties you want to animate and configure their Start/End values

    ## Animation Properties
    Click **Add Animation Property** to add a property to the timeline. Add as many as you like — each is configured individually and the block scrubs from its **Start** value to its **End** value as the visitor scrolls. New properties are seeded with sensible ending values, so you can often create an effect just by setting the **Start**.

    Available properties are grouped as:
    - **Transforms** — Translate, Scale, Rotate, Skew, Perspective
    - **Width**, **Height**, **Opacity**, **Box Shadow**
    - **Color** (text) and **Background Color**
    - **Filters** — Blur, Brightness, Contrast, Grayscale, Hue Rotate, Invert, Saturation, Sepia, Drop Shadow
    - **Masks** — Inset and Circle reveals

### Animation Boundaries

The **Animation Boundaries** define *when* the scrub starts and ends. Each boundary is a pair of positions — a point on the **Element** meeting a point on the **Viewport** (each can be **Top**, **Center** or **Bottom**):

- **Begin Animations** (start) — *when the element position meets the viewport position, the animation begins.* For example, **Element: Top** / **Viewport: Bottom** starts the animation the instant the element first enters from the bottom of the screen.
- **End** — *when the element position meets the viewport position, the animation is complete.*

Each boundary also accepts an **Offset** to fine-tune the trigger point, and convenient presets (In View, View Center, Fully Visible, etc.) are available for common setups.

    ## Scroll Pinning (Advanced)
    Scroll Pinning sticks the block in place once it's reached and holds it there until the animation completes — great for storytelling and reveal effects ✨

    Enable **Pin While Animating** in the **Animation Boundaries** section. Then control the pin with:

    - **End After Scrolling** — how far the visitor scrolls to complete the animation, measured in viewport heights (e.g. `200%` = two screens of scrolling).
    - **Pin On** — start pinning when the row is **In View** or only **On Pin** (once it reaches the pin point).
    - **Row Animation End** — whether a property's animation ends with the **Entrance** or extends to the **Pin Offset**.
    - **Stagger Children** — offset the animation of pinned child blocks for a cascading effect.

      **Pin While Animating** is only available on root-level blocks. Child blocks of a pinned block are pinned too and inherit the parent's boundaries (their own boundary controls are disabled).

### Per-Property Timing

By default every property animates across the full scroll range. Open a property's **Timeline** to give it its own timing:

- **Offset** (0–100) — where within the scroll range the property *begins* animating.
- **Duration** (1–100) — the percentage of the scroll range the property's animation occupies.

Cascading the offsets and durations of different properties lets you sequence a complex, multi-step animation from a single scroll.

### Easing & Playback

By default a Scroll Position animation is tied linearly to the scroll bar. Shape that motion with an **Easing** curve — choose a cubic-bézier preset (Sine, Cubic, Quint, Circular and more) or design your own in the built-in **cubic-bézier editor**, or pick a **Spring** easing (Gentle, Wobbly, Stiff) for natural, bouncy motion. Enable **Smooth** playback to ease the scrubbing for a more fluid feel. Use **Preview Starting State** to see the Start values applied on the canvas while you edit.

### Animating Colors

Among the properties you can animate are **Color** (text) and **Background Color**. Set a starting and ending color — from your **[Global Colors](../global-settings/colors)** or a custom value — and the block transitions between them as the visitor scrolls.

Color animation is available on blocks that support the corresponding color:

- **Text color** — Text, Button, Icon, Row, Column, Flex Box, Scrolling Marquee and World Time.
- **Background color** — Text, Button, Icon, Row, Column and Flex Box.

---

## Alignment Control

## Alignment Controls

    - **Align** Allows you to select if your object is aligned to the left, right, or center of your page.

---

## Background Color Control

- **Solid** Allows you to select which color is in the background of your block.
    - **Gradient** Allows you to create a gradient background color.

---

## Background Image Control

- **Size** Allows you to select the size of the image in your block.
    - **Attachment** The size of the block's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.
    - **Opacity** Drag to adjust the opacity of your background image.

---

## Background Scroll Animation Control

- **Effect** Select a parallax or zoom animation effect.
    - **Strength** Determine the strength of your animation.
    - **Trigger On** Choose if your scroll animation triggers on desktop, tablet, or mobile.

---

## Background Shape Control

- **Shape** Choose a background shape for your block.
    - **Color** Select a color for your background shape.
    - **Position** Choose if your shape is at the top, bottom, or top and bottom of your block.
    - **Height** Set the height of your background shape.
    - **Align** Select if your shape will be on the inside or outside of your block.

---

## Background Video Control

- **Loop** Allows you to enable or disable a loop of your video background.
    - **Fit** Select how your video fits into your block.
    - **Alignment** Choose the alignment of how your video displays in the block.
    - **Opacity** Allows you to determine how opaque your background video is.

---

## Border Control

- **Outline** Select which sides of your block will have a border.
    - **Width** Choose the width of your border.
    - **Style** Allows you to pick between a border of solid, dashed, or dotted line(s).
    - **Color** Choose the color of your border.

---

## Border Radius Control

- **Corner Radius** Allows you to determine the radius of your block.
        1. Linked/Unlinked Select to change all of the radius for each corner at the same time or one at a time.

---

## Content Repeater Control

The Content Repeater control lets you manage a **list of repeatable items** inside a block. Each item can be either **text** or an **image**. You can add, remove, duplicate, and reorder items. This control is used by blocks that display multiple content pieces in a loop, such as the [Scrolling Marquee](../blocks/scrolling-marquee) block.

### Where it appears

The Content Repeater appears in the block sidebar for blocks that support it. The main example is the **Scrolling Marquee** block, where it powers the marquee’s content lines (the text or images that scroll). You may also see repeater-style interfaces in other blocks (e.g. taxonomy or meta layouts) that use the same pattern.

### Managing items

- **Add item** – Use the add button to append a new item to the list.
- **Remove** – Remove a single item from the list.
- **Duplicate** – Create a copy of an item (same content and settings).
- **Reorder** – Move items up or down to change their order.

Each row in the repeater opens a panel or popover where you edit that item’s settings.

### Item settings

#### Content type

Choose whether the item is **Text** or **Image**.

#### Text items

- **Text** – The copy for this item (plain text / text area).
- **Tag** – HTML tag used for the text (e.g. Span, H1–H6) for semantics or styling.
- **Outline Effect** – Toggle a text outline effect.
- **Spin Effect** – Toggle a spin (rotation) effect on the text.

#### Image items

- **Image** – Select or upload the image for this item.
- **Aspect ratio** – Set the image aspect ratio (e.g. Auto or a specific ratio).

Settings may vary slightly by block; the Scrolling Marquee uses these options to build the scrolling content lines.

### Typical use

In the **Scrolling Marquee** block, you add multiple repeater items so that each item becomes one “segment” in the marquee (a word, phrase, or image). The block then repeats and scrolls this list. Use a mix of text and image items, set the tag and effects per item, and reorder them to control the sequence.

---

## Custom ID Control

The Custom ID control lets you assign a custom HTML `id` attribute to a block. The block’s wrapper element will output that `id` in the markup (e.g. `<div id="your-id">`), which you can use for:

- **Anchor links** – Link directly to a section (e.g. `example.com/page/#pricing`).
- **CSS or JavaScript** – Target the block with selectors like `#your-id`.
- **Accessibility** – Reference the block from `aria-describedby` or similar attributes.

### Where it appears

The control is in the **Advanced** group in the block’s sidebar (under the block’s main settings). Not every block exposes it; it is available on blocks that include the Custom ID control (e.g. the [Text](../blocks/text) block and others that support it).

### Settings

- **Custom ID** – A single text field. Enter a valid HTML id value:
  - Use only letters, numbers, hyphens, and underscores.
  - Must not start with a number.
  - Should be unique on the page if you use it for anchor links or specific styling.

If you enter an invalid value, the control will indicate the error and the invalid id will not be saved. Leave the field empty to use no custom id (default).

---

## Display Control

The Display control sets how the block is laid out in the document flow. It appears on many Nectar blocks as a **Display** option in the sidebar (sometimes under a Display panel).

    - **Display** Select how your block is displayed.
        1. **Auto** – Default; the block follows normal flow and context.
        2. **Block** – The block is displayed as a block-level element.
        3. **Hidden** – The block is hidden (e.g. for responsive show/hide).

    You can set different values per device (desktop, tablet, mobile) when responsive editing is available, so you can hide a block on mobile or change its display by viewport.

---

## Effects Control

- **Opacity** Allows you to add an opaque effect to your block. Select the amount of transparency for the element.
    - **Box Shadow** Select to add a shadow and depth behind your block.
    - **Filters** Choose a visual filter for your block.
    - **Backdrop Filters** Select to add a filter behind the element in your block for an overlay effect.
    - **Transform** Allows you to alter the the elements in your block by rotating, skewing, or translating them.

---

## Font Color Control

- **Color** Allows you to select to color of the font in your block.

---

## Font Settings Control

- **Font Size** Allows you to adjust the size of your font within your block.
    - **Line Height** Select the line height of your font.

---

## Font Size Control

The Font Size control lets you set **font size** and **line height** for the block’s text. It can include optional **minimum and maximum** font sizes (useful for fluid typography) and supports **responsive** values so you can use different sizes on desktop, tablet, and mobile.

### Where it appears

The Font Size control appears in the sidebar on blocks that expose it, often under **General** or **Typography**-related panels. It is used by the [Accordion](../blocks/accordion), [Tabs](../blocks/tabs), [Icon List](../blocks/icon-list), and [Testimonial](../blocks/testimonial) blocks, among others. Blocks that use it may show it alongside [Font Settings](./font-settings-control) or [Typography](./typography-control); Font Size focuses specifically on size and line height.

### Settings

- **Font size** – The main font size for the block (with unit, e.g. em or px). Can be locked (disabled) to inherit from a parent or global style.
- **Line height** – Line height for the text (e.g. in em), often with a lock to inherit.
- **Font size min / max** – (When available) Minimum and maximum font size, useful for fluid or responsive typography so the size scales between bounds.

Values can be set per **device** (desktop, tablet, mobile) when the block supports responsive editing, so you can use larger type on desktop and smaller on mobile.

### Relation to other controls

- **Font Settings control** – Covers font size and line height in a general “font settings” panel; some blocks use that instead of or in addition to this dedicated Font Size control.
- **Typography control** – Applies a **typography preset** (from [Global Typography](../global-settings/typography)); that preset may define size and line height. The Font Size control then adjusts size/line height for this block specifically.

Use Font Size when the block exposes it to fine-tune the text size and line height for that block.

---

## Link Control

- **URL** Add the URL you would like to link to on your block.
    - **Target** Select whether to have your link open in a new window or in the same window.
    - **On Click** Allows you to open your URL as a regular link or as a lightbox on your page.
    - **Custom Attributes** Select to add custom attributes to your links for things like analytics.

---

## Mask Control

The Mask control adds a **linear gradient mask** to the block so that content fades at the edges (e.g. top/bottom or left/right). This is useful for blending a block into the background, creating soft edges on images or text, or matching effects like the “Mask Edges” option on the [Scrolling Marquee](../blocks/scrolling-marquee) block.

### Where it appears

The Mask control appears in the block sidebar for blocks that support it (e.g. [Text](../blocks/text), [Testimonial](../blocks/testimonial), [Row](../blocks/row), and others). Look for a **Mask** section or panel in the design/effects area.

### Settings

- **Enable** – Turn the mask effect on or off.
- **Direction** – Orientation of the gradient:
  - **Horizontal** – Fade on left and/or right.
  - **Vertical** – Fade on top and/or bottom.
- **Sides** – Choose which edges are masked:
  - **Horizontal:** Left, Right, or both.
  - **Vertical:** Top, Bottom, or both.
- **Mask amount** – Strength of the fade (how much of the edge is blended out). Higher values create a longer, softer fade.

Settings can be set per device (desktop, tablet, mobile) where the control supports responsive editing, so you can use different mask directions or amounts on different screen sizes.

### Typical use

Use the mask to soften the top and bottom of a full-width section, or the left/right edges of a row, so content blends into the page background instead of ending in a hard line.

---

## Overflow Control

- **Overflow** Allows you to control the visibility and behavior of content that exceeds the boundaries of your block.

---

## Overview

## Block Controls

      ## Overview
      Nectar Block controls provide abstractions over common CSS rules. Each Block Control is focused on a different set of rules. Block Controls allow for these common sets of CSS rules to be applied to every block for which they are enabled.

---

## Position Control

- **Z-Index** Allows you to choose the position of the layered elements in your blocks.
    - **Position** Choose how to position your block on your page (for example absolute or fixed positioning to free it from the normal flow).

    ## Drag to reposition

    When a block uses **absolute** positioning, you can place it visually instead of typing offsets. Click the **draw / move icon** in the block toolbar, then drag the block to where you want it on the canvas — the position offsets update as you drag. This makes it easy to nudge an absolutely positioned badge, label or decorative element into place.

---

## Render Tag Control

The Render Tag control lets you change the **HTML element** used as the block’s wrapper. By default many layout blocks output a `<div>`. This control allows you to switch to a semantic element such as `<section>`, `<article>`, `<header>`, or `<footer>` so that your markup better reflects the meaning of the content and improves accessibility and SEO.

### Where it appears

The control is available on blocks that support it, including the [Row](../blocks/row), [Column](../blocks/column), and [Flex Box](../blocks/flex-box) blocks. It typically appears in the block sidebar under design or general settings, labeled **Tag**.

### Options

You can choose from these wrapper elements:

| Tag       | Use case                                      |
| --------- | --------------------------------------------- |
| **Div**   | Generic container (default when no semantics needed). |
| **Section** | Thematic grouping of content.                 |
| **Article** | Self-contained content (e.g. blog post, card). |
| **Header**  | Introductory or navigational content for a section or page. |
| **Footer**  | Footer for a section or page.                 |
| **Aside**   | Tangentially related content (e.g. sidebar).  |
| **Nav**     | Navigation links.                             |
| **Main**    | Main content of the page (use once per page). |

Selecting a tag changes the block’s root HTML element in the saved markup (e.g. from `<div class="...">` to `<section class="...">`).

### When to use it

- Use **Section** for major page regions (hero, features, testimonials).
- Use **Article** for each repeated item in a list or grid of posts/cards.
- Use **Header** / **Footer** for the top and bottom of a template or section.
- Use **Nav** for menu or link groups.
- Use **Main** for the primary content area of a page template.
- Use **Div** when you don’t need a specific semantic meaning.

Choosing the right tag helps screen readers and search engines understand the structure of your page.

---

## Size Control

- **Width/Heigh** Choose the width and height of your block.
    - **Min** Select the minimum width and height of your block.
    - **Max** Select the maximum width and height of your block.
  - **Fit**  Allows you to choose how your block fits on your page.

---

## Spacing Control

- **Spacing** Adjust the margins and padding of the elements in your block. Each value is responsive and can be set per breakpoint.
    - **Link Sides** Tie sides together so they share a value. Beyond all-or-nothing, you can link sides by axis:
      - **All** — every side moves together.
      - **Left / Right** — link just the horizontal pair, leaving top and bottom independent.
      - **Top / Bottom** — link just the vertical pair, leaving left and right independent.
      - **Both axes** — horizontal sides share one value and vertical sides share another, independently.
      - **None** — edit all four sides separately.

      Linking left/right and top/bottom independently (rather than only all sides at once) makes symmetrical spacing quick to set without forcing every side to match.

---

## Transform Control

The **Transform** control applies CSS transforms to a block. Add one or more transform types to a block and stack them to build up an effect. Transforms are also the building blocks of the **[Animation System](../animation-system/overview)** — both Scroll Position and Interaction animations can animate these same values.

    ## Transform Types
    Choose a **Transform Type** to add:

    - **Translate** — move the block on the **X** and **Y** axes, and on **Z** (`translateZ`) to push it toward or away from the viewer in 3D.
    - **Scale** — scale on **X** and **Y**. Use the **lock** to scale both axes together, or unlock for independent values.
    - **Rotate** — rotate in the plane (**degrees**) or in 3D around the **X** and **Y** axes.
    - **Skew** — skew on the **X** and **Y** axes.
    - **Perspective** — set the perspective distance (default `1200px`) that gives 3D translate/rotate their sense of depth. A smaller value exaggerates the effect.

### Transform Origin

The **Transform Origin** sets the anchor point that scale, rotate and skew pivot around. Pick from the nine-point preset grid (corners, edges and center) or enter precise **X** / **Y** percentages — the default is `50% 50%` (center). The chosen origin is reflected in the editor preview so you can see exactly how the block will pivot.

### 3D & Perspective

When you use 3D transforms (`translateZ`, 3D rotation or a Perspective value), Nectarblocks applies `preserve-3d` automatically so nested 3D transforms compose correctly rather than flattening. Combine a **Perspective** with a **Rotate** on the X/Y axes to tilt a card in space, or with **translateZ** to lift it toward the viewer.

Transforms are state-aware — set a different transform for the **[hover state](../responsive-editing/hover-mode)** (and per breakpoint) to create motion on interaction without a full animation trigger.

---

## Typography Control

- **Font Style** Allows you to choose the typography of your font.

---

## Video Control



---

## Accordion

The Accordion block is a tool to organize your content. You can easily toggle between expanded and collapsed views to streamline the user experience on your page. 

### Sidebar Controls

    ### General settings
    - **Preset**  Select between the default or rounded edges preset.
    - **Start Open** Assign which of your accordion tiles will start open on your page.
    - **Gap** Adjust the gap between each of your accordion tiles.
    - **Font Size** Allows you to adjust the size and line height of your font.

### Block Controls Available

The following are common Nectar Block controls which are used in other blocks as well as the Accordion block.

- **Display**
- **Background**
- **Border**
- **Size**
- **Position**
- **Spacing**
- **Link**
- **Effects / Transform**
- **Animations**

---

## Button

The Button Block is a versatile component that allows you to create attractive and interactive links to engage your audience.

### Sidebar Controls

    ### General settings
    - **Font Style** The font style option allows you to choose from any of the font styles you have created in your **[Global Typography Font Rules](../global-settings/typography)**.
    - **Color** Allows you to choose the color of your text.
    - **Size/Align** Any size specified here will override the size specified in your **[Global Typography Font Rules](../global-settings/typography)**.
    - **Style** Controls the style of the button. 
      - `Default`: No additional styling.
      - `Arrow`: Adds an arrow to the right of the button which will animate when hovered.
      - `Wave`: The button will have a wave animation on the text when hovered over.
      - `Underline`: The button will have an underline animation on the text when hovered over.
    - **Icon**: Allows you to add an icon to the button. You can choose from any of the icons available the included libraries or upload your own.

### Block Controls Available

The following are common Nectar Block controls which are used in other blocks as well as the Button block.

- **Link**
- **Background**
- **Spacing**
- **Border**
- **Size**
- **Position**
- **Display**
- **Overflow**
- **Animations**
- **Effects / Transform**

---

## Carousel

Showcase your content in a dynamic and interactive format with the Carousel block. Effortlessly cycle through items with smooth horizontal scrolling, perfect for highlighting featured content, images, or testimonials.

### Sidebar Controls

      ### General settings
      - **Columns** Allows you to choose the number of columns to display in the carousel.
      - **Group** Determines the number of slides to move at a time.
      - **Gap** Adjusts the space between each slide.
      - **Center Slide** Centers the slides in the carousel.
      - **Corner Radius**: Adjusts the corner radius of the carousel.

    ### Slider Effects
    - **Type** The type of effect to apply to the carousel.
      - `Fade`: The slides will fade in and out.
      - `Slide`: The slides will slide in and out.
      - `Cards`: The slides will appear as cards and overlap each other.
    - **Transitions Speed** Adjusts the speed of the transition between slides.

    ### Slider Controls
    - **Coloring** Adjusts the color of the navigation arrows and pagination dots.
    - **Arrows** Displays the navigation arrows.
      - `Style`: Determines the style of the navigation arrows.
      - `Size`: Determines the size of the navigation arrows.
      - `H. Align`: Determines the horizontal alignment of the navigation arrows.
      - `V. Align`: Determines the vertical alignment of the navigation arrows.
      - `Background`: Adds a background color to the navigation arrows.
    - **Pagination** Displays the pagination dots.
      - `Position`: Determines the position of the pagination dots.
      - `Alignment`: Determines the alignment of the pagination dots.

      ### Slider Modes
      - **Autoplay** Automatically cycles through the slides.
        - `Type`: Determines the type of autoplay.
        - `Time Between`: Adjusts the time between each automatic slide change.
        - `Pause on Hover`: Pauses the autoplay when the mouse hovers over the carousel.
      - **Loop** Allows the carousel to loop infinitely.
      - **Free Mode** Allows the carousel to be dragged and scrolled freely.

### Block Controls Available

The following are common Nectar Block controls which are used in other blocks as well as the Carousel block.

- **Size**
- **Display**
- **Background**
- **Spacing**
- **Position**
- **Overflow**
- **Animations**
- **Effects / Transform**

---

## Column

The Nectar Column block is a powerful tool for creating layouts. Columns are available to be nested inside of the **[Row block](./row)** to create complex layouts. Columns can be resized and reordered on desktop, tablet, and mobile devices responsively.

### Sidebar Controls
The following are controls unique to the Nectar Column block.

    ### General settings
    - **Width** Controls the width of the column.
    - **Content Gap** Controls the gap between content inside the column.

### Resizing Columns
Columns can be resized by dragging the column handle left or right, or by using the column width slider in the [sidebar controls](#sidebar-controls). Columns can be resized to any percentage width, or to a fraction of 12 columns depending on the value set on the parent **Row [`Constraint`](./row#general-settings)** setting.

### Responsive Column Widths
Columns can be resized independently on desktop, tablet, and mobile devices. However, by default, columns stack vertically in the Tablet and Mobile viewports. To display your columns horizontally in either of these viewports, edit the parent **Row** block and set the `Direction` to `Horizontal`.

### Block Controls Available

The following are common Nectar Block Controls which are used in other blocks as well as the Column block.

- **Display**
- **Background**
- **Size**
- **Border**
- **Position**
- **Spacing**
- **Overflow**
- **Animations**
- **Effects / Transform**

---

## Divider

The Divider Block allows you to add a divider between blocks. This can be used to separate content and add visual interest to your page.

### Sidebar Controls

    ### General settings
    - **Preset** Allows you to select a preset divider style, which will set the settings of your block.
      1. **Default** The default divider style.
      2. **Small Gradient** A small gradient divider.
      3. **Full Width** A full width divider.
      4. **Invisible** An invisible divider.
    - **Color** Allows you to choose the color of divider line.
    - **Alignment** Allows you to choose the alignment of the divider line.

### Block Controls Available

The following are common Nectar Block controls which are used in other blocks as well as the Divider block.

- **Size**
- **Spacing**
- **Position**
- **Display**
- **Effects / Transform**
- **Animations**

---

## Flex Box

The Flex Box block utilizes CSS flexbox to display content horizontally or vertically. This offers versatile display options that adapt to the various layout needs of your page.

### Sidebar Controls

    ### General settings
    - **Content Gap** Allows you to adjust the gap between the content in your flex box.

### Block Controls Available

The following are common Nectar Block controls which are used in other blocks as well as the Flex Box block.

- **Display**
- **Background**
- **Border**
- **Size**
- **Position**
- **Spacing**
- **Link**
- **Effects / Transform**
- **Animations**

---

## Header Actions

The Header Actions block groups the interactive icons in your header — typically **[Search](./search)**, a **Header Account** link and a WooCommerce **Mini Cart** — into a single, evenly aligned row. It gives you one place to control the size, spacing and color of all those icons at once.

### Sidebar Controls

    ### Header Actions
    - **Icon Size** The size of every icon in the container (16–40px).
    - **Gap** The horizontal spacing between action items (0–60px).
    - **Icon Color** The color applied to all icons, with a hover state. Because headers can change appearance as the page scrolls, the color can also be set per **header state** (for example a different color when the header is transparent versus scrolled).

### Child blocks

Header Actions is a container. Add the actions you need inside it:

- **[Search](./search)** — a popup or inline site search.
- **Header Account** — a single icon linking to the user's account page (see below).
- **WooCommerce Mini Cart** — the cart icon and dropdown (when WooCommerce is active).

#### Header Account

The Header Account block renders an account icon link inside Header Actions. Its settings are:

- **Icon** Choose the account icon style: `Classic`, `Minimal` or `Bold`.
- **Link** Set where the icon points. If left empty it defaults to the WooCommerce **My Account** page; you can also open it in a new tab and add custom attributes.

The account icon inherits its size and color from the parent Header Actions block, so everything in the row stays visually consistent.

### How it works

On the front end the block lays its children out in a horizontal flex row using the gap you set, and cascades the icon size and color down to each child (search icon, account icon, cart icon). Per-state colors let the icons adapt as the header transitions between transparent, scrolled and overlay-menu-open states.

---

## Icon List

The Icon List block lets you build lists where each item has an icon and optional text. Use it for feature lists, checklists, steps, or any content that benefits from a repeated icon + line format. You add **Icon List Item** blocks inside the Icon List to define each row.

### Adding items

Add blocks inside the Icon List using the block inserter: search for **Icon List Item** or use the Nectar category. Each Icon List Item can share the list’s default icon or use its own icon and styling.

### Sidebar controls

#### General settings (Icon List)

- **V. Space** Vertical spacing between list items (px or em).
- **Gap** Space between the icon and the text for each item (em).
- **Alignment** Horizontal alignment of the list content.
- **Typography** Choose a typography preset for the list text.
- **Font Size** Adjust font size (and line height where applicable).
- **Font Color** Set text color (solid or gradient), including responsive and hover.

#### Icon settings (Icon List)

- **Icon** Choose the default icon used for all items (individual items can override).
- **Icon Size** Size of the icon (em).
- **Icon Align** Horizontal alignment of the icon relative to the text.
- **Icon V. Align** Vertical alignment of the icon relative to the text.
- **Icon Color** Color for the icon, with responsive and hover support.

#### Icon List Item

Each **Icon List Item** has its own **General** and **Icon** settings so you can override the list default for that row (e.g. different icon or color per item).

### Block controls available

These Nectar block controls are available on the Icon List block:

- **Display**
- **Background**
- **Border**
- **Border Radius**
- **Position**
- **Spacing**
- **Effects / Transform**
- **Animations**

---

## Icon

The Icon Block allows you to add an icon to your page. You can choose from a variety of icons, and customize the size, color, and alignment of the icon.

### Sidebar Controls

    ### General settings
    - **Preset** Allows you to select a preset icon style, which will set the settings of your block.
      1. **Default** The default Icon style.
      2. **Gradient Circle** A gradient circle with an icon inside.
      3. **Border Circle** A circle with a border and an icon inside.
    - **Color** Allows you to choose the color of icon.
    - **Alignment** Allows you to choose the alignment of the icon.
    - **Alt Text** The label screen readers announce for the icon. Leave it empty to mark the icon as decorative (it is hidden from assistive technology). For an SVG uploaded from your media library, an empty field falls back to that file's media-library alt text instead. When the icon is the only content of a link, the icon keeps its built-in name so the link is never left unlabeled.

### Block Controls Available

The following are common Nectar Block controls which are used in other blocks as well as the Icon block.

- **Display**
- **Background**
- **Border**
- **Size**
- **Position**
- **Spacing**
- **Link**
- **Effects / Transform**
- **Animations**

---

## Image Gallery

The Image Gallery block allows you to add an engaging and dynamic image showcase for your users. The block settings give you options to tailor your content into an immersive gallery

### Sidebar Controls

    ### General settings
    - **Image Ratio** Allows you to set the ratio of the image. This will be used to determine the size of the image when displayed on the page.
    - **Corner Radius** Adjusts the rounded edges of the images included in your image gallery.
    ### Slider Parameters
    - **Columns** Add image columns to display more than one image in your gallery at once.
    - **Group** Select how many images will scroll when your gallery loops.
    - **Gap** Determine the percentage of space between your images in the gallery.
    - **Center Slides** Select to automatically have the images in your gallery be centered on the page.
    ### Slider Effects
    - **Type** Choose if your images will slide across the page, or fade into the next image.
    - **Transition Speed** Allows you to select the speed of your image transitions.
    ### Slider Controls
    - **Color Type** Allows you to choose how the colors are displayed on your gallery controls.
    - **Coloring** Choose the perfect color for your controls.
      1. **Arrows** Select to add or remove the directional arrow controls.
      2. **Style** Allows you to choose if your arrows are animated on hover.
      3. **Button BG** Select to add or remove the background color of your arrow button.
      4. **Arrow Color** Choose the perfect color for your arrow buttons.
    - **Pagination** Select to add or remove the pagination controls at the bottom of your gallery.
    - **Scrollbar** Select to add or remove a scrollbar at the bottom of your image gallery.
    ### Slider Modes
    - **Autoplay** Allows your gallery scroll automatically on your page.
      1. **Type** Select the default or add a pagination progress bar indicating when the gallery will scroll.
      2. **Time Between** Determine how much time lapses between the images scrolling.
      3. **Pause on Hover** Select to have your gallery pause when the mouse hovers over it.
    - **Loop** Allows you to have your gallery continuously loop.
    - **Free Mode** Select to allow your gallery to be dragged with a mouse click.

### Block Controls Available

The following are common Nectar Block controls which are used in other blocks as well as the Image Gallery block.

- **Display**
- **Background**
- **Border**
- **Size**
- **Position**
- **Spacing**
- **Link**
- **Effects / Transform**
- **Animations**

---

## Image Grid

A highly customizable Image Grid display that allows you to organize images using different layouts.

### Sidebar Controls

    ### General Settings
    - **Layout** Select between a Standard, Mosaic or Masonry grid.
    - **Columns** The number of columns in your grid.
    - **Gap** The gap between rows / columns of the grid.
    - **Click Event** How the image grid will handle when the user clicks on the image.
    - **Image Ratio** The display ratio of the image in the grid.
    - **Resolution** The media resolution for the image.

    ### Design Settings
    - **Overlay** 
    - **Overlay Opacity** 
    - **Text** Text colo
    - **Background Color**
    - **Hover** - Underline, Zoom or Zoom Underline
    - **Scroll Animation** - This will animate the Post Grid when the user scrolls.
      - **Effect** - Choose between Parallax and Zoom effects.
      - **Speed**
      - **Trigger On** On which device type the scroll animation should fire.
    - **Corner Radius** - Corner Radius of the images.

    ### Caption Settings
    - **Show Captions** - Hide or show Captions with your images.
      _ **Caption Layout**
      - **Visibility**
      - **Padding**
      - **Content Alignment** Choose how you would like to align the content.
      - **Content**  Choose the order, via drag and drop, and which items you would like displayed in the Post Grid item.
        1. Caption
        2. Meta Display
        3. Title

#### Block Controls Available

The following are common Nectar Block controls which are used in the Image Grid block.

- **Border**
- **Background**
- **Spacing**
- **Sizing**
- **Display**

---

## Image

The image block allows you to add an image to your page. You can choose from any of the images you have uploaded to your media library, upload a new image, or use the built-in option to search and insert an image from Unsplash (see [Using images from Unsplash](#using-images-from-unsplash) below).

### Using images from Unsplash

When adding or editing an Image block, you can search and insert photos from [Unsplash](https://unsplash.com/) instead of (or in addition to) your media library. Use the image selector in the block to access this option, then search by keyword and choose an image to insert. The image is added to your page in the same way as other images.

**License and attribution.** Images available through this feature are provided by Unsplash under the [Unsplash License](https://unsplash.com/license). You are responsible for complying with that license and with [Unsplash’s terms](https://unsplash.com/terms) for the way you use the images. The Unsplash License allows free use for commercial and non-commercial purposes; attribution is not required but is appreciated by photographers (e.g. “Photo by [Photographer Name] on Unsplash”). When in doubt, check Unsplash’s current license and terms for your use case.

Nectarblocks is not affiliated with Unsplash. Unsplash and the Unsplash logo are trademarks or registered trademarks of their respective owner. Use of Unsplash images and any reference to Unsplash in the product is for description only and does not imply endorsement or sponsorship.

### Sidebar Controls

    ### General settings
    - **Image** Allows you to select an image to display.
    - **Title** The text which will be used for the `Title` attribute of the image.
    - **Alt Text** The text which will be used for the `Alt Text` attribute of the image.
    - **Resolution** The resolution of the image. This will be used to determine the size of the image when displayed on the page. All registered WordPress image sizes will be available to choose from.
    - **Image Ratio** Allows you to set the ratio of the image. This will be used to determine the size of the image when displayed on the page.
    - **Alignment** The alignment of the image.

### Block Controls Available

The following are common Nectar Block controls which are used in other blocks as well as the Image block.

- **Size**
- **Display**
- **Border**
- **Position**
- **Spacing**
- **Link**
- **Animations**
- **Effects / Transform**

---

## Megamenu

The Megamenu block turns a navigation dropdown into a rich content panel. Instead of a plain list of links, a menu item can reveal an entire **global section** or **synced pattern** — letting you build dropdowns with columns, images, featured content and promotions. It lives inside a navigation menu item's submenu.

### Adding a Megamenu

Megamenu is placed inside a navigation submenu item (`core/navigation` / `core/navigation-submenu`). If you insert it directly into a navigation block, it automatically wraps itself in a submenu so the structure stays valid. Build the dropdown's contents once as a global section or pattern, then point one or more menu items at it.

For a walkthrough that connects a Global Section and compares the three sizes, see **[Building a Megamenu](../header-builder/building-a-megamenu.mdx)**.

### Sidebar Controls

    ### Megamenu Settings
    - **Size** Render the dropdown `Full Width` (spanning the viewport), `Header Width` (matching the header bar it sits in) or `Contained` (a fixed maximum width).
    - **Width** Shown when Size is `Contained` — set the dropdown's width (in px or vw).
    - **Source** Choose what to display: a `Global Section` or a `Pattern`.
    - **Selection** Search and select the specific global section or pattern to show. Once selected, its title is displayed with **Edit** (open it in a new tab to make changes) and **Change** (pick a different source) actions.

### How it works

On the front end the chosen section or pattern is rendered inside the dropdown. The block positions itself intelligently: a full-width megamenu stretches to the viewport edges, while a contained one centers on its menu item and shifts left or right automatically if it would overflow the screen. A header-width megamenu matches the width of the header row it sits in and opens directly below it, so it lines up with the bar even when that row is narrower than the page container. Nectar header templates and theme headers using a `header` element or banner role are supported. Outside a recognized header, Header Width falls back to the viewport width. Positioning recalculates on resize, hover, and keyboard focus.

### Styling a megamenu

The Megamenu block itself only controls *what* appears in the dropdown and its width. The dropdown's **open animation** (`Fade` / `Morph`), background, link colors and spacing are inherited from the hosting **[Navigation](./navigation)** block's **Dropdowns** controls, so all of a header's dropdowns — plain submenus and megamenus alike — share a consistent look. Design the panel's *contents* by editing the linked global section or pattern.

### Related

- **[Navigation](./navigation)** — the menu that hosts your megamenu dropdowns, including the **Dropdowns** styling controls.
- **[Header Builder](../header-builder)** — assemble the header these menus live in.

---

## Milestone

The Milestone block offers a visually compelling way to celebrate a milestone on your page. The count-up animation captures attention and showcases your success.

### Sidebar Controls

    ### General settings
    - **Font Style**  Allows you to choose from any of the font styles you have created in your Global Typography Rules.
    - **Color** Select to choose the color of the text in your milestone.
    - **Size/Align** Allows you to choose the size and spacing of the content within your milestone.
    - **Count Animation** Turn on to animate the count up to your milestone. Decimal values written as `1.5` or `1,5` are both understood, and `1,000`-style thousands separators are kept in the display.
      1. **Duration** Choose how long your animation will run.
      2. **Trigger on** Select on which responsive device your milestone animation displays.

### Block Controls Available

The following are common Nectar Block controls which are used in other blocks as well as the Milestone block.

- **Display**
- **Background**
- **Border**
- **Size**
- **Position**
- **Spacing**
- **Link**
- **Effects / Transform**
- **Animations**

---

## Navigation

The Nectar Navigation block extends the core WordPress Navigation block with a full design system for headers — typography, colors, spacing, borders, hover/active states, link animations, a custom overlay (mobile) menu and styled dropdowns. Inserting it drops in a core Navigation block flagged as Nectar-enhanced, so you keep all of core's menu management while gaining a complete sidebar of Nectar controls.

### Sidebar Controls

The enhanced inspector is organized under a **Nectarblocks** panel with three top-level tabs: **Menu Items**, **Overlay** and **Dropdowns**. Most settings are responsive and many support a hover state. To set a hover value, switch the editor to **[Hover Mode](../responsive-editing/hover-mode.mdx)** with the cursor icon in the toolbar, then change the control.

#### Header State badge

When the Navigation block lives inside the **Header Navigation** template part, a badge at the top of the panel shows which header state you're editing (`Default`, `Transparent`, `Scrolled` or `Overlay Menu`) and any active color variant.

In a state other than Default, these controls can have their own value, with a reset icon on each to return it to the Default value:

- **Menu Items**: Spacing, Color, BG Color, Outline and Corner Radius
- **Dropdowns**: Dropdown BG, Spacing, Color and BG Color

Font Style, Size, Gap, the link Animation and everything on the Overlay tab apply to every state. See **[Header States](../header-builder/header-states.mdx)**.

#### Menu Items

    The top-level menu links. Split into three sub-tabs: **Style**, **States** and **FX**.

    #### Style
    - **Font Style** Apply a typography preset to the menu links.
    - **Size** Responsive font size, weight, alignment, etc.
    - **Gap** Horizontal spacing between menu items (0–50, in `px` or `em`).
    - **Spacing** Padding/margin around each link (responsive, with hover).
    - **Width** / **Height** Standard Nectar size controls for the menu container, with min and max values.

    #### States
    Two nested tabs: **Default** and **Active** (applied to the current menu item).
    - **Color** Link text color (responsive, hover).
    - **BG Color** Link background color (solid, responsive, hover).
    - **Outline** and **Corner Radius** for the link. On the Active tab, both have an **inherit from default** toggle so the active link can either match the default style or use its own.

    #### FX
    - **Animation** Link hover animation: `Default`, `Reveal`, `Underline`, `Underline Alt` or `Wave`.
    - **Effects** Standard Nectar effects controls (opacity, blur, etc.).
    - **Transform** Standard Nectar transform controls (translate, rotate, scale, skew).

#### Overlay

    Replaces core's responsive overlay with a Nectar-styled mobile/overlay menu and a custom trigger.

    - **Display** Choose which screen sizes use the overlay: Desktop (1025px and wider), Tablet (768px to 1024px) and Mobile (767px and narrower). Only Mobile is selected by default, and the breakpoints can't be changed.
    - **Icon** Trigger style: `3 Lines`, `2 Lines` or `Text Only`. Selecting `Text Only` automatically enables Menu Text.
    - **Icon Size** Trigger size (10–60px, responsive).
    - **Menu Source** Controls which menu the overlay displays. Defaults to **Inherit** (reuse the desktop menu); you can also pick any **Block** or **Classic** WordPress menu from the dropdown. For fully custom designs, build an **[Off Canvas Menu](../header-builder/off-canvas-menu.mdx)** template in the Theme Builder — this unlocks full control over the overlay's layout and contents.
    - **Menu Text** (toggle) Add a text label next to or in place of the icon.
      - **Text** The label text.
      - **Alignment** `Left` or `Right` of the icon (hidden when the icon is Text Only).
    - **Text** Color of the overlay menu links (responsive, hover).
    - **BG Color** Background of the overlay panel (solid, responsive, hover).
    - **Close BG** Background of the close button.
    - **Close Icon** Color of the close icon.
    - **Font Style** Typography preset applied to overlay menu links.
    - **Size/Align** Responsive font size and alignment for overlay menu links.
    - **Item Gap** Space between the overlay menu links.

    When a menu has nested submenus, the overlay presents them as **drilldown sub-panes**: tapping a parent item slides in a new pane with its children (and a back control to return), keeping deep menus tidy on small screens rather than stacking everything inline.

    The overlay's **entrance animation** isn't set on the block — it's controlled globally from the Theme Customizer under **Header Navigation → Header Off Canvas Menu**.

#### Dropdowns

    Styles the submenu panels that open from any menu item. Split into **Style** and **States** sub-tabs.

    #### Style
    - **Animation** How dropdowns open: `Fade` or `Morph`.
    - **Dropdown BG** Background of the dropdown panel (solid, responsive, hover).
    - **Font Style** Typography preset for dropdown links.
    - **Size/Align** Responsive font size and alignment for dropdown links.
    - **Gap** Spacing between items inside the dropdown (0–50, in `px` or `em`).
    - **Spacing** Two nested tabs:
      - **Panel** — padding/margin around the dropdown panel itself (defaults to 20px on each side).
      - **Item** — padding/margin around each dropdown link.
    - **Outline** and **Corner Radius** for the dropdown panel.

    Dropdown panels are at least 250px wide, and there's no width setting. A **[Megamenu](./megamenu)** sets its own width.

    #### States
    Two nested tabs: **Default** and **Active** (current submenu item).
    - **Color** Dropdown link text color (responsive, hover).
    - **BG Color** Dropdown link background color (solid, responsive, hover).

### Working with menus

The block uses the core WordPress Navigation block underneath, so you build the menu the usual way: pick or create a menu, then add, reorder and nest items on the canvas. To turn a menu item's dropdown into a rich content panel, nest a **[Megamenu](./megamenu)** block inside that item's submenu. **[Building a Megamenu](../header-builder/building-a-megamenu.mdx)** walks through a full example.

- **Block menus are separate from Appearance → Menus.** A menu built in this block is saved as a block menu. Every **Create new Menu** and every choice under **Import Classic Menus** saves another one, so the menu dropdown can fill up with copies. Give the menu your header uses its own name under **Advanced → Menu name**, then use **Manage menus** to trash the copies you don't need.
- **"(Invalid)" on a menu item** means the editor can't find the page that item links to. Delete the item and add the page again.
- **Vertical menus.** Nectar Navigation is built for headers and lays its links out in a row. For a vertical menu, in a footer or an **[Off Canvas Menu](../header-builder/off-canvas-menu.mdx)** template for example, use the regular WordPress Navigation block and set **Layout → Orientation** to **Vertical**.

### How it works

The block opts each core Navigation block in to Nectar enhancement by setting an internal marker on the block. Every Nectar control above writes to attributes that are scoped per-block (via a generated `blockId`) and compiled to CSS that's emitted on both the editor and the front end, so what you see in the editor matches what ships. When the block sits inside the header template part, the same controls can write per-state overrides so the navigation can restyle itself as the header transitions between transparent, scrolled and overlay-open states without duplicating the markup.

### Related

- **[Megamenu](./megamenu)** — turn a menu item's dropdown into a full-width content panel.
- **[Header Actions](./header-actions)** — group search, account and cart icons alongside your navigation.

---

## Overview (Blocks)

## Blocks

      The blocks that Nectarblocks provides are be located at the top of the block list and are highlighted in a blue gradient color to make them easy to find. All Nectar blocks contain powerful customization settings which won't be available in third-party / core blocks and seamlessly integrate with your **[global settings](../global-settings/overview)**.

### The Nectarblocks Category

### Block List

---

## Post Content

The Post Content block outputs the main content of the current post or page. It is intended for use in **single post or page templates** (e.g. in [Full Site Editing](https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/) or template parts) so that each post or page automatically shows its own body content in the correct place.

### Where to use it

- **Single post template** – Renders the post body (the content edited in the block editor for that post).
- **Single page template** – Renders the page body for the current page.
- **Custom post type single template** – Renders the main content for the current CPT item when the block is used in that CPT’s single template.

The block has no configurable options in the sidebar; it simply outputs the content of the current post in context. Place it where you want the main content to appear in your template.

### Dynamic data and templating

When building templates that change per post or page (e.g. **[Dynamic Data](../dynamic-data/overview)** or **Global Sections**), the Post Content block is the block that displays the actual post/page content. Use it together with other dynamic or static blocks (headers, footers, sidebars, etc.) to build full single-post or single-page layouts.

### Block controls available

The Post Content block uses the standard block wrapper and does not expose additional Nectar block controls in the sidebar.

---

## Post Grid

A highly customizable grid display that can query data from any post type.

### Sidebar Controls

    ### Query Settings
    - **Post Type** Select which Post Type you would like to include in your Post Grid.
    - **Taxonomies** Select which Taxonomies of the Post Type you would like to include in your Post Grid.
    - **Per Page** The number of posts per page.
    - **Post Order** Order your posts ascending or descending.
    - **Order By** Order your posts via this property.
    - **Post Offset** Offset the posts included in your Post Grid by this number.
    - **Pagination** Paginate your Post Grid with multiple options for how you would like to paginate.
      - Types:
        1. **Load More** - Will Feature a load more button at the bottom and fetch posts via AJAX requests.
        2. **Arrows** - Left and Right arrows will allow users to navigate between pages of posts.
        3. **Numbered** - There will be numbers that show how many pages of posts are available.

    ### Layout Settings
    - **Grid** Select between a rigid or Masonry grid
    - **Content** Choose where to put the content.
    - **Content Alignment** Choose how you would like to align the content.
    - **Columns** The number of columns in your grid.
    - **Gap** The gap between rows / columns of the grid.
    - **Link Type** Default links the media and title to the post, Wrap All makes the entire item one link, and None removes the links to the post. Author and taxonomy links keep their own settings.
    - **Item Ratio** The display ratio of the item in the grid. Auto, available for the Overlaid and Content Under layouts, sizes items to their content instead of a fixed ratio. In the Masonry layout it lets items flow naturally instead of following the fixed span pattern.
    - **Resolution** The media resolution for the item.

    ### Content Settings
    - **Content**  Choose the order, via drag and drop, and which items you would like displayed in the Post Grid item.
      1. Date
      2. Taxonomies (can be added more than once, each pulling from its own taxonomy, for example categories and tags side by side; each term carries `taxonomy--{slug}` and `term--{slug}` classes for custom styling)
      3. Title
      4. Excerpt
      5. Author
      6. Read More
      7. Custom

    ### Design Settings
    - **Overlay** 
    - **Overlay Opacity** 
    - **Text** 
    - **Background Color**
    - **Border** - Border width, style and color around each post item.
    - **Border Radius** - Rounded corners for each post item and its media.
    - **Padding**
    - **Hover** - Underline, Zoom or Zoom Underline
    - **Scroll Animation** - This will animate the Post Grid when the user scrolls.
      - **Effect** - Choose between Parallax and Zoom effects.
      - **Speed**
      - **Trigger On** On which device type the scroll animation should fire.

#### Block Controls Available

The following are common Nectar Block controls which are used in other blocks as well as the Post Grid block.

- **Background**
- **Spacing**
- **Position**
- **Effects / Transform**
- **Animations**

---

## Row

The Nectar Row block is a powerful layout tool that enables you to create complex layouts with ease. It serves as the foundation of the Nectarblocks plugin and is used to house **[columns](./column)**, which, in turn, contain various content blocks.
    The Row block is also capable of spanning the entire width of the browser window, allowing you to create full width layouts.

### Inline Controls

    1

#### 1. Row Alignment

- None (Contained)
- **Full Width** When a row is set to **Full Width**, it will span the entire width of the browser window. Once a row is set to this mode, an additional option called 'Contained Content' becomes available in the general settings. This option keeps the inner content width limited to the size of your site container.

### Sidebar Controls

The following are controls unique to the Nectar Row block.

    ### General settings
    - **Contained Content** Keeps the inner content width limited to the size of your site container. This option is only available when the row is set to **Full Width**.
    - **Constraint** Controls how the columns in the row are sized.

        **Locked Grid** - Columns will be locked to a 12 column grid and can be resized to fractions of 12.

        **Freeform** - Columns can freely be resized to any percentage width, bypassing a grid.

    - **Columns** Controls the number of columns in the row.
    - **Gap** Controls the gap between columns.

### Block Controls Available

The following are common Nectar Block controls which are used in other blocks as well as the Row block.

- **Display**
- **Background**
- **Size**
- **Border**
- **Position**
- **Spacing**
- **Overflow**
- **Animations**
- **Effects / Transform**

---

## Scrolling Marquee

The Scrolling Marquee block allows you to add scrolling content to your page. You can add text and images that will loop continuously at your choice of speed and direction. The font, colors, and size of your marquee are all customizable.

### Sidebar Controls

    ### General settings
    - **Content**  Select your content with choices of either images or text.
    - **Speed** Allows you to choose the speed of your marquees loop. Set it to `0` to hold the marquee still on that breakpoint.
    - **Direction** Controls which direction your content scrolls.
      1. **Left** Your content will loop towards the left-hand side of the page.
      2. **Right** Your content will loop towards the right-hand side of the page.
    - **Gap**  Controls the space between each content line.
    - **Mask Edges** Select to mask the edges of your marquee to blend in with your background.
    - **Image Height** Adjust the height of the images in your marquee.
    - **Font Style** Allows you to choose from any of the font styles you have created in your Global Typography Rules. 
    - **Size/Align** Allows you to choose the size and spacing of the content within your marquee. 

### Block Controls Available

The following are common Nectar Block controls which are used in other blocks as well as the Scrolling Marquee block.

- **Display**
- **Background**
- **Border**
- **Size**
- **Position**
- **Spacing**
- **Link**
- **Effects / Transform**
- **Animations**

---

## Search

The Search block adds site search to your layout, either as a tap-to-open popup or an always-visible inline field. With AJAX search enabled it shows live results as the visitor types — complete with featured images, post type labels and excerpts. It's commonly placed inside the **[Header Actions](./header-actions)** block, but works anywhere.

### Sidebar Controls

    ### Display
    - **Mode** Show search as a `Popup` (an icon that opens a search field) or `Inline` (an expanded field with results below it). Can be set per device.
    - **Style** For popup mode, expand to `Fullscreen` with an overlay, or a compact `Dropdown` beneath the icon.

    ### Icon
    - **Icon Style** Choose the search icon: `Classic`, `Minimal` or `Bold`.
    - **Color** `Inherit` the surrounding text color, or set a `Custom` color.

    ### Search settings
    - **Placeholder** The hint text shown inside the search field.
    - **Align** Which side the results panel aligns to.
    - **AJAX Search** Show live results as the visitor types. When enabled:
      - **Limit to post type** — restrict results to a single post type, or search all.
      - **Featured image** — show each result's thumbnail.
      - **Post type** — show a label for each result's post type.
      - **Description** — show a short excerpt under each result.
      - Plus color controls for the result text, hover background and divider.

    ### Input styling
    Style the field's width, background, text color, border and border radius — with separate **Default** and **Focus** states so the field can change appearance when active.

### How it works

The popup and inline experiences are fully responsive — you can use a popup on desktop and an inline field on mobile, for example. When AJAX search is on, keystrokes are debounced and queried against your site; results render with optional image, post-type label and excerpt, and all returned content is escaped to keep the markup safe.

### Block Controls Available

The following are common Nectar Block controls which are used in other blocks as well as the Search block.

- **Typography**
- **Border**
- **Effects / Transform**

---

## Star Rating

The Star Rating block allows you to add a common rating feature.

### Sidebar Controls

    ### General settings
    - **Star Style**  Allows you to choose from a filled or empty star shape.
    - **Rating** Select a rating 0-5, in half step increments.
    - **Size** Allows you to choose the size of the stars.
    - **Gap** Allows you to set a specific gap size between the stars.
    - **Color** Select to choose the color of the text in your milestone.
    - **Alignment** Allows you to choose between, left, center and right alignment.

### Block Controls Available

The following are common Nectar Block controls which are used in other blocks as well as the Star Rating block.

- **Display**
- **Position**
- **Spacing**
- **Effects / Transform**
- **Animations**

---

## Table of Contents

The Table of Contents block automatically builds a navigation list from the headings on your page. As you add or edit headings, the list stays in sync, and visitors can click any entry to jump straight to that section.

### Sidebar Controls

    ### Layout
    - **Preset** Choose a starting style: `Default` (plain list) or `Card` (boxed, sticky layout with its own colors and padding).
    - **Headings** Select which heading levels to include (H2, H3, H4). Only the levels you enable appear in the list.
    - **List Style** Show the list as `Numbered` or with `None` (no markers).
    - **Hover Effect** Add an optional `Bullet` indicator that appears when an item is hovered, or `None`.
    - **Item Gap** Control the spacing between each entry in the list.
    - **Hierarchical** Nest sub-headings under their parents in a tree layout. When enabled, **Children** controls how nested items behave: `Collapsible` (expand and collapse under their parent), `Always Visible`, or `Hidden` (don't show nested items at all). **Children visibility is responsive** — set a different mode per breakpoint (tablet inherits desktop, mobile inherits tablet), so you can keep the full tree on desktop but switch to `Hidden` on mobile, for example.
    - **Smooth Scroll** Animate the scroll to the target heading instead of jumping instantly.
    - **Offset** Add extra space above the target heading when scrolling, so it isn't hidden behind a sticky header.
    - **Anchor Links** Show a copy-link icon next to each heading; clicking it copies the heading's anchor URL to the clipboard.
    - **Custom Labels** Override the auto-detected text for any heading, so the entry in the list can differ from the heading itself.

    ### Style
    Styling is split into **Items** and **Block** tabs, each offering background color, text color, border, border radius and spacing. Items additionally expose **Opacity** and **Active Opacity** (the opacity of the entry currently in view).

### How it works

On the front end the block scans the page for the heading levels you selected, assigns anchor IDs to any headings that don't already have one, and keeps the active entry highlighted as you scroll. When the list is sticky it tracks your scroll position; when hierarchical + collapsible is enabled, parent entries expand and collapse their children.

### Block Controls Available

The following are common Nectar Block controls which are used in other blocks as well as the Table of Contents block.

- **Typography**
- **Font Size**
- **Color**
- **Background**
- **Border**
- **Spacing**
- **Position**
- **Display**
- **Effects / Transform**
- **Animations**

---

## Tabs

The Tabs block gives you yet another way to organize your content. Creating tabs allows you to reduce clutter help your audience find the information they are looking for.

### Sidebar Controls

    ### General settings
    - **Preset** Choose from the available tab presets.
    - **Direction** Select whether your tabs will be horizontal or vertical on your page.
    - **Tab Location** Allows you to move your tabs to the top or bottom of the block.
    - **Item Overflow** { /* TODO */ }
    - **Alignment** Choose the alignment of your tabs within the block.
    - **Starting Tab** Select which tab you would like to be open first on your page.
    - **Full Width** Choose to spread your tabs across the full width of your page.
    - **Gap** Allows you to indicate how much space there is between your tabs.
    ### Icon
    - **Position** Choose if your icon is to the left, top, or right of your tab text.
    - **Vertical Alignment** Allows you to align your icon to the top, center, or bottom of your tab text.
    - **Size** Choose the size of your icon.
    - **Gap** Allows you to indicate how much space there is between your icon and your tab text.
    ### Description
    - **Opacity** Determine the opacity of your description text.
    - **Position** Allows you to choose if the description is at the top or bottom of your tab.

### Block Controls Available

The following are common Nectar Block controls which are used in other blocks as well as the Tabs block.

- **Display**
- **Background**
- **Border**
- **Size**
- **Position**
- **Spacing**
- **Link**
- **Effects / Transform**
- **Animations**

---

## Taxonomy Grid

A highly customizable taxonomy grid display that can query data from any taxonomy type.

### Sidebar Controls

    ### Query Settings
    - **Post Type** Select which Post Type you would like to include in your Taxonomy Grid.
    - **Taxonomies** Select which Taxonomies of the Post Type you would like to include in your Taxonomy Grid.
    - **Per Page** The number of posts per page.
    - **Post Order** Order your posts ascending or descending.
    - **Order By** Order your posts via this property.

    ### Layout Settings
    - **Grid** Select between a rigid or Masonry grid
    - **Content** Choose where to put the content.
    - **Content Alignment** Choose how you would like to align the content.
    - **Columns** The number of columns in your grid.
    - **Gap** The gap between rows / columns of the grid.
    - **Item Ratio** The display ratio of the item in the grid.
    - **Resolution** The media resolution for the item.

    ### Content Settings
    - **Content**  Choose the order, via drag and drop, and which items you would like displayed in the Taxonomy Grid item.
      1. Title
      2. Post Count
      3. Custom

    ### Design Settings
    - **Overlay**
    - **Overlay Opacity**
    - **Text**
    - **Background Color**
    - **Padding**
    - **Hover** - Underline, Zoom or Zoom Underline
    - **Scroll Animation** - This will animate the Post Grid when the user scrolls.
      - **Effect** - Choose between Parallax and Zoom effects.
      - **Speed**
      - **Trigger On** On which device type the scroll animation should fire.

#### Block Controls Available

The following are common Nectar Block controls which are used in other blocks as well as the Taxonomy block.

- **Border**
- **Background**
- **Spacing**
- **Position**
- **Effects / Transform**
- **Animations**

---

## Taxonomy Terms

The Taxonomy Terms block shows taxonomy terms (e.g. categories, tags, or custom taxonomies) for the **current post** in context. Unlike the [Taxonomy Grid](./taxonomy-grid) block, which displays a grid of posts filtered by taxonomy, this block simply outputs the terms assigned to the post being viewed—ideal for single post templates, meta lines, or “Filed under” sections.

### Where to use it

Use Taxonomy Terms in **single post or page templates** (or anywhere the “current post” is defined) so that the correct terms appear for each post. If you use it outside a single-post context, behavior depends on your theme and template.

### Sidebar controls

#### General settings

- **Taxonomy** Select which taxonomy to display (e.g. Categories, Tags, or a custom taxonomy).
- **Direction** Lay out terms horizontally or vertically.
- **Show** Choose which terms to display:
  - **Current terms** – Terms assigned to the current post.
  - **Current parent terms** – Only parent terms for the current post.
  - **All terms** – All available terms from the selected taxonomy (not filtered by the current post).
  - **Parent terms** – Only parent-level terms from the taxonomy (all top-level terms, not filtered by current post).
- **Gap** Spacing between terms (px or em), with responsive overrides.
- **Delimiter** (when direction is horizontal) Toggle a delimiter between terms (e.g. comma or slash).
- **Term Link** Enable or disable linking each term to its archive.
  - **"All" Link** Option to show an “All” link.
  - **Hover FX** Hover effect for term links (e.g. None, Underline, Reveal).

Settings are responsive where applicable (desktop, tablet, mobile).

### Block controls available

The following Nectar block controls are available on the Taxonomy Terms block:

- **Display**
- **Background**
- **Border**
- **Border Radius**
- **Position**
- **Spacing**
- **Font Color**
- **Typography**
- **Alignment**
- **Effects / Transform**
- **Animations**

---

## Testimonial

Build trust and credibility by sharing customer feedback.

### Sidebar Controls

    ### General Settings
    - **Quote** Select the font settings of the quote in the testimonial.
    - **Quote Size** Font size settings of the quote in the testimonial.
    - **Name** Select the font settings of the name in the testimonial.
    - **Subtitle** Select the font settings of the subtitle in the testimonial.
    - **Gap** Allows you to set a specific gap size between the testimonial sections.
    - **Color** Select to choose the color of the silhouette in the testimonial.
    - **Alignment** Allows you to choose between, left, center and right alignment.
    - **Star Rating** See features of Star Rating block for how the settings interact.
    - **Image** Display an image of the person giving the testimonial.
      1. **Size** Allows you to choose the size of the quotation.
    - **Icon** Add stylized quote icon to the testimonial.
      1. **Style** Two types of quotation icons to select from.
      2. **Size** Allows you to choose the size of the quotation.
      3. **Color** Allows you to choose the color of the quotation.

### Block Controls Available

The following are common Nectar Block controls which are used in other blocks as well as the Testimonial block.

- **Display**
- **Background**
- **Spacing**
- **Border**
- **Position**
- **Effects / Transform**
- **Animations**

---

## Text

The text block is capable of displaying text in a variety of ways. In contrast to other page builders that provide many text elements for different text styles, the Nectar Text block is designed to offer **flexibility and reusability** for any text display on your site, all from a single block.

### Inline Controls

    1

    2

    3

#### 1. Render Tag
The render tag option allows you to choose the HTML tag that will be used to render the text. This is useful for SEO purposes, as well as for styling purposes. As this will inherit from your **[Global Typography Font Rules](../global-settings/typography)**.

#### 2. Text Stretch
The Text Stretch option will scale your text to fill the width of the container. This is useful for creating large headings that span the width of the page.

#### 3. Text Highlights

The Text Highlights option allows you to highlight specific words or phrases within your text. It functions similarly to how you would highlight text when making it bold or italic. You select the text you want to highlight and then click the highlight button. Once a highlight has been activated, additional options will appear, allowing you to change the color, style, and size of the highlight.

You can edit an existing highlight by clicking on the highlighted word(s) and then clicking the highlight button again.

### Sidebar Controls

The following are controls unique to the Nectar Text block.

#### General settings

- **Font Style** The font style option allows you to choose from any of the font styles you have created in your **[Global Typography Font Rules](../global-settings/typography)**.
- **Color** Allows you to choose the color of your text.
- **Size/Align** Any size specified here will override the size specified in your **[Global Typography Font Rules](../global-settings/typography)**.

#### Text Animations
These animations are unique to the Nectar Text Block and differ from general block animations. They are designed to animate each letter of the text individually.

- **Effect** Allows you to choose from a variety of text animations.
  - **None** No animation will be applied.
  - **Reveal** The text will slide up from the bottom.
  - **Fade** The text will fade in and out.
- **Easing** Specifies easing function that will be used for the animation.
- **Time Between** Controls the time between each letter's animation. Increase this to create a staggered effect.
- **Delay** Controls the delay before the animation begins.
- **Trigger On** Limits the animation to only occur on specific devices.

#### Additional Block Controls Available

The following are common Nectar Block Controls which are used in other blocks as well as the Text block.

- **Position**
- **Spacing**
- **Size**
- **Display**
- **Animations**
- **Effects / Transform**

---

## Ticker

The Ticker block scrolls its contents in a seamless, never-ending loop — perfect for logo strips, announcements, testimonials or any content you want to keep moving across the screen. Each piece of content lives in a **Ticker Item** child block, and you can add as many items as you like.

### Sidebar Controls

    ### Layout
    - **Speed** Set the scroll speed as a percentage (100% ≈ 18 seconds to cross the container). Lower is slower, higher is faster.
    - **Hover** A speed multiplier applied while a visitor hovers over the ticker — set it below 100% to slow down on hover, or 0 to pause.
    - **Mode** Scroll `Horizontal` (left/right) or `Vertical` (up/down).
    - **Direction** Choose the travel direction for the current mode (Left/Right, or Up/Down).
    - **Align** / **Justify** Control how items line up across and along the ticker.
    - **Gap** The space between each item.
    - **Uniform Width / Uniform Height** Force every item to a fixed width and/or height for an even, grid-like strip.
    - **Mask Edges** Fade the content out at the edges of the container.
    - **Drag to Move** Let visitors drag the ticker to scrub through its contents (front end only).
    - **Scroll Velocity** Speed the ticker up as the visitor scrolls the page. **Dynamic Direction** makes the ticker follow the scroll direction.

### Ticker Item

Each **Ticker Item** is a content section inside the ticker and can hold any blocks you like (text, images, buttons, icons and so on). Its own settings cover **Align** / **Justify** of the item's contents, plus the shared **Size**, **Spacing**, **Position** and **Effects / Transform** controls. A *Go to Parent Settings* shortcut jumps back to the Ticker's controls.

### How it works

On the front end the ticker clones its items as many times as needed to fill the container, producing a gap-free, continuous loop. Lazy-loaded images inside the ticker are pre-decoded to avoid layout shifts, and the loop recalculates automatically when the window is resized.

### Block Controls Available

The following are common Nectar Block controls which are used in other blocks as well as the Ticker block.

- **Size**
- **Spacing**
- **Border**
- **Position**
- **Display**
- **Overflow**
- **Effects / Transform**
- **Animations**

---

## Video Lightbox

The Video Lightbox block allows you to add a dynamic visual element to your page. This block opens a video in a lightbox overlay when triggered and allows your audience to interact with your video content.

### Sidebar Controls

    ### General settings
    - **Link** Allows you to choose between a locally hosted video or an external link.
    - **Preview** Select to add a preview image or video clip to your lightbox.
      1. **Image** Choose an image for your preview.
      2. **Video** Choose a video clip for your preview.
      3. **Aspect Ratio** Used to change the ratio of the video. This will determine the size of the video when displayed on the page.
      4. **Overlay** Allows you to overlay a color on your preview image or video.
      5. **Overlay Opacity** Choose the opacity of your overlay color.
    - **Play Button** Select to add a play button to your image or video preview.
      1. **Size** Adjust the size of your play button.
      2. **Roundness** Select how round or square your play button is.
      3. **Icon** Choose the color of your icon.
      4. **Icon Background** Choose the color of your icon background.
    - **Text**  Select to add text with your play button.
      1. **Flow** Choose if your text is below or in line with your play button.
      2. **Color** Allows you to choose the color of your text.
      3. **Style** Select the style of your text.
    - **Mouse Attract** Choose to have your play button follow the movement of your mouse.
      1. **Type** Select if the play button starts in the center of your preview or is hidden until your mouse hovers over the preview.

### Block Controls Available

The following are common Nectar Block controls which are used in other blocks as well as the Video Lightbox block.

- **Display**
- **Background**
- **Border**
- **Size**
- **Position**
- **Spacing**
- **Link**
- **Effects / Transform**
- **Animations**

---

## Video Player

The Video Player block allows you to seamlessly add captivating video content to your page. You can choose from videos you have already uploaded to your media library, or upload a new video file.

### Sidebar Controls

    ### General settings
    - **Video**  Allows you to upload your video file.
    - **Preview Image** Add a preview image from your media library or upload a new one.
    - **Aspect Ratio** Used to change the ratio of the video. This will determine the size of the video when displayed on the page.
    - **Autoplay** If enabled the video play will play on page load, otherwise it will wait for user input.
      1. **Enable**
      2. **Disable**
    - **Autoplay Trigger** If autoplay is enabled, you can choose to play the video when it is in view or when the user clicks on the video.
      1. **In Viewport**
        - As soon as the video is in view, it will start playing.
      2. **Scroll Seek**
        - The video will scrub from beginning to end as the user scrolls past it. It is recommended to use a short video, only a few seconds in length, when enabling this feature. Note that this is an advanced feature and requires specific encoding to ensure smooth playback in browsers. Keyframes must be added every few frames in the video. Here's an article that delves deeper into the subject: [Scroll Seek](https://medium.com/@chrislhow/scroll-to-scrub-videos-4664c29b4404#:~:text=Bonus%20content%3A%20encoding%20the%20videos) \
        **ffmpeg encoding settings which should be sufficient:** \
        `ffmpeg -i input.mp4 -vf scale=960:-1 -movflags faststart -vcodec libx264 -crf 20 -g 1 -pix_fmt yuv420p output.mp4`
    - **Loop**  Allows you to automatically loop or un-loop your video.
    - **Muted** Select to mute or include the volume from your video file.
    - **Controls** Select to add or remove the control functions from the video.

### Block Controls Available

The following are common Nectar Block controls which are used in other blocks as well as the Video Player block.

- **Display**
- **Background**
- **Border**
- **Size**
- **Position**
- **Spacing**
- **Link**
- **Effects / Transform**
- **Animations**

---

## World Time

The World Time block shows the live current time for any major city around the globe. It's ideal for office-hours displays, "local time" indicators, or multi-region landing pages. The clock updates automatically in the visitor's browser.

### Sidebar Controls

    ### Time settings
    - **City** Pick from a searchable list of major cities worldwide. The block uses that city's timezone to display the correct time.
    - **Time Format** Show the time in `12h` (with AM/PM) or `24h` format.
    - **Show Seconds** Include seconds in the time display. When off, the clock updates once per minute.
    - **Date** Toggle a date alongside the time. When enabled you can set:
      - **Format** — Short (`Jan 15`), Medium (`Jan 15, 2024`), Long (`15 Jan 2024`), Numeric (`01/15/2024`), or a weekday-prefixed variant.
      - **Position** — place the date `Before` or `After` the time.
      - **Size** — render the date at the `Same` size as the time or `Smaller`.
      - **Show Timezone** — append the abbreviated timezone (e.g. EST, JST).

    ### Typography
    Choose a global typography style, then fine-tune font size, line height, alignment and color.

### How it works

The date is rendered on the server for correct localization, while the time updates live in the browser using the selected city's timezone — every second when seconds are shown, otherwise on each minute boundary. If a timezone can't be resolved it falls back to a sensible default.

### Block Controls Available

The following are common Nectar Block controls which are used in other blocks as well as the World Time block.

- **Typography**
- **Font Size**
- **Color**
- **Size**
- **Spacing**
- **Position**
- **Display**
- **Effects / Transform**
- **Animations**

---

## Adding External Fonts

To add a font that cannot be uploaded you can add a direct link to the font via the below filter:

```php
add_filter('nectar_custom_font_list', function($fonts){
    $custom_fonts = [
        [
            "name" => "Test",
            "slug" => "my-test",
            "variations" => [
                [
                    "file_name" => "test.ttf",
                    "url" => "https://domain.com/font-files/font.ttf",
                    "fontData" => [
                        "fontStyle" => "normal",
                        "weight" => "400"
                    ]
                ]
            ]
        ]
    ];
    $merged_fonts = array_merge($fonts, $custom_fonts);
    return $merged_fonts;
});
```

---

## Adobe Fonts

Nectarblocks integrates directly with **Adobe Fonts** (formerly Typekit), so the font families in your Adobe account become available throughout your site's typography settings.

### Connecting your account

1. In the WordPress admin, open the Nectarblocks admin panel and go to the **Custom Fonts** tab.
2. Find the **Adobe Fonts** section.
3. Enter your Adobe Fonts **API token**. You can generate one from your Adobe account at [fonts.adobe.com/account/tokens](https://fonts.adobe.com/account/tokens).
4. Click **Connect**.

Nectarblocks contacts Adobe, retrieves your kits, and loads the font families they contain. Once connected you can disconnect or refresh the list from the same section at any time.

### Using Adobe fonts

After connecting, Adobe font families appear alongside your other fonts:

- In the **[Global Typography](../global-settings/typography)** editor, choose **Adobe** as the font source when editing a font rule, then pick a family.
- In any block's typography control, Adobe families are selectable in the font picker.

On the front end, only the Adobe kits that are actually used in your typography settings are loaded, keeping requests to a minimum.

### Related

- **[Custom Fonts Overview](./overview)** — uploading your own font files.
- **[Local Google Fonts](./local-google-fonts)** — self-host Google Fonts.
- **[Global Typography](../global-settings/typography)** — assigning fonts to global rules.

---

## Local Google Fonts

By default, Google Fonts are loaded from Google's servers. With **Local Google Fonts** enabled, Nectarblocks downloads the Google Fonts your site uses and serves them from your own domain instead.

### Why self-host

- **Performance** — fonts are served from your own server and cached, removing an extra third-party connection on every page load.
- **Privacy / GDPR** — visitors' browsers no longer request fonts from Google, so no visitor data is sent to Google's font CDN.

### Enabling it

1. In the WordPress admin, open the Nectarblocks admin panel and go to the **Plugin Options** tab.
2. Turn on **Local Google Fonts**.

Once enabled, any Google Fonts assigned in your **[Global Typography](../global-settings/typography)** rules are downloaded (in the efficient WOFF2 format), stored in your site's uploads directory, and referenced from there. The local copies are regenerated automatically when you change your typography settings, so the set of self-hosted fonts always matches what your site actually uses.

### Related

- **[Custom Fonts Overview](./overview)** — uploading your own font files.
- **[Adobe Fonts](./adobe-fonts)** — connect an Adobe Fonts account.
- **[Global Typography](../global-settings/typography)** — assigning fonts to global rules.

---

## Custom Fonts Overview

Nectarblocks allows users to upload fonts in the format `.tff`, `.woff` or `.woff2`. To upload a custom font, navigate to the `Custom Fonts` tab in the Nectarblocks admin panel.

### Adding a Font

Enter the name of your font and click `Add Font`.

### Adding Font Variations

After creating a font, you can add variations to that font. Font variations are different styles such as Normal vs Italic and various font weights.

---

## Import/Export

## Import/Export Plugin

### Plugin Installation

    Inside of your Nectarblocks download bundle, you will find a plugin called `nectar-blocks-importer-exporter.zip`. This is the plugin you will need to install for handling demo imports as well as importing and exporting theme and plugin settings.
    For more information on how to install the plugin, [click here](../getting-started/plugin-installation).

### Demo Installation
Nectarblocks includes a one-click demo importer that allows you to import demo content, theme settings and global settings with a single click. This feature is useful for quickly setting up your site to look like one of the [Nectarblocks templates](https://nectarblocks.com/templates/).

### Video Tutorial

### Importing and Exporting Demos

    1. Navigate to the Nectarblocks admin tab and then select the Import/Export tab.

    2. Click on the demo you want to import.

    3. Select which part of the demos you want to install. If the Nectarblocks theme is inactive you will not be able to install the Theme Options.

    4. Click `Import Demo`. The server will process the demo files and import them into your site. Downloading images could take longer than the default PHP/Wordpress timeout, so you might need to hit the import button multiple times. The import process will continue from where it left off.

:::tip[Server Requirements]
If you run into an error during the demo import process, please ensure your server meets the following requirements:

+ max_execution_time: 60 seconds or greater
+ memory_limit: 128MB or greater
+ post_max_size: 18MB or greater
+ upload_max_filesize: 18MB or greater
:::

### Importing and Exporting Theme and Plugin Settings

#### Plugin Settings: Global Settings

Global Settings are primarily located in the right-hand side of of the editor when clicking on the Nectarblocks logo, and a few are contained in this options panel.

Your export will include the following data:
1. Global Colors
2. Global Typography
3. Global Custom Code

#### Theme Settings: Customizer Settings
Theme Customizer settings are available in the WordPress Customizer (Appearance → Customize) and handle all the general styling for the Nectarblocks theme.

Your export will include the following data:

1. General Settings
2. Typography Settings
3. Layout Settings
4. Post Types Settings
5. General WordPress Page Settings

---

## Filters

Nectarblocks exposes a small set of PHP filters for site-specific behavior that has no UI. Add them from a child theme's `functions.php` or a small custom plugin.

### `nectar_global_sections_assign_capability`

The capability a user needs to assign **Display Locations** and **Display Conditions** to a [Global Section](/dynamic-data/global-sections). Editing the section's content follows the normal post permissions; only the "where does this render" metaboxes are gated here.

- **Signature:** `apply_filters( 'nectar_global_sections_assign_capability', string $capability )`
- **Default:** `'manage_options'`
- **Since:** 3.2.0

An empty or non-string return falls back to the default.

```php
add_filter( 'nectar_global_sections_assign_capability', function ( $capability ) {
    // Let editors decide where global sections appear.
    return 'edit_others_posts';
} );
```

### `nectar_global_section_allowed_locations`

The list of theme hooks a Global Section may attach to. Locations stored on a section are only rendered when their hook is in this list, so a section pointed at a hook that is not offered by the editor is silently skipped. Use this to add hooks from your own templates, or to remove hooks you do not want used.

- **Signature:** `apply_filters( 'nectar_global_section_allowed_locations', string[] $hooks )`
- **Default:** every hook offered by the Display Locations picker
- **Since:** 3.2.0

Non-string and empty entries are dropped from the returned list.

```php
add_filter( 'nectar_global_section_allowed_locations', function ( array $hooks ) {
    // Allow sections to render on a hook fired by a custom template.
    $hooks[] = 'my_theme_after_pricing_table';
    return $hooks;
} );
```

### `nectar_custom_font_list`

Register a font by URL when it cannot be uploaded through the Custom Fonts screen. The filter and its expected array shape are documented on the [Adding External Fonts](/custom-fonts/adding-external-fonts) page.

---

## Custom Fields

Alongside built-in post fields such as the title, excerpt and featured image, dynamic data can pull from custom fields (post meta) stored on your posts, pages and custom post types. Custom fields appear in the same dynamic data picker as the built-in fields and can be used with any of the [data types](./data-types).

:::warning[Custom fields are read, not created]
Nectarblocks reads custom fields that already exist on your content. It does not create them. Define the field on the post type first, fill it in on your posts, then connect it in the editor.

In particular, adding a custom field while editing a Theme Builder template attaches the value to the template itself, not to the posts the template renders, so it will not appear when editing a post.
:::

There are three ways to provide custom fields, covered below: the Advanced Custom Fields plugin, WordPress custom fields, and meta registered in code.

### ACF fields

When the [Advanced Custom Fields](https://wordpress.org/plugins/advanced-custom-fields/) (ACF) plugin is active, your field groups are detected automatically. No configuration is needed. Each field group appears as its own group in the dynamic data picker, using the labels you gave the fields.

The following ACF field types are available as dynamic fields:

- **Text**: `text`, `textarea`, `number`, `email`, `password`, `color_picker`
- **Rich text**: `wysiwyg`
- **Links**: `url`, `page_link`, `link`
- **Choices**: `select`, `radio`, `button_group`, `checkbox`, `true_false`
- **Date and time**: `date_picker`, `date_time_picker`, `time_picker`
- **Relational**: `taxonomy`
- **Media**: `image`, `file`

Layout fields (`accordion`, `tab`, `group`, `clone`, `flexible_content`, `repeater`) and complex fields (`gallery`, `google_map`, `oembed`, `post_object`, `relationship`, `user`, `range`, `message`) are not listed in the picker.

:::info[Storing videos in ACF]
ACF has no dedicated video field type. To hold a video, use a `file` field (for uploads to the media library) or a `url` field (for videos hosted elsewhere). The `oembed` field type is not supported.
:::

### WordPress custom fields

Plain post meta, added through the block editor's Custom Fields panel or with `add_post_meta()`, is listed in the picker under a **Custom Fields** group. The stored value is output as-is, so these work best for plain text and URLs.

Two things to be aware of:

- The Custom Fields panel is hidden by default in the block editor. Enable it from the editor options menu under **Preferences → Panels**.
- The **Custom Fields** group is built from the meta keys found on the post being previewed. Add the field with a value to at least one post before connecting it in a template.

### Registered meta fields

For custom post types, meta registered in code with [`register_post_meta()`](https://developer.wordpress.org/reference/functions/register_post_meta/) is listed under a **Meta Fields** group named after the post type (for example **Meta Fields: Project**), whether or not any post has a value yet:

```php
register_post_meta( 'project', 'video_background', [
	'type'         => 'string',
	'label'        => 'Video Background',
	'single'       => true,
	'show_in_rest' => true,
] );
```

The `label` is used as the field's display name in the picker. These groups only appear for custom post types; for the core `Post` and `Page` types, use ACF or WordPress custom fields instead.

### Custom fields and data types

Each [data type](./data-types) draws on custom fields a little differently:

- **Text**: any text-based field can be inserted into a Text block, combined freely with static content.
- **Image**: ACF `image` fields appear alongside the built-in image fields such as the featured image.
- **Video**: video sources always come from custom fields. None of the built-in post fields hold a video, so the video picker lists custom fields only.
- **Link**: `url`, `page_link` and `link` fields, plus any plain meta field holding a URL.

### Example: a per-post video background

A common use case is a single post template where each post supplies its own background video, the same way each post has its own featured image.

1. In ACF, create a field group (for example "Post Options") containing a `file` field named "Video Background", and set its location rule to show on Posts.
2. Edit a post and upload or select a video in the new field.
3. In the Theme Builder, open your single post template and select the Row, Column or Flex Box block that should carry the video.
4. In the block's background settings, open the **Video** control, click the **Dynamic BG Video** icon and select the Video Background field.
5. Save the template.

When a post is viewed, the template pulls the video from that post's field. The same approach works with the Video Player block, and with an ACF `image` field for the Image background control.

---

## Data Types

Nectarblocks Dynamic Data currently supports the following data types:

### Text Data Type

The String data type is used to connect to a string field in your WordPress database. When adding a `Text` block, you can select a dynamic field to render in the block by using the `Dynamic Data` icon in the text Toolbar.

When a field is selected, its text will appear as a dynamic field directly within the text editor. It will display a gradient underline when interacted with, indicating that it's dynamic. You can add multiple dynamic text fields to a single block, making it easy to combine dynamic and static content.

### Image Data Type

The Image data type is used to connect to an image field in your WordPress database. This data type is available for the `Image` block, as well as the Image background control, found in blocks such as the `Column`, `Row`, and `Flexbox` blocks.

### Video Data Type

The Video data type is used to populate a video source from a source in your WordPress database. This data type is available for the `Video Player` block, as well as the Video background control, found in blocks such as the `Column`, `Row`, and `Flexbox` blocks.

Video sources always come from **[custom fields](./custom-fields)**. None of the built-in post fields hold a video, so the video picker lists custom fields only, such as an ACF `file` or `url` field containing the video. If the picker is empty, create the field on your post type first.

### Link Data Type

The Link data type is used to connect to a link field to your WordPress database. This data type is available for all Blocks which implement the `Link` block component. For example, the `Button` block. You can use this to create dynamic links to pages, posts, or custom post types.

---

## Global Sections

:::tip[Nectarblocks Theme Required]
This feature relies on the hooks registered within the Nectarblocks theme. If you are using a different theme, you will not be able to take advantage of this feature.
:::
Global sections are a special Post Type in Nectarblocks designed for content that will be repeated across multiple pages. They are useful for displaying content on every page of your site, such as a footer, call-to-action, or newsletter signup form.

   Global Sections can be accessed from the WP Admin → Global Sections. Here you can create, edit and delete global sections.
   At the bottom of a global section, you'll find two metaboxes for Display Locations and Display Conditions. These allow you to control where and when the global section is displayed.

#### Display Locations
Global Sections can be injected into any Nectar hook. The picker groups locations by context so you can quickly find the right spot without memorizing hook names:

- **Top** – Header-only hooks (inside the navigation bar or immediately after it).
- **Main Content** – Before/after the page or post content, sidebar top/bottom, before/after the blog loop, and the 404 template area.
- **Menu (Off-Canvas)** – Slots before the menu list, after the list, or inside the meta/footer area of the off-canvas menu.
- **Bottom** – The footer hook, parallax footer variant, and the strip after the footer.
- **WooCommerce** – Split into four subgroups:
  - **Shop** – Before/after the shop loop on catalog pages.
  - **Single Product** – Before the summary, before/after the add-to-cart form, and after the summary.
  - **Checkout** – Before/after billing, shipping, order notes, and order review/payment.
  - **Cart** – Coupon area, before totals, before shipping, around the shipping calculator, and the proceed-to-checkout button.

#### Display Conditions
Display conditions determine when a Global Section should render. Each condition can either include (`True`) or exclude (`False`) a context, and multiple rules can be combined with AND/OR logic to build precise targeting.

##### Adding conditions
- Open a Global Section and locate the **Display Conditions** metabox beneath the editor.
- Click **Add New Condition**, pick `True` or `False`, then choose a rule from the dropdown.
- Some rules expose additional pickers (for example, selecting a taxonomy term or a specific post). Fill those in to complete the condition.
- Drag the AND/OR separator to switch between “all rules must match” and “any rule can match.”

##### Available rule types
- **General contexts** – Everywhere, Archive, Front Page, Search Results, Single.
- **Specific Post** – search for an individual post, page, or custom post entry.
- **Taxonomy checks**
  - **Is Taxonomy Term**: display on taxonomy archive pages (categories, tags, or any registered taxonomy).
  - **Has Taxonomy Term**: display when the current singular post is assigned to the selected term.
- **Post types** – automatically lists every public post type twice: once for all entries of that type, and once for “Single: Post Type Name” views.
- **User state & roles** – User Logged In, User Not Logged In, plus every editable role from your site (Administrator, Customer, Member, etc.).

##### Example setups
- Show a newsletter signup before the blog loop only on `Archive` pages for the “News” category by pairing **Display Location → Before Blog Loop** with a condition: `True + Is Taxonomy Term → Category → News`.
- Hide a promotional banner for logged-in customers by adding `False + User Logged In` so only anonymous visitors see it.

#### Permissions
Assigning **Display Locations** and **Display Conditions** requires the `manage_options` capability by default, so out of the box only administrators can decide where a global section renders (editing the section's content follows the normal post permissions). Developers can change the required capability with the `nectar_global_sections_assign_capability` filter, and restrict or extend the list of hooks a section may attach to with `nectar_global_section_allowed_locations`. Both are documented on the [Filters](/developers/filters) page.

#### Visual Hook System
Nectarblocks provides a visual hook system to help you discover and attach global sections to your website while viewing the frontend. This system allows you to find the exact spot where you want to display your global section and instantly create a new section attached to that hook.

##### Creating an example website footer using a Global Section
In the following video, we'll demonstrate how to use the visual hook system to attach a global section to the footer of a website.

---

## Loops

One of powerful use cases for utilizing Dynamic Data is to loop through a set of data. This can be useful for displaying a list of items, such as posts, pages, or custom post types.

In Nectarblocks, you have two main ways to loop through data and render a list of items with Dynamic Data:

1. Using the `Post Grid` Block
2. Using the `Query Loop` block

### The Post Grid Block

The [Post Grid](../blocks/post-grid) block allows you to display a grid of posts. It’s the easier of the two options, with the layout for all items handled automatically based on the block settings. We recommend this option for most use cases unless you need more control over the layout of the items.

You can select your desired post type to pull from, and choose the content to display in each item via the `Content` tab. This tab acts as a repeater for common attributes and also allows custom fields to be added for additional dynamic data.

#### Creating an Archive Template
The Post Grid block is a powerful way to create Archive Templates for your posts, or custom post types. To learn more about how to create an archive template, please refer to the [Templating](./templating) documentation.

### The Query Loop Block

The `Query Loop` block is a powerful block provided by WordPress that allows you to loop through a set of data and render a list of items. It is a flexible block that can be used to display a list of items from a variety of sources, such as posts, pages, or custom post types.

In Nectarblocks, you can use the `Query Loop` block to loop through a set of data and pull data from any of the Nectarblocks [Data Types](./data-types).

---

## Dynamic Data

## Overview

Nectarblocks includes a dynamic data system that allows you to pull data from your WordPress site. This is useful for pulling data from ACF fields, custom post types, and more.

You can utilize dynamic data in various block controls to create data-driven content that is automatically updated when the data is changed in WordPress.

### Inserting Dynamic Data

Fields that support dynamic data will have a `Dynamic Data` database icon next to the field label. You can click the icon to open the dynamic data modal to select your data source and field to use in the block.

### Next Steps

---

## Theme Builder

:::tip[Nectarblocks Theme Required]
This feature relies on the hooks registered within the Nectarblocks theme. If you are using a different theme, you will not be able to take advantage of this feature.
:::

You can use `Theme Builder` to create templates which will be used to render the content of your Posts and Custom Post Types.

### Archive Templates
in WordPress, Archive templates are used to display multiple related pieces of content together—what’s commonly known as an archive. These layouts power views like blog indexes, product category pages, and tag-based collections. For example, when you visit a blog and see a list of posts, you're looking at an archive page. Archives can be filtered by various criteria you're likely familiar with, such as author, date, category, search results, recent posts, tags, or other taxonomies.

##### Creating an Archive Template

- Create a new template by going to the `Theme Builder` page in the WordPress admin.
- Give the template a name.
- Open the `Template` tab in the right sidebar and select an `Archive` template.

- Add your desired content to populate the Archive template. The [Post Grid](../blocks/post-grid) block is the recommended way to display your posts in an archive context. You can combine static content with a Post Grid block to showcase your posts. Once a Post Grid is added, it will automatically inherit the post type selected for the archive template. As a result, the Query tab won’t be available, but you’ll still have full control over the layout and content of the Post Grid.
- Publish the template.

  An example of an archive template is shown above utilizing the Post Grid block, Taxonomy Terms block, Archive Title block, and Term Description block.

Nectarblocks currently supports creating custom archive templates for the core `Post` post type as well as any custom post types registered on your site.

### Single Templates

Single templates are the layouts used for individual posts—such as a blog article, a project, or a unique entry from a custom post type. They define how a specific piece of content is displayed when viewed on its own. Whether you're showcasing a portfolio item, or a custom post type item, this layout controls its presentation.

##### Creating a Single Template

- Create a new template by going to the `Templates` page in the WordPress admin.
- Give the template a name.
- Open the `Template` tab in the right sidebar and select a `Single` template.

- Add your desired content to populate the Single template. For Single templates, you can use any dynamic [data type](./data-types) to pull content from the post. This allows you to create fully unique layouts with exactly the data you need.

In the editor, you'll see dynamic data fields displayed as placeholders when selecting data from the "Current Post" data type. This is because in the context of a template, the "Current Post" data type is referring to the post that will be displayed when the template is rendered.

"Current Post" dynamic fields are displayed as placeholders in the editor.

When viewing the single post in the frontend, the "Current Post" dynamic fields will render the actual content of the post being viewed.

### Display Conditions

Display conditions determine **where** a template is allowed to render. Every template gets its own condition set, so you can build different layouts for different contexts (e.g. one archive template for the “News” category and another for “Case Studies”).

#### Adding Conditions

  1. Open a Theme Builder template in the editor and switch to the **Template** tab in the document sidebar.
  2. Enable **Display Conditions** if they are not already visible.
  3. Click **Add New Condition** and choose whether the condition should include (`True`) or exclude (`False`) the selected context.
  4. Pick a condition from the dropdown. Additional selectors will appear for options that require extra input, such as picking a taxonomy term.
  5. Repeat for as many conditions as you need. Use the AND/OR toggle between badges to decide whether all rules must pass or just one.

#### Available Condition Types

- **Everywhere** – default catch‑all; applies when no other condition overrides it.
- **Specific Post** – provides a search field so you can choose a single post/page/custom post type entry.
- **Is Taxonomy Term** – matches taxonomy archives (e.g. category, tag, or any public taxonomy). Ideal for archive templates.
- **Has Taxonomy Term** – checks whether the current singular post is assigned to the selected term. Ideal for single templates.
- **User Logged In / Logged Out** – target templates based on login state.
- **Post Type, Post Status, Author, Role**, etc. – mirror the conditional logic available in Global Sections so you can scope templates to almost any context.

> **Tip:** Some template types automatically limit the condition list. For example, archive templates cannot use “Has Taxonomy Term”, while single templates cannot use “Is Taxonomy Term”. This prevents combinations that would never pass.

#### Example Workflows

- **Category-specific archive:** Create two archive templates, each with an “Is Taxonomy Term → Category → News/Reviews” condition so each category gets its own layout.
- **VIP single layout:** Add a “Has Taxonomy Term → Membership Level → VIP” rule to a single template and mark it as `True`, while adding the same rule marked `False` on the default template to keep audiences separated.

---

## Installation

### Downloading and Extracting the Nectarblocks Bundle

You will receive a link to download all the components of Nectarblocks in a bundle via your license email. The bundle is also available for download on the `My Licenses` page of [Nectarblocks Web App](https://app.nectarblocks.com/).
You will need to extract the bundle using a zip file extractor. Inside of the bundle, you will find the following files which can be uploaded individually to your WordPress site:

  1. nectar-blocks.zip: The main Nectarblocks Plugin.
  2. nectar-blocks-theme.zip: The Nectarblocks Theme (optional, but recommended).
  3. nectar-blocks-importer-exporter.zip: Nectarblocks Import/Export Plugin.
  4. `license.md`: The [license file](https://nectarblocks.com/license/) for the Nectarblocks Plugin.
  5. `readme.md`: The readme file for the Nectarblocks Plugin.

    If you receive an error when uploading your .zip file to WordPress, it's likely because you're trying to upload the main `nectarblocks-bundle.zip` file instead of the individual plugin and theme files inside.

### Uploading Plugins

The following applies for uploading the Nectarblocks Plugins (`nectar-blocks.zip` and `nectar-blocks-importer-exporter.zip`) to your WordPress site.
For instructions on installing the Nectarblocks Theme, [click here](../theme/installation).

    1. Access the WordPress Dashboard: Log in to your WordPress admin panel.

    2. Navigate to the Plugins Page: In the left sidebar, click on "Plugins" and then "Add New."

    3. Click on the "Upload Plugin" Button: At the top of the page, click on the "Upload Plugin" button.

    4. Choose the Plugin File: Click "Choose File" to select the Nectarblocks plugin zip file from your computer.

    5. Install the Plugin: Once the file is selected, click "Install Now."

    6. Activate the Plugin: After installation, click "Activate" to enable the plugin.

        1

        2

        3

### FTP Upload (Alternative)

1. Access your hosting space using FTP software such as FileZilla or Transmit.

2. Extract the nectar-blocks.zip file and utilize only the resulting nectar-blocks plugin folder.

3. Upload the nectar-blocks folder to wp-content → plugins directory and allow for the upload process to complete.

4. Activate the recently installed plugin by navigating to Appearance → Plugins and clicking the Activate button.

### First time in the editor

After installation, when you open a page or post in the block editor, Nectarblocks may show a **welcome guide**—a short overlay that highlights the main areas of the editor (e.g. block list, template library, global settings). You can step through it once or dismiss it; you can reopen it later from the Nectarblocks admin panel [Getting Started tab](../plugin-options-panel/getting-started-tab) if you want to see the overview again.

### Video Tutorial

---

## WordPress / Server Requirements

We currently support WordPress 6.5+.

Nectarblocks follows the same server requirements as [WordPress](https://wordpress.org/about/requirements/) itself, with one exception: Nectarblocks requires PHP 8.0 or greater.

+ PHP version 8.0 or greater.
+ MySQL version 5.7 or greater OR MariaDB version 10.4 or greater.
+ HTTPS support

Ask your host to run WordPress
If you’re unsure whether or not your host can already run WordPress, here’s a request you can copy and paste to send them!

:::tip[Server Requirements]
I’m interested in running WordPress web software, and I was wondering if my account supported the following:

+ PHP 8.0 or greater
+ MySQL 5.7 or greater OR MariaDB 10.4 or greater
+ Nginx or Apache with mod_rewrite module
+ HTTPS support

Thanks!
:::

---

## Colors

Nectarblocks provides a global color system that allows you to share a color palette and a list of color selections across your Wordpress website.

1. **Consistency**: By defining a set of global colors, you can maintain a consistent color palette across various elements of their website, such as headings, text, buttons, and backgrounds.

2. **Efficiency**: Changing a global color updates all instances across the entire site. This can save time and effort, especially on larger websites with multiple pages and sections.

3. **Ease of Customization**: Experiment with different color schemes and adapt your website's appearance without manually updating each element individually.

    ### Global Color Palette

    The Global Color Palette provides a visualization of your current color scheme. It's made up of the currently selected **Core** colors from the **Solids** section.

    Nectarblocks also provides **Palette Presets** which can be used to quickly change the color scheme of your website. These presets will update the current core global colors, which will then update any blocks which are using those colors.

    ### Solids

      Solid cores are single colors which can be used for text, backgrounds, and borders. When editing a solid color, you'll be presented with a color picker to select the color you want.

    ### Gradients

      Gradient colors are made up of two or more colors which are blended together. When editing a gradient color, you'll be presented with a special color picker to create your gradient visually. Not as many block settings will be able to utilize gradients, but they can be used for backgrounds.

    ### Color Types
    1. **Core**
      These are colors which are provided by Nectarblocks. They will be updated when changing a preset from the Global Color Palette and cannot be deleted. You can still edit the colors to your liking.

        Since the **[Template Library](../template-library)** makes use of the currently selected **Core** colors, it's advantageous to utilize these for your main scheme and use the custom colors for any additional colors which may be needed.

    2. **Custom**
      These are colors which you have added. You can add as many as needed and name them whatever you want for ease of use. They will not be updated when changing a preset from the Global Color Palette and can be deleted freely.

#### Automatic Tonal Variants

When you edit a **Core** solid color, Nectarblocks automatically generates a set of tints and shades derived from it. These tonal variants are calculated in a perceptually-uniform color space, so the lighter and darker steps look balanced regardless of hue — giving you a coordinated range of a single color (for hover states, subtle backgrounds, borders and the like) without having to pick each one by hand.

#### Saving & Managing Palettes

In addition to the built-in **Nectarblocks** palette presets, you can save your own. In the **Palette Presets** area, switch to the **Saved** tab and click **Save Current** to store a snapshot of your current core colors and gradients under a name of your choosing. Click a saved palette to re-apply it across your site, or use its menu to rename, delete or reorder it. Unlike the built-in presets, saved palettes are your own creations and persist independently.

#### Organizing & Editing Colors

Managing a large palette is quick with a few editing conveniences:

- **Drag to reorder** Rearrange your colors (and gradients) by dragging them into the order you prefer.
- **Bulk delete** Hold **Shift** and click to select multiple colors, then delete them all at once.
- **Color clipboard** Copy a color value and paste it when creating or editing another color or gradient, so you can reuse exact values without re-entering them.

#### Utilizing Global Colors

All **[Nectar blocks](../blocks/overview)** have the ability to make use of Global Colors. When editing a block, you'll see a **"Nectar Global Colors"** section in any color field, under the color picker. This section will allow you to select a color from the Global Color Palette. 

In the above video, we edit the global color assigned to a **[Row Block](../blocks/row)** background. We then change the color of the global color by cycling through some presets, which updates the background color of the Row block.

#### Deletion of Global Colors

When you delete a **Custom** Global Color, you will have the option to set the value for that color to permanently point to another Solid/Gradient that is part of the **Core** Global Color Palette.

Deletion of a Global Color will affect every page that had that color selected. If you do not set a replacement color, the color will be removed from the page and will need to be re-selected.

---

## Global Settings

### Overview

The Nectar Global Settings panel enables you to define options that seamlessly propagate across all blocks on your site, ensuring a harmonious and consistent design experience. Effortlessly maintain uniformity throughout your website all from one convenient location, directly inside the editor.

### Accessing the Global Settings

To access the Global Settings panel, click the Nectarblocks logo, located in top right of the editor toolbar.

### Types of Global Settings

---

## theme.json Presets

WordPress themes can define **presets** in their `theme.json` — a curated spacing scale, a set of font sizes, and font families. Nectarblocks surfaces those presets directly inside its block controls, so the values you pick in a block stay in lock-step with the active theme's design tokens. Presets are read from both the theme's static `theme.json` and any custom presets added through the WordPress **Styles** interface.

### Where presets appear

| theme.json preset | Where it shows up in Nectarblocks |
| --- | --- |
| `spacing.spacingSizes` | A row of preset buttons in the **[Spacing](../block-controls/spacing-control)** popover for each margin/padding side. |
| `typography.fontSizes` | A row of preset buttons in the **Font Settings** popover (the **[Font Size](../block-controls/font-size-control)** control). |
| `typography.fontFamilies` | A dedicated **Theme Fonts** section in the **[Typography](../block-controls/typography-control)** font selector, listed below Core Fonts and your Custom Fonts. |

When a control has presets available, choosing one stores the preset (not a raw value), so the block automatically follows any later change to that preset in the theme.

### Defining presets

Add the presets to your theme's `theme.json` (or a child theme's). For example:

```json
{
  "version": 3,
  "settings": {
    "spacing": {
      "spacingSizes": [
        { "slug": "small", "name": "Small", "size": "1rem" },
        { "slug": "medium", "name": "Medium", "size": "2rem" },
        { "slug": "large", "name": "Large", "size": "4rem" }
      ]
    },
    "typography": {
      "fontSizes": [
        { "slug": "body", "name": "Body", "size": "1rem" },
        { "slug": "heading", "name": "Heading", "size": "2.5rem" }
      ],
      "fontFamilies": [
        { "slug": "sans", "name": "Sans", "fontFamily": "Inter, sans-serif" }
      ]
    }
  }
}
```

Reload the editor and the presets appear automatically in the controls above — there's nothing to enable in Nectarblocks.

### Good to know

- **Selecting a preset locks the manual input.** When a spacing or font-size preset is active, the manual value field for that control is disabled so the preset can't be accidentally overwritten — switch back to a manual value by deselecting the preset.
- **Spacing presets replace the quick buttons.** When spacing presets exist, the preset row takes the place of the built-in common-spacing buttons (5px, 10px, …); only one of the two is shown at a time.
- **Theme vs. custom presets.** Presets defined in `theme.json` ("theme") and presets you add through the WordPress **Styles** UI ("custom") are listed together, theme presets first.

theme.json presets come from the **theme** and are ideal for block-theme / Full Site Editing setups. They are separate from Nectarblocks' own **[Global Colors](./colors)** and **[Global Typography](./typography)**, which are managed in the Nectarblocks admin and apply regardless of theme. You can use either or both.

---

## Typography

Nectarblocks provides a global typography system that allows you to share a set of font rules throughout your WordPress website.

1. **Consistency**: Define global font rules to ensure a harmonious and consistent visual identity across different elements of your website.

2. **Efficiency**: Modify a global font rule, and the update seamlessly propagates across the entire site. This efficiency proves invaluable, particularly for expansive websites with numerous pages and sections.

3. **Ease of Customization**: Effortlessly experiment with different fonts, refining your website's aesthetic without the need to manually update each individual element.

    ### Font Rule Types
    1. **Core**
      These are fonts which are provided by Nectarblocks and cannot be deleted. They cover all the common HTML elements.
    2. **Custom**
      These are font rules which you have added. You can add as many as needed and name them whatever you want for ease of use. Any rule in this list can be deleted freely.

    ### Font Rule Properties
    When you click on any font rule, you'll get a popover with the following properties you can configure:

#### Fluid & Responsive Sizing

Global font rules don't have to be a single fixed size — they can scale with the viewport and adapt per device.

- **Min / Max** Each font rule's size accepts an optional **Min** and **Max** value. Nectarblocks outputs a CSS `clamp()` so the text scales between those bounds and never becomes too small on phones or oversized on large screens.
- **Fluid root scaling** The **Root (HTML)** font rule offers a **Base** size (px or rem) plus a **Scale** value (in `vw`) — for example a base of `16px` with a `0.5vw` scale. Because most sizes are defined relative to the root, scaling the root fluidly scales your whole site's typography in proportion as the screen size changes.
- **Per device** Size, scale, min and max can each be set separately for **desktop**, **tablet** and **mobile**.

#### Organizing & Editing Font Rules

- **Drag to reorder** Rearrange your custom font rules by dragging them into the order you prefer.
- **Bulk delete** Hold **Shift** and click to select multiple font rules, then delete them all at once.

#### Utilizing Global Font Rules
Any **[Nectar blocks](../blocks/overview)** which involve editing text will have the ability to make use of Global Font Rules. When editing a block, you'll see a field labeled **"Font Style"**. This option will allow you to select a font rule from the Global Typography. 

In the above video, we edit the font rule assigned to a **[Text Block](../blocks/text)**. We then change the font rule within the Global Settings to show the text block being updated from the new rule. Finally, we create a custom Font Rule and assign it to the block.

#### Deletion of Font Rules

When you delete a **Custom** Global Font Rule, you will have the option to set the value for that rule to permanently point to another font rule that is part of the **Core** Global Font Rules.

Deletion of a Global Font Rule will affect every page that had that has elements with that rule selected.

---

## Building a Megamenu

A megamenu is a **[Global Section](../dynamic-data/global-sections.mdx)** that opens from a menu item. You design the panel once as a Global Section, then a **[Megamenu](../blocks/megamenu.mdx)** block inside your **[Navigation](../blocks/navigation.mdx)** displays it and sets how wide it opens.

This guide uses the **Resources** menu from the nectarblocks.com header as the example.

You need a Header Navigation template before you start. The **[Header Builder](./overview.mdx)** guide covers creating one in the Theme Builder.

The **Enable Mega Menu** option in Appearance → Menus belongs to the classic theme header (see **[Menu Options](../theme/menu-options.mdx)**). It has no effect on a Header Navigation template, which uses the Megamenu block instead.

### 1. Create the Global Section

1. In the WordPress admin, go to **Global Sections** and click **Add New**.
2. Give it a name you will recognize later, such as `Resources Megamenu`. You pick the section by this name in the Megamenu block.
3. Leave **Display Locations** and **Display Conditions** empty. The Megamenu block decides where the section appears. A display location would also print the section at that hook across your site.
4. Build the panel with any blocks you like.
5. **Publish** the section. The Megamenu block only lists published sections.

The Resources panel is a single Row and Column. The Column wraps its items into rows, and each of the six items is a linked Flex Box holding a title and a short description.

The section editor shows your content at the editor's full width. Most megamenus open narrower than that (see [step 4](#4-set-the-size)), so check the layout on the front end as you go.

### 2. Add a Megamenu block to your menu

1. In the **[Theme Builder](../theme-builder.mdx)**, open your Header Navigation template.
2. Add a link called **Resources** to the Navigation block, then click **Add submenu** in that link's block toolbar so it can hold other blocks.
3. Insert a **Megamenu** block inside the Resources submenu.

You can also insert the Megamenu block straight into the Navigation block. It wraps itself in a new submenu called **Menu Item**. Rename that item to **Resources**.

### 3. Choose the Global Section

    Select the Megamenu block and open **Megamenu Settings** in the sidebar:

    1. Set **Source** to `Global Section`.
    2. Type `Resources` in the search field and pick **Resources Megamenu** from the list.

    The panel now shows the selected section with two buttons. **Edit** opens the section in a new tab, and **Change** clears the selection so you can pick another.

    Changes you make to the section show up in the megamenu as soon as you update the section. You don't need to re-save the header template, though a page caching plugin may keep serving the old version until you clear its cache.

    **Source** can also be set to `Pattern` to use a synced pattern instead of a Global Section.

### 4. Set the size

**Size** in Megamenu Settings decides how wide the panel opens and what it lines up with. The screenshots below show the same Resources section at each size, under a header that has scrolled into a floating bar.

#### Full Width

The panel spans the whole browser window and opens below the menu item. Use it for large panels, such as several columns of links with images. The section's content stretches with the window, so set a **Max Width** on its Row or Column if it shouldn't fill a very wide screen.

#### Header Width

The panel matches the width of the header bar the menu sits in and opens directly below it, so its edges line up with the bar. This suits floating or inset headers like the one shown. When the header bar spans the window, Header Width looks the same as Full Width. Outside a recognized header (a Nectarblocks header template, or a theme header using a `header` element or banner role), it falls back to the window width.

#### Contained

The panel has a fixed **Width**, set in `px` or `vw`. It centers under its menu item and shifts sideways if it would run past the edge of the window. Use `vw` if the panel should grow and shrink with the window.

The Resources megamenu uses `Contained` at `800px`, which is plenty for six short links. Every size recalculates its position when the window is resized.

The frame around the panel (background, padding, border and rounded corners) and the opening animation come from the Navigation block's **[Dropdowns](../blocks/navigation.mdx#dropdowns)** tab. They are shared by every dropdown in that menu, so style them there rather than in the section.

### 5. Add links for the mobile menu

The overlay menu doesn't show megamenus. It lists the regular links in the same submenu instead. Which screen sizes use the overlay is set under **Display** in the Navigation block's **Overlay** tab, and only phones do by default. Add **Navigation Link** blocks next to the Megamenu block inside the Resources submenu, one for each page you want in the mobile menu.

On desktop the megamenu takes the place of these links. In the overlay menu, tapping **Resources** opens a pane that lists them. The two don't have to match. The nectarblocks.com header adds a **Contact** link that only appears on mobile.

These links only appear while the Overlay tab's **Menu Source** is left at **Inherit**, which reuses the desktop menu. If it points at a different menu, the overlay shows that menu instead. If you've built an **[Off Canvas Menu](./off-canvas-menu.mdx)** template in the Theme Builder, that template replaces the overlay's contents entirely. See **[Navigation](../blocks/navigation.mdx#overlay)**.

### 6. Save and test

Save the Header Navigation template, then check the front end:

- Hover **Resources**. The panel opens at the size you chose and stays open while the pointer moves into it.
- Resize the window. A Contained panel stays under its menu item, and a Header Width panel follows the header bar.
- Narrow the window to a size that uses the overlay menu (phone width by default), open it and tap **Resources**. The links from step 5 appear.

Repeat these steps for each menu item that needs a panel. Every Megamenu block points at its own Global Section and has its own size.

### Related

- **[Megamenu](../blocks/megamenu.mdx)**: every Megamenu block setting.
- **[Navigation](../blocks/navigation.mdx)**: Menu Items, Overlay Menu and Dropdowns controls.
- **[Global Sections](../dynamic-data/global-sections.mdx)**: managing sections and their display rules.
- **[Header States](./header-states.mdx)**: restyle the header when it is transparent or scrolled.

---

## Header States

Inside a **[Header Navigation](./overview.mdx)** template, one set of blocks can look different in each **header state**. The header restyles itself as the visitor scrolls or opens the menu, without duplicating any blocks. You edit the header once, give each state the styling you want, and Nectarblocks switches between them on the front end.

### The states

- **Default**: the baseline appearance, used whenever no other state applies.
- **Transparent**: the header sitting over the top of the page, typically over a hero, before the visitor scrolls.
- **Scrolled**: the appearance once the visitor scrolls down from the top of the page.
- **Overlay Menu**: the appearance while a fullscreen off canvas menu is open.

You can also create your own **[color variants](#color-variants)**, which the header switches to while particular sections of a page are behind it.

### When each state applies

**Transparent** only applies on pages that use a transparent header. Two settings control that:

1. Turn on **Transparent Header** in **Appearance → Customize → Header Navigation → Transparent Header Effect**. This is the master switch. While it's off, no page gets a transparent header.
2. Choose where it applies. **Automatically Enable On**, in the same Customizer section, turns it on for whole post types and archives. For a single page, turn on **Transparent Header** under **Nectarblocks Post Options** in the page's sidebar.

    On pages without a transparent header, the theme reserves the header's height at the top of the page, so content starts below the header. On transparent pages, the header sits over the content instead.

    **Scrolled** takes over as soon as the visitor scrolls down from the top, on every page. Scrolling back to the top returns the header to Default or Transparent.

    **Overlay Menu** applies while the off canvas menu is open, when its **Style** (Appearance → Customize → Header Navigation → Header Off Canvas Menu) is one of the fullscreen options. With **Slide Out From Side**, the panel slides in over the page and the header keeps its current state. See **[Off Canvas Menu](./off-canvas-menu.mdx)**.

    The same **Nectarblocks Post Options** panel has a **Header Animation** option, which plays an entrance effect on the header when that page loads.

### Editing a state

    The **Header State** picker sits in the editor toolbar next to the device buttons.

    1. Open the picker and choose a **Lifecycle state**, for example **Scrolled**.
    2. The canvas shows the header in that state, so you see your changes as if it were active.
    3. Change any state-aware control. The value applies **only to that state** and overrides the Default value there.
    4. Switch back to **Default** to edit the baseline, or pick another state to style it.

    To undo a single override, click the reset icon next to the control's label. To clear everything you've set for the current state, click **Reset** next to the picker.

    **Editor canvas** sets the background shown behind the header while you edit that state (Light, Dark or a custom Color). It only affects the editor, so you can design a transparent header against a dark hero, for example. Transparent starts on Dark.

    While a state other than Default is selected, the labels of state-aware controls change color:

    - **Green**: the control can be set for this state and currently uses the Default value.
    - **Purple with a reset icon**: the control has its own value in this state.

    Labels that stay black can't change per state.

Unlike the responsive **[waterfall](../responsive-editing/waterfall-system)**, where desktop values flow down to tablet and mobile, a state value is either set or not. When it's set, it applies in that state and overrides the Default value. There is no inheritance between states.

### State-aware controls

These controls can be set per state:

- **Colors**: background, text and icon colors, the Navigation block's dropdown colors, and the Search block's colors
- **Spacing** (padding and margin)
- **Border** and **Border Radius**
- **Size**
- **Display**
- **Effects** and **Transform**

Everything else, including Position, Overflow, font styles and sizes, images, and the Navigation block's Overlay tab, is shared by all states.

That's enough to change the header's layout between states: shrink the padding on scroll, hide a row, or flip to light colors while transparent over a dark hero.

### Transition

    The **Transition** panel in the template's sidebar (the **Template** tab) controls how the header animates between states and variants:

    - **Duration**: `0.05` to `1.5` seconds. The default is `0.55`.
    - **Easing**: the curve the change follows.

### Color variants

Color variants are named header looks, such as "Dark" or "Cream", that the header switches to while a tagged section of the page is behind it. A light page with one dark section can flip the header to light text only while that section passes under it.

A variant can change the same controls as a state, not only colors.

#### Creating and styling a variant

1. Open the **Header State** picker and click **Add Variant** under **Variant**. Give it a name.
2. Select the variant in the picker and style the header the same way you style a state. You can also choose a lifecycle state at the same time, for example to style how the variant looks once scrolled.
3. Use the variant's menu in the picker to rename or delete it, and drag variants to reorder them. Deleting a variant removes its values from the header.

#### Tagging a section

    In the page editor, select a top-level **Row** and open its **Header Appearance** panel. Set **Variant** to the look the header should use while that section is behind it.

    The panel only appears with the Nectarblocks theme, once your header has at least one variant, and on Rows that aren't nested inside another Row.

On the front end, the header uses the variant of whichever tagged section sits under its bottom edge, and goes back to normal over untagged sections. If the first tagged section is visible when the page loads, its variant applies right away. While the overlay menu is open, the Overlay Menu state takes priority.

### Recipes

#### Show a different logo in a state

The Image block can't change its image per state, so use two logos and show one at a time. A common case is a light logo while the header is transparent over a dark hero.

1. Wrap each logo's **Image** block in its own **Flex Box**, side by side where the logo sits.
2. Select the Flex Box holding the light logo and set **Display** to **None** in the Default state.
3. Switch to the **Transparent** state. On the light logo's Flex Box, set **Display** to **Flex**. On the dark logo's Flex Box, set **Display** to **None**.

Repeat step 3 in any other state that should use the light logo, such as Overlay Menu.

#### Hide a top bar once the header scrolls

1. Add a **Row** above your menu row and put the top bar's content in it.
2. Switch to the **Scrolled** state, select the new Row and set **Display** to **None**.
3. Still in Scrolled, switch the editor to **Tablet** and set **Display** to **None** again. Rows keep their own tablet display setting, so without this step the bar stays visible on tablets and phones after scrolling.

The bar disappears as soon as the page scrolls, and the menu row stays at the top.

#### Change a button once the header scrolls

Select the button, switch to the **Scrolled** state and change its background and text colors. The button keeps its Default colors at the top of the page and switches when the visitor scrolls.

### Related

- **[Header Builder](./overview.mdx)**: create and manage the Header Navigation template.
- **[Off Canvas Menu](./off-canvas-menu.mdx)**: build the panel the header's menu button opens.
- **[Transparent Header Effect](../theme/customizer-options/layout/transparent-header-effect.mdx)**: the Customizer settings that turn on the Transparent state.
- **[Hover Mode](../responsive-editing/hover-mode)**: the other place stateful editing appears, for hover styling outside the header.

---

## Off Canvas Menu

The **Off Canvas Menu** template sets what's inside the panel that opens from your header's menu button. Instead of a plain list of menu links, you design the panel with blocks: large links, social buttons, contact details, images or anything else. It works with a **[Header Navigation](./overview.mdx)** template and with the classic theme header.

### Create the template

    1. In the WordPress admin, open **Theme Builder** and click **Add New Template**.
    2. Under **Navigation**, choose **Off Canvas Menu** and click **Create Template**.
    3. The template opens with a starter layout: a menu label, four large links, social buttons and a contact line. Edit it or replace it with your own blocks.
    4. **Publish** the template. New templates start as drafts, and the panel only uses published templates.

To start over, click **Reset** next to the template type under **Template Options** in the sidebar. For other starting points, the **[Template Library](../template-library.mdx)** has an Off-Canvas Menu category and opens to it while you edit this template.

#### Display conditions

Like other templates, an Off Canvas Menu can have display conditions. Every published Off Canvas Menu template whose conditions match the page is shown, one below the other, so keep their conditions from overlapping. Pages that no template matches show the regular menu in the panel.

### Open the panel

#### From the header's menu button

    In your Header Navigation template, select the Navigation block and open its **Overlay** tab. **Display** sets which screen sizes show the menu button instead of the links:

    - **Desktop**: 1025px and wider
    - **Tablet**: 768px to 1024px
    - **Mobile**: 767px and narrower

    Only Mobile is selected by default. Turn on Desktop and Tablet to use the button at those sizes too.

    Once a published Off Canvas Menu template exists, **Menu Source** on this tab becomes an **Edit Off Canvas Menu template** link, because the template now decides what the panel shows.

If the menu button does nothing, check that the header's Navigation block has at least one link. The panel is only added to the page when it does, even if those links are hidden behind the button at every size.

#### From any button or link

    Add the class `nectar-ocm-trigger-open` to a Button block under **Advanced → Additional CSS class(es)**. Clicking that button opens the panel at any screen size. For a classic menu item in **Appearance → Menus**, use the item's **CSS Classes** field, which you can switch on under **Screen Options** if it's hidden.

    The **Slide Out From Side Hover Triggered** style is the exception. It only opens from the header's own menu button.

#### Closing the panel

The panel closes when the visitor clicks its close button or the menu button again, or presses Esc on a desktop browser. With Slide Out From Side, clicking the page behind the panel closes it too.

The fullscreen styles hide the panel's own close button and turn the header's menu button into a close button instead. If you open a fullscreen panel from your own button, keep the header's menu button visible at that screen size so visitors can close it.

### What the template replaces

The template replaces everything inside the panel:

- The menu links, including whatever the Navigation block's Menu Source pointed at.
- The submenu links a **[megamenu](./building-a-megamenu.mdx)** falls back to on mobile.
- The panel's widget area and bottom text.
- Global Sections assigned to **Before Off Canvas Menu Items**, **After Off Canvas Menu Items** and **Off Canvas Menu Meta Area**.

To put a menu inside the template, use Button blocks like the starter layout does, or the regular WordPress **Navigation** block rather than Nectar Navigation. Set its **Layout → Orientation** to **Vertical** and its **Overlay Visibility** to **Off**, so it stays a plain list instead of collapsing into another menu button on phones.

### Style the panel

    The panel itself is styled in **Appearance → Customize → Header Navigation → Header Off Canvas Menu**. With a Header Navigation template active, this section keeps the settings that still apply:

    - **Style**: Slide Out From Side, Slide Out From Side Hover Triggered, Fullscreen Cover Slide + Blur BG, Fullscreen Cover Fade or Fullscreen Cover Split. This also sets the opening animation.
    - **Desktop Width (%)**: how wide the panel is with Slide Out From Side.
    - **Offset**: a gap between the panel and the edges of the screen.
    - **Roundness**: the panel's corner radius.
    - **Icon Width**: the size of the menu button's icon.
    - **Overlay Strength**: how much the page behind the panel is darkened.
    - **Blur Background**: a backdrop blur on the panel's background.

    The panel's background and close button colors are in **Header Navigation → Header Color Scheme** (**Off Canvas Navigation BG**, **Off Canvas Navigation Close BG** and **Off Canvas Navigation Close**). That section appears once a published Off Canvas Menu template exists. The **BG Color**, **Close BG** and **Close Icon** settings on the Navigation block's Overlay tab override them.

    Everything else is styled on the template's own blocks. Animations on those blocks replay each time the panel opens.

    With the fullscreen styles, the header switches to its **Overlay Menu** state while the panel is open, so you can restyle the header for it. See **[Header States](./header-states.mdx)**.

### Tall menus

If the template is taller than the screen, use **Slide Out From Side** or **Fullscreen Cover Split**. Both scroll at every screen size.

### Related

- **[Header Builder](./overview.mdx)**: create and manage the Header Navigation template.
- **[Header States](./header-states.mdx)**: restyle the header while the panel is open.
- **[Navigation](../blocks/navigation.mdx#overlay)**: the Overlay tab's settings.
- **[Theme Builder](../theme-builder.mdx)**: template types and display conditions.

---

## Header Builder

The Header Builder is the experience of editing a **Header Navigation** template in the **[Theme Builder](./theme-builder)**. Instead of a fixed set of header options, you assemble your header from blocks — giving you full control over its layout, content and styling, including how it looks before and after scrolling.

### Replacing the classic header

When a Header Navigation template is assigned in the Theme Builder, it completely replaces the classic theme header. The header is now built entirely with blocks, and the classic navigation no longer renders.

The Theme Customizer reflects this. Its header sections show a **"Header Builder Active"** notice and only list the settings that still apply (see [What the Customizer still controls](#what-the-customizer-still-controls)). Everything else about the header is edited in the block editor.

To bring the classic navigation back, delete the Header Navigation template or unassign it from the header navigation location in the Theme Builder. The classic header returns with the full set of Customizer options. Nothing is lost, so you can switch between the two at any time.

A Header Navigation template can also be limited to certain pages with display conditions. Pages it doesn't match keep the classic header. See **[Display conditions](../theme-builder.mdx#display-conditions)**.

#### What the Customizer still controls

    With a Header Navigation template active, these settings in **Appearance → Customize → Header Navigation** still apply:

    - **Logo & General Styling**: **Remove Desktop Stickiness**, which lets the header scroll away with the page on desktop instead of staying at the top.
    - **Transparent Header Effect**: **Transparent Header** and **Automatically Enable On**, which turn on the header's Transparent state. See **[Header States](./header-states.mdx#when-each-state-applies)**.
    - **Animation Effects**: **Header Hide Until Needed**, which hides the header as the visitor scrolls down and brings it back when they scroll up.
    - **Dropdowns**: **Add Background Overlay** and **Background Blur**, which dim and blur the page while a dropdown or megamenu is open.
    - **Header Off Canvas Menu**: the style and size of the panel the menu button opens. See **[Off Canvas Menu](./off-canvas-menu.mdx#style-the-panel)**.
    - **Mobile Menu**: **Header Sticky On Mobile**, on by default, which keeps the header at the top of the screen on mobile.
    - **Header Color Scheme**: the off canvas panel's colors. This section only appears once a published Off Canvas Menu template exists.

    The other header settings, such as logos, the secondary header bar, header search and the mobile breakpoint, belong to the classic header. With the Header Builder you build those parts in the template instead.

#### Screen sizes

The Header Builder uses fixed breakpoints, and the classic **Header Mobile Breakpoint** setting doesn't apply:

- **Desktop**: 1025px and wider
- **Tablet**: 768px to 1024px
- **Mobile**: 767px and narrower

The Navigation block's **Overlay** tab decides at which of these sizes the menu button replaces the links. Only Mobile uses it by default. See **[Navigation](../blocks/navigation.mdx#overlay)**.

### Creating a Header Navigation template

Start from the **[Theme Builder](./theme-builder)**:

1. In the WordPress admin, open **Theme Builder**.
2. Click **Add New Template** to open the template chooser.
3. Under the **Navigation** group, choose **Header Navigation**.
4. Click **Create Template**.

The template opens in the block editor pre-populated with a working default header, so you have a starting point rather than a blank canvas.

Prefer to start from a design? The **[Template Library](./template-library)** includes a **Navigation** category with example header layouts you can insert and then adjust to your brand.

### Composing the header

Assemble the header from the header blocks:

- **[Navigation](./blocks/navigation)** — your menu, wrapping the core WordPress Navigation block. Add **[Megamenu](./blocks/megamenu)** blocks inside menu items for rich dropdowns.
- **[Header Actions](./blocks/header-actions)** — a container for your action icons: **[Search](./blocks/search)**, a Header Account link, and the WooCommerce Mini Cart.

Standard layout blocks (Row, Column, Flex Box, Image for your logo, etc.) arrange everything.

To turn a Global Section into a megamenu and choose how wide it opens, see **[Building a Megamenu](./building-a-megamenu.mdx)**.

### Header states

A header often needs to look different depending on what the visitor is doing — sitting transparent over a hero, condensing once the page scrolls, or restyling while an overlay menu is open. The Header Builder handles this with four built-in **states** — **Default**, **Transparent**, **Scrolled** and **Overlay Menu** — plus your own named **color variants**. You style each state once from the same blocks, and the header transitions between them automatically on the front end.

See **[Header States](./header-states.mdx)** for the full editing workflow: the Header State picker, which controls can be overridden per state, and how color variants work.

To design the panel that opens from the header's menu button, see **[Off Canvas Menu](./off-canvas-menu.mdx)**.

### Related

- **[Theme Builder](./theme-builder)** — create and manage the Header Navigation template.
- Header blocks: **[Navigation](./blocks/navigation)**, **[Megamenu](./blocks/megamenu)**, **[Header Actions](./blocks/header-actions)**, **[Search](./blocks/search)**.

---

## Overview (Docs)

Nectarblocks

    Comprehensive documentation for Nectarblocks. The ultimate solution for transforming WordPress into a **robust website builder**.

              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3.33946 17.0002C2.90721 16.2515 2.58277 15.4702 2.36133 14.6741C3.3338 14.1779 3.99972 13.1668 3.99972 12.0002C3.99972 10.8345 3.3348 9.824 2.36353 9.32741C2.81025 7.71651 3.65857 6.21627 4.86474 4.99001C5.7807 5.58416 6.98935 5.65534 7.99972 5.072C9.01009 4.48866 9.55277 3.40635 9.4962 2.31604C11.1613 1.8846 12.8847 1.90004 14.5031 2.31862C14.4475 3.40806 14.9901 4.48912 15.9997 5.072C17.0101 5.65532 18.2187 5.58416 19.1346 4.99007C19.7133 5.57986 20.2277 6.25151 20.66 7.00021C21.0922 7.7489 21.4167 8.53025 21.6381 9.32628C20.6656 9.82247 19.9997 10.8336 19.9997 12.0002C19.9997 13.166 20.6646 14.1764 21.6359 14.673C21.1892 16.2839 20.3409 17.7841 19.1347 19.0104C18.2187 18.4163 17.0101 18.3451 15.9997 18.9284C14.9893 19.5117 14.4467 20.5941 14.5032 21.6844C12.8382 22.1158 11.1148 22.1004 9.49633 21.6818C9.55191 20.5923 9.00929 19.5113 7.99972 18.9284C6.98938 18.3451 5.78079 18.4162 4.86484 19.0103C4.28617 18.4205 3.77172 17.7489 3.33946 17.0002ZM8.99972 17.1964C10.0911 17.8265 10.8749 18.8227 11.2503 19.9659C11.7486 20.0133 12.2502 20.014 12.7486 19.9675C13.1238 18.8237 13.9078 17.8268 14.9997 17.1964C16.0916 16.5659 17.347 16.3855 18.5252 16.6324C18.8146 16.224 19.0648 15.7892 19.2729 15.334C18.4706 14.4373 17.9997 13.2604 17.9997 12.0002C17.9997 10.74 18.4706 9.5632 19.2729 8.6665C19.1688 8.4405 19.0538 8.21822 18.9279 8.00021C18.802 7.78219 18.667 7.57148 18.5233 7.36842C17.3457 7.61476 16.0911 7.43414 14.9997 6.80405C13.9083 6.17395 13.1246 5.17768 12.7491 4.03455C12.2509 3.98714 11.7492 3.98646 11.2509 4.03292C10.8756 5.17671 10.0916 6.17364 8.99972 6.80405C7.9078 7.43447 6.65245 7.61494 5.47428 7.36803C5.18485 7.77641 4.93463 8.21117 4.72656 8.66637C5.52881 9.56311 5.99972 10.74 5.99972 12.0002C5.99972 13.2604 5.52883 14.4372 4.72656 15.3339C4.83067 15.5599 4.94564 15.7822 5.07152 16.0002C5.19739 16.2182 5.3324 16.4289 5.47612 16.632C6.65377 16.3857 7.90838 16.5663 8.99972 17.1964ZM11.9997 15.0002C10.3429 15.0002 8.99972 13.6571 8.99972 12.0002C8.99972 10.3434 10.3429 9.00021 11.9997 9.00021C13.6566 9.00021 14.9997 10.3434 14.9997 12.0002C14.9997 13.6571 13.6566 15.0002 11.9997 15.0002ZM11.9997 13.0002C12.552 13.0002 12.9997 12.5525 12.9997 12.0002C12.9997 11.4479 12.552 11.0002 11.9997 11.0002C11.4474 11.0002 10.9997 11.4479 10.9997 12.0002C10.9997 12.5525 11.4474 13.0002 11.9997 13.0002Z" fill="currentColor"></path></svg>

                Global Settings

              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 3C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H21ZM11 13H4V19H11V13ZM20 13H13V19H20V13ZM11 5H4V11H11V5ZM20 5H13V11H20V5Z" fill="currentColor"></path></svg>

                Template Library

              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 8H21C21.5523 8 22 8.44772 22 9V21C22 21.5523 21.5523 22 21 22H13C12.4477 22 12 21.5523 12 21V20H4C3.44772 20 3 19.5523 3 19V3C3 2.44772 3.44772 2 4 2H18C18.5523 2 19 2.44772 19 3V8ZM17 8V4H5V18H12V9C12 8.44772 12.4477 8 13 8H17ZM14 10V20H20V10H14Z" fill="currentColor"></path></svg>

                Responsive Editing

              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 8V20H19V8H5ZM5 6H19V4H5V6ZM20 22H4C3.44772 22 3 21.5523 3 21V3C3 2.44772 3.44772 2 4 2H20C20.5523 2 21 2.44772 21 3V21C21 21.5523 20.5523 22 20 22ZM7 10H11V14H7V10ZM7 16H17V18H7V16ZM13 11H17V13H13V11Z" fill="currentColor"></path></svg>

                Animation System

              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 8V20H19V8H5ZM5 6H19V4H5V6ZM20 22H4C3.44772 22 3 21.5523 3 21V3C3 2.44772 3.44772 2 4 2H20C20.5523 2 21 2.44772 21 3V21C21 21.5523 20.5523 22 20 22ZM7 10H11V14H7V10ZM7 16H17V18H7V16ZM13 11H17V13H13V11Z" fill="currentColor"></path></svg>

                Block Collection

              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.9999 2.07611L12.4551 2.30879C14.2208 3.21143 15.7328 4.53809 16.8573 6.15473C17.7852 5.71402 18.7788 5.38872 19.8193 5.19758L21 4.98071V12.9998C21 17.9703 16.9706 22 12 22C7.02944 22 3 17.9705 3 13V4.98071L4.18066 5.19758C5.22115 5.38871 6.2147 5.71398 7.14253 6.15465C8.26706 4.53805 9.77902 3.21141 11.5447 2.30879L11.9999 2.07611ZM8.87757 7.16504C10.1073 8.02646 11.1679 9.11266 12 10.3644C12.8322 9.11272 13.893 8.02642 15.1223 7.16515C14.2952 6.01594 13.2302 5.04923 11.9999 4.33741C10.7697 5.0492 9.70468 6.01587 8.87757 7.16504ZM10.8993 12.4338C10.0182 10.7202 8.65593 9.2932 6.99112 8.33225C6.3667 7.97183 5.6999 7.67707 5 7.45728V13C5 16.2899 7.26961 19.0497 10.3285 19.7992C10.1137 18.9004 10 17.9629 10 16.9998C10 15.383 10.3198 13.8411 10.8993 12.4338ZM12.4531 19.9855C16.1079 19.752 19 16.7136 19 12.9998V7.45728C18.3 7.67709 17.6332 7.97187 17.0088 8.33233C14.0127 10.0617 12 13.2963 12 16.9998C12 18.041 12.1588 19.0436 12.4531 19.9855Z" fill="currentColor"></path></svg>

                Included Theme

---

## Custom Global Code

In the Nectarblocks Admin Panel you can set values for CSS and HTML/JS that will be displayed on each page of your pages. HTML/JS can be specified in two places, the head and after the body.

### HTML/JS Head vs Body

In an HTML document, the `<body>` tag defines the main content of the document, while the `<head>` tag contains information about the document, such as its title, external stylesheets and scripts, and metadata.

### Who can save block CSS

The styles Nectarblocks generates for your blocks are saved alongside the content they belong to, and saving them requires permission to edit that specific item. A user needs to be able to edit the post or page in question to save its block CSS, and the `edit_theme_options` capability to save CSS for widgets, templates and template parts. Contributors and other roles that cannot edit a given post no longer save its block CSS. The global CSS and HTML/JS fields described on this page stay administrator-only.

### Where to Find

    The button to access the Custom Code options is found in the `Nectarblocks` option in the Admin Panel toolbar.

---

## Getting Started Tab

When you first open the Nectarblocks admin panel, the **Getting Started** tab is the default view. It welcomes you and highlights main features with short video previews so you can explore the block collection, template library, global settings, block customization, responsive editing, and Unsplash image integration.

### Where to find it

1. In the WordPress admin, open **Nectarblocks** in the left sidebar or toolbar.
2. The panel opens with **Getting Started** selected by default. You can return to it anytime by clicking the **Getting Started** tab.

### What’s on the tab

The tab includes a short intro and a grid of feature cards. Each card has a short video and a link to the main idea:

- **Block Collection** – Overview of Nectar blocks.
- **Template Library** – Pre-made templates to start from.
- **Global Settings** – Colors and typography used across blocks.
- **Block Settings** – How to customize individual blocks.
- **Responsive Editing** – Device-specific and hover preview.
- **Unsplash Images** – Using Unsplash inside the editor.

Use this tab as a quick tour, then switch to other tabs (e.g. [Authorization](./licensing), [Plugin Options](./plugin-options), [Import/Export](../demo-importer), [Modules](./modules)) for specific settings.

### Interactive editor guide

The first time you work with Nectarblocks in the block editor, an **interactive onboarding guide** runs as a spotlight overlay — dimming the screen and highlighting one part of the interface at a time while a tooltip explains it. It steps you through the essentials: the Block Library, adding blocks, block settings, the Nectarblocks sidebar, your design system, **[Responsive & Hover modes](../responsive-editing/overview)**, and the **[Template Library](../template-library)**. Use **Next** / **Back** to move through the steps, or **Skip tour** to dismiss it at any time.

---

## Licensing

### Overview
After purchasing a key from our website, you will need to active that key after installing the plugin Nectarblocks.

1. After installation, navigate to the Nectarblocks Admin Panel and go to the `Authorization` tab.

2. Next enter you serial key into the box and press the register button. If everything was successful a green arrow will display next to the register button.

    The button to access the Custom Code options is found in the `Nectarblocks` option in the Admin Panel toolbar.

### Moving your site to a new domain

Your license activation is tied to the domain it was registered on. When the site's address changes (a real move to a new domain, not a copy), plugin updates and the Template Library keep authenticating against the old domain until the activation is moved along with it.

Nectarblocks detects the change and shows a notice on its admin screens to administrators:

> **Nectarblocks: this site's domain changed from `old-domain.com` to `new-domain.com`.** Updates and the Template Library stay tied to the old domain until you transfer the license. If this is a copy of another site (staging, a clone), dismiss this instead — transferring would deactivate the original.

Click **Transfer license to new-domain.com** to move the activation in one step. The page reloads once the transfer succeeds and no further action is needed.

:::warning[Staging sites and clones]
The plugin never transfers a license on its own, because a staging copy or a cloned database looks exactly like a moved site. A transfer always deactivates the original activation. If the notice appears on a copy of your live site, dismiss it instead of transferring. The dismissal is remembered for that specific old/new domain pair, so a later, different move surfaces the notice again.
:::

A license can be transferred at most three times per key in any seven-day period. If you hit that limit, wait and try again later.

#### Transfer errors

If the transfer does not go through, the notice shows one of these messages and the button stays available so you can retry:

| Message | What it means |
|---------|---------------|
| This site's address could not be used. Check the WordPress Address and Site Address settings, then try again. | The new domain could not be read from your WordPress settings. |
| This license key does not match the activation being transferred. | The stored key and the activation on file disagree — reactivate from the Authorization tab. |
| This site's activation was released from your Nectarblocks account. Reactivate it from the Authorization tab if you still want it here. | The seat was deregistered from the account portal. |
| This license key is no longer active. Please contact support. | The key itself was cancelled or refunded. |
| This license has reached its maximum number of activations. | No free seat is left on the key. |
| This license has reached its maximum number of development activations. | No free development seat is left on the key. |
| This license has been transferred too many times recently. Please try again later. | The three-per-seven-days limit was reached. |
| The license could not be transferred. Please try again later or reactivate it from the Authorization tab. | A temporary failure — retry, or register the key again on the Authorization tab. |

#### "This site's license is no longer active"

A second notice appears when the activation was released server-side or could not be renewed automatically:

> **Nectarblocks: This site's license is no longer active.** It was released from your account or could not be renewed automatically. Reactivate it to restore updates and the Template Library. **Manage license**.

This is expected after removing the site from your Nectarblocks account portal, after a refund or key cancellation, or when the site could not renew its access on its own. To reactivate, follow the **Manage license** link (or open the **Authorization** tab), enter your serial key and press **Register**. The notice clears on the next successful registration.

### Video Tutorial

---

## Modules

The **Modules** tab in the Nectarblocks admin panel lets you turn optional plugin features on or off. These features register additional post types or functionality that not every site needs.

### Where to find it

1. In the WordPress admin, open the **Nectarblocks** menu in the left sidebar or toolbar.
2. Click into the admin panel and select the **Modules** tab.

### Available modules

#### Portfolio Post Type

- **What it does** – Registers a **Portfolio** post type so you can create and manage portfolio or project entries (e.g. for a gallery, case studies, or work samples).
- **When to use it** – Enable this if you want a dedicated “Portfolio” content type. When enabled, Portfolio will appear in the WordPress admin menu and you can use it with blocks such as [Post Grid](../blocks/post-grid) or [Taxonomy Grid](../blocks/taxonomy-grid) by selecting the Portfolio post type in the block’s query settings.
- **When to leave it off** – Disable it if you do not need portfolio/project posts; this keeps the admin menu simpler and avoids registering an unused post type.

Toggle **Portfolio Post Type** on or off and save; the change takes effect immediately. Other modules may be added here in future updates.

---

## Plugin Options Panel

### Overview
    The Nectarblocks admin panel serves as the central hub for managing your license, updates, data, custom code, and easy access to your Nectarblocks theme settings.

### Panel Tabs

---

## Plugin Options

## Nectarblocks Plugin Options

To control some features of the Nectarblocks plugin, we have provided a set of global options.

    1. **Default Text Block** - Choose the default block used when you start typing in an empty paragraph: `Nectarblocks Text` or `Core Paragraph`.
    2. **Hide Page Titles** - Hide titles by default on all pages.
    3. **Disable Core Typography Rules** - Disable the output of the Nectarblocks Core **[Global Typography](../global-settings/typography)** rules, so your theme controls typography instead of Nectarblocks.
    4. **Local Google Fonts** - Automatically download and serve Google Fonts locally for improved performance and GDPR compliance. See **[Local Google Fonts](../custom-fonts/local-google-fonts)**.
    5. **Lazy Load Images** - Defer off-screen images until they're near the viewport, reducing initial page weight. Above-the-fold images are detected automatically and load eagerly.

### Where to Find

    The button to access the `Plugin Options` is found in the `Nectarblocks` option in the Admin Panel toolbar.

---

## Updates

## Updating Nectarblocks Plugins and Theme

For your privacy, you can control if you want the plugins and themes to connect to our servers to look for updates. To do this:

    1. Access the WordPress Dashboard: Log in to your WordPress admin panel.

    2. Navigate to the Nectarblocks admin tab and then select the Authorization tab.

    3. Click the toggle next to `Enable Updates` and then `Save Options` the top right of the page. The plugins and theme will now periodically, about every 4 hours, reach out to our servers to check for updates.

    To force a check for updates to occur now, you can use the following button on the same page:

---

## Hover Mode

Hover mode empowers you to edit attributes of **[Nectar blocks](../blocks/overview)** that take effect when the element is hovered over.
This mode is unique because there's no cascade effect. The value is either set and active, or it isn't. When set, it will override all other viewports.

Reach for Hover Mode when you want a **simple state change** on the block itself — an opacity fade, a color or background swap, a border tweak — applied as a straightforward CSS transition. For anything more involved, use an **[Interaction animation](../animation-system/interaction)** instead: it's JS-powered and gives you full control over from/to values, per-property timing, easing (including spring), and — crucially — the ability to have **one block react when a *different* block is hovered** (hover a card to move an arrow inside it). Rule of thumb: simple transition → Hover Mode; complex or cross-block interaction → Interaction.

Unlike Responsive Mode, not every setting can be edited in Hover Mode. As of version 3 the set of state-aware controls is broad — background and text color, border and border radius, spacing, size, position, effects, transform and images. (The same state-aware controls power the **[Header States](../header-builder/header-states)** used in the Header Builder.)
Similar to Responsive Mode, you can identify which settings can be modified in Hover Mode by locating any field with its label highlighted in green.

1. Green means that the value is able to be set changed in the Hover mode.
2. Purple means that the value is set within Hover mode.

### Editing Values 

When Hover mode is enabled, the editor will display the state of that block as if it were being hovered, **in a frozen state**. This makes it easy to see the effect as if the block were being hovered over by the cursor.

### Resetting Values
Resetting any currently set hover value can be done by clicking the **reset icon** next to the attribute label: ![Responsive Reset Icon](./responsive-reset-icon.svg)

---

## Responsive Editing

### Overview

Nectarblocks provides a systematized way for blocks to change depending on the viewport width of the browser.

The responsive system varies from most other page builders in that it is controlled by a single toolbar at the top of the editor. This toolbar allows you to switch between `Desktop`, `Tablet`, `Mobile`, and `Hover` modes. Each of these modes will change the viewport width of the editor to match the viewport width of the device you are targeting and allow Nectar Block attributes to be edited responsively.

### Video Tutorial

### Usage

By default, the page editor will be in `Desktop` mode. To see the current editor mode there is a toolbar at the top of the editor. In the below picture, `Desktop` mode is selected as marked by the blue line underneath the icon.

![Responsive Toolbar](./responsive-toolbar.png)

The buttons on the toolbar represent, `Desktop`, `Tablet`, `Mobile`, and `Hover`. [Hover mode is covered here](./hover-mode).

### Editing Values Responsively

After selecting a responsive mode from the toolbar, the editor's viewport will change its width to match the value of the [breakpoint](#responsive-breakpoints). The labels for each attribute that can be changed responsively will highlight in a unique color. The color in which a responsive field displays its label identifies whether the value for that viewport is inherited from a larger viewport or overridden for the current viewport.

1. Green means that the value is inherited from a larger viewport.
2. Blue means that the value is overridden for the current viewport.

### Examples

#### Value Inherited from Larger Viewport

![Attribute Inherited](./attribute-inherited.png)

#### Value Overridden

![Attribute Overridden](./attribute-overriden.png)

### Resetting Overridden Values

Any currently overridden value will have this icon appear next to the attribute label: ![Responsive Reset Icon](./responsive-reset-icon.svg)

Clicking this button will reset the value for that viewport, which in turn will allow it to inherit the value from the next largest viewport value.

### Editor Visual Feedback

To make block structure easy to read on the canvas, the editor adds a few automatic visual aids — there's nothing to configure:

- **Color-coded outlines** — blocks show an outline on hover and selection, color-coded by type so containers are easy to tell apart (rows, columns and flex-boxes each get their own color). Hovering a child block hides its parent's outline to cut down on clutter.
- **Padding-zone overlay** — selecting or hovering a container that has padding tints the padding area so you can see the spacing between the block's edge and its content. Containers with no padding show no overlay.
- **Active-state indicator dots** — a small dot appears on an inspector **tab** or **panel** when it contains customized (non-default) settings, so you can see at a glance which sections you've changed.

### Responsive Breakpoints

| Viewport    | Breakpoint       |
| ----------- | --------------   |
| Desktop     | > 1024px         |
| Tablet      | 1024px to 768px  |
| Mobile      | < 768px          |

---

## Waterfall System

export function ArrowIcon() {
  return (
    <svg 
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0" 
      viewBox="0 0 256 256" 
      height="20px" 
      width="20px"
      className="inherit-icon"
      xmlns="http://www.w3.org/2000/svg"
    >
        <path d="M229.66,173.66l-48,48a8,8,0,0,1-11.32-11.32L204.69,176H88A64,64,0,0,1,88,48h88a8,8,0,0,1,0,16H88a48,48,0,0,0,0,96H204.69l-34.35-34.34a8,8,0,0,1,11.32-11.32l48,48A8,8,0,0,1,229.66,173.66Z"></path>
      </svg>
    );
}

### Core Concept

    Block attributes initially adopt desktop values as their default. These values are inherited by smaller viewports unless overridden by specific settings for those smaller sizes. In essence, values flow from larger to smaller viewports in a cascading manner. However, the cascade is always down; values do not flow upward.
    1. Green means that the value is inherited from a larger viewport.
    2. Blue means that the value is overridden for the current viewport.

    <video
      src={waterfallVideo}
      autoPlay
      loop
      muted
      playsInline
      aria-label="A waterfall cascading downward"
      style={{ width: '100%' }}
    />

### Examples

Below we have a table with a examples of how values cascade when set in various viewports.

#### Desktop Mode Only

| Viewport    | Value             |
| ----------- | ----------------- |
|  Desktop     | max-height: 100px;|
|  Tablet      | max-height: 100px; |
| Mobile      | max-height: 100px; |

#### Tablet Mode 

| Viewport    | Value             |
| ----------- | ----------------- |
| Desktop     | max-height: 100px;|
|  Tablet      | max-height: 25px; |
| Mobile      | max-height: 25px; |

#### Mobile Mode

| Viewport    | Value             |
| ----------- | ----------------- |
|  Desktop     | max-height: 100px;|
| Tablet      | max-height: 100px;|
| Mobile      | max-height: 10px; |

#### Multiple modes

| Viewport    | Value             |
| ----------- | ----------------- |
| Desktop     | max-height: 100px;|
| Tablet      | max-height: 25px; |
| Mobile      | max-height: 10px; |

---

## Template Library

## Overview

The Nectarblocks Template Library is your go-to resource for effortlessly creating visually stunning and cohesive web pages on your WordPress site.

The library offers a collection of prebuilt layouts which are meticulously designed and seamlessly integrated with the [Global Color Palette](./global-settings/colors.mdx) and [Global Typography](./global-settings/typography.mdx) of the Nectarblocks. You'll notice that the previews of the templates in the library will always match the global settings you have activated on your site. Making it easier than ever to create a cohesive and professional-looking website.

While the templates come pre-stylized, you have the freedom to customize various elements, including text, images, and additional blocks.

### Accessing the Library

To access the template library, click the **Template Library** button in the top toolbar of the editor.

#### Header and off canvas layouts

The **Navigation** and **Off-Canvas Menu** categories hold layouts for your site header and the panel its menu button opens. Insert them into a **[Header Navigation](./header-builder/overview.mdx)** or **[Off Canvas Menu](./header-builder/off-canvas-menu.mdx)** template in the Theme Builder, where the library opens to the matching category. Inserted into a page instead, a header layout becomes part of that page's content and appears below the site's real header.

### Ever-growing Collection

Upon purchase, enjoy a complimentary one-year access to additional templates. Following this period, to continue accessing new to the template library, a subscription to Nectarblocks is required.

### Disabling The Library

You can hide the template library through the filter `nectar.templateLibraryDisabled`. Here's an example you can add to your child theme's `functions.php` file:

```php
function add_nectar_template_library_inline_script() {
    $script = "
        wp.hooks.addFilter(
            'nectar.templateLibraryDisabled',
            'child-theme/disable-template-library',
            function() {
                return true;
            }
        );
    ";

    wp_add_inline_script( 'wp-hooks', $script );
}
add_action( 'enqueue_block_editor_assets', 'add_nectar_template_library_inline_script' );
```

---

## Child Theme

We provide a boilerplate child theme that you can use to customize the Nectarblocks theme without losing your changes when you update the parent theme. It includes the necessary files and structure to get you started with your customizations.

    Download Child Theme

---

## Archive Header

###### Blog Archive Header Type

- Color Background
- Image Background

###### Blog Archive Header BG Color

- Defines the color of the header background used on Blog archives.

###### Blog Archive Header Text Color

- Defines the color of the text used on Blog archives.

###### Blog Archive Header Background Image

- Upload an optional background that will be used as the default on all blog archive pages.

###### Blog Archive Background Color Layout

- Default (Solid)
- Gradient

###### Blog Archive Text Alignment

- Default
- Left
- Center
- Right

###### Blog Archive Format

- Default (Taxonomy Term + Archive Type)
- Minimal (Taxonomy Term w/ count)

###### Blog Archive Author Gravatar

- Adds the author's gravatar to the header.

---

## Functionality

###### Post Date Functionality

- Show Published Date
- Show Last Edited Date

---

## Post Meta

The following options to control what meta information will be shown on your single post template.

###### Remove Single Post Date

###### Remove Single Post Author

###### Remove Single Post Comment Number

###### Remove Single Estimated Reading Time

The following options to control what meta information will be shown on your archive templates.

###### Remove Post Date

###### Remove Post Author

###### Remove Categories

---

## Single Post Header

###### Blog Header Type

- Variable Height
- Featured Media Under Heading

###### Blog Header Image Sizing

- Slim (2.5:1)
- Narrow (2:1)
- Regular (16:9)
- Tall (3:2)
- Square (1:1)

###### Blog Header Roundness

###### Blog Header Alignment

- Left
- Center

###### Blog Header Author Style

- Small Image Inline
- Large Image Multiline

###### Blog Header Display Excerpt

- Adds a post excerpt to the header area.

###### Blog Header Overlay Color

- Defines the color of the overlay that appears over the header image.

###### Blog Header Overlay Opacity

- Defines the strength of the overlay that appears over the header image.

###### Blog Header Text Color

- Defines the color of the text that appears over the header image.

###### Blog Header Scroll Effect

- None
- Parallax

###### Blog Header Load In Animation

- None
- Fade In Staggered

###### Hide Featured Media

- Using this will remove the featured media (determined by the selected post format) from appearing in the top of your single blog posts.

###### Single Post Header Inherits Featured Image

- Using this will cause the default background of your post header to use your featured image when no other post header image is supplied.

---

## Single Post

###### Hide Sidebar on Single Post

- Hides the sidebar on the single post template.

###### Blog Content Width

- Default
- 1000px
- 900px
- 800px
- 700px

###### Author Link

- Post Author Archives
- Post Author Website URL
- None

###### Author Bio

- Display the author's bio at the bottom of posts.

###### Post Navigation Links

- Using this will add navigation link(s) at the bottom of every single post page.

###### Post Navigation Style

- Full width Next Link Only
- Full width Next & Prev Links
- Contained Next & Prev Links
- Parallax Contained Next Link Only

###### Limit Post Navigation To Same Category

- This will ensure that the next/prev links will only show posts that are set in the same category of the post being viewed.

###### Post Navigation Ordering

- Default
- Reverse Order

###### Related Posts

- Adds related posts after the post content on single post pages.

###### Related Posts Functionality

- Recent in same category
- Random in same category
- Random in any category

###### Related Posts Style

- Material
- Classic

###### Display Excerpt In Related Posts

###### Related Posts Title Text

- Related Posts
- Similar Posts
- You May Also Like
- Recommended For You
- None (Hidden)

###### Blog Section Title Typography

- Default
- Heading 2
- Heading 3
- Heading 4
- Heading 5

###### Author Style in Comments

- Default
- "Author" Badge Next to Name

###### Display Tags

- Display tags at the bottom of posts?

---

## Styling

###### Blog Layout

- Standard Blog W/ Sidebar
- Standard Blog No Sidebar
- Masonry Blog W/ Sidebar
- Masonry Blog No Sidebar
- Masonry Blog Fullwidth

###### Blog Spacing

- 4px
- 8px
- 12px
- 16px
- 20px

###### Enable Sticky Sidebar

- Causes your sidebar to stick as the user scrolls.

###### Post Excerpt

- Toggle whether to display an excerpt of your post in the archives.

###### Excerpt Length

- The number of words would you like to display for your post excerpts.

---

## Form Styling

###### Overall Form Style

- Sets the style of all form elements used.

###### Enable Fancy Select Styling

- This will add additional styling and functionality to your select (dropdown) elements.

###### Form Submit Button Style

- Select your desired style which will be used for submit buttons throughout your site

###### Form Submit Button Padding

- Fine-tune form submit button padding.

###### Form Input Field Text Size

- Alters the font size for form input field/textarea elements.

###### Form Input Field Padding

- Fine-tune form input fields/textarea element padding.

###### Form Input Border Width

- Control the width of borders used in your form inputs.

###### Form Input BG Color

- The background color for your form inputs.

###### Form Input Text Color

###### Form Input Border Color

###### Form Input Border Hover Color

###### Form Input Border Focus Color

---

## Functionality (General-settings)

###### Smooth Scrolling

- Optional smooth scrolling for browsers which support it. Recommended for websites which use many scrolling animations to provide the smoothest experience for your users.

###### Meta Viewport Functionality

- Determines whether browser zooming/scaling is enabled or disabled. Enabling this will improve accessibility for users with low vision.

###### Max Website Container Width

- Your container will scale to a maximum width of 1425px, use this option if you'd like to increase that value.

###### Container Left/Right Padding

- The main content container will have 90px of padding set on left and right, use this option if you'd like to modify that.

---

## Performance

###### Delay Javascript Execution

- Prevents theme javascript from running until the user makes an interaction such as scrolling, tapping etc.

###### Devices to Activate "Delay Javascript" Logic

- If you are using a performance plugin that caches your pages, this will need to be set to "All Devices" in order to take effect.

###### Move jQuery to Footer

- Attempts to move jQuery to the footer to make it non render-blocking. Note that this can break third party plugins/scripts which require JavaScript to be loaded in the head.

###### Font Display Swap

- This is a font performance option which will your allow text to display in a default font before Google fonts have loaded.

###### Remove WordPress Emoji Script/CSS

- Removes the WordPress Emoji assets which automatically convert emoticons to WP specific emojis.

###### Used CSS Optimization

- Analyzes which theme CSS rules are actually used on each page and serves a slimmed-down stylesheet in place of the full one, reducing the amount of CSS the browser has to download and parse.
- The optimized CSS is cached per page and rebuilt automatically when you save content, change Customizer settings, or activate/deactivate plugins. A **Flush** button is available to clear the cache manually if needed.

:::note[Automatic block asset loading]
Separately from the theme setting above, the Nectarblocks plugin only loads the CSS and JavaScript for the blocks (and block features) that actually appear on a given page. This happens automatically — there's nothing to configure. Block CSS is also concatenated and delivered inline, eliminating a network request per block, and non-critical CSS is deferred so it doesn't block the first render. In version 3 blocks additionally render only the wrapper markup their settings require, cutting page DOM size substantially.
:::

###### Lazy Load Images

- A separate **Lazy Load Images** option in **Nectarblocks → Plugin Options** defers off-screen images until they're near the viewport, while detecting and eagerly loading above-the-fold images (and preloading top-level row/column background images) so the visible area isn't delayed. See **[Plugin Options](../../../plugin-options-panel/plugin-options)**.

---

## Styling (General-settings)

###### Theme Background Color

- The color used for your base background globally.

###### Theme Accent Color

- The color which will be used for certain UI elements to provide emphasis.

###### Theme Accent Text Color

- The color of text that will be shown overlaid on the Accent Color.

###### Button Styling

- This will effect the overall styling of buttons on your website.

###### Button Roundness

- Fine-tune the rounded edges of your buttons.

###### Animated Underline Type

- Various elements in Nectarblocks display an animated underline when hovering over. This option allows you to globally fine-tune the styling of that line.

###### Animated Underline Thickness

- The thickness of your animated underlines.

---

## WordPress Pages

### Search Results Template

###### Layout

- The layout for your search results.
- Grid & Sidebar
- Grid No Sidebar
- List & Sidebar
- List No Sidebar

###### Header Background Color

###### Header Font Color

- Default is #000000

###### Header Background Image

- Upload an optional background that will be used on your search results page

### 404 Not Found Template

:::tip[404 Template Creation]
If you want to use the Nectarblocks page builder to create your 404 template, you can utilize a [Global Section](../../dynamic-data/global-sections) for it instead of configuring the basic template via the following options.
:::

###### Background Color

The color of your 404 template.

###### Font Color

###### Background Image

- Upload an optional background that will be used on the 404 template.

###### Background Overlay Color

- If you would like a color to overlay your background image, select it here.

###### Add Button To Direct User Home

---

## Animation Effects

###### Header Link Hover/Active Effect

- Color Change
- Animated Underline
- Button Background

###### Button Background Size

- Alters the button background size relative to link text.

###### Button Background Animation

- Alters the button background entrance animation.

###### Header Hide Until Needed

- Do you want the header to be hidden after scrolling until needed? i.e. the user scrolls back up towards the top

###### Header Resize On Scroll

- Do you want the header to shrink a little when you scroll?

- This will only be active when the **Header Hide Until Needed** effect is turned off

###### Header Logo Shrink Number (in px)

###### Condense Header On Scroll

- This option is specific to "Menu Bottom Bar" Header Format.
  When Menu Is Center Aligned
  Adds the logo/header buttons into the bottom nav bar when scrolling. Uses the "Mobile Only Logo" if supplied.
  When Menu Is left Aligned
  Keeps bottom bar sticky when scrolling.

---

## Dropdowns

:::note[Header Builder]
With a Header Navigation template active, this section shows a **Header Builder Active** notice and keeps only **Add Background Overlay** and **Background Blur**, which apply to the template's dropdowns and megamenus. The rest of the dropdown styling is on the **[Navigation](../../../blocks/navigation.mdx#dropdowns)** block's Dropdowns tab. See **[What the Customizer still controls](../../../header-builder/overview.mdx#what-the-customizer-still-controls)**.
:::

###### Dropdown Opacity

- Set the opacity of your dropdowns (1 to 100).

###### Dropdown Link Hover/Active Effect

- Background Color Change
- Animated Underline

###### Dropdown Arrows

- Inherit
- Show Arrow
- Don't Show Arrow

Not available with the Left Header layout.

###### Display Descriptions

- This will display the "Description" field specified for dropdown menu items in Appearance > Menus.

###### Add Background Overlay

- Adds an overlay behind an open dropdown to keep the focus on it.

###### Background Blur

- Blurs the page behind the overlay while a dropdown is open. Only shown when **Add Background Overlay** is on.

###### Dropdown Positioning

- Bottom of Header Navigation Bar
- Bottom of Menu Item Label

###### Dropdown Animation

- Default
- Fade In Up
- Fade In

###### Dropdown Roundness

Optionally round the edges of your dropdowns.

###### Dropdown Box Shadow

Adds a box shadow to your dropdowns.

- Small
- Large
- None

---

## Footer

:::tip[Footer Creation]
If you want to use the Nectarblocks page builder to create your footer, you can utilize a [Global Section](../../../dynamic-data/global-sections) for it and disable the automatic simple footer by toggling the options for "Main Footer Area" and "Disable Footer Copyright Area"
:::

###### Main Footer Area

- Toggles the simple footer area which uses Widgets to add content to predetermined column layouts.

###### Footer Columns

- The number of columns you would like for your footer.

###### Custom Footer Color Scheme

- Enable this to use color pickers to control the coloring of your footer.

###### Footer Full Width

- This to cause your footer content to display full width.

###### Footer Link Hover Effect

- The hover effect you would like for links in your footer copyright area.

###### Disable Footer Copyright Area

- This will hide the copyright bar in your footer

###### Footer Copyright Layout

- The layout you would like for your footer copyright area.

###### Footer Copyright Section Text

- The copyright section text. e.g. All Rights Reserved

###### Disable Automatic Copyright

- By default, your copyright section will say "© YEAR SITENAME" before the additional text you add above in the Footer Copyright Section Text input - This option allows you to remove that.

###### Footer Background Image

- Upload an image that will be used as the background image on your footer.

###### Footer Background Overlay

- Adjust the overlay opacity when using a Background Image - the overlay colors pulls from your defined footer background color.

---

## Header Color Scheme

Color pickers will appear when selecting 'Custom' for the color scheme, allowing you to create a fully customized header navigation and off-canvas mobile menu color scheme for every element and state.

      Alternatively, you can opt to select a predefined color scheme `Light` or `Dark` from the dropdown.

---

## Header Off Canvas Menu

:::note[Header Builder]
With a Header Navigation template active, this section shows a **Header Builder Active** notice and a shorter list of settings: **Style**, **Desktop Width (%)**, **Offset**, **Roundness**, **Icon Width**, **Overlay Strength** and **Blur Background**. The **Simple Dropdown** style isn't offered there. To build the panel's contents with blocks, see **[Off Canvas Menu](../../../header-builder/off-canvas-menu.mdx)**. For every header section, see **[What the Customizer still controls](../../../header-builder/overview.mdx#what-the-customizer-still-controls)**.
:::

###### Enable on All Viewports

- This will add an off canvas menu button on all viewports to your header navigation. When this is disabled, the off canvas menu will only be visible on mobile devices.

###### Style

- Slide Out From Side
- Slide Out From Side Hover Triggered
- Fullscreen Cover Slide + Blur BG
- Fullscreen Cover Fade
- Fullscreen Cover Split
- Simple Dropdown

The "Slide Out From Side Hover Triggered" style will force the "Full Width Header" option regardless of your selection.

###### Separate Mobile Menu

- This will cause your off canvas to only display navigation menu items assigned to the "Off Canvas Navigation Menu" location when viewing on a mobile device.
- Only shown when **Enable on All Viewports** is off.

###### Desktop Width (%)

- The width of the panel on desktop, as a percentage of the screen width. Only shown with **Slide Out From Side**.

###### Offset

- Adds a gap, in pixels, between the panel and the edges of the screen.

###### Roundness

- Rounds the corners of the panel, in pixels.

###### Icon Width

- The width of the menu button's icon, in pixels.

###### Default Background Image

- Choose the default image to be shown in your Off Canvas Menu. You can also supply a unique item for each menu item in Appearance > Menus.

###### Dropdown Behavior

- The functionality for how dropdowns will behave in your off canvas menu: **Dropdown Parent Link Toggles Submenu** or **Separate Dropdown Parent Link From Dropdown Toggle**.
- Not shown with Fullscreen Cover Slide + Blur BG, Fullscreen Cover Fade or Simple Dropdown.

###### Menu Label

- Adds the text "Menu" next to your OCM button.

###### Button Position

- Selects the location your OCM button will render in: **Default** or **Left**.

###### Bottom Text

- This will add some text fixed at the bottom of your off canvas menu - useful for copyright or quick contact info etc.

###### Overlay Strength

- How much the page behind the open menu is darkened: Solid, Dark, Medium, Light or None.
- Not all off canvas menu styles utilize this option.

###### Blur Background

- Applies a backdrop blur to the off canvas menu's background.

###### Mobile Nav Menu Items

- This will cause your off canvas menu to inherit any navigation items assigned in your "Top Navigation" menu location when viewing on a mobile device.
- Only shown when **Enable on All Viewports** is on.

###### Menu Item Icons

- Controls which icons, if any, display in your off canvas menu: Display No Icons, Display Font/Emoji Icons Only, Display Image Icons Only or Display All Icons. Icons are set on each menu item in Appearance > Menus.

###### Icon Style

- **Default** or **Circular**. Circular makes the button's background round, so it needs a **Button Background Color**. Hidden when **Menu Label** is on.

###### Button Background Color

- Optionally define a background color for your off canvas navigation button within the header.

###### Button Color

- The color of your OCM button's icon and "Menu" label.

###### Custom Font Size (Desktop)

- Optionally specify a custom font size to use for your off canvas navigation menu items when viewed on desktop displays. All unit types are accepted.

###### Custom Font Size (Mobile)

- Optionally specify a custom font size to use for your off canvas navigation menu items when viewed on mobile displays. All unit types are accepted.

---

## Header Search

###### Remove Header search

###### Disable AJAX from search

- This will turn off the autocomplete suggestions from appearing when typing in the search box.

###### AJAX search styling

- Select how to display the search results as the user types.

###### Limit Search To Post Type

- All
- Products
- Posts

###### Header Search Typography

- The search input field typography to inherit styling from.

###### Search Font Size

- The search input field font size.

###### Search Placeholder Text

- Define custom text to show to the user when opening the search, before they start typing.

---

## Layout & Content Related

###### Header Layout

- Default Layout ( Logo Left, Menu Items Right )
- Centered Menu ( Logo Left, Menu Items Centered )
- Centered Menu Alt ( Logo Centered, Menu Items Underneath )
- Menu Bottom Bar ( Logo Centered, Menu Items Underneath Alt )
- Centered Logo Menu Alt ( Logo Centered, Menu Items Left and Right split )
- Menu Left Aligned ( Logo Left, Menu Items Left )

###### Left Header Dropdown Functionality

- The functionality for how dropdowns will behave in the left header navigation.

###### Menu Bottom Bar Separator

- Add a line to separate the top/bottom of your header.

###### Menu Bottom Bar Alignment

- Your header content to alignment.

###### Full Width Header

- Allows your header to display full width, breaking out of the site container width.  - [View Example](https://demos.nectarblocks.com/phoenixfalls/)

###### Full Width Left/Right Padding

- Padding for the full width header.

###### Header Size

- Expanded to edges of screen - [View Example](https://demos.nectarblocks.com/phoenixfalls/)
- Contained - [View Example](https://demos.nectarblocks.com/taskhorizon/)

###### Header Roundness

- When using the "Contained" Header Size, optionally set the roundness of your header navigation.

###### Text To Display In Header

- An optional small amount of text to display in your header navigation. e.g. a phone number, store address etc. The positioning of this content will be determined by the header layout that you are using.

---

## Logo & General Styling

###### Image Logo

- If left unchecked, your site name will be used instead.

###### Logo Upload

- An image upload for your logo.

###### Logo Height

- The height that your logo should display at. It's recommended to upload your logo at twice the size you set this at in order to ensure crisp rendering on higher resolution displays.

###### Mobile Logo Height

- Set a unique height for your image logo to render at on mobile devices.

###### Mobile Only Logo Upload

- An optional field that allows you to display a separate logo that will be shown on mobile devices only.

###### Header Padding

- The padding which will be added above/below your logo.

###### Menu Item Gap

- The spacing between each menu item in your navigation.

###### Background Opacity

- If you are trying to have your header navigation completely see through before scrolling, setting this very low is not how to achieve it. The fully transparent style as shown on many of the demos is the option titled Use Transparent Header When Applicable which is available in the Header Navigation ~ Transparent Header Effect tab.

###### Box Shadow

- Adds a box shadow to your header navigation.

###### Blur Background

- Blurs the background behind your header navigation. In order to see this effect, you'll need to change your [Background Opacity](#background-opacity) to be less than 100.

###### Blur Background Functionality

- Determines when the blur effect should occur.

###### Border

- Adds a border to the bottom of your navigation bar.

###### Header Border Color

- The color of your optional header navigation border.

###### Remove Desktop Stickiness

- Prevents the header navigation from sticking to the top while scrolling and will keep it positioned at the top.

---

## Mobile Menu

###### Mobile Header Layout

- Default Layout (Logo Left, Links Right)
- Centered Menu (Logo Centered, Links Split Left/Right)

###### Header Sticky On Mobile

- Choose whether to keep your mobile header navigation bar sticky at the top when scrolling.

###### Header Mobile Breakpoint

- Define at what window size (in px) the header navigation menu will collapse into the mobile menu style - larger values are useful when you have a navigation with many items which wouldn't fit on one line when viewed on small desktops/laptops.

---

## Secondary Header Bar

###### Secondary Header Bar

- Select if you would like an additional header bar above the main navigation.

###### Secondary Header Text

- Add the text that you would like to appear in the secondary header.

###### Secondary Header Link URL

- An optional URL for the secondary header text here.

###### Secondary Header Mobile Functionality

- How you would like the secondary header bar to display on mobile devices.
  The option to "Display Items Above Mobile Header" will be skipped when using the "Header Permanent Transparent" option in the Header Navigation > Transparent Effect tab.

---

## Transparent Header Effect

:::note[Header Builder]
With a Header Navigation template active, this section shows a **Header Builder Active** notice and keeps only **Transparent Header** and **Automatically Enable On**. They decide which pages start in the header's Transparent state, which you style in the template. See **[When each state applies](../../../header-builder/header-states.mdx#when-each-state-applies)** and **[What the Customizer still controls](../../../header-builder/overview.mdx#what-the-customizer-still-controls)**.
:::

###### Transparent Header

- Causes your header to be completely transparent before the user scrolls. This will be triggered automatically when using a post header, or you can turn it on for an individual page from the block editor: open **Nectarblocks Post Options** in the document sidebar and enable the **Transparent Header** toggle (a **Color** picker chooses the light or dark variant unless the Header Builder controls it). The per-page toggle only takes effect while this Customizer option is enabled.

###### Automatically Enable On

- Turns on the transparent header for whole post types, so you don't have to enable it on each post. Each post type is listed twice: **Single** for its posts and **Archive** for its archive pages, including category, tag and author archives. Pages and WooCommerce products aren't listed.

###### Transparent Light Logo

- This will be used when the header is transparent before the user scrolls.

###### Transparent Light Mobile Logo

- A separate header starting logo that will be shown on mobile devices only.

###### Transparent Dark Logo

- This will be used when the header transparent effect is active and the dark color is selected.

###### Transparent Dark Mobile Logo

- A separate header starting dark logo that will be shown on mobile devices only.

###### Transparent Light Text Color

- Select the color you desire for your header text before the user scrolls

###### Transparent Dark Text Color

- Select the color you desire for your header text when the dark header is active.

###### Header Starting Text Opacity

- Default (Dimmed)
- Full Opacity

###### Header Permanent Transparent

- Turning this on will allow your header to remain transparent even after scrolling down. This option will override all colors. When using an image logo, it must have a transparent background (PNG or SVG). While it's on, the dark logo and text color settings are hidden. Not available with the Menu Bottom Bar header layout. An example of this effect can be seen on the [Nectar Solutions](https://demos.nectarblocks.com/nectarsolutions/) template.

###### Add Shadow Behind Transparent Header

- Add a subtle shadow behind your transparent header to help with the visibility of your navigation items.

---

## Customizer Options

### Overview
    The Nectarblocks Customizer options are a collection of settings that allow you to customize the appearance of your website. These settings are divided into several categories, each of which contains a set of options that can be used to modify the appearance of your website.

### Option Categories

---

## Typography (Customizer-options)

### Overview
    Nectarblocks provides deeply customizable typography settings that allow you to control the appearance of text on your website. Each option below will open a modal of settings, as shown on the right, that can be used to modify the appearance of text in that specific area of your website.

    ### Navigation
    ##### Logo Font
    - The font used for your logo.
    ##### Navigation Font
    - The font used for your navigation menu.
    ##### Navigation Dropdown Font
    - The font used for your navigation dropdowns.
    ##### Off Canvas Navigation
    - The font used for your off canvas navigation.
    ##### Off Canvas Navigation/Dropdown Description Text
    - The font used for your off canvas navigation dropdown description text.

    ### Page Header
    ##### Page Heading Font
    - The font used for your Page/Post titles.
    ##### Page Heading Subtitle Font
    - The font used for your Page/Post subtitle.

    ### Content Elements
    ##### Blockquote Font
    - The font used for your blockquotes.
    ##### Blog Single Post Content
    - The font used for your blog single post content.
    ##### WooCommerce Product Title Font
    - The font used for your WooCommerce product titles.
    ##### WooCommerce Product Secondary Font
    - The font used for your WooCommerce product secondary text.

    ## Responsive Sizing
    You can change any typography setting, such as font size and line height, for a specific device by clicking the responsive icon located at the bottom of the WordPress Customizer sidebar. Each setting will be saved uniquely for the currently previewed device.

---

## Archive Header (Woocommerce)

###### Archive Header Background Image

- Upload an optional background that will be used as the default on all woocommerce archive pages.

###### Product Category Header Sizing

- When a product category header image is supplied, this option will control the sizing of the header area.
- Full width
- Contained

###### Product Category Description

- Determines the display of category descriptions.
- Under Header
- Inside of Header

###### Product Category Header Roundness

- Controls the roundness of the header area on product archives.

###### Product Category Header Parallax Scrolling

- Adds a parallax scrolling effect to the header image on product archives.

###### Product Category Header Auto Height

- Will automatically adjust the height of your header depending on the content.

###### Product Category Header Max Content Width

- Sets a max width for the content inside of your header.

---

## General

###### WooCommerce Cart In Nav

###### Cart In Nav Style

- The style you would like for your AJAX cart.
  Note: Because WooCommerce caches the cart widget markup, when changing this option you will need to add a product to the cart to see the full change. Alternatively, you can also use the "Clear sessions" tool within WooCommerce > Status > Tools for this.

- Hover Dropdown

- Click Extended Functionality

###### AJAX Product Template Add to Cart

- Enabling this will allow products to be added to the cart without causing a page refresh on the single product template and in the quickview modal.

###### Main Shop Layout

- Full Width
- No Sidebar
- Right Sidebar
- Left Sidebar

###### Add Filter Sidebar Toggle

- Enabling this will allow your sidebar widget area to be toggled from a button above your products on all product archives.

###### Display Active Filters Next To Toggle

- Displays currently active filters next to the filter toggle button. Not compatible with third party plugins which update WooCommerce filters without reloading the page.

###### Filter Sidebar Toggle Starting State

- Open
- Closed

###### Enable Sticky Sidebar

- Would you like to have your sidebar follow down as your scroll in a sticky manner?

###### Product Style

- Classic
- Material Design
- Minimal Design

###### Minimal Product Hover Layout

- Price Hidden, Minimal Buttons
- Price Visible, Flex Buttons

###### Minimal Product Hover Effect

- Background Grow W/ Shadow
- Image Zoom

###### Minimal Product Text Alignment

###### Product Border Radius

###### Enable WooCommerce Product Quick View

- This will add a "quick view" button to your products which will load key single product page info without having to navigate to the page itself.

###### Show first gallery image on Product hover

- This will show the first gallery image on product hover.

###### Disable Product Hover Effect On Mobile

- Useful to ensure your product links when tapped instead of revealing the hover effect.

###### Quantity Button Style

- Rounded Circles With Shadow
- All Grouped Together

###### Archive Page Columns (Desktop)

- The column number to be displayed on product archive pages when viewed on a desktop monitor ( > 1300px)

###### Archive Page Columns (Small Desktop)

- The column number to be displayed on product archive pages when viewed on a small desktop monitor (1000px - 1300px)

###### Archive Page Columns (Tablet)

- The column number to be displayed on product archive pages when viewed on a tablet (768px - 1024px)

###### Archive Page Columns (Phone)

- The column number to be displayed on product archive pages when viewed on a phone ( < 768px)

###### Material Design Product Item BG Color

- Set this to match the BG color of your product images.

###### Minimal Design Product Item BG Color

- Set this to match the BG color of your product images.

###### Product Archive Page BG Color

- Allows to you set the BG color for all product archive pages

###### Products Per Page

- Your desired your products per page (default is 12)

---

## How to Add Videos to WooCommerce Products

You can add videos to WooCommerce product galleries without an extra plugin. Since version 11.1, WooCommerce has a built-in **Product gallery videos** setting that lets you add videos from your Media Library to a product's gallery, next to its images. The Nectarblocks theme shows these videos in every **Single Product Gallery Type**.

:::info[Experimental in WooCommerce as of September 2026]
WooCommerce added product gallery videos in version 11.1 (September 2026) as an experimental feature, and it is turned off by default. WooCommerce is expected to make it a standard, on-by-default feature in an upcoming release. Until then, turn it on yourself with the steps below.
:::

### Requirements

- WooCommerce 11.1 or later.
- Nectarblocks theme 3.4.0 or later.
- Videos uploaded to your Media Library. Videos hosted on YouTube, Vimeo or other services aren't supported. MP4 (H.264) plays in the widest range of browsers.

### Step 1: Turn on WooCommerce product gallery videos

1. In the WordPress admin, go to **WooCommerce → Settings → Advanced → Features**.
2. In the **Experimental features** section, check **Product gallery videos**.
3. Click **Save changes**.

### Step 2: Add a video to a WooCommerce product

1. Edit the product.
2. In the **Product gallery** box, click **Add media to product gallery**. With the feature turned off, this link reads **Add product gallery images** instead.
3. Select the video, along with any images you want to add, and click **Add to gallery**.
4. Drag the gallery items into the order you want, then click **Update** or **Publish**.

Keep an image as the **Product image**. Videos only go in the product gallery.

#### Set a poster image for the video

The poster is the still image shown before a video starts and in the gallery thumbnails. WooCommerce uses the video's featured image:

1. Go to **Media → Library** and open the video.
2. Click **Edit more details**.
3. Set a **Featured image**, then click **Update**.

Set a poster for every gallery video. Without one, some browsers, including Safari, show a blank thumbnail.

### How product videos display in the Nectarblocks theme

Gallery videos play automatically, muted and on a loop.

- **Bottom Thumbnails Slider** and **Left Thumbnails + Sticky Product Info**: a video plays while its slide is showing and pauses when you move to another slide. Its thumbnail shows the poster with a play icon.
- **2 Column Images + Sticky Product Info**: a video plays while it's on screen and pauses when you scroll past it.
- **Default WooCommerce Gallery**: WooCommerce's own gallery handles playback.

With **Product Gallery Locked To Aspect Ratio** turned on, videos in the slider and 2 Column gallery types are cropped to the same aspect ratio as your images. In the Default WooCommerce Gallery they keep their own shape.

### Frequently asked questions

#### Can I add a video to a WooCommerce product without a plugin?

Yes. WooCommerce 11.1 and later include the **Product gallery videos** setting. It is experimental and turned off by default, so turn it on first under **WooCommerce → Settings → Advanced → Features**.

#### Can I add a YouTube or Vimeo video to a WooCommerce product gallery?

Not with the built-in feature. It only plays videos uploaded to your Media Library, so upload the video file itself instead.

#### Which video format should I use for WooCommerce product videos?

MP4 with H.264 video plays in the widest range of browsers. Keep product videos short and compressed so product pages load quickly.

#### Can a video be the main product image?

No. The **Product image** has to be an image. Add videos to the product gallery instead, where they show after the product image.

#### Do WooCommerce product videos play automatically?

Yes. Gallery videos play muted and on a loop. In the Nectarblocks slider and 2 Column gallery types, a video only plays while you can see it.

#### Why is my product video thumbnail blank?

The video has no poster image. Safari and some other browsers can't show a thumbnail for a video without one. [Set a poster image](#set-a-poster-image-for-the-video) to fix it.

#### Can I add videos to product variations?

Not yet. While the feature is experimental, WooCommerce doesn't include videos in variation galleries.

### Good to know

- WooCommerce also leaves videos out of product CSV import and export and the REST API while the feature is experimental. Its [Adding Product Images and Galleries](https://woocommerce.com/document/adding-product-images-and-galleries/) guide has the latest details.
- Product quick view shows the product's images only.
- WooCommerce may change experimental features between releases.

### Related

- **[Single Product](./single-product)**: the Single Product Gallery Type, gallery width and aspect ratio options.
- **[WooCommerce Templates](/woocommerce-templates)**: design product pages with the Theme Builder.

---

## Single Product

###### Single Product Layout

- No Sidebar
- Right Sidebar
- Left Sidebar

###### Single Product Gallery Type

- Default WooCommerce Gallery
- Bottom Thumbnails Slider
- Left Thumbnails + Sticky Product Info
- 2 Column Images + Sticky Product Info

Every gallery type can show WooCommerce product gallery videos. See [how to add videos to WooCommerce products](./product-gallery-videos).

###### Custom Product Gallery Width

###### Product Gallery Width Percent

- Specify a custom width for your product gallery to be used on desktop views.

###### Product Gallery Locked To Aspect Ratio

- Enabling this will lock your product gallery images to the aspect ratio you specify below. Leave this disabled in order to show the full uncropped images.

###### Aspect Ratio

- 16:9
- 4:3
- 3:2
- 1:1
- 2:1
- 3:4
- 9:16

###### Product Tab Position

- In Side Area
- Full width Under Images
- Full width Under Images Stacked (No Tabs)

###### Product Reviews Style

- Determines how product reviews will be styled.
- Default
- Submission Form Off Canvas

###### Related/Upsell Products Carousel

- Increases the max number of related/upsell products to 8 and will enable a carousel display.

###### Related/Upsell Products Carousel Max Products

- Choose the maximum number of related/upsell products to display per carousel.

###### Add to Cart Style

- Default
- Full Width
- Full Width with Quantity

###### Product Title Typography

- Defines the typography that the product title will inherit styling from.

###### Product Price Typography

- Defines the typography that the product price will inherit styling from.

###### Product Tab Heading Typography

- Defines the typography that the product tab headings will inherit styling from.

###### Product Variable Product Dropdown Style

- Default
- Animated Underline

###### Remove SKU From Product Page

###### Remove Additional Information Tab From Product Page

---

## Installation (Theme)

1. Download the Nectarblocks theme from our [dashboard](https://app.nectarblocks.com/licenses).
    2. Log in to your WordPress dashboard.
    3. Navigate to "Appearance" → "Themes" → "Add New."
    4. Upload a copy of the Nectarblocks theme.

---

## Menu Options

### Overview
    When using the Nectarblocks theme, you can customize specific items in your header navigation. This feature allows you to add icons, change colors and hover effects, and assign mega menus to individual menu items
    ## Accessing the Options
    To access the menu options, go to the WordPress admin dashboard and click on **"Appearance" → "Menus"**. From there, select a menu item and click on the **"Menu Item Options"** button to customize it.

          1

          2

   ## Menu Item Settings
   - **Enable Mega Menu** Turns this menu item into a megamenu. Allows you to attach a **[Global Section](../dynamic-data/global-sections)** to display when your menu item is hovered over. An example can be seen in the **[Andromeda demo](https://demos.nectarblocks.com/andromeda/)** when hovering over the `Shop` menu item.

   - **Mega Menu Global Section** Assign a Global Section to display as your mega menu.
   - **Mega Menu Global Section Mobile** Assign a Global Section to display as your mega menu on mobile devices.
   - **Persist In Mobile Navigation Header** This will cause the link to remain visible in your mobile header navigation instead of the default location within the off canvas menu.
   - **Menu Item Link Button Style** Choose from a variety of button styles for your menu item. This is useful for creating call-to-action buttons in your navigation, such as the `Contact` button shown below.

   - **Menu Item Link Text Hover** Optionally set a link hover animation.

   On a transparent header, the header switches to its solid style while a mega menu is open, so the menu reads clearly over the page. There's no setting for this. To keep the header transparent, add this to the head under **[Custom Global Code](../plugin-options-panel/custom-global-code.mdx)**:

   ```html
   <script>
   document.addEventListener('DOMContentLoaded', function () {
     var nav = document.getElementById('nectar-nav');
     if (nav) nav.setAttribute('data-megamenu-rt', '0');
   });
   </script>
   ```

   These options apply to the classic theme header. A header built with the **[Header Builder](../header-builder/overview.mdx)** uses the **[Megamenu](../blocks/megamenu.mdx)** block instead.

   ## Menu Item Settings
   - **Icon Type** Select between an Image or Emoji icon.
   - **Menu Icon Size** Define a custom size for your icon. Leave this blank for the default value.
   - **Menu Icon Position** Determines where the menu icon will be aligned relative to the text. (Only applies to submenu items)
   - **Menu Icon Spacing** Define a custom amount of spacing between your icon and menu item text. Leave this blank for the default value. (Only applies to submenu items)

---

## Overview (Theme)

### The Nectarblocks theme

A highly customizable theme tailored for optimal compatibility with Nectarblocks. It is provided as a free companion theme with your purchase of Nectarblocks and is the recommended theme to use.

### Video Tutorial

#### What's the difference between the plugin and the theme?

The Nectarblocks plugin offers a versatile collection of blocks, templates, and controls compatible with any WordPress theme, enabling you to effortlessly create pages and posts. With the Nectarblocks theme, you gain comprehensive design options to craft and customize every aspect of your site beyond just the page content. It ensures a consistent and cohesive look and feel across your entire website, globally affecting every page.

#### Theme Features

1. **Customizer Enhancements**: The Nectarblocks theme enhances the default WordPress Customizer with live previews, React enhanced fields, and a live search.
2. **Deeply Customizable**: The Nectarblocks theme includes hundreds of options to customize your site, including header navigation, typography, colors, WP templates, and more.
3. **Visual Hook System**: The Nectarblocks theme includes a powerful hook system that allows you to add custom global content to your site templates without touching the theme files. e.g. A site-wide footer, call to action banner, etc.
3. **Optimal Compatibility**: Designed to work seamlessly with Nectarblocks, ensuring a smooth experience and tight integration with Global settings.

#### Can I use my own preferred theme instead?

Yes, you can still use your preferred theme with Nectarblocks. However, the Nectarblocks theme is recommended for optimal compatibility and the best experience. Additionally, you will not be able to use the included **[Demo Importer](../demo-importer#demo-installation)** functionality with a third-party theme.

#### Accessing the Theme Options

1. Head to Appearance → Customize in the WP admin.
2. Use the quick link in the Nectarblocks admin panel.

---

## Theme Builder (Docs)

The **Theme Builder** lets you design the structural templates of your site — headers, footers, blog and archive layouts, the 404 page, and WooCommerce pages — entirely with Nectar blocks. Each template is edited in the familiar WordPress block editor and shown wherever its display conditions match.

Theme Builder is different from the **[Template Library](./template-library)** (a collection of pre-built *page* designs you drop into the editor) and from **Global Sections** (reusable content injected at theme hooks). Theme Builder defines the *frame* of your site; those features fill it in.

### Accessing the Theme Builder

In the WordPress admin, open **Theme Builder**. You'll see a list of your existing templates along with the template type and the display conditions assigned to each.

### Creating a template

Click **Add New Template** to open the template chooser. Templates are grouped by purpose:

- **Blank Template**, at the top of the list, starts from an empty canvas.
- **General**: 404 Template.
- **Navigation**: **Header Navigation** (see the **[Header Builder](./header-builder)** guide) and **[Off Canvas Menu](./header-builder/off-canvas-menu.mdx)**.
- **Single**: posts and any custom post type. Pages aren't in this list.
- **Archive**: the archive for posts or for any custom post type.
- **Footer**: Footer and Footer Parallax.
- **WooCommerce** *(when WooCommerce is active)*: Single Product, Product Archive, Cart, Checkout, My Account and Order Confirmation.

Choose a type and click **Create Template**. New templates open pre-populated with sensible default content so you have a working starting point rather than a blank canvas, which you can then customize freely.

### Display conditions

Each template is shown based on the **display conditions** you assign. Conditions can target:

- **Location** — a specific post type, an archive (category / tag / taxonomy), the front page, search results, or the 404 page.
- **Users** — logged-in vs. logged-out visitors, or specific user roles.
- **Taxonomy / posts** — specific categories, tags, custom-taxonomy terms, or individual posts and pages.

Conditions can be combined to precisely control where each template applies.

In version 3, this full conditions list also applies to **template parts** — Header Navigation, Off Canvas Menu, Footer and Footer Parallax — so you can serve a different header or footer on specific pages, post types, archives or for specific user roles, the same way you target **[Global Sections](./dynamic-data/global-sections)**.

When several Header Navigation templates match the same page, all of them render, one below the other. The same goes for Off Canvas Menu templates. Keep their conditions from overlapping so each page gets one. Pages that no Header Navigation template matches use the classic theme header.

### WooCommerce templates

Version 3 brings full WooCommerce support to the Theme Builder. WooCommerce blocks (product collections, breadcrumbs, product details and more) are available inside the editor with the correct template context, so you can rebuild the entire shopping experience — product, archive, cart, checkout, account and order-confirmation pages — using Nectar blocks. See the dedicated **[WooCommerce Templates](./woocommerce-templates)** guide for the full list of template types and how to build them.

### Related

- **[Header Builder](./header-builder)** — design the Header Navigation template, including transparent/scrolled states.
- **[Template Library](./template-library)** — pre-built page designs.
- **[WooCommerce Templates](./woocommerce-templates)** — design your store pages.
- **[Global Sections](./dynamic-data/global-sections)** — reusable content blocks attached to theme hooks.

---

## WPML Integration

WPML is a popular translation plugin for WordPress, enabling you to create and manage multilingual websites. With WPML, you can translate your pages, posts, custom post types, taxonomies, and more into any language.

Nectarblocks is fully compatible with WPML, allowing you to translate your pages while preserving your layouts and styling. This guide covers two methods for translating your content.

### Method 1: Advanced Translation Editor (Recommended)

The **Advanced Translation Editor** is WPML's built-in translation interface that allows you to translate content side-by-side with the original. This is the recommended approach for most users.

#### How to Use

1. Install and configure WPML on your WordPress site
2. Navigate to **WPML → Translation Management**
3. Select the pages or posts you want to translate
4. Click **Translate** and choose your target language
5. Use the Advanced Translation Editor to translate your content

  The Advanced Translation Editor automatically handles the relationship between your original content and translations. Your block layouts and styling remain intact—you only need to focus on translating the text content.

With this method, Nectarblocks styling is automatically synchronized between your original page and translations. No additional configuration is needed.

---

### Method 2: Duplicate Pages

For users who want to **localize their content**—meaning each language version has completely different layouts or designs—you can use WPML's duplicate page feature. This creates an independent copy of your page for each language.

#### How to Use

1. Navigate to **WPML → Translation Management**
2. Select the page you want to translate
3. Choose **Duplicate content** instead of using the translation editor
4. Edit the duplicated page directly in the WordPress Block Editor

#### Special Consideration: The `_nectar_blocks_css` Field

When duplicating pages, there's an important setting to be aware of regarding how Nectarblocks CSS is handled across translations.

Nectarblocks stores custom CSS in a field called `_nectar_blocks_css`. By default, WPML sets this field to **Copy**, but when using the Duplicate Pages method, you should change this to **Copy once** so that each translation can have its own independent styling.

##### Finding the Setting

1. Go to **WPML → Settings**
2. Scroll to the **Multilingual Content Setup** section
3. Click **Show system fields**
4. Locate the `_nectar_blocks_css` field in the Custom Fields table

You'll see four options for this field:

| Option | Behavior |
|--------|----------|
| **Don't translate** | The field is ignored in translations |
| **Copy** | Translations always inherit the original value (default) |
| **Copy once** | Value is copied when translation is created, then becomes independent |
| **Translate** | Field can be translated through WPML's translation interface |

##### Recommended Configuration for Duplicate Pages

  When using the Duplicate Pages method, set the `_nectar_blocks_css` field to **Copy once**. This is the recommended setting for this workflow.

**Copy once** gives you:
- Initial CSS copied from the original when the translation is created
- Full independence to modify the translated page's layout and styling afterward
- The ability to use the WordPress Block Editor to make design adjustments for each language

**Note:** The **Copy** setting should only be used if you're using the Advanced Translation Editor (Method 1), where styling stays synchronized automatically.

  Translation preferences for custom fields are set **globally** in WPML—they cannot be configured at the individual page or post level. If you set `_nectar_blocks_css` to "Copy once", this setting will apply to **all** pages and posts using Nectarblocks.

#### Choosing the Right Approach

| Your Goal | Recommended Method | `_nectar_blocks_css` Setting |
|-----------|-------------------|------------------------------|
| Translate text only, keep same design | Advanced Translation Editor | Copy (default) |
| Different content/design per language | Duplicate Pages | Copy once |

---

### Troubleshooting

#### CSS not appearing on translated pages

If your translated pages are missing styling:

1. Verify the `_nectar_blocks_css` field setting in WPML → Settings
2. If using the Advanced Translation Editor with "Copy", ensure the original page has been saved after any recent changes
3. If using Duplicate Pages with "Copy once", re-save the translated page in the Block Editor to regenerate the CSS

#### Changes on original not reflecting on translations

This is expected behavior when using **Copy once** with the Duplicate Pages method. Each translation becomes independent after creation. To sync changes, you'll need to manually apply them to each translation.

If you want automatic syncing, use the Advanced Translation Editor (Method 1) with the default "Copy" setting instead.

---

## Hosting

### General

#### Web Application Firewalls (WAF) Blocking Save Requests

In some configurations, saving changes may be blocked by a Web Application Firewall (WAF) incorrectly flagging the request as a security threat. If this happens, you'll see the warning: `The response is not a valid JSON response` when attempting to save your content. This issue typically arises when complex attributes are present in the post content, such as scroll animations or responsive settings, which are stored as JSON objects. Some highly sensitive firewall configurations may misinterpret these structured data requests as potential threats.

For example, Nectarblocks stores complex attributes in the following format:

```html
<!-- wp:nectar-blocks/row {"blockId":"block-1aFVVcO","bgColor":{"desktop":{"type":"solid","solidValue":"#ffffff"},"tablet":{"type":"solid","solidValue":"#000000"},"mobile":{"type":"solid","solidValue":"#888888"},"hover":{}}} -->
```

If you encounter this issue, we recommend contacting your hosting provider to review the WAF configuration. They may be able to temporarily disable or adjust its sensitivity to allow these requests to pass through successfully.

### Provider-Specific Issues

#### Hostinger

##### Poorly Configured Default Caching Plugin

* Found 7/4/24
* The Lightspeed Caching Plugin enabled by default on Hostinger plans is tuned to cache for logged in users, which includes Admin users. If the cache is not updated then you cannot see the changes made to your website as you are still viewing an older, cached copy.
* Solution:
  * Option 1: Disable caching for logged in users.
  * Option 2: Clear cache after making any change (this will be a painful workflow).

#### Wordpress.com

##### Fixed in 1.0.4 - WP.com injecting metric collection into saving function

* Found 7/3/24
* `wordpress.com` is overriding a core WP JS function that affects saving generating page CSS correctly.
* Fix: Update to version `1.1.0` of Nectarblocks.

---

## Third-party Plugins Conflicts

Duplicate Page

* When a page is duplicated, the new page may display 'Block contains unexpected or invalid content.' errors. This occurs because the plugin escapes data during duplication, disrupting the saved settings within Nectarblocks elements. To avoid this, you can use the Duplicate Post plugin or copy your page in Code view and paste it into a new page before switching back to Visual editor mode.

  Brainstorm Force Starter Templates

* Found 7/4/24
* When the Brainstorm Force Starter Templates plugin is active, importing Nectarblocks demo templates will not function correctly.
* Solution: Disable the plugin before [importing a demo](../../demo-importer#demo-installation).

  CoBlocks

* Found 12/18/24
* When the CoBlocks plugin is active, it causes JS errors in the editor with Nectarblocks because the plugin globally extends and modifies non-namespaced attributes across all blocks. This overrides some attributes of elements in Nectarblocks, resulting in functionality breaking.
* Solution: Disable the plugin when using Nectarblocks.

---

## Header Builder (Troubleshooting)

## Header Builder Troubleshooting

Answers to the questions we hear most about headers built with the **[Header Builder](../header-builder/overview.mdx)**.

### The menu button doesn't open anything

- **The header's menu has no links.** The off canvas panel is only added to the page when the header's Navigation block has at least one link. Keep at least one, even if the menu button replaces the links at every screen size.
- **You're opening it from your own button.** Check that the button has the `nectar-ocm-trigger-open` class under **Advanced → Additional CSS class(es)**. The **Slide Out From Side Hover Triggered** style only opens from the header's own menu button, so pick another style if you need a custom trigger.
- **An optimization plugin is blocking theme files.** Plugins that remove, delay or combine CSS and JavaScript can stop the panel from loading. Exclude the theme's files from those features and test again.

See **[Off Canvas Menu](../header-builder/off-canvas-menu.mdx)** for how the panel opens and closes.

### The Transparent state never shows

**Transparent Header** in **Appearance → Customize → Header Navigation → Transparent Header Effect** is the master switch. While it's off, no page uses the Transparent state, even if the page's own **Transparent Header** toggle is on. With it on, choose the pages under **Automatically Enable On** or turn it on per page. See **[When each state applies](../header-builder/header-states.mdx#when-each-state-applies)**.

### The logo should change when the header is transparent or scrolled

The Image block can't swap its image per state. Use two logos and show one at a time with **Display** in each state. See **[Show a different logo in a state](../header-builder/header-states.mdx#show-a-different-logo-in-a-state)**.

### I can't change the mobile breakpoint

The Header Builder uses fixed screen sizes, and the Customizer's **Header Mobile Breakpoint** only applies to the classic header. See **[Screen sizes](../header-builder/overview.mdx#screen-sizes)**.

If a long menu wraps on small laptop screens before the menu button takes over, reduce the Navigation block's **Gap** or font **Size**, or turn on **Desktop** under the Overlay tab's **Display** to use the menu button at every size.

### The Mega Menu option in Appearance → Menus does nothing

That option belongs to the classic theme header. In a Header Navigation template, add a **Megamenu** block inside a menu item's submenu instead. See **[Building a Megamenu](../header-builder/building-a-megamenu.mdx)**.

### A header layout from the Template Library shows up below my header

Header layouts need to go into a Header Navigation template, not a page. Inserted into a page, the layout becomes part of that page's content. Create the template in the Theme Builder and insert the layout there, or copy the row out of the page and paste it into the template. See **[Template Library](../template-library.mdx#header-and-off-canvas-layouts)**.

### Menu items show "(Invalid)", or the menu list is full of copies

See **[Working with menus](../blocks/navigation.mdx#working-with-menus)**.

### A blend mode on the logo doesn't mix with the page behind it

The header is fixed to the top of the screen, which gives it its own stacking context. A blend mode such as Difference set on a logo or link only mixes with the header itself, not with the page scrolling under it.

To blend with the page, put the blend mode on the whole header in **[Custom Global Code](../plugin-options-panel/custom-global-code.mdx)** and keep the header's background transparent:

```css
#nectar-nav {
  mix-blend-mode: difference;
}
```

This blends the entire header, so the menu blends along with the logo.

### Safari's toolbar colors on iPhone don't match my header

From iOS 26, Safari ignores the `theme-color` tag and colors its toolbars from the page itself. By default both bars follow the page background, set in **Appearance → Customize → General Settings → Styling → Theme Background Color**. A header with a solid background that spans the full width at the top of the screen can tint the top bar. A floating header with a gap above it doesn't.

### Related

- **[Header Builder](../header-builder/overview.mdx)**
- **[Header States](../header-builder/header-states.mdx)**
- **[Off Canvas Menu](../header-builder/off-canvas-menu.mdx)**
- **[Navigation](../blocks/navigation.mdx)**

---

## License after a domain change

## License Problems After a Domain Change

### Updates or the Template Library stopped working after moving the site

Your Nectarblocks activation is bound to the domain it was registered on. After a move, the plugin shows a notice on its admin screens (administrators only) with a **Transfer license to your-new-domain.com** button. Click it once; the page reloads when the transfer completes and updates and the Template Library work again.

Things to check if the notice or the button does not behave as expected:

- **No notice is shown.** The notice only appears on Nectarblocks admin screens (the Nectarblocks admin panel and its tabs) and only to users who can manage options. It also stays hidden once dismissed for that particular old/new domain pair.
- **You dismissed it by mistake.** Open the **Authorization** tab, enter your serial key and press **Register** — registering at the current domain has the same effect as a transfer.
- **"This license has been transferred too many times recently."** A key can be transferred three times in seven days. Wait and try again.
- **"This site's activation was released from your Nectarblocks account."** The seat was deregistered in the account portal. Register the key again from the Authorization tab.
- **"This license has reached its maximum number of activations."** Free a seat in your Nectarblocks account first, then register or transfer again.

The full list of transfer messages is on the [Licensing](/plugin-options-panel/licensing#transfer-errors) page.

### The notice appeared on a staging site or a clone

Do **not** transfer. A staging copy or cloned database is indistinguishable from a moved site, and a transfer deactivates the original activation. Dismiss the notice instead; it stays dismissed for that old/new domain pair.

### "This site's license is no longer active"

The activation was released from your account (deregistered in the portal, refunded, or the key was cancelled) or could not be renewed automatically. Follow the **Manage license** link in the notice or open the **Authorization** tab, enter your key and press **Register**. If the key was cancelled, contact [support](/troubleshooting/support).

---

## Contacting Support

You can reach us from the support page in our application dashboard: [Support](https://app.nectarblocks.com/support).

---

## WooCommerce Templates

Version 3 brings full **WooCommerce** support to the **[Theme Builder](./theme-builder)**. You can rebuild your entire shopping experience — product, archive, cart, checkout, account and order-confirmation pages — with Nectar blocks and WooCommerce's own blocks, in the familiar block editor, with the correct template context.

The WooCommerce template types only appear in the Theme Builder when the **WooCommerce** plugin is installed and active.

### Template types

From **Theme Builder → Add New Template**, the **WooCommerce** group offers:

- **Single Product** — the individual product page.
- **Product Archive** — the shop page and product category / tag / attribute archives.
- **Cart** — the cart page.
- **Checkout** — the checkout page.
- **My Account** — the customer account area.
- **Order Confirmation** — the "order received" / thank-you page.

Each is rendered through the Theme Builder wherever it matches, replacing WooCommerce's default page output.

### Creating a WooCommerce template

1. In the WordPress admin, open **Theme Builder** and click **Add New Template**.
2. In the **WooCommerce** group, choose a template type and click **Create Template**.
3. The template opens pre-populated with sensible default content so you have a working starting point.
4. Lay it out with Nectar blocks (Row, Column, Flex Box, Text, …) and the **WooCommerce blocks** that carry live store data — for example Product Gallery, Product Price, Product Rating, Add-to-Cart, Product Details, Product Collection (great for related/upsell products), Breadcrumbs, Catalog Sorting and Product Reviews.
5. Optionally set **display conditions** to target specific products, categories, user roles or logged-in state — the same conditions available to every Theme Builder template. You can even create several templates of the same type for different audiences.
6. **Publish** the template. (Drafts don't render on the front end.)

### Zero-specificity style scoping

WooCommerce ships a lot of its own CSS. To keep your template styling flexible without fighting those defaults, Nectarblocks scopes the theme's and plugin's styles with the CSS `:where()` selector, which contributes **zero specificity**. In practice this means your block styles win predictably and you can restyle WooCommerce blocks freely, without specificity wars or a pile of `!important`.

### Good to know

- WooCommerce blocks are normally restricted to the Site Editor; the Theme Builder re-enables them in the post editor so you can use them here, and relaxes some block-ancestor constraints (e.g. product rating outside a strict product context) so they work inside any layout you build.
- Each template type ships with optional **default content** as a starting point — you're free to clear it and build from scratch.

### Related

- **[Theme Builder](./theme-builder)** — create and manage all your templates, including WooCommerce.
- **WooCommerce customizer options** live under **Theme → Customizer Options → WooCommerce** for store-wide styling outside the templates.