This post is also available in: Français (French)
In the previous post in this series, ‘Your First EverWeb Responsive Website 3: Working with Responsive Pages‘, we looked at how to add and move full width and fixed width objects around a responsive page in EverWeb. We also explored the EverWeb widgets that have been specifically created for use in responsive website design.
In this post, we’re going to add a responsive blog to a website…
Adding a Responsive Blog to Your Website
Adding a responsive blog to your website is easy. Click on the ‘Add Page’ button in the Toolbar, then select the Blank Responsive Theme Template’ from the left hand column. Choose the ‘blog’ page style from the right hand side of the page and click on ‘Select’ to add the blog to the website project.
Converting a Fixed Width Blog to a Responsive Blog
If you have already created a blog it probably has a fixed width page layout (i.e. centered or left aligned). You can change this to be ‘Responsive’ in the Page Layout section of the Page Settings tab of the Inspector Window for the ‘blog’, ‘posts’ and ‘archive’ pages. If you have just created a fixed width blog or have a blog with just a few objects on its pages this should cause few issues with object placement on the blog pages. If however, you have more than a couple of objects on the page you’re converting, EverWeb will warn you that changing the page type can’t be undone and do you want to proceed regardless?
Changing the page layout of existing pages from a fixed to responsive layout (and vice versa) is a fundamental step to take as the two layout styles are fundamentally different in how they work, so you will typically have to reconstruct the pages in your project. When moving from a fixed to responsive page layout, objects will be displaced and your pages may appear quite messed up. So caution is advised because as the warning message states, changing the page layout type cannot be undone. Therefore, it’s best to make a duplicate of your existing project file and work on that rather than an existing (and probably ‘live’) project file.
Working with a Responsive Blog
If you’ve added a new responsive blog to your website, you’ll notice that the blog widget (i.e. the blog index on the page) is a full width object. A left and right margin of 30 is included which can be changed in the Metrics Inspector if desired. If you’ve converted your blog from a fixed width page layout, make the blog widget ‘Full Width’ in the Metrics Inspector and add Left and Right Margins.
The ‘Made with Love with EverWeb’ logo is included in a Responsive Row widget in the Footer of the page. If you have converted your blog to a Responsive blog, you may find that the footer content has moved in to the main body of the page, so you’ll need to move these objects back in to the Footer. Using a Responsive Row widget in the Footer will keep these objects properly located and scaleable within the responsive page layout.
Reorganizing your blog main, posts and archive pages can be achieved relatively quickly, but bear in mind that when doing so you may need to modify your fixed width design ideas to suit responsive design methods. This may mean exploring EverWeb’s new responsive widgets, using third party widgets, or thinking about new ways to achieve what you want for all devices, mobile through to desktop. We’ll be exploring this subject more in our next post!
Using a Cover Image in Blog Posts
EverWeb’s blogging environment has seen little outward change between version 2.7 and 2.8 as many aspects of the blogging were already responsive ready e.g. the blog post editor and the Facebook and Disqus Comment Engines. EverWeb 2.8 has introduced ‘Max Image Width’ and ‘Max Image Height’ options to the ‘posts’ page Widget Settings. These settings define how large you want the blog post cover image to be. First select the image that you want to use for your cover using the ‘Post Image’ ‘Choose…’ button. Next select where you want the image to be displayed using the ‘Style’ option. The image can be either above the post, or aligned to the left or right of the post. Next use the Max Image Width/Height options to set the maximum height and width of the image. If you use zero, the image will be displayed at its original size.
In this post we have briefly touched upon converting a website from a fixed width page layout to a responsive page layout. In the next blog, we’ll look at this subject in more depth…
If you have a comment or question or tips for other EverWeb users, please let us know! We would love to hear from you!
This post is also available in: Français (French)
Comments