Home General Editor Options

Editor Options

Last updated on Sep 16, 2025

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 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