Wedding Website

How to Build a Stunning Wedding Website with WordPress

A wedding ceremony is one of the most important, interesting and brightest events in human’s life. Many and many new couples are willing to share their love story, their wedding occasion with others to inspire them. A wedding website can contain a lot of information about couples, their story, the place and time where a wedding is going to be and so on. So, in order to create a well-organized and pretty looking website, it’s very important to find a proper plugin for this goal in WordPress. One of the plugins that can be used for building a stunning wedding website is a Portfolio Gallery plugin.

Let’s discover how can it be applied to a very specific and great theme of a wedding.

Kinsta Hosting

1. Plugin Installation

When writing this post my aim was to show how is it possible to accommodate such a great celebration to one page only. With the help of a WordPress Portfolio Gallery plugin, it is completely possible to do that. Let me try to show how. First of all, let’s start from uploading the plugin to the WordPress site. The zip file can be uploaded by following just simple steps. At the left menu of the dashboard, it is needful to go to plugins > add new > upload the zip file > activate the plugin and go to the dashboard. If the free version was installed on the website it is quite vital to remove the free version before uploading the pro one and clear the cache. So, now when the plugin is installed and it’s time to discover it.

First of all, let’s start from uploading the plugin to the WordPress site. The zip file can be uploaded by following just simple steps. At the left menu of the dashboard, it is needful to go to plugins > add new > upload the zip file > activate the plugin and go to the dashboard. If the free version was installed on the website it is quite vital to remove the free version before uploading the pro one and clear the cache. So, now when the plugin is installed and it’s time to discover it.

2. Portfolio Creation

In order to create a portfolio, it is necessary to go to the Portfolios tab and install images there. After pressing the Add project button the Media Library will be opened. Images should be installed from here.

Portfolio Creation

It is not accidental that the plugin’s developers decided to use the word Project and not a gallery one. The reason is that one portfolio can consist of single projects with their own thumbnails. The main image is the one which should be presented at the first visit of the website.

Later, when the guest of a stunning wedding website will go through the different projects he/she will find additional images. The plus icon under the main image is designed especially for that additional images. It worth to mention that the main image can be simply replaced by pressing a pencil icon at the right top corner of the image or exchanged with one of the thumbnails using drag and drop functionality.

In this website, I am going to have several projects with different titles, descriptions and additional information. They will play the role of tabs which are usually added to the different kinds of websites. This is very important because after a wedding the gallery can be edited and many new projects can be added to the existed gallery.

3. Options’ Overview

So, initially, there is going to be “Our History”, “What to wear?” and “Destination”, projects and later other sections like “Wedding” and “Gifts” can be added. Portfolio plugin is full of very interesting and comfortable views to use but the one I’m going to show in this post is an Elastic Grid view. It is very beautiful and modern one. Initially, the gallery has a simple and modest appearance. It displays images next to each other according to the theme’s width.

Elastic Grid view.

Now, I have 2 columns as my theme container allows especially that quantity of images using the width that I have now. But if there is a necessity of having more than 2 columns then the thumbnails size can be decreased from the element’s styles options in order to have more than two columns.

Showing images properly

The image behavior natural option is for showing images properly without any deviation from the natural image quality.

At the first glance, there is nothing impressionable in the gallery but when hovering over one of the images a guest can see a beautiful and light overlay of the image. After clicking on it the whole beauty of this view can be observed. In this view almost everything is customizable and the grid can be adjusted to the whole website colors and style. Let’s pass one by one to each option which helps to regulate and create such a unique grid.

The grid can be adjusted to the whole website colors and style.

4. HTML Usage

It worth to be mentioned that an advantage of the plugin for code geeks is that plugin is using HTML in the titles and description fields. HTML is a computer language, which helps a website creation process. The text’s style can be changed with the help of it. It can have bullets, paragraphs, breaks, hyperlinks etc. In the case of my website, I decided to use bold and italic font types. And in order to reach my aims, I used the following tags in the title and description fields: <b> and <i>. Any type of style can be applied to a text with the help of tags only. For example, the bold text should have the following appearance <b>text</b>. The same instructions

Any type of style can be applied to a text with the help of tags only. For example, the bold text should have the following appearance <b>text</b>. The same instructions work for other tags as well. The color of title can be easily changed from the options. As there are two titles used in this view: one on the hover and second in the grid itself, then these two options are separated.

The color of title can be easily changed from the options

Thus, the title which is visible on hover is Element Title and the one which is included in the grid itself is Expand title.

What about the expand box itself then its color can be changed too. And even more, the background of thumbnails can be adjusted to the whole grid’s color as well. These options are hidden under the expand description and expand thumbnails option.

background of thumbnails can be adjusted to the whole grid’s color

The expand thumbnails block is designed in a very interesting way. Seems that it is a little bit farther than the images are. The same effect is not very vivid in the case of a light color so I decided to use a dark one.

The expand thumbnails block is designed in a very interesting way.

5. “View More” Button Functionality

Of course, there are many other options about which it is possible to speak but another functionality that is vital to point out is a “View More” button. I decided to turn it to another functionality and use it as a registration form. On one of the few pages, I’ve created a registration form. Thus, if it is added to a separate page it has a definite URL, which needs to be added to that particular project from the admin page.

View More” button

When the “open a new tab” option is selected then after pressing on a “Register now!” button, the link where a guest is getting registered will be opened in a new tab. When it is unchecked, then the page will be just refreshed. Overall, the registration page has the following pretty fine appearance:

Register Now Button

It’s worth to note that in this plugin it’s also possible to add videos as both main images and thumbnails. Thus, instead of images, the videos will appear in the grid. This functionality of the plugin can be used after a wedding when the most and beautiful moments can be added to the websites. But only videos from YouTube and Vimeo can be used here.

6. Slider in a Header

Definitely, having only one portfolio on the page is very convenient but not so attractive enough. Consequently, it will be great to find another plugin which can decorate the website and make it more interesting for the visitors. For reaching this aim one of the WordPress sliders can be used. In this guest post, the Responsive Slider is going to be presented.

After uploading images to a slider it is the right time to get acquainted with the general options. They are very easy to understand and use. Each slide can be customized separately.

Slider general options

Thus, the options consist of general, arrows, thumbnails, bullets and shortcode. Thumbnails and arrows can be shown on hover, always or never. The width and height of the slider can be changed right in the general options. As for me, this plugin stands out with its slider effects as all they are interesting and attractive. In this slider not only Title and Description can be added to the slide but also the button can be used to. Thus, if someone doesn’t want to have a separate project for the registration in the portfolio, that aim can be reached through the slider’s button which one can be adjusted to the particular slider due to the flexible options.

Slider’s button can be adjusted to the particular slider due to the flexible options.

Another option which gives a great variety of choice is “Arrows” options. It is very important to have different versions of arrows in a slider as they need to be suitable for images and a website itself. Thus, for my stunning wedding website, I decided to choose one of the most neutral ones, which will not disturb visitor’s attention.

It is very important to have different versions of arrows in a slider

The most valuable possibility which I appreciate most of all in this plugin is its preview option. Thus, during the process of creating a slider, it is easy to check the created slider and edit it before adding to the page.

So, finally, I got the following result. The view I am using is Fade Clip out. It is very quiet and serene one, especially when the change speed is not very high. Of course, the whole beauty of the slider cannot be presented with the help of a static image but if the person who reads this post will use his/her imagination then the result will be quite interesting.

Stunning Wedding Website

And the last step towards the final website presentation is adding a slider to the page. As I want to have it in the header of my website and full screen, I am going to use a template shortcode and add it to the header.php file of a template. In order to find a header.php file it’s necessary to go to appearance > editor > header.php file > and copy the echo shortcode <?php echo do_shortcode(“[R-slider id=’9′]”); ?> to that file. It will appear right at the top of a page. Thus, the stunning wedding website is ready to share with others now!

Wrapping Up

This is an example of how it’s possible to create a whole website with the help mainly of two WordPress plugins. Only one page was completely enough for expressing positive anxiety and happiness of having a wedding ceremony. This great occasion definitely deserves a gorgeous and well-designed website, which can later become a whole life story.

My name is Anna. I adore creating and sewing dresses. For creating a commercial website (shop) and selling my dresses I use WordPress with its wonderful plugins. I am not a website developer or expert in creating websites, but all those plugins which I use are very simple and they help me in reaching my aims and even dreams. So, if you have any suggestion or advice feel free to contact me on the LinkedIn:

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive WordPress news, updates and deals from our team.

You have Successfully Subscribed!

Share
Tweet
+1
Share
Pin