Atelier

Welcome to the comprehensive documentation for the Atelier WooCommerce Theme. This guide will walk you through the installation process and help you customize your store with ease. Whether you are building a product showcase or a full-featured online shop, Atelier provides the tools you need to get started quickly and confidently.

Setup and Installation

↑ Back to top

Demo Content Import

↑ Back to top

• In your WordPress dashboard, navigate to Appearance > Theme Demos.
• Select the Atelier demo and click ‘Import’.
• Choose which demo content you would like to import.
• Wait for the import process to complete. This may take a few minutes.
• Once completed, your website will display the imported demo content.

Theme Customization

↑ Back to top

Setting Up Your Logo

↑ Back to top

1. Go to Appearance > Editor.
2. In the Site Editor, navigate to Patterns > Header, click ‘Header’ pattern.
3. In the Block Properties panel, select Logo as your website branding.
4. Locate the Image block that represents the logo and replace it with your own logo.
5. The header section can contain two logos: one for regular pages and another for transparent sections and the sticky menu. Typically, the logo used for transparent sections should have inverted colors and a transparent background. If your website does not require a separate transparent logo, you can remove the second Image block. In this case, the main logo will be used across all pages and sections.

You can repeat the same steps to update the logo in the Transparent Header, simplified Checkout Header, Coming Soon Header and Footer patterns, if needed.

Setting Up Navigation Menus

↑ Back to top

1. Go to Appearance > Editor.
2. In the Site Editor, navigate to Patterns > Header, click ‘Header’ pattern.
3. Locate the Header Primary Menu block. Click the Plus (+) icon to add links to pages, products, posts or custom URLs.
4. Click the Plus (+) icon to add links to pages, products, posts or custom URLs.
5. To switch to a different menu, use the More Settings option inside the Navigation block.
6. Click ‘Save’ to apply the changes.

You can repeat the same steps to add or edit navigation menus in the Footer pattern.

For additional guidance, see the official WordPress Navigation Block tutorial.

Header Layout

↑ Back to top

A Classic Header Layout was introduced in Atelier version 1.1.0.

Within the Header pattern settings, you can choose between Classic and Alternative header styles.

The primary difference between these options is the navigation menu layout.

The Classic header uses a traditional dropdown menu, while the Alternative header features a column-based menu that displays second-level navigation items in a single vertical column.

Global Styles

↑ Back to top

1. Go to Appearance > Editor.
2. In the Site Editor, click ‘Styles’ to browse through
3. You can modify the preset typography and color palette or add custom fonts and colors.
4. In the ‘Layout’ section you can set the width of your web-site.
5. Click ‘Save’ to apply the changes.

Sections

↑ Back to top

Banners

↑ Back to top

The Atelier theme includes multiple responsive banner sections designed to look great on all devices. Each banner section features built-in aspect-ratio controls, allowing you to define different aspect ratios for desktops, laptops, tablets, and mobile devices individually.

Although the standard WordPress Image block aspect-ratio setting can still be used inside Banner and similar sections, we recommend using the theme’s native aspect-ratio controls located in the core Section block. These provide more consistent results and a better visual experience across all screen sizes.

Banner sections can also be set to stretch to full width on mobile devices (screens smaller than 576px), while remaining normally aligned or wide aligned on larger displays.

Carousels

↑ Back to top

The Product Carousel and Post Carousel sections allow you to display a different number of items depending on the screen size, ensuring a smooth and well-optimized user experience across all devices.

Through the core Section block settings, you can control:

• Autoplay behavior,
• Number of visible items for desktops, laptops, tablets, and mobile devices

While the native Product Collection block includes a basic carousel option, we recommend using the Atelier theme carousel instead. It offers:

• Individual controls for all device types
• Full touch and swipe support for mobile users
• Greater flexibility for layout and animation settings

Slider

↑ Back to top

The Slider section is designed to showcase a sequence of banners in a dynamic, engaging layout. Similar to the Carousel sections, it includes autoplay controls for adjusting slide speed and delay. Like the Banner sections, it also features aspect-ratio controls, allowing you to define different aspect ratios for desktops, laptops, tablets, and mobile devices individually.

There are two quick ways to add new banners to the Slider:

Method 1: Duplicate an Existing Slider Item

1. Select a Slider Item block.
2. Right-click and choose Duplicate, or use the keyboard shortcut Ctrl + Shift + D.
3. The duplicated Slider Item will appear immediately after the original and is ready for customization.

Method 2: Add a Slider Item Patter

1. Select the parent Slider Wrapper block.
2. Click the Plus (+) icon to open the block and pattern selector.
3. Go to Patterns > Banners and choose the Slider Item pattern.
4. A new banner will be inserted into the slider and will be ready for configuration.

Responsive Content

↑ Back to top

Atelier allows you to display different content (for example, responsive advertisements or images) based on the user’s viewport size.

For example:

<img src="test.com/image.jpg" class="mbf-hide-on-desktop">
<img src="test.com/image.jpg" class="mbf-hide-on-mobile mbf-hide-on-tablet mbf-hide-on-laptop">

In this example:

• The first image will be visible on mobile, tablet, and laptop devices, but hidden on desktop screens.
• The second image will be visible only on desktop screens and hidden on all smaller devices.

This approach allows you to tailor content specifically for different screen sizes and improve both layout and performance across devices.