Stacking & Responsive Design Using FSE?
-
Hey there – I’m trying to learn how to use the Full Site Editor to see if I can redesign my site using blocks. If possible, I’d be redesigning everything within the editor. I’m not sure how to set responsive rules though – for example – on desktop width I’d like my “SITE LOGO” to be 75px tall, but on mobile I’d like it to jump to 200px wide and be centered above everything else. I have this element in a row currently, but… I guess I’m really unsure how stacking and responsive rules work.
Is Full Site Editing a viable option for redesigns? I think I better start with that question… please advise.
The blog I need help with is: (visible only to logged in users)
-
Howdy –
Thanks for taking the time to get in touch. Yes, you can do this! I think the best way to go about it, though, is to leave your current site set up as it is. Register a new free site address and use that as your testing space to learn and practice.
Click on My Sites – Add New Site to get that second address.
Everything you do inside the editor is going to be mobile responsive by default. There’s no need to worry about it! Great news, huh? Certain blocks may have settings that you can tweak for mobile viewing but it should not be something that is a hinderance for you getting started.
-
Hey there – thank you so much for the response! So I have my demo site set up and my content added. I’m going through the styling process now. How can I create a top nav with my logo on the left that is left justified on desktop, but centered and stacked on mobile? I’m having a difficult time figuring out how to make these adjustments – because when I try to use FSE to set up a layout, everything is responsive but it looks a bit messy…
Is there a way to tweak for desktop / mobile or is this outside the scope of what FSE is truly for?
Thanks!
-
@minimalistfishing, our themes and patterns should automatically collapse in a mobile view for you. A few blocks have more fine-tuning for responsiveness:
(like the Layout Grid Block & Navigation Block) but most don’t have a lot of mobile FSE settings yet.Still, you can add a class (if needed) under the block’s advanced settings, then target that with your CSS. Does that help?
-
That did help – yes! Ok, so I was able to set up a homepage that you can see here: https://ajhauser.com/
3 quick follow up questions, if I may…
- Does FSE only show up on sites updated to 6.3 or beyond?
- For a site like this, how would you recommend I prepare for a redesign in the CLEANEST way possible? I plan to remove all themes and essentially start from scratch, but I want to maintain my content and just design with a clean slate: https://theminimalistfisherman.com/
- Is there a way to get the Navigation block to behave as a simple drop-down, and then can you style that? I wasn’t sure if there was another navigation block that would be better for this of I don’t want the overlay? Again, this can be seen here: https://ajhauser.com/
Thanks so much!
-
Hi there,
Does FSE only show up on sites updated to 6.3 or beyond?
Because WordPress.com is a managed host, all sites are running on the latest version of WordPress automatically. The option to see the Site Editor and edit templates directly is instead controlled by the theme your site uses. If you use an older theme that was created before the Site Editor was launched, you will see only the classic Customizer option.
If you were to update to any of the themes you see listed here, which are build with the Site Editor in mind, you will see the option: https://wordpress.com/themes/filter/full-site-editing
For a site like this, how would you recommend I prepare for a redesign in the CLEANEST way possible? I plan to remove all themes and essentially start from scratch, but I want to maintain my content and just design with a clean slate
For the most part, changing your theme is a lot like changing the clothing on a mannequin. Your content (pages, blog posts, uploaded media) don’t go anywhere or change that much… they just assume the style of the new theme
One exception is the homepage template, as different themes approach setting up the homepage differently, so the settings of your old theme likely will not carry over. But you would find it easy to set up a new homepage with a custom feed of blog posts, since all the posts will already be there and ready to populate the layout.
Is there a way to get the Navigation block to behave as a simple drop-down, and then can you style that?
I’m not sure what you meant by “behave as a simple drop-down” but I do see that ajhauser.com uses the overlay menu option currently. Do you have an example handy of a menu you are trying to create? Say on another site somewhere?
Or do you mean you want to change the navigation settings on ajhauser.com to display a standard menu instead of the current overlay? If so that is shown in the video I’ve linked here: Change Navigation to Standard Menu – Video
Thanks for the additional info!
-
Thank you so much for the response! Here is a site with a drop-down navigation setup as an example:
See how you can mouse over “Products” and a drop-down opens up? Can you do this with FSE / WP or is it some sort of option in the navigation block?
Thanks!
-
Thanks for the example! Both themes have a drop down, but your theme styles yours differently. It might help us to inventory the differences so we can understand for sure which differences matter to you:
- Your theme has a little arrow thing on top. Theirs doesn’t.
- Yours creates a black box with rounded corners. Theirs has a grey box with normal corners.
- Yours shifts down a few pixels below the top menu item, mainly to make room for the “arrow thingy” I mentioned earlier. Theirs sites right below the top menu item.
- Yours is black, theirs is grey
- Their text is italicized
- Your links sometimes wrap across to two lines if the link name is long
- Both menus collapse on mobile. Theirs turns into a pop-out feature, yours actually looks a bit simpler on mobile. Yours does seems to get pushed off the screen a little, though, possibly from some wider content elsewhere in the page. Other pages (like this one) look okay on mobile.
Did I catch all of them? Which features are most important to you?
And yeah, all of these are styling features of your theme. You can’t have a drop down without _any_ styling, nor can you have a site without theme, but you can start with the simplest theme possible and adjust styles accordingly.
how would you recommend I prepare for a redesign in the CLEANEST way possible? I plan to remove all themes and essentially start from scratch
One idea I just thought of: have you considered using the pattern assembler?
I’d suggest testing it out on not-your-live-site so you can get a feel for it; you can use a staging site if you’d like, or start a test site here: https://wordpress.com/support/start/
When you get to the part where you choose a theme, opt to build your own. Then you can pick a header you like, add any sections you like, add a footer, change colors and fonts as you’d like, save. That really just builds out the front page, header, footer, and site style. But the menu is included in that, and the builder’s navigation is pretty simple.
Again, I’d suggest trying it on a test site first to see if it’s what you want, but I think you might like it.
Another option is to start with a bare-bones theme. The pattern assembler uses this one, which has very little styling by default: https://creatiodemo.wordpress.com/
One more idea if you’re interested: we do have a service that can build a site for you. If you’re interested, you can reach out to Built by WordPress.com.
-
Also, I just realized I may have been looking at the wrong site there! If so, apologies! I hope the comparison helps, though, in terms of getting on the same page for what you want in a menu.
-
And yeah — Zoologist will let you change out the menu so it’s not “mobile” by default:
Your theme determines how the menu looks on your site. This guide will show you the various ways you can change the menu’s design. Change the Menu Design in the Site Editor If your theme uses the Site Editor (i.e. you see Appearance → Editor), you can control the menu design from the Navigation block settings. From your dashboard, go to Appearance → Editor. Select the template conta -
Wow – thank you for the in-depth response! I apologize, I pointed to the wrong site – the one I am working on can be seen here:
The menu is the navigation block, and I’m just wondering if this block has some drop-down functionality in the settings? I can style it after the fact using Custom CSS I believe.
Hopefully that makes sense – thanks again, really appreciate the help!
-
Hi there,
Sorry but we are not able to help with ajhauser.com since it is being hosted with another provider.
To explain, we are a fully managed hosting provider and use a custom server environment that is optimized for WordPress, provides built-in security and performance improvements, as well as excellent in-house support for your site questions. You can learn more about the performance and security benefits of our managed hosting here: https://wordpress.com/hosting/
Because of the way we’ve optimized our service, we also use a customized version of WordPress that is different (under the hood) from what you use at GoDaddy. As a result, we do not have access to your site and are not familiar with the source of your issue. We can closely examine sites hosted under your account here, but don’t have insight into how your self-hosted WordPress site is set up.
You definitely have the option to move your site to us so we can provide in-house help, and we offer a migration plugin that will help you move your site to our managed hosting in just a few clicks.
The Move to WordPress.com plugin allows you to start migrating a self-hosted WordPress site to WordPress.com directly from the self-hosted site. Prerequisites The Move to WordPress.com plugin installed on your self-hosted WordPress site. All incompatible plugins deactivated on the self-hosted site. ✅ There is no need to create a site on WordPress.com before you get starUnfortunately though, as it stands now, we are not able to help since it is hosted elsewhere. I can clarify that this theme does not come with additional menu dropdown styles, but you may want to consider using a 3rd party plugin to manage your menu creation, which will expand on the options you have in setting up the functionality and visual appearance of the menus on ajhauser.com.
https://wordpress.org/plugins/search/nav+menu/
Hope that helps. Please let us know if you have any more questions.
-
Thank you but I’m not sure I understand – the only thing at GoDaddy is my domain. The site is a WordPress site on a hosted account. (Not sure if I can share an image here?)
-
Apologies @minimalistfishing – you’re right, that site is here with us. My colleague might have mistyped the address.
The navigation block does have built-in submenues, yes! Here’s how you can add them:
The Navigation block displays a menu of links to help your visitors navigate around your website. This guide will show you how to use it. Add a Navigation Block To add the Navigation block, click on the + Block Inserter icon and search for “navigation”. Click to add the block to the post or page. 💡 Using your keyboard, you can also type /navigation on a new line and press entAnd yeah, if you’re handy with CSS you can style them up as you like. I hope that helps!
-
- The topic ‘Stacking & Responsive Design Using FSE?’ is closed to new replies.
WordPress.com Forums 