WordPress Themes Generator documentation – 21/03/2020 revision
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.
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.
- 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.
- 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.
- Section separator: This block will allow you to use cool separators between your sections. You can use different separator types like triangle, curve or diagonal bars. Use color 1 & 2 settings to add solid or transparent colors to each separator part.
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.
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.
- Menu Navbar (optional, but recommended for almost any case): this block will show the content of any of your WordPress menus.
- Default theme styles (optional): styling options to style your theme such as hover menu color, burger icon color, page and post text color, etc.
Extra blocks
Here you can see the detailed description of every block:
- Extra header
This block allows you to add an extra header to your site. You can add as many extra headers as you want. Drag all your header elements into the yellow container (don’t worry about the yellow background, it will disappear once you export and install your theme into WordPress).
Customize this block after installing your theme in WordPress using Customize > Extra header. Remember that usually, you will want to add another navbar menu inside the extra header blocks that you add. Later in WordPress customizer, you will assign the location and style your menus.
Note: in the Customizer, the extra headers will be named “Extra Header 1, Extra Header 2…” and so on. - Extra footer
This block allows you to add an extra footer to your site. You can add as many extra footers as you want. Drag all your header elements into the yellow container (don’t worry about the yellow background, it will disappear once you export and install your theme into WordPress).
Customize this block after installing your theme in WordPress using Customize > Extra footer.
Note: in the Customizer, the extra footers will be named “Extra Footer 1, Extra Footer 2…” and so on.
- Extra page template
This block allows you to create and design as many internal page templates as you want. Drag all your elements into the blue container (don’t worry about the blue background, it will disappear once you export and install your theme into WordPress).
To apply a page template to any WordPress page, use Page Attributes > Template > Page Template X under the page control panel.
Note: in the WordPress backend (pages section), the page templates will be named “Page Template 1, Page Template 2…” and so on.
- Separator: a box to vertically separate web elements.
- Header & background:
By adding this block, you can insert a background image to the header & body. Modern designs use this type of layouts instead of separating the header (which usually contains the logo and the navigation menu) from the rest of the site. Use your creativity and design clean, smart and stylish WordPress themes.
Drag the block into your Themes Generator workspace. As it’s a pre-built block, tablet and mobile view have been already pre-styled. You can customize it too until it fits your own design, so you will save lots of time! Notice that the block already includes the header separator and the navbar.
To change the background image, you must select the container of the header (the container on top of the header separator) and in the style manager, click on Decorations – Backgrounds and change the image inside the layer. You will need to repeat this step again with the container below the header separator. You will see how both images merge into one. Using this block, you will get this header with a background image in a few seconds.
- Anchor: it allows you to create destination targets in one page websites using their ID.
- Map: a map powered by Google maps.
- Social icon: icons to link to social media.
- 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.
- Text list: a text list with bullets.
Sample blocks
Here you can see the detailed description of every block:
- Hero Image: different prebuilt hero image blocks. Images with text integration.
- 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.
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 backup 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.
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 “menu 1” location will be the default 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 desired menu location.
EXPORT THEME TO WORDPRESS
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.
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 F.A.Q
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.
Usually, that problem means one of these options:
- You are still logged in with your old (free) account. Please, log out from Themes Generator and log in again to see your premium account upgrade.
- You are using different email addresses in Themes Generator editor and Themes Generator shop. If you think that this is your problem, please, contact us so we can modify your premium address.
Go to Main Menu (house icon) and check under User profile section.
Your subscription is renewed automatically and your subscription will continue until you cancel it. You can cancel anytime.
When you cancel your subscription, you will not be automatically billed again and your current premium status will last until the end of your subscription period. You will not receive a refund for the current billing cycle. You will continue to have the same access and benefits of your product for the remainder of the current billing period.
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.
Please, follow the steps below:
-
- Log in at https://themesgenerator.com/tg/my-account/
- Visit https://themesgenerator.com/tg/my-account/my-subscriptions/
- Click -view- over your -active- subscription.
- Click -upgrade/downgrade- button.
- Select the subscription product to switch and continue to the cart.
- Press -proceed to checkout- and complete all the form fields and payment details.
- If your current subscription is still active, the payment will be prorated. That means that if you are downgrading and your current subscription still has enough time available, your order price may be zero.
VIDEO TUTORIALS
Check Themes Generator tutorials playlist in YouTube: