In this tutorial, we will begin to design the Wix Events app to match our existing wedding website. The Wix Events app is very flexible in that it has many options for how the wedding details and RSVP button are displayed on the webpage.

Let's find out how to customize the Layout design settings for the app. Open the webpage containing the Wix Events app and select the app.

1. Click the Settings button to open the Settings window.
   
   
2. Click My Events from the menu on the left and then select the Our Wedding event.
   
   
3. Choose Layout from the left menu and let's take a look at all the options.
   
   General Layout
   
   Horizontal: We can keep the default Horizontal option with the image placed to the side of the text.
   
   Vertical: The Vertical option will place the image above the text.
   
   Compact: This option places the text and button over the image. This is a good option when you have little space on the page.
   
   Button: With this option, we will only display the RSVP button. This is a good option when you want to put an RSVP button on several pages of the website.
   
   Image Layout
   
   We can turn off the image using the toggle button and only the text and button will be displayed. If we keep the image displayed, we can customize the image further.
   
   
4. Click the Customize Image link to display the options.
   
   Position: Our first decision is to place the image to the right or left of the text.
   
   Proportions: Use the slider control to set what percentage of the display is dedicated to the image and to the text. As you can see, we can set the image to two thirds of the display and the text to one third.
   
   In the Advanced Settings, we can control what part of the image is displayed.
   
   Resize Options
   
   Fit: This will reduce the image until all of the image is displayed. If the image doesn't fill the space, the background color will show.
   
   Crop: This is the default setting. It displays as much of the image as possible and will crop the image if necessary. When using this setting, we can use the Position grid to determine what part of the image will be seen.
   
   Let's go back to the top of the Customize Image settings and click the Back button to go back to the main Layout options. Under the Customize Image link, we have the Text Layout section with three options.
   
   Text Layout
   
   Vertical: This option will place the event Title, When and Where information, RSVP button and the social icons in a vertical list in that order.
   
   Side by Side: This option will place the When and Where information side by side.
   
   Compact: This option will place the When and Where on the same line.
   
   

Screenshots used by permission of Wix.com, Inc.