Welcome to the MFL Theme created for Melanie Freundlich Lighting Design. My goal in creating this theme was to try and make this website as user-friendly as possible and to anticipate and meet your objectives.

The purpose of this page is to hopefully help answer questions and to serve as a tutorial page as you continue to build and grow your website. As part of an ongoing process, I will post to this page as long as you continue to have questions. Additionally, I will add my contact information in case you want to reach out to me directly.

Blocks
WordPress organizes content on its platform through the use of “Blocks.” Blocks are containers of content that are added by clicking the plus ( + ) sign at the upper-right of the dashboard window and, through their use, how one begins to build pages on their website. Each block contains a variety of different types of content and is moveable enabling the user to organize content up and down on the page. WordPress also, in an effort to be helpful, organizes Blocks in groups (i.e. Most Used, Common Blocks, Formatting, etc.). To begin building a page you start by giving the page a title and adding a “Block.”

Images
WordPress makes adding images very simple. On your Dashboard and to the left above “Pages” and below “Posts” is where one finds “Media.” Inside you will find your “Media Library” and where you can “Add New” images. My one note about adding images is to be aware of the image size you’re uploading (size matters and if you have large images they can slow down your website). I recommend no larger than 1500 pixels wide and 72 dpi, however, think about the type of image it is. For example, a headshot that is going to most likely run small may not need to be any larger than 400 pixels wide.

Grid Systems
This website is built primarily on a six-column grid. You can decide and alter the width of items—text column or photo sizes—based upon how many columns they span. Column widths are placed on items by opening the Advanced Tab (in the column on the right) and giving the item a “CSS Class.” For example, if you click inside this text box and open the Advanced Tab you should find written, “col-3-6.” By giving this text box that “Class” we are saying this text box spans 3 of the six columns. I also gave the image next to this text box a class of “col-3-6” so that it aligns next to it and the two equal the full six-column width. You can explore this page to see the classes placed on each item and I’ve also provided more examples of the grid system at work below.

KEEP IN MIND: that if you have one item two columns wide (col-2-6) and another item three columns wide (col-3-6) they will line up next to each other with one column of space left over. Additionally, if you have an item four columns wide (col-4-6) and another item three columns wide (col-3-6) there will not be enough space for the two and the second item will be bumped down below the first.

Grid System at Play

Adding A Project
Adding and removing lighting Projects within Project Categories is how I expect you will spend most of the time on your website. I tried to make this process as user-friendly as possible. Each project will include a title, a Project Category in which it lives, images, and text. To add a new project you start by first adding a page and giving the page a Title. Underneath the “Pages” tab at the left on your dashboard click “Add New.” This creates a new page and automatically places your cursor in the “Add Title” box. Give your Project a title and click at the upper-right of the window the blue button, “Publish.” WordPress will ask you if you’re sure, and if you are, go ahead and click “Publish.” Don’t worry, no one will be able to see the page until we go through the next steps of defining what type of page it is and the Parent Page (Project Category) where it lives. Click outside of the Title Box as if you were going to add a new block of content and at the right, below the blue Publish button, you will find a list of expandable tabs (Permalink, Featured Image, Discussion, and Page Attributes). Under “Page Attributes” is where we will define the page by assigning it a Template and to a Parent Page (Project Category). Under the Template Drop-Down Menu choose “Project Page.” Under the Parent Page Drop-Down Menu choose the Project Category that the page will go in. For example, Education, Academic, Cultural, Residential, Commercial, Workplace. Next, under the “Featured Image” tab is where we assign the image to go with that project and which will automatically appear on the Project Category Page with the project title. REMEMBER: always click the “Update” button at the upper-right of the dashboard after you’ve made any updates or your changes will not be saved. Below are screengrabs of the steps above.

Populating The Project Page
We’ve chosen to start each new project with a short sub-title naming the Architect and the Location. Add a new “Paragraph Block” and inside add the names. I chose to make them bold, which you can do through the text-editor, and separated the two with a slash (not bolded). Next is the fun part of adding images. Add a new Block and this time select, “Image.” I recommend choosing one you’ve already added to your Media Library, but you can directly upload one from the desktop if you choose. REMEMBER: Make sure to add a “Class” to each new “Block” defining its size. Also, you can always “View Page” and “Edit Page” from the top bar on your dashboard window throughout the process.

Jason Mischka
website: https://www.jasonmischka.com
email: hello@jasonmischka.com -or- jasonmischka@me.com