up

Gutentag

WordPress Theme


All the support is provided via personal tickets. To submit us a ticket please fill in the form: http://cmsmasters.net/support/

Gutentag is a modern and clean WordPress Blog theme based on Gutenberg page builder. Unlimited design solutions can be created due to a great flexibility of settings and blocks options. It supports all native Gutenberg blocks, and custom blocks are added through a built-in Block editor, they extend Gutenberg’s editing capabilities to better build custom layouts. The theme has multiple creative blog page layouts that offer an optimal way to present your content. Visual Portfolio let you create beautiful blog and portfolio layouts. Gutentag comes with a Custom Mega Menu plugin, Custom Fonts plugin, and premium Revolution and Layer Slider plugins included for free.

Multilanguage, RTL-ready, plugin-compatible and professionally-supported theme. Beautiful typography, extremely simple customization, valid code and SEO-optimized structure - this theme is perfect for blogging.

Install Your Theme


Before installing the theme, you need to install WordPress (see details here). Once you have installed WordPress and logged in to admin panel, you can install Gutentag theme.

Important!

Before using the theme, please follow an instruction below.

After you have installed WordPress , find the .htaccess file on your server, please open it and add (to the very end of the file) the following code:

php_value post_max_size 64M
php_value upload_max_filesize 128M
php_value max_file_uploads 128M
php_value max_input_vars 5000

Please make sure you do this BEFORE installing and activating the theme, if you are installing it via Admin panel, and always BEFORE uploading any demo content.

Note: On some servers you may not be able to alter the htaccess file. If you encounter an issue with this, please contact your hosting provider. Mostly these alterations are needed for Demo Content import.

There are two ways to install the theme

  1. Upload via WordPress admin panel.
  2. Upload via FTP directly to your server.

Once your theme is installed, you will be able to customize it by yourself from scratch, or use our Demo Content (see more about it in the relevant chapter).

1. Upload the theme using WordPress admin panel

To upload theme using WP admin panel, please proceed to Appearance > Themes.

Choose “Upload theme”

Click “Browse” and choose the Gutentag theme archive on your computer, then click “Install Now”.

Important!

Please make sure you are not choosing the entire theme archive you have downloaded from Themeforest, you should use only the theme archive - gutentag.zip.

Note: To perform the requested action, WordPress needs to access your web server, so when you'll get to uploading the theme, please enter your FTP credentials. If you do not remember your credentials, you should contact your web host.

Once the installation process is finished, click “Activate”.

2. Upload theme via FTP

To upload your theme to via FTP, you need to unzip and copy all the files from “gutentag” folder to wp-content/themes/gutentag directly on the server (use only lower case letters!).

After you did that, Gutentag theme will be available for activation in WP admin panel: Appearance - Themes. Activate it by clicking “Activate”.
Note: before activating disable all your plugins.

For correct functionality, please, make sure that you consider all of the following:

  1. There are NO NESTED FOLDERS like:
    /wp-content/themes/gutentag/gutentag.
    A correct path will look like:
    /wp-content/themes/gutentag.
  2. You SHOULDN'T copy entire theme archive you have downloaded from Themeforest to your server - only unzipped gutentag.zip.
  3. DO NOT rename the theme on your server. Theme names like /wp-content/themes/gutentag1 or any other are INAPPROPRIATE. Please make sure the theme folder is called themes/gutentag.
  4. Use only lower case letters.

If you've faced an error in the process of theme activation, please, make sure you have followed our instructions carefully. Your server settings may restrict some theme features, so you can try contacting your hosting support for help. If the issue persists, disable all plugins and try again.

In any case, please feel free to contact our support guys, they will help you with theme installation or guide you on what the problem can be - http://cmsmasters.net/support

Adding Plugins


Your theme archive comes with several plugins.

Important:

if you are planning to upload Demo Content that comes in the theme archive, you need to INSTALL ALL PLUGINS!!!

To update the theme automatically please use the Envato Market plugin. After activating the plugin, click on the “Envato Market” icon from the left sidebar. To generate your Global OAuth Personal Token click on this link and login using your Envato Market login details. Please copy & paste your unique token into the Envato settings inside your WordPress dashboard and click on “Save Changes”. Once you have configured this properly, you will see a screen where you can install or update your already purchased plugins & themes.

After your theme is installed and activated, it will remind you about installing the required and recommended plugins. You will see the following notice across your Dashboard:

To install the plugins you can either click a "Begin installing plugins" link in this notice, or proceed to Appearance - Theme Plugins

After you have installed and activated a plugin, it will disappear from this admin page, but will appear in the Plugins Tab:

Important:

You should have "755" access settings for the wp-content folder before installation.

You can do it using your FTP client - Filezilla, FireFTP, etc. - or hosting C-panel.
Open a drop-down menu by clicking the right mouse on the folder, specified above.
Choose there "access rights" (or maybe something similar - depends on your FTP client) and make changes.

Upload Demo Content


Important:

Before uploading Demo Content please make sure you have installed and activated ALL PLUGINS that came with the theme. You may reference "Plugins Installation" section of this guide for more information.

There are two ways to upload demo content to your site.

1. One-click demo import.

Please proceed to the Import Demo Content tab and check all the checkboxes:

Please wait until the end of the procedure, do not navigate away from the page until you see a success message.

2. Import demo content manually.

Please install WordPress Importer plugin.

In your admin panel proceed toTools - Import

And then choose WordPress Importer tool:

Important:

You should have "755" access settings for the wp-content folder, otherwise your demo content won't be installed.

You can do it using your FTP client or C-panel. See how to set the permissions in more details in Plugin Installation section.

Step One - Import the Content Itself:

Demo Content files can be found in the archive you have downloaded from Themeforest. DEMO CONTENT folder contains .xml content import file, .txt theme settings file, .wie widgets file and one or more slider import files.

First please proceed to Tools - Import and choose WordPress Importer, then browse for the .xml demo content file on your computer and click the Upload button:

Don't close this browser tab until the installation is finished. Be patient - it may take few minutes.

The WordPress Importer plugin, which adds DEMO content, adds content only - i.e., posts, pages, menus, images. It will not import Theme Settings. Theme settings will be imported separately in the second step.

Note:

1. Demo content adds all the posts and pages just like we have on our demo site, but all the images are substituted with placeholders. Our license does not allow us redistribute images, but quite sure you will find tons of great images on photodune.net - Visit Photodune Now.

2. After you have imported Theme Settings and Demo Content, you need to choose your homepage and your navigation (see instructions for both below).

3. Should there be any difficulties or questions, please feel free to contact our support, we are always glad to help you - http://cmsmasters.net/support.

Step Two - Import Theme Settings:

Now you can import theme settings, as they are different for all demo sites. In your theme archive see the DEMO CONTENT folder and open the folder, you want to use content from. Then open the .txt file with the theme settings. Copy all the code in this file:

Now proceed to Theme Settings - Import/Export - Import tab and paste the code you have copied into the field provided, then click "Import Settings" button:

Step Three - Import Widgets

Widgets created with the help of the third-party plugins should be imported separately. First please proceed to Tools - Widget Importer&Exporter and browse for the .wie widgets file from the appropriate demo content folder on your computer and click the Import Widgets button:

After importing widgets data you can manage your widgets in the Appearance - Widgets tab:

Step Four - Choose your Home Page and Navigation:

To set your Home Page please proceed to Settings - Reading and set a Static Page as a home page, then use a drop-down to find and assign a specific page. You should choose "Home":

You also need to assign your navigation. The menu was already imported to your website, but you just need to set it in Appearance - Menus - Manage Locations. Choose Primary Navigation as Primary Navigation and save changes. There might also be a need to assign other menus too, if they are present on the website you are replicating.

Step Five - Import Sliders:

The final step to replicate a demo site will be importing the sliders. The sliders import files are included in the archive you have downloaded from Themeforest in a Demo Content folder:

Some of the demo sites can have both Layer and Revolution fles to import, some may have only one of them. In any case, you need to the .zip archive that is located inside.

To import slider demo content you need to proceed to the slider tab on your admin panel and import the .zip file. See a screenshot for the Layer Slider import:

See the same procedure for Revolution Slider:

Note:

1. Please make sure you are using a corresponding import archive.
For instance, use a file from a LayerSlider folder to import in Layer Slider plugin and a file form a Revolution Slider folder to import into a Revolution Slider .

2. Please note that the slider import file will import all slider settings, slides, layers, captions and animation effects, but with all images substituted with placeholders.

3. Should there be any difficulties or questions, please feel free to contact our support, we are always glad to help you - http://cmsmasters.net/support.

Appearance Settings


Gutentag theme provides really flexible appearance settings.
One of the main features, are Color Schemes.

1. Color Schemes

Color Schemes allow you create preset color solutions that subsequently can be applied when editing your website content, like menus, footer etc.

Color schemes can be set up and edited In Theme Settings - Colors tab in your admin panel.

Please see the screenshot:

2. Font Settings

All website font settings can be edited in Theme Settings - Fonts tab. you can find settings for general content, links, navigation, headings and some other elements. To customize your website appearance, just play around with the font settings, or leave theme default if you wish. See the screenshot:

Yet, Gutentag theme allows you to add any of hundreds Google fonts and see them on your website. Just follow a guide below

Add more google Fonts

You can add more Google Fonts and decide whether they should be retrieved via the Google fonts API, or if they should be hosted locally on your server.

Please proceed to the Theme Settings - Fonts - Google Fonts tab for serving Google Fonts from CDN or Custom fonts tab to add self-hosted Google Font and follow the instructions:

Header, Footer, Logo & Favicon


In the latest WordPress version to add a Favicon you need to proceed to the Appearance - Customize and click on the Site Identity.

In Theme Settings - General - General tab you can manage some logo.

In Theme Settings - General - Header tab you can manage some header settings, like custom html content in your header, top line content, etc.

Please note: for superior performance on Retina displays, logo image is added in two sizes. It is recommended that you add an image for Retina logo twice larger than your default logo.

Gutenberg lets you easily create pages and posts that previously required custom HTML and shortcodes. The new way of publishing content has a new look and functionality. Gutenberg is based on the concept of blocks. It has different types of built-in blocks – text blocks, media blocks, layout blocks, and code blocks. Blocks make the publishing process more visual. Blocks are a great new tool for building engaging content. With blocks, you can insert, rearrange, and style multimedia content with very little technical knowledge. Instead of using custom code, you can add a block and focus on your content.

For more information about Gutenberg, please read the official documentation.

You can also try it here: https://wordpress.org/gutenberg/

Gutentag comes with Ghost Kit plugin. It is a blocks collection and powerful extensions for Gutenberg block editor. With this collection, you will gain more control over content just like with popular page builders. Just start with responsive Grid block and you can’t stop building the page.

For more details click here.

You can improve the standard functions of Gutenberg by using additional plugins that are recommeded for this theme.

Advanced WordPress Backgrounds

AWB let you to use parallax backgrounds with images, videos, youtube and vimeo. The official documentation is available here.

WordPress.org Plugin Page: https://wordpress.org/plugins/advanced-backgrounds/

Kadence Blocks - Gutenberg Page Builder Toolkit

Advanced Page Building Blocks for Gutenberg. Create custom column layouts, backgrounds, dual buttons, icons etc.

This plugin adds custom blocks to extend Gutenberg’s editing capabilities to better build custom layouts and make Gutenberg able to do more closely what popular page builders can do. With the Kadence Row Layout Block you can better control columns for different screen sizes plus it gives you full row editing tools like padding, backgrounds, overlays with gradients, vertical align and much more.

WordPress.org Plugin Page: https://wordpress.org/plugins/kadence-blocks/

Widgets & Sidebars


You can use sidebars to add widgets. To access sidebars you need to proceed to Appearance - Widgets. You will find default sidebars and will be able to add widgets to them. Just drag the needed widget to the sidebar where you want to place it to:

You can as well add widgets simply by clicking on them. After you do, you will have a possibility to choose which of the default or custom sidebars, existent on your website, you want to add it to:

Your theme has 2 default sidebars: Sidebar (usually used as Right/Left) and Bottom Sidebar (is located above the footer).

Yet, you can add more sidebars that can be later on used in a Widgetized Area anywhere on your page, or used as alternative Right/Left or Bottom Sidebar. You can add an unlimited amount of custom sidebars, please proceed to Theme Settings - Elements

You can enable any default sidebar or one of your custom sidebars on any website page in Theme Options section. You can find this section if you open any of your pages in your admin panel. Here you can assign any of the existing sidebars as Right/Left or Bottom sidebar. Also note, that for a Bottom sidebar you can choose a layout, depending on the amount of columns you want your widgets to be arranged into:

Yet, your theme provides additional options for adding sidebars to your pages. You can add any sidebar to any place on your page by using a Widgetized Area.

In a Widgetized Area you will be able to choose one of the existent sidebars.

Blog & Blog Posts Setup


To create a new blog post proceed to Posts - Add New:

Enter the post title in the upper field.

Enter the post body content in the next field. This is called Paragraph block. From popup tool bar, you can customize the Paragraph Block, or change its type to other blocks such as Heading, Quote, List, Preformatted or Verse.

To add the new block, Click Plus("+") at the bottom of blocks, and select a type of block. Or, you can click Paragraph or Image to add them direct.

Tips: Type the name of Block in the Search box. It will incrementally search block from not only Bloks tab but also Embeds tab.

Assign taxonomies to your post - Tags and Categories. Also add a Featured Image to your post and write an Excerpt.

Play around with theme options for your post to manage Layout, Heading and some other options.

When you are ready, click Publish.

Visual Portfolio


Visual Portfolio is a plugin that allows to make galleries of portfolio items: in your portfolio, you can show a set of images, your posts or special portfolio posts.

Visual Portfolio generates shortcode to show posts and portfolio custom post types using Masonry, Tiles or Slider layouts.

For a more detailed list of options and features of the plugin, please look at the official documentation.

Translate your website


There are no ready language files, but you need to take only a few steps to translate your website to the needed language. You can translate the theme to any language, as well as RTL Language.

The theme has ready rtl.css file, which is used, when RTL language is selected for the website.

The first step you should take is create your own language file. To implement this you should install Poedit:

www.poedit.net

Copy gutentag.pot file to your computer.

Note: You will find the language pot file in wp-content/themes/gutentag/theme-vars/languages.

Run Poedit and proceed to File/New catalog from POT file.

Choose the .pot file you've copied to use as a skeleton of your language. You'll get the list of messages and common phrases.

Select a text you'd like to translate onto your language and enter changes in a lower field as shown on the screenshot:

You should enter new text to the field in the bottom of the window - it will be saved for each item automatically. Edit all the messages you need and make sure you save changes to the file before closing.
Create a language file (for instance the lg_LG file or any other name to your preference). The program will create two files with similar names with extensions .po and .mo.

When translation is finished and saved, copy these two files to your server: wp-content/languages/themes folder named as gutentag-lg_LG.po and gutentag-lg_LG.mo. In case if there is no wp-content/languages/themes folder you should create it first.

Here is a list of language codes examples that can be used:
de_DE for German translation
fr_FR for French translation
it_IT for Italian translation
pt_PT for Portuguese translation
es_ES for Spanish translation
ru_RU for Russian translation
etc.

In a case of need you can edit the fles you have created, just open a lg_LG.po with Poedit. You will get a list like this: