Divi Essential Documentation

⌘K
  2. Home
  4. Divi Essential Documentat...
  6. Modules
  8. Logo Tree

Logo Tree

Overview

The Logo Tree module displays your brand’s ecosystem as an interactive, animated tree diagram. A central main logo connects to multiple node items via animated lines, with flowing dots traveling along the connections. Choose from five stunning background effects (Floating Particles, Twinkling Stars, Grid Mesh, Aurora Waves, or Simple Gradient) and three line styles (Bezier Curves, Wave Pattern, or Straight Lines). Each node can have its own image, label, size, optional link, and custom position. Ideal for showcasing technology stacks, partner networks, service ecosystems, or organizational structures.

Content Settings

Tree Items

Tree Items  (Sortable List)

Add, remove, reorder, or duplicate individual tree node items. Click “Add New Tree Item” to create a new node. Each item has its own settings for image, label, size, and position (see Child Item Settings below).

Main Logo

Logo Image  (File Upload)

Upload the main logo image that appears at the center-top of the tree.

Logo Text  (Text Field)

Text displayed below the main logo.

Tree Settings

Background Effect  (Dropdown)

Choose a background animation effect for the tree area.

  • Available options: Floating Particles, Twinkling Stars, Grid Mesh, Aurora Waves, Simple Gradient
  • Default: Floating Particles

Line Style  (Dropdown)

Choose how lines connect the main logo to the nodes.

  • Available options: Bezier Curves, Wave Pattern, Straight Lines
  • Default: Bezier Curves

Particle Count  (Slider)

Number of background particles or stars displayed.

  • Range: 10 to 200
  • Default: 80

Background

Standard Divi background options. By default, a dark blue gradient is applied (from #1a1a2e to #0f3460).

Design Settings

Tree Colors

Line Color  (Color Picker)

Color of the connecting lines between the main logo and nodes.

  • Default: Purple with transparency (rgba 139, 92, 246, 0.6)

Line Glow Color  (Color Picker)

Glow effect color around the connecting lines.

  • Default: Purple with low opacity (rgba 139, 92, 246, 0.3)

Particle Color  (Color Picker)

Color of background particles or stars.

  • Default: Purple with transparency (rgba 139, 92, 246, 0.4)

Flow Dot Color  (Color Picker)

Color of the animated dots flowing along the connecting lines.

  • Default: Light purple (#a78bfa)

Main Logo

Logo Image Size  (Slider)

Width and height of the main logo image.

  • Range: 20 to 200 (in px)
  • Default: 40px

Size  (Slider)

Width and height of the main logo wrapper (the circular container).

  • Range: 40 to 300 (in px)

Main Logo (continued)

Logo image border, wrapper background (default: dark semi-transparent), logo text font styling, wrapper border, box shadow, and padding options.

Node

Background, border, and box shadow options for all node items.

Node Image

Border options for node images. By default, images have fully rounded (circular) corners.

Node Label

Background and font styling options for node labels (the tooltip text shown on hover). Default font is 12px, weight 500, white color with a dark semi-transparent background.

Built-in Style Options

Standard Divi style groups including Sizing (height controls — default 560px desktop, 450px tablet, 350px phone), Spacing, Border, Box Shadow, Filters, Transform, and Animation.

Advanced Settings

  • Custom CSS — Write custom CSS targeting specific parts of the module: Main Logo, Node, Node Label, Connector Line, and Container.
  • Visibility — Show or hide this module on desktop, tablet, or phone.
  • Transition — Customize hover transition duration and style.
  • Position — Control the module’s positioning (relative, absolute, fixed, sticky).
  • Scroll Effects — Add parallax or scroll-triggered animation effects.
  • HTML Attributes — Add custom data attributes to the module.
  • Conditions — Set conditions for when this module should display.

Child Item Settings: Logo Tree Item (Child)

Each Logo Tree Item represents a single node in the tree. Configure its image, label, size, link, and optionally set a custom position.

Content Settings

Node Settings

Node Image  (File Upload)

Upload an icon or image for this node. This appears inside the node circle.

Label  (Text Field)

Tooltip label shown when hovering over the node.

Link URL  (Text Field)

Optional link — when set, clicking the node navigates to this URL.

Node Size  (Slider)

Size of this node circle in pixels. Supports separate values for desktop, tablet, and phone.

  • Range: 30 to 150 (in px)
  • Default: 65 on desktop, 50 on tablet, 40 on phone

Position X (%)  (Slider)

Horizontal position as a percentage of the container width. Leave at -1 for automatic placement.

  • Range: -1 to 100
  • Default: -1 (auto placement)

Position Y (%)  (Slider)

Vertical position as a percentage of the container height. Leave at -1 for automatic placement.

  • Range: -1 to 100
  • Default: -1 (auto placement)

Advanced Settings

  • HTML Attributes — Add custom data attributes to this tree item.

Tips & Best Practices

  • Leave Position X and Position Y at -1 (the default) to let nodes auto-arrange in balanced rows. Only set custom positions when you need precise control over where specific nodes appear.
  • For a professional tech-stack showcase, use the dark gradient background (the default) with Floating Particles and Bezier Curves for a modern, futuristic look.
  • Adjust the module height in the Sizing group to give nodes more room — the default is 560px on desktop but you may need more for trees with many nodes.
  • Use the Node Size setting on each child item to create visual hierarchy — make key partners or technologies larger than secondary ones.
  • All four color settings (Line Color, Line Glow, Particle Color, Flow Dot Color) work together to create the overall color theme. Try matching them all to your brand color with varying opacity levels for a cohesive look.

How can we help?