Design options for my Archives pages

  • 1
  • Question
  • Updated 4 years ago
I am in the process of re-vamping my website. I used to have a separate Interviews and Resources pages but I now consolidated them into one page. I'm trying to make my site even leaner than it was before. Trimming the fat so to speak :). I love a minimalist look!

At the moment when you go under Archives, The In Transition and I've Heard That Song Before pages are displayed in three columns. I used a column divider widget with a second added column divider to give the page that three column look. Each year has it's own text (old) widget. I used HTML table code to create the look of each year.

Any ideas on other options I may try other than the three column format that would make it even easier to maintain these pages? Maybe drop down menus or something I may not have thought of that would work seeing that I have so much content to display.

http://www.mcran.com
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
  • hopeful someone will feed me with all kinds of viable ideas I can try out

Posted 4 years ago

  • 1
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Hi Randy,

I see you did go for the flyover menus which is clean, but dare I say too clean?

Keep in mind that "Archives" is still a page that can be clicked on so if a visitor goes there before selecting one of the flyover menu options it looks like this:



I designed a site where I used button link images on the page I had flyovers on so that there was still a visual invitation to go to those pages from the Services page. Take a look and see if that might work for you!

Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Thanks Laura!

You did this in Yola? This is what I had in mind but didn't know how to implement it. Is this part of Yola or did you use another feature?

Thanks again !!

Randy
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Hi Randy,

Yep, that website is all built in Yola with widgets and free of any custom code even.

For the Services page I used Custom Panel Widgets that I designed and saved as Presets to easily replicate the format and settings, then I added a Picture Widget and Text Widget to each Custom Panel inside a Column Divider widget. I then added links to the text and the pictures effectively making *most* of the Custom Panel area clickable.

Here's a peak of it in the Sitebuilder in case it helps to give you a better idea of how I laid it out.

Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
What a beautiful site! How did you create the navbar so that when you click on services you get that nice box where you can select one of the four items without clicking on Services and getting a blank page like I get now when I click on Archives?

How flexible and extensible is the navbar? Should I use my own created navbar using HTML and CSS instead and have it appear on every page on my site?

I like using HTML and CSS because I can keep the code in text files which are very small.

If you take a look at my in transition page, I created the page using HTML with table code. It's inside a custom panel preset. What I would love to do instead of using a custom panel is have a stylesheet linked to my archives pages so that when I make a design change all the pages will change accordingly.

What I am not clear on is how to implement this inside a HTML widget. I know how to create the CSS file as well as the link to that file but I was wondering if there is anything else I need to do. A visual example of what the code looks like in a HTML widget would help me a lot!!

Thanks Laura!!!
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Hi Randy,

I used the Style Designer to create my Navigation as I am not very comfortable with CSS and it's easy for me to get the look I want and apply it across my website with the Style Designer, all code free.

"Services" is its own page, just like "Archives" is a page on your website. Because I applied the same banner and background to my whole site, all that was left for me to do was add the content as I explained above.

You've lost me on your second request. I will ask our HTML team to take a look and see if they have any suggestions.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Thanks Laura!

What template did you use for the site? I think I understand the second part of the second paragraph. I'll check in to it further.

Thanks again!!!
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
I used SuperFlat Randy!
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Thanks Laura! I just applied SuperFlat to my site and it is starting to take shape.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Randy,

I hope you don't mind me chiming in here. From what I can sort out, I would think you would need to add a line of code in your HTML file that links to your .css file.

The link to your CSS file would look something like this:

<link rel="stylesheet" type="text/css" href="mystyle.css">

I hope that might help. We might have to go back and forth on this to ensure we're on the same page.

Looking forward to seeing how you fare with this.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Hi Sanja!

I knew about the link to a css file. I'll have to try it out again and see if anything breaks. I will try some stuff on my test site.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I agree that testing on a test site is always a good and safe precaution to take. Let us know how this goes!
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
I just implemented the Superflat template. Very nice. I'm taking Laura's advice on putting links on the Archives page. I would like to make the whole box a link instead of having blue lines under the links. Is there a way to clean this up? I tried using the Style Designer but it didn't seem to do anything.

All Ideas welcome!!

www.mcran.com
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Check out my site now. I'm still working on some things but this is what I have come up with so far.

www.mcran.com
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Nice job on your Archives page, nothing like a good site refresh! :)

My best work around was to make both my pictures and text links which made the majority of the "button" area clickable. You can customize your links not to be underlined in the Style Designer but that does mean that would apply to other links in your site which you may not like.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
I'll leave the links alone. I have both the links and the pictures linking to the appropriate pages. Works fine!

I really liked that idea about modifying the Archives page. Makes total sense. Thanks again Laura!!

I'm still using some html as in the area on the main page where I have my shows for August. I plan having this change every month so that I always have a months worth of playlist and shows on the main page for visitors to check out. I used html for this because it is faster to maintain, unless you know of something that will automatically change the shows/playlists for me on the front page?