Saonara Theme

Upload via WordPress Admin

To add a new theme to your WordPress installation, follow these basic steps:

1. Download a package from ThemeForest in a Downloads section
2. Log in to the WordPress Administration
3. Go to Appearance › Themes › Add New › Upload Theme
4. Browse and select theme zip folder called saonara.zip (is located inside of downloaded zip package)
5. Press Install Now button
6. Activate theme with Activate link

Upload via FTP Server

Use your FTP Client to upload non-zipped folder called saonara (Unzip the saonara.zip file) and saonara-child (optional child theme) into the /wp-content/themes/ folder on your server.

To update the theme please follow these basic steps:

1. Download an updated package from ThemeForest in a Downloads section
2. Log in to the WordPress Administration
3. Go to Appearance › Themes
4. Activate other theme than Saonara
5. Click on outdated theme and remove it (all content, widgets and theme options will be preserved)
6. Go to Appearance › Themes › Add New › Upload Theme
7. Browse and select theme zip folder called saonara.zip (is located inside of downloaded zip package)
8. Press Install Now button
9. Activate theme with Activate link

To add the needed functionality to the theme is necessary to activate the required plugins.

1. Go to Appearance › Install Plugins
2. Install and activate plugins you want to use with a theme.

To automatically import the demo data into your WordPress, follow these basic steps:

1. Go to Appearance › Install Plugins
2. Install and activate plugin One Click Demo Import, if not installed yet
3. Go to Appearance › Import Demo
4. Press Import
5. Let the importer work until it displays information about successful (or unsuccessful) importing (it may take several minutes).

If the import stalls and fails to respond after a few minutes, or it fails with a simple error message like “Import failed,” You are suffering from PHP configuration limits that are set too low to complete the process. You should contact your web host and ask them to increase those limits to a minimum as follows:

1. max_execution_time 600
2. memory_limit 128M
3. post_max_size 32M
4. upload_max_filesize 32M

To set up the homepage, follow these steps:

1. Create a new page by going to Pages › Add New
2. Fill in the Title of the page (for example: Home).
3. Press Publish and page will be saved
4. Go to Settings › Reading
5. Check the radio button A static page (select below)
6. Select Front page: called as created page (for example: Home)
7. Press Save Changes

The theme comes with a list of built-in block patterns. To get started, we’ll create a new page, though you can use an existing page or post as well.

1. To add the block pattern to the page, click the “Add block” button on the upper left of the editor (a large “+” within a blue box).
2. Then, click on the Patterns tab.
3. Within the Patterns tab, you’ll see a number of premade patterns that are included with WordPress. Click on the pattern and it will be automatically added to the page. From there, we can tweak the blocks to our heart’s content.

In some cases, like when you’re building your homepage or a landing page, you might want to remove the page title.To remove the page title, go to the WordPress page dashboard, and in the page attribute box, under template, choose the Blank Page template.

Blog & Portfolio #back to top

---

The Saonara theme comes with advanced options to make adjustments to individual standard post categories via the admin so you can easily change the layout, colors…etc on a per-category basis. Simply log into WordPress and go to Posts > Categories and click on the category you wish to edit to access these settings.

How to apply animation on Scroll (WebGL)

---

Before you start

1. Go to Appearance › Customize › Theme Settings › Base
2. Activate smooth scrolling.

You can add animation to an image in the block settings on the right side of the screen.

Lightbox

---

Saonara comes with built-in Lightbox functionality. If you insert an image into your post that links to it’s “media” file, it will add lightbox support to the link.

Image Block

Gallery Block

Color Settings #back to top

---

How to change page colors

---

Go to Appearance > Customize > Colors and here you will find options for all the main sections of the site so you can customize the default theme colors.

You can change the colors of any page using the color picker in the inspector.

The Gutenberg color settings interface allows users to customize text and background colors for different blocks in the block editor. You can select from a set of default color, or use a color picker to define your own color.

Simply go to Appearance > Customize > Typography and here you will find options for all the main sections of the site so you can customize the default theme typography.

Change typography on any blocks to achieve better and stunning block patterns and page designs.

1. Install the child theme

2. Create a fonts folder in the child theme.

   

   We’re going to put our custom font into this fonts folder. For the sake of the example, I’m using GT Walsheim. There’s a ttf, woff and woff2 version of the font.

3. Edit style.css

   Next, you’ll need to add some custom CSS within your child theme’s style.css file to reference this new font. There’s a reference to local also. If the user happens to have the font already installed there’s no need to download it also.

       @font-face {
         font-family: 'GTWalsheim';
         src: local('GTWalsheim'), local('GTWalsheim'),
           url('fonts/GTWalsheimRegular.woff2') format('woff2'),
           url('fonts/GTWalsheimRegular.woff') format('woff'),
           url('fonts/GTWalsheimRegular.ttf') format('truetype');
         font-weight:  400;
         font-style:   normal;
         font-stretch: normal;
         font-display: swap;
         unicode-range: U+000-5FF;
       }
   

   Note that I’ve called the font-familly – GTWalsheim – this is important.

4. Edit functions.php

   Add the following code to the child theme’s functions.php file.

       function saonara_child_custom_fonts( $standard_fonts ) {
           $my_custom_fonts = array();
           $my_custom_fonts['GTWalsheim'] = array(
               'label' => 'GT Walsheim',
               'variants' => array('regular','italic','700','700italic'),
               'stack' => 'GTWalsheim, sans-serif',
           );
           return array_merge_recursive( $my_custom_fonts, $standard_fonts );
       }
       add_filter( 'kirki/fonts/standard_fonts', 'saonara_child_custom_fonts', 20 );
   

5. Apply it in the customizer

   Now, when you edit a typography element in the customizer you should see this new font as an option in the dropdown. If you’ve done everything correctly it will render.

   

1. Go to Appearance > Menus and click the link to create a new menu.
2. Give your menu a name and click the button to create menu. To add menu items, simply select options in the left side column by checking the box for pages categories, tags etc that you want to include and then click the Add to menu button.
3. You can add a thumbnail for each menu item:
4. When you are done adding links, select a menu location by checking one of the options listed under Theme locations and then save your menu.

Theme includes 2 menu location options:

1. Primary - Used for the main navigation.
2. Top - Used for the top left side of your site(large screen only)

If you imported the sample data then you should have also imported our sample menus. To assign them you can either edit each menu individually to add a menu location, or click on the Manage Locations tab to assign menus to each location at once.

In WooCommerce you must declare your “shop” page which will be used to display your recent products but also used in the theme’s breadcrumbs trail. To define your page you first need to create a standard page (if you haven’t done so yet) then go to WooCommerce > Settings then click on the “Products” tab then on the “Display” sub-tab where you will find the dropdown option.

Saonara allows to add UNLIMITED additional images for each variation of product. Go to variation of product then click to open you will find a button “Add Images” click this button to add addition images for variation.

1. Go to “Appearance › Widgets”
2. Add widgets to the “Footer” widget area.

Saonara makes it really easy to arrange your widgets in rows of columns. It works by adding a new Column width select options at the bottom of your widget’s form that allows you to set a width value for each widget.

The theme includes tons of easy to use options to customize the design of your site. Most of your theme options can be found in the live WordPress theme customizer.

Simply navigate to Appearance > Customize to make changes to the design of your website.