YOOtheme Florence - Joomla Template

YOOtheme Florence Setup Guide for a Joomla Beauty Salon Website

YOOtheme Florence is easier to approach not as just another attractive template, but as a ready-made foundation for a site where the design, service pages, visual galleries, price lists, and contact details need to turn into a working structure quickly. In this guide, we will go from checking the package and installing it to configuring the look and feel, menus, modules, responsiveness, demo pages, and troubleshooting.

This guide is written for a site owner, webmaster, or Joomla editor who already has the template archive and wants to understand what to do after installation. It does not repeat the product listing. Instead, we will look at how to use Florence layouts effectively, how not to confuse a standard template with a demo package, which sections are worth keeping, what should be replaced with your own content, and how to verify the result on the live front end.

Special attention is given to the YOOtheme Pro and Joomla workflow: template styles, module positions, menu assignment, page builder, media, multilingual setup, and access permissions. These are the areas that usually determine whether a polished demo can become a real website that stays manageable without constant developer support.

What this Joomla template is designed to do

Florence is built for visually expressive websites in the beauty, style, personal care, and fashion space. The official product page shows that it includes ready-made page layouts for the homepage, galleries, price list, about page, careers, contact page, index page, and blog post. That matters more than a simple color palette: the template already assumes a typical visitor journey from first impression to viewing work, services, pricing, trust signals, and contact options.

The main strength of Florence is that it is built on the YOOtheme Pro page builder. That means the site is assembled not only through standard Joomla content, but also through visual sections, rows, elements, output templates, and live preview. For a beauty salon, this is practical: you can quickly replace demo photos, rewrite the service list, set up a booking button, and immediately see how everything looks on the page.

There is a downside as well. If you simply install the template and leave the demo structure unchecked, the site may look polished but remain fragile: the menu may lead to unfinished pages, images may be too heavy, the price list may stay generic, and the contact page may still show someone else’s details. That is why Florence should be implemented as a starter framework, not as a finished site that is ready to publish immediately.

What the official sources confirm

The official Florence product page confirms several practical facts: the template is intended for beauty and fashion websites, comes with ready-made page layouts, offers multiple style variations, includes a large image collection, and can be used as a demo website package with YOOtheme Pro and demo content. The same page also states that the Joomla demo package does not rely on third-party plugins. That reduces the risk of unnecessary dependencies, but it does not remove the need to review modules, menus, media, and permissions.

YOOtheme Pro documentation adds useful context: the customizer splits the interface into a settings panel on the left and a preview on the right, template styles can be duplicated and assigned to menu items, the modules panel shows positions and published modules, and the page builder works with sections, rows, and elements. In practice, that means Florence is best configured through a series of short steps with constant review, not one large round of changes.

Who Florence is a good fit for, and when another route makes more sense

YOOtheme Florence is a strong fit for projects where visual impact matters just as much as information structure. A beauty salon, hair studio, brow studio, photographer, stylist, small fashion portfolio, or local service studio can get a clean foundation quickly: a large hero section, a lookbook, service blocks, pricing, team, contact details, and a blog. A site like this does not always need a complex catalog or a separate CRM integration. In many cases, a clear page, strong photography, fast contact options, and solid mobile presentation are enough.

The template can also work well for an agency that builds Joomla sites for similar niches. Ready-made layouts speed up the start, and style variations help avoid making every site look identical. One project can stay light and airy, another can shift to a more contrast-heavy version, and a third can be adapted to a warmer palette. At the same time, the overall editing logic stays consistent inside YOOtheme Pro.

Florence may not be the right choice if the site primarily needs to function as a complex catalog, marketplace, member area, booking system with deep logic, or a project where the entire design has already been approved in Figma down to the pixel. YOOtheme Pro is flexible, but a visual template still brings a built-in character: large photography, clean spacing, refined typography, and a strong focus on service presentation. If the project needs a completely different information density, it is better to consider another template or build a custom layout.

The main decision point

If you need a site where visitors should quickly understand the salon’s style, view the work, browse services, and get in touch, Florence provides the right starting structure. If the main requirement is complex filtering, user accounts, integration with external booking tools, many user roles, or non-standard business logic, the template should be treated only as a front-end layer, while the functional parts will need to be designed separately.

A simple practical test is to write down the five main actions a visitor should take. If those include "view portfolio," "choose a service," "check pricing," "find contact details," or "read a post or tip," Florence fits the logic well. If the actions revolve around user accounts, bookings, payments, or a large catalog, evaluate the extra extensions before installing the template.

What to check before installation

Before installing anything, make sure you understand exactly which archive you have. YOOtheme Pro documentation clearly distinguishes between a regular theme package for an existing Joomla site and a demo package, which is a full Joomla installation bundled with the template and demo content. This is not a minor detail. If you try to install a demo package like a normal extension on a live site that already exists, the result will be wrong.

For an existing site, you need the YOOtheme Pro template archive for Joomla. It is installed through Joomla’s standard Extension Manager, after which you open the YOOtheme customizer and load the required layouts or style variations. A demo package is used differently: it is unpacked on the server as a separate Joomla installation, and you go through the normal CMS setup process. That option is useful for a new project or a staging environment where you want to study how Florence is assembled internally.

Quick checklist before the first launch

• Make sure the archive is for Joomla, not the WordPress version or a full demo package, if you are installing the template on an existing site.
• Create a backup of the site and database, especially if the site already contains content, menus, and modules.
• Confirm that the administrator has permission to edit templates, because access to the customizer depends on the Edit Templates permission.
• Check that the server meets YOOtheme Pro requirements, including PHP and the GD extension for image processing.
• Prepare your own photos of services, staff, interiors, and finished work in a good resolution so you do not end up publishing demo content.
• Plan a separate staging section or site copy if the current site is already indexed and receiving inquiries.

At this stage, you do not need to configure everything at once. The goal is to eliminate major mistakes: the wrong archive, missing permissions, an unsuitable server, no backup, or editing the live site without testing first.

Installation and the first check in Joomla

The installation process depends on the scenario you choose. If you are working with an existing site, use Joomla’s standard template installation flow. After installation, check whether YOOtheme appears in the admin panel and whether the customizer opens correctly. If you are creating a new site from the demo package, treat it as a full Joomla installation: unpack the package, run the CMS installer, and then replace the demo data with your own.

Scenario 1: existing site

1. Open the Joomla admin panel and go to extension installation.
2. Upload the Joomla template archive, not the demo package.
3. After installation, open the list of template styles and confirm that a YOOtheme style is available.
4. Set the style as default only after testing it on a separate menu item or on a site copy.
5. Open the YOOtheme customizer and make sure the panels Layout, Style, Pages, Templates, Menu, Modules, and Settings are available on the left.

Scenario 2: new site from the demo package

The demo package is useful when you want a site that looks as close as possible to the official demo. It helps you study the structure of Florence sections, menus, modules, and pages without rebuilding every block manually. But this package should never be treated as an update for an existing site. It is a full installation, so use it for a new project or a local staging environment.

After installing the demo package, do not publish the site right away. First replace the contact details, text, images, social media links, demo pricing, and any placeholder menu items. Then go through the site like a visitor: homepage, lookbook, services, contacts, blog, mobile menu, footer, and the contact form if one has been added through a separate extension.

The initial check can be considered successful if the customizer opens, the preview works, the template can be assigned to a test menu item, and saving settings does not trigger permission errors.

Configuring the Florence visual style after installation

Florence depends heavily on visual mood: large photography, generous spacing, subtle accents, refined typography, and a salon-inspired aesthetic. That is why the first post-installation task is not the menu or the footer, but a review of the overall palette, contrast, imagery, and fonts. The official page confirms several Florence style variations: Default, White Beige, White Red, White Orange, Light Pink, and Dark Brown. These are not necessarily separate themes inside the theme, but quick starting points that help define the site’s character.

Open the YOOtheme customizer and start with the style library. If the site should feel soft and premium, the lighter variations are usually easier to adapt for a beauty salon. If the brand already uses a dark palette, you can test a higher-contrast version, but make sure to review readability on photos and buttons. In YOOtheme Pro, color options are adjusted through the color picker, and changes are visible in live preview, which makes quick review much easier.

How to choose a style without creating chaos

Do not jump through every setting one by one. It is better to create a short visual review checklist and run through it after each style variation. Look not only at the homepage, but also at internal layouts such as the price list, contact page, about page, and blog post. Sometimes a style looks great in the hero section but performs worse in pricing or on text-heavy pages.

Colors, fonts, and images

In the YOOtheme Pro style customizer, you can change colors, fonts, spacing, and many UIkit variables. With Florence, it is better to start small: the main accent color, buttons, links, text color over images, and background blocks. If a photo is too bright, do not try to rescue it with text color alone. Use an overlay or replace the image, because Florence’s refined typography does not handle random backgrounds well.

Media settings matter too. YOOtheme Pro documentation describes automatic resizing, responsive images, lazy loading, WebP/AVIF when supported by the server, and focal point control for image cropping. This is especially useful for a template built around portraits and hair: an incorrect focal point can crop out a face or an important visual detail. After replacing photos, review how they look in desktop, tablet, and phone preview.

What not to change on day one

Do not rush into deep changes to Less variables, child theme structure, or complex layout settings before replacing the demo text and images. First get a working version using the built-in style variations. Deeper edits are worth doing only after you know which blocks will actually remain on the site.

Header, menu, and module positions in Florence

For a Joomla template, the header and module positions matter just as much as a beautiful homepage. In Florence, the header should guide visitors to the lookbook, services, salon information, contacts, and blog. YOOtheme Pro documentation shows that the modules panel displays positions and modules, and that menus and modules can be edited directly from the customizer without constantly switching back to separate Joomla screens.

Start with the main menu. Remove extra demo items and keep only what is truly ready. If the site does not yet have a blog or a careers page, do not place them in the header "for later." Visitors read an empty section as unfinished work. For a salon, the usual structure is enough: home, services, portfolio or lookbook, team or about, contacts, and blog if it is already active.

How to use module positions without confusion

YOOtheme Pro documents positions such as toolbar-left, toolbar-right, navbar, header, dialog, sidebar, top, bottom, and builder-1 - builder-6. For Florence, it is more useful to think of them as page layers:

• toolbar works well for a short line with a phone number, business hours, or a language switcher.
• navbar and header handle the main navigation, logo, social icons, and quick search if needed.
• top and bottom are suitable for promo blocks, trust elements, booking prompts, or repeated sections.
• builder-1 - builder-6 are best used through the Position element inside the page builder when you need to place a module in a specific part of the layout.
• sidebar does not appear on pages built as full page builder sections unless the sidebar is placed separately inside the layout.

The last point causes confusion quite often. If a Florence page is built as a full-width layout in the page builder, a standard sidebar may not appear where you would expect it in a classic Joomla template. In that case, use the Position element or a builder module inside the required section instead of trying to "fix" the sidebar with random CSS tweaks.

Menu assignment and template styles

If you need different styling for the homepage, blog, and contact page, use template styles. YOOtheme Pro documentation recommends duplicating the yootheme - Default style, opening the copy through Open Website Builder, and assigning it to the required menu items through Menu Assignment. That is safer than changing one global style and wondering why every page changed at the same time.

Here is a practical example: the Florence homepage may use a more expressive style and a larger hero, while the blog may need a calmer version with better text readability. To do that, create a separate template style for the blog and assign it only to the blog menu item. After saving, confirm that the homepage stayed the same and the blog received its own presentation.

Florence ready-made layouts: what to keep, replace, and review

The official Florence page lists several ready-made page layouts. These are not just decorative pages. Each layout serves a specific beauty-site purpose: presenting a look, a service, people, pricing, contact details, or a blog post. To make the template work as both a reference and conversion-focused structure, you need to understand the role of each layout and replace the demo data in the right order.

Homepage

The homepage should quickly explain the salon’s style and point visitors toward the next step. In the Florence demo, the focus is on strong visual presentation, a headline, services, and lookbook elements. When adapting it, replace not only the heading and photos, but also the order of the content blocks. For a local salon, the usual path is: style and promise, key services, portfolio, pricing or service ranges, team, and contacts or booking.

Lookbook and galleries

The lookbook is one of Florence’s strongest sections. It works well for women’s and men’s looks, seasonal work, stylist portfolios, color examples, haircuts, and styling results. Do not upload everything. It is better to show 12 to 24 strong images grouped by direction than a long gallery with inconsistent lighting and uneven quality. Review the focal point so faces and hairstyles are not cropped awkwardly in the grid.

Price list and services

The pricing section in the template should be adapted carefully. If prices change often, do not hard-code complex tables into dozens of blocks. Choose a structure the editor can realistically maintain: service categories, a short description, a fixed price or "from" price, and a note about consultation if needed. If the site serves multiple locations, do not mix different price lists into one block without a clear explanation.

Contacts, team, and blog

The contact page should be reviewed especially carefully: phone number, address, business hours, map, social links, and cancellation policy if applicable. A team section helps on beauty websites, but only if you already have real staff photos and defined roles. A blog is worth enabling when there is an actual publishing plan: aftercare tips, preparation for a procedure, styling advice, or studio updates. An empty blog is better removed from the menu for now.

Practical example: building a salon homepage

Let’s walk through a realistic scenario: you need to launch a salon homepage with services, a lookbook, a short team section, and a path to contact. The goal is to create a page you can show to clients without leaving demo content in place or breaking the Florence structure.

Goal and preparation

We need a homepage where a visitor immediately sees the salon’s visual style, understands the core services, can review the work, and move to contact details. Before you start, prepare the logo, 6 to 10 portfolio photos, the service list, a short salon description, address, phone number, and social media links. If you do not have enough good photos yet, it is better to use fewer blocks than to stretch weak images across the whole site.

Setup steps

1. Open the homepage in the YOOtheme Pro page builder through the Pages panel or the appropriate menu item.
2. Save the original layout to the library or create a copy of the page so you can roll back if needed.
3. Replace the hero image and heading while keeping the overall Florence rhythm: a large visual, a short phrase, and a clean button.
4. Review the services block: keep only real services, group similar items together, and remove demo prices if they do not match the site.
5. Upload your own images to the lookbook, set the focal point for portraits, and review the grid at different screen widths.
6. Add the team block or remove it until real staff photos are available.
7. Check the footer and contact block: the phone number should be clickable, the address should be accurate, and social links should work.
8. Click Save Layout, then save the theme settings separately if you changed the style, header, or module positions.

Reviewing the result

Open the site in a private window so you are not evaluating the result as a logged-in administrator. Follow the path of a normal visitor: first screen, services, lookbook, contacts. On mobile, check whether the menu overlaps the heading, whether the hero is too long, whether portraits are cropped badly, whether the contact button is visible, and whether service pricing stays clear.

A common detail that gets in the way

If you changed the page layout but do not see the result, confirm that you saved the page builder layout itself, not just the global theme settings. In YOOtheme Pro, the layout and theme settings are saved separately. Also clear the Joomla cache, the template cache, or the cache of any external optimizer if one is enabled.

Practical ways to use Florence across different projects

Florence is not limited to a classic hair salon website. Its structure works well across several related scenarios if you avoid inventing unnecessary features and build on the ready-made layouts: a strong visual first screen, portfolio, pricing, contact flow, blog, and team pages.

Beauty salon with services and contact-based booking

This is the most direct use case: a salon site where the homepage defines the style, the lookbook shows the work, and the price list plus contact section help the visitor book. Use the homepage, price list, and contact layouts. Review the result from the visitor’s perspective: can someone find a service, see an example of the work, and call within two or three clicks?

Stylist or photographer portfolio

If the site belongs to a single specialist, make the lookbook the main proof of quality and reduce the pricing section to service packages. The team block can be replaced with a biography, and the blog can be used for notes on shoot preparation, aftercare, or style selections. Review the photography carefully so image quality stays consistent and does not clash with Florence’s softer typography.

Fashion studio or small brand

For a fashion project, Florence can be adapted into an editorial-style site: homepage, collection gallery, about, blog, and contact. The price list can become a services or consultation page. If you need a full online store, the template alone is not enough, so evaluate the e-commerce extension and its compatibility with your workflow in advance.

Local studio with multiple service directions

If the studio covers different areas such as hair, makeup, brows, education, and photo sessions, use template styles and menu assignment so key sections can carry slightly different visual emphasis. But do not create a new style for every small page, because that makes the site harder to maintain. It is better to separate only the main directions.

Speed, accessibility, and SEO review after setup

With a visual template, speed issues usually come not from the template itself, but from the images. Florence assumes a lot of large photography, so once the demo content has been replaced, review file sizes, lazy loading, responsive images, and focal point settings. YOOtheme Pro documentation describes responsive image generation, cache storage in media/yootheme/cache, next-gen formats when supported by the server, and quality settings. These should be used carefully: quality that is too high makes the page heavy, while aggressive compression damages portraits and portfolio images.

Accessibility also depends not only on YOOtheme Pro, but on the site author. UIkit, which YOOtheme Pro is built on, supports accessible components, but if you place light text over a light photo, no system can save the contrast. Review the hero, buttons, menu, links, contact form, and image captions. On a beauty site, it is especially important that visual softness does not turn into poor readability.

SEO without overloading the template

Florence should not replace a proper content structure. For services, create clear pages or blocks with real text, not just attractive images. Every important page should have a human-friendly heading, a short explanation of the service, relevant photography, a path to contact, and internal links to related sections. If you use the blog, do not publish generic content just for frequency. Fewer posts are better if they contain real advice and connect naturally to the studio’s services.

After setup, review Joomla metadata, page URLs, breadcrumbs, mobile loading, first-screen speed, and indexation. If you use an external map, video, or social widgets, account for a consent manager and click-to-load behavior where relevant. A beautiful template does not make up for empty service pages, oversized images, or broken contact paths.

Safe improvements without editing the template core

Florence does not require aggressive customization for a standard site. Most tasks are better handled through the customizer, template styles, module positions, language overrides, and small CSS adjustments in the built-in panel. Do not edit the Joomla core, YOOtheme Pro template files, or generated cache files for minor visual changes. That will make updates harder and can be lost when the theme changes.

Localizing strings through Joomla Language Overrides

YOOtheme Pro documentation describes language strings and recommends Joomla language overrides for changing text without editing files. For example, if a template or component outputs a string that should be adapted, create an override in System - Language Overrides. For YOOtheme strings, look for constants with the TPL_YOOTHEME prefix. This is safer than editing the template’s ini files directly.

Small CSS tweak for better price list readability

If the dividers in the price list become too faint after changing colors, you can add a small CSS snippet through Settings - CSS in YOOtheme Pro or through a child theme. This is a standard front-end display tweak. It does not affect business logic and is easy to roll back by removing the block.

.florence-price-list .uk-grid-divider > :not(.uk-first-column)::before {
  border-left-color: rgba(35, 35, 35, 0.18);
}

.florence-price-list .uk-text-muted {
  color: #5f5a57;
}

Before using it, add your own florence-price-list class to the pricing section in the page builder. After saving, review the services page on desktop and mobile. If the styling does not fit, remove the class or the CSS block. Do not apply the selector to every element on the site until you are sure it does not damage other layouts.

Child theme for deeper changes

If you need to keep your own Less styles, files, or more advanced customizations, use a child theme according to YOOtheme Pro documentation. This approach is better than editing the main template directly: YOOtheme Pro updates should not overwrite custom files. But a child theme should be introduced only once there is a clear real need. For a simple button color change, the style customizer is enough.

How to review the finished site before publishing

The final Florence review should not be only technical. Look at the site as a visitor, an administrator, and a business owner. The visitor checks the path to services and contact. The administrator checks whether a block can be updated quickly without breaking the layout. The owner looks at whether the visual style matches the real studio.

Front-end review

• The homepage opens without empty demo blocks or someone else’s contact details.
• The lookbook shows real images, does not crop important details poorly, and does not load too slowly.
• The price list is readable on a phone and does not require horizontal scrolling.
• The menu leads only to finished pages, and the mobile navigation does not hide important buttons.
• The contact page includes the current address, phone number, email, social links, and a clear call to get in touch.

Admin panel review

Open the customizer and confirm that the required pages are editable through Pages, modules are visible in Modules, template styles are assigned to the correct menu items, and saving works properly. Then log out of the admin panel and review the front end again. If the result is different, investigate the cache, the menu assignment, or the wrong template style.

Moving from staging to the live site

If you built Florence on a staging environment, move the result not as a chaotic set of edits, but as a short change log. Record which template style is selected, which layouts are loaded, which menu items were created, which modules were published in toolbar, navbar, top, or bottom, which images were replaced, and which CSS tweaks were added in Settings - CSS. A list like this makes it much easier to find the cause if some pages look different after migration.

Before migration, export or save your custom layouts to the YOOtheme Pro library if that workflow is available in your installation. For image files, keep the same folder structure so you do not lose links in media fields. If you used a child theme, migrate it together with the custom Less/CSS files instead of copying isolated lines into the main template. After migration, open the live site as a regular visitor and compare four control pages: the homepage, lookbook, price list, and contacts.

Do not publish the updated design until the 404 pages, canonical URLs, mobile menu, contact forms, map, social links, and Joomla robots/meta settings have been reviewed. This is especially noticeable for a beauty salon: a visitor may land not on the homepage, but directly on a service page or a blog post. If the internal layout looks good only when coming from the homepage, the review is not finished yet.

If everything looks stable, you can move closer to the download block near the end of the page and get the Joomla version for further testing on your own staging site. It is better to review the template on a site copy first and only then transfer the settings to the live project.

Troubleshooting common Florence issues

Most Florence issues are not tied to a specific demo page, but to the usual Joomla and YOOtheme Pro layers: the wrong package was chosen, permissions are missing, the template style was not assigned, a module was published in the wrong position, the cache is showing an older version, or the server is not processing images correctly. Below is a practical symptom map.

The template installed, but the site does not look like the demo

Symptom: YOOtheme is visible after installation, but the pages do not resemble the official Florence demo. In most cases, that means a standard theme package was installed without demo content, and the demo layouts have not yet been loaded or assigned.

Check whether you were working with an existing site or a demo package. For an existing site, load the required layouts through YOOtheme Pro and assign the template to the correct menu items. For the full demo, use a separate Joomla installation. Do not try to "layer" the demo package on top of a live site.

Settings do not save or CSS does not load

Official documentation connects these symptoms with file permission issues. If the customizer does not save its configuration and the site appears without styling, review the file and folder permissions for the template. A typical safe recommendation is 755 for directories and 644 for files, but confirm the exact setup with your hosting provider.

Do not give every file maximum permissions just in case. That is bad practice. Fix only the problematic directories, then save the settings again and clear the cache.

A module does not appear on the intended page

Check three layers: whether the module is published, whether it is assigned to the correct menu items in Joomla, and whether the current page supports that position. If the page is built in the page builder as a full-width layout, a standard sidebar may not render. In that case, use the Position element or a builder module in the correct part of the layout.

Changes are visible in the customizer, but not to visitors

First make sure you clicked the correct save action: layout and theme settings are saved separately. Then check the template style and menu assignment. If both are correct, clear the Joomla cache, the YOOtheme cache, and any external optimizer cache. If a CDN is in use, confirm that it is not serving outdated CSS or images.

Portraits and portfolio images are cropped badly

Use the width, height, and focal point settings in YOOtheme Pro media fields. For portraits, you typically want to preserve the face, hairstyle, and upper composition. If one image performs badly across all aspect ratios, prepare one crop for the hero and a separate crop for the gallery.

On mobile, the menu or hero looks too large

Open device preview in the customizer and review the mobile header, section spacing, block order, and button visibility. Do not shrink the entire site globally through CSS. In most cases, it is enough to adjust the specific section, image, or menu behavior.

When YOOtheme Florence is the right choice

Florence is worth using when you need a Joomla site with strong visual presentation, ready-made pages for the beauty or fashion niche, and the ability to edit the appearance through YOOtheme Pro. It works especially well for projects where the design is already close to the real goal: a salon, a stylist, a work portfolio, service pricing, contact details, and a blog with useful content.

Before publishing, review three things: the correct installation package, real data in place of demo content, and a stable combination of menu assignment, module positions, and template styles. Once that is in place, Florence becomes more than just a beautiful shell. It becomes a maintainable site foundation where the editor can update content, the administrator can control structure, and the visitor can quickly find a service and a way to get in touch.

If you are still choosing between similar options, start with a staging environment: install the template, build one homepage, replace several images, review the mobile view, and only then move the result to the live site. This approach saves time and reduces the risk of rebuilding the visual structure after launch.