Hi, and welcome to the Atomy User Guide.
Theme CustomizeWith Atomy you have the possibility to customize your site, let's see how to do it step by step.The customizations are found in the customize of the theme, thus having the possibility of seeing the changes made in real time.To access these customizations just be logged in as an administrator, and in the top administrator bar select Customize.
Here are the options you find in the Customize
We see one by one how they work!
Site Identity
Logo -> Upload your logoLogo size -> You can adjust the size of your logoSite TitleTaglineDisplay Site Title and TaglineSite IconHeader Layout -> Header width, full or box (This also depends on which layout you have chosen in the Other settings section, which you will find below.)
Header Top
Enable or disable Language menu -> This command only works with the active Polylang plugin!Enable or disable Icons -> 2 Icons that appear above the logoEnable or disable Search formEnable or disable Login Icon -> Shop IconsEnable or disable Wishlist Icon > Shop IconsEnable or disable Cart Icon > Shop IconsShopping bag -> You can choose the icon for the cartBorder Radius Shop Icons (Pixel Unit)
Header Media
In this section you can insert a video for header or a fixed image, if you do not enter anything, this section does not appear!
Header VideoHeader ImageEnable or disable Overall width Static Section -> Total size or boxHeight image (Pixel Unit)Object-fit imageEnable or disable button Play/Pause -> This command only works for videoEnable or disable automatic writing cursorEnable/Disable Call To Action Button
MenusAtomy has two menus, one is the primary menu and one is the language menu.The primary menu can be moved up and down, the language menu can be used by activating the Polylang plugin.
Settings menu
Select the type of header for menu -> You can set the menu up or downEnable or disable Menu StickyEnable or disable Overall width Menu Header -> You can set the maximum widthEnable or disable Woocommerce Icons in Menu Sticky
Mobile Devices
Enable or disable Woocommerce Icons in Menu Sticky
Background ImageYou can set an image for your site's background
Footer
Enable or disable Overall width Footer -> You can set the maximum width of the footerEnable or disable Copyright FooterLogo size (Pixel Unit) -> The logo you set in the header appears in the footer, here you can set the sizeMargin Top Footer (Em Unit)
Payment Method Icons
Enable or disable Icons Payment method -> You can enable icons for payment methods
Widget Area
Enable or disable Widget Area -> The Footer has 4 Widget areas, enabling them you can insert the Widgets you prefer
Mobile Devices
Enable or disable Widget Area Footer in Media Devices
Shop SettingsTo set up the store you can follow this dedicated guide: Plugin Settings
General Settings
Result countProduct sortingAdd to your basket icon
Image Featured Page
Enable or disable Shop Image Featured Page Hight AutoHeight Shop Image Featured Page (px)Shop Image Featured Page object-fitBackground Color ProductBackground Color Badge Sale ProductColor Badge Sale ProductEnable or disable Sidebar Product
Home Store Page
This option is used to sort out the sections in the store's Home
Single Item Settings
Enable or disable height auto imageFont size title product (Pixel Unit)Margin top title single product (Em Unit)Related Product -> Enable or disable related productSector 1 -> At the end of the single product page there are two areas in which you can insert sectionsSector 2 -> At the end of the single product page there are two areas in which you can insert sections
Category Product
At the end of the product Categories page there are two areas where you can insert sections
Cart
At the end of the Cart page there are two areas where you can insert sections
Custom Area
Blog SettingsIn Atomy you also have a section dedicated to the blog, to create it you have to write articles. Just select "New -> Post" in the administration bar at the top, here you can write your article by putting the related tags, categories, images, etc ...
Blog layoutEnable or disable SidebarPadding top Title Article (Pixel Unit)Entry Meta BlogNavigation BlogBackground Color SidebarTitle Color SidebarLink Color SidebarLink Color hover Sidebar
Mobile Devices
Enable or disable Sidebar in mobile devices
PagesTo create a page go to "New -> Page" in the admin bar at the top. Here you can create your page, using the various templates available, go to "Pages Attribute" and choose the template.
About
In this page you can enable or disable these 5 sections:
Parallax SectionStatistic SectionWho We Are SectionTeam SectionTestimonial Section
Page Title and Content ->You can enable or disable the page title and contentSecondary title 1Effect Secondary title 1Secondary content 1Secondary title 2Effect Secondary title 2Secondary content 2Secondary title 3Effect Secondary title 3Secondary content 3
Contact
On this page you have 3 widgets areas (Contact Header, Contact Body, Contact Sidebar) you can set them by Widgets options.
Page Title and Content -> You can enable or disable the page title and contentBorder top sidebar size (Pixel Unit)Color Border Top SidebarColor Border Right SidebarSector 1 -> At the end of the Contact page there are two areas in which you can insert sectionsSector 2 -> At the end of the Contact page there are two areas in which you can insert sections
Portfolio
Page Title and Content -> You can enable or disable the page title and contentEnable or disable Custom Height Image FeaturedSector 1 -> At the end of the Portfolio page there are two areas in which you can insert sectionsSector 2 -> At the end of the Portfolio page there are two areas in which you can insert sections
Services
Sector A -> In the Services page there are four areas in which you can insert sectionsSector B -> In the Services page there are four areas in which you can insert sectionsSector 1 -> In the Services page there are four areas in which you can insert sectionsSector 2 -> In the Services page there are four areas in which you can insert sections
Atomy
On this page there are 15 sectors where you can put the sections you prefer.
Enable or disable Title and Content
404
Primary ImageTitle 1Font Size Title 1 (Pixel Unit)Title 2Font Size Title 2 (Pixel Unit)SubtitleFont Size Subtitle (Pixel Unit)
Section
Card
Settings Card
Layout CardEnable or disable Overall width Card Section -> You can set the maximum width of the Card
Effect Two
The Card section has 2 types of effects hover, you can select them in Card 1, Card 2, Card 3, Card 4.Here you can adjust effect 2.
Font Size Title (Pixel Unit)Color TitleBackground Color TitleBorder Radius Title (Pixel Unit)Opacity EffectBackground Color EffectMargin Top (Em Unit)Margin Bottom (Em Unit)
Card 1,Card 2, Card 3, Card 4
Product or Post -> You can choose to show a post or a productPost/Product Card 1Effect Card 1 -> Scroll effectEffect DurationEffect hover -> You can choose the effect one or effect two
Effect One
Enable or disable CategoryTitle ButtonVertical position Text (Percentage Unit)Horizontal position Text (Percentage Unit)Padding Text Vertical (Pixel Unit)Padding Text Horizzontal (Pixel Unit)
Card With Sidebar
Card Product
This section is usable only if you have activated the WooCommerce plugin and you can only show products.
Enable or disable Card Pruduct SectionEffect Card Product -> Scroll effectEffect DurationNumber CardCategory CardMargin Top (Em Unit) -> Margin top of the Card with Sidebar sectionMargin Bottom (Em Unit) -> Margin bottom of the Card with Sidebar section
News Sections
This section only works with posts.
Enable/Disable News SectionsNews TitleEffect news title -> Scroll effectEffect DurationTitle AlignSelect a category for the News SliderSelect a category for the News Small CardsMargin Top Sidebar (Pixel Unit)
Category/Product
Settings
This section works only if you have activated the WooCommerce plugin.In the WooCommerce guide, you will find the instructions to display the Products or Categories in the Home, based on this choice here you have the various settings controls of this section.
Enable or disable Overall width Category/Product SectionGeneral Effect Product -> Scroll effectGeneral Effect DurationCategory/Product TitleTitle AlignEffect Title Category Product -> Scroll effect
The following options only work if you have chosen to view the Categories in the Home!
Enable or disable Effect ImagePadding Effect Image (px)Border Color EffectBox Shadow Horizontal Position (px)Box Shadow Vertical Position (px)Box Shadow Blur Radius (Pixel Unit)Box Shadow Spread Radius (Pixel Unit)Font size Single Category Title (Pixel Unit)Text Align Description CategoryPadding Left Text (Pixel Unit)Margin Top (Em Unit) -> Margin top of the Category/Product sectionMargin Bottom (Em Unit) -> Margin bottom of the Category/Product section
Faq
General Settings
If you want to use this section wherever you want (Post, Page, Widgets ...) you can use this shortcode:[atomy_faq]You must however have activated the Franchi-Shortcode Plugin, the guide can be found here: franchi-shortcode
Enable or disable Overall width Faq SectionTitle Faq SectionSubtitle Faq SectionEffect Title Faq SectionTitle AlignSelect Image for FaqEffect Image Faq SectionEnable/Disable 4/5 FaqMargin Top (Em Unit) -> Margin top of the Faq sectionMargin Bottom (Em Unit) -> Margin bottom of the Faq section
Faq
Faq 1, Faq 2, Faq 3, Faq 4, Faq 5 -> QuestionResponse Faq 1, Response Faq 2, Response Faq 3, Response Faq 4, Response Faq 5 -> Response
Block Icons
General Settings
If you want to use this section wherever you want (Post, Page, Widgets ...) you can use this shortcode:[atomy_icons]You must however have activated the Franchi-Shortcode Plugin, the guide can be found here: franchi-shortcode
Border (Pixel Unit)Padding (Em Unit)Margin Top (Em Unit) -> Margin top of the Block Icons sectionMargin Bottom (Em Unit) -> Margin bottom of the Block Icons section
Block Icon 1,Block Icon 2, Block Icon 3
Icon 1Effect Icon 1 -> Effect hoverEffect Columns One -> Scroll effectTitle for Icon Header 1Subtitle for Icon Header 1
Portfolio
General Settings
To use Portfolio on a page, you must create a page with Pages Attribute -> Template -> Portfolio.
Enable or disable Overall width Portfolio SectionTitle Portfolio SectionEffect Title Portfolio Section -> Scroll effectTitle AlignTitle for All Nav PortfolioMargin Left Nav (Em Unit)Padding Bottom Image (Pixel Unit)Columns PortfolioShow only the priceMargin Top (Em Unit) -> Margin top of the Portfolio sectionMargin Bottom (Em Unit) -> Margin bottom of the Portfolio section
Portfolio Tab 1, Portfolio Tab 2, Portfolio Tab 3, Portfolio Tab 4, Portfolio Tab 5
In this section you can show the posts or products.
Title Tab 1Product or PostCategory ProductOnly show the products featuredCategory Post
Services
General Settings
This section in the first three columns has 3 widget areas (Services One, Services Two, Services Three).
Enable or disable Overall width Services SectionTitle Services SectionEffect Title Services Section -> Scroll effectTitle AlignEnable/Disable 4/5 Columns Services SectionMargin Top (Em Unit) -> Margin top of the Services sectionMargin Bottom (Em Unit) -> Margin bottom of the Services section
Column 1 Services Section, Column 2 Services Section, Column 3 Services Section, Column 4 Services Section, Column 5 Services Section
Effect Column 1 Services Section -> Scroll effectIcon 1Effect Icon 1 -> Effect hoverTitle Icon 1 Services SectionSubtitle Icon 1 Services Section
Brends
If you want to use this section wherever you want (Post, Page, Widgets ...) you can use this shortcode:[atomy_brands]You must however have activated the Franchi-Shortcode Plugin, the guide can be found here: franchi-shortcode
Enable or disable Overall width Brands SectionTitleEffect title -> Scroll effectEffect DurationTitle AlignSelect Image for Brands 1/2/3/4/5/6/7/8Margin Top (Em Unit) -> Margin top of the Brands sectionMargin Bottom (Em Unit) -> Margin bottom of the Brands section
Carousel Product
This section is usable only if you have activated the WooCommerce plugin and you can only show products.
Featured Section TitleEffect Featured title -> Scroll effectEffect DurationTitle AlignCategory Product Carousel 1Category Product Carousel 2Enable/Disable Custom Height Image
Badge Promo.Add a widget to use these options!
Width (Percentage Unit)Left (Em Unit)Top (Em Unit)Margin Top (Em Unit)Margin Bottom (Em Unit)
Parallax
This section can only be used in the header
Enable or disable Overall width Parallax SectionSelect Image for Primary Image ParallaxHeight Image Parallax (Pixel Unit)Select Image for Secondary Image ParallaxHeight Image Parallax Secondary (Pixel Unit)Width Image Parallax Secondary (Pixel Unit)Padding Left Image Parallax Secondary (Percentage Unit)Padding Top Image Parallax Secondary (Percentage Unit)Border Radius Image Parallax Secondary (Percentage Unit)Title ParallaxEnable or disable Call To Action Button in Parallax SectionText AlignPadding Top Text Parallax (Em Unit)Font Size Text Parallax (Pixel Unit)
Slider
If you want to use this section wherever you want (Post, Page, Widgets ...) you can use this shortcode:[atomy_slider]You must however have activated the Franchi-Shortcode Plugin, the guide can be found here: franchi-shortcode
In this section you can show posts or products!
Enable/Disable Overall width Slider SectionEnable/Disable Call To Action Button in Slider SectionFix Title SliderTitle Call-to-action button SliderFont Size Fix Title Slider (Pixel Unit)Link Call-to-action button SliderProduct or PostCategory ProductCategory PostEnable/Disable IndicatorsEnable or disable Effect Fade SliderEnable or disable Effect Text SliderFont Size Text Slider (px)Margin Top (Em Unit) -> Margin top of the Slider sectionMargin Bottom (Em Unit) -> Margin bottom of the Slider section
Statistic
If you want to use this section wherever you want (Post, Page, Widgets ...) you can use this shortcode:[atomy_statistic]You must however have activated the Franchi-Shortcode Plugin, the guide can be found here: franchi-shortcode
Enable/Disable Overall width Statistic SectionIcon 1, Icon 2, Icon 3, Icon 4Number 1, Number 2, Number 3, Number 4Title 1, Title 2, Title 3, Title 4Enable/Disable Gradient color StatisticFirst Gradient ColorSecond Gradient ColorGradient vertical or horizontalMargin Top (Em Unit) -> Margin top of the Statistic sectionMargin Bottom (Em Unit) -> Margin bottom of the Statistic section
Team
In this section you can show posts or products!
Product or PostCategory ProductSelect Category Post TeamTitle TeamEffect Title Team -> Scroll effectSubtitle TeamContent TeamEnable/Disable Autoplay Carousel TeamMargin Top (Em Unit) -> Margin top of the Team sectionMargin Bottom (Em Unit) -> Margin bottom of the Team section
Testimonial
Enable/Disable Overall width Testimonial SectionTitle TestimonialEffect Title Testimonial -> Scroll effectContent TestimonialSelect Image 1, Select Image 2, Select Image 3, Select Image 4, Select Image 5, Select Image 6Title CarouselEffect Title CarouselSelect Category Post TestimonialEnable or disable Autoplay Carousel TestimonialMargin Top (Em Unit) -> Margin top of the Testimonial sectionMargin Bottom (Em Unit) -> Margin bottom of the Testimonial section
Who We Are
Title Who We AreEffect Title Who We Are -> Scroll effectSubtitle Who We AreContent Who We AreSelect Image 1Effect Image 1-> Scroll effectEffect Duration Image 1Select Image 2Effect Image 2 -> Scroll effectEffect Duration Image 2Select Image 3Effect Image 3 -> Scroll effectEffect Duration Image 3Enable or disable image 1Enable or disable image 2Margin Top (Em Unit) -> Margin top of the Who We Are sectionMargin Bottom (Em Unit) -> Margin bottom of the Who We Are section
Two Image
In this section you can only show posts.The image in the foreground is the image that appears on the right.
Margin top section (Em Unit) -> Margin top of the Two Image sectionMargin bottom section (Em Unit) -> Margin bottom of the Two Image sectionPadding top section (Em Unit) -> Padding top of the Two Image sectionPadding bottom section (Em Unit) -> Padding bottom of the Two Image sectionBackground Color -> Background Color SectionPost -> Select a post to show
Image Left
Select ImageMargin left (Em Unit)Margin top (Em Unit)Rotate (Deg Unit)
Image RightFeatured Image!
Margin right (Em Unit)Margin top (Em Unit)Rotate (Deg Unit)
Slide
Product or PostCategory ProductCategory PostTitle BannerSubtitle BannerLink BannerEffect Banner -> Scroll effectEffect Carousel -> Scroll effectBackground Color First BannerBackground Color Second BannerColor BannerColor Title CarouselMargin Top (Em Unit) -> Margin top of the Slide sectionMargin Bottom (Em Unit) -> Margin bottom of the Slide section
Text Auto
Enable or disable Overall width Auto Text SectionSelect Image for Text Auto SectionEnable or disable Custom Height ImageHeight Image (Pixel Unit)Object-fit ImagePadding Left Text Image (Em Unit)Padding Top Text Image (Em Unit)Font Size Title Text Image (Pixel Unit)TitleSubtitle 1 image ServicesSubtitle 2 image ServicesSubtitle 3 image ServicesSubtitle 4 image ServicesFont size -Span- image (Pixel Unit)Time Change Subtitle (Seconds Unit (1000=1second))Margin Top (Em Unit) -> Margin top of the Text Auto sectionMargin Bottom (Em Unit) -> Margin bottom of the Text Auto section
Homepage SettingsIn this option you can set your homepage displays: your latest posts or a static page.
Other Settings
Layout
Body LayoutSite LayoutMargin Top Site (Em Unit) -> This function is very useful when using the Box version!
Go to Top
Enable or disable Go to Top buttonBorder radius (Pixel Unit)Position -> Right or left
Preloader
Enable or disable Preloader siteImage Preloader site ->You can choose from the 6 gif images selected for you, otherwise you can put one as you like by naming it (at-preloader-1.gif), just put it in this path:/images/preloader/at-preloader-1.gifPreloader visibility duration
Snow
Enable or disable Snow EffectEnable or disable Snow Effect only Atomy PageEnable or disable Snow Effect only Single post/product and page
Breadcrumbs
Enable or disable Breadcrumbs in PageEnable or disable Breadcrumbs in Blog
Button
Border Radius Button (Pixel Unit)
Banner Promotion
Enable or disable Banner Promotion
Popup
For the Popup content you can add the Widgets you want, go to Widgets -> Popup.
You can show the popup on the following pages:
Home Shop PageSingle ProductCartBlogAbout pageAtomy pageContact pagePortfolio pageServices page
Here you can choose the style
Background Primary ColorBackground Top Radial ColorBackground Bottom Radial ColorBackground Bottom ColorBackground Box Shadow ColorColorChoose the Popup styleBorder radius (Pixel Unit)Time appearance
Mobile Devices
Enable or disable Go to Top buttonEnable or disable Popup
Typography
With this control you can set the family font for:
Heading FontPrimary FontLink Font
You can choose from 15 fonts selected for you, otherwise you can set your own by selecting "Custom Font".Theme Styling
Here you can choose from 8 Skin selected for you, otherwise you can customize your site with the colors you prefer, setting in Custom Skin Builder.
Social Networks
With this control you can activate or deactivate Social Networks, when you activate them the icons appear in the header and in the footer.You can also show Social Networks icons where you want using this shortcode:[atomy_social_networks]You also have an option to open links on another page.
Widgets
Atomy has 17 Widgets areas here is the complete list:
Sidebar BlogFeatured ProductCard With Sidebar Section/Sidebar StoreFooter 1Footer 2Footer 3Footer 4Contact HeaderContact BodyContact SidebarPopupBadge Promo OneBadge Promo TwoBadge Promo ThreeServices OneServices TwoServices Three
WooCommerce
Here you have the store settings
Store notice
Enable store notice -> If enabled, this text will be shown site-wide. You can use it to show events or promotions to visitors!
Product Catalog
Shop page display -> Choose what to display on the main shop pageCategory display -> Choose what to display on product category pagesDefault product sorting -> How should products be sorted in the catalog by defaultProducts per row -> How should products be sorted in the catalog by defaultRows per page -> How many rows of products should be shown per page
Product Images
Main image width -> Image size used for the main image on single product pages. These images will remain uncroppedThumbnail width -> Image size used for products in the catalogThumbnail cropping -> 1: 1 / Custom / Uncropped
Checkout
Company name field -> Hidden / Optional / RequiredAddress line 2 field -> Hidden / Optional / RequiredPhone field -> Hidden / Optional / RequiredHighlight required fields with an asteriskPrivacy policy page -> Select PageTerms and conditions page -> Select PagePrivacy policy -> Optionally add some text about your store privacy policy to show during checkoutTerms and conditions -> Optionally add some text for the terms checkbox that customers must acceptAdditional CSSHere you can insert changes to the CSS style sheet.