There are two main steps must be compated to have a one page design like shown on this page http://rttheme20.rtthemes.com/home-page-sample-5/
- Creating a page that has content content rows with unique ids
- Creating a new navigation menu that targets those ids.
Creating the page
We recommend use Visual Composer for this because it will be much simple to manage;
- Split your content in multiple Rows and give a different row id for each that you want to be scrolled. Visual composer rows that have a ID set (see image below).
- Then create your menu and add a “Custom Menu Item” type link that links to that elements / ID (see image below).
Important Notes
Note : Be aware to use the full url (http://yourwebsite.com/#the-ID) when the one page design is not the homepage and you have other menu items in the menu linking outside the “One Page Design” page.
Note : You have to use the # (anchor link method) to link to those sections / rows within a page.
Note : When you scroll the page the menu items in the menu will get the focus state once a new section with the ID listed in the menu is reached. Of course, to notice this nice RT-Theme feature, the current menu item color setting has to be not the same as the normal menu item color.
RT-Theme 20 comes with a huge number of shortcodes that allow you to add pre-designed content blocks by shortcodes into the content area of any page. Some shortcodes can also be added into text widget in a sidebar or into any text-area. A shortcode gets processed once the page is viewed in the front of your website. For example a contact form shortcode will display a contact form at the location where that shortcode was inserted into the content. All complex pages that seen our demo websites has been created by using RT-Theme 20 shortcodes. Those complex shortcodes are not easy to manage so that’s why we included Visual Composer plugin to allow you change them by using a drag&drop user interface. Most of those shortcodes are also available as a module in Visual Composer.
Editor Mode
The WordPress editor has two modes : Visual Mode (in some languages called “Wysiwyg Mode”) and Text Mode (in some languages called “HTML Mode). To use the auto insert function for the shortcodes one has to use the Visual or Wysiwyg Mode of the editor.
The Shortcode Popup Window / Button [</>]
There are two ways to open the shortcode generator window and insert a shortcode while the editor is in Visual mode :
- Above the editor text-area by clicking clicking on a button which looks like this : [</>].
- By clicking on the </> Shortcodes menu item in the WordPress Admin Bar
Click on one of those two buttons will open a popup window with a list of available shortcodes. The shortcode you select in that popup window will present two or three sections:
Shortcodes Explained
When you click on the shortcodes button a popup screen will appear with the following information :
- A list of available shortcodes
- One section, on the left explaining the shortcode and its parameters,
- One section on the right showing a already pregenerated shortcode, you can adjust the shortcode following the parameters as they are explained on the left. Once done adjusting select the modified shortcode, copy it and paste it into the page content, text area or text widget.
- Each of the parameters and its options. This list can be very long depending on the shortcode chozen
The already pregenerated shortcode in the top right of that window can be altered by following the explaination on the left. It is wise to adjust the variables while having that window open before hitting the shortcode insert button (see also below the icon insert help text).
The moment you copy the shortcode and close the shortcode screen you need to paste it in to a textarea at the location where you want the shortcode to be executed.
RT-Theme 20 supports font icons. Those icons are called by its css class name. In some shortcodes you will see a parameter like this : icon=””. Between these quotes “” you will have to insert the icon’s css class name.
In order to get the correct icon name, and to have a idea about how the icon looks before inserting,
there is a button (actually a menu item) on the WordPress Admin Bar that with the text “Icons”
When you click the Icons link, you’ll get a preview list of all available icons. You can narrow the list by using the search ability of that box. Once the icon of your choice has been found then you need to select the icon css class name and copy its css class name and paste that name between the quotes of the icon=”” parameter in the shortcode. So you get something like this: icon=”icon-rocket” as part of the complete shortcode.
Can i add my own Icons?
As you know, RT-Theme 20 has a nice icon feature and those icons are font based. We’ve hand-picked those icons and downloaded from a free service called http://fontello.com
By using this awesome service you can create your own icon set and use with RT-Theme 20. So, please follow these steps to get it done it in a right way;
1) Create a child theme first ( highly recommended ) Create a child-theme
2) Go to the website, and click the Import button
3) Select the “config.json” file where you can find inside /rttheme20/css/fontello/”
4) After imported the file, you’ll notice that some of the icons are highlighted. You can add more icons by clicking the other icons or add your own “SVG” files by using the “Custom Icons” bar of the website.
5) When you ready, download the generated package and export into your computer and upload the “fontello” folder into the /css/ folder of your child theme (create the /css/ folder if you don’t have one )
That’s it. After refreshed your admin panel, you should see the new icons.
Adding Social information to your website
Social information can be added to the theme by the use of the global Social Media Options in the Customizer.
Per Social Media Icon the following options can be set :
- The Social Icon Text which appears on hover,
- The Social Icon Link to which the social icon will link when clicked upon,
- The Social Icon Link Target. To be set to if the Icon should open the link a new browser tab (same window or new window)
You can make the (social media) icons appear in the top of the page and in the footer by turning on the 'position' toggles in the RT-Theme 18 Social media Settings.
You can also have the icons show anywhere in your website by inserting social icon shortcode anywhere in the content text-area's
Note : A valid URL to the Icon desitination has to be entered.
Note : For an email social icon one can either add a valid email address or a link (URL) to a contact page.
Note : For the Skype Icon the url field should contain vaild skype formatting. Enter a skype address. Syntax : ‘skype:skypeid?call’ or ‘skype:phonenumber?call
How can I create a footer navigation?
- Go to the WordPress Admin ▸ Appearance ▸ Menus and create a custom menu container or use the default Footer Navigation container. Add your menu-items to that menu container as explained in the “Navigations” section here in the documentation.
- Save the menu and assign it to a theme menu footer location.
- View your website. If all done correctly it will show the menu in the footer area
Copyrights
The copyright can be set in the customizer Copyrights settings. See customizer documentation.
Footer Widgets
The footer part of the theme can contain widgets. You can add widgets into the footer via Customizer or WordPress ▸ Appearance ▸ Widgets page. The working of the widgets is explained here in the customizer documentation. Any widgets added in the available footer widget containers will show in the theme footer area columns in the front of your website.
For advanced users : By using a plugin from wordpress.org which adds widget logic to your widgets you can make widgets in the footer area appear or disappear on a page id basis. https://wordpress.org/plugins/widget-logic/
Search results and custom fields
By default WordPress has no knowledge of the custom fields in each of the custom post types. Search results wont contain any text you entered in those fields. You need to enable those fields by use of a plugin to include them into the search results. You can download those plugins from https://wordpress.org
https://wordpress.org/plugins/custom-search-plugin/
https://wordpress.org/plugins/custom-fields-search/
There are a couple things you should know as they might occur or you have a question on that:
Color sets in nested rows and columns
When different color schemes are selected for nested rows and columns, the results may not be what you expect it to be because of the order of loading of the scheme in the css files. Basically it will follow the order of the scheme list to overwrite the one before. So loading a preset Color Set 1 into a Color Set 3 might not work as the Color Set 1 is loaded before the 3.
Bootstrap Tables
The tables are using bootstrap css. They are not styled when the class'”table” is not used. You can grab example code here. Grab Bootstrap Table Examples
Missing Visual Composer Modules
We have disabled some modules in the Visual Composer. They can be enabled by modifying the Visual Composer Settings php file that comes with the theme. The file is called visual_composer_config.php and is located rttheme20/rt-framework/admin/editor folder.
we only disabled two elements :
vc_remove_element( 'vc_tour' );
vc_remove_element( 'vc_gmaps' );
Missing Bootstrap Elements
We disabled some parts of the bootstrap library, they can be enabled by modifying the SASS files that comes with the theme.
Disabling Custom Posts of the Theme
The Custom Post types that come with the theme can be disabled by a function call for each post type you want to disable. Add the code to the bottom theme rttheme20/functions.php just before the last ?>
function rt_active(){
return false;
}
add_filter("product_showcase_active", "rt_active",0);
add_filter("testimonial_active", "rt_active",0);
add_filter("team_active", "rt_active",0);
Slideshow Images
Slideshow images are forced to cropped images when the blog list is with a masonry layout
White Screen Upon Activating Visual Composer
Depending on your hosting environment and how big your database is, you might experience an issue when trying to access the Customizer. This is usually due to the Customizer timing out because of a memory limit in your server environment. The first thing you can do to remedy this is to enter the following lines in your wp-config.php file at the root of your installation:
define( 'WP_MEMORY_LIMIT', '128M' );
Upon entering in this information everything should begin to work as expected unless your hosting provider has a limit on these parameters, which would keep them from taking effect. If your Customizer is still failing to load, the next step would be to open up a support ticket with your hosting provider and ask them to increase your PHP memory limit to a higher setting.
Working With Child Themes
When you start working with child-themes you have to be aware of that, the child theme uses its own customizer settings. This means that after activating the child theme you either have to reset the settings in the customizer or import settings you saved before in the customizer parent theme or any other location you worked on the design of your install.