Sepehr

A theme for Elementor in the shadcn/ui design language. Version 1.0.0, by techNello.

Getting started

Requirements

WordPress 6.8 or newer
PHP 8.1 or newer
Elementor (the free version is enough)
WooCommerce, if you want a shop. Current WooCommerce versions need WordPress 7.0.

Free and Pro

The Sepehr theme and the Sepehr UI plugin are free. Sepehr Pro is a plugin that replaces the free Sepehr UI: your pages and settings stay as they are, and you get all 35 widgets, 9 starter sites and 12 presets, the form, the menu, header and footer templates, the slider and live search.

Install

In WordPress, go to Appearance → Themes → Add New Theme → Upload Theme, choose the theme zip (sepehr-free from technello.com/sepehr), then Install Now and Activate.
A notice recommends Elementor and Sepehr UI. Choose Begin installing plugins, or go to Appearance → Install Plugins. Tick both, choose Install and Apply. They are installed and activated in one step.
Elementor may open its own welcome screen. You can skip it.
Open the new Sepehr menu to choose a preset or import a starter site.

Move to Pro

Download the Sepehr UI Pro zip from your purchase email.
Go to Plugins → Add New Plugin → Upload Plugin, upload it and activate it. The free Sepehr UI turns itself off.
Enter your licence key when asked. Updates and support come with it.

The theme also works without the plugins, as a clean blog theme. The widgets, presets and starter sites come from Sepehr UI. Features marked Pro in this guide need Sepehr Pro.

Presets and starter sites

Both are in the Sepehr admin menu.

Presets set all colors, the corner radius and the shadow style at once. There are 3 in the free edition and 12 in Pro. Choosing one does not change your content, and you can adjust everything afterwards.

Starter sites create Home, About and Contact pages with sample content and a menu. The free edition has Digital Agency and Digital Magazine. Pro has all 9: Digital Agency, Cafe Restaurant, Specialist Clinic, Online Store, Learning Academy, Real Estate Agency, Beauty Salon, Law Firm and Digital Magazine. The magazine also creates sample posts, a blog page and sidebar widgets.

Pages from an earlier starter import are moved to the trash when you import another one. Your own pages stay.

All sample text is translatable. It appears in your site language if a translation for that language is installed, and in English otherwise.

Colors, fonts and shadows

Go to Appearance → Customize → Sepehr. Changes preview live, and Publish saves them.

Section	What you can change
Presets	A ready-made starting point
Colors	Every color. Text on brand colors switches between dark and light by itself, to stay readable.
Dark mode	Colors used when the site or a section is dark, and the default mode
Fonts	Heading and text fonts
Corners & shadows	Corner radius, shadow style and strength

These settings are saved in your Elementor kit, so Elementor → Site Settings shows the same values. Site Settings also has a Design System tab. Change them in either place.

Fonts

Inter, Manrope, Lora, Vazirmatn, Estedad and Lalezar come with the plugin and load from your own server. In Elementor they are listed under Sepehr (bundled). Google Fonts stay available. To turn them off and make no requests to Google, tick the option on the Sepehr page when you apply a preset.

The built-in header and footer

Set your logo in Appearance → Customize → Site Identity; a separate dark mode logo is there too. The rest is under Customize → Sepehr:

Header & menu: logo and site name (each optional), logo height, sticky header, search, cart and dark mode buttons, and a call-to-action button.
Footer: logo and site name, a separate footer logo, a short text and the copyright line. The three footer columns show the widgets from Appearance → Widgets → Footer column 1–3. If they are empty, they show the footer menu and your contact details.
Contact details: phone, email, address and social links, shown in the footer and the mobile menu.

Create the menu in Appearance → Menus and assign it to Primary menu. Drag items under one another to make submenus, up to three levels. On phones the menu opens as a side sheet.

Your own header or footer, with free Elementor (Pro)

In Templates → Saved Templates, add a template of the type Page or Container and design it. The Menu, Logo, Live Search and Cart button widgets are made for this.
In Customize → Sepehr → Header & menu (or Footer), choose it under Header template (or Footer template).

The template then appears on every page, including pages not built with Elementor.

Widgets

In the Elementor editor, the widgets are in the Sepehr UI group. Each loads its CSS and scripts only on pages that use it. The free edition has 18: Hero, Section Heading, Feature Grid, Card, Button, Badge, Alert, Accordion / FAQ, Tabs, Stats / Counters, Steps / Timeline, Testimonials, Call to Action, Contact Info, Social Links, Recent posts, Logo and Dark Mode Toggle. Pro has them all.

Group	Widgets
Basics	Button, Badge, Card, Alert, Accordion / FAQ, Tabs, Dialog / Sheet, Avatar Group, Progress Bars
Page sections	Slider, Hero, Section Heading, Feature Grid, Bento Grid, Pricing, Testimonials, Logo Cloud, Stats / Counters, Steps / Timeline, Team, Call to Action, Comparison Table, Price List / Menu
Site parts	Menu, Logo (light & dark), Live Search, Dark Mode Toggle, Recent posts, Form
Business	Contact Info, Opening Hours, Map & Directions, Social Links, Trust Seals, Countdown
Shop (with WooCommerce)	Products, Cart button

To highlight a word in a heading, put it between asterisks: A site that brings *customers*.

In Contact Info, write WhatsApp numbers in the international format, with the country code.

Live Search finds products, pages and posts as you type. It opens from the widget, the header button, or with Ctrl K (⌘ K on a Mac).

Forms (Pro)

The Form widget needs no other plugin. Field types: text, email, phone, website, number, date, long text, dropdown, one choice, several choices and acceptance. Each field can be required, and full or half width.

Email: messages go to the addresses under Send to, or to the site administrator if that is empty. Replying answers the sender, when the form has an email field.
Stored messages: with Keep a copy on the site, messages are kept under Sepehr → Form submissions, where only administrators can read them. Mention this in your privacy policy. WordPress's personal data export and erase tools cover them, by email address.
Spam: a hidden trap field and a timer stop simple bots without a captcha. Each visitor can send 20 messages per hour.

WordPress's email reaches inboxes reliably only with a proper mail setup. If messages do not arrive, install an SMTP plugin. Stored copies do not depend on email.

Blog

Customize → Sepehr → Blog sets card or list layout, columns, the sidebar position and the excerpt length. Single post controls breadcrumbs, reading time, share buttons, the author box, previous and next links and related posts. Widgets for the sidebar are in Appearance → Widgets → Blog sidebar, including a Recent posts widget.

WooCommerce

Install WooCommerce as usual; the theme styles the shop, product, cart, checkout and account pages to match your design. The Products widget shows products anywhere, adds them to the cart without reloading, and confirms with a small message. The shop has its own Shop sidebar widget area.

Elementor Pro

Elementor Pro is optional and is not included. Everything in this guide works with free Elementor. If you use Pro, its widgets follow your Sepehr design, and a Theme Builder template takes priority over the Sepehr header and footer choices.

Languages and right-to-left

Sepehr is written in English and ready for translation: the .pot files are in wp-content/themes/sepehr/languages and wp-content/plugins/sepehr-ui/languages, with the text domains sepehr and sepehr-ui. A plugin such as Loco Translate can translate them from your dashboard.

Right-to-left languages work without settings: when the WordPress language is right-to-left, the layout, menus and animations follow. Sites in Arabic-script languages use Vazirmatn by default; other sites use Inter.

Child theme and hooks

Install and activate sepehr-child.zip for code changes, so that theme updates do not overwrite them. Colors and fonts do not need it.

Hook	Use
`sepehr_ui/form_submitted`	Action after a form is sent. Receives the values, the widget settings and the page id.
`sepehr_ui/form_rate_limit`	Filter for messages per visitor per hour. Raise it if your server sits behind a proxy that hides visitor addresses.
`sepehr_print_location`	Filter to print your own header or footer in place of the built-in one.
`sepehr_social_links`, `sepehr_article_footer`	Actions in the theme where the plugin prints social links and share buttons.
`sepehr_ui/starter_imported`	Action after a starter site import.

Updates

Sepehr Pro updates itself from your dashboard, like any plugin, while your licence is active. To update the theme or the free plugin from a download, upload the new zip over the old one, and WordPress offers to replace it.

Troubleshooting

“The uploaded file exceeds the upload_max_filesize directive”

Your server limits uploads to less than the theme file. Ask your host to raise upload_max_filesize and post_max_size, or unzip sepehr.zip and upload the sepehr folder to wp-content/themes by FTP.

“Sepehr UI” cannot be activated

It needs Elementor. Install and activate Elementor first.

The page shows old colors or styles

Go to Elementor → Tools → Regenerate CSS & Data, then clear any caching plugin.

Form messages do not arrive by email

See the note under Forms. Check Sepehr → Form submissions to confirm that the form itself worked.

A submenu or the mobile menu is empty

Assign a menu to Primary menu under Appearance → Menus.

Support

Contact us at technello.com. Please include your WordPress, PHP and Elementor versions and a link to the page in question.

Support covers questions about using the theme's features, and fixing bugs in the theme and its plugin. It does not cover custom design or code changes, third-party plugins, or hosting problems.

Credits

The design language of shadcn/ui (MIT), Lucide icons (ISC), Simple Icons (CC0), Embla Carousel (MIT), Tailwind CSS palette values (MIT)
TGM Plugin Activation (GPL 2.0 or later)
Fonts under the SIL Open Font License 1.1: Inter, Manrope, Lora, Vazirmatn, Estedad, Lalezar

Starter site images are our own work (CC0). The product images on the live demo are also our own, and are not part of the download.

Changelog

1.0.0

First public release.