Viewing 4 posts - 1 through 4 (of 4 total)
-
Posts
-
Hello! I am in the process of building a new site and would love to have my page “header” styled like this http://kriesi.at/themes/enfold-hotel/
When I say header I am referring to the slider image with the Heading styled on top of it like that, kind of peeking onto the bottom of the image.
I have tried to play around with different types of sliders to get that full width look instead of just full width inside a certain container(which leaves whitespace if you’re on a larger desktop), while also having the image not take up the entire height. So being able to adjust the slider height would be preferred. Actually, the heigh of the example shown is perfect. I also have been trying to play around with image size. I keep trying to troubleshoot the best image size so that I can control, for the most part, what is cut off and what isn’t as some of the images used have text (i.e “Partners” written on a piece of paper on a table). So I guess to summarize:
1. What elements were used to achieve this look with the slider and heading below: http://kriesi.at/themes/enfold-hotel/
2. What is the best image size in px so that it can fit properly in the slider without having some of it cut off. (i.e setting the slider to No Scaling with an image that is 1500×630)
Hey LHSpin,
I think the easiest option for you to see how the page is create if to import the shortcode for it. Please activate debug mode in order to see the shortcode field first: http://kriesi.at/documentation/enfold/enable-advanced-layout-builder-debug/. Then you can paste the following shortcode to a new page:
[av_slideshow_full size='featured_large' stretch='' animation='fade' autoplay='true' interval='7' control_layout='av-control-hidden' src='' attachment='' attachment_size='' position='top left' repeat='no-repeat' attach='scroll'] [av_slide_full slide_type='image' id='288' video='http://' mobile_image='' video_format='' video_ratio='16:9' title='' custom_title_size='' custom_content_size='' caption_pos='caption_bottom' link_apply='' link='lightbox' link_target='' button_label='Click me' button_color='light' link1='manually,http://' link_target1='' button_label2='Click me' button_color2='light' link2='manually,http://' link_target2='' font_color='' custom_title='' custom_content='' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' video_controls='' video_mute='' video_loop='' video_autoplay='' overlay_enable=''][/av_slide_full] [av_slide_full slide_type='image' id='286' video='' mobile_image='' video_format='' video_ratio='' title='' custom_title_size='' custom_content_size='' caption_pos='caption_right caption_right_framed caption_framed' link_apply='' link='lightbox' link_target='' button_label='' button_color='light' link1='manually,http://' link_target1='' button_label2='' button_color2='light' link2='manually,http://' link_target2='' font_color='' custom_title='' custom_content='' overlay_opacity='0.1' overlay_color='' overlay_pattern='' overlay_custom_pattern='' video_controls='' video_mute='' video_loop='' video_autoplay='' overlay_enable=''][/av_slide_full] [av_slide_full id='278' slide_type='' video='http://' mobile_image='' video_format='' video_ratio='16:9' video_controls='' video_mute='' video_loop='' video_autoplay='' title='' custom_title_size='' custom_content_size='' caption_pos='caption_bottom' link_apply='' link='' link_target='' button_label='Click me' button_color='light' link1='' link_target1='' button_label2='Click me' button_color2='light' link2='' link_target2='' font_color='' custom_title='' custom_content='' overlay_enable='' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern=''][/av_slide_full] [/av_slideshow_full] [av_section min_height='' min_height_px='500px' padding='huge' shadow='no-border-styling' bottom_border='border-extra-arrow-down' id='' color='main_color' custom_bg='' src='https://test.kriesi.at/hotel/wp-content/uploads/sites/14/2015/07/ornament-bg-top-small-1.png' attachment='435' attachment_size='full' attach='scroll' position='top center' repeat='contain' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern=''] [av_one_full first min_height='' vertical_alignment='av-align-top' space='' custom_margin='aviaTBcustom_margin' margin='-200px,0px' padding='30px' padding_sync='true' border='' border_color='' radius='0px' radius_sync='true' background_color='#ffffff' src='' attachment='' attachment_size='' background_position='top center' background_repeat='no-repeat' animation=''] [av_heading tag='h1' padding='20' heading='Welcome to Enfold Hotel - the most beautiful hotel in South America' color='' style='blockquote modern-quote modern-centered' custom_font='' size='40' subheading_active='' subheading_size='15' custom_class=''][/av_heading] [/av_one_full][av_hr class='custom' height='50' shadow='no-shadow' position='center' custom_border='av-border-fat' custom_width='50px' custom_border_color='#f8f8f8' custom_margin_top='0px' custom_margin_bottom='70px' icon_select='yes' custom_icon_color='#e5c80c' icon='ue8ce' font='entypo-fontello'] [av_one_half first min_height='' vertical_alignment='av-align-top' space='' margin='0px' margin_sync='true' padding='0px' padding_sync='true' border='' border_color='' radius='0px' radius_sync='true' background_color='' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' animation='bottom-to-top'] [av_heading tag='h3' padding='0' heading='A 5-Star superior hotel' color='' style='blockquote modern-quote' custom_font='' size='' subheading_active='' subheading_size='15' custom_class=''][/av_heading] [av_textblock size='' font_color='' color=''] Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo. [/av_textblock] [av_font_icon icon='ue808' font='entypo-fontello' style='' caption='' link='' linktarget='' size='40px' position='left' color='#e5c80c'][/av_font_icon] [av_font_icon icon='ue808' font='entypo-fontello' style='' caption='' link='' linktarget='' size='40px' position='left' color='#e5c80c'][/av_font_icon] [av_font_icon icon='ue808' font='entypo-fontello' style='' caption='' link='' linktarget='' size='40px' position='left' color='#e5c80c'][/av_font_icon] [av_font_icon icon='ue808' font='entypo-fontello' style='' caption='' link='' linktarget='' size='40px' position='left' color='#e5c80c'][/av_font_icon] [av_font_icon icon='ue808' font='entypo-fontello' style='' caption='' link='' linktarget='' size='40px' position='left' color='#e5c80c'][/av_font_icon] [/av_one_half][av_one_half min_height='' vertical_alignment='av-align-top' space='' margin='0px' margin_sync='true' padding='0px' padding_sync='true' border='' border_color='' radius='0px' radius_sync='true' background_color='' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' animation='bottom-to-top'] [av_heading tag='h3' padding='0' heading='Luxury at its best' color='' style='blockquote modern-quote' custom_font='' size='' subheading_active='' subheading_size='15' custom_class=''][/av_heading] [av_textblock size='' font_color='' color=''] Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. [/av_textblock] [/av_one_half][av_hr class='invisible' height='100' shadow='no-shadow' position='center' custom_border='av-border-fat' custom_width='50px' custom_border_color='#f8f8f8' custom_margin_top='70px' custom_margin_bottom='70px' icon_select='yes' custom_icon_color='#e5c80c' icon='ue808' font='entypo-fontello'] [av_masonry_gallery ids='288,286,279,278,308,309' items='6' columns='6' paginate='pagination' size='fixed' gap='large' overlay_fx='' caption_elements='none' caption_display='always' container_links='active' id=''] [/av_section] [av_section min_height='' min_height_px='500px' padding='huge' shadow='no-border-styling' bottom_border='no-border-styling' id='' color='main_color' custom_bg='#fcfcfc' src='https://test.kriesi.at/hotel/wp-content/uploads/sites/14/2015/07/ornament-bg-top-small-1.png' attachment='435' attachment_size='full' attach='scroll' position='top center' repeat='contain' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern=''] [av_one_fourth first min_height='' vertical_alignment='av-align-top' space='' margin='0px' margin_sync='true' padding='0px' padding_sync='true' border='' border_color='' radius='0px' radius_sync='true' background_color='' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' animation=''] [av_heading tag='h3' padding='20' heading='A warm welcome!' color='' style='blockquote modern-quote' custom_font='' size='' subheading_active='' subheading_size='15' custom_class=''][/av_heading] [av_image src='https://test.kriesi.at/hotel/wp-content/uploads/sites/14/2015/07/boy-1-845x684.jpg' attachment='324' attachment_size='gallery' align='center' styling='no-styling' hover='' link='' target='' caption='' font_size='' appearance='' overlay_opacity='0.4' overlay_color='#000000' overlay_text_color='#ffffff' animation='no-animation'][/av_image] [av_textblock size='14' font_color='' color=''] We hope you find an offer that suits your needs and chose to stay with us. If you got any questions please do not hesitate to contact us. [/av_textblock] [av_image src='https://test.kriesi.at/hotel/wp-content/uploads/sites/14/2015/07/signature.png' attachment='374' attachment_size='full' align='center' styling='no-styling' hover='' link='' target='' caption='' font_size='' appearance='' overlay_opacity='0.4' overlay_color='#000000' overlay_text_color='#ffffff' animation='no-animation'][/av_image] [/av_one_fourth][av_three_fourth min_height='' vertical_alignment='av-align-top' space='' margin='0px' margin_sync='true' padding='0px' padding_sync='true' border='' border_color='' radius='0px' radius_sync='true' background_color='' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' animation=''] [av_heading tag='h3' padding='20' heading='Available Rooms' color='' style='blockquote modern-quote' custom_font='' size='' subheading_active='' subheading_size='15' custom_class=''][/av_heading] [av_masonry_entries link='product_type' sort='no' items='-1' columns='2' paginate='pagination' query_orderby='date' query_order='ASC' size='fixed' gap='large' overlay_fx='active' caption_elements='title' caption_display='always' id=''] [/av_three_fourth][/av_section][av_section min_height='' min_height_px='500px' padding='default' shadow='no-shadow' bottom_border='no-border-styling' id='' color='main_color' custom_bg='' src='https://test.kriesi.at/hotel/wp-content/uploads/sites/14/2015/07/ornament-bg-top-small-1.png' attachment='435' attachment_size='full' attach='scroll' position='top center' repeat='contain' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern=''] [av_one_full first min_height='' vertical_alignment='av-align-top' space='' custom_margin='aviaTBcustom_margin' margin='0px' margin_sync='true' padding='30px' padding_sync='true' border='' border_color='' radius='0px' radius_sync='true' background_color='#ffffff' src='' attachment='' attachment_size='' background_position='top center' background_repeat='no-repeat' animation=''] [av_heading tag='h2' padding='20' heading='Further amenities & options to spend your time' color='' style='blockquote modern-quote modern-centered' custom_font='' size='' subheading_active='subheading_above' subheading_size='15' custom_class=''] But we got more [/av_heading] [/av_one_full] [/av_section] [av_layout_row border='' min_height='300px' color='main_color' mobile='av-flex-cells' id=''] [av_cell_one_half vertical_align='top' padding='90px' padding_sync='true' background_color='' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat'] [av_heading tag='h3' padding='0' heading='6 Restaurants to chose from ' color='' style='blockquote modern-quote' custom_font='' size='' subheading_active='subheading_above' subheading_size='15' custom_class=''] Great Food [/av_heading] [av_textblock size='' font_color='' color=''] Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. [/av_textblock] [/av_cell_one_half][av_cell_one_half vertical_align='middle' padding='90px' padding_sync='true' background_color='' src='https://test.kriesi.at/hotel/wp-content/uploads/sites/14/2015/07/restaurant_wide-1030x413.jpg' attachment='395' attachment_size='large' background_attachment='scroll' background_position='top left' background_repeat='stretch'] [/av_cell_one_half] [/av_layout_row] [av_layout_row border='' min_height='300px' color='main_color' mobile='av-flex-cells' id=''] [av_cell_one_half vertical_align='top' padding='90px' padding_sync='true' background_color='#fcfcfc' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat'] [av_heading tag='h3' padding='0' heading='Spa & Wellness Center' color='' style='blockquote modern-quote' custom_font='' size='' subheading_active='subheading_above' subheading_size='15' custom_class=''] Relax your Body [/av_heading] [av_textblock size='' font_color='' color=''] Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo. [/av_textblock] [/av_cell_one_half][av_cell_one_half vertical_align='middle' padding='90px' padding_sync='true' background_color='' src='https://test.kriesi.at/hotel/wp-content/uploads/sites/14/2015/07/massage_face-1030x687.jpg' attachment='385' attachment_size='large' background_attachment='scroll' background_position='top left' background_repeat='stretch'] [/av_cell_one_half] [/av_layout_row] [av_layout_row border='' min_height='300px' color='main_color' mobile='av-flex-cells' id=''] [av_cell_one_half vertical_align='top' padding='90px' padding_sync='true' background_color='' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat'] [av_heading tag='h3' padding='0' heading='Wedding at Enfold Hotel' color='' style='blockquote modern-quote' custom_font='' size='' subheading_active='subheading_above' subheading_size='15' custom_class=''] A dream come true [/av_heading] [av_textblock size='' font_color='' color=''] Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo. [/av_textblock] [/av_cell_one_half][av_cell_one_half vertical_align='middle' padding='90px' padding_sync='true' background_color='' src='https://test.kriesi.at/hotel/wp-content/uploads/sites/14/2015/07/wedding-1030x687.jpg' attachment='404' attachment_size='large' background_attachment='scroll' background_position='top left' background_repeat='stretch'] [/av_cell_one_half] [/av_layout_row]Best regards,
RikardHello!
Thank you for replying, I actually figured it out… I ended up using the Fullwidth Easy Slider using an img uploaded with the dimensions 1500×430 and settings:
Featured (1500×430)
Yes, stretch image (My first impression with this setting would be distortion with the original image selected, but I now realized the ‘stretch’ just meant scaling to fit the width of the browser and not actually ‘stretching’ the image, which would distort it)This seems to have worked well and is achieving what I want. But now, I am finding that the 430 height is a bit too narrow and the 630 height is a bit too large. Any way I can change it to 530px instead to achieve a happy medium? Thanks for the help!
Viewing 4 posts - 1 through 4 (of 4 total)
- The topic ‘Enfold Slider Styles’ is closed to new replies.