Themes Generator Documentation

WordPress Themes Generator documentation – 06/03/2019 revision

Check this useful information about how Themes Generator works.

1. WORKSPACE OVERVIEW

2. IMAGES

3. STORAGE

4. LINKS

5. EXPORT THEME INTO WORDPRESS

6. THEMES GENERATOR

7. MORE HELP

BUTTONS

Device buttons

To create responsive layouts, click on the desktop, tablet and mobile icons to see how your design looks in the different devices and make the necessary changes.

Main menu buttons

From left to right, these are the functions of the icons above: 

  • Show or hide borders.
  • Activate fullscreen.
  • Undo – Redo – Delete canvas.
  • Export theme to WordPress.
  • Theme settings.
  • Save theme.
  • Load theme.
  • User profile.

Top right buttons

From left to right, these are the functions of the icons above: 

  • Blocks: prebuilt blocks to design your theme by dragging and dropping the blocks. 
  • Style manager: styling panel of the web elements. 
  • Layers: see the hierarchy of the web elements.

BLOCKS

Basic blocks

Here you can see the detailed description of every block: 

  • Text: a text block to add titles and paragraphs.
  • Image: image frame to add your photos. 
  • Video: a video player to embed your videos from YouTube, Vimeo or other HTML5 source. 
  • Link block: make images, buttons or other elements linkable.
  • Page content: this block will show the content of any of your WordPress pages. You can use as many blocks as you want. Select the shown page in the customize menu.
  • Latest posts: this block will show the latest posts of any chosen category. Style it using WordPress customizer. You can remove the thumbnail setting it to 0px width.
  • Slideshow: Drag the slideshow block anywhere in your workspace. You will edit this slider later in WordPress. After installing your theme in WordPress, go to Customize to change your slideshow content.  SmartSlider 3 and Meta Slider are the free slideshow plugins compatible with Themes Generator. Just install one of them and create a new slideshow from blank or based on a template.

Layout blocks

Here you can see the detailed description of every block: 

  • PercentWidthBox (2): a grid layout of two 50% width columns. These columns are flexible percent based widths that resize fluidly.
  • PercentWidthBox (3): a grid layout of three 33.3% width columns. These columns are flexible percent based widths that resize fluidly.
  • PercentWidthBox (4): a grid layout of four 25% width columns. These columns are flexible percent based widths that resize fluidly. 
  • PercentWidthBox (5): a grid layout of five 20% width columns. These columns are flexible percent based widths that resize fluidly. 
  • PercentWidthBox (6): a grid layout of six 16.6% width columns. These columns are flexible percent based widths that resize fluidly.
  • Container: a box that encloses paragraphs, images and other web elements. It sets the maximum width of the content inside it. 
  • Separator: a box to vertically separate web elements.

Main blocks

Here you can see the detailed description of every block: 

  • HEADER SEPARATOR (required): a separator needed to mark the end of the header. This bar will not be visible once the theme is converted into WordPress. 
  • FOOTER SEPARATOR (required): a separator needed to mark the beginning of the footer. This bar will not be visible once the theme is converted into WordPress. 
  • DEFAULT THEME STYLES (optional): styling options to style your theme such as hover menu color, burger icon color, page and post text color, etc. 
  • MENU NAV BAR (optional, but recommended for almost any case): this block will show the content of any of your WordPress menus.

Extra blocks

Here you can see the detailed description of every block: 

  • Anchor: it allows you to create destination targets in one page websites using their ID. 
  • Map: a map powered by Google maps.
  • Hero Image: different prebuilt hero image blocks. Images with text integrated. 
  • Footer sample: different prebuilt footer blocks. 
  • Card Blocks: versatile prebuilt blocks for different sections.
  • Staff Blocks: pre-styled staff section block. 
  • Pricing blocks: pre-styled pricing section block. 
  • Services blocks: pre-styled services section block.
  • Social icon: icons to link to social media.
  • Scroll animation container: see below.
  • Text list: a text list with bullets.

Scroll animation container

Drag out the animation block and replace the content with your own. If you want to center the animation block, click on its parent and use typography alignment options, like you should do with any other element with display property “inline” or “inline-block” (text and images have this property value). 

The animation by default is “fadeInUp”. To change the animation, delete the class “fadeInUp” and create a new class by clicking on the + button. That new class name must be an element from the list below. Be careful, you need to type the name exactly as seen in the list below, since the classes are case sensitive. You need to export your theme into WordPress to view the animations. 

Animation list: bounce, flash, pulse, rubberBand, shake, headShake, swing, tada, wobble, jello, bounceIn, bounceInDown, bounceInLeft, bounceInRight, bounceInUp, bounceOut, bounceOutDown, bounceOutLeft, bounceOutRight, bounceOutUp, fadeIn, fadeInDown, fadeInDownBig, fadeInLeft, fadeInLeftBig, fadeInRight, fadeInRightBig, fadeInUp, fadeInUpBig, fadeOut, fadeOutDown, fadeOutDownBig, fadeOutLeft, fadeOutLeftBig, fadeOutRight, fadeOutRightBig, fadeOutUp, fadeOutUpBig, flipInX, flipInY, flipOutX, flipOutY, lightSpeedIn, lightSpeedOut, rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight, rotateOut, rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, rotateOutUpRight, hinge, jackInTheBox, rollIn, rollOut, zoomIn, zoomInDown, zoomInLeft, zoomInRight, zoomInUp, zoomOut, zoomOutDown, zoomOutLeft, zoomOutRight, zoomOutUp, slideInDown, slideInLeft, slideInRight, slideInUp, slideOutDown, slideOutLeft, slideOutRight, slideOutUp, heartBeat.

IMAGES

How do I add images?

Drag the image block to the canvas and double click it to upload your image. 

  • If you are a free user, you can add your images via URL. 
  • If you are a Premium user, you can upload your images from your desktop or link them using URL. The maximum size allowed for each image is 1MB. We do not recommend using images bigger than 1MB as they will slow down the page loading speed. If you still want to use an image bigger than 1MB, you can add them via URL (up to 5Mb).

How do I center images?

There are two ways to center images: 

  • Using the -center alignment- in Typography. 
  • Type -auto- on right and left margins and select Display->Block in General tab.

How do I add a background image?

Click on the container and go to Decorations tab. Add an image by clicking on the plus button near background. Open the layer and click on “image” to add your pictures. 

How do I create a parallax effect with a background image?

Go to Decorations and open the image layer. In “Background attachment” select Fixed.

How do I set up the favicon of my exported theme?

Once you have installed your WordPress theme, go to Appearance -> Customize -> Site identity and select or upload any image.

STORAGE

Image storage

  • Free users have a 5MB limit size storage. The size limit of the images uploaded by free users is 500Kb. Images older than 30 days will be automatically deleted.
  • Premium users have up to 50MB storage limit. You can store up to 1000 50Kb images. The size limit of the images uploaded by premium users is 1Mb. Once the premium subscription has expired, you become a free user and images older than 30 days will be automatically deleted.
  • Both, free and premium users, are responsible for keeping a back up of everything uploaded to Themes Generator.

Local storage

Modern web applications store data locally within your browser. This means that your browser will automatically save your design and it will be available the next time you open your browser.

Anyway, Themes Generator allows you to save your designs in local TXT files, so if you change your browser or computer, you can easily open it.

Added from URL images

Also use local storage. This means that your browser will automatically save your images in the image gallery and they will be available the next time you open your browser.

If you change your browser, your added from URL image will not be present in the media gallery. We recommend you to use the same browser when designing your theme. 

LINKS

How do I link images, buttons and other elements?

You should first add a Link block (inside Basic blocks) and then place the image or button inside it.

When you are done placing the element inside, click on the link box and scroll down your style manager until you reach the “Component settings” tab to assign properties such as href, title and target.

How do I link text?

You can add a link to a text with the simple editor.

Select the text that you want to link and some editing options will appear over the text block. Click on the link icon and it will create a link. Now click outside the text block and back to the desired linked text.

You will see that a smaller box surrounds the text. Once done, scroll down the style manager until you reach the “Component settings” tab. You can assign properties such as href, title and target.

How do I select what WordPress menu is shown in my theme?

The Themes Generator MENU NAVBAR block content will be replaced by a WordPress menu when you install your exported theme. You can manage the WordPress menus under Appearance > Menus.

The WordPress menu in the “Top menu” location will be the one that appears in your theme.

If you have two or more menus, choose the main menu in WordPress using Customize > Menus > Locations and assign a menu to the Top Menu location.

EXPORT THEME TO WORDPRESS

Why is it required to place a header and footer separator?

You must add a header and footer separator to convert your theme into WordPress. But do not worry, the bars are only visible in your workspace and they will not show once you convert your template into WordPress.

Where should I place the header and footer separator?

You should place the Header separator below your header, and the footer separator just before your footer starts. The separators should not be inside any other container, they should be placed inside the body itself. 

How do I export my theme into WordPress?

Click on the Export icon on the top right menu and a .zip file will download. In WordPress, instal the .zip file like other themes in Appearance->Themes.

What does the exported .zip file contain?

The .zip file contains all the converted files ready to be installed into WordPress. Also, a backup file named themes-generator-theme.txt is included. You can make changes in the future by opening this file in Themes Generator.

What is the size limit of the exported .zip file?

The maximum size per image is 5 MB and the maximum size of the .zip file is 20MB. If you exceed these sizes, the files will appear but the images will be empty.

THEMES GENERATOR

Where can I subscribe to Themes Generator?

Follow this link to become a premium Themes Generator user.

Is Themes Generator compatible with WooCommerce?

Yes! Since January 2019 all the exported themes fully support Woocommerce.

How do I know if the themes created in Themes Generator are compatible with my version of WordPress?

Easily! Themes generator is compatible with WordPress 4.7 and up.

I am a free user and I want to upgrade. How can I do it?

Sure! Follow this link to purchase Premium/pro subscription. Once the payment is completed, you will be automatically upgraded. In Themes Generator, logout and log back in to make it effective.

Will all the images added from URL still be there once I upgrade?

Yes, all the images added by URL will still appear under that category.

VIDEO TUTORIALS

Check Themes Generator tutorials playlist in YouTube: