Views (Design Presets) — Plugixa FAQ

A View is a saved visual configuration — colors, typography, spacing, layout, animations. Views control the look of an FAQ; shortcodes control the behavior of an instance (see Views vs Shortcodes).

The plugin seeds 5 default views on activation:

Slug	Name	Tier
accordion	Accordion (default)	Free
accordion-dark	Accordion Dark	Free
timeline	Timeline	PRO
horizontal-normal	Horizontal Normal	PRO
horizontal-modern	Horizontal Modern	PRO

The view list

Go to Plugixa FAQ → Views.

For each view you see: name, slug, default badge (★), last modified. The currently selected default view is used whenever a shortcode omits the view attribute.

Actions on each row:

• Edit — open the view editor.
• Duplicate — clone with a new slug. Useful as a starting point for a variant.
• Set as default — make this the default for all shortcodes.
• Delete — remove (non-default views only).

Creating a view

Click Add New View. A blank view form opens:

Give the view a name and slug, then configure each panel on the left-hand nav.

View configuration

Views are stored as JSON in the config column of wp_plugixa_faq_views. The panels below map directly to keys in that JSON.

Layout

Setting	Values	Notes
Style	accordion, timeline PRO, horizontal PRO	The root layout.
Horizontal style	normal, modern	Only relevant when Style = horizontal.
Columns	desktop, tablet, mobile (int)	Grid columns per breakpoint. Only affects horizontal.
Group by category	boolean	Renders category headers above grouped FAQs.
Default image	attachment ID	Fallback image for FAQs without one.

Colors

The color panel covers the question header, answer content, border, icon, and (for timeline) dot + line. Each area has background, text, hover, and active states where applicable.

Color fields are hex only; alpha is handled by a separate opacity slider.

Typography

Font family, size, weight, line-height, letter-spacing, text-transform, text-align — configured separately for question and answer.

The font picker lists:

• Web-safe system fonts (Arial, Georgia, etc.).
• The 20 most popular Google Fonts, fetched via GET /views/google-fonts.

Google Fonts load on the frontend via a single @font-face declaration injected inline — no external CSS link needed.

Border & Spacing

Setting	Notes
Border width	Pixels.
Border radius	Pixels.
Border color	Hex.
Padding	Inside each FAQ item. Supports shorthand.
Margin	Between FAQ items.
Gap	For grid layouts (horizontal).

Icons

Setting	Values
Icon style	chevron, caret, plus-minus, arrow, custom-svg, none
Icon position	left, right
Icon size	Pixels.
Icon color	Default + active states.

Icon SVGs are overridable by placing a file at {theme}/plugixa-faq/icons/{slug}.php. See Hooks → Template System.

Animation

Setting	Values
Type	slide, fade, none
Speed	Duration in milliseconds (default 300).
Easing	linear, ease, ease-in-out, ease-out, cubic-bezier(...)

Pagination

Views control the style of pagination controls (colors, borders, button shape). Whether pagination is enabled is a shortcode/per-instance decision.

Setting	Notes
Style	numbers (Free), load_more PRO, infinite_scroll PRO
Colors	Background, text, active state, hover.
Border radius	Pixels.
Gap	Between items.
Labels	previous, next, load_more strings.
Alignment	left, center, right.

Feedback widget

Styling for the “Was this helpful?” buttons — colors, spacing, icon. Whether the widget shows is a shortcode/FAQ/category decision.

Search

Styling for the search input rendered above the FAQ list.

Shadows

Global box-shadow applied to FAQ items. enabled + value (CSS shorthand).

Dark mode

Setting	Values
Enabled	boolean

You can also force dark mode from a shortcode with dark_mode="enabled", overriding the view’s setting.

Live preview

The right pane of the view editor renders your current view configuration with 3 sample FAQs. Updates are instant — no save needed.

The preview supports:

• Toggle between light and dark preview backgrounds.
• Switch breakpoints (mobile / tablet / desktop).
• Expand/collapse items to test animations.

Using a view

In a shortcode:

[plugixa_faq view="accordion-dark"]
[plugixa_faq view="12"]                  <!-- by ID -->

In a Gutenberg block, pick it from the View dropdown in the block sidebar.

Setting the default

Any shortcode without a view attribute uses the default view. Change the default from the list (Set as default action) or from Settings → Display.

Views vs Shortcodes

Because it’s easy to confuse the two:

	Views	Shortcodes
Controls	Visual appearance	Content selection and behavior
Examples	Colors, fonts, animations, pagination style	Category filter, open_first, allow_multiple
Scope	Reusable across many shortcodes	Per-instance on a page
Storage	wp_plugixa_faq_views	wp_plugixa_faq_shortcodes (saved configs)

Rule of thumb: if it’d be weird for two instances on the same page to differ, it belongs to the view. If it’s instance-specific, it belongs to the shortcode.

REST API

Method	Endpoint	Description
GET	/views	List.
POST	/views	Create.
GET	/views/{id}	Get by ID.
GET	/views/slug/{slug}	Get by slug. Public.
PUT	/views/{id}	Update.
DELETE	/views/{id}	Delete.
POST	/views/{id}/duplicate	Clone.
POST	/views/{id}/set-default	Make default.
DELETE	/views/bulk	Bulk delete.
GET	/views/preview-faqs	Preview FAQs using a provided config.
GET	/views/default-config	The baseline config as a starting point.
GET	/views/google-fonts	Available Google Fonts.

Related

• Shortcodes
• Blocks
• Settings