Interactive Schedule

The interactive schedule is built and managed using a combination of theme short code and a series of tables.

Step 1: Creating an Interactive Schedule

To set up an interactive schedule base framework, follow the list below. If updating or adding information to the schedule, go to Step 2 or Step 3.

  1. Add a Color Wrapper to the page builder using the Column Wrapper Item drop down
  2. Click the orange cog on the color wrapper to access the options
  3. Add interactive-schedule to the Element ID at the top of the color wrapper options
  4. Save the color wrapper options
  5. Add a Content item to the color wrapper by using the Content Item drop down and dragging it into the color wrapper
  6. Click the orange cog on the content item to access the options
  7. The days of the schedule are made from theme shortcode – Toggle Box; Copy the following short code into the content item editor:[gdlr_toggle_box style="style-1" ]
    [gdlr_tab title="DATE_TITLE_GOES_HERE"]
    DAY_1_CONTENT
    [/gdlr_tab]
    [gdlr_tab title="DATE_TITLE_GOES_HERE"]
    DAY_2_CONTENT
    [/gdlr_tab]
    [gdlr_tab title="DATE_TITLE_GOES_HERE"]
    DAY_3_CONTENT
    [/gdlr_tab]
    [gdlr_tab title="DATE_TITLE_GOES_HERE"]
    DAY_4_CONTENT
    [/gdlr_tab]
    [/gdlr_toggle_box]
  8. The short code above will render 4 days to the schedule, to edit or add additional days, continue to step 2.

Step 2: Adding days to an interactive schedule

Each day of the schedule appears as:

[gdlr_tab title="DATE_TITLE_GOES_HERE"]
DAY_CONTENT
[/gdlr_tab]

 

The tags act as the beginning and closing of the day expand box, the content located in between is the content that will be within that day (the schedule items).

To add additional days to the schedule, simply copy the copy the code above, and paste it in between the [gdlr_toggle_box style="style-1" ] [/gdlr_toggle_box] tags following another day.

Update the title attribute for each [gdlr_tab]  as the date of the schedule day. This appears as DATE_TITLE_GOES_HERE in the short codes above.

Step 3: Adding items to days of the schedule

Each schedule item is a table with 3 columns. Follow the steps below to add an itinerary item to a day of the schedule.

  1. Click in between the [gdlr_tab] tags (where DAY_CONTENT is displayed in the short code above)
  2. Select Table from the top toolbar and navigated to insert table
  3. Click and drag 3 blocks to the right; if the itinerary item has additional expandable details, select 2 rows (3 x 2), if not select 1 row (3 x 1)
  4. After the table has been inserted into the editor, move your insertion point cursor into the first row of the table (any column as long as its the first row)
  5. Select Table from the top toolbar and navigate to Row  and select Table Row Properties
  6. Select Header from the Row type and click Ok
  7. Leaving the first column empty (on both rows if you have 2 rows) enter the date information into the 1st row, second column
  8. Enter the title into the 3rd column, 1st row
  9. If there’s a 2nd row, enter the description in the 3rd column, 2nd row
  10. If there’s an associated image, insert it into the 2nd column, 2nd row at the thumbnail (150 x 150) size

If you’re comfortable using source code, you can copy and paste the following table code snippets in between the [gdlr_tab] tags instead of using the visual editor to insert tables:

2 Row Table

<table>
<thead>
<tr>
<td></td>
<td>TIME_INFORMATION</td>
<td>ITEM_TITLE</td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>IMAGE</td>
<td>ITEM_DESCRIPTION</td>
</tr>
</tbody>
</table>

1 Row Table

<table>
<thead>
<tr>
<td></td>
<td>TIME_INFORMATION</td>
<td>ITEM_TITLE</td>
</tr>
</thead>
</table>

				
X