Alatsi

Theme Documentation

Theme Installation & Activate

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email me via my email: themexoda@gmail.com

Please Note!

Alatsi will only work with WordPress.ORG and not WordPress.COM.

Once downloaded, you must unzip the file Main-Alatsi.zip to access the alatsi.zip and alatsi-child.zip theme file you’ll need to install the theme. If you receive the missing style.css stylesheet error message, you have not unzipped and will need to do so before uploading the theme.

Upload the theme file

  1. Go to AppearanceThemes 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 alatsi.zip in your computer
  5. Click Install Now

Do the same with alatsi-child.zip file

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

Updating Theme

To update the theme, login to your marketplace account and re-download the theme package like you did when you purchased it. Extract the downloaded ZIP file.

A theme update always deletes all existing theme files and replaces them with the files of the new theme version. Therefore you should never change the theme files directly, because they will be lost due to an update. Instead, use a child theme in case you want to change the theme files directly.

  1. Log in to the WordPress Administration Panels.

  2. Navigate to the AppearanceThemes menu.

  3. Since WordPress does not recognize that the theme is already installed when you upload a new zip file, you will get a 'Theme Destination already exists' error if you try to install the theme. Therefore you have to deactivate and delete the old theme and afterwards install and activate the new theme version.

  4. Deactivate the theme by activating another.

  5. Click on the screenshot of the Alatsi theme. This will open the Theme Details popup box.

  6. Click on the Delete button in the bottom right corner to remove all theme files.

  7. Upload the new version alatsi.zip and install the theme.

Child Theme

A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme.

Why use a Child Theme?

There are a few reasons why you would want to use a child theme:

  • If you modify a theme directly and it is updated, then your modifications may be lost. By using a child theme you will ensure that your modifications are preserved.
  • Using a child theme can speed up development time.
  • Using a child theme is a great way to learn about WordPress theme development.

Child Theme Install

  1. Log in to the WordPress Administration Panels.
  2. Navigate to the Appearance > Themes menu.
  3. Click the Add New button on the top of the screen.
  4. On the next page, click the Upload Theme button on the top of the screen.
  5. Click the Choose File button to open up a dialog to browse your computer and navigate to Child Theme folder. Select the file alatsi-child.zip and click Install Now.
  6. Please wait a few seconds, WordPress will upload and extract the theme archive for you. All you need to do next is to press the Activate link under the message for successful theme installation.
  7. That's it! Now you can add custom CSS code and PHP functions.

How to use the child theme

  1. After install the child theme navigate to Wordpress admin panel.
  2. Navigate to the Appearance > Editor menu.
  3. In the section titled Templates, you will see a list of files that you can edit:
    • functions.php - This lets you add additional functions, classes and hooks to WordPress theme without needing to alter the code within the functions file of the parent theme.
    • style.css - This lets you add or change the theme styles (colors, sizes, fonts, backgrounds etc.) without needing to change the code within the style.css file of the parent theme.
  4. Select the file you want to change and add your PHP/CSS code in the editor on the left side.
  5. Click the Update File button when you're finished editing a file.

Plugin Installation

This theme requires the installation and activation of some plug-ins to add additional features and capabilities. If you want to use contact form, instagram, newsletter and demo import, you need to install the following plugins:

  • Elementor - versoin Free - It’s about time for a live page builder, with no limits of design. A page builder that delivers high-end page designs and advanced capabilities, never before seen on WordPress.

  • Categories Images - The Categories Images Plugin allow you to add image with category or taxonomy

  • One Click Demo Import - The best feature of this plugin is, that theme authors can define import files in their themes and so all you (the user of the theme) have to do is click on the “Import Demo Data” button.

  • Mailchimp for WordPress - This plugin helps you grow your Mailchimp lists and write better newsletters through various methods. You can create good looking opt-in forms or integrate with any existing form on your site, like your comment, contact or checkout form.

  • Contact Form 7 - Contact Form 7 can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on.

  • Meta Box - Meta Box helps you add custom fields and details on your website such as pages, posts, forms and anywhere you want using over 40 different field types such as text, images, file upload, checkboxes, and more.

  • Smash Balloon Instagram Feed - Display Instagram posts from your Instagram accounts, either in the same single feed or in multiple different ones.

How to setup Contact Form

Form Code:
			                	
<div class="row">
    <div class="col-md-6">
        [text* your-name placeholder "Your Name"]
     </div>
    <div class="col-md-6">
     [text* your-email placeholder "Your Email *"]
    </div>
    <div class="col-md-12">
    [text your-subject placeholder "Subject"][textarea your-message 10x5 placeholder "Your Message"][submit id:SendMessage "Send Message"]
    </div>
</div>
			                    
			                

Create Contact Form

  1. Navigate to the ContactAdd New page in the WordPress admin.
  2. Enter a name for Contact Form
  3. Copy the code above into contact form
  4. Click the Save button.

Create Page Contact

  1. After Created Contact Form, copy the shortcode
  2. Navigate to the PagesAdd New page in the WordPress admin.
  3. Enter a name for Page
  4. Paste the shortcode in step 1 into the page content
  5. Click the Pulsish button.

How to setup Mailchimp

Form Code:
		                	
<div class="xoda-newsletter">
    <div class="newsletter-title">
      <h4>JOIN US TODAY!</h4>
      <p>Receive the latest posts via email!</p>
    </div>
    <div class="newsletter-form">
      <input type="text" name="NAME" placeholder="Your name" required="">
      <input type="email" name="Email" placeholder="Your email address" required="">
      <button type="submit" value="Sign up">Sign up</button>
    </div>
</div>
		                	
		                

Create Mailchimp Form

  1. Navigate to the Mailchimp for WPForm in the WordPress admin.
  2. Copy the code above into form code
  3. Click the Save Changes button.

Install Demo Content

Well, it's really simple.

If you're using the theme to build a new website which doesn't have content yet, I strongly recommend you to use the demo content files.

  1. Navigate to the AppearanceImport Demo Data in the WordPress admin
  2. Click the Import Demo Data button

Note : If you have already imported demo data please skip this section

In order for Theme Style to affect all relevant Elementor elements, please disable Default Colors and Fonts from the Settings Page.

Please select the corresponding template in the Template - elementor folder to install

  1. Home Page : Use this template to create a page similar to the Home page
  2. About Page : Use this template to create a page similar to the About page

How to import an elementor template: https://techsini.com/export-import-elementor-template-reuse-projects/

Creating Menus

You can manage and create menus by navigating to AppearanceMenus.

  1. Click the create a new menu link.
  2. Enter a name for the menu (this can be anything e.g "Main Menu").
  3. Click the Create Menu button.
  4. Select Pages you wanted to be appeared in Menu
  5. Click on Add to Menu button
  6. Drag menu item left-right to make it under another menu(sub menu).
  7. Click Save Menu button

Site Identity

You can manage theme options by navigating to AppearanceCustomizeSite Identity.

  1. Upload Logo for site
  2. Enter the information for site: Site Title, Tagline...
  3. Click the Published button.

Social Network

You can manage theme options by navigating to AppearanceCustomizeAlatsi Theme Options.

  1. Click the tabSocial Networks
  2. Enter the links of your social networks if you want to display
  3. Click the Published button.

Home Slides

Shows the list of slides. You can drag and drop them to change their position, duplicate, delete or add a slide. When you click on a single slide, its options open up. Each slide has Background, Content and Style settings.

Content Tab

  1. Slides

    • Image Slide : Choose an image from the media library
    • Title & Subtitle: Insert the title and subtitle for the slide
    • Text Color: Set the color of the text in slide
    • Background Overlay: Choose YES to set a background overlay that will appear on top of the image. If set to YES, you have the option of choosing the overlay’s color.
    • Height: Set the exact height of the slide in either PX, VH, or EM
  2. Slide Option

    • Navigation: Choose to display arrows, dots, both or none
    • Autoplay: Get the slides to rotate automatically, according to the speed you set
    • Infinite Loop: Have the slides rotate in an infinite loop and without stopping
    • Animation Speed: Set the time it takes for the slide to start rotating
    • Direction: Choose a direction for the slider as left or right

Style Tab

  1. Title Style

    • Sub Title Size: Set font size of the title slide
    • Title Size: Set font size of the subtitle slide
  2. Arrows

    • Arrows position : Set the position of the arrows inside or outside the slider
    • Arrows size : Set the exact size of the arrows
    • Arrows color : Set the color of the arrows
  3. Dots

    • Dots Position : Set the position of the dots inside or outside the slider
    • Dots size : Set the exact size of the dots
    • Dots color : Set the color of the dots

Advanced Tab

Set the Advanced options that are applicable to this widget

About Me

Content Tab

About Me

  1. Title : Insert the title for the widget
  2. Description: Insert the description for the widget
  3. About Url: Set the URL for the text’s link. Click the cog to set the link to either open in a new window or to add rel=nofollow to the link
  4. Text Link: Enter the url’s text
  5. Choosen Image: Choose an image from the media library
  6. Image Size: Choose the size of the image

Advanced Tab

Set the Advanced options that are applicable to this widget

Categories Portfolio

Display a grid of Portfolio Categories anywhere on your site.

Select category portfolio: Select list categories display

Recent Portfolio

The Recent Portfolio allows you to display your portfolio in an attractive grid.

  1. Number of portfolio to show : Set the amount of portfolio to be displayed in the widget
  2. Filter by Category : Select the category portfolio to display
  3. Text Link : Enter the button’s text
  4. Portfolio Url : Set the URL for the button’s link. Click the cog to set the link to either open in a new window or to add rel nofollow to the link
  5. Column Gap: Set the exact gap between columns of items
  6. Row Gap: Set the exact gap between rows of items

Alatsi Client

Lets display the image list of cooperation unit

Latest Posts

Display list post most new

  1. Number of posts to show : Set the amount of posts to be displayed in the widget
  2. Select Category : Select the post category to display
  3. Link Text : Enter the button’s text
  4. Blog Link Url : Set the URL for the button’s link. Click the cog to set the link to either open in a new window or to add rel nofollow to the link

Source and Credits

Along the project, I've been using the following assets, even if they were images, icons or other files, as listed.