Advanced options

Custom selector for mid-article unit

🚧

Prerequisites

Requires a strong understanding of CSS.

To target a custom selector (in place of paragraph):

1. Select Taboola in the sidebar menu (left) to open your Taboola plugin settings.
2. Select Other
3. Fill in a selector (right) and an occurrence (left).

🚧

You must identify a CSS selector that works consistently across all your articles.

For example, to target the 2nd figure element, fill in:

• figure under CSS selector (right)
• 2 under occurrence (left)

Supported CSS selectors

• HTML element - e.g. figure.
• Unique ID - e.g. #my-id.

  • Note the leading hash character (#).

• Class - e.g..my-class.

  • Note the leading period (.).
  • You can apply a single class only. For example, the following will fail: .my-class-1.my-class-2

• Combined HTML element and class - e.g. figure.my-class.

  • You can apply a single class only. For example, the following will fail: figure.my-class-1.my-class-2

General guidelines

Always make sure to fill in the relevant occurrence (left). For example, for a unique ID, fill in 1 (the first occurrence).

Homepage (aka Front Page) unit

📘

Which homepage?

• The homepage unit will be applied to your static homepage.
• Under Pages, your static homepage is labelled as Front Page.
• You can assign a static homepage under Settings > Reading Settings.

🚧

Prerequisites

Requires a strong understanding of CSS.

To apply a homepage unit:

1. Select Taboola in the sidebar menu (left) to open your Taboola plugin settings.
2. Click on Show advanced Settings (bottom, left) to view the the homepage settings.
3. Enable the homepage section, using the toggle switch (top, right).
4. Fill in the unit settings:

• Mode (aka Widget ID):

  • Fill in the mode, as provided by Taboola.
  • The mode determines the layout of your homepage unit.

• Placement Name:

  • Fill in the placement, as provided by Taboola.
  • The placement name displays in Taboola reporting.
  • It can optionally be used to activate specialized Taboola products and layouts.

• CSS selector: A CSS selector for an element that you will target on the page. The unit will be placed just below this element.

• 🚧

  1. Identify a target element will always be present on the homepage.
  2. If you update your homepage, make sure to verify that your CSS selector still works.

• Some examples:

  • To target a section, fill in section.
  • To target an ID of my-id (e.g.<div id="my-id">), fill in #my-id.

    Note the leading hash character (#) in the selector, indicating that this is an ID.

  • To target a class of my-class (e.g. <div class="my-class">), fill in .my-class.

    Note the leading period (.) in the selector, indicating that this is a class.

• Occurrence - fill in the occurrence of the above, target element.

• Example:

  • To target the 2nd section, fill in 2.

    If your selecor is unique - e.g. a unique ID - you can ignore this field.

5. Click on Apply changes (bottom, right).
6. If no errors are reported, browse to your website and verify that the unit displays correctly.

👍

CSS Selector

For assistance with CSS selectors, reach out via our online community, or contact Taboola Support.