Odrin uses Elementor as its recommended page builder. When creating or editing a page, click the "Edit with Elementor" button to access the visual drag-and-drop editor.

Elementor provides a live frontend editing experience where you can see your changes in real-time. Simply drag widgets from the panel on the left and drop them onto your page.

It's recommended to install the dummy demo content. It inserts configured pages like the online demo of the Theme. You'll see how easy it is to edit a page this way.

Note: If you're upgrading from a previous version that used Unyson, your existing pages will continue to work. See the Page Builder FAQ section for more details.

---

Elementor Widgets

The theme comes with custom Elementor widgets, most in the "Odrin" category (a few exceptions noted below). These are available in the Elementor editor panel when editing any page.

Book Widgets

• Books Panel - Showcase selected books with their preview text and interactive hover effects with book thickness animation. Supports columns (1-5), book thickness settings (none/thin/normal/thick), and optional Read Book and Add to Cart buttons. (Category: "Leona")
• Book Image - Display a book cover (from a WooCommerce Product or custom image) with parallax background, price overlay, page flip effect, and Read The Book button. Four layout options for positioning the background and main images. (Category: "General")
• Featured Books - Display selected books in a grid layout. Select specific products via a multi-select and configure the number of columns with a slider.
• Recent Books - Display the latest products in a grid. Filter by product category, set number of products and columns, with style controls for title and price typography and colors.
• Selected Products - Display a curated selection of products with a repeater control. Supports configurable columns, thumbnail size, and card title/price styling.
• All Products - Display all products with filtering by categories, configurable columns, limit, sort order, product visibility, thumbnail size, and title/price styling with regular price opacity control.
• Single Product - Highlight a single product with detailed display. Options for showing book series, title, price, Read the Book button, Add to Cart button, thumbnail size, image/text alignment, content padding, background color, and extensive typography controls.
• Button - Read the Book - A dedicated button for opening the book preview chapters. Supports button types (default/colored), custom text, product selection, alignment, size, icon with position/spacing, button ID, typography, normal/hover colors, border, box shadow, and padding.

Content Widgets

• Multi Heading - Advanced heading with up to three heading slots, each supporting rotating text animation with configurable effect and speed. Controls for link, size, HTML tag, alignment, display mode, typography, color, text shadow, blend mode, and spacing.
• Special Text Block - Title with content, image, and two style versions (light and color). Includes title and subtitle color and typography controls.
• Blockquote - Styled quotation block with optional decorative quote marks (single or double style), content and author fields, text alignment, padding, border controls, quote size/spacing, content/author typography, and normal/hover colors.
• Blog - Display blog posts with configurable layout. Options for number of posts, columns, blog style (default or events styling), display date/categories toggles, image cropping, show excerpt, category filtering (hide/show specific categories), and View All button.
• List - Styled list element with numbered or unordered types. Uses a repeater for items (title/subtitle/content) with list position and styling controls for title, subtitle, content, and numbers.
• Button Group - Group of buttons with repeater control. Each button supports type (default/colored/minimal), separator, text, on-click action (link or read the book with product selection), size, icon, and per-button styling. Group controls for stacking, alignment, and spacing.

Events & Countdown

• Events - Full-featured events display widget with header section (title, custom header, or featured event styles), background image, overlay/text color, featured event selector, date/category filters, content width, events per page, columns, display year, show past events with separate count, category filtering (hide/show), and extensive style controls for title, date, location, and header typography.
• Upcoming Events - Display upcoming events in a compact format with options for number of events, columns, display year, show past events, category filtering (hide/show specific categories), and View All button.
• Countdown - Countdown timer to a specific date. Supports countdown type (countdown timer or text), release date, expired text, countdown text, text alignment, and typography/color controls for numbers, text, and expired text.
• Upcoming Book - Showcase an upcoming book with image (custom or from product), title, above-title text, short description, content background color, content alignment, and optional countdown section with release date, expired text, release text, and heading/countdown styling.

Other Widgets

• Content Slider - Slide-based content carousel with repeater slides (image, title, subtitle, content). Supports equal height, auto height, images lightbox, and title/subtitle color and typography controls.
• Testimonial Carousel - Rotating testimonials display with repeater items (text, author, company, URL). Controls for content alignment, auto height, text/author/company typography and colors, carousel spacing, and dots color.
• Extended Google Maps - Embed a Google Map with API key, address, zoom, height, scroll disable, default UI toggle, custom marker, and JSON style support.
• Mailchimp - Newsletter subscription form powered by the Mailchimp for WordPress (MC4WP) plugin. Requires the MC4WP plugin to be installed and configured. Provides styling controls for text color, alignment, and button typography/colors/padding.

Widget Extensions

The theme extends several of Elementor's built-in widgets with additional controls:

• Heading - Adds a dropcap toggle and a skin selector (default/subtitle) to the built-in Heading widget.
• Icon Box - Adds a "Behind Title" icon position option to the built-in Icon Box widget.
• Section - Adds parallax background controls (enable parallax, position with custom X/Y, repeat, size, speed) to the Section widget.
• Container - Adds background parallax toggle and parallax speed to the Container widget.
• Button - Adds theme-specific button types (Default/Colored/Minimal), separator controls (with width, height, color), icon color, and hover text color.
• Toggle - Adds active state background color control.
• Accordion - Adds active state background color control.
• Testimonial - Adds an Image or Icon switcher with icon selector to the built-in Testimonial widget.
• Common (All Widgets) - Adds extended margin units (vw, vh) and an Absolute Positioning section (enable toggle, top/right/bottom/left values) to all widgets and sections.

---

Page Builder Shortcodes (Legacy - Unyson)

Note: This section applies to the legacy Unyson page builder. For new installations using Elementor, see the Elementor Widgets section above. The Elementor widgets provide equivalent functionality.

It's recommended to put the different shortcodes into sections and columns. That way your page will have a well aligned and ordered flow.

Most of the shortcodes are self-explanatory. Here is a list of short descriptions for some of the more specific ones:

Section

Many options are available in this shortcode. Some of them:

• You can insert inner spacing (padding). The values are inserted with space between them in clock-work order - for example "50px 20px 50px 20px" means padding top and bottom is 50px and left and right is 20px, this can also be written shortly as "50px 20px". You can also specify the Mobile Padding which is used when the site is viewed on a mobile device.

• Background Color and Background Image. There is also an additional option - Filter that will insert a transparent (or not) colored overlay above your background image.

• Text Color - this option changes the text color of the shortcodes placed in the Section.

• Parallax Image - can be switched On or Off.

Column

Most options here affect the Shortcodes placed inside the Column. Some of the options:

• Custom Padding - when enabled, gives you the option to place custom padding for the column.

• Background Color - adds a background color to the Column.

• Text and Buttons Positions - this option affects the Shortcodes placed inside the Column. Keep in mind that some Shortcodes have their own options for the Text Alignment and can override this option.

Book Image

With this shortcode, you can put an emphasis on a Custom Image or Product by using it in conjunction with a parallax background image. You have the options to select the Book Image Type - Product Image or Custom Image.

• The Product Image option gets the Image of the selected Product. You can also choose to show the Price and Read The Book button over the Image (if there are any Read The Book Chapters for the selected Book).
• The Custom Image lets you upload an Image to show. You can add a Link for the Image and its Width and Height.

The shortcode has an option for the images Layout - specifies the position of the Background and Main images.

More Information on how to create Products can be found in the Creating a Product section.

Books Panel

Here you can select specific books which can be showcased together with their preview text (this is the text in the Product short description field when editing a product) next to their image.

In the Shortcode Options, you can configure which books to be displayed as well as the Book Thickness when a book is hovered (in the example the Capricorn Book is hovered). You can also choose to show the Read The Book button.

More Information on how to create Products can be found in the Creating a Product section.

Button

Display a Button with a specific Button Label. You can select between two types of buttons - Normal and Product.

• For the Normal Button, you can select the Button Link and should the link open in a New Window.

• For the Product Button you can select the Book and the Button Link Type. The View Button links to the Single Book Page, the Add To Cart adds the Book to the Cart and the Read The Book opens the Chapters for reading if there are any for the selected Book.

You can also pick the Color of the button.

Events

With this shortcode, you can display the events you have created. You can choose the Number of Events To Show, Show Past Events as well as a View All button.

Important: For the View All button to work make sure that you have published one (and only one) page that uses the Page Template "Events". You can read how to create an Events Page in the [Events Page section][events_page].

More Information and how to create Events can be found in the [Creating an Event section][creating_an_event].

Featured Books

Similarly to the Books Panel Shortcode here you can select specific books (WooCommerce Products) to be displayed. The difference is that with this shortcode they are displayed in a grid styling without any preview text. You can also select the Number Of Columns they are shown.

Recent Books

Displays in the same way as the Featured Books Shortcode, but instead of selecting specific products to show it presents all of the latest products. There is an option to select the Number Of Products To Display and the Number Of Columns. You can also Show Only Products from Specific Category.

Special Heading

You can insert a title with a subtitle as well as select the Heading Size and Heading Position. This can be used to put titles for the different sections of the page.

Special Text Block

Inserts a Title with some content and an image. Has two versions - light and color. Because the image is always cropped to a square, you can select which part of the image to be shown with a priority. This can be adjusted with the Vertical Image Position and Horizontal Image Position fields. For example, if you have a very tall portrait image, but you want to show the top central part of it, you can select Top for Vertical Position and Center for Horizontal Position.

Upcoming Book

Here you can add information for an upcoming book. There are options for the Book Image, Book Title and Book Description. You can also create a Countdown Timer to the Release Date, with Expired Text shown when the timer expires or simply write some text instead of showing a timer.

Additional Shortcodes

The following shortcodes are also available in the Unyson builder:

• Accordion - Collapsible content panels.
• Blockquote - Styled quotation block.
• Blog - Display blog posts.
• Box Icon - Icon with text content.
• Content Slider - Slide-based content carousel.
• List - Styled list element.
• Media Image - Display an image with optional link.
• Media Video - Embed a video.
• Notification - Alert/notification message box.
• Tabs - Tabbed content panels.
• Testimonial Carousel - Rotating testimonials.
• Text Block - Simple text content block.

Spacer

Can be used for adding spacing between components. Also, features an additional field for height when viewed on mobile.

Hide on Desktop and Hide on Mobile option fields

All of the Shortcodes can be hidden either on mobile or on desktop. That way you can remove or show different elements for the different devices.

Animation On Scroll

Also available to all Shortcodes. When enabled you can add an animation to the element, which activates on scroll. The Animation Type and Delay can be adjusted.

---

Page Builder Templates

Elementor Templates

Odrin includes pre-designed Elementor page templates that you can insert into any page.

Step 1 - Import the templates into your library (one-time)

Go to Elementor > Odrin Templates in your WordPress admin, and click the Import button next to Demo 1 (or Demo 2, or both). This adds all the Odrin page templates to your Elementor template library. You can safely click Import more than once - templates that already exist will be skipped.

Note: If you run the 1 Click Demo Import, the Elementor templates are added to your library automatically as part of that process - you can skip this step.

Step 2 - Use the templates in a page

1. Edit any page with Elementor
2. Click the folder icon (Add Template) near the center of the editor
3. Open the My Templates tab - all imported Odrin templates will be listed
4. Click Insert on the template you want to use

You can also browse and manage your imported templates under Templates > Saved Templates in the WordPress admin.

Unyson Templates (Legacy)

If you're using the legacy Unyson builder, the structure of most of the Online Demo Pages can be found and used under the Templates menu when editing a Page with the Unyson Builder. You can find the button, next to the Publish button in the Unyson Builder:

Clicking one of the Templates will load the Shortcodes used in the corresponding Page in the Online Demo.

Note: If you haven't imported the 1 Click Demo Content, there might be some bugs or issues with some of the Templates' Shortcodes. This is because they might link to some other Page, that isn't available (for example a Product).

---

Odrin now supports Elementor as the recommended page builder for creating beautiful pages. Elementor offers a modern, visual drag-and-drop editing experience directly on the frontend of your site.

For New Users

If you're setting up a fresh Odrin installation, you'll be using Elementor to build your pages. This is the recommended approach as Elementor provides:

• Live Frontend Editing - See your changes in real-time as you make them
• Drag & Drop Interface - Intuitive visual editor
• Mobile Responsive Controls - Edit how your pages look on different devices
• Global Settings - Set site-wide colors and typography in one place
• Regular Updates - Active development and large community support
• Pre-built Templates - Access to Elementor's template library

For Existing Users (Legacy Unyson Pages)

If you've been using Odrin with Unyson page builder, don't worry! Your existing pages will continue to work perfectly. The theme automatically detects your Unyson content and ensures backward compatibility.

When you have existing Unyson content:

• Unyson will be listed as a required plugin during theme setup
• Your existing pages will continue to render correctly
• You can still edit Unyson pages using the Unyson builder
• New pages can be created with either Elementor or Unyson

---

Page Builder FAQ

I'm a new user. Where is the page builder?

Odrin uses Elementor as its page builder. After installing and activating the Elementor plugin:

1. Create a new page or edit an existing one
2. Click the "Edit with Elementor" button
3. Start building your page with the visual drag-and-drop editor

Why don't I see Unyson in the required plugins list?

If you're setting up a fresh installation with no existing Unyson content, Unyson won't appear in the plugin requirements. This is intentional - new users should use Elementor, which provides a better editing experience. Unyson is only shown to users who have existing legacy content.

I'm an existing user. Why am I being asked to install Unyson?

The theme detected that you have existing pages built with Unyson (the legacy page builder). To ensure your existing content continues to work properly, Unyson is required for your installation.

Can I use both Elementor and Unyson?

Yes! If you have existing Unyson content, you can:

• Continue editing existing pages with Unyson
• Create new pages with Elementor
• Both builders can coexist on the same installation

Should I migrate my Unyson pages to Elementor?

This is optional. Your Unyson pages will continue to work indefinitely. However, if you want to take advantage of Elementor's features, you can gradually recreate pages using Elementor. There's no automatic migration tool, so this would be a manual process.

I see a "Legacy Builder Page" notice when editing. What does this mean?

This notice appears when you're editing a page that was built with Unyson. It's just informing you that:

• You can continue editing with Unyson (click "Edit with Unyson")
• Or you can create a new version of the page using Elementor

You can dismiss this notice if you prefer not to see it.

Where do I set theme colors and fonts?

For Elementor users: Go to Elementor > Site Settings > Global Colors and Global Fonts. These settings will apply to all pages built with Elementor.

For Unyson/legacy pages: Go to Theme Settings > Style and Typography tabs.

Note: If you have both builders, Elementor's global settings take priority for Elementor-built pages, while Theme Settings apply to Unyson pages.

I installed Elementor but my old pages look broken. What happened?

Your old Unyson pages should continue to work. If they appear broken:

1. Make sure the Unyson plugin is installed and activated
2. Check that the Unyson Page Builder extension is enabled
3. Clear any caching plugins you may have

If you're editing an old page in Elementor by mistake, the Unyson shortcodes won't render in the Elementor editor. Use the WordPress editor or Unyson builder for those pages.

How do I know if a page was built with Elementor or Unyson?

When editing a page in the WordPress admin:

• Elementor pages will show an "Edit with Elementor" button
• Unyson pages will show the Unyson builder interface or contain shortcodes like [section], [special_heading], etc.

The theme also shows a notice when editing legacy Unyson pages to help you identify them.

Can I convert a Unyson page to Elementor automatically?

Unfortunately, there's no automatic conversion tool. The page builders use different systems. To migrate a page:

1. Create a new page
2. Recreate the layout using Elementor widgets
3. Copy text content manually
4. Re-add images
5. Publish and redirect or replace the old page

I accidentally deleted Unyson. Will my pages break?

If you have pages built with Unyson and you deactivate/delete it:

• The pages will show raw shortcode text instead of rendered content
• Re-install and activate Unyson to restore them

The theme will prompt you to install Unyson if it detects you have legacy content.

Do the Odrin shortcodes work in Elementor?

The Unyson shortcodes (like [special_heading], [books_panel], etc.) are specific to the Unyson builder. For Elementor, use Elementor's native widgets or the custom Odrin Elementor widgets that provide similar functionality.

Where are the Elementor templates for Odrin?

Odrin includes pre-designed Elementor templates, but they must be imported into your Elementor library once before they appear in the editor:

1. Go to Elementor > Odrin Templates in your WordPress admin
2. Click Import next to Demo 1 and/or Demo 2
3. Edit any page with Elementor, click the folder icon (Add Template), and open the My Templates tab - the Odrin templates will be listed there

The 1 Click Demo Import runs this step automatically as part of the demo installation.

I don't want to use any page builder. Can I just use the classic editor?

Yes! You can use the WordPress classic editor (or block editor) for simple pages. The theme doesn't require a page builder - it's just recommended for creating more complex layouts.

The Theme Settings panel mentions Elementor. Why?

If you have both Elementor and Unyson installed, the Theme Settings panel shows helpful notes explaining that some settings (like colors and typography) can also be configured in Elementor. This helps you understand where to make changes depending on which builder you're using.

I'm confused about where to configure settings. Can you clarify?

Here's a simple guide:

Will Unyson be removed in future updates?

Unyson will continue to be supported for backward compatibility. Existing users can keep using it as long as they need. However, new features and templates will focus on Elementor going forward.