[rockthemes_specialgridblock avoid_sidebar=”before” skip_sg=”true”]
Deeplinking Side Navigation
#1
[rockthemes_heading bold_color=”#787878″ regular_color=”#999999″ details_color=”#a5a7a8″ bold_text=”DEEPLINKING ” light_text=”SIDE NAVIGATION” details_text=”” heading_font_size=”” html_tag=”h1″ align=”center” use_icon=”no” border_bottom=”yes” disable_margin=”no” ]
Special grids are special unique grid elements. You can wrap your regular grids with special grid. This way, you can make amazing changes for your grid. This example will show how you can use special grids to make deeplinking side navigation. Each of these elements are wrapped with special grid.
#3
[rockthemes_heading bold_color=”#ffffff” regular_color=”#e2e4e7″ details_color=”#a5a7a8″ bold_text=”SET YOUR ” light_text=”SECTION ID” details_text=”” heading_font_size=”” html_tag=”h2″ align=”center” use_icon=”no” border_bottom=”yes” disable_margin=”no” ]
Your section, your deeplinking, your IDs. You can set your section id, and section side navigation name easily. The ID will also appear as a #hash link at the URL. You can copy a #hash URL and paste it on your browser in new window. This will start the page at that section. Which means, now you can share links of your sections too. Very useful for specific sections to work on.
#4
[rockthemes_heading bold_color=”#787878″ regular_color=”#999999″ details_color=”#a5a7a8″ bold_text=”FULL SCREEN ” light_text=”GRID SECTION” details_text=”” heading_font_size=”” html_tag=”h2″ align=”center” use_icon=”no” border_bottom=”yes” disable_margin=”no” ]
Full Screen Grids. Yet another unique feature of Rock Page Builder. You can use Full Screen feature of special grids easily. You can set a background color and make this a colored grid as well. Try to display this area on different sizes. It will always match with the screen size. You can also set this as a deeplinking side navigation section.
#5
[rockthemes_heading bold_color=”#ffffff” regular_color=”#e2e4e7″ details_color=”#a5a7a8″ bold_text=”SMART ” light_text=”TIMING” details_text=”” heading_font_size=”” html_tag=”h2″ align=”center” use_icon=”no” border_bottom=”yes” disable_margin=”no” ]
Another unique feature is the smart timing for deeplinking side navigation. Try to click on the top section. The system will auto calculate the distance and set a longer time. If the distance is small than the time will be faster. No more flashing while using side navigation. Smart timing system will give a nice smooth scroll along with the right timing on unique deeplinking side navigation.
#6
[rockthemes_heading bold_color=”#787878″ regular_color=”#999999″ details_color=”#a5a7a8″ bold_text=”AMAZING ” light_text=”COLUMNS” details_text=”” heading_font_size=”” html_tag=”h2″ align=”center” use_icon=”no” border_bottom=”yes” disable_margin=”no” ]
You don’t have to stuck with single full grid in special grids. You can use columns in for your grids easily.
[rockthemes_vertical_space vertical_space_height=”default” custom_value=”60px”/]
[rockthemes_single_image image_sizes=”medium” image_url=”http://azoom.rockthemes.net/wp-content/uploads/2014/11/rfb-homepage-ui.png” image_align=”” image_id=”2355″ extra_style=”” extra_class=”” image_link_target=”” enable_hover=”false” hover_bg_color=”#FFFFFF” hover_color=”#FFFFFF” hover_title=”” overflow_image=”false” overflow_image_size=”” link_url=”false” link_id=”false” link_is_tax=”false” tax_name=”no-selected”][rockthemes_vertical_space vertical_space_height=”d_2″ custom_value=”60px”/]
This is a 3 columns regular grid.
[rockthemes_toggles toggle_type=”single-mode” avoid_sidebar=”undefined” toggle_use_hash=”no” boxed_layout=”false” open_toggle_index=”0″][rockthemes_toggles_single use_shadow=”false” title=”Toggles Awesome” toggle_hash=”” icon_class=”” icon_url=””]
Awesome Toggle Content
[/rockthemes_toggles_single][rockthemes_toggles_single use_shadow=”false” title=”Toggles Awesome Drag” toggle_hash=”” icon_class=”” icon_url=””]
Awesome Toggle Content
[/rockthemes_toggles_single][/rockthemes_toggles][rockthemes_vertical_space vertical_space_height=”d_2″ custom_value=”60px”/]
This is a 5 columns regular grid
[rockthemes_single_image image_sizes=”medium” image_url=”http://azoom.rockthemes.net/wp-content/uploads/2014/11/rpb-homepage-ui.png” image_align=”right” image_id=”2352″ extra_style=”” extra_class=”” image_link_target=”” enable_hover=”false” hover_bg_color=”#FFFFFF” hover_color=”#FFFFFF” hover_title=”” overflow_image=”false” overflow_image_size=”” link_url=”false” link_id=”false” link_is_tax=”false” tax_name=”no-selected”][rockthemes_vertical_space vertical_space_height=”d_2″ custom_value=”60px”/]
This is
4 columns regular grid. Any grid from 1 to 12 ready to use easily with Rock Page Builder
[/rockthemes_specialgridblock]
