Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 3, 2014 at 5:26 am #231418
    nick_henri

    Hi,

    I’m trying to figure out how to do text image overlays, similar to the 3 boxes shown near the bottom of this page: http://www.sapient.com/en-us/sapientmphasize.html (Our Experience, What We Do, …). I’m trying to replicate a similar look for a site by 3 images on the home page that have text overlayed on top but haven’t been able to figure it out in the Enfold theme. Could someone provide some guidance?

    Thanks,
    Nick

    March 3, 2014 at 3:12 pm #231552
    Yigit

    Hi nick_henri!

    You can add a Color Section element with a Unique ID, then insert your images inside it in three 1/3 column elements, then post the link to your website so we can provide you custom CSS code to make these images unclickable

    Best regards,
    Yigit

    March 4, 2014 at 5:25 am #232020
    nick_henri

    Thanks Yigit. I may not have understood your answer but I’m not sure it answers my question. Sorry, I’m a newbie and am either not understanding or am not properly asking my question. What I’m specifically trying to do is have static text over top of a static but clickable image. How do I do that?

    I don’t see that as an option in the admin panel and haven’t seen it in any of the pages on the demo site though it seems to be a common thing on many websites.

    Any further guidance is much appreciated!

    Nick

    March 4, 2014 at 8:00 am #232048
    Ismael

    Hi!

    Please post a screenshot of what you’re trying to do. Watch these videos to learn more about the theme: https://vimeo.com/channels/aviathemes

    Yigit said that you need to edit the page then switch to Advance Layout Builder. Go to the Layout Elements panel then insert the Color Section. Add 3 1/3 column layouts side by side. Inside the 3 columns layouts, insert a Text Block and an Image element each. We can apply an absolute position to the Text Block to overlap the images or apply the images as background on the actual Text Block. If you’re not sure what to do please hire a freelance developer. For further modifications, please visit Werkpress.

    Regards,
    Ismael

    April 30, 2018 at 3:22 am #948756
    fashiontribe

    This is exactly what I am looking to do. can you provide the code I can put in quick css to make this happen? or is there anyway to put a color section inside the columns?

    April 30, 2018 at 6:16 am #948774
    Vinay

    Hi,

    Use a grid row element with 3 1/3 grid cells
    1. add text title and content.
    2. Add background image from the cell options.
    3. Set custom link from the cell options.

    Lastly, we will set the space between the grid cell using Custom CSS.

    Or simply copy the below shortcode to your page

    
[av_layout_row border='av-border-top-bottom av-border-cells' min_height_percent='' min_height='0' color='main_color' mobile='av-flex-cells' id='' av_element_hidden_in_editor='0' mobile_breaking='' av_uid='av-jglq49qe' custom_class='av-custom-grid-space']
[av_cell_one_third vertical_align='top' padding='30px' padding_sync='true' background='bg_color' background_color='#eeee22' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat' link='manually,#' linktarget='' link_hover='' mobile_display='' av_uid='av-jglq1ief' custom_class='']

[av_textblock size='' font_color='custom' color='#edae44' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' av_uid='av-jglq0eu0' custom_class='' admin_preview_bg='']
Box Title
Set a background and add a link to this box from the column settings.
[/av_textblock]

[/av_cell_one_third][av_cell_one_third vertical_align='top' padding='30px' padding_sync='true' background='bg_color' background_color='#7bb0e7' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat' link='manually,#' linktarget='' link_hover='' mobile_display='' av_uid='av-jglq1pye' custom_class='']

[av_textblock size='' font_color='custom' color='#edae44' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' av_uid='av-jglq0eu0' custom_class='' admin_preview_bg='']
Box Title
Set a background and add a link to this box from the column settings.
[/av_textblock]

[/av_cell_one_third][av_cell_one_third vertical_align='top' padding='30px' padding_sync='true' background='bg_color' background_color='#4ecac2' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat' link='manually,#' linktarget='' link_hover='' mobile_display='' av_uid='av-jglq1wa4' custom_class='']

[av_textblock size='' font_color='custom' color='#edae44' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' av_uid='av-jglq0eu0' custom_class='' admin_preview_bg='']
Box Title
Set a background and add a link to this box from the column settings.
[/av_textblock]

[/av_cell_one_third]
[/av_layout_row]

    And add the below CSS to Enfold > General Styling > Quick CSS

    #top .av-custom-grid-space {
margin-bottom:20px;
	
}

#top .av-custom-grid-space .flex_cell {
    border-width: 24px!important;
    border-right-width: 0px!important;
    border-bottom-width: 0px!important;
    border-style: solid!important;
    border-color:#FFF!important;

}

#top .av-custom-grid-space .flex_cell:last-child {
    border-right-width: 24px!important;
}

    Best regards,
    Vinay

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.