> For the complete documentation index, see [llms.txt](https://userflux.gitbook.io/userflux-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://userflux.gitbook.io/userflux-docs/feature-guides/user-journeys/email-builder/body.md).

# Body

The "Body" settings allow you to define global styles that apply to your entire email template, ensuring a consistent look and feel. This includes default text colours, background colours, content width, and global link styling.

### Accessing Body Settings

**Navigate to the Body Tab:** In the right-hand sidebar of the email editor, click on the **Body** tab. This will switch the sidebar to display global styling options for the email.

<div align="left"><figure><img src="/files/5NjHoHVhxQiEsH5jx32R" alt="" width="353"><figcaption></figcaption></figure></div>

### Customising Global Body Styles

The following properties can be adjusted under the "Body" tab:

* **Text Color:**
  * This sets the default colour for all text within your email (e.g., paragraph text). Individual content elements can override this setting.
  * Click the colour swatch next to "Text Color" to open the color picker.
  * Select your desired default text colour (e.g., a bright red `#EB1010` ). All text elements that do not have a specific colour set will update to this new default.
* **Background Colour:**
  * This sets the background colour for the entire email canvas area that is outside your main content block (if the content width is less than 100% of the viewport) or for the entire email body if no other backgrounds are set.
  * Click the color swatch next to "Background Coloru."
  * Select your desired background colour (e.g., a medium blue `#3B8DDE`). The background of the email canvas will change.
* **Content Width:**
  * Defines the maximum width of your email's main content area. This is crucial for readability and how your email appears in different email clients.
  * Enter a pixel value in the "Content Width" input field or use the `+` / `-` buttons (e.g., `550px` default, changed to `580px`, then `650px`).
  * The content blocks on the canvas will adjust to this new width.
* **Content Alignment:**
  * Aligns the entire content block (defined by "Content Width") within the email viewport.
  * Options are typically `Left`, `Center` (default), `Right`.
* **Font Family:**
  * Sets the default font for all text in the email. This can be overridden by specific font settings on individual text elements or headings.
  * Select a font from the "Font Family" dropdown (e.g., "Cabin" default, changed to "Arial Black").
* **Font Weight:**
  * Sets the default font weight for text (e.g., "Regular," "Bold").
  * Select a weight from the "Font Weight" dropdown (e.g., "Regular" default, changed to "Bold").

<div align="left"><figure><img src="/files/tLyiTuVmPun1PjdyKbS7" alt="" width="277"><figcaption></figcaption></figure></div>

#### Global Link Styling

These settings define the default appearance for all hyperlinks in your email, unless overridden by an element's specific link settings (or if an element is set *not* to inherit body styles for links).

* **Colour:** Sets the default coloru for link text.
* **Hover Colorur:** Sets the colour of link text when a user hovers their mouse over it.
* **Underline:** Toggle on/off to set whether links are underlined by default.
* **Hover Underline:** Toggle on/off to set whether links are underlined on hover. (Video shows toggling "Underline" and "Hover Underline" off).

<div align="left"><figure><img src="/files/RH1qnrFTOqbKE8Bk5N3y" alt="" width="273"><figcaption></figcaption></figure></div>

#### Global Background Image

You can set a background image for the entire email body.

* **Upload Image:** Click to upload an image from your computer.
* **More Images:** Access stock photos or previously uploaded images.&#x20;
* **Image URL:** Paste a URL for an image hosted online.

<div align="left"><figure><img src="/files/odYXC5Vhu1dYLGOzmfpx" alt="" width="283"><figcaption></figcaption></figure></div>

Once an image is selected or uploaded, additional "Image Options" appear:

* **Image Size:**
  * `Contain`: Scales the image down to fit within the container while maintaining aspect ratio. All of the image will be visible.
  * `Cover`: Scales the image to fill the entire container, potentially cropping some parts of the image to maintain aspect ratio.
  * `Custom`: Allows manual setting of width and height.<br>
* **Repeat:** Control how the background image repeats (`No Repeat`, `Repeat`, `Repeat X`, `Repeat Y`).
* **Position:** Align the background image (e.g., `Center`, `Top Left`, etc.).
* **Width/Height:** (If "Image Size" is "Custom") Set specific dimensions.

<div align="left"><figure><img src="/files/7o6QRW7pDLOhFxXI6szU" alt="" width="260"><figcaption></figcaption></figure></div>

* **Edit Image:** Clicking "Edit Image" (if available after an image is selected) opens an image editor tool. This tool typically offers options like:
  * Filter
  * Resize
  * Crop
  * Draw
  * Text
  * Shapes
  * Stickers
  * Frame
  * Corners

<figure><img src="/files/LCxkWjLhtF0n66gtawTc" alt=""><figcaption></figcaption></figure>