Setup Instructions

Thank you for using our theme. This documentation will guide you to install the theme and setup your website. Have any installation issues, please feel free to get help at Support, we are here to assist you.

Theme Installation & Activate

Installing a theme through WordPress is quite easy.

  • Upload the theme file

    1. Go to Appearance > Themes in the WordPress Dashboard.
    2. Click on the Add New button.
    3. Click on the Upload Theme button.
    4. Click Browse and select current version of atento-pro.zip in your computer.
    5. Click Install Now.

    After theme installed successfully you can activate theme by clicking Activate on link as appear in your screen.

  • Manually activate theme.

    If you wish to activate manually.

    1. Go to Appearance Themes in the WordPress menu.
    2. Hover over the theme thumbnail and press the Activate button.

    [ Note: Find more information for theme installation at: Installing & Using Themes by WordPress ]

Menu Setup

  • Go to Appearance > Menus
  1. Click on create a new menu to add new menu.
  2. Give a suitable Menu Name
  3. Select Pages you wanted to be appeared in Menu.
  4. Customise added first level menu items.
  5. Set checkbox to Primary Menu to show menu items in primary menu position.
  6. Click to Save Menu.

[ Note: Find more information at: Menus by WordPress ]

Theme Customizer

Coming Soon

  • Go to Appearance > Customize > Coming Soon
  1. Settings
    Click on Toggle button to active Maintenance Mode and fill out all necessary fields.
  2. Social Profiles
    Click on Toggle button to display Social Section. Add new Social Profiles through Appearance > Customize > Social > Social Profiles.
  3. Countdown Timer
    Click on Toggle button to display Timer Section.
  4. Email Subscribe
    Select one of widget sidebar from the given options. Now drag & drop MailChimp Widget in selected sidebar area to work properly.
  5. Save Changes Save & Publish.

General Settings

  • Go to Appearance > Customize > General Settings
  1. Colors
    Set background color of website.
  2. Breadcrumb
    Enable/Disable breadcrumb of website as well as you can set breadcrumb separator and margin top.
  3. Set Button settings such as margin, padding, border, colors, box shadow and typography. This settings reflect on entire website.
  4. Smooth Scroll
    Enable/Disable smooth scroll of site.
  5. Human Time Diff
    Enable/Disable to set posted time as humna time difference.
  6. Back to Top Button
    Enable/Disable Back to Top button and set custom button text.

Global Settings

  • Go to Appearance > Customize > Global Settings
  1. Base Typography
    You can set Typography options: Font Family, Font Size, Variant, Line Height for tags: Body, H1, H2, H3, H4, H5, H6.
  2. Page Header
    Enable/Disable page header section just before breadcrumb of website. It includes lists of options such as padding, background image, background overlay color, typography, margin and so on.
  3. Thumbnail Ratio
    Set default thumbnail ratio of website. Website load default thumbnail ratio until and unless unique thumbnail ratio is select for the particular section or post listing section.
  4. Post Meta
    Set post meta icon and label text for website.
  5. Read More Button
    Set Read More Button display type as well as margin, padding, border, colors and box shadow as per Read More Button type selection.
  6. Before/After Widgets
    Enable/Disable register sidebar widget area in before/after content of page. To display the widgets select widget area from given Dropdown lists for before content and after content.
  7. Sidebar
    Set default sidebar option ( No Sidebar – Full width, Left Sidebar and Right Sidebar). You can also customize sidebar option for individual pages: Home Page, Archive Page, Single Post and Single Page. Even it allows more options such as choose sidebar area, sidebar width and spacing, set sidebar sticky and typography.

Header

  • Go to Appearance > Customize > Header
  1. Header Top Bar
    Enable/Disable header top bar section. You will get list of sortable elements in top header bar such as Top Menu, Social Menu and Top Header Text.
  2. Header Layout
    Set header display layout from this option. You will get total 7 header layouts.
  3. Header Image
    Set header Background Image and Background Overlay Color.
  4. Site Title & Tagline
    Set Logo, Logo Height, Short Site Title ( Replace Site Title while displaying site header ), Site Title, Tagline, Display Site Title ( Toggle button to show/hide Site Title, set Typography, Padding & Margin ), Display Tagline ( Toggle button to show/hide Site Tagline, set Typography & Margin ), Site Icon.
  5. Language Switcher
    Enable/Disable WPML language switcher of website in header. According to header layouts selection WPML language switcher display in header.
  6. Header Search
    Enable/Disable Header Search in header. It only work on certain header layouts those layouts having search icon. You can also set the search popup container in columns by selecting the number of columns. This columns selection register search widget area and you can place widgets.
  7. Slide-in Box
    Enable/Disable Slide-in Box in header. It only work on certain header layouts those layouts having Slide-in Box( 3 dots icon ). By enable the Slide-in Box crate new Slide-in Box widget area in which you can add widgets.
  8. Settings
    This options allow you to set the Header Display Type ( scroll, sticky & show on scroll upwards ), Header Padding ( top & bottom ) and Header Box Shadow.

Primary Menu Settings

  • Go to Appearance > Customize > Menus > Primary Menu Settings
  1. Primary Menu Settings
    Set primary menu typography, padding and colors from here.

Social

  • Go to Appearance > Customize > Social
  1. Social Profiles
    This option allow to add Social Profiles and re-arrange the order of appearance. Social Profile icons will support font awesome icon as well as custom logo icon.
  2. Social Share
    This option allow to enable or disable lists of Social Share and re-arrange the order of appearance. Social Share icons will support font awesome icon.

Homepage Settings

  • Go to Appearance > Customize > Homepage Settings
  1. Your homepage displays
    You can choose what’s displayed on the homepage of your site. It can be posts in reverse chronological order (classic blog), or a fixed/static page. To set a static homepage, you first need to create two Pages. One will become the homepage, and the other will be where your posts are displayed.
  2. Before/After Widgets
    Default widget area is inherit from global settings. Select new widget area from dropdown to set default widget area for home.
  3. Sidebar
    Set Sidebar option for Homepage, Default Layout is inherit from global settings. It also allow to set Sidebar (Widget Position) widget area by selecting the sidebar area from dropdwon lists.

Hero Section

  • Go to Appearance > Customize > Hero Section
  1. Visibility
    Toggle to Enable/Disable Hero section according to tab selection.
  2. Content
    Add Hero Section content (Image, Title, Sub title, Short Description, Button text & URL. You can also make sortable hero content. If more then one content display as in slider. Sort the hero content to display according to sorting order.
  3. Typography
    Set typography properties of hero title, subtitle and description.
  4. Button
    Set hero button display type as well as margin, padding, border, colors and box shadow as per button type.
  5. Content Settings
    Set hero display content settings such as image size, content position, text alignment, content width, color schemes, overlay background color, backgorund color, margin, padding, border, border color and so on.
  6. Content Spacing
    Set hero section margin from here.
  7. Slider Settings
    Set hero slider settings such as speed, loop, autoplay, slides count etc.

Featured Posts Slider

  • Go to Appearance > Customize > Featured Posts Slider
  1. Enable
    Toggle to Enable/Disable Featured Posts Slider on Homepage
  2. Layout
    Set layout for the Featured Posts Slider by selecting the given dropdown options.
  3. Column Settings
    Add number of slides in Featured Posts Slider as well as spacing between each slides.
  4. Section Header
    Add section header details of Featured Posts Slider ( Section Title, Section & Description.
  5. Content Settings
    Set posts query, posts limit, excerpt length, sort the elements of header section, thumbnail section and footer section etc.
  6. Content Spacing
    Set Featured Posts Slider section margin from here.
  7. Thumbnail Settings
    Set posts thumbnail image ratio. Default value is inherit from Global Settings value as well as you can set thumbnail border and box shadow options too.
  8. Read More
    Set read more button text of featured posts slider.
  9. Typography
    You can set Typography options: Font Family, Font Size, Variant, Line Height for post title, post subtitle, post content and post meta.
  10. Settings
    Set featured posts slider section padding, margin, background color, border width and border color.
  11. Slider Settings
    Set slider settings such as loop, autoplay, delay, keyboard control and navigation.

Error 404 Page

  • Go to Appearance > Customize > Error 404 Page
  1. Page Header
    Set Background Image, Background Attachment, Overlay Background Color, Color Scheme, Text Alignment, Error Title and Error Image for page header. Default value is inherit from global settings > page header. Select Enable or Disable to show page header on this current page.
  2. Content Settings
    Set content description, enable back to home button as well as you can enable default WordPress widgets by click the toggle button.
  3. Before/After Widgets
    Default widget area is inherit from global settings. Select new widget area from dropdown to set default widget area for Error 404 page.

Archive/Blog Settings

  • Go to Appearance > Customize > Archive/Blog Settings
  1. Page Header
    Set Background Image, Background Attachment, Overlay Background Color, Color Scheme and Text Alignment for Archive/Blog page header. Default value is inherit from global settings > page header. Select Enable or Disable to show page header on this current page.
  2. Thumbnail Ratio
    Set posts thumbnail ratio for Archive/Blog pages. Default thumbnail ratio is inherit from global settings.It also allow you to enable/disable default thumbnail placeholder for blog/archive pages if no featured image is set for the posts.
  3. Content Settings
    Set archive/blog content settings allows to show or hide the elements as well as sort it. You can also set Text alignment, limit the post excerpt, show elements of featured image while hover it and show/hide tags label & icon too.
  4. Content Spacing
    Set archive/blog section margin from here.
  5. Read More
    Set read more button text of blog/archive pages.
  6. Typography
    You can set Typography options: Font Family, Font Size, Variant, Line Height for post title, post subtitle, post excerpt and post meta.
  7. Related Posts
    Enable/Disable related posts in archive/blog page just below the every single post content. Default, theme allow 2 related posts. You can change the load posts type and posts from options. Even you can sort the content display elements position as well as set typography too.
  8. Pagination Settings
    Set pagination section settings such as padding, margin, alignment, colors, typography and box shadow. It act as global for all archive pages.
  9. Before/After Widgets
    Default widget area is inherit from global settings. Select new widget area from dropdown to set default widget area for archive/blog pages.
  10. Sidebar
    Set Sidebar option for Archive/Blog, Default Layout is inherit from global settings. It also allow to set Sidebar (Widget Position) widget area by selecting the sidebar area from dropdwon lists.

Category Settings

  • Go to Appearance > Customize > Category Settings > Category Name ( individual category in which you want to change )
  1. Page Header
    Set Background Image, Background Attachment, Overlay Background Color, Color Scheme and Text Alignment for page header. Default value is inherit from archive/blog settings > page header. Select Enable or Disable to show page header on this current page.

Tag Settings

  • Go to Appearance > Customize > Tag Settings > Tag Name ( individual tag in which you want to change )
  1. Page Header
    Set Background Image, Background Attachment, Overlay Background Color, Color Scheme and Text Alignment for page header. Default value is inherit from archive/blog settings > page header. Select Enable or Disable to show page header on this current page.

Author Settings

  • Go to Appearance > Customize > Author Settings > Author Name ( individual author in which you want to change )
  1. Page Header
    Set Background Image, Background Attachment, Overlay Background Color, Color Scheme and Text Alignment for page header. Default value is inherit from archive/blog settings > page header. Select Enable or Disable to show page header on this current page. It also allow to show/hide avatar, website, biographical info and social profiles in page header section.
  2. Social Profiles
    Set list of sortable social profiles for this current user.

Single Post Settings

  • Go to Appearance > Customize > Single Post Settings
  1. Page Header
    Set new background image, background attachment, overlay background color, color scheme, text alignment and sort visible elements for page header. Default page header is inherit from global settings. Assign new default settings for page header of all single posts.
  2. Content Settings
    Set content settings such as thumbnail ratio, text alignment and sort elements for content header, content footer section.
  3. Content Spacing
    Set single post content margin from here.
  4. Typography
    Set Typography options: Font Family, Font Size, Variant, Line Height for posts title, subtitle, content and section title.
  5. Post Navigation
    Set post navigation layout from here as well as set Typography options: Font Family, Font Size, Variant, Line Height for posts title.
  6. Post Navigation
    Set default layout of post navigation.
  7. Author Box
    Set author box section options such as background, padding, boarder , avatar border and enable social profiles.
  8. Related Posts
    Set related posts section options such as section title text, thumbnail ratio, read more text, column per row & column spacing, load query with selected posts from and posts type values, Enable/Disable excerpt value, sort elements for the header content section, footer content section and thumbnail section.
  9. Before/After Widgets
    Default widget area is inherit from global settings. Assign new default widget area for all single post.
  10. Sidebar
    Set Sidebar option for all single post, Default Layout is inherit from global settings. It also allow to set Sidebar (Widget Position) widget area by selecting the sidebar area from dropdwon lists.

Single Page Settings

  • Go to Appearance > Customize > Single Page Settings
  1. Page Header
    Set new background image, background attachment, overlay background color, color scheme, text alignment and sort visible elements for page header. Default page header is inherit from global settings. Assign new default settings for page header of all single pages.
  2. Content Settings
    Set content settings such as thumbnail ratio, text alignment and sort elements for content header, content footer section.
  3. Content Spacing
    Set single page content margin from here.
  4. Typography
    Set Typography options: Font Family, Font Size, Variant, Line Height for posts title, subtitle, content and section title.
  5. Before/After Widgets
    Default widget area is inherit from global settings. Assign new default widget area for all single pages.
  6. Sidebar
    Set Sidebar option for all single pages, Default Layout is inherit from global settings. It also allow to set Sidebar (Widget Position) widget area by selecting the sidebar area from dropdwon lists.

Instagram

  • Go to Appearance > Customize > Instagram
  1. Account
    Set your Instagram account user name from here which acts as global for whole site.
  2. Show on Footer
    Toggle to enable to show Instagram Feeds in footer area of site and set the respective input fields.

Popup Box

  • Go to Appearance > Customize > Popup Box
  1. Visibility
    Enable/Disable popup box by clicking the toggle button.
  2. Preview
    Toggle to enable preview the Popup Box. [ NOTE: Please disable it after customization is done. ]
  3. Content
    Set trigger title and short description of the popup box.
  4. Typography
    Set Typography options: Font Family, Font Size, Variant, Line Height for title and description.
  5. Button
    Set button padding, margin, border and colors for popup box button.
  6. Settings
    Set Popup box settings such as text alignment, background image, overlay background color, popup width, padding, box shadow and trigger action.

Footer

  • Go to Appearance > Customize > Footer
  1. Settings
    Set footer margin top, separator height and separator background color
  2. Widgets
    Select layout for footer widget columns, background image and background overlay color. It generates some widget areas for Footer based on the layout. Footer Widgets Position Layout with 4 column is selected by default. Add widgets to any of column to enable. Toggle button to Enable/Disable footer widget area.
  3. Footer Bar
    Set visibility of Footer Bar elements (Copyright Text, Footer Menu and Social Profile Icons ), separator height & background color, column alignment, backgorund color and color scheme.
  4. Copyright
    Set default copyright information in footer. You can also use shortcodes [the-year], [site-link], [separator], [precise-link] for current year, your site link, separator with span and Precise Themes site link respectively.

Static Front Page

By default Your latest posts is activated and shows 10 posts per page at front page of your site. If you want to set a static page as a front-page then you can follow those steps.

  • Go to Appearance > Customize > Static Front Page
  1. Click on A static page to set a static page.
  2. Select a page from dropdown menu for Front Page.
  3. Select a page for posts page where your latest posts will be shown.
  4. Save Changes Save & Publish.

[ Note: Refer Home Page settings to create and manage beautiful front page as in demo ]

Blog Setup

Step 1: Create a Page with name “Blog”

Create a page Blog
  • Create a new page, Go to Pages Add New.
  1. Give a name Blog.
  2. You can leave it Blank.
  3. Publish to save and publish.

Step 2: Set a Posts page

Set Blog as posts page
  • Go to Settings Reading.
  1. Set radio button to A static page (select below).
  2. Select a page “Blog” ( recently created page ).
  3. Save Changes

Additional CSS

  • Go to Appearance > Customize > Additional CSS
  1. Add your custom style properties.
  2. Save Changes Save & Publish.

Widgets

Drag Widgets to Widgets Positions and customize each widget as your requirements.

  • Go to Appearance > Widgets
  1. Available Widgets are listed along with some useful widgets built by our developers.
    • PT: Recent Post Widget allow to display posts with by latest post or by category of post.
    • PT: Author Widget allow to display user ( Author ) details.
    • PT: Social Profiles Widget allow to display the social profiles.
    • PT: Instagram Feed Widget allow to display the Instagram Images.
    • PT: Facebook Page Widget allow to display the Facebook Page.
  2. Sidebar widget position allows to display widgets to the sidebar for single post and pages.