Codeless
  • Support Home
  • Themes
  • Support
  • WordPress Tutorials
    • How to Start a Blog
    • Best Website Builders
    • Best Small Business Hosting
    • Email Marketing Services
    • Cheap WordPress Hosting
  • Video Tutorials

Community Forums

Full width settings

#layout #fullwidth #responsiveness
    • 8 years, 4 months ago surefoot
      Participant

      Expired

      I’d like my site content to be full-width responsive, exactly like https://codeless.co/specular/default/

      I’ve played with the settings and read documentation, but seems there have since been updates, so the documentation isn’t super helpful.

      I want a static header image (no slider), but can’t figure out how to make that, or my other content, full width. Or I somehow figure it out, and then the navigation goes full width too.

      Here is a screenshot of my layout settings for reference: https://goo.gl/kjT3SW

       

      Appreciate any guidance!

    • 8 years, 4 months ago Mirela
      Participant

      Hello,

      You can have a static page header (no slider) in home page too. Just go to the page’s General Settings > Page Header options (screenshot). Set the page header height and add an image to it.

      Make sure to have set the Slider Options > Select Slider Type to none (screenshot).

      -If you have set the site’s layout to full width, then this will be the menu width as well. If you want to have a boxed menu but full-width page content, then make the changes using custom css. Add the code into your custom css box located in General options.
      Let us know if you need further help.

      Best regards!

    • 8 years, 4 months ago surefoot
      Participant

      Expired

      Can I add dynamic text to the static page header? I see that if I toggle “Active Page Header” to ON, it displays the page name, but I want to put custom text there.

      Basically, I want a static header with text and a button overlaid like so: https://goo.gl/GSr8pV

      I got it working with the slider but would rather not have to go the slider route if I don’t have to, because it slows down the load time considerably.

      Thank you!

    • 8 years, 4 months ago Mirela
      Participant

      Hello,

      You can edit out an image for the page header with the custom text you want. And remove the page title so it does not interfere with the image text. But is’t not possible adding a working button to it. So the best option for this scenario is the slider with only one slide. Set up the wanted text and button in it.
      Let us know if you need help.

      Bet regards!

    • 8 years, 4 months ago surefoot
      Participant

      Expired

      I’d like dynamic text so I guess I’ll have to stick with the slide. Are there any plans to make a module that allows for text to be overlaid on a static image? Seems like something a lot of folks might be able to use.

      Anyway, I’ve written some custom CSS to make the text on the slider fullwidth (desktop view: https://goo.gl/yC9Wqu), but even without that, scaling on mobile seems to be a problem for the carousel: https://goo.gl/NzhfA6

      Do you have any pre-written CSS you could provide that accounts for this? Also, if you have any CSS that removes the pagination arrows onload, that’d be awesome!

    • 8 years, 4 months ago Mirela
      Participant

      Hello,

      There is a way to add text on an image. A scenario is this:
      1-Add a row -> Set a background image to it via “Row settings” -> Add text element to that row. This way the text will have an image background. You can also add a button to it and complete the described picture.

      -We can help you fix the responsive layout using custom css. But i need the site’s (page) link for this. I can not provide the exact css code to add, just by looking at the screenshots.
      Let us know.

      Best regards!

    • 8 years, 4 months ago surefoot
      Participant

      Expired

      Hi,

      I did originally add text over an image that way, but it wouldn’t work with the full width header. So I guess I’ll stick to the carousel but if you have any overrides to help with performance (eg remove all animations and pagination elements) that’d be helpful!

      To answer your question, the link to the page I’m referencing is: https://surefoot.staging.wpengine.com/. You can visit that to help with the responsive layout (note, every page uses a carousel, so it’d be great if the styling could apply to each page header).

      Thank you!

    • 8 years, 4 months ago Mirela
      Participant

      Hello,

      Please add this code into your custom css box:

      @media (max-width: 480px){
      #slider-fullwidth .vertical_centered {
          width: 300px !important;
      }}

      This is the result: https://postimg.org/image/lqwhbbto5/ This custom code will affect all page headers so other pages using the same page header structure will be changed in mobile as well.
      Is this the header view in mobile that you wanted? Let us know.

      Best regards!

    • 8 years, 3 months ago surefoot
      Participant

      Expired

      Thanks, I think I finally figured out a static header and was able to make it work with some tweaking.

      This is unrelated, but moreso has to do with performance. After running the site through a performance optimization tool, there are a few things that stand out as you can see in this screenshot: https://goo.gl/2YjNq5

      I’ve tried installing a few plugins to help with things like minification and deferring parsing, but they don’t play nicely with the theme. Do you have any recommendations or plans to address any of these items in future releases?

      Thanks!

    • 8 years, 3 months ago Mirela
      Participant

      Hello,

      Please check out this article of ours on how to improve your site’s performance.

      PS: Please keep in mind to always open new tickets for any other question or issue you will encounter. It’s best to have one ticket per issue in order to have an easy to browse forum. For your convenience in the future and other visitors who try to find an answer in older tickets.

      Thank you for your cooperation and Best regards!

Viewing 9 reply threads

You must be logged in to reply to this topic.

Login

Log In
Register

Renew Support

  • Renew Specular Support
  • Renew Tower Support
  • Renew Folie Support
  • Renew Handel Support
  • Renew June Support
  • Renew Picante Support
  • Renew Thype Support
  • Renew Regn Support

Search Forums

Forums

  • Bygge – Construction Theme
  • Converta – Software Theme
  • Folie – The WordPress Website Builder
  • Handel – Responsive Multi-Purpose Business Theme
  • June WooCommerce WordPress Theme
  • Livecast – Podcast Theme
  • Picante – Restaurant & Food WordPress Theme
  • Regn | Agency & Business WordPress Theme
  • Remake – Minimal Portfolio & Agency Theme
  • Specular – Multi-Purpose WordPress Theme
  • Suggest us Features
  • Tower – Business-Driven Multipurpose WP Theme
  • Vibrance – Photography Theme

Site Links

  • Support Policy
  • Specular Support Forum
  • Video Tutorials
  • Knowledge Base
  • Guides and Reviews

Useful Articles

  • Build a Website
  • Web Design & Development
  • Hosting
  • WordPress

Login

Log In
Register Lost Password