Trying to use MetaSlider as header in Ixion theme

  • Resolved cliftonseth

    (@cliftonseth)


    6 years ago

    Hello,

    I am helping to create a new website for my neighborhood. We would like to use MetaSlider to replace the existing randomized header image the comes with the Ixion theme. We would like it to be responsive/stretched so all header images are the same dimensions (like theme’s original slider).

    I’ve created a trial slider and its code is:

    <?php echo do_shortcode(‘[metaslider id=”4169″]’); ?>

    Here is what I think the relative code that I need to change:

    <div class=”front-page-wrapper”>
    <div class=”header-overlay”>
    <?php if ( get_header_image() ) : ?>
    ” width=”<?php echo esc_attr( get_custom_header()->width ); ?>” height=”<?php echo esc_attr( get_custom_header()->height ); ?>” alt=””>
    <?php endif; ?>
    <div class=”site-description-wrapper”>
    <?php $description = get_bloginfo( ‘description’, ‘display’ );
    if ( $description || is_customize_preview() ) : ?>
    <p class=”site-description”><?php echo $description; /* WPCS: xss ok. */ ?></p>
    <?php endif; ?>

    <?php
    $button = get_theme_mod( ‘ixion_button_text’, ” );

    if ( ” !== $button || is_customize_preview() ) : ?>
    ” class=”button callout-button”><?php echo esc_html( $button ); ?>
    <?php endif; ?>
    </div><!– .site-description-wrapper –>
    </div><!– .header-overlay –>
    <?php get_template_part( ‘components/features/featured-content/display’, ‘featured’ ); ?>
    </div><!– .front-page-wrapper –>
    <?php endif; // End is_front_page() check ?>

    Any help that you can provide is most appreciated! Thank you in advance.

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)

  • Hi @cliftonseth

    Did you make that change? It seems like it should work but really the only way to know is to actually make the change and see.

    Thread Starter cliftonseth

    (@cliftonseth)

    Hi, @kbat82. Thanks for your help.

    I made a change but the slider appeared above the current header image and the images in the slider were all different sizes. Where do you think I should place the shortcode? Is there some way to make sure that the images in the slider follow the same sizing protocol as the existing header?

    Hi @cliftonseth

    The image that is there now is inside “header-overlay” so removing that part of the code should remove that. Fo the image sizes in the settings set the width and height to the ideal dimensions and under advanced you can select 100% width.

    I’d have to see it in action to give more help if you want to add it there now I can take a look

    Thread Starter cliftonseth

    (@cliftonseth)

    @kbat82, I put it in action and tweaked it to my liking. I would like to retain the “call to action” button and the “site tagline” as it was in the default setting. I must have removed that bit of code out of what I posted above. Do you know what I should retain in order to keep the tagline and the call to action button? Thank you!

    Hi,

    It looks like you need to part with <div class=”site-description-wrapper”>. I’m not sure how to keep the look as it depends on how the theme is set up (specifically how they style it). You might be able to get a more helpful answer from the theme developer on that.

    The alternative is to add the CTA as a caption to the images and style those to your liking. Let me know if that helps.

    Thread Starter cliftonseth

    (@cliftonseth)

    Ok. I have posted in the Ixion thread (HERE).

    I will keep trying different things. I appreciate your help. If you can think of anything that might work, please let me know. Thanks!

    Thread Starter cliftonseth

    (@cliftonseth)

    @kbat82 How would I style the CTA as a caption? Could I retain the unlinked site tagline one the CTA as well?

    Hi @cliftonseth,

    Ideally you would add the same html with class names into the caption and see how it looks. However, you will likely have to update the CSS manually to match the design you want.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Trying to use MetaSlider as header in Ixion theme’ is closed to new replies.

Tags