App Home Screen Layout Editor

The Layout Editor is a user-friendly tool that allows you to edit and/or create beautiful layouts for your Church App. We are excited to announce it is now available to every Church Apps customer. When you log into your App dashboard you will see the Layout Editor in the left navigation panel.

The most used layout in the Church App is the home screen. Churches can now update their app home screen quickly and easily without needing to schedule those edits with the Tithely team.

User Permissions needed to access Apps
You must be the Account Owner to access Apps. If you have additional questions please reference this article.

You can update your existing layout or create and publish a new layout for your home screen.

When editing your home screen, you can:

• Change out pictures
• Add new areas/tiles to the layout
• Drag tiles around in the home screen to rearrange them
• Create a new layout that is connected to your current home screen to add more content

Check out these short videos to help get you started!

Layout Editor - Getting Started

Summary of the Layout Editor "Getting Started" Video

This video introduces the new Layout Editor, a feature for customizing the church app's design, which will be available to all users starting in mid-February.

Key Features & How it Works:

• Access: The Layout Editor can be found in the left-hand menu of the admin panel.

• Interface: It features a user-friendly, drag-and-drop interface. You can see a "content map" on one side and a live, interactive preview of your app on the other. Changes can be made from either side.

• Create or Edit: You can edit existing layouts or create entirely new ones from various templates.

• Templates: When creating a new layout, you can choose from different templates that come pre-filled with sample content to help you visualize what your app could look like.

Important First Steps:

• For Users on the Old "News Feed": If you are still using the original "News Feed" layout, you will need to click "Add a New Layout" to start using the new editor's features.

• CRITICAL ADVICE: Before you make any changes, find your current live layout (usually named "Home") and create a duplicate. This allows you to experiment freely on a safe copy without affecting your live app.

• Next Steps: Other videos are available that provide more detail on specific settings and explain how to make your new, edited layout the live "Home" page once you are ready.

Layout Editor - 3 Easy Edits to Your Home Layout

Summary of the "Making Common Edits" Video

This video focuses on how to perform the three most common edits that users want to make to their app layout. The Layout Editor was specifically designed to put the power to make these changes directly in your hands.

The three most common changes are:

1. Adding and removing tiles.

2. Changing a tile's picture.

3. Changing what happens when a tile is tapped (its action or link).

1. How to Add and Remove Tiles

To Add a Tile:

• Click the "Add Items" button to open a panel of available content blocks (e.g., General Block, Web Page, Email, Phone Call).

• Simply click and drag the desired block from the left panel and drop it onto your app preview on the right.

• Once added, you can click on the new generic tile to configure it by changing its size, title, image, and action.

To Remove a Tile:

• Method 1: Click the small trash can icon on the tile you want to delete.

• Method 2: Click and drag the tile from the app preview back over to the left panel until a red box appears, then release it.

2. How to Change a Tile's Image

After clicking on a tile to edit it, you can change its background image. The process differs slightly based on your user role:

• For Primary Account Owners: You will see a "Media Modal" button. This gives you access to:

  • Your Media: Images your church has uploaded. This library is shared across other products (like Tithely Sites and Pay), so you only need to upload images once.

  • Tithely Media: A free library of stock media that is updated with new content every month.

• For Other Admins: You will see a text field where you must paste a direct URL to an image. The image must be hosted online (e.g., on your church website).

3. How to Change a Tile's Action (Link)

After clicking a tile, you can change what it does when a user taps it. You have two main options:

• Link to an external web page:

  1. Set the action type to "Web Page."

  2. Paste the full URL (e.g., a registration page for a youth camp) into the URL field.

• Link to another area within the app:

  1. Set the action type to "Another area item."

  2. Use the dropdown menu to select an internal destination, such as the Bible, a specific Sermon Series, or a Live Stream.

  3. The menu is context-aware; for example, if you select "Sermon Series," it will only show you the sermon series you have available.

Layout Editor - Content Overview

Summary of the "Content Area" Video

This video explains the function of the Content Map, a key feature within the Layout Editor. This feature is especially useful for complex, layered designs like the "Featured" layout.

The Challenge with Layered Layouts

In layouts with layered elements (e.g., a section that contains multiple clickable cards), it can be difficult to select the correct item to edit using only the interactive preview.

For example, a user might want to edit the entire "Get Involved" section to add a new card, but they might accidentally click on an individual card within that section, which doesn't give them the options they need. This can be confusing.

The Solution: The Content Map

To solve this, a Content Map was added to the left-hand side. It provides a clear, hierarchical list of every element in your app's layout.

• Navigating Layers: When an item in the map has a caret icon (>) next to it, it means it's a parent element that contains other "child" elements. Clicking the caret will expand the list to show the items nested underneath.

• Easy Editing: The map is fully interactive. Clicking on any element in the map (whether it's a parent section or an individual card) will instantly:

  1. Highlight that specific element in the live preview on the right.

  2. Bring up the correct editing options for that selected item.

• Live Changes: Any changes you make, such as editing text, will be reflected in the live preview immediately.

In short, the Content Map gives you a precise way to navigate the structure of your app and select the exact element you want to edit, eliminating confusion.

Layout Editor - Settings Overview

Summary of the "Settings Area" Video

This video explains the four main sections found within the Settings area of the Layout Editor.

---

1. Layout Type

This setting allows you to change the entire template of your layout (e.g., from "Featured" to "Stacked").

• IMPORTANT WARNING: While you can change the type on an existing layout, it is strongly recommended that you do not.

• Reason: Different layouts have unique elements and features that do not translate to others (e.g., the side-scrolling cards in the "Featured" layout). Changing the type will likely break your design, cause content to disappear, and create more work than starting a new layout from scratch.

• Best Practice: Only switch between layout types when creating a brand new layout, before you have added and customized your content.

2. Global Styles

This section allows you to make sweeping design changes that apply to all similar elements across your entire layout at once.

• Functionality: You can universally change things like the text size, color, and weight for all tiles, or adjust the color and opacity of background labels on every tile.

• IMPORTANT WORKFLOW: Make your Global Style changes first, before you edit individual tiles. If you edit a single tile and then go back to change a global setting, the global change will override your individual edit.

3. Layout Settings

This section contains general settings for the overall appearance and branding of your layout. You can adjust:

• Layout Name: Change the internal name of the layout you are editing.

• Header Display: Choose to display your church's name as text at the top of the app, or check a box to upload a logo image instead (a PNG with a transparent background is recommended).

• Tile Margins: Increase or decrease the amount of space between your tiles.

• Background Screen Color: Change the background color that is visible in the margins between your tiles.

4. Advanced (Developer Version)

This section provides direct access to the layout's underlying code.

• EXTREME WARNING: For experienced developers only. You should not enter or edit anything in this area unless you have a strong understanding of coding.

• Risk: A single mistake—like a missing comma or period—can break the entire layout and make your app non-functional.

• Disclaimer: The system will warn you before entering. Any changes you make are at your own risk, and the support team cannot recover a layout that has been broken using this advanced editor.

Layout Editor - Making a New Layout for Your Home Screen

Summary: How to Set a New Layout as Your Home Screen

This guide explains how to make a new layout you've created the primary home screen for your app. The entire process is managed within the "Tabs" menu and gives you full control without needing to contact support.

Step-by-Step Instructions:

1. Go to the "Tabs" Menu The key principle to remember is that whichever tab is in the very top slot of the list automatically becomes your app's home screen.

2. Remove the Current Home Screen

   • Find the current home tab at the top of the list and click the "delete" button next to it.

   • Don't worry, this is safe. Deleting a tab doesn't permanently erase it. It simply moves it from the active navigation bar down to the "Addable Tabs" section at the bottom of the page.

3. Add Your New Layout's Tab

   • Scroll down to the "Addable Tabs" section. You will find the tab corresponding to the new layout you created.

   • Click the plus sign (+) to add it to your active tabs. It will likely appear in your "More" menu.

4. Promote the New Tab to the Top

   • Find the new tab you just added in the active tabs list.

   • Click and drag it all the way to the very top slot.

5. Configure and Save

   • Once in the top slot, you can change the tab's icon (e.g., to a home icon) and remove the text label if you prefer an icon-only look.

   • Click the "Save" button to confirm your changes.

6. Refresh Your App to See the Change

   • To see your new home screen live, you may need to refresh the app. The easiest way is to fully close the app on your phone and then reopen it.

Switching Back to Your Old Layout

The process is easily reversible, which is perfect for seasonal themes or special event layouts. Simply follow the same steps to delete the current home tab and then find, add, and promote your original home tab back to the top slot.