# Design Editor
**Important:**
* Changes must be saved and published to reflect in the app!
* Always use the preview screen to check how your change affects the app, and scroll between different app functions to make sure everything is looking well (for example check that you don't have white text on a white background).
**The design editor is divided into a few sections-**
The **home page** section controls the components that are included in the main page of the app in both desktop and mobile:
The **general styles** section controls all the generic settings for the whole app.
The **components** section overrides specific components that are not included in the general styles section.
The menu page controls the components in the menu part of the app.
Each component has fields and parameters that can be changed, such as colors, fonts, padding, borders, etc.
**Please watch** [**THIS**](https://www.loom.com/share/cbffc2c511704bcba1cc60a72fd02ef6) **video, which explains what the different fields affect on the component.** The example is on the buttons - note that some of the fields are showing too much difference, but they might be more effective in other components.
## Main Components
### Button
Controls **all** the buttons of the platform; editing other button components (e.g. homepage buttons) will override the changes of this component.
To change the button background color and text, go to components> button:
### Card
Controls most of the 'cards' in the platform, such as the location's background image, menu items, serving option background, modifiers background, etc - below is an example of the checkout screen cards
To change the header card, go to general style> header background color:
To change the main card background color and text, go to general style> card
To edit the promo code card, visits, and points- go to components> card:
**Service option Card**
To change the background color of this card, and the text color- go to Components> service option card
**Card Title**
Controls the titles of most of the cards (see Cards above) - below is an example of a card title with uppercase
### Header
Controls the header of the platform
### Header Login Button
Controls the login button at the top right side of the platform - also the 'Login' version and also the human head icon version
### Desktop Footer
Controls the bottom line of the **desktop** version, where it says 'Terms of Service, Privacy Policy
### **Tabs**
Controls the serving option tabs in the location selection page - see example below of tabs in black color
### Tab Selected
Controls the SELECTED TAB only - see the example below of the selected tab in uppercase
### Locate Me Button
Controls the Locate Me button, as can be seen in the example above (under Tabs)
### Input
Controls all the components that the customer can enter text in, such as the 'Enter address' text bar in the location page, order date and time (see below with gray background), Enter Promo Code bar, birthday date when signing up etc
### Input on card background color-
To change this part, go to general styles. It will change those sections:
### 
### Title On Background
Controls the menu categories in the actual menu (not in the categories bar!)
### SignupTitle\SignupGreeting
Controls the signup title (in gray below) and greeting (in red below)
### Gifts Header Title
Controls the 'Redeem a Reward or Share' title, in the 'My Rewards' section
### **Deal Badge (price)**
Controls the price view of **deals only**
### List Card Title
Controls the titles of the **menu items** only
### **Location Select Card**
Controls the location selection card without the image section - see in gray background below
### Slim Button
Controls the 'Contact us' and 'Send a gift card' buttons on the homepage, along with the 'Order for later' button on the locations selection page, the 'Add a promo code' and 'Allergens' buttons on the menu screen
### Warning Message Notice
Controls the different warnings, such as 'please enable location' - see below in pink background
### Category Menu
Controls the menu categories bar (left bar on desktop, top bar on mobile)
### Menu Header
Controls the '{serving option} from {location}' section - see example below in pink
### Menu Item Price
Controls the prices on the menu
### Service Option Card
Controls the serving option card, where you can select the time and date of the order (see below in gray background)
### Service Option Title
Controls only the title of the serving option in the serving option card (see above)
### Change Serving Option Link
Controls only the 'change' button in the serving option card (see above)
### Home Page Components
**Home Buttons Mobile\Desktop -** Controls the buttons of the homepage only
**Home First Title:** Controls 'Welcome to' in desktop
**Home Mobile First Title:** Controls 'Welcome to' in mobile
**Home Second Title:** Controls the business name (second title, after 'Welcome to') in mobile
**Home Main Title Desktop:** Controls the business name (second title, after 'Welcome to') on the desktop
**Home Extra Title Desktop:** Controls the 'Let's get started' title
**Start New Order Popup Title:** Controls the 'what would you like to do' line in the 'Start New Order' popup, see below in black background
**Social Links**
In the home page > more> Left-Align Social Links will change the position between the middle and left side
Change the height of the social media icons (getting them closer or farther than the title logo) by going to the home page components> desktop title logo> height
To change their color background, go to general styles and change the **action color**
To change the header card, go to general style> header background color:
