# Editor Options

The Itinerator plugin works with different WordPress editors and page builders. This guide explains your options and how to use each one.

## Gutenberg Block Editor

The **recommended approach** for most users.

### How It Works
- **Visual editing** - See your content as you build it
- **Drag and drop** - Easy block management
- **Live preview** - See how content will roughly look on the frontend
- **Integrated settings** - Configure blocks directly in the editor

### Adding Itinerator Blocks
1. **Open the block editor** on any page or post
2. **Click the + button** to add a new block
3. **Search for "Itinerator"** in the block inserter
4. **Choose your block** from the available options
5. **Configure settings** in the block sidebar

### Block Categories
- **Itinerator Collections** - Blocks that display multiple items (itineraries, listings, events)
- **Itinerator Content Blocks** - Individual content display blocks (title, description, map)

### Block Configuration
- **Settings panel** - Configure block options in the right sidebar
- **Live preview** - See changes immediately
- **Shortcode display** - Copy the generated shortcode for use elsewhere

## Classic Editor & Page Builders

For users who prefer the classic editor or use page builders like Elementor, Divi, or Beaver Builder.

### How It Works
- **Shortcode-based** - Use shortcodes instead of blocks
- **Copy-paste workflow** - Get shortcodes from blocks (or block documentation), paste into your editor
- **Flexible placement** - Place content anywhere in your layout
- **Page builder compatible** - Works with most popular page builders

### Getting Shortcodes

There are two ways to get shortcodes for use in page builders:

**Method 1: Shortcode Generation Feature (Recommended)**
1. **Create a test page** with the Gutenberg block editor
2. **Add and configure** your desired Itinerator blocks
3. **Copy the generated shortcode** from each block's settings panel
4. **Paste the shortcode** into your page builder's shortcode widget/block

This method ensures you get the exact shortcode with your specific configuration.

**Method 2: Documentation Reference**
- See the [Blocks Overview](blocks/overview.md) for shortcode examples
- Each block documentation includes shortcode syntax
- Use this for reference or when you need to manually construct shortcodes

### Shortcode Syntax

**Basic shortcode:**
```
[tourismo-carousel]
```

**With options:**
```
[tourismo-itineraries show_title="true" show_description="false" columns="3"]
```

**Common shortcode prefixes:**
- `tourismo-` - Main block shortcodes
- `itin-` - Individual content shortcodes

### Page Builder Integration

**Elementor:**
1. Add a **Shortcode widget**
2. Paste your Itinerator shortcode
3. Configure widget settings as needed

**Divi:**
1. Add a **Code module**
2. Paste your Itinerator shortcode
3. Set display options in module settings

**Beaver Builder:**
1. Add a **HTML widget**
2. Paste your Itinerator shortcode
3. Configure widget settings

**Classic Editor:**
1. Switch to **Text mode** (if needed)
2. Paste shortcodes directly into content
3. Switch back to **Visual mode** to see preview

## Choosing Your Approach

### Use Gutenberg Blocks When:
- ✅ You're comfortable with the block editor
- ✅ You want visual editing and live preview
- ✅ You're building new pages from scratch
- ✅ You want the easiest setup process

### Use Shortcodes When:
- ✅ You prefer the classic editor
- ✅ You're using a page builder
- ✅ You need precise placement control
- ✅ You're adding content to existing pages
- ✅ You want to mix with other content easily

## Workflow Comparison

### Gutenberg Workflow
1. Add block → 2. Configure settings → 3. See live preview → 4. Publish

### Shortcode Workflow
1. Configure block (Gutenberg test page) → 2. Copy generated shortcode → 3. Paste in page builder → 4. Publish

## Tips for Both Approaches

### Performance
- **Use page whitelist** in settings to limit script loading
- **Cache your pages** for better performance
- **Optimize images** in your Tourismo admin

### Content Management
- **Update content** in your Tourismo admin, not WordPress
- **Use consistent settings** across similar blocks
- **Test on different devices** to ensure responsiveness

### Troubleshooting
- **Clear caches** if content doesn't update
- **Check API keys** if content doesn't load
- **Verify shortcode syntax** if using page builders

## Next Steps

- **[Getting Started](getting-started.md)** - Create your first page
- **[Blocks Overview](blocks/overview.md)** - Learn about available blocks
- **[Troubleshooting](troubleshooting.md)** - Solve common issues