The Customizer

Permalink General settings

Preloader

Tick the Activate Preloader checkbox if you wish a loading animation to be displayed while the page loads.

There are four different animations available.
If you tick the checkbox “Enable preview”, you can see a preview in the customizer.

You can colorize the different animations to your liking by specifying the background color and color.

Fonts

Hereby all fonts from the Google Fonts library can be embedded and used. At the moment there are about 950 different fonts available.

The font is installed and loaded locally on / from your own server. Therefore, the use is DSGVO compliant and requires no additional notice in the privacy policy.

You can download fonts, delete them, set them for headings and body text, or undo all changes and reset the fonts to default.

Social media

Tick the Activate Icons in Menu checkbox if you wish social media icons to be displayed in the header. Once you have done so, enter the respective URLs.

Currently, 30 networks are automatically detected by their URL and the appropriate icon is displayed.

The following networks are automatically detected:

  • behance.net
  • bitbucket.org
  • codepen.io
  • deviantart.com
  • discord.gg
  • etsy.com
  • facebook.com
  • flickr.com
  • github.com
  • instagram.com
  • kickstarter.com
  • last.fm
  • linkedin.com
  • medium.com
  • patreon.com
  • pinterest.com
  • reddit.com
  • slack.com
  • snapchat.com
  • soundcloud.com
  • spotify.com
  • stackoverflow.com
  • tiktok.com
  • tumblr.com
  • twitch.tv
  • twitter.com
  • vimeo.com
  • wa.me
  • xing.com
  • youtube.com

If you want to display an icon for your phone number that has a link, you can do so by typing tel: followed by your phone number without spaces.

If you want to add a linked icon for your email address, type mailto: followed by your email address.

RSS feeds will automatically get the correct icon if either /feed/ or /rss/ is in the URL.

Examples:

<!-- Add phone number -->
tel:08001234567

<!-- Add e-mail address -->
mailto:support@marketpress.de

<!-- Add RSS Feed -->
https://your-domain.com/feed/

 

You can change the order of the icons by dragging and dropping the URLs up or down.
If you want to add more icons, just click on the button Add.

The icon style can also be customized. There are two variants to choose from.

Change the color of icons by clicking Select Color and selecting the color of your choice.

If you want to customize the output of the icons in addition, we provide the filters atomion_social_icons and atomion_social_icons_list. You can find more details in the section Actions and Filters.

Activate or deactivate Share buttons on product pages and in posts by ticking or unticking the checkboxes for the respective platforms.

Breadcrumb

It is possible to completely disable the breadcrumb across the whole site.

By default, the site title of the WordPress installation is used for the first point of the breadcrumb.
You can choose to output a custom text instead or choose one of the five available icons which will be displayed at this point.

The separator can also be changed. Simply select one of five available icons.

There are also three options for the font size of the breadcrumb, and settings for text transformation (upper case / lower case / normal).

Furthermore, it is possible to modify the start page URL, as well as the home icon and the separator icon individually via filters. See Actions and Filters.

Checkboxes / Radio Buttons

Checkboxes
In Atomion, all checkboxes are automatically displayed in Atomion style, i.e. selected checkboxes are displayed filled.
With the option “Checkmark” at “Checkbox Style” a checkmark can be displayed instead.

In the “Restrictions” area, the Atomion style can be limited to certain checkboxes using the whitelist function or certain checkboxes can be excluded from the Atomion style using the blacklist. Excluded checkboxes are displayed in the browser style.
The blacklist function can be useful when there are incorrect displays of checkboxes from other plugins.
Enter one or more comma-separated IDs or classes in the corresponding field for which the blacklist / whitelist should apply.
If you want to find out what the correct ID / class of a checkbox is, you can use the developer tools of the browsers.
For Firefox: https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/open_the_inspector/index.html
For Chrome: https://developer.chrome.com/docs/devtools/open/#inspect

Radio Buttons
Radio buttons are displayed in browser style by default, except for radio buttons in the cart, checkout and my account area.

A blacklist / whitelist feature is also available for radio buttons.

Additional Settings

By default Atomion adds an underline to all page headings. If you don’t want this, you can disable it here.

CSS and Javascript loading behavior
By default, all CSS rules and all javascripts are combined and loaded in one file each. If this is not desired, you can disable the options “Use combined CSS files” and/or “Use combined JS files” to load several smaller individual files instead. This allows you to exclude scripts that may not be needed for your page from being loaded. More information can be found here.

Output dynamic CSS inline
The dynamic styles from the settings in the customizer are loaded minified as a file (admin-ajax) by default. You can also output the styles inline in the <head>-section by activating the option “Output dynamic CSS inline“. On some servers this can improve the loading time. For more information, click here.

Permalink Header options

Logo

Logo
Specify which logo is shown in the header by selecting an image from the media library.

The Image Container Width parameter defines the size at which the logo is displayed. The Internal Logo Offset parameter enables you to adjust the spacing between the logo and the header around it.

Favicon
The favicon you select for your website will be displayed in the user’s browser tab.

Top Bar

You can activate a top bar here, which is displayed above the logo and the navigation. You have the possibility to set the background and text color and to create up to three columns. You can assign content to each of these columns: either a menu assigned to the menu position “Top Bar”, the social media icons, your own HTML (including shortcodes) or marquee. You can also specify the alignment of each column, as well as the Marquee speed.

Main Header

Layout
A total of four different layouts are available for the header (logo left, logo right, logo top, logo center).

Additionally you can limit the header width here to the width of the content if you select “Content width”.
This means that the logo, navigation, social media icons etc. are aligned to the left and right of the content.
By default the header is displayed in full width.

Also the height of the header can be adjusted, please note that the header should be at least as high as your logo.

You can also set the background color of the header and activate a drop shadow.

If you want the background of the header to be transparent, there is a slide control available for this. Please note that the transparency settings will only take effect on pages with the “Transparent Header” option enabled. This places the header on the of the page content.
You can find the corresponding option in the editing view of the corresponding page, on the right in the sidebar in the “Document” section.

Navigation
Set the distance between the menu items left and right (S, M, L), adjust the font size of the menu items (Standard, S, M, L), set the distance between the individual letters of the menu items (0 to 5 pixels) and select the transformation of the letters (none, upper case, lower case).

Choose from eight different hover effects and set the highlight color of the effect to customize your menu.

Define the font color of the active menu item and the inactive menu items and header elements.

You can select separate settings for the mobile menu.

Sticky Header

Tick the Sticky When Scrolling checkbox if the header should always remain visible as the user scrolls down the page.

Where required you can set a different logo to the one used in the standard header. If you do not select a different logo the standard header will be used.

You can also set the height of the header, the width of the logo and the internal spacing between the logo and the header.

The settings you select here only apply to the sticky header and do not affect the standard header.

Dropdown style

Here you select the sub-menu type. You can choose between a classic Dropdown Menu (Simple Menu) or our Mega Menu.

If you have created a menu with subitems you can set the background color of the submenu and the font color of submenu items here.

You can also choose whether to use the images for the mega menu from the product categories or from the menu settings.

Search

Tick the Activate Search checkbox if you wish the header to include a search icon.

With “search method” you set whether the WooCommerce search or the WordPress search should be used.
If you have the “Ajax Search for WooCommerce” plugin installed, you can also select this as the search method here.

You can also choose whether the search function should be displayed as a dropdown or as a fullscreen lightbox.

If you select the dropdown style you can also set the width of the search field here.

Fields Text 1 and Text 2 appear under the search field if you select the lightbox style.

Where required you can also enter a placeholder text for the search function. The placeholder will be shown in the case of both styles.

Account

If you want to display an account icon in the header, you can activate it here. There are four different icons to choose from.

In addition, you can set whether the login dialog should open in a lightbox, and whether the user will be redirected to the My Account Page after successful login.

You also have the option to show the user a tick next to the user icon, whether he is logged in or not.

In addition, a drop-down menu can be displayed, including customer approach and logout link.

Specify the background color, font color and separator color of the drop down.

Any links can be added to the menu. Simply create a new menu and assign it the menu position “My Account”.

You can find further options for customer approach under Design -> Customizer -> WooCommerce -> My Account. There you can choose whether the user name, the first name or the first and last name should be displayed.

Permalink Blog

Select whether you wish the sidebar in blog archives to be displayed on the right or left-hand side of the page.

In order to have a read-more link displayed in the blog on overview and category pages, activate the option “Activate read more link” here.

By default, the link is then output with the link text “read more”. If you would like another link text instead, please enter it in “Alternative Read More Link Text”.

You can also set whether the main image in each post should be as wide as the post (standard) or as wide as the browser window (full width). The standard setting is to make the image the same width as the post.

Tick the Activate Reading Position checkbox if you wish a bar indicating the reader’s progress down the page to be included at the top of posts.

You can also activate and deactivate captions for image galleries.

By default, a section with a “back to top” link is displayed below the page content. If you don’t want this, you can disable it here.

Footer Top & Main Footer

If you have added content to the widget sections Footer Top and/or Footer Main you can set the color of text and the widget background here.

Footer Bottom

Tick the Activate Footer Bottom checkbox if you wish the Footer Bottom widget section to be shown beneath the aforementioned widget sections.

You have the option to display the footer bottom either in full width or in content width.

Where required you can also select a dedicated logo for the footer and enter user-defined text such as copyright information.

As in the case of the other two widget sections, you can also set the color of the font and background used in the Footer Bottom.

Social icons

If you have added one or more social media widgets to a widget section in a footer (and saved the corresponding links under Customizer → General Settings → Social Media) you can set the color and background color of those widgets here.

Permalink Colors

You can set a background color for your website here.
The color of buttons, links and other highlights can be set under Main Color. You can also adjust the color of headings and standard text as well as the color of “good news” notifications (e.g. “Item XYZ has been added to your cart”) and warnings (e.g. “ABC is an essential field”).

Permalink WooCommerce

Product images

If your product images are not displayed in focus you can change the width of the main image and preview images here.

Product catalog

Activate Hero image on Categories / Shop page
In addition to the normal WooCommerce settings, you can activate the display of Hero images on product category pages and the shop page here. These are then displayed below the navigation, above the normal page content.

Categories / Shop page Hero image size
You also have the option to display these hero images either as wide as the content (normal) or across the full width (full width).

Shop-Page Hero image
The Hero image for the shop page you specify directly here in Customizer. You can define the hero images for the product category pages in the backend under Products -> Categories -> Your category under “Hero Image”.

Shop-Page description
You also have the option to display a description text on the shop page. You enter this here in the customizer.
The category descriptions can be found as usual in your backend under Products -> Categories -> Your category under “Description”.

Category/Shop description position and color
New for you now is the possibility to set in Customizer whether the description texts above or below the products to be displayed and the selection of the text color of the description.

At products per column mobile (<767px) you can specify how many columns should be displayed on mobile devices.

In addition, Sidebar Position gives you the option of displaying the sidebar on product archives either left or right.

If you want to change the text for the sale label, you can do so by entering your desired text at Text for Sale-Bubble.

If you prefer to display the savings percentage instead, check the option Discount in % instead of “Sale!”.

If you want to hide the add to cart button that appears when you hover over a product image, then remove the check mark in the option Activate add to cart button for products.

Atomion automatically adds an animation to the product images on product archives which you can see when you mouse over a product image.
If you want to reverse or deactivate this animation you can do this by ticking the respective option.

Quick View
By activating this option, a quick view button will be displayed under each product image on product listings (overview pages, product blocks, cross sells, up sells, related products).

Clicking on the button opens an overlay which contains product informations and enables a quick switch between the products.

The variant of the previous / next product navigation, the button style, the hover effect and the colors can be adjusted.

Product page

Here you can set the style in which the product tabs (description, additional information, reviews) should be displayed on the product page.
You can choose between:

  • Sections – the tabs are displayed below each other, all tabs are always visible
  • Tabs – the tabs are displayed side by side, orientation left, only the selected tab is visible
  • Tabs centered – the tabs are displayed side by side, orientation in the middle, only the selected tab is visible
  • Accordion – the tabs are displayed one below the other, only the tabs that are open are visible

In addition, you can specify the color for the Add to cart button and the rating stars on the individual product pages in the “Colors” section.

The color for the sale label in the Sales Bubble option applies to both product archives and individual product pages.

With the option “Style” you can adjust the appearance of the up sells, and the related products.
You can either display them as a slider or a grid. If you choose the “Grid” option, you can also specify how many columns should appear. (1-5).
You will find similar options for cross sells in the customizer under WooCommerce -> Cart.

My Account

This section gives you the option to hide the Downloads, Addresses and Account Details tabs as well as the logo on the My Account page.

By “Customer approach” you can select whether the user name, the first name or the first and last name should be displayed in the Account menu.

Further settings for the account area in the header can be found under Design -> Customizer -> Header -> Account.

Cart

Mini Cart
Select the Dropdown option under Style if you wish the content of the cart to be displayed when a customer hovers their mouse over it. Select the Link style if you would prefer your customers to be forwarded directly to the cart when they click on the icon.

You can set the color and background color of the cart icon independent of your color settings for the header. It is also possible to set different colors for the cart depending on whether it is empty or items have been added to it. You can also set different colors that will only be applied when the website is viewed on a mobile device.

If you select the Dropdown style you can also set background, text, icon and separator colors for the mini cart that appears when the mouse hovers over the cart icon.

Tick the Display Tax Information in Mini Cart checkbox if you wish the mini cart to include tax information.

Cart Page
By activating the checkout progress indicator, it will be displayed during the checkout process.
There are three variants to choose from.
Which terms are used, can be easily determined with the respective page title.

With the option Style in the section Cross Sells you can adjust the appearance of the cross sells on the cart page.
You can either display them as a slider or a grid. If you choose the “Grid” option, you can also specify how many columns should appear. (1-5).
You will find similar options for up sells and related products in the customizer under WooCommerce -> Product page.

Wishlist

Tick the Activate Wishlist checkbox if you wish to offer a wishlist to registered, logged-in users. If the wishlist is active a heart icon is displayed in the header and on every product page.

You can also set the color of the icon when displayed on product pages.

If a user clicks the heart icon on a product page the corresponding product is added to their wishlist.

Reviews

In Atomion, by default, rating stars are only displayed on product pages and in widgets.
If you want the rating stars to be displayed on overview pages and in product blocks, you can activate the option “Show rating stars on archives and blocks“.

If you have enabled reviews in general, but disabled reviews for individual products, WooCommerce will by default only hide the review form. Already submitted star ratings are still displayed.
If you do not want this, you can activate the option “Hide rating stars everywhere“.

Permalink Additional JS

Here you can insert your own Javascript, which is then output either in the header or footer of your page.