Getting Started
This section covers the essential steps to begin building your website with the Stylora theme. You’ll learn how to install WordPress, set up the Stylora theme, and import the demo content. At the end of this section, you'll also find a list of frequently asked questions to help with basic troubleshooting.
Installing WordPress
Before installing the Stylora theme, ensure that WordPress is already installed and running on your server. If you're new to WordPress or need help installing it, please refer to the following official guides:
Official WordPress Installation GuideAlternative guide: Installing WordPress using different methods
WPBeginner Installation TutorialTo use the Stylora theme, your site must be running WordPress version 5.0 or higher.
Theme Structure
Once you download the main Stylora Package.zip file from ThemeForest, go ahead and unzip it. Inside the unzipped folder, you’ll find the following files and folders:
stylora.zip: This is the main WordPress theme file. You can upload this directly through the WordPress dashboard.
stylora-child.zip: This is the child theme for Stylora. It’s recommended for advanced customizations to preserve changes during theme updates.
Documentation: This folder contains the full documentation for the Stylora theme. Open this folder and launch the index.html file in your browser to get started.
Demo Data: This folder includes the demo content files such as content.xml, widgets.wie, theme-settings.json, and Revolution Slider .zip files.
Theme Installation via WordPress
To install the Stylora theme via the WordPress admin panel, follow the steps below:
1. Log in to your WordPress admin dashboard.
2. Navigate to Appearance > Themes.
3. Click the Add New button, then click Upload Theme.
4. Click the Browse button, select the stylora.zip file from your computer, and click Install Now.
5. Once the theme is installed, click the Activate link to activate Stylora.
Theme Installation via FTP
If you’ve downloaded the theme and prefer to install it via FTP, refer to the helpful article linked below. Please note that this method is recommended for advanced users only, as it involves direct access to your WordPress files. Incorrect steps may lead to file loss or cause your site to go offline.
How to Use FTP to Upload Files to WordPress (WPBeginner)Child Theme Installation
If you plan to modify the source code, such as PHP files, JavaScript files, or style.css, we strongly recommend using the child theme. This ensures that your customizations are preserved when updates are made to the Stylora parent theme.
You can install the child theme the same way you install the main theme. Please refer to the instructions in the "Theme Installation via WordPress" section.
The child theme file is included in the main download package from ThemeForest. Once unzipped, you will find it inside the Stylora Package folder as stylora-child.zip.
Note: Make sure the parent theme is installed and activated before installing the child theme.
Installing Theme Plugins
After successfully installing and activating the theme, you will see a notice prompting you to install the required and recommended plugins. To ensure that the Stylora theme functions correctly, it is important to install these plugins before importing the demo content.
Some of the plugins are bundled with the theme, while others will be downloaded from the official WordPress.org repository.
1. Click on Begin installing plugins
2. Select all plugins, choose Install from the bulk actions dropdown, and click the Apply button.
Note: If you plan to build an online store using Stylora, make sure the WooCommerce plugin is installed and activated. WooCommerce is now included as one of the required plugins, but you still need to install and activate it before setting up your shop. For detailed setup instructions, refer to the WooCommerce section of this user guide.
Updating Stylora Theme
You can update the Stylora theme by following these steps:
- Download the latest Stylora Package.zip file from your ThemeForest account.
- Unzip the package and locate the stylora.zip file inside it.
- Extract stylora.zip to get the updated stylora theme folder.
- Using FTP or your hosting file manager, replace the existing /wp-content/themes/stylora folder on your website with the new one.
Demo Importer
With the Stylora theme, you can either start building your site from scratch or import one of the pre-built demo layouts as a starting point. Once imported, you can customize the content and design to match your needs.
One Click Demo Importer
Note: Importing demo data (posts, pages, images, theme settings, etc.) is the fastest way to set up your theme. It allows you to start editing ready-made content rather than creating everything from scratch.
The Stylora theme includes a built-in one-click demo importer, available under Appearance > Demo Importer. On the Demo Importer page, simply click the Import Demo Data button.
After clicking Import Demo Data, you’ll be taken to a confirmation page. Click the Continue & Import button to begin. Please wait for the process to complete and do not refresh the page. You’ll receive a notification once the import finishes.
Note: Do not check any plugins listed above the importer. These are recommended by WordPress plugins, not required by the Stylora theme.
Note: Be sure to read the instructions above carefully before importing the demo content.
Important: If the demo content does not import correctly or appears incomplete, reset your WordPress installation using the WP Reset plugin and try importing the demo again from a clean setup. This ensures a smooth and successful import process.
Troubleshooting FAQ
1. Why do I see a white screen when importing demo content?
If you experience a white screen or error during the demo import, it’s likely due to the maximum execution time limit on your server. Most servers are set to 30 seconds by default, which may not be enough for the full import to complete. We recommend increasing it to at least 120 seconds using one of the following methods:
- In wp-config.php:
set_time_limit(120); - In .htaccess:
php_value max_execution_time 120 - In php.ini:
max_execution_time = 120
Note: If you're unsure how to apply these changes, please contact your hosting provider for help.
2. Demo content imported, but images are missing?
Sometimes images may not import due to slow internet connection or temporary server interruption. If images are missing after the import, we recommend resetting your website using the WP Reset plugin and then reimporting the demo content.
Important: If the demo content does not import correctly or appears incomplete, reset your WordPress installation using the WP Reset plugin and try importing the demo again from a clean setup. This ensures a smooth and successful import process.
3. How do I optimize my site?
You can analyze your website's performance using GTMetrix or Google PageSpeed Insights.
We also recommend this detailed guide: Speed Up WordPress – WPBeginner
4. How can I make my website more secure?
Use a security plugin such as Wordfence or iThemes Security, keep WordPress core, themes, and plugins updated, and follow this guide: Secure Your WordPress Site
5. Changes not showing up on the front end?
This is often due to browser or plugin caching. Clear your browser cache and purge cache from any caching plugins (e.g., W3 Total Cache, WP Rocket) or CDN services like Cloudflare.
6. Elementor widgets are not loading or broken?
Ensure that both Elementor and the Droplet Framework plugin are installed and activated.
7. How do I increase the PHP memory limit?
Low PHP memory can cause theme or plugin failures. To increase it, add the following to your wp-config.php file:
define('WP_MEMORY_LIMIT', '256M');
8. Menu or widget areas are not showing correctly?
After demo import, If the mnenus are nto assigned automatically then go to Appearance → Menus to assign menus to their proper locations. For widgets, check Appearance → Widgets and make sure widget areas are correctly filled.
9. Website layout breaks after installing a new plugin?
This could be caused by a conflict with another plugin. Deactivate plugins one-by-one to identify the source. Use only trusted, regularly updated plugins compatible with the latest WordPress version.
10. Theme updates are available. How do I safely update?
Before updating, always back up your website (files and database). If you've made direct theme edits, use a child theme to avoid losing changes. Updates can be installed via Appearance > Themes or FTP.
11. How to fix broken styles or layout after editing a page?
Click Regenerate CSS & Data from Elementor → Tools. This is helpful if you edited widgets, global fonts, or theme files and notice broken styling.
12. Why is my site loading slowly?
- Use optimized images (WebP or compressed JPG/PNG). You can compress images using tools like TinyJPG before uploading them to your website.
- Minimize the number of active plugins.
- Install a caching plugin (e.g., WP Rocket or LiteSpeed Cache).
- Use a CDN (e.g., Cloudflare) to improve performance globally.
13. How do I know if my hosting is compatible?
Your hosting should meet the following minimum requirements:
- PHP 7.4 or higher
- MySQL 5.6 or higher / MariaDB 10.1+
- WordPress memory limit: 128MB minimum
We recommend using WordPress-optimized hosting such as SiteGround, Cloudways, Hostinger, or similar providers.
Pages
This section of the user guide covers how to create pages using WordPress, Elementor, and the available page templates included with the Stylora theme. You'll also learn how to access page-specific options for greater control over your layouts.
Create New Page
To create a new page, go to Pages > Add New in your WordPress admin dashboard.
1. Enter a title for your page.
2. You can begin adding content using the Gutenberg editor. Click the plus (+) icon in the top-left corner to open the block panel. From there, you can drag blocks into the content area to build your layout.
3. Once you’ve added your content, click the Publish button to make the page live.
Note: If you prefer not to use the Gutenberg editor, you can build your page using the Elementor Page Builder. Simply click the Edit with Elementor button. This will launch the Elementor interface, where you can design your page using drag-and-drop widgets. If you're new to Elementor, see the Getting Started with Elementor section of this guide.
To use Elementor for page creation, click the Edit with Elementor button at the top of the editor screen.
Once Elementor loads, you’ll see the editing panel on the left and your page preview on the right. You can now drag and drop widgets to design your layout in real time.
Page Meta Options
Page Meta Options allow you to customize individual pages, including layout, visibility of elements, and styling. These options override the global settings defined in the Stylora Theme Panel and apply only to the current page.
Note: Settings saved in this panel will only affect the page being edited. For consistent site-wide design, use Stylora Theme Options globally and apply page-level changes only when needed.
Layout
Define the overall structure of your page. This section allows you to:
- Select the Page Layout – Standard, Boxed, or Passepartout
- Enable or disable Page Grid Lines
- Set a Background color or image for the page
- Adjust top and bottom padding for the content area
Page Layout determines the framework within which your content is displayed. Depending on your design needs, you can choose a layout style that best fits the look and feel of your site.
Sidebar
The Page Sidebar option allows you to control whether a sidebar is displayed on your page and, if enabled, whether it appears on the right or left side of your content.
Note: Choosing No Sidebar will remove the sidebar while keeping your content within the standard container width. If you prefer your content to span the entire width of the page (edge to edge), use the Fullwidth Page Template instead.
Logos
Upload different logo versions for various header conditions. This section includes:
- Enable or disable logo display
- Set dark/light logos for transparent and solid headers
- Upload sticky and mobile logos
- Adjust logo sizes for desktop, sticky, and mobile headers
Header Topbar
This area controls the topbar above your header. Options include:
- Enable/disable topbar
- Set position and alignment of info elements (email, phone, etc.)
- Customize background and text styles
Header
The main header area controls site-wide navigation and layout. In this section, you can:
- Enable/disable the header
- Select the header layout style
- Adjust navigation alignment
- Enable header elements such as search, cart icon, offcanvas menu, button, social links, or custom text
Note: Header settings applied here will only affect this page, not the global layout.
Mobile Header
Customize mobile-specific header appearance and layout. You can control:
- Mobile header visibility
- Menu toggle style
- Logo visibility and size for mobile view
- Mobile header background and text styling
Page Slider
Display a Revolution Slider on the page. If Show Page Slider is enabled, select a slider from the list.
Titlebar
This section includes settings for the titlebar area above your content. You can:
- Enable or disable the titlebar
- Select the titlebar style and alignment
Titlebar Background
Customize the titlebar background with a solid color or image. You can also:
- Set title and subtitle colors
- Add top and bottom padding to the titlebar
Footer
Control which parts of the footer are visible on this page. Options include:
- Show or hide the entire footer
- Show or hide the footer top area
- Enable or disable the footer widget area
- Show or hide the copyright bar
Note: Footer settings here apply only to this page and will not affect the global layout.
Blog Page
This option allows you to define specific behavior when using a blog layout on a page. To enable blog features, you must select the blog template for the page. A dedicated guide for blog page setup is covered in the next section.
Note: To properly display your blog posts, you must assign the Blog Page Template to the page. This template activates blog-specific layout and features. The blog page meta settings only apply with Blog Page Template is selected they are not used on regular pages with the default template.
Page Templates
Page templates are predefined layouts that control the structure and appearance of individual pages. They allow you to apply different layouts or designs to specific pages based on your needs. Stylora includes several useful page templates to help you build a flexible site:
Page Fullwidth: Use this template to create a standard page where your content spans the entire width of the screen, without sidebars.
Note: The Fullwidth Page Template is ideal for creating edge-to-edge layouts where your content spans the entire width of the screen. This template removes sidebars and container padding, making it perfect for custom-designed pages built with page builders like Elementor such as landing pages, homepages, or portfolios that require full visual width.
Keep in mind: If you select No Sidebar in the page layout settings, it will only hide the sidebar but still display the content within the default container width. To create true fullwidth layouts, make sure to use the Page Fullwidth template.
Page Blank: Select this template to create a clean page with no header or footer. Ideal for landing pages or custom layouts.
Page Blog: Use this template to set up your main blog page, where posts will be listed automatically in chronological order.
Note: Once you've applied the Blog template, you can further customize the layout and appearance using the Blog Page options inside the Page Meta Options panel, as described earlier.
Blog
In this section of the User Guide, we will cover how to create blog posts, use post meta options, and configure different post types available in the Stylora theme. You'll also learn how to set up the Blog Page template to display your posts.
Create New Post
To create a new post, go to Posts > Add New from the WordPress admin menu.
1. Enter the post title.
2. Select the post format from the available types (Standard, Video, Audio, Gallery, Quote, Link).
3. Choose a Post Category. If you don’t have one, click on Categories in the sidebar and create a new category.
4. Click Set Featured Image to upload or select an image for the post.
5. Enter the post content using the default WordPress editor (Gutenberg).
6. Click the Publish button to make the post live.
7. Add post tags (optional).
Note: If you prefer not to use the default Gutenberg editor, you can build your post using the Elementor Page Builder. Click the Edit with Elementor button to launch the visual builder. If you're new to Elementor, check the Getting Started with Elementor section.
To create a post using Elementor, click the Edit with Elementor button at the top of the screen.
Post Meta Options
Post Meta Options allow you to control individual settings for each post. For general layout and visibility options, please refer to the Page Meta Options section.
Note: Settings applied here will override global options defined in Stylora Theme Options. It’s recommended to configure styles globally first and then override them locally if needed.
Each post type (Video, Audio, Gallery, Quote, Link) comes with its own dedicated tab in the meta options panel. These tabs allow you to control the specific content and layout of that post type.
Post Types
Stylora supports various post types including Image, Video, Audio, Gallery, Quote, and Link. Once you select a post type, the corresponding meta options tab will appear below the content editor for additional configuration.
1. Video Post Type
Select Video as the post type, then paste your video url code (YouTube, Vimeo, etc.) into the provided field within the Video meta tab.
2. Audio Post Type
Choose Audio as the post type. You can either upload a self-hosted audio file or provide an external link to an audio source (MP3, SoundCloud, etc.) via the Audio meta tab.
3. Gallery Post Type
When using the Gallery post type, upload multiple images in the Gallery meta tab to create an image slider or gallery layout within the post.
4. Quote Post Type
Select Quote as the post type, then input your quote text and optionally the quote author in the Quote meta tab.
5. Link Post Type
Choose Link as the post type and enter the destination URL in the Link meta tab. This is useful for sharing external resources.
Theme Settings
This section of the User Guide provides a complete overview of all the available settings inside the Stylora Theme Options panel located in your WordPress admin area.
Note:These settings are applied globally across your website. However, many of them can be overridden at the page or post level using page meta options, allowing more flexibility for advanced customization
Overview
Each option within the Theme Options panel includes a title and description to help you understand its function and how to use it. This intuitive interface gives you full control over your website’s layout, design, and behavior without needing to touch any code.
1. General Settings
1. Layout
This tab lets you control the overall structure and layout of your theme. Options include theme container width, page padding, enabling or disabling grid lines, setting global content width, and toggling the back-to-top button.
2. Logo
In the Logo tab, you can upload separate logos for different scenarios including dark, light, sticky, mobile, and transparent headers. Additionally, you can define individual logo sizes for desktop, sticky, and mobile views.
3. Open Graph
This section allows you to enable Open Graph meta tags and upload a default Open Graph image. Open Graph tags help improve how your website appears when shared on social media platforms like Facebook, Twitter, LinkedIn, and more. By enabling Open Graph and setting a preview image, you can control the title, description, and thumbnail shown in social shares ensuring better engagement and click-through rates.
2. Header Settings
1. Header Topbar
This tab allows you to toggle the topbar, add custom content such as contact details or working hours, and style the topbar background, text color, height, and more. The topbar is ideal for displaying quick-access information above the main header.
2. Header Layout
Choose from a range of predefined header layouts to match your design needs. You can also enable or disable individual header elements such as the search icon, cart icon, off-canvas menu, social icons, custom text, and buttons allowing for a fully personalized header experience.
3. Header Styling
This tab provides styling options for various header layouts, including standard, centered, divided, minimal, vertical, and sliding headers. You can also style transparent headers and customize submenu background and typography settings.
4. Mobile Header
In this section, you can configure the mobile version of the header. Customize mobile header content, add optional mobile-only text or buttons, and style the mobile navigation for optimal performance on smaller screens.
3. Titlebar Settings
1. Titlebar Settings
This tab allows you to toggle the titlebar on or off, select different titlebar styles, adjust padding, and manage breadcrumb visibility. It helps define the visual identity of each page with titles and navigation context.
2. Titlebar Styling
Style the titlebar with a custom background color or image. You can also customize the colors for the page title, subtitle, and breadcrumb links to align with your branding.
Page Settings
This section lets you configure layout settings for different types of pages globally including regular pages, search results, and archive pages. These settings apply across your website unless a page template (like Fullwidth) or custom layout is used.
1. Global Pages
Here in the Global Pages Admin Panel tab, you can choose a default page layout Left Sidebar, Right Sidebar, or No Sidebar. This layout will be applied to all standard pages unless a specific layout is chosen on the individual page or a Fullwidth page template is selected.
Sidebar Selection: If you choose a Left or Right Sidebar layout, you will also need to select which custom sidebar to display. This provides more control over sidebar content throughout the site.
Note: The layout and sidebar selected here will be applied globally to all pages, unless overridden on individual page settings or if the “Fullwidth” page template is used.
2. Search Pages
Choose the layout for the Search Results Page Left Sidebar, Right Sidebar, or No Sidebar. You can also assign a specific sidebar when using Left or Right Sidebar layout.
3. Archive Pages
Select the layout for Archive Pages (Category, Tags, Author, Date-based archives) Left Sidebar, Right Sidebar, or No Sidebar. You can also choose the sidebar to display with it.
5. Footer Options
The Footer Options panel in Stylora allows you to configure, enable, and style all footer-related areas globally across your site. The footer is divided into multiple sections each with its own controls for layout, content, and appearance. These include the Footer Top Area, Footer Widget Area, and Footer Copyright Area.
1. Footer Settings
This tab lets you enable or disable the global footer. It also allows you to set the main footer styling which will be applied across all footer areas. However, styles set individually in the Footer Top Area, Widget Area, and Copyright Area will override these global styles where applicable.
2. Footer Top Area
Here you can toggle the visibility of the Footer Top Area, select the number of footer columns (e.g., 2, 3, 4, etc.), and adjust spacing and padding. You can also customize its styling including background color, heading color, text color, link color, and link hover color to match your brand identity.
3. Footer Widget Area
Use this section to manage the widget area located above the footer copyright. You can enable or disable it, toggle full-width display, choose the number of widget columns, and add column dividers for visual separation. Just like the Footer Top Area, this section also includes styling controls for background, text, heading, and link appearance.
4. Footer Copyright Area
This tab provides full control over the copyright section. You can enable or disable the area, and configure content alignment (Left, Center, or Right). This section supports various content types such as plain copyright text, a small copyright logo, social media icons, a footer navigation menu, and custom text.
6. Typography Options
The Typography section allows you to configure font settings across various theme elements such as body, headings, header, titlebar, footer, and WooCommerce elements.
1. Body Fonts
Control your website's base typography here. Set the body font family, weight, size, line height, and letter spacing. This also includes settings for global heading fonts (H1–H6) and their individual sizes.
2. Header Fonts
Customize font settings for the Header Topbar, Main Header links, Minimal Header, Header Navigation, and Sub-menu fonts. Ideal for tailoring your site’s header appearance to your branding.
3. Titlebar Fonts
Set fonts for the Titlebar area, including the main title, subtitle, and breadcrumb trail. This helps maintain visual consistency across your inner pages.
4. Footer Fonts
Manage font settings for the Footer Top Area (heading, text, and links), Footer Widget Area (headings and links), and Footer Copyright Area (content, social, and menu text).
5. Product Fonts
Customize WooCommerce product-related typography including Catalog Product Titles, Prices, Single Product Titles, and Single Product Prices.
7. Theme Styling Options
1. General Styling
Configure the global color scheme of your theme, including:
- Accent Color: The primary theme color used for links and buttons. (Alert: Choose Accent Color It’s the most dominant theme color)
- Light Color: A secondary accent used for softer backgrounds. (Alert: Choose Light Color It’s the less dominant theme color)
- Body Text and Heading Colors
- Button Styling: Customize button text, background, and hover colors
- Back to Top Button: Control icon and background styling
2. Form Styling
Style all theme-based forms, including comment forms and Contact Form 7 layouts. You can control input background, border, label, button colors and more.
Note: These form styles will be applied globally across comment forms and supported third-party form plugins like Contact Form 7.
8. Blog Options
This section allows you to configure global blog settings, layouts, and post appearance options.
Blog Styles
Select your blog listing style: Standard, Centered, or List Layout.
Blog Page Settings
Choose between full-width or boxed blog page layout, and select your preferred pagination style.
Blog Post Settings
Configure single post settings such as featured image display, post meta options, excerpt length, and read more button.
Single Post Settings
Choose the layout for single post pages (Left Sidebar, Right Sidebar, or No Sidebar). Toggle visibility of related posts, social share icons, author box, and comment section.
9. Sidebar Options
Use this section to create and manage custom sidebars that can be applied globally or per page/post.
Note: After creating a sidebar in this section, navigate to Appearance > Widgets to assign widgets. The sidebar can then be applied either globally or individually through page/post settings.
10. WooCommerce Options
Manage all WooCommerce-related theme options from this section. Customize the layout, design, and functionality of your shop and product pages.
General Settings
Set the shop page layout (Left Sidebar, Right Sidebar, or No Sidebar), choose catalog layout style, and enable full-width product display.
Shop Settings
Configure the number of product columns and products per page. You can also show percentage-based sale labels.
Single Product Settings
Control single product page layout, thumbnail columns, related products column count, and toggle social share icons.
11. 404 Error Page Options
Customize the design and content of your 404 error page from this section.
404 Page Settings
Choose whether to display an image or text. Set custom title, subtitle, description, and a “Return to Home” button.
404 Page Styling
Style the 404 page by adding a background image, and adjusting title and subtitle colors to match your site design.
12. Social Media Options
Add links to your social media profiles here. These icons can then be displayed in areas like the top bar or footer copyright section.
Note: Social media icons set here will be used in specific theme areas like the header topbar and footer copyright area.
13. Import & Backup
Use this panel to import or export your current theme settings. Helpful for backup or transferring configuration between sites.
Note: Here you can copy or download your current option settings. Keep this safe in case you need to restore them or replicate the settings on another site.
Elementor
In this section of the User Guide, we will introduce you to the Elementor Page Builder, explain how you can use Elementor widgets to build your website, and explore the custom Elementor widgets included with the Stylora WordPress Theme.
Elementor is a powerful, intuitive drag-and-drop page builder plugin for WordPress. It allows you to build your website visually in real time meaning you can see every change live as you make it. Elementor comes packed with a wide range of widgets, from basic image and text elements to more advanced features like accordions, sliders, testimonials, icons, social media embeds, tabs, and much more.
If you're new to Elementor, we highly recommend checking out the following tutorials to get started:
Getting Started with Elementor
https://elementor.com/academy/getting-started-with-elementor/Video Tutorial : Elementor Basic Overview
https://youtu.be/-TPpwuB6dnIElementor Basic Widgets
Elementor comes with pre-built basic widgets that allow you to create pages with drag and drop.
Elementor Theme Widgets
Stylora WordPress Theme also comes with its own Elementor Page Builder widgets to enhance the user experience and expand the Elementor Page Builder functionality. You can find Theme Widgets with the label "DROPLET WIDGETS"
Droplet Accordion
Droplet Accordion widget allows you to display collapsible content sections. Great for FAQs or step-by-step guides.
Droplet Background Parallax
Use this widget to create parallax background effects using images for sections that respond on scroll.
Droplet Button
Create highly customizable buttons with options like solid, outline, round, icon and full-width styles.
Droplet Contact Form 7
This widget integrates with Contact Form 7 plugin allowing you to insert and style forms easily.
Droplet Content Carousel
Display any content type inside a beautiful and customizable carousel slider layout.
Droplet Countdown
Add a countdown timer to promote sales, events, or launches with animated number transitions.
Droplet Crossfade Image
This widget displays two images that transition on hover using a crossfade animation. Ideal for before/after effects.
Droplet Flipbox
Create interactive flip boxes with front and back content, including icons, text and images.
Droplet Heading
Display eye-catching headings with advanced typography, rotation, gradient text and styling options.
Droplet Icon Box
Combine an icon, title and description into a stylish box layout. Useful for features or services.
Droplet Icon List
Create bulleted or numbered icon lists with custom icons and flexible layout controls.
Droplet Image
Insert single images with hover effects, custom links, and full control on layout and spacing.
Droplet Image Accordion
Display multiple images in accordion format that expands on hover or click.
Droplet Image Box
Show an image with a heading and text content beneath it. Useful for services or team sections.
Droplet Image Carousel
Showcase multiple images in a responsive carousel layout with navigation and spacing controls.
Droplet Image Compare
Compare two images side by side with a draggable slider (useful for before/after use cases).
Droplet Image Gallery
Display images in a masonry or grid-based gallery layout with lightbox support.
Droplet Interactive Carousel
Place interactive markers over images to highlight features or callouts with popups.
Droplet Interactive Link
Create visually rich links with hover image transitions. Supports simple, split, and full-width styles.
Droplet Interactive List
Show a list of items with a preview image that changes as you hover over each item.
Droplet Lightbox
Launch media like images, videos, Google Maps, or custom content in a modal popup.
Droplet Marquee
Create scrolling text or image marquees with control over speed, direction, and spacing.
Droplet Posts List
Show a list of posts by category, tag, or latest posts with customizable layouts and meta options.
Droplet Posts Carousel
Display blog posts in an elegant slider or carousel format with full control on styling.
Droplet Price List
Perfect for restaurants or service providers to display pricing tables in a stylish, organized list.
Droplet Stamp
Add animated circular stamp-like graphics with looping effects. Great for highlighting features.
Droplet SVG Image
Display SVG images with animations that trigger on scroll or viewport visibility.
Droplet Tabs
Showcase content in tabbed panels with animated SVG droplets that activate as each tab enters the viewport.
Droplet Testimonial
Showcase individual customer reviews in a stylish block with quote styling and avatar.
Droplet Testimonial Carousel
Display multiple testimonials in a slider format with customizable layout and transitions.
Droplet Trailer Box
Trailer Box is similar to image box but comes with overlay text and hover animations.
Droplet WooCommerce Product Categories
Display product categories with images and titles in grid, list, or carousel format.
Droplet WooCommerce Products
Add WooCommerce products to your page in grid or list layout with filtering and sorting options.
Droplet WooCommerce Products Carousel
Display products in a responsive carousel format. Ideal for featured products, sales, or categories.
WooCommece
In this section of the User Guide we will discuss how to setup the WooCommerce eCommerce plugin with Stylora.
Stylora comes with WooCommerce integration, which allows you to easily create an online shop. Stylora WordPress Theme is fully compatible with the WooCommerce plugin.
Make sure you have installed the WooCommerce plugin before importing demo data. If you haven't, go to Plugins > Add New, search for WooCommerce, and install it from there.
Once WooCommerce is installed, you can also configure its settings from the theme panel under Appearance > Theme Options > WooCommerce.
Getting Started With WooCommerce
https://woocommerce.com/documentation/plugins/woocommerce/getting-started/Adding New Products in WooCommerce
https://docs.woocommerce.com/document/managing-products/Slider Revolution
In this section of the User Guide we will discuss how to set up the Slider Revolution plugin.
Slider Revolution is one of the most powerful and popular slider plugins available. It allows you to create fully responsive sliders, banners, carousels, and galleries with advanced animation and layout capabilities.
If you're not familiar with Slider Revolution, we recommend reviewing the official documentation and video tutorials to get the most out of the plugin:
Slider Revolution Official Documentation
https://www.sliderrevolution.com/manual/Slider Revolution Video Tutorials
https://www.sliderrevolution.com/video-tutorials/Booking
To set up a booking form, ensure you have installed and activated the Contact Form 7 plugin.
Booking Form
Before you can receive any bookings, you first need to create a booking form in Contact Form 7. The Stylora Theme comes with pre-built booking form templates in various styles that you can choose from.
Create a New Form
To create a new form, go to Contact > Add Contact Form in your WordPress admin menu.
1. Enter a title for your form.
2. Add your desired form fields and content.
3. In the Mail tab, configure your email settings and message content.
4. For booking forms, click on the Booking tab and check the option This is a booking form.
5. Click the Save button to publish the form.
To receive booking form submissions, you must check the option This is a Booking Form in the Booking tab. If this option is not enabled, no booking submissions will be recorded.
Booking Form Submissions
Once a booking form is submitted, you will see the submissions under the Bookings tab. The bookings page includes dedicated columns displaying essential details such as Booking ID, Customer Info, Booking Date, Status, and Submission Date.
You can also export all bookings as a CSV file by clicking the Export to CSV button in the Bookings page toolbar.
Create a New Submission
You can also create bookings manually from the WordPress backend. This feature allows site owners to add bookings on behalf of customers, providing flexibility to modify any booking information as needed.
To create a new booking manually, go to Bookings > Add New Booking in your WordPress admin menu.
1. Enter the booking title.
2. Add the customer’s name, email, phone number, booking date, and any booking notes.
3. Choose the booking status: Pending, Confirmed, or Cancelled.
4. Optional: Add any admin notes related to the booking.
5. Click the Publish button to save the booking.
The booking submission feature is a powerful tool for business owners to manage online bookings easily, with fully customizable options.
For more information about Contact Form 7, please see the Contact Form 7 section.
Contact Form 7
In this section of the User Guide, we will explain how to set up the Contact Form 7 plugin and how to display forms on your pages.
Contact Form 7 is a simple yet powerful and widely used free contact form plugin. It supports multiple forms and allows full customization of form fields and mail content using straightforward markup. It also offers features such as Ajax-based submission, CAPTCHA, Akismet spam filtering, and more.
How to Add a Contact Form to a Post or Page
You can add a contact form using two methods:
1. Using Shortcode:
After creating a form in the Contact Form 7 plugin, copy its shortcode and paste it into any WordPress post or page.
2. Using Elementor Widget:
If you are using Elementor, you can add a contact form using the Contact Form 7 widget. We recommend this method, as the widget includes several customization options to control the appearance and layout of the form.
Contact Form 7 Official Documentation
https://contactform7.com/docs/Contact Form 7 Video Tutorial
https://www.youtube.com/watch?v=4-Zcbo1Bxx0Disclaimer
The Stylora theme has been thoroughly tested for compatibility with various browsers and WordPress versions. However, we cannot guarantee that it will function flawlessly with every third-party plugin, custom code, or unique server configuration. We do not offer support for issues resulting from third-party extensions or code conflicts.
Media Usage Disclaimer: All photos and videos used in the Stylora theme demo are for preview purposes only. They are sourced from Shutterstock, Unsplash, Pexels, and iStockPhoto, and remain the copyrighted property of their respective owners. These demo media files may be imported to your website during the demo import process to replicate the layout. However, you are not licensed to use them in commercial or non-commercial projects unless you obtain the proper rights or permission from the original authors. It is recommended to replace them with your own licensed content after import.