Okay
  Public Ticket #197849
Creating 3 Columns with Icon and Text
Closed

Comments

  • Millo started the conversation

    Hi,

    On the demo just below the header you have a 4 column display with rollover icons and text (see attached image). Is there instructions anywhere on how I can recreate this? I need to do the same thing but with only 3 columns. I've tried different things using the short codes but not able to replicate.

    Thanks!

  •  8,839
    Tahir replied

    Hey Milo!

    You can use the Visual Composer to easily build this . Copy paste it in the Classic Editor and then Switch to Visual Mode:

    [vc_row][vc_column width="1/1"][nectar_slider location="Home" flexible_slider_height="true" full_width="true" arrow_navigation="true" bullet_navigation="true" desktop_swipe="true" parallax="true" loop="true" slider_height="650" min_slider_height="250"][/vc_column][/vc_row][vc_row type="full_width_background" bg_position="left top" bg_repeat="no-repeat" text_color="dark" text_align="left" top_padding="90" bottom_padding="90" parallax_bg="true" bg_color="#ffffff"][vc_column centered_text="true" width="1/4" animation="fade-in" enable_animation="true" column_padding="no-extra-padding" background_color_opacity="1"][vc_row_inner][vc_column_inner width="1/1" enable_animation="true" animation="fade-in" delay="400" column_padding="no-extra-padding"][vc_column_text][icon size="large" image="icon-tablet" color="Extra-Color-1"][/vc_column_text][/vc_column_inner][/vc_row_inner][vc_column_text]

    100% Responsive Design

    Accusantium quam, ultri eget tempor id, aliquam eget nibh et. Maecen aliquam, risus at semper ullamcorper[/vc_column_text][/vc_column][vc_column width="1/4" animation="fade-in" centered_text="true" enable_animation="true" column_padding="no-extra-padding" background_color_opacity="1" delay="200"][vc_row_inner][vc_column_inner width="1/1" enable_animation="true" animation="fade-in" delay="600" column_padding="no-extra-padding"][vc_column_text][icon size="large" image="steadysets-icon-diamond" color="Extra-Color-1"][/vc_column_text][/vc_column_inner][/vc_row_inner][vc_column_text]

    Award Winning Quality

    Accusantium quam, ultri eget tempor id, aliquam eget nibh et. Maecen aliquam, risus at semper ullamcorper[/vc_column_text][/vc_column][vc_column width="1/4" animation="fade-in" centered_text="true" enable_animation="true" column_padding="no-extra-padding" background_color_opacity="1" delay="400"][vc_row_inner][vc_column_inner width="1/1" enable_animation="true" animation="fade-in" delay="800" column_padding="no-extra-padding"][vc_column_text][icon size="large" image="steadysets-icon-file" color="Extra-Color-1"][/vc_column_text][/vc_column_inner][/vc_row_inner][vc_column_text]

    Extensive Documentation

    Accusantium quam, ultri eget tempor id, aliquam eget nibh et. Maecen aliquam, risus at semper ullamcorper[/vc_column_text][/vc_column][vc_column width="1/4" animation="fade-in" centered_text="true" enable_animation="true" column_padding="no-extra-padding" background_color_opacity="1" delay="600"][vc_row_inner][vc_column_inner width="1/1" enable_animation="true" animation="fade-in" delay="1000" column_padding="no-extra-padding"][vc_column_text][icon size="large" image="icon-gift" color="Extra-Color-1"][/vc_column_text][/vc_column_inner][/vc_row_inner][vc_column_text]

    Loaded With Goodies

    Accusantium quam, ultri eget tempor id, aliquam eget nibh et. Maecen aliquam, risus at semper ullamcorper[/vc_column_text][/vc_column][/vc_row][vc_row type="full_width_background" bg_position="left top" bg_repeat="no-repeat" text_color="dark" text_align="left" top_padding="0" bottom_padding="0"][vc_column width="1/1"][recent_projects category="all" project_style="4" full_width="true" heading="Recent Work We've Completed For Our Amazing Clients." number_to_display="8"][/vc_column][/vc_row]


    ThemeNectar Support Team 

  •  4
    Brian replied

    This is great, but how do you add the icons directly from the editor? What option do you select? Thanks!

  •  8,839
    Tahir replied

    Hey Again!

    You have to use the icon shortcode, if in VC add in a text block and add in a shortcode from there. 

    Thanks


    ThemeNectar Support Team 

  • Roy replied

    is it possible to do it like this?

  •  8,839
    Tahir replied

    Hey Roy!

    I am afraid we dont have 5 column option so that we can leave the two of the side empty and center the three both. 

    Thanks


    ThemeNectar Support Team