<![CDATA[Elixir | ]]> https://elixirgraphics.com/ Elixir Copyright 2020 2020-09-23T10:01:18-04:00 <![CDATA[Let's make adding images to your Alloy blog posts easier!]]> https://elixirgraphics.com/blog/let-s-make-adding-images-to-your-blog-posts-easier https://elixirgraphics.com/blog/let-s-make-adding-images-to-your-blog-posts-easier Image Uploads

The first thing that really stands out in the v2.2.0 update for Alloy is its newly added ability to upload images directly into your blog posts without needing to upload them to your FTP server on your own. This means that while writing your post you can use the new Image Upload button in the toolbar to upload an image to your post.

You’l find the small cloud icon in the toolbar, as seen below, which allows you to upload JPG or PNG images directly to your posts:

Image Uploads button

After uploading your image via the Image Upload button the Alloy Editor will then create and insert the correct markdown to insert your image into the post. In addition to the Image Upload feature for your blog post’s content I’ve also change the way the Topper Image works.

If we’re going to have this awesome image upload capability for the blog posts, then we need it for the Topper Image, too. This update changes the Topper Image from a text field to an image upload field (with a nice preview of the image as well). This means you can upload your Topper Images directly in the Editor now as well:

Image Uploads button

We think these two additions to the Editor will speed up everyone’s workflow and make life much easier.

Here’s a quick video about the new Image Upload features:

Topper Plus

I didn’t stop at these features though. In fact I added several other new features, including a new stack that ties into both the new Topper Image upload capability as well as the existing Conditionals stack. This new Alloy stack is called the Topper Plus stack, and it will allow us to create big, bold, banner-like toppers for our individual, full blog posts.

This feature is best shown off in a video, I think. I encourage you to take a look to see just how fun, and powerful this new stack can be:

What else is new?

LEAD PARAGRAPH. Also includes in this update is a Lead Paragraph feature for the Full Post view. This new toggle will transform the first paragraph of your Full Post view into a Lead Paragraph. This will take on the same properties as is seen in the Foundry Paragraph stack when you enable its Lead Paragraph option. This gives a bit of design style to your Full Post view and it looks particularly good in conjunction with the Topper Plus design.

HIDDEN TOPPER IMAGES. This new feature, which is found in the Blog Entries stack, allows you to hide the Topper Images for your blog posts in the Summaries view. This provides a simpler, streamlined view of your summaries while still retaining the Topper Image for each individual blog post, in the Full Post view.

OTHER. I’ve also worked through several minor bug fixes and improvements under the hood, so to speak.

This is a paid upgrade, right?!

Nope. This is again another free update for Alloy, adding a great deal of new functionality and improvements at no added cost. As always, while this version of Alloy is good for an unlimited number of domains, we ask a small donation of just $10 for each domain past 3 that you will be using Alloy on. This will help us with developing Alloy even further and adding more functionality and features. You can find the Extra Domain button on the Alloy Purchase page if you’d like to help out with development.

The update is available right in the Stacks plugin in RapidWeaver. Just do the normal Check For Updates and you should be presented with v2.2.0.

<![CDATA[Introducing the Editor stack for Alloy]]> https://elixirgraphics.com/blog/introducing-the-editor-stack-for-alloy https://elixirgraphics.com/blog/introducing-the-editor-stack-for-alloy While Alloy v1 made blogging relatively simple and kept us all from having to deal with databases or other complicated setups it just wasn’t enough. While it made maintaining your blog easy, it did ask users to upload and manage their posts through FTP software on their server. This meant making sure your blog posts were named just right as well as it meant creating the YAML front matter for each post as well.

Alloy v2 though keeps you from having to do any of that, and makes managing your posts a breeze! Alloy now includes an Editor stack, which is used for building your own online, backend for your blog. It helps you setup a secure login for your backend, as well as a create a page where you can create new posts, edit and delete existing, draft and future posts, as well as download a backup of your entire posts folder.

We’ ve got a couple of video tutorials to walk you through setting up the Editor stack, which can be found on the Alloy Tutorials page, in addition to the main Getting Started video, and much more! I have embedded the two Editor stack videos below, but be sure to check out the Getting Started video on the Tutorials page as well if you’ve not yet setup a blog using Alloy.

In the first video we walk through how to setup your secure login credentials for your blog’s new backend.

In part two of our Editor tutorial we look at how to use your newly setup blog backend for creating, modifying, deleting and backing up your posts.

In addition to the new Editor stack you can still continue to maintain your blog using your FTP software just as you could in Alloy v1. You still create and maintain your posts in the same way you did before. In fact you can do so even if you’re using the Editor stack. This makes maintaining your blog very versatile, allowing you the flexibility to do so as you wish. We also still offer videos on the Tutorials page detailing how to use your FTP software to manage your blog if you’re interested.

The Editor stack will truly make managing your site’s blog so much more enjoyable!

We hope that everyone enjoys this major update to Alloy and has fun creating and maintaining your blog!

This Update is Free

Also, don’t forget — this upgrade is a free update for all existing Alloy users. If you’re not already an Alloy user, keep in mind that you can use Alloy v1 and v2 on an unlimited number of sites. As always, while this version of Alloy is good for an unlimited number of domains, we ask a small donation of just $10 for each domain past 3 that you will be using Alloy with. This will help us with developing Alloy even further and adding more functionality and features. You can find the Extra Domain button on the Alloy Purchase page if you’d like to help out.

Learn More

You can learn more about Alloy on its dedicated site, as well as watch a variety of tutorial videos on the Alloy Tutorials page. There is also a documentation page specifically for the Editor stack if you’re interested in its controls and settings.

Even More

In addition to the Editor stack’s addition I’ve also made several tweaks and enhancements to Alloy’s code, as well as fixed a couple of smaller bugs. I’ve also added a new Time Zone setting, allowing you to select your local time zone. This will aid in getting Future Dated Posts to show up on the site when you expect them to.

I’ve also written a blog post touching on a quirk I ran into with Stacks’ page-wide variables, which Alloy uses for some of its settings. In this blog post I talk about what this quirk is and how we as a group should look at working around it for the time being.

<![CDATA[A quirk of using page scoped Stacks controls]]> https://elixirgraphics.com/blog/a-quirk-of-using-page-scoped-stacks-controls https://elixirgraphics.com/blog/a-quirk-of-using-page-scoped-stacks-controls Stacks introduced page scoped controls a while back for developers. With this added feature it meant that different stacks could be written to share variables.

For instance one stack might have an input control to allow you to set the text for a label. That stack would provide you a control in its settings and then whatever you type into that input would be stored in a variable and the stack could use your text to populate a label in that particular stack.

Normally the stored data would only be accessible to that stack, which is a good thing. But as a developer we now have the ability to choose to allow that variable to be shared across different stacks, or even page scoped files within a stack. This means that text you enter into the input control can be used to populate a label in a totally different stack for example. This is super powerful stuff.

Alloy’s Page Scoped Controls

Alloy has been using this feature for its Posts Folder, RSS settings, etc. for a while now, allowing me to use the values of these controls on a page-wide basis. You’ll notice these controls have a light blue background behind them to indicate that they are page scoped controls. Here’s a look at the controls for the Alloy stack:

Quirky Behavior

These page scoped controls are amazing and work wonderfully as a part of the Stacks API. I flat out could not do some of what I do inside of Alloy without these controls. That said though, there is a small quirk with how they work at the moment when it comes to using them inside of Partials.

When added to a Stacks Partial these page scoped controls act differently than you might expect. If you place the main Alloy Control Center stack in a Partial and add that Partial to a different page, and then change one of these page scoped controls’ settings, that change will not be propagated over to the other instances of the Partial as you’d normally expect. Each page scoped control, those with the blue backgrounds, within each instance of the Partial, will retain their value until it is changed manually in each Partial.

Example Time

Let’s take the new Time Zone control for example, which comes as a part of the free Alloy v2 upgrade. If I were to change the Time Zone setting in our partial example from above, it would change only in the specific instance of the partial where we make the change. The Time Zone would remain set to its original setting in all other instances of the partial. You would need to go and change that setting in each of the Partials to ensure they all match. This is how we found out about this quirk related to page scoped controls during our beta testing.

Is this a bug?

Let me be clear, this is not a bug. I don’t want anyone thinking it is. I have spoken to the Stacks developer, Isaiah and it definitely works this way right now for a reason. So why do I bring it up then? Because I think it could lead to confusion or problems for users if you don’t know about how it currently works.

So what do we do about this?

Since the Alloy Control Center is not a stack that really needs to be made into a Partial I think we’re ok for now. At most you’ll only be using the Alloy Control Center stack on a few pages, so it makes keeping the settings between the instances of the stack pretty easy through just copy and paste for now. If you make a change in the Alloy Control Center stack on one page you can simply copy and paste that stack on to the other pages where it exists in your project, or manually update the settings in those instances.

Also, the Alloy Control Center stack is the only stack in the bundle that uses these page scoped controls. This means you can still make stacks like the Recent Posts, Categories List, and Blog Entries stacks into Partials with no problem whatsoever.

<![CDATA[Updated themes for GDPR requirements [UPDATED]]]> https://elixirgraphics.com/blog/updated-themes-for-gdpr-requirements https://elixirgraphics.com/blog/updated-themes-for-gdpr-requirements [UPDATE 5/15/2018]: There seems to be a bug in RapidWeaver’s handling of one of the theme preference files in relation to the banner features that were introduced in RapidWeaver v7. When I originally made the updates to these themes I added in this preference in to make sure it existed for future updates. Unfortunately this lead to users who had updated their theme(s) to getting an “Exception while exporting site” error in relation to this banner feature. I’ve gone through and re-updated all of the themes below to prevent this problem. If you downloaded any theme updates for the listed theme below before May 5, 2018 you will need to re-download and re-install those themes now. I apologize for the problem. I could not have foreseen this problem as it seems to be a bug within the application’s handling of this setting itself.

NOTE: After completing the installation of any and all theme updates it is probably a good idea to restart RapidWeaver.

Let me start by saying up from that I am no lawyer, so I won’t get into what the GDPR laws mean for E.U. users. I would recommend that if you’re a European user that is worried about the GDPR laws and what they mean for you as a web developer that you should definitely consult with a lawyer.

With that out of the way I want to say that I’ve made some changes to themes to help E.U. users rest a little easier. While I think some of the steps I’ve taken are overboard and go further than what is needed in some cases I have done them to help lift a weight off of some users minds.

The GDPR laws focus on keeping users’ personal data private. Many have interpreted that this means services like Google Fonts, or CDNs which host code libraries like jQuery or FontAwesome can’t be used as they transmit the user’s IP address to said services. While this may, or may not be the case, in an effort to make sure it is not a worry for users I have internalized the code libraries and fonts for the themes I sell in the Elixir store. This means there will be no outside calls to these libraries or font collections.

Getting Updates

I began sending out updates and got only a few themes into doing so before I started getting emails from users asking that I not email them regarding these updates. I can partially understand this, as it will be a lot of updates. I also received a lot of bounced emails indicating users who no longer have or use the email addresses they once used to purchase their products from me. And on top of all of that, many users may not even live in the European Union so they may not need to update as they’re not directly affected by these E.U. laws.

So in an effort to help keep everyone happy I’m going to link to the Order Lookup form provided by Cartloom so that users can lookup their past orders and receive the download links for them at their own leisure. I’m also going to provide a list of all of the themes that have been updated below so you can determine whether or not a theme you’re using has been updated or not.

These are the general updates notes for all of the updated themes:

  • Localizes all libraries: Libraries such as jQuery, FontAwesome, etc are all contained within the theme instead of being loaded from an outside CDN.
  • Localizes all fonts: Any fonts that were previously being loaded via Google Fonts are now contained within the theme internally instead.
  • Updater: Adds in RapidWeaver in-app updater components. This should allow us to do in-app updates for these themes in the future for anyone who updates to these most current versions of these themes.

Here is the link to our Order Lookup form provided by Cartloom:

You can also find the same link in the footer of the Elixir site, below, labeled “Re-download purchases.”

What themes have been updated?

Below is a list of all of the themes that I’ve gone through and manually updated to internalize these code libraries and fonts. You can use the order lookup form above to retrieve the latest version of your themes:

  • Abstract
  • Atmosphere
  • Atom
  • Bamboo
  • Cafe
  • Cake
  • Candy
  • Create
  • Crisp
  • Droplet
  • Feather
  • Geometric
  • Hive
  • Iconic
  • Lightning
  • Lunar
  • Majestic
  • Mint
  • Navigator
  • Prism
  • Ruby
  • Rustic
  • Slate
  • Tesla Pro
  • Tinker
  • Tonic
  • Voyager Pro

You may notice that this is not a full list of every theme I’ve ever built. Any theme that is not on this list has been retired for quite a few years already and has not been sold in the Elixir store for some time now. The retired themes are 99% non-responsive themes as well. These unlisted themes will likely not be receiving this particular update since they’ve been retired for so long now.

What about Foundry?

Foundry is already compliant and ready to go. Since most of its libraries are loaded via Stacks or already included locally within the theme or stacks themselves, there is no need for this particular set of updates. Stacks allows you through its own preferences to choose whether you wish to load your instances of jQuery, FontAwesome, etc through a CDN or locally, so you have control over that yourself.

As for fonts — Foundry’s Typeface stack, which allows you to load Google and Typekit fonts for use in your projects still loads these fonts from a CDN. This is inevitable as I cannot include every font they provide access to within Foundry itself. That being said though I am working on a free update to the Typeface stack for Foundry which will hopefully make loading your own fonts, or those you download from Google Fonts, locally if you like. For now, until said update to Typeface occurs, you can opt to now load fonts from Google Fonts or Typekit if doing so worries you.

I also have some minor tweaks to other stacks in Foundry that will help you be more compliant, but as it is currently, Foundry’s codebase itself can all be loaded locally.

Again, if you need to lookup and re-download your purchases, you can do so here at any time. All of the above themes have been updating in the system to reflect the latest versions.

<![CDATA[Build your navigation bar from scratch using Mega Menu]]> https://elixirgraphics.com/blog/build-your-navigation-bar-from-scratch-using-mega-menu https://elixirgraphics.com/blog/build-your-navigation-bar-from-scratch-using-mega-menu Mega Menu allows us to build a few different types of navigation bars for our sites, as well as to construct them how we like.

We can create a normal navigation bar with links to our various pages all on the top level. This is a pretty straight forward design and one that is quite common in web design. We add our pages manually and rearrange them to our liking.

We can take this simple navigation bar to the next level though by adding drop down menus — the second navigation type that Mega Menu supports. The drop down navigation within Mega Menu is pretty unique in that we can insert various types of content within the drop down menu. We can include normal page links, similar to those in the main, horizontal navigation bar, but we can also add drop zones as well, where we can add various other stacks.

In this video we take a look at the basics of the Mega Menu stack — both the plain navigation items and the drop down menus — as well as walk through how to use drop zones within our drop down menus:

Mega Menu doesn’t stop there though. I’ve included the ability to insert anchor style navigation items within the Mega Menu main, horizontal navigation bar. These items, when clicked, will scroll through the page, landing on an anchor point that you’ve placed using the Anchor stack, which also comes with the Potion Pack set of addons. This allows us to create beautiful, one-page site designs that are simple and easy for your visitors to use.

In this video we take a look at how to setup the anchor navigation items in Mega Menu as well as the destination points using the Anchor stack:

More Videos

Don’t forget we’ve got a lot more Foundry tutorial videos, as well as tutorial videos for the individual Potion Pack addon stacks.

<![CDATA[Create waypoint links within your pages using the Anchor stack]]> https://elixirgraphics.com/blog/create-waypoint-links-within-your-pages-using-the-anchor-stack https://elixirgraphics.com/blog/create-waypoint-links-within-your-pages-using-the-anchor-stack Anchor links allow us to set up waypoints on our pages that we can link to with very specific URLs. This allows us to give out a web address, or link to these anchors within our own pages, that will take our visitors to a specific section of a page.

This type of link is so useful that we’ve also set up the Anchor stack to handle the waypoints for our Mega Menu’s anchor-based navigation as well. Without getting ahead of ourselves though, let’s take a look solely at the Anchor stack today, and in a future video we’ll examine the Mega Menu stack and how the two interact with one another.

In this video we look at building a page with anchor links on them, as well as how these links can be used within the browser.

More Videos

Don’t forget we’ve got a lot more Foundry tutorial videos, as well as tutorial videos for the individual Potion Pack addon stacks.

<![CDATA[Let's take a closer look at the Potion Pack's Zoom stack]]> https://elixirgraphics.com/blog/lets-take-a-closer-look-at-the-potion-packs-zoom-stack https://elixirgraphics.com/blog/lets-take-a-closer-look-at-the-potion-packs-zoom-stack Zoom allows you to setup a lightbox for an image by simply dragging and dropping your image into the stack’s image well. That’s it. You get a beautiful lightbox effect when the image is clicked on. And what’s more impressive is that if the user starts scrolling away, down the page, the image shrinks back down and gets out of their way.

When the Potion Pack launched the stack was pretty barebones, by design, as you’ll see when you watch the original launch day tutorial video, below. Since then I’ve added a bunch of new features to the stack to round its functionality out a bit more. Zoom got the following changes in the v1.1.0 update to Potion Pack:

  • Added ability to align image to the left, center or right.
  • Added ability to add an Alt Tag to your Zoom image.
  • Added image sizing options: Normal, Upscale to 100% and Max-Width settings.
  • Added ability to choose whether the image will be Standard or Rounded.

Here we take a look at how Zoom works:

More Videos

Don’t forget we’ve got a lot more Foundry tutorial videos, as well as tutorial videos for the individual Potion Pack addon stacks.

<![CDATA[Create manually curated vertical navigation in Foundry]]> https://elixirgraphics.com/blog/create-manually-curated-vertical-navigation-in-foundry https://elixirgraphics.com/blog/create-manually-curated-vertical-navigation-in-foundry The Vertical Navigation stack allows us to create a multi-level, vertical navigation that we can insert wherever we like within Foundry based our pages.

This stack is also a manually curated navigation, which means we can construct its hierarchy how we see fit, and not have to rely on the navigation hierarchy of our page list within RapidWeaver. While this means a little more work for us as the developer it does free us up to make our navigation look and function how we like.

The Vertical Navigation stack comes with a wide variety of customizable controls, allowing us to refine how the stack looks and feels so that we can fit it into just about any site design. While all of these controls allow us to tweak the stack, it even looks great right out of the box. In fact that is how I am using it on the Foundry Documentation pages, myself.

In this video we take a look at how the Vertical Navigation stack works as well as some of its features.

More Videos

Don’t forget we’ve got a lot more Foundry tutorial videos, as well as tutorial videos for the individual Potion Pack addon stacks.

<![CDATA[Introducing the Potion Pack addon stacks for Foundry]]> https://elixirgraphics.com/blog/introducing-potion-pack-for-foundry https://elixirgraphics.com/blog/introducing-potion-pack-for-foundry While Foundry includes everything you need to build beautiful and responsive websites for you and your clients, the Potion Pack adds some unique and slightly more complex stacks to your toolbox.

This set of Foundry based stacks provide you with multiple different manually currated navigation systems, grid layouts, highly customizable email forms, stylish slideshows and more! They’ll help you to branch out further and conjure up new designs.

Potion Pack is launching with 20 different stacks:

  • Anchor
  • Angle
  • Backdrop
  • Disqus
  • Form Pro
  • Grid
  • Hover Image
  • Lazy Load Image
  • Mega Menu
  • Mini Navigation
  • Motion
  • Overlap
  • Popover
  • Sections
  • Seek
  • Shift
  • Side Navigation
  • Type It
  • Vertical Navigation
  • Zoom

For details on each of these individual stacks be sure to visit the Potion Pack product page, where you’ll find descriptions for each stack, along with documentation and tutorial videos as well.

I really hope you enjoy the added flexibility that these addon stacks bring to Foundry.

Also, I want to thank all of the amazing Foundry users! I’ve really enjoyed seeing all of the great sites you’re all building with Foundry and really look forward to see what else you all have got coming and how you’ll make use of these new Potion Pack stacks!

<![CDATA[Celebrate Wonder Woman release day with a wonderful wallpaper]]> https://elixirgraphics.com/blog/a-wonderful-wallpaper https://elixirgraphics.com/blog/a-wonderful-wallpaper You can download the Wonder Woman desktop here, and if you’re feeling adventurous, there are a few other superhero wallpapers from a while back that I created.

Looking forward to seeing the movie this weekend, as it looks like it will be a lot of fun! Hope you all can get out and see it as well.

<![CDATA[Foundry Update: Introducing Typeface font management stack]]> https://elixirgraphics.com/blog/foundry-update-introducing-typeface-font-management-stack https://elixirgraphics.com/blog/foundry-update-introducing-typeface-font-management-stack Before we dive into the two new stacks for Foundry I will quickly say that you can find the full release notes for this version over on the Release Notes page on the Foundry site. It details all of the changes, additions, bug fixes and whatnot so you can always stay up to date on Foundry’s evolution. With that said, let’s dive into the two new stacks in v1.2.5.0…


We’ve known for a little while now that font management in Foundry could be better. Foundry shipped with the ability to use standard web safe fonts within the main Foundry Control Center stack and other select stacks even allowed for the use of Google Fonts through their settings. From user feedback we knew the way things were setup wasn’t really an elegant enough, easy-to-use solution and didn’t provide enough flexibility.

So we set out to build a stack that would allow you to manage your web safe and Google Fonts, as well as Adobe’s Typekit fonts, all in one location and then call upon those fonts from other stacks within Foundry.

Typeface - Google Font

Typeface allows you to add font families as child stacks inside of it, and then assign that font family to a typeface. That typeface can then be chosen in other stacks, like the Header or Paragraph stacks, for instance. This method makes sure that your fonts are each loaded just once per page as well as streamlines assigning said fonts to elements on the page. It also opens up a lot more options for Foundry as a whole, as well as lets us more easily integrate with other Foundry stacks without worrying about duplicating font loading.

We’ve created some tutorial videos showing how Typeface works (the overview video is below) as well as how to use Google Fonts and Adobe Typekit within the Typeface stack. Be sure to watch these videos, even if you’re familiar with Google Fonts or Adobe Typekit, as they not only give you an idea of how these services work, but these videos also detail things you’ll need to know when using them in the Typeface stack.

Typeface will make customizing Headers, Page Headers, Paragraphs and more so much easier. You’ll now find Typeface options within these stacks, and more, which allow you to use the fonts you’ve defined in Typeface in these other stacks.

We’ll also be tying this feature into future stacks, where necessary, as well. For more information on Typeface’s settings, be sure to have a look at the Typeface documentation page.


This is another stack I’ve had requests for over time. The Site Map stack adds a very simple, but helpful, site map to any Foundry page. You can easily give your visitors a top-down view of the structure of your site. The stack abides by RapidWeaver’s page settings, so if you hide a page from the navigation for instance, it will be hidden in the Site Map as well. Learn more about Site Map’s features on its documentation page.


With this update we’ve paved the way for future Foundry stacks. We’ve worked on the core code in preparation for a set of Foundry add-ons that are in the works. This set of add-ons will be out later this year. A date for this pack is not yet planned, as things are still in flux. But stay tuned to the blog and I’ll let you know as we get closer.

<![CDATA[Introducing the Lunar theme for RapidWeaver 7+]]> https://elixirgraphics.com/blog/introducing-the-lunar-theme-for-rapidweaver-7 https://elixirgraphics.com/blog/introducing-the-lunar-theme-for-rapidweaver-7 The Lunar theme is a nice, open design that puts a new twist of some of the normal, basic settings usually found in RapidWeaver themes. It also presents you with great ways of presenting your content to your visitors within a sleek, clean design.


This theme allows you to adjust things a little more granularly. For instance, we offer the ability to adjust the width of your page in several ways, setting independent widths for the banner content, main content, footer and various ExtraContent areas. We also have created settings that allow you to set different banner heights for each responsive breakpoint. Choose to have a fixed, fluid or full-height banner for each breakpoint individually.

As always we’ve included ExtraContent areas in Lunar to allow you flexibility over where your content is placed. The ExtraContent areas let you insert content into the banner, footer, a user toggled drop down and more.

While I could go on and on about Lunar’s features, in great detail, I’ll try not to bore you too much. Instead head over to the live preview site to see Lunar in action.

Below I’ve listed out just a few of the theme’s features and theme variations. Be sure to check out the product page and live preview site to learn more. We also have videos on the product page, under the Tutorials tab, that will allow you to have a look at how some of the theme’s features work to give you another look at the theme’s capabilities.

Quick Look

  • Over 50 different color pickers to aid in customizing your pages
  • Custom, drag-and-drop banner functionality
  • 20 different, built-in stock banners
  • Banner overlay and gradient features
  • Choose which breakpoints to display the site logo at
  • Social media badges
  • Buttery smooth banner section animations
  • Stylish drop down navigation
  • Photo album lightbox
  • Responsive video embeds
  • Much more!

Again, you can learn more about Lunar over on the theme’s product page and by checking out the live preview site!

<![CDATA[Organize your content into easy-to-navigate, paginated sections]]> https://elixirgraphics.com/blog/organize-your-content-into-easy-to-navigate-paginated-sections https://elixirgraphics.com/blog/organize-your-content-into-easy-to-navigate-paginated-sections You’re able to create minimalistic layouts that pack a ton of content into a small space using the Pagination stack. This allows you to create simple looking pages that still convey everything you need to to your visitors.

In this video tutorial, below, we look at how the Pagination stack works, as well as take a quick look at some of its features as we build a super simple sample.

More videos

We’ve built a large collection of tutorial videos for Foundry, which you can use to learn about Foundry and many of its stacks. We also have videos showing you how to build out pages using Foundry and much more. So if you’re interested in learning more about using your copy of Foundry, or just want to see some of what Foundry can do before purchasing it, head on over to the Tutorial Videos page to check them out!

<![CDATA[Move visitors through your pages using Foundry's Scroll To stack]]> https://elixirgraphics.com/blog/move-visitors-through-your-pages-using-foundrys-scroll-to-stack https://elixirgraphics.com/blog/move-visitors-through-your-pages-using-foundrys-scroll-to-stack The Scroll To stack let’s you place a button on your page that is connected to a waypoint that you can drag-and-drop elsewhere on your page. When the user clicks your Scroll To button they’re taken to that connected waypoint.

Place one in a full-page banner and then drop the target stack below the banner and you’ve got a nice scroll down button. Insert several in a column and insert their associated target stacks through out the page and you’ve built a simple navigation for a one-page site.

Let’s take a look at the stack and how to use it, as well as some of its features in this short tutorial video:

Learn more

The full documentation page for the Scroll To stack can be found here on the Foundry site.

More Tutorial Vidoes

We offer several tutorial videos for Foundry, and have more in the works. Give them a look and learn all about the wonderful stacks Foundry has to offer! There you will also find a tutorial on building a simple one-page site using Foundry.

<![CDATA[Add eye-catching animations to your pages using Foundry's Reveal stack]]> https://elixirgraphics.com/blog/add-subtle-eye-catching-animations-to-your-pages-using-foundrys-reveal-stack https://elixirgraphics.com/blog/add-subtle-eye-catching-animations-to-your-pages-using-foundrys-reveal-stack The Reveal stack, added in the v1.2.0 update of Foundry, allows you to bring some elements of your page to life using animations of your own. Reveal allows you to add both big and bold animations, as well as small and subtle animations, to your site.

Reveal’s animations trigger, animating your content into existence, as your visitors scroll through your pages. We’ve included several animations styles for you to choose from so that you can pick something that fits the mood of your site and content.

In this video we’ll walk you through the basics of using the Reveal stack as well as look at some of its settings.

More videos

We’ve built a large collection of tutorial videos for Foundry, which you can use to learn about Foundry and many of its stacks. We’ve also got videos showing how to build out pages using Foundry and much more. So if you’re interested in learning more about using your copy of Foundry, or just want to see some of what Foundry can do before purchasing it, head on over to the Tutorial Videos page to check them out!

<![CDATA[Using the Foundry's A/B stack to make the hard design decisions]]> https://elixirgraphics.com/blog/using-the-foundry-s-a-b-stack-to-make-the-hard-design-decisions https://elixirgraphics.com/blog/using-the-foundry-s-a-b-stack-to-make-the-hard-design-decisions In the process of building different layouts and designs to see what works best we end up deleting some works in progress, only to find those were the gems that we end up liking and have to rebuild them from scratch.

The A/B Test stack allows up to create two different layouts and then toggle between them to see how they work with the rest of the page, or site. This is great for helping us as designers to settle on a design. It can also aid us if we have local clients that come to our office so that we can show them two different directions we could take with their site.

In this video we take a look at the A/B Test stack to see how it works and how it can help us in building our sites:

More videos

We’ve built a large collection of tutorial videos for Foundry, which you can use to learn about Foundry and many of its stacks. We’ve also got videos showing how to build out pages using Foundry and much more. So if you’re interested in learning more about using your copy of Foundry, or just want to see some of what Foundry can do before purchasing it, head on over to the Tutorial Videos page to check them out!

<![CDATA[Learn how to organize your content using Foundry's Pagination stack]]> https://elixirgraphics.com/blog/learn-how-to-organize-your-content-using-foundrys-pagination-stack https://elixirgraphics.com/blog/learn-how-to-organize-your-content-using-foundrys-pagination-stack The Pagination stack allows you to separate your content into sections which can be paged through by your visitors. This lets you organize a lot of content into a small amount of space, keeping a well organized, minimal feel to your site.

In this video we show you how the Pagination stack works as we build out a very simple Pagination stack. We also take a look at the options that the stack offers, which you can use to customize the look and feel of the stack as well as its functionality.

Learn More

You can learn more about the Pagination stack through our Documentation pages, where we detail all of the stack’s features as well as show off a live example of the stack. You can use that page, along with the rest of the Documentation pages, as a reference when you’re building your site using Foundry.

More Videos

We’ve built a large collection of tutorial videos for Foundry as well, which you can use to learn about Foundry and many of its stacks. We’ve also got videos showing how to build out pages using Foundry and much more. So if you’re interested in learning more about using your copy of Foundry, or just want to see some of what Foundry can do before purchasing it, head on over to the Tutorial Videos page to check them out!

<![CDATA[Free Foundry v1.1 update is here, and it is a big one]]> https://elixirgraphics.com/blog/the-free-foundry-v1-1-update-is-here-and-it-is-a-big-one https://elixirgraphics.com/blog/the-free-foundry-v1-1-update-is-here-and-it-is-a-big-one When I launched Foundry back in July of this year it already included a pretty wide array of tools for constructing a site from the ground up. It contained a lot of the fundamental tools you’d need to build your site, along with some fun additions like the Side Slide, Icon Bar, Social Badges stacks, and more.

I’ve always intended for Foundry to grow over time. Not just adding features to existing stacks, but also incorporating new stacks into the base Foundry suite of tools. This update does just that. We’ve added 10 new stacks to Foundry as well as made small improvements to many of the already existing stacks.

Let’s have a really quick look at just a few of the new stacks:


Add buttery smooth animations to your page elements. Choose from over 30 different animation styles to create eye-catching effects.


Create detailed tables to house your data. The Table stack presents your information in a beautifully structured format that is easily sortable by visitors.


Add a button to your page that will automatically scroll the browser to a pre-defined waypoint on your page, designated by a child-stack you place.


Create sections of content that gain a navigation bar below them, allowing your visitor to move through your content a section at a time.


Center your content vertically within this stack, using fixed heights, which can bet set to different heights at each breakpoint.


Add styled code snippets to your pages, allowing you to share code with others, create tutorials, provide coding examples and much more.


We’ve also added A/B Test, Hold, Read Length and Table (CSV) stacks to the long list of Foundry tools. You can see the full Release Notes here where we list out each new stack, along with a list of additions and bug fixes to the current lineup of stacks.

In addition to the Release Notes we’ve also added pages to the Documentation section for each of the new stacks, as well as a host of new tutorial videos in the Videos section.

This is a free update for all users and is available via the Stacks updater. We hope you enjoy these new stacks and the updates to the existing stacks.

Give Foundry a like

As always, if you’re enjoying using Foundry to build your sites we’d love to know about it. It helps us out greatly on the community site to get a “like” on a product and we always love hearing your comments. So if you have a spare moment or two, a like and / or comment on the Foundry page would be greatly appreciated.

<![CDATA[Foundry's Margins stack is small, but extremely mighty]]> https://elixirgraphics.com/blog/foundry-s-margins-stack-is-small-but-mighty https://elixirgraphics.com/blog/foundry-s-margins-stack-is-small-but-mighty The Margins stack allows you to drop other stacks inside of it, and then set either the margins or padding, or both, around that stack. This doesn’t sound too revolutionary until we look at the fact that you can set different margins and padding for the stack at each of the three breakpoints, making it a responsive dynamo.

Here’s a quick overview video looking at how you can make use of the Margins stack:

In addition to the basic uses of the stack, like having smaller spacing around an object at the smaller breakpoints and more expansive spacing on the desktop, you can also use it to create unique layouts at the desktop or tablet breakpoints, and then have a more normal, simple looking design for mobile devices, where space is at a premium.

I’d encourage you to play around with the Margins stack and try out different settings are the various breakpoints. I think you’ll find it to be a great asset in your site building with Foundry.

More Information

The full documentation page for the Margins stack can be found here on the Foundry site.

More Tutorial Vidoes

We offer several tutorial videos for Foundry, and have more in the works. Give them a look and learn all about the wonderful stacks Foundry has to offer!

<![CDATA[Inspirational Sites Roundup for September 8, 2016]]> https://elixirgraphics.com/blog/inspirational-sites-roundup-for-september-8-2016 https://elixirgraphics.com/blog/inspirational-sites-roundup-for-september-8-2016 We’ve got a nice variety of sites this time around. Lots of different styles and designs.

If you’ve got some sites that inspire you be sure to shoot me an email with a URL, or just send along a tweet to @elixirgraphics. I’m always looking for beautiful sites to feature here on the blog from time-to-time.

Sainte Marie Design Textile

Sainte Marie Design Textile







Ylies Bendi Ouis

Ylies Bendi Ouis